@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.account-statement') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <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" required>
                        <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>
                    <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" required>
                </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" required>
                </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($transactions) && request('bank_account_id'))
        <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">كشف حساب: {{ $bankAccount->account_name ?? '' }}</h2>
                <a href="{{ route('banking.reports.export', ['type' => 'account-statement', 'bank_account_id' => request('bank_account_id'), '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(empty($transactions))
                <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>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <!-- رصيد افتتاحي -->
                            <tr class="bg-gray-50">
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ request('start_date') }}
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    -
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-black">
                                    رصيد افتتاحي
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    -
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    -
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ number_format($openingBalance ?? 0, 2) }}
                                </td>
                            </tr>
                            
                            @foreach($transactions as $transaction)
                                <tr>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $transaction['date'] }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $transaction['reference'] }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $transaction['description'] }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $transaction['debit'] > 0 ? number_format($transaction['debit'], 2) : '-' }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ $transaction['credit'] > 0 ? number_format($transaction['credit'], 2) : '-' }}
                                    </td>
                                    <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                        {{ number_format($transaction['balance'], 2) }}
                                    </td>
                                </tr>
                            @endforeach
                            
                            <!-- رصيد ختامي -->
                            <tr class="bg-gray-50 font-bold">
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ request('end_date') }}
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    -
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-black">
                                    رصيد ختامي
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ number_format($totalDeposits ?? 0, 2) }}
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ number_format($totalWithdrawals ?? 0, 2) }}
                                </td>
                                <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                    {{ number_format($closingBalance ?? 0, 2) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    @endif
</div>
@endsection