@extends('layouts.app')

@section('title', \App\Helpers\TranslationHelper::transFromDatabase('View Bank Reconciliation', 'عرض التسوية البنكية'))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header Section -->
        <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-black mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('View Bank Reconciliation', __('عرض التسوية البنكية')) }}</h1>
                <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciliation Number', __('رقم التسوية')) }}: <span class="font-semibold text-blue-600">{{ $reconciliation->reconciliation_number }}</span></p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('banking.reconciliations.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-black font-semibold hover:bg-gray-50 transition-all duration-200 shadow-sm">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Back to List', __('العودة للقائمة')) }}</span>
                </a>
                
                @if($reconciliation->status == 'in_progress')
                    @permission('banking.reconciliations.edit')
                    <a href="{{ route('banking.reconciliations.edit', $reconciliation) }}" class="inline-flex items-center px-4 py-2 bg-amber-500 text-white font-semibold rounded-lg hover:bg-amber-600 transition-all duration-200 shadow-md">
                        <i class="fas fa-edit ml-2"></i>
                        <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Edit', __('تعديل')) }}</span>
                    </a>
                    @endpermission

                    @permission('banking.reconciliations.edit')
                    <form action="{{ route('banking.reconciliations.complete', $reconciliation) }}" method="POST" class="inline" onsubmit="return confirm('{{ \App\Helpers\TranslationHelper::transFromDatabase('Are you sure you want to complete this reconciliation? You will not be able to edit it later.', 'هل أنت متأكد من إكمال هذه التسوية؟ لن تتمكن من تعديلها بعد ذلك.') }}');">
                        @csrf
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-all duration-200 shadow-md">
                            <i class="fas fa-check-double ml-2"></i>
                            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Complete Reconciliation', __('إكمال التسوية')) }}</span>
                        </button>
                    </form>
                    @endpermission
                @endif
            </div>
        </div>

        <!-- Info Cards -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Account Info -->
            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="font-bold text-black flex items-center">
                        <i class="fas fa-university ml-2 text-blue-500"></i>
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Account Details', __('تفاصيل الحساب')) }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Bank', __('البنك')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->bankAccount->bank->name ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Account Name', __('اسم الحساب')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->bankAccount->account_name ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Account Number', __('رقم الحساب')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->bankAccount->account_number ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Status', __('الحالة')) }}</span>
                        @if($reconciliation->status == 'completed')
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold">{{ \App\Helpers\TranslationHelper::transFromDatabase('Completed', __('مكتملة')) }}</span>
                        @else
                            <span class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold">{{ \App\Helpers\TranslationHelper::transFromDatabase('In Progress', __('قيد التنفيذ')) }}</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Reconciliation Period -->
            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="font-bold text-black flex items-center">
                        <i class="fas fa-calendar-alt ml-2 text-blue-500"></i>
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Period Details', __('تفاصيل الفترة')) }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Start Date', __('تاريخ البدء')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->start_date }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('End Date', __('تاريخ الانتهاء')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->end_date }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Statement Date', __('تاريخ كشف الحساب')) }}</span>
                        <span class="font-semibold text-black">{{ $reconciliation->statement_date }}</span>
                    </div>
                </div>
            </div>

            <!-- Balance Summary -->
            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="font-bold text-black flex items-center">
                        <i class="fas fa-calculator ml-2 text-blue-500"></i>
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Balance Summary', __('ملخص الرصيد')) }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('System Balance', __('رصيد النظام')) }}</span>
                        <span class="font-semibold text-black">{{ number_format($reconciliation->system_balance, 2) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Bank Balance', __('رصيد البنك')) }}</span>
                        <span class="font-semibold text-black">{{ number_format($reconciliation->statement_balance, 2) }}</span>
                    </div>
                    <div class="flex justify-between border-t border-gray-100 pt-2">
                        <span class="text-black font-bold">{{ \App\Helpers\TranslationHelper::transFromDatabase('Difference', __('الفرق')) }}</span>
                        <span class="font-bold {{ ($reconciliation->statement_balance - $reconciliation->system_balance) != 0 ? 'text-red-600' : 'text-green-600' }}">
                            {{ number_format($reconciliation->statement_balance - $reconciliation->system_balance, 2) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reconciliation Items -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
            <div class="bg-gradient-to-r from-gray-800 to-gray-900 px-6 py-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-list-ul ml-2"></i>
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciliation Items', __('عناصر التسوية')) }}
                </h2>
                
                <div class="flex items-center bg-white/10 rounded-lg p-1">
                    <select id="filter-status" class="bg-transparent text-white border-none focus:ring-0 text-sm">
                        <option value="all" class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('All Items', __('جميع العناصر')) }}</option>
                        <option value="reconciled" class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciled', __('المسواة')) }}</option>
                        <option value="unreconciled" class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Unreconciled', __('غير المسواة')) }}</option>
                    </select>
                </div>
            </div>

            <!-- Stats Bar -->
            <div class="grid grid-cols-2 md:grid-cols-4 border-b border-gray-100">
                <div class="p-4 text-center border-r border-gray-100">
                    <span class="block text-xs text-black uppercase font-bold mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Total Items', __('إجمالي العناصر')) }}</span>
                    <span class="text-xl font-bold text-black">{{ $totalItems ?? 0 }}</span>
                </div>
                <div class="p-4 text-center border-r border-gray-100">
                    <span class="block text-xs text-green-500 uppercase font-bold mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciled', __('المسواة')) }}</span>
                    <span class="text-xl font-bold text-green-600">{{ $reconciledItems ?? 0 }}</span>
                </div>
                <div class="p-4 text-center border-r border-gray-100">
                    <span class="block text-xs text-amber-500 uppercase font-bold mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Unreconciled', __('غير المسواة')) }}</span>
                    <span class="text-xl font-bold text-amber-600">{{ $unreconciledItems ?? 0 }}</span>
                </div>
                <div class="p-4 text-center">
                    <span class="block text-xs text-blue-500 uppercase font-bold mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Completion', __('نسبة الإكمال')) }}</span>
                    <span class="text-xl font-bold text-blue-600">{{ $completionPercentage ?? 0 }}%</span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 text-black uppercase text-xs font-bold">
                        <tr>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Date', __('التاريخ')) }}</th>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Reference', __('المرجع')) }}</th>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Description', __('البيان')) }}</th>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Type', __('النوع')) }}</th>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Amount', __('المبلغ')) }}</th>
                            <th class="px-6 py-4 text-right">{{ \App\Helpers\TranslationHelper::transFromDatabase('Status', __('الحالة')) }}</th>
                            @if($reconciliation->status == 'in_progress')
                                <th class="px-6 py-4 text-center">{{ \App\Helpers\TranslationHelper::transFromDatabase('Actions', __('الإجراءات')) }}</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse($items ?? [] as $item)
                            <tr class="item-row hover:bg-slate-50 transition-colors duration-150 {{ $item->is_reconciled ? 'reconciled' : 'unreconciled' }}">
                                <td class="px-6 py-4 text-sm text-black">{{ $item->date }}</td>
                                <td class="px-6 py-4 text-sm text-black font-medium">{{ $item->reference }}</td>
                                <td class="px-6 py-4 text-sm text-black">{{ $item->description }}</td>
                                <td class="px-6 py-4 text-sm">
                                    @if($item->type == 'deposit')
                                        <span class="text-green-600 font-semibold flex items-center">
                                            <i class="fas fa-arrow-down ml-1 text-xs"></i>
                                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Deposit', __('إيداع')) }}
                                        </span>
                                    @else
                                        <span class="text-red-600 font-semibold flex items-center">
                                            <i class="fas fa-arrow-up ml-1 text-xs"></i>
                                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Withdrawal', __('سحب')) }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-sm font-bold text-black">{{ number_format($item->amount, 2) }}</td>
                                <td class="px-6 py-4">
                                    @if($item->is_reconciled)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-800">
                                            <i class="fas fa-check-circle ml-1"></i>
                                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciled', __('مسوى')) }}
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-800">
                                            <i class="fas fa-clock ml-1"></i>
                                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Unreconciled', __('غير مسوى')) }}
                                        </span>
                                    @endif
                                </td>
                                @if($reconciliation->status == 'in_progress')
                                    <td class="px-6 py-4 text-center">
                                        @permission('banking.reconciliations.edit')
                                            @if($item->is_reconciled)
                                                <form action="{{ route('banking.reconciliations.items.unreconcile', ['reconciliation_item' => $item->id]) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="text-amber-600 hover:text-amber-800 font-bold text-sm underline decoration-dotted transition-all">
                                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Unreconcile', __('إلغاء التسوية')) }}
                                                    </button>
                                                </form>
                                            @else
                                                <form action="{{ route('banking.reconciliations.items.reconcile', ['reconciliation_item' => $item->id]) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="text-green-600 hover:text-green-800 font-bold text-sm underline decoration-dotted transition-all">
                                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Reconcile', __('تسوية')) }}
                                                    </button>
                                                </form>
                                            @endif
                                        @endpermission
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center justify-center text-black">
                                        <i class="fas fa-search text-4xl mb-3"></i>
                                        <p class="font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('No items found for this reconciliation', __('لا توجد عناصر لهذه التسوية')) }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterStatus = document.getElementById('filter-status');
        const itemRows = document.querySelectorAll('.item-row');
        
        filterStatus.addEventListener('change', function() {
            const status = this.value;
            
            itemRows.forEach(row => {
                if (status === 'all') {
                    row.style.display = '';
                } else if (status === 'reconciled' && row.classList.contains('reconciled')) {
                    row.style.display = '';
                } else if (status === 'unreconciled' && row.classList.contains('unreconciled')) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
</script>
@endpush