@extends('layouts.app')

@section('title', \App\Helpers\TranslationHelper::transFromDatabase('Reconciliation Items', 'عناصر التسوية'))

@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">
        <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('Reconciliation Items', __('عناصر التسوية')) }}</h1>
                <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciliation', __('تسوية')) }}: <span class="font-semibold text-blue-600">{{ $reconciliation->reconciliation_number }}</span> | {{ $reconciliation->bankAccount->bank->name }} - {{ $reconciliation->bankAccount->account_number }}</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>
                <a href="{{ route('banking.reconciliations.show', $reconciliation) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-all duration-200 shadow-md">
                    <i class="fas fa-eye ml-2"></i>
                    <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('View Reconciliation', __('عرض التسوية')) }}</span>
                </a>
            </div>
        </div>

        <!-- Balance Summary -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden lg:col-start-3">
                <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>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-gray-800 to-gray-900 px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-list-check ml-2"></i>
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Transaction Matching', __('مطابقة العمليات')) }}
                </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 cursor-pointer">
                        <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 bg-gray-50/50">
                <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 border-b border-gray-200">
                        <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>
                            <th class="px-6 py-4 text-center">{{ \App\Helpers\TranslationHelper::transFromDatabase('Actions', __('الإجراءات')) }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white" id="items-table-body">
                        @forelse($items as $item)
                            <tr class="item-row hover:bg-blue-50/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>
                                <td class="px-6 py-4 text-center">
                                    @if($reconciliation->status == 'in_progress')
                                        @if($item->is_reconciled)
                                            <form action="{{ route('banking.reconciliations.items.unreconcile', ['reconciliation_item' => $item->id]) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="inline-flex items-center px-3 py-1.5 rounded-lg bg-amber-100 text-amber-700 hover:bg-amber-200 transition-all text-xs font-bold">
                                                    <i class="fas fa-undo ml-1"></i>
                                                    {{ \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="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-100 text-green-700 hover:bg-green-200 transition-all text-xs font-bold">
                                                    <i class="fas fa-check ml-1"></i>
                                                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Reconcile', __('تسوية')) }}
                                                </button>
                                            </form>
                                        @endif
                                    @else
                                        <span class="text-black text-xs italic">{{ \App\Helpers\TranslationHelper::transFromDatabase('Locked', __('مغلق')) }}</span>
                                    @endif
                                </td>
                            </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 text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('No items found for this reconciliation', __('لا توجد عناصر لهذه التسوية')) }}</p>
                                        <p class="text-sm mt-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Please check if there are any approved transactions for this period', __('يرجى التأكد من وجود عمليات معتمدة لهذه الفترة')) }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('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>
@endsection