﻿<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-l text-gray-800 leading-tight">
                {{ __('دفعات الموردين') }}
            </h2>
            @can('create', App\Models\SupplierPayment::class)
            <a href="{{ route('supplier-payments.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 p-4 rounded">
                {{ __('إضافة دفعة جديدة') }}
            </a>
            @endcan
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <!-- بحث وتصفية -->
                    <div class="mb-6">
                        <form action="{{ route('supplier-payments.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <x-input-label for="supplier_id" :value="__('المورد')" />
                                <select id="supplier_id" name="supplier_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                    <option value="">{{ __('جميع الموردين') }}</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div>
                                <x-input-label for="payment_method" :value="__('طريقة الدفع')" />
                                <select id="payment_method" name="payment_method" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                    <option value="">{{ __('جميع الطرق') }}</option>
                                    <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>{{ __('نقدي') }}</option>
                                    <option value="bank_transfer" {{ request('payment_method') == 'bank_transfer' ? 'selected' : '' }}>{{ __('تحويل بنكي') }}</option>
                                    <option value="cheque" {{ request('payment_method') == 'cheque' ? 'selected' : '' }}>{{ __('شيك') }}</option>
                                    <option value="credit_card" {{ request('payment_method') == 'credit_card' ? 'selected' : '' }}>{{ __('بطاقة ائتمان') }}</option>
                                    <option value="other" {{ request('payment_method') == 'other' ? 'selected' : '' }}>{{ __('أخرى') }}</option>
                                </select>
                            </div>
                            
                            <div>
                                <x-input-label for="date_from" :value="__('من تاريخ')" />
                                <x-text-input id="date_from" type="date" name="date_from" :value="request('date_from')" class="mt-1 block w-full" />
                            </div>
                            
                            <div>
                                <x-input-label for="date_to" :value="__('إلى تاريخ')" />
                                <x-text-input id="date_to" type="date" name="date_to" :value="request('date_to')" class="mt-1 block w-full" />
                            </div>
                            
                            <div class="md:col-span-4 flex justify-end">
                                <x-primary-button>
                                    {{ __('بحث') }}
                                </x-primary-button>
                                <a href="{{ route('supplier-payments.index') }}" class="mr-2 inline-flex items-center p-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-s text-gray-800 tracking-widest hover:bg-gray-400 active:bg-gray-500 focus:outline-none focus:border-gray-500 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150">
                                    {{ __('إعادة تعيين') }}
                                </a>
                            </div>
                        </form>
                    </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>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse ($payments as $payment)
                                    <tr>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $payment->payment_number }}
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $payment->supplier->name }}
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            @if ($payment->invoice)
                                                <a href="{{ route('supplier-invoices.show', $payment->invoice) }}" class="text-blue-600 hover:text-blue-900">
                                                    {{ $payment->invoice->invoice_number }}
                                                </a>
                                            @else
                                                <span class="text-gray-500">{{ __('غير مرتبط بفاتورة') }}</span>
                                            @endif
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $payment->payment_date->format('Y-m-d') }}
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ number_format($payment->amount, 2) }}
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            @switch($payment->payment_method)
                                                @case('cash')
                                                    {{ __('نقدي') }}
                                                    @break
                                                @case('bank_transfer')
                                                    {{ __('تحويل بنكي') }}
                                                    @break
                                                @case('cheque')
                                                    {{ __('شيك') }}
                                                    @break
                                                @case('credit_card')
                                                    {{ __('بطاقة ائتمان') }}
                                                    @break
                                                @default
                                                    {{ __('أخرى') }}
                                            @endswitch
                                        </td>
                                        <td class="p-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <div class="flex space-y-2 space-y-reverse">
                                                @can('view', $payment)
                                                <a href="{{ route('supplier-payments.show', $payment) }}" class="text-blue-600 hover:text-blue-900 ml-2">
                                                    {{ __('عرض') }}
                                                </a>
                                                @endcan
                                                
                                                @can('update', $payment)
                                                <a href="{{ route('supplier-payments.edit', $payment) }}" class="text-indigo-600 hover:text-indigo-900 ml-2">
                                                    {{ __('تعديل') }}
                                                </a>
                                                @endcan
                                                
                                                @can('delete', $payment)
                                                <form action="{{ route('supplier-payments.destroy', $payment) }}" method="POST" onsubmit="return confirm('{{ __('هل أنت متأكد من رغبتك في حذف هذه الدفعة؟') }}');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="text-red-600 hover:text-red-900">
                                                        {{ __('حذف') }}
                                                    </button>
                                                </form>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="p-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                                            {{ __('لا توجد دفعات للعرض') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- ترقيم الصفحات -->
                    <div class="mt-4">
                        {{ $payments->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
