@extends('layouts.admin')

@section('title', 'Invoices')

@section('page-title', 'Invoices')

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Invoices</h1>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.invoices.create') }}" class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium shadow-lg shadow-primary/30 hover:bg-blue-600 transition-colors">
                <span class="material-symbols-outlined text-lg">add</span>
                <span>New Invoice</span>
            </a>
            <form method="GET" action="{{ route('admin.invoices.index') }}" class="flex items-center">
                @if(request('search'))
                    <input type="hidden" name="search" value="{{ request('search') }}">
                @endif
                @if(request('status'))
                    <input type="hidden" name="status" value="{{ request('status') }}">
                @endif
                <select name="per_page" onchange="this.form.submit()" class="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary">
                    <option value="10" {{ request('per_page', 15) == 10 ? 'selected' : '' }}>10 / page</option>
                    <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15 / page</option>
                    <option value="25" {{ request('per_page', 15) == 25 ? 'selected' : '' }}>25 / page</option>
                    <option value="50" {{ request('per_page', 15) == 50 ? 'selected' : '' }}>50 / page</option>
                    <option value="100" {{ request('per_page', 15) == 100 ? 'selected' : '' }}>100 / page</option>
                </select>
            </form>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="mb-4">
        <form method="GET" action="{{ route('admin.invoices.index') }}" class="flex gap-2">
            @if(request('per_page'))
                <input type="hidden" name="per_page" value="{{ request('per_page') }}">
            @endif
            @if(request('status'))
                <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by invoice number, customer name or email..." class="flex-1 max-w-md h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary">
            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
                <span class="material-symbols-outlined">search</span>
            </button>
            @if(request('search'))
                <a href="{{ route('admin.invoices.index', array_filter(['per_page' => request('per_page'), 'status' => request('status')])) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    <span class="material-symbols-outlined">close</span>
                </a>
            @endif
        </form>
    </div>

    <!-- Invoices Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 w-16">#</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 min-w-[140px]">INVOICE ID</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 min-w-[200px]">CUSTOMER</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right min-w-[120px]">AMOUNT</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right min-w-[120px]">PAID</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-center min-w-[130px]">STATUS</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 min-w-[110px]">CREATED ON</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right min-w-[100px]">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($invoices as $index => $invoice)
                        <tr class="group hover:bg-gray-50/50 transition-colors">
                            <td class="py-4 px-6 text-sm text-gray-600">{{ ($invoices->currentPage() - 1) * $invoices->perPage() + $index + 1 }}</td>
                            <td class="py-4 px-6">
                                <a href="{{ route('admin.invoices.view', $invoice) }}" target="_blank" class="text-sm font-semibold text-primary hover:underline hover:text-blue-600">
                                    {{ $invoice->invoice_number }}
                                </a>
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3">
                                    <div class="size-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-xs shrink-0">
                                        {{ strtoupper(substr($invoice->customer->name ?? 'N', 0, 1)) }}
                                    </div>
                                    <div class="flex flex-col min-w-0">
                                        <span class="text-sm font-medium text-gray-900 truncate">{{ $invoice->customer->name ?? 'N/A' }}</span>
                                        <span class="text-xs text-gray-500 truncate">{{ $invoice->customer->email ?? 'N/A' }}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900 text-right">
                                {{ \App\Models\Currency::formatAmount($invoice->total, $invoice->currency) }}
                            </td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900 text-right">
                                {{ \App\Models\Currency::formatAmount($invoice->paid_amount, $invoice->currency) }}
                            </td>
                            <td class="py-4 px-6 text-center">
                                @php
                                    $statusConfig = [
                                        'draft' => ['label' => 'Draft', 'bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'icon' => 'description'],
                                        'partial' => ['label' => 'Partially Paid', 'bg' => 'bg-blue-100', 'text' => 'text-blue-800', 'icon' => 'sync'],
                                        'paid' => ['label' => 'Paid', 'bg' => 'bg-green-100', 'text' => 'text-green-800', 'icon' => 'check_circle'],
                                        'sent' => ['label' => 'Sent', 'bg' => 'bg-blue-100', 'text' => 'text-blue-800', 'icon' => 'send'],
                                        'viewed' => ['label' => 'Viewed', 'bg' => 'bg-purple-100', 'text' => 'text-purple-800', 'icon' => 'visibility'],
                                        'unpaid' => ['label' => 'Unpaid', 'bg' => 'bg-yellow-100', 'text' => 'text-yellow-800', 'icon' => 'close'],
                                        'overdue' => ['label' => 'Overdue', 'bg' => 'bg-red-100', 'text' => 'text-red-800', 'icon' => 'warning'],
                                    ];
                                    $status = $invoice->status === 'partial' ? 'partial' : ($invoice->balance == 0 && $invoice->status !== 'draft' && $invoice->status !== 'sent' && $invoice->status !== 'viewed' ? 'paid' : ($invoice->balance > 0 && $invoice->status === 'sent' ? 'unpaid' : $invoice->status));
                                    $config = $statusConfig[$status] ?? $statusConfig['draft'];
                                    $isViewedStatus = $status === 'viewed';
                                @endphp
                                @if($isViewedStatus)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium {{ $config['bg'] }} {{ $config['text'] }}">
                                        <span class="material-symbols-outlined text-xs" style="font-size: 14px;">{{ $config['icon'] }}</span>
                                        {{ $config['label'] }}
                                    </span>
                                @else
                                    <button onclick="openStatusModal({{ $invoice->id }}, '{{ $status }}')" class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium {{ $config['bg'] }} {{ $config['text'] }} hover:opacity-80 transition-opacity cursor-pointer">
                                        <span class="material-symbols-outlined text-xs" style="font-size: 14px;">{{ $config['icon'] }}</span>
                                        {{ $config['label'] }}
                                    </button>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600 whitespace-nowrap">
                                {{ $invoice->created_at->format('m/d/y') }}
                            </td>
                            <td class="py-4 px-6 text-right">
                                <div class="relative inline-block">
                                    <button type="button" data-admin-fixed-menu-trigger="action-menu-{{ $invoice->id }}" onclick="adminFixedActionMenuToggle(event || window.event, 'action-menu-{{ $invoice->id }}')" class="text-gray-400 hover:text-gray-600 transition-colors" title="More actions">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                    <div id="action-menu-{{ $invoice->id }}" data-admin-fixed-action-menu class="hidden w-48 bg-white rounded-lg shadow-lg border border-gray-200">
                                        <div class="py-1">
                                            <a href="{{ route('admin.invoices.view', $invoice) }}" target="_blank" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                                <span class="material-symbols-outlined text-base">preview</span>
                                                <span>View</span>
                                            </a>
                                            <a href="{{ route('admin.invoices.edit', $invoice) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                                <span class="material-symbols-outlined text-base">edit</span>
                                                <span>Edit</span>
                                            </a>
                                            <button onclick="openSendModal({{ $invoice->id }})" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors text-left">
                                                <span class="material-symbols-outlined text-base">send</span>
                                                <span>Send</span>
                                            </button>
                                            @php
                                                $remainingDue = max(0, (float) $invoice->total - (float) ($invoice->paid_amount ?? 0));
                                                $storedBalance = max(0, (float) ($invoice->balance ?? 0));
                                                $due = max($remainingDue, $storedBalance);
                                                $showMarkPaid = $invoice->status !== 'paid' && $due > 0;
                                            @endphp
                                            @if($showMarkPaid)
                                            <button onclick="openMarkPaidModal({{ $invoice->id }})" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-green-600 hover:bg-green-50 transition-colors text-left">
                                                <span class="material-symbols-outlined text-base">payments</span>
                                                <span>Mark as Paid</span>
                                            </button>
                                            @endif
                                            <div class="border-t border-gray-100 my-1"></div>
                                            <button onclick="openDeleteModal({{ $invoice->id }}, '{{ $invoice->invoice_number }}')" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors text-left">
                                                <span class="material-symbols-outlined text-base">delete</span>
                                                <span>Delete</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-12 px-6 text-center text-gray-500">
                                <span class="material-symbols-outlined text-4xl mb-2 block">description</span>
                                <p>No invoices found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($invoices->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
                <p class="text-sm text-gray-500">
                    Showing <span class="font-medium text-gray-900">{{ $invoices->firstItem() }}</span> to <span class="font-medium text-gray-900">{{ $invoices->lastItem() }}</span> of <span class="font-medium text-gray-900">{{ $invoices->total() }}</span> entries
                </p>
                <div class="flex items-center gap-1">
                    @if($invoices->onFirstPage())
                        <button disabled class="px-3 py-1 text-sm text-gray-500 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            Previous
                        </button>
                    @else
                        <a href="{{ $invoices->previousPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 rounded hover:bg-gray-50">
                            Previous
                        </a>
                    @endif
                    
                    @php
                        $currentPage = $invoices->currentPage();
                        $lastPage = $invoices->lastPage();
                        $startPage = max(1, $currentPage - 1);
                        $endPage = min($lastPage, $currentPage + 1);
                    @endphp
                    
                    @if($startPage > 1)
                        <a href="{{ $invoices->url(1) }}" class="size-8 text-sm font-medium rounded text-gray-600 hover:bg-gray-50 flex items-center justify-center">
                            1
                        </a>
                        @if($startPage > 2)
                            <span class="px-2 text-gray-400">...</span>
                        @endif
                    @endif
                    
                    @for($page = $startPage; $page <= $endPage; $page++)
                        <a href="{{ $invoices->url($page) }}" class="size-8 text-sm font-medium rounded {{ $currentPage == $page ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-50' }} flex items-center justify-center">
                            {{ $page }}
                        </a>
                    @endfor
                    
                    @if($endPage < $lastPage)
                        @if($endPage < $lastPage - 1)
                            <span class="px-2 text-gray-400">...</span>
                        @endif
                        <a href="{{ $invoices->url($lastPage) }}" class="size-8 text-sm font-medium rounded text-gray-600 hover:bg-gray-50 flex items-center justify-center">
                            {{ $lastPage }}
                        </a>
                    @endif
                    
                    @if($invoices->hasMorePages())
                        <a href="{{ $invoices->nextPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 rounded hover:bg-gray-50">
                            Next
                        </a>
                    @else
                        <button disabled class="px-3 py-1 text-sm text-gray-500 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            Next
                        </button>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeDeleteModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center gap-4 mb-4">
                <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Delete Invoice</h3>
                    <p class="text-sm text-gray-500">This action cannot be undone</p>
                </div>
            </div>
            <p class="text-sm text-gray-700 mb-6">
                Are you sure you want to delete invoice <strong id="delete-invoice-number"></strong>? This will permanently remove the invoice and all associated data.
            </p>
            <form id="delete-form" method="POST" class="flex gap-3">
                @csrf
                @method('DELETE')
                <button type="button" onclick="closeDeleteModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                    Cancel
                </button>
                <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                    Delete Invoice
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Send Modal -->
<div id="send-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeSendModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-gray-900">Send Invoice</h3>
                <button onclick="closeSendModal()" class="text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="space-y-3">
                <button onclick="sendInvoiceEmail(); return false;" class="w-full flex items-center gap-3 px-4 py-3 text-left bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span class="material-symbols-outlined text-primary">email</span>
                    <div>
                        <div class="font-medium text-gray-900">Send via Email</div>
                        <div class="text-xs text-gray-500">Send invoice to customer's email</div>
                    </div>
                </button>
                <a id="send-download-link" href="#" target="_blank" rel="noopener noreferrer" class="w-full flex items-center gap-3 px-4 py-3 text-left bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span class="material-symbols-outlined text-primary">download</span>
                    <div>
                        <div class="font-medium text-gray-900">Download PDF</div>
                        <div class="text-xs text-gray-500">Download invoice as PDF</div>
                    </div>
                </a>
                <button onclick="sendInvoiceWhatsApp(); return false;" class="w-full flex items-center gap-3 px-4 py-3 text-left bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span class="material-symbols-outlined text-green-600">chat</span>
                    <div>
                        <div class="font-medium text-gray-900">Send via WhatsApp</div>
                        <div class="text-xs text-gray-500">Send invoice via WhatsApp</div>
                    </div>
                </button>
                <button onclick="generateInvoiceLink(event); return false;" class="w-full flex items-center gap-3 px-4 py-3 text-left bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span class="material-symbols-outlined text-primary">link</span>
                    <div>
                        <div class="font-medium text-gray-900">Generate Share Link</div>
                        <div class="text-xs text-gray-500">Create a shareable link for this invoice</div>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Mark as Paid Modal -->
<div id="mark-paid-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeMarkPaidModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-5 max-h-[calc(100dvh-2rem)] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-bold text-gray-900">Mark Invoice as Paid</h3>
                <button onclick="closeMarkPaidModal()" class="text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="mark-paid-form" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="mark-paid-invoice-id" name="invoice_id">
                
                <!-- Invoice Info -->
                <div class="bg-gray-50 rounded-lg p-3 space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Invoice No.</span>
                        <span id="mark-paid-invoice-number" class="text-sm font-semibold text-gray-900"></span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Billed To</span>
                        <span id="mark-paid-customer-name" class="text-sm font-semibold text-gray-900"></span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Invoice Total</span>
                        <span id="mark-paid-invoice-total" class="text-sm font-semibold text-gray-900"></span>
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Amount Received</label>
                        <input type="number" id="amount-received" name="amount" step="0.01" min="0" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="0.00">
                    </div>
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Amount to Settle</span>
                            <span id="amount-to-settle" class="text-lg font-bold text-blue-600">₦0.00</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                        <select id="payment-method" name="payment_method" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900">
                            <option value="account_transfer">Account Transfer</option>
                            <option value="cash">Cash</option>
                            <option value="cheque">Cheque</option>
                            <option value="credit_card">Credit Card</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="online_payment">Online Payment</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Payment Account</label>
                        <select id="payment-account" name="bank_account_id" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900">
                            <option value="">Select Payment Account</option>
                            @php
                                $bankAccounts = \App\Models\BankAccount::where('is_active', true)->get();
                            @endphp
                            @foreach($bankAccounts as $account)
                                <option value="{{ $account->id }}">{{ $account->account_name }} - {{ $account->bank_name }} ({{ $account->account_number }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Date</label>
                            <input type="date" id="payment-date" name="payment_date" value="{{ date('Y-m-d') }}" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Transaction ID / Reference</label>
                            <input type="text" id="transaction-id" name="transaction_id" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="Optional">
                        </div>
                    </div>
                </div>

                <!-- Options -->
                <div class="space-y-2 border-t border-gray-200 pt-3">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="notify_client" value="1" checked class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
                        <div>
                            <div class="text-sm font-medium text-gray-900">Notify client about this payment</div>
                            <div class="text-xs text-gray-500">Send a notification email to the customer</div>
                        </div>
                    </label>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="collect_testimonial" value="1" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
                        <div>
                            <div class="text-sm font-medium text-gray-900">Collect testimonial from this client</div>
                            <div class="text-xs text-gray-500">We will collect a testimonial on your behalf via an email. This is not an online payment through Refrens. This is a record of payment made by client to you directly.</div>
                        </div>
                    </label>
                </div>

                <!-- Actions -->
                <div class="flex gap-3 pt-3 border-t border-gray-200 sticky bottom-0 bg-white pb-0.5">
                    <button type="button" onclick="closeMarkPaidModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-600 transition-colors">
                        Mark as Paid
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Email Modal -->
<div id="email-modal" data-admin-modal class="hidden fixed inset-0 z-[60] overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeEmailModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-900">Send Invoice via Email</h3>
                <button onclick="closeEmailModal()" class="text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="email-send-form" class="space-y-6">
                @csrf
                <input type="hidden" id="email-modal-invoice-id" name="invoice_id">
                
                <!-- Invoice Info -->
                <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Invoice No.</span>
                        <span id="email-modal-invoice-number" class="text-sm font-semibold text-gray-900"></span>
                    </div>
                </div>

                <!-- Email Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Recipient Email Address</label>
                    <input type="email" id="email-input-field" name="email" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="customer@example.com">
                    <p class="text-xs text-gray-500 mt-1">Enter the email address where you want to send the invoice</p>
                </div>

                <!-- Actions -->
                <div class="flex gap-3 pt-4 border-t border-gray-200">
                    <button type="button" onclick="closeEmailModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-600 transition-colors">
                        Send Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- WhatsApp Modal -->
<div id="whatsapp-modal" data-admin-modal class="hidden fixed inset-0 z-[60] overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeWhatsAppModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-900">Send Invoice via WhatsApp</h3>
                <button onclick="closeWhatsAppModal()" class="text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="whatsapp-send-form" class="space-y-6">
                @csrf
                <input type="hidden" id="whatsapp-modal-invoice-id" name="invoice_id">
                
                <!-- Invoice Info -->
                <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Invoice No.</span>
                        <span id="whatsapp-modal-invoice-number" class="text-sm font-semibold text-gray-900"></span>
                    </div>
                </div>

                <!-- Phone Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Recipient Phone Number</label>
                    <input type="text" id="whatsapp-input-field" name="phone" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="+1234567890">
                    <p class="text-xs text-gray-500 mt-1">Enter the phone number (with country code) where you want to send the invoice</p>
                </div>

                <!-- Actions -->
                <div class="flex gap-3 pt-4 border-t border-gray-200">
                    <button type="button" onclick="closeWhatsAppModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                        Send via WhatsApp
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Success/Error Modal -->
<div id="result-modal" data-admin-modal class="hidden fixed inset-0 z-[70] overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeResultModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
            <div class="text-center">
                <!-- Icon -->
                <div id="result-icon" class="mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-4">
                    <span id="result-icon-symbol" class="material-symbols-outlined text-4xl"></span>
                </div>
                
                <!-- Title -->
                <h3 id="result-title" class="text-xl font-bold text-gray-900 mb-2"></h3>
                
                <!-- Message -->
                <p id="result-message" class="text-sm text-gray-600 mb-6"></p>
                
                <!-- Button -->
                <button onclick="closeResultModal()" id="result-button" class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Status Change Modal -->
<div id="status-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeStatusModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-900">Change Invoice Status</h3>
                <button onclick="closeStatusModal()" class="text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="status-form" method="POST" class="space-y-6">
                @csrf
                @method('PATCH')
                <input type="hidden" id="status-invoice-id" name="invoice_id">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Status</label>
                    <select id="status-select" name="status" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                        <option value="draft">Draft</option>
                        <option value="sent">Sent</option>
                        <option value="viewed">Viewed</option>
                        <option value="unpaid">Unpaid</option>
                        <option value="partial">Partially Paid</option>
                        <option value="paid">Paid</option>
                        <option value="overdue">Overdue</option>
                        <option value="cancel">Cancel</option>
                    </select>
                </div>
                <div class="flex gap-3 pt-4 border-t border-gray-200">
                    <button type="button" onclick="closeStatusModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-600 transition-colors">
                        Update Status
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentInvoiceId = null;

function getAdminCsrfToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta?.content) {
        return meta.content;
    }
    const input = document.querySelector('input[name="_token"]');
    return input?.value || '';
}

function adminJsonFetchInit(body) {
    return {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': getAdminCsrfToken(),
        },
        body: body !== undefined ? JSON.stringify(body) : undefined,
    };
}

// Delete Modal
function openDeleteModal(invoiceId, invoiceNumber) {
    currentInvoiceId = invoiceId;
    document.getElementById('delete-invoice-number').textContent = invoiceNumber;
    document.getElementById('delete-form').action = `/admin/invoices/${invoiceId}`;
    document.getElementById('delete-modal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('delete-modal').classList.add('hidden');
    currentInvoiceId = null;
}

// Send Modal
function openSendModal(invoiceId) {
    currentInvoiceId = invoiceId;
    document.getElementById('send-download-link').href = `/admin/invoices/${invoiceId}/download`;
    document.getElementById('send-modal').classList.remove('hidden');
}

function closeSendModal() {
    document.getElementById('send-modal').classList.add('hidden');
    // Don't clear currentInvoiceId here - it might be needed for other modals
    // currentInvoiceId = null;
}

function sendInvoiceEmail() {
    console.log('sendInvoiceEmail called, currentInvoiceId:', currentInvoiceId);
    // Preserve the invoice ID before closing modal
    const invoiceId = currentInvoiceId;
    if (!invoiceId) {
        alert('No invoice selected. Please try again.');
        return;
    }
    try {
        closeSendModal();
        // Small delay to ensure send modal closes before opening email modal
        setTimeout(() => {
            // Restore the invoice ID
            currentInvoiceId = invoiceId;
            openEmailModal();
        }, 100);
    } catch (error) {
        console.error('Error in sendInvoiceEmail:', error);
        alert('Error opening email modal. Please try again.');
    }
}

function sendInvoiceWhatsApp() {
    console.log('sendInvoiceWhatsApp called, currentInvoiceId:', currentInvoiceId);
    // Preserve the invoice ID before closing modal
    const invoiceId = currentInvoiceId;
    if (!invoiceId) {
        alert('No invoice selected. Please try again.');
        return;
    }
    try {
        closeSendModal();
        // Small delay to ensure send modal closes before opening WhatsApp modal
        setTimeout(() => {
            // Restore the invoice ID
            currentInvoiceId = invoiceId;
            openWhatsAppModal();
        }, 100);
    } catch (error) {
        console.error('Error in sendInvoiceWhatsApp:', error);
        alert('Error opening WhatsApp modal. Please try again.');
    }
}

async function generateInvoiceLink(event) {
    console.log('generateInvoiceLink called, currentInvoiceId:', currentInvoiceId);
    if (!currentInvoiceId) {
        alert('No invoice selected. Please try again.');
        return;
    }
    
    const button = event?.target?.closest('button') || (event?.target?.tagName === 'BUTTON' ? event.target : null) || document.querySelector('button[onclick*="generateInvoiceLink"]');
    const originalText = button?.innerHTML;
    if (button) {
        button.disabled = true;
        button.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> Generating...';
    }
    
    try {
        const response = await fetch(`/admin/invoices/${currentInvoiceId}/share-link`, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': getAdminCsrfToken(),
            }
        });
        
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.message || 'Failed to generate share link');
        }
        
        const data = await response.json();
        if (data.success && data.link) {
            try {
                await navigator.clipboard.writeText(data.link);
                alert('Share link copied to clipboard!\n\n' + data.link);
                closeSendModal();
            } catch (clipboardError) {
                // Fallback if clipboard API fails
                const linkInput = document.createElement('input');
                linkInput.value = data.link;
                document.body.appendChild(linkInput);
                linkInput.select();
                document.execCommand('copy');
                document.body.removeChild(linkInput);
                alert('Share link copied to clipboard!\n\n' + data.link);
                closeSendModal();
            }
        } else {
            throw new Error(data.message || 'Failed to generate share link');
        }
    } catch (error) {
        console.error('Error generating share link:', error);
        alert('Error generating share link: ' + (error.message || 'Failed to generate share link. Please try again.'));
    } finally {
        if (button) {
            button.disabled = false;
            button.innerHTML = originalText || '<span class="material-symbols-outlined text-primary">link</span><div><div class="font-medium text-gray-900">Generate Share Link</div><div class="text-xs text-gray-500">Create a shareable link for this invoice</div></div>';
        }
    }
}

// Mark as Paid Modal
function openMarkPaidModal(invoiceId) {
    currentInvoiceId = invoiceId;
    // Fetch invoice data
    fetch(`/admin/invoices/${invoiceId}/data`, {
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('mark-paid-invoice-id').value = invoiceId;
            document.getElementById('mark-paid-invoice-number').textContent = data.invoice_number;
            document.getElementById('mark-paid-customer-name').textContent = data.customer_name;
            document.getElementById('mark-paid-invoice-total').textContent = data.currency + ' ' + parseFloat(data.total).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            document.getElementById('amount-received').value = data.balance;
            document.getElementById('amount-received').max = data.balance;
            document.getElementById('mark-paid-form').action = `/admin/invoices/${invoiceId}/mark-paid`;
            updateAmountToSettle();
            // Attach event listener when modal opens
            const amountInput = document.getElementById('amount-received');
            if (amountInput) {
                amountInput.removeEventListener('input', updateAmountToSettle);
                amountInput.addEventListener('input', updateAmountToSettle);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading invoice data');
        });
    document.getElementById('mark-paid-modal').classList.remove('hidden');
}

function closeMarkPaidModal() {
    document.getElementById('mark-paid-modal').classList.add('hidden');
    currentInvoiceId = null;
}

function updateAmountToSettle() {
    const amount = parseFloat(document.getElementById('amount-received').value) || 0;
    const currency = document.getElementById('mark-paid-invoice-total').textContent.split(' ')[0] || '₦';
    document.getElementById('amount-to-settle').textContent = currency + ' ' + amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}


// Status Modal
function openStatusModal(invoiceId, currentStatus) {
    currentInvoiceId = invoiceId;
    document.getElementById('status-invoice-id').value = invoiceId;
    document.getElementById('status-select').value = currentStatus;
    document.getElementById('status-form').action = `/admin/invoices/${invoiceId}/status`;
    document.getElementById('status-modal').classList.remove('hidden');
}

function closeStatusModal() {
    document.getElementById('status-modal').classList.add('hidden');
    currentInvoiceId = null;
}

// Email Modal
function openEmailModal() {
    console.log('openEmailModal called, currentInvoiceId:', currentInvoiceId);
    if (!currentInvoiceId) {
        console.error('No currentInvoiceId set');
        alert('No invoice selected');
        return;
    }
    
    const emailModal = document.getElementById('email-modal');
    if (!emailModal) {
        console.error('Email modal element not found');
        alert('Email modal not found. Please refresh the page.');
        return;
    }
    
    // Set invoice ID immediately
    const invoiceIdField = document.getElementById('email-modal-invoice-id');
    if (invoiceIdField) {
        invoiceIdField.value = currentInvoiceId;
    }
    
    // Fetch invoice data to get customer email
    fetch(`/admin/invoices/${currentInvoiceId}/data`, {
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch invoice data');
            }
            return response.json();
        })
        .then(data => {
            const invoiceNumberField = document.getElementById('email-modal-invoice-number');
            const emailField = document.getElementById('email-input-field');
            
            if (invoiceNumberField) {
                invoiceNumberField.textContent = data.invoice_number || 'N/A';
            }
            if (emailField) {
                emailField.value = data.customer_email || '';
            }
            
            emailModal.classList.remove('hidden');
            console.log('Email modal opened successfully');
        })
        .catch(error => {
            console.error('Error fetching invoice data:', error);
            // Still open the modal even if fetch fails
            emailModal.classList.remove('hidden');
        });
}

function closeEmailModal() {
    document.getElementById('email-modal').classList.add('hidden');
}

// WhatsApp Modal
function openWhatsAppModal() {
    console.log('openWhatsAppModal called, currentInvoiceId:', currentInvoiceId);
    if (!currentInvoiceId) {
        console.error('No currentInvoiceId set');
        alert('No invoice selected');
        return;
    }
    
    const whatsappModal = document.getElementById('whatsapp-modal');
    if (!whatsappModal) {
        console.error('WhatsApp modal element not found');
        alert('WhatsApp modal not found. Please refresh the page.');
        return;
    }
    
    // Set invoice ID immediately
    const invoiceIdField = document.getElementById('whatsapp-modal-invoice-id');
    if (invoiceIdField) {
        invoiceIdField.value = currentInvoiceId;
    }
    
    // Fetch invoice data to get customer info
    fetch(`/admin/invoices/${currentInvoiceId}/data`, {
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch invoice data');
            }
            return response.json();
        })
        .then(data => {
            const invoiceNumberField = document.getElementById('whatsapp-modal-invoice-number');
            
            if (invoiceNumberField) {
                invoiceNumberField.textContent = data.invoice_number || 'N/A';
            }
            
            whatsappModal.classList.remove('hidden');
            console.log('WhatsApp modal opened successfully');
        })
        .catch(error => {
            console.error('Error fetching invoice data:', error);
            // Still open the modal even if fetch fails
            whatsappModal.classList.remove('hidden');
        });
}

function closeWhatsAppModal() {
    document.getElementById('whatsapp-modal').classList.add('hidden');
}

// Result Modal (Success/Error)
function showResultModal(type, title, message) {
    const modal = document.getElementById('result-modal');
    const icon = document.getElementById('result-icon');
    const iconSymbol = document.getElementById('result-icon-symbol');
    const titleEl = document.getElementById('result-title');
    const messageEl = document.getElementById('result-message');
    const button = document.getElementById('result-button');
    
    if (!modal || !icon || !iconSymbol || !titleEl || !messageEl || !button) {
        // Fallback to alert if modal elements not found
        alert(message);
        return;
    }
    
    // Set content
    titleEl.textContent = title;
    messageEl.textContent = message;
    
    // Set icon and colors based on type
    if (type === 'success') {
        icon.className = 'mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-4 bg-green-100';
        iconSymbol.textContent = 'check_circle';
        iconSymbol.className = 'material-symbols-outlined text-4xl text-green-600';
        button.className = 'w-full px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors';
    } else {
        icon.className = 'mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-4 bg-red-100';
        iconSymbol.textContent = 'error';
        iconSymbol.className = 'material-symbols-outlined text-4xl text-red-600';
        button.className = 'w-full px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors';
    }
    
    // Show modal
    modal.classList.remove('hidden');
}

function closeResultModal() {
    const modal = document.getElementById('result-modal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

// Handle WhatsApp form submission
document.getElementById('whatsapp-send-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const invoiceId = document.getElementById('whatsapp-modal-invoice-id').value;
    const phone = document.getElementById('whatsapp-input-field').value;
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    
    if (!phone || phone.trim() === '') {
        alert('Please enter a valid phone number');
        return;
    }
    
    submitButton.disabled = true;
    submitButton.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> Sending...';
    
    try {
        const response = await fetch(`/admin/invoices/${invoiceId}/send-whatsapp`, adminJsonFetchInit({ phone: phone.trim() }));

        if (response.status === 419) {
            showResultModal('error', 'Session Expired', 'Your session or security token expired. Please refresh the page and try again.');
            return;
        }

        const data = await response.json().catch(() => ({}));
        if (data.success) {
            closeWhatsAppModal();
            showResultModal('success', 'WhatsApp Message Sent', data.message || `Invoice has been sent successfully to ${phone}`);
        } else {
            showResultModal('error', 'Failed to Send WhatsApp', data.message || 'Failed to send WhatsApp message. Please try again.');
        }
    } catch (error) {
        console.error('Error sending WhatsApp:', error);
        showResultModal('error', 'Error Sending WhatsApp', 'An error occurred while sending the WhatsApp message. Please try again.');
    } finally {
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
    }
});

// Handle email form submission
document.getElementById('email-send-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const invoiceId = document.getElementById('email-modal-invoice-id').value;
    const email = document.getElementById('email-input-field').value;
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    
    if (!email || !email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    submitButton.disabled = true;
    submitButton.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> Sending...';
    
    try {
        const response = await fetch(`/admin/invoices/${invoiceId}/send-email`, adminJsonFetchInit({ email }));

        if (response.status === 419) {
            showResultModal('error', 'Session Expired', 'Your session or security token expired. Please refresh the page and try again.');
            return;
        }

        const data = await response.json().catch(() => ({}));
        if (data.success) {
            closeEmailModal();
            showResultModal('success', 'Email Sent Successfully', data.message || `Invoice has been sent successfully to ${email}`);
        } else {
            showResultModal('error', 'Failed to Send Email', data.message || 'Failed to send email. Please try again.');
        }
    } catch (error) {
        console.error('Error sending email:', error);
        showResultModal('error', 'Error Sending Email', 'An error occurred while sending the email. Please try again.');
    } finally {
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
    }
});

</script>
@endsection