﻿@extends('layouts.app')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-2l font-bold text-gray-900 mb-6">تقرير حركة صنف: {{ $item->name }}</h1>

        <!-- فلاتر البحث -->
        <div class="mb-6 bg-gray-50 p-4 rounded-lg">
            <form action="{{ route('inventory.reports.item_movement') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <input type="hidden" name="item_id" value="{{ $item->id }}">
                
                <div>
                    <label for="from_date" class="block text-sm font-medium text-gray-700 mb-1">من تاريخ</label>
                    <input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                </div>
                
                <div>
                    <label for="to_date" class="block text-sm font-medium text-gray-700 mb-1">إلى تاريخ</label>
                    <input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                </div>
                
                <div>
                    <label for="warehouse_id" class="block text-sm font-medium text-gray-700 mb-1">المخزن</label>
                    <select id="warehouse_id" name="warehouse_id" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                        <option value="">جميع المخازن</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}" {{ request('warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                                {{ $warehouse->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="flex items-end">
                    <button type="submit" class="inline-flex items-center p-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                        </svg>
                        بحث
                    </button>
                    <a href="{{ route('inventory.reports.item_movement', ['item_id' => $item->id]) }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mr-2">
                        إعادة تعيين
                    </a>
                    <a href="{{ route('inventory.reports.item_movement') }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mr-2">
                        تغيير الصنف
                    </a>
                </div>
            </form>
        </div>

        <!-- معلومات الصنف -->
        <div class="mb-6 bg-primary-50 p-4 rounded-lg">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <span class="text-gray-700">كود الصنف:</span>
                    <span class="font-bold text-primary-700 mr-1">{{ $item->code }}</span>
                </div>
                <div>
                    <span class="text-gray-700">اسم الصنف:</span>
                    <span class="font-bold text-primary-700 mr-1">{{ $item->name }}</span>
                </div>
                <div>
                    <span class="text-gray-700">الوحدة الأساسية:</span>
                    <span class="font-bold text-primary-700 mr-1">{{ $item->primaryUnit->name ?? 'غير محدد' }}</span>
                </div>
            </div>
        </div>

        <!-- جدول الحركة -->
        <div class="overflow--auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            التاريخ
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            رقم المستند
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            نوع المستند
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            من مخزن
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            إلى مخزن
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            الكمية
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            الوحدة
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            التأثير
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">
                            الرصيد
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($formattedMovements as $movement)
                        <tr>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ \Carbon\Carbon::parse($movement['date'])->format('Y-m-d') }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $movement['document_number'] }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $movement['document_type'] }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $movement['from_warehouse'] }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $movement['to_warehouse'] }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ number_format($movement['quantity'], 2) }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $movement['unit'] }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm {{ $movement['effect'] > 0 ? 'text-green-600' : ($movement['effect'] < 0 ? 'text-red-600' : 'text-gray-900') }}">
                                {{ $movement['effect'] > 0 ? '+' . number_format($movement['effect'], 2) : number_format($movement['effect'], 2) }}
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ number_format($movement['balance'], 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="p-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                                لا توجد حركات للصنف في الفترة المحددة
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection