@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.reconciliations') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label for="account_id" class="block text-sm font-medium text-black mb-1">الحساب البنكي</label>
                    <select name="account_id" id="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('account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->account_name }} ({{ $account->account_number }})
                            </option>
                        @endforeach
                    </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="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>قيد التنفيذ</option>
                        <option value="completed" {{ request('status') == 'completed' ? '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(3)->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 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($reconciliations))
        <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' => 'reconciliations', 'account_id' => request('account_id'), 'status' => request('status'), 'start_date' => request('start_date'), 'end_date' => request('end_date')]) }}" 
                   class="bg-green-600 hover:bg-green-700 text-white p-3 py-1 rounded-md text-sm">
                    تصدير Excel
                </a>
            </div>
            
            @if($reconciliations->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($reconciliations as $reconciliation)
                                <tr>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        <a href="{{ route('banking.reconciliations.show', $reconciliation) }}" class="text-primary-600 hover:text-primary-900">
                                            {{ $reconciliation->id }}
                                        </a>
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $reconciliation->bankAccount->account_name ?? 'غير محدد' }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $reconciliation->start_date }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $reconciliation->end_date }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ number_format($reconciliation->system_balance, 2) }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ number_format($reconciliation->bank_balance, 2) }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ number_format($reconciliation->bank_balance - $reconciliation->system_balance, 2) }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap">
                                        <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full {{ $reconciliation->status == 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                            {{ $reconciliation->status == 'completed' ? 'مكتملة' : 'قيد التنفيذ' }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="p-4 py-3 bg-gray-50 border-t border-gray-200">
                    {{ $reconciliations->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">{{ $reconciliations->count() }} تسوية</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">{{ $completedCount ?? 0 }} تسوية</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">{{ $inProgressCount ?? 0 }} تسوية</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif
</div>
@endsection