<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction History | IMMIA FINANCE LIMITED</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root { --zedbank-blue: #0077C5; --zedbank-blue-dark: #005A94; }
        .bg-zedbank-blue { background-color: var(--zedbank-blue); }
        .bg-zedbank-blue-dark { background-color: var(--zedbank-blue-dark); }
        .text-zedbank-blue { color: var(--zedbank-blue); }
        .sidebar { transition: all 0.3s ease; }
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.active { transform: translateX(0); }
        }
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
        .notification-dot { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
        .text-truncate-safe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    </style>
</head>
<body class="bg-gray-50">

@php
    $customer = Auth::guard('customer')->user();
    $hasProfilePicture = $customer->docpath && Storage::disk('public')->exists($customer->docpath);
    $profilePictureUrl = $hasProfilePicture ? asset('storage/' . $customer->docpath) : 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=500&q=60';
@endphp

<button id="mobile-menu-button" class="lg:hidden fixed top-4 left-4 z-50 bg-zedbank-blue text-white p-3 rounded-lg shadow-lg">
    <i class="fas fa-bars"></i>
</button>

<div id="sidebar" class="sidebar fixed inset-y-0 left-0 z-40 w-64 bg-zedbank-blue shadow-lg text-white">
    <div class="p-6 border-b border-zedbank-blue-dark">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                <i class="fas fa-hand-holding-usd text-zedbank-blue text-lg"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold uppercase tracking-tight">IMMIA FINANCE</h1>
                <p class="text-blue-100 text-xs">Client Portal</p>
            </div>
        </div>
    </div>
    
    <nav class="p-4 space-y-2">
        <a href="{{ route('customer.dashboard') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-tachometer-alt w-5"></i><span>Dashboard</span>
        </a>
        <a href="{{ route('customer.applications.index') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-file-invoice-dollar w-5"></i><span>My Applications</span>
        </a>
        <a href="{{ route('customer.loans.index') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-hand-holding-usd w-5"></i><span>My Loans</span>
        </a>
        <a href="{{ route('customer.loan.application.show') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-paper-plane w-5"></i><span>Apply for Loan</span>
        </a>
        <a href="{{ route('customer.payments.method') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-money-bill-wave w-5"></i><span>Make Payment</span>
        </a>
        <a href="{{ route('customer.transactions.history') }}" class="flex items-center space-x-3 p-3 bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-history w-5"></i><span>Transaction History</span>
        </a>
        <a href="{{ route('customer.profile.show') }}" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium">
            <i class="fas fa-user-cog w-5"></i><span>Profile Settings</span>
        </a>
        <form method="POST" action="{{ route('customer.logout') }}" class="mt-8">
            @csrf
            <button type="submit" class="flex items-center space-x-3 p-3 hover:bg-red-600 rounded-lg font-medium w-full text-left transition-colors">
                <i class="fas fa-sign-out-alt w-5"></i><span>Logout</span>
            </button>
        </form>
    </nav>
</div>

<div class="lg:ml-64 min-h-screen">
    <header class="bg-zedbank-blue shadow-sm border-b border-zedbank-blue-dark">
        <div class="flex justify-between items-center px-4 sm:px-6 py-4">
            <div class="min-w-0 flex-1">
                <h1 class="text-xl sm:text-2xl font-bold text-white text-truncate-safe uppercase">Transaction History</h1>
                <p class="text-blue-50 text-xs font-bold opacity-80 uppercase tracking-widest">Client: {{ $customer->customer }}</p>
            </div>
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-3 p-2 rounded-lg bg-zedbank-blue-dark text-white">
                    <div class="w-8 h-8 rounded-full overflow-hidden border border-white">
                        <img src="{{ $profilePictureUrl }}" alt="Profile" class="w-full h-full object-cover">
                    </div>
                    <span class="font-bold text-xs hidden sm:block uppercase tracking-wide">{{ $customer->customer }}</span>
                </div>
            </div>
        </div>
    </header>

    <main class="p-4 sm:p-6 lg:p-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6 card-hover">
            <form action="{{ route('customer.transactions.history') }}" method="GET" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="md:col-span-2 relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        <input type="text" name="search" value="{{ $search }}" placeholder="Search Reference or Loan No..." class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-zedbank-blue focus:border-transparent">
                    </div>
                    <div>
                        <input type="date" name="start_date" value="{{ $startDate }}" class="w-full px-4 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-zedbank-blue">
                    </div>
                    <div>
                        <input type="date" name="end_date" value="{{ $endDate }}" class="w-full px-4 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-zedbank-blue">
                    </div>
                </div>
                <div class="flex justify-end gap-2">
                    <a href="{{ route('customer.transactions.history') }}" class="px-6 py-2 bg-gray-100 text-gray-600 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-gray-200 transition">Reset</a>
                    <button type="submit" class="px-6 py-2 bg-zedbank-blue text-white rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-zedbank-blue-dark transition shadow-sm">Apply Filters</button>
                </div>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <thead class="bg-gray-50/50">
                        <tr class="text-gray-400 text-[10px] font-black uppercase tracking-widest">
                            <th class="px-6 py-4 text-left">Date</th>
                            <th class="px-6 py-4 text-left">Type</th>
                            <th class="px-6 py-4 text-left">Reference</th>
                            <th class="px-6 py-4 text-left">Description</th>
                            <th class="px-6 py-4 text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-50">
                        @forelse($allTransactions as $tx)
                        <tr class="hover:bg-gray-50/80 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-xs font-bold text-gray-600">
                                {{ $tx->tx_date->format('d M, Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-0.5 rounded font-black text-[9px] uppercase tracking-wider {{ $tx->tx_type === 'Disbursement' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700' }}">
                                    {{ $tx->tx_type }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono font-bold text-gray-400">
                                {{ $tx->loannumber ?? $tx->receipt_number ?? 'REF-'.$tx->id }}
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-gray-600">
                                {{ $tx->tx_type === 'Disbursement' ? 'Loan Funds Disbursed' : 'Repayment Received' }}
                            </td>
                            <td class="px-6 py-4 text-right text-xs font-black {{ $tx->display_amount < 0 ? 'text-red-600' : 'text-green-600' }}">
                                {{ $tx->display_amount < 0 ? '-' : '+' }} ZMW {{ number_format(abs($tx->display_amount), 2) }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-20 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4">
                                        <i class="fas fa-history text-4xl text-gray-200"></i>
                                    </div>
                                    <p class="text-sm font-black text-gray-400 uppercase tracking-widest">No matching transactions found</p>
                                    <a href="{{ route('customer.transactions.history') }}" class="mt-4 text-xs font-bold text-zedbank-blue uppercase tracking-widest hover:underline">Clear all filters</a>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>

<script>
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        document.getElementById('sidebar').classList.toggle('active');
    });
</script>

</body>
</html>