@extends('admin.layout')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <style>
        /* Custom styled overrides for JQuery DataTables using plain CSS */
        .dataTables_wrapper {
            color: rgb(71, 85, 105);
            font-size: 0.875rem;
        }
        
        .dark .dataTables_wrapper {
            color: rgb(203, 213, 225);
        }
        
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_processing,
        .dataTables_wrapper .dataTables_paginate {
            color: rgb(100, 116, 139) !important;
            font-weight: 500;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .dark .dataTables_wrapper .dataTables_length,
        .dark .dataTables_wrapper .dataTables_filter,
        .dark .dataTables_wrapper .dataTables_info,
        .dark .dataTables_wrapper .dataTables_processing,
        .dark .dataTables_wrapper .dataTables_paginate {
            color: rgb(148, 163, 184) !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            background-color: rgb(248, 250, 252);
            color: rgb(30, 41, 59);
            border: 1px solid rgb(226, 232, 240);
            border-radius: 0.75rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.2s ease-in-out;
            margin-left: 0.5rem;
            margin-bottom: 0.5rem;
            width: 16rem;
        }

        .dark .dataTables_wrapper .dataTables_filter input {
            background-color: rgb(9, 9, 11);
            color: rgb(241, 245, 249);
            border-color: rgb(30, 41, 59);
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: rgb(79, 70, 229);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        .dataTables_wrapper .dataTables_length select {
            background-color: rgb(248, 250, 252);
            color: rgb(30, 41, 59);
            border: 1px solid rgb(226, 232, 240);
            border-radius: 0.75rem;
            padding: 0.5rem 1.5rem 0.5rem 0.75rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.2s ease-in-out;
            margin-left: 0.375rem;
            margin-right: 0.375rem;
        }

        .dark .dataTables_wrapper .dataTables_length select {
            background-color: rgb(9, 9, 11);
            color: rgb(241, 245, 249);
            border-color: rgb(30, 41, 59);
        }

        .dataTables_wrapper .dataTables_length select:focus {
            border-color: rgb(79, 70, 229);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        /* Table Styling */
        table.dataTable {
            border-collapse: collapse !important;
            border-bottom: 0 !important;
            width: 100% !important;
            background-color: transparent !important;
        }

        table.dataTable thead th {
            padding: 1rem !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            color: rgb(148, 163, 184) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            border-bottom: 1px solid rgb(226, 232, 240) !important;
            background-color: transparent !important;
        }

        .dark table.dataTable thead th {
            color: rgb(100, 116, 139) !important;
            border-bottom: 1px solid rgb(30, 41, 59) !important;
        }

        table.dataTable tbody tr {
            background-color: transparent !important;
            border-bottom: 1px solid rgba(241, 245, 249, 0.8) !important;
            transition: background-color 0.2s ease-in-out !important;
        }

        .dark table.dataTable tbody tr {
            border-bottom: 1px solid rgba(30, 41, 59, 0.4) !important;
        }

        table.dataTable tbody tr:hover {
            background-color: rgba(241, 245, 249, 0.5) !important;
        }

        .dark table.dataTable tbody tr:hover {
            background-color: rgba(30, 41, 59, 0.2) !important;
        }

        table.dataTable tbody td {
            padding: 1.125rem 1rem !important;
            color: rgb(51, 65, 85) !important;
            border-bottom: 0 !important;
        }

        .dark table.dataTable tbody td {
            color: rgb(203, 213, 225) !important;
        }

        /* Paginate button styling */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: 0 !important;
            border-radius: 0.75rem !important;
            padding: 0.5rem 0.875rem !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            transition: all 0.2s ease-in-out !important;
            color: rgb(100, 116, 139) !important;
            background-color: rgb(241, 245, 249) !important;
            margin: 0 2px !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: rgb(148, 163, 184) !important;
            background-color: rgb(30, 41, 59) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: rgb(226, 232, 240) !important;
            color: rgb(15, 23, 42) !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: rgb(51, 65, 85) !important;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229)) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
            border: 0 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            opacity: 0.4 !important;
            cursor: default !important;
            background: transparent !important;
            color: rgb(148, 163, 184) !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            background: transparent !important;
            color: rgb(71, 85, 105) !important;
        }
    </style>
@endpush

@section('content')
    <!-- FLASH ALERTS FOR API KEYS -->
    @if (session('generated_key'))
        <div class="relative bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 rounded-3xl p-6 mb-8 shadow-xl shadow-emerald-500/5 animate-fade-in overflow-hidden">
            <!-- Left accent line -->
            <div class="absolute top-0 left-0 bottom-0 w-1.5 bg-emerald-500"></div>
            
            <div class="flex items-center gap-3 text-emerald-600 dark:text-emerald-400 font-extrabold text-lg">
                <div class="h-8 w-8 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center"><i class="bi bi-key-fill text-lg"></i></div>
                API Client Registered Successfully!
            </div>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">
                {{ session('success') }}
                <strong class="text-rose-500 font-bold block mt-1"><i class="bi bi-exclamation-triangle"></i> Please copy this API key now. It is encrypted in the database and will NOT be shown again.</strong>
            </p>
            <div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center bg-slate-950 text-yellow-500 font-mono text-sm sm:text-base p-4 rounded-2xl mt-4 select-all gap-4 border border-slate-800">
                <span class="break-all">{{ session('generated_key') }}</span>
                <button onclick="navigator.clipboard.writeText('{{ session('generated_key') }}').then(() => alert('Key copied to clipboard!'))" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold transition-all focus:outline-none flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/20 self-end sm:self-auto shrink-0"><i class="bi bi-copy"></i> Copy Key</button>
            </div>
        </div>
    @elseif (session('success'))
        <div class="relative bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 text-emerald-600 dark:text-emerald-400 font-semibold rounded-3xl p-5 mb-8 shadow-xl shadow-emerald-500/5 flex items-center gap-3 animate-fade-in overflow-hidden">
            <div class="absolute top-0 left-0 bottom-0 w-1.5 bg-emerald-500"></div>
            <div class="h-8 w-8 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center"><i class="bi bi-check-circle-fill"></i></div>
            {{ session('success') }}
        </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-black tracking-tight text-slate-800 dark:text-slate-100 flex items-center gap-2">
                Clients & Partners
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Manage API client accounts, customize request costs, and view active balances.</p>
        </div>
        <div class="flex gap-3">
            <button onclick="openModal('rechargeModal')" class="px-5 py-3 border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-850 active:scale-98 transition-all font-bold text-sm focus:outline-none flex items-center gap-2.5">
                <i class="bi bi-wallet2 text-indigo-500"></i> Manual Recharge
            </button>
            <button onclick="openModal('clientModal')" class="px-5 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/20 hover:opacity-95 active:scale-98 transition-all font-bold text-sm focus:outline-none flex items-center gap-2.5">
                <i class="bi bi-plus-circle-fill"></i> Register Company
            </button>
        </div>
    </div>

    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl shadow-slate-100/50 dark:shadow-none p-6 transition duration-200 overflow-hidden">
        <table id="clients-table" class="min-w-full cell-border hover row-border" style="width:100%">
            <thead>
            <tr>
                <th>#</th>
                <th>Company Name</th>
                <th>Wallet Balance</th>
                <th>API Pricing Configurations</th>
                <th>Actions</th>
            </tr>
            </thead>
        </table>
    </div>

    <!-- CLIENT REGISTRATION MODAL -->
    <div id="clientModal" class="hidden fixed inset-0 bg-slate-950/45 dark:bg-black/60 backdrop-blur-sm items-center justify-center z-50 p-4">
        <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-800 w-full max-w-lg p-6 overflow-hidden animate-slide-up relative">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
            
            <div class="flex justify-between items-center mb-5">
                <div class="flex items-center gap-2.5">
                    <div class="h-9 w-9 rounded-xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center"><i class="bi bi-building-add"></i></div>
                    <h3 class="text-base font-bold text-slate-800 dark:text-slate-100">Register Company & Configure Costs</h3>
                </div>
                <button onclick="closeModal('clientModal')" class="h-8 w-8 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl flex items-center justify-center transition-colors focus:outline-none"><i class="bi bi-x-lg text-sm"></i></button>
            </div>
            
            <form action="{{ route('clients.store') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">Company Name</label>
                    <input type="text" name="name" required class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none" placeholder="e.g. Acme FinTech Corp">
                </div>
                <div class="mb-4">
                    <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">Contact Email Address</label>
                    <input type="email" name="email" required class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none" placeholder="billing@company.com">
                </div>
                <div class="mb-5">
                    <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">Opening Balance (Rs.)</label>
                    <input type="number" step="0.01" name="wallet_balance" value="500.00" required class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none">
                </div>
                
                <div class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-5 rounded-2xl mb-6">
                    <h4 class="text-xs font-extrabold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-4 flex items-center gap-2"><i class="bi bi-sliders text-indigo-500"></i> Cost Per API success Call (INR)</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">PAN Verification</label>
                            <input type="number" step="0.01" name="pan_charge" value="4.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">Aadhaar Basic (No-OTP)</label>
                            <input type="number" step="0.01" name="aadhaar_basic_charge" value="2.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">Aadhaar OTP Gen</label>
                            <input type="number" step="0.01" name="aadhaar_otp_charge" value="1.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">Aadhaar OTP Submit</label>
                            <input type="number" step="0.01" name="aadhaar_submit_charge" value="4.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">Aadhaar-PAN Link</label>
                            <input type="number" step="0.01" name="aadhaar_pan_link_charge" value="2.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">GSTIN Verification</label>
                            <input type="number" step="0.01" name="gst_charge" value="5.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-400 dark:text-slate-500 mb-1.5">Bank Verification</label>
                            <input type="number" step="0.01" name="bank_charge" value="4.00" required class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                    <button type="button" onclick="closeModal('clientModal')" class="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-2xl text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-805 text-sm font-bold transition-all focus:outline-none">Cancel</button>
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/10 hover:opacity-95 text-sm font-bold transition-all focus:outline-none">Register & Issue Key</button>
                </div>
            </form>
        </div>
    </div>

    <!-- RECHARGE MODAL -->
    <div id="rechargeModal" class="hidden fixed inset-0 bg-slate-950/45 dark:bg-black/60 backdrop-blur-sm items-center justify-center z-50 p-4">
        <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-800 w-full max-w-md p-6 overflow-hidden animate-slide-up relative">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
            
            <div class="flex justify-between items-center mb-5">
                <div class="flex items-center gap-2.5">
                    <div class="h-9 w-9 rounded-xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center"><i class="bi bi-wallet2"></i></div>
                    <h3 class="text-base font-bold text-slate-800 dark:text-slate-100">Manual Balance Deposit</h3>
                </div>
                <button onclick="closeModal('rechargeModal')" class="h-8 w-8 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl flex items-center justify-center transition-colors focus:outline-none"><i class="bi bi-x-lg text-sm"></i></button>
            </div>
            
            <form action="{{ route('clients.recharge') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">Select Company</label>
                    <select id="recharge_client_id" name="client_id" required class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none">
                        <option value="">-- Choose Company --</option>
                        @foreach ($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->name }} (Current: ₹{{ number_format($client->wallet_balance, 2) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">Deposit Amount (Rs.)</label>
                    <div class="relative">
                        <input type="number" step="0.01" min="0.01" id="recharge_amount" name="amount" placeholder="0.00" required class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none pl-8">
                        <span class="absolute left-3.5 top-3.5 text-slate-400 font-bold text-sm">₹</span>
                    </div>
                </div>
                <p class="text-xs text-slate-400 dark:text-slate-500 mb-6 flex gap-2 bg-slate-50 dark:bg-slate-950 p-3 rounded-xl border border-slate-200/50 dark:border-slate-800/50">
                    <i class="bi bi-info-circle text-indigo-500 shrink-0 text-sm"></i>
                    <span>Crediting balance manually indicates that the client has completed payment offline (e.g. Bank Transfer).</span>
                </p>
                <div class="flex justify-end gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                    <button type="button" onclick="closeModal('rechargeModal')" class="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-2xl text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-805 text-sm font-bold transition-all focus:outline-none">Cancel</button>
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/10 hover:opacity-95 text-sm font-bold transition-all focus:outline-none">Credit Balance</button>
                </div>
            </form>
        </div>
    </div>

    <!-- RECHARGE HISTORY MODAL -->
    <div id="historyModal" class="hidden fixed inset-0 bg-slate-950/45 dark:bg-black/60 backdrop-blur-sm items-center justify-center z-50 p-4">
        <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-800 w-full max-w-2xl p-6 overflow-hidden animate-slide-up relative flex flex-col max-h-[85vh]">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
            
            <div class="flex justify-between items-center mb-5 shrink-0">
                <div class="flex items-center gap-2.5">
                    <div class="h-9 w-9 rounded-xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center"><i class="bi bi-clock-history"></i></div>
                    <div>
                        <h3 class="text-base font-bold text-slate-800 dark:text-slate-100">Wallet Recharge History</h3>
                        <p class="text-xs text-slate-400 dark:text-slate-505" id="history-client-name">Company Name</p>
                    </div>
                </div>
                <button onclick="closeModal('historyModal')" class="h-8 w-8 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl flex items-center justify-center transition-colors focus:outline-none"><i class="bi bi-x-lg text-sm"></i></button>
            </div>
            
            <div class="overflow-y-auto flex-1 pr-1" style="min-height: 200px;">
                <table class="w-full text-left border-collapse min-w-[500px]" id="history-table">
                    <thead>
                        <tr class="border-b border-slate-150 dark:border-slate-800">
                            <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Date & Time</th>
                            <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider text-right">Amount</th>
                            <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider text-right">Prev. Balance</th>
                            <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider text-right">New Balance</th>
                            <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider text-center">Invoice</th>
                        </tr>
                    </thead>
                    <tbody id="history-table-body" class="divide-y divide-slate-100 dark:divide-slate-800/60">
                        <!-- Loaded dynamically -->
                    </tbody>
                </table>
                <div id="history-empty-state" class="hidden py-12 text-center text-slate-400 dark:text-slate-505 font-medium">
                    <i class="bi bi-folder-x text-3xl block mb-2 text-slate-300 dark:text-slate-700"></i>
                    No recharge transactions found for this client.
                </div>
                <div id="history-loading-state" class="py-12 text-center text-slate-400 dark:text-slate-505 font-medium">
                    <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-500 mb-2"></div>
                    <div>Fetching transaction logs...</div>
                </div>
            </div>
            
            <div class="flex justify-end pt-4 border-t border-slate-100 dark:border-slate-800 shrink-0 mt-4">
                <button type="button" onclick="closeModal('historyModal')" class="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-2xl text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-808 text-sm font-bold transition-all focus:outline-none">Close</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            $('#clients-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: "{{ route('admin.clients.data') }}",
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { 
                        data: 'name', 
                        name: 'name',
                        render: function(data, type, row) {
                            let emailHtml = row.email ? `<div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5"><i class="bi bi-envelope text-[10px] mr-1 text-slate-400"></i>${row.email}</div>` : '';
                            return `<div>
                                <div class="font-extrabold text-slate-800 dark:text-slate-100 text-sm">${data}</div>
                                ${emailHtml}
                                <div class="text-[11px] text-slate-400 dark:text-slate-505 mt-1 select-all font-mono">ID: ${row.id} | Hash: ${row.api_key.substring(0, 10)}...</div>
                            </div>`;
                        }
                    },
                    { data: 'balance', name: 'wallet_balance' },
                    { data: 'pricing', name: 'pricing', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                order: [[0, 'desc']],
                pageLength: 10,
                language: {
                    search: '',
                    searchPlaceholder: 'Search clients...',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                }
            });
        });

        function quickRecharge(clientId, clientName) {
            const selectEl = document.getElementById('recharge_client_id');
            if (selectEl) {
                selectEl.value = clientId;
            }
            openModal('rechargeModal');
            setTimeout(() => {
                const amountEl = document.getElementById('recharge_amount');
                if (amountEl) amountEl.focus();
            }, 200);
        }

        function viewHistory(clientId, clientName) {
            $('#history-client-name').text(clientName);
            $('#history-table-body').empty();
            $('#history-empty-state').addClass('hidden');
            $('#history-table').addClass('hidden');
            $('#history-loading-state').removeClass('hidden');
            openModal('historyModal');

            $.ajax({
                url: `/admin/clients/${clientId}/recharges`,
                method: 'GET',
                success: function(response) {
                    $('#history-loading-state').addClass('hidden');
                    if (response.success) {
                        const recharges = response.recharges;
                        const client = response.client;
                        if (recharges.length === 0) {
                            $('#history-empty-state').removeClass('hidden');
                            return;
                        }

                        let rowsHtml = '';
                        recharges.forEach(function(recharge) {
                            let actionHtml = `
                                <a href="/admin/recharges/${recharge.id}/invoice" target="_blank" class="px-3 py-1.5 bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl text-xs font-bold transition-all inline-flex items-center gap-1 justify-center" title="View Invoice">
                                    <i class="bi bi-eye"></i> View
                                </a>
                            `;

                            rowsHtml += `
                                <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/10 transition-colors">
                                    <td class="py-3 px-2 text-xs font-semibold text-slate-600 dark:text-slate-400">${recharge.date}</td>
                                    <td class="py-3 px-2 text-xs font-bold text-emerald-600 dark:text-emerald-500 text-right">+ ₹${recharge.amount}</td>
                                    <td class="py-3 px-2 text-xs font-medium text-slate-500 dark:text-slate-505 text-right">₹${recharge.previous_balance}</td>
                                    <td class="py-3 px-2 text-xs font-bold text-slate-800 dark:text-slate-200 text-right">₹${recharge.new_balance}</td>
                                    <td class="py-3 px-2 text-center">${actionHtml}</td>
                                </tr>
                            `;
                        });

                        $('#history-table-body').html(rowsHtml);
                        $('#history-table').removeClass('hidden');
                    } else {
                        alert('Failed to load history.');
                    }
                },
                error: function() {
                    $('#history-loading-state').addClass('hidden');
                    alert('Error loading recharge history.');
                }
            });
        }

        function showToast(type, message) {
            let container = document.getElementById('toast-container');
            if (!container) {
                container = document.createElement('div');
                container.id = 'toast-container';
                container.className = 'fixed bottom-5 right-5 z-[9999] flex flex-col gap-2.5 max-w-sm w-full';
                document.body.appendChild(container);
            }

            const toast = document.createElement('div');
            const bgClass = type === 'success' ? 'bg-emerald-50 dark:bg-emerald-950/90 border-emerald-500 text-emerald-700 dark:text-emerald-300' : 'bg-rose-50 dark:bg-rose-950/90 border-rose-500 text-rose-700 dark:text-rose-300';
            const iconClass = type === 'success' ? 'bi-check-circle-fill text-emerald-500' : 'bi-exclamation-triangle-fill text-rose-500';
            
            toast.className = `flex items-center gap-3 p-4 rounded-2xl border-l-4 shadow-xl backdrop-blur-md animate-fade-in ${bgClass}`;
            toast.innerHTML = `
                <i class="bi ${iconClass} text-lg shrink-0"></i>
                <div class="text-xs font-bold">${message}</div>
            `;

            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.add('opacity-0', 'transition-opacity', 'duration-500');
                setTimeout(() => toast.remove(), 500);
            }, 4000);
        }
    </script>
@endpush