@extends('layouts.app')

@section('title', 'تقرير الشيكات')

@section('content')
<div class="container m-auto p-4 py-5">
    <div class="flex justify-between items-center mb-5">
        <h1 class="text-2l font-bold text-black">تقرير الشيكات</h1>
        <a href="{{ route('banking.reports.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white p-4 py-2 rounded-md flex items-center">
            <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="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            <span>العودة للتقارير</span>
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-black">معايير التقرير</h2>
        </div>
        <div class="p-4">
            <form action="{{ route('banking.reports.checks') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label for="check_type" class="block text-sm font-medium text-black mb-1">نوع الشيك</label>
                    <select name="check_type" id="check_type" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">جميع الشيكات</option>
                        <option value="incoming" {{ request('check_type') == 'incoming' ? 'selected' : '' }}>شيكات واردة</option>
                        <option value="outgoing" {{ request('check_type') == 'outgoing' ? 'selected' : '' }}>شيكات صادرة</option>
                    </select>
                </div>
                
                <div>
                    <label for="status" class="block text-sm font-medium text-black mb-1">حالة الشيك</label>
                    <select name="status" id="status" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">جميع الحالات</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>معلق</option>
                        <option value="deposited" {{ request('status') == 'deposited' ? 'selected' : '' }}>مودع</option>
                        <option value="cashed" {{ request('status') == 'cashed' ? 'selected' : '' }}>مصروف</option>
                        <option value="returned" {{ request('status') == 'returned' ? 'selected' : '' }}>مرتجع</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغي</option>
                    </select>
                </div>
                
                <div>
                    <label for="start_date" class="block text-sm font-medium text-black mb-1">من تاريخ</label>
                    <input type="date" name="start_date" id="start_date" value="{{ request('start_date', now()->subMonths(1)->format('Y-m-d')) }}" 
                        class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="end_date" class="block text-sm font-medium text-black mb-1">إلى تاريخ</label>
                    <input type="date" name="end_date" id="end_date" value="{{ request('end_date', now()->format('Y-m-d')) }}" 
                        class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="bank_account_id" class="block text-sm font-medium text-black mb-1">الحساب البنكي</label>
                    <select name="bank_account_id" id="bank_account_id" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">جميع الحسابات</option>
                        @foreach($bankAccounts ?? [] as $account)
                            <option value="{{ $account->id }}" {{ request('bank_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->bank->name }} - {{ $account->account_name }} - {{ $account->account_number }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="flex items-end">
                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white p-4 py-2 rounded-md">
                        عرض التقرير
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if(isset($checks))
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-black">تقرير الشيكات</h2>
                <a href="{{ route('banking.reports.export', ['type' => 'checks', 'check_type' => request('check_type'), 'status' => request('status'), 'start_date' => request('start_date'), 'end_date' => request('end_date'), 'bank_account_id' => request('bank_account_id')]) }}" 
                   class="bg-green-600 hover:bg-green-700 text-white p-3 py-1 rounded-md text-sm">
                    تصدير Excel
                </a>
            </div>
            
            @if($checks->isEmpty())
                <div class="p-4 text-center text-black">
                    لا توجد شيكات تطابق معايير البحث
                </div>
            @else
                <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">
                            @foreach($checks as $check)
                                <tr>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        <a href="{{ route('banking.checks.show', $check) }}" class="text-primary-600 hover:text-primary-900">
                                            {{ $check->check_number }}
                                        </a>
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $check->check_type == 'incoming' ? 'وارد' : 'صادر' }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $check->bankAccount->account_name ?? 'غير محدد' }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ number_format($check->amount, 2) }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $check->check_date->format('Y-m-d') }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $check->due_date->format('Y-m-d') }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $check->check_type == 'incoming' ? $check->drawer_name : $check->beneficiary_name }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusClasses = [
                                                'pending' => 'bg-yellow-100 text-yellow-800',
                                                'deposited' => 'bg-blue-100 text-blue-800',
                                                'cashed' => 'bg-green-100 text-green-800',
                                                'returned' => 'bg-red-100 text-red-800',
                                                'cancelled' => 'bg-gray-100 text-black',
                                            ];
                                            $statusNames = [
                                                'pending' => 'معلق',
                                                'deposited' => 'مودع',
                                                'cashed' => 'مصروف',
                                                'returned' => 'مرتجع',
                                                'cancelled' => 'ملغي',
                                            ];
                                        @endphp
                                        <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full {{ $statusClasses[$check->status] ?? 'bg-gray-100 text-black' }}">
                                            {{ $statusNames[$check->status] ?? $check->status }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="p-4 py-3 bg-gray-50 border-t border-gray-200">
                    {{ $checks->appends(request()->query())->links() }}
                </div>
                
                <div class="p-4 border-t border-gray-200 bg-gray-50">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-white p-3 rounded-md shadow-sm">
                            <h3 class="text-sm font-medium text-black mb-1">إجمالي الشيكات</h3>
                            <p class="text-lg font-bold text-black">{{ $checks->total() }} شيك</p>
                        </div>
                        <div class="bg-white p-3 rounded-md shadow-sm">
                            <h3 class="text-sm font-medium text-black mb-1">إجمالي المبالغ</h3>
                            <p class="text-lg font-bold text-black">{{ number_format($totalAmount ?? 0, 2) }}</p>
                        </div>
                        <div class="bg-white p-3 rounded-md shadow-sm">
                            <h3 class="text-sm font-medium text-black mb-1">متوسط قيمة الشيك</h3>
                            <p class="text-lg font-bold text-black">{{ number_format($averageAmount ?? 0, 2) }}</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif
</div>
@endsection