@extends('admin.layout')

@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

    <!-- PANEL HEADER ACTIONS -->
    <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">
                Wallet & Clients Control
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Configure customized pricing rates, perform manual credits, and track escrow 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-55 dark:hover:bg-slate-800/80 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>

    <!-- STATS COUNTERS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-slate-900 p-6 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-100/50 dark:shadow-none hover:shadow-xl hover:shadow-indigo-500/5 hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group">
            <div>
                <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Registered Clients</h3>
                <p class="text-3xl font-black text-slate-800 dark:text-slate-100 group-hover:text-indigo-500 transition-colors">{{ $stats['total_clients'] }}</p>
            </div>
            <div class="text-lg p-3 bg-blue-500/10 text-blue-500 rounded-2xl transition-transform group-hover:scale-110"><i class="bi bi-building"></i></div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-slate-900 p-6 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-100/50 dark:shadow-none hover:shadow-xl hover:shadow-indigo-500/5 hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group">
            <div>
                <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Escrow Balance</h3>
                <p class="text-3xl font-black text-amber-600 dark:text-amber-500">₹{{ number_format($stats['total_balance'], 2) }}</p>
            </div>
            <div class="text-lg p-3 bg-amber-500/10 text-amber-500 rounded-2xl transition-transform group-hover:scale-110"><i class="bi bi-cash-stack"></i></div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-slate-900 p-6 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-100/50 dark:shadow-none hover:shadow-xl hover:shadow-indigo-500/5 hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group">
            <div>
                <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Total Requests</h3>
                <p class="text-3xl font-black text-slate-800 dark:text-slate-100 group-hover:text-emerald-500 transition-colors">{{ $stats['total_requests'] }}</p>
            </div>
            <div class="text-lg p-3 bg-emerald-500/10 text-emerald-500 rounded-2xl transition-transform group-hover:scale-110"><i class="bi bi-lightning-charge"></i></div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-slate-900 p-6 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-100/50 dark:shadow-none hover:shadow-xl hover:shadow-indigo-500/5 hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group">
            <div>
                <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Accumulated Revenue</h3>
                <p class="text-3xl font-black text-indigo-600 dark:text-indigo-400">₹{{ number_format($stats['total_revenue'], 2) }}</p>
            </div>
            <div class="text-lg p-3 bg-indigo-500/10 text-indigo-500 rounded-2xl transition-transform group-hover:scale-110"><i class="bi bi-graph-up-arrow"></i></div>
        </div>
    </div>

    <!-- ACTIVE PARTNERS LIST -->
    <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 mb-8 overflow-hidden">
        <h2 class="text-base font-extrabold text-slate-800 dark:text-slate-100 mb-5 flex items-center gap-2">
            <i class="bi bi-shield-check text-indigo-500"></i> Partner Companies & API Rates
        </h2>
        <div class="overflow-x-auto w-full">
            <table class="w-full text-left border-collapse min-w-[800px]">
                <thead>
                    <tr class="border-b border-slate-100 dark:border-slate-800">
                        <th class="pb-3 px-4 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Company Name</th>
                        <th class="pb-3 px-4 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Wallet Balance</th>
                        <th class="pb-3 px-4 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Pricing Configuration (Per Request)</th>
                        <th class="pb-3 px-4 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60">
                    @forelse ($clients as $client)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/10 transition-colors">
                            <td class="py-4 px-4">
                                <div class="font-extrabold text-slate-800 dark:text-slate-100 text-sm">{{ $client->name }}</div>
                                @if($client->email)
                                    <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5"><i class="bi bi-envelope text-[10px] mr-1"></i>{{ $client->email }}</div>
                                @endif
                                <div class="text-[11px] text-slate-400 dark:text-slate-500 mt-1 select-all font-mono">ID: {{ $client->id }} | Key Hash: {{ substr($client->api_key, 0, 10) }}...</div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="text-base font-black text-amber-600 dark:text-amber-500">₹{{ number_format($client->wallet_balance, 2) }}</span>
                                @if ($client->wallet_balance <= 10.00)
                                    <div class="text-[10px] text-rose-500 font-extrabold uppercase mt-1 flex items-center gap-1"><i class="bi bi-exclamation-triangle-fill"></i> Low Balance</div>
                                @endif
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex flex-wrap gap-2 max-w-[500px]">
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-800 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">PAN: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->pan_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-800 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">Adh Basic: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->aadhaar_basic_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-800 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">Adh OTP: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->aadhaar_otp_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-800 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">Adh Submit: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->aadhaar_submit_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-800 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">Link Check: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->aadhaar_pan_link_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-805 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">GST: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->gst_charge }}</strong></span>
                                    <span class="bg-slate-50 dark:bg-slate-950 border border-slate-200/85 dark:border-slate-805 px-2 py-1 rounded-xl text-xs text-slate-500 dark:text-slate-400">Bank: <strong class="text-slate-800 dark:text-slate-200">₹{{ $client->bank_charge }}</strong></span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <button onclick="quickRecharge({{ $client->id }}, '{{ $client->name }}')" class="px-4 py-2 bg-indigo-50 dark:bg-indigo-950/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-500 transition-all duration-200 font-bold rounded-xl text-xs focus:outline-none flex items-center gap-1.5">
                                    <i class="bi bi-plus-lg"></i> Credit Wallet
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="py-12 text-center text-slate-400 dark:text-slate-500 font-medium">No client companies registered yet. Add one to get started!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </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-805 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-800/80 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-800/80 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>

    <!-- SCRIPTS -->
    <script>
        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);
        }
    </script>
@endsection