@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">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2l font-bold text-black">تقرير حركة المخزن: {{ $warehouse->name }}</h1>
            <div>
               <a href="{{ route('inventory.reports.warehouse_movement') }}" ...>
    اختيار مخزن آخر
</a>

                <a href="{{ route('inventory.reports.index') }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-black rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mr-2">
                    العودة للتقارير
                </a>
            </div>
        </div>

        <!-- Filters -->
        <div class="mb-6 bg-gray-50 p-4 rounded-md">
            <form action="{{ route('inventory.reports.warehouse_movement') }}" method="GET" class="flex flex-wrap items-end space-y-4 space-y-reverse">
                <input type="hidden" name="warehouse_id" value="{{ $warehouse->id }}">

                <div class="w-full md:w-auto mb-4 md:mb-0">
                    <label for="from_date" class="block text-sm font-medium text-black 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 class="w-full md:w-auto mb-4 md:mb-0">
                    <label for="to_date" class="block text-sm font-medium text-black 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 class="w-full md:w-auto mb-4 md:mb-0">
                    <label for="item_id" class="block text-sm font-medium text-black mb-1">الصنف</label>
                    <select id="item_id" name="item_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($items as $item)
                            <option value="{{ $item->id }}" {{ request('item_id') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="w-full md:w-auto mb-4 md:mb-0">
                    <label for="document_type" class="block text-sm font-medium text-black mb-1">نوع المستند</label>
                    <select id="document_type" name="document_type" 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>
                        <option value="issue" {{ request('document_type') == 'issue' ? 'selected' : '' }}>أذون صرف</option>
                        <option value="receive" {{ request('document_type') == 'receive' ? 'selected' : '' }}>أذون استلام</option>
                        <option value="transfer" {{ request('document_type') == 'transfer' ? 'selected' : '' }}>أذون تحويل</option>
                    </select>
                </div>

                <div class="w-full md:w-auto">
                    <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">
                        تطبيق الفلتر
                    </button>
                    <a href="{{ route('inventory.reports.warehouse_movement', ['warehouse_id' => $warehouse->id]) }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-black 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>

        <!-- Report Data -->
        <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-black uppercase tracking-wider">التاريخ</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">رقم المستند</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">نوع المستند</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الصنف</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الكمية</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الوحدة</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الحركة</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الملاحظات</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($movements as $movement)
                        <tr>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->date?->format('Y-m-d') ?? '-' }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->document_number }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                @if($movement->document_type == 'issue')
                                    <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                        إذن صرف
                                    </span>
                                @elseif($movement->document_type == 'receive')
                                    <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        إذن استلام
                                    </span>
                                @elseif($movement->document_type == 'transfer_in')
                                    <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        تحويل وارد
                                    </span>
                                @elseif($movement->document_type == 'transfer_out')
                                    <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        تحويل صادر
                                    </span>
                                @endif
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->item?->name ?? '-' }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->quantity }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->unit?->name ?? '-' }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                @if(in_array($movement->document_type, ['receive', 'transfer_in']))
                                    <span class="text-green-600">+</span>
                                @else
                                    <span class="text-red-600">-</span>
                                @endif
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $movement->notes }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="p-6 py-4 whitespace-nowrap text-sm text-black text-center">لا توجد حركات مخزنية في الفترة المحددة</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $movements->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection