@extends('layouts.portal')
@section('title', 'Invoices')
@section('page_title', 'Invoices')
@section('page_subtitle', 'Manage client invoices and payments')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'invoices'])
@endsection

@section('content')
<div class="bg-white rounded-xl shadow-sm p-6">
    <!-- Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
        <!-- Wills Ready for Invoice -->
        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl p-6 border border-indigo-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-indigo-600">Ready for Invoice</p>
                <i class="fas fa-file-invoice text-indigo-400 text-xl"></i>
            </div>
            @php
                $invoicedWillIds = \App\Models\Invoice::whereNotNull('will_id')->pluck('will_id')->toArray();
                $willsReadyForInvoice = \App\Models\Will::where('status', 'completed')
                    ->whereNotNull('package_id')
                    ->whereNotIn('id', $invoicedWillIds)
                    ->count();
            @endphp
            <div class="text-2xl font-bold text-indigo-900">{{ $willsReadyForInvoice }}</div>
            <p class="text-xs text-indigo-600 mt-1">Completed wills pending invoicing</p>
        </div>

        <!-- Total Invoices -->
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-blue-600">Total Invoices</p>
                <i class="fas fa-receipt text-blue-400 text-xl"></i>
            </div>
            <div class="text-2xl font-bold text-blue-900">{{ \App\Models\Invoice::count() }}</div>
            <p class="text-xs text-blue-600 mt-1">All invoices</p>
        </div>

        
        <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl p-6 border border-yellow-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-yellow-600">Pending Payment</p>
                <i class="fas fa-clock text-yellow-400 text-xl"></i>
            </div>
            <div class="text-2xl font-bold text-yellow-900">{{ \App\Models\Invoice::where('status', 'pending')->count() }}</div>
            <p class="text-xs text-yellow-600 mt-1">Awaiting payment</p>
        </div>

        <!-- Paid Invoices -->
        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-green-600">Paid</p>
                <i class="fas fa-check-circle text-green-400 text-xl"></i>
            </div>
            <div class="text-2xl font-bold text-green-900">{{ \App\Models\Invoice::where('status', 'paid')->count() }}</div>
            <p class="text-xs text-green-600 mt-1">Completed</p>
        </div>

        <!-- Total Revenue -->
        <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-purple-600">Total Revenue</p>
                <i class="fas fa-money-bill-wave text-purple-400 text-xl"></i>
            </div>
            @php
                $paidAmount = \App\Models\Invoice::where('status', 'paid')->sum('total_amount');
            @endphp
            <div class="text-2xl font-bold text-purple-900">RM{{ number_format($paidAmount, 2) }}</div>
            <p class="text-xs text-purple-600 mt-1">From paid invoices</p>
        </div>
    </div>

    <hr class="my-6">

    <!-- Search and Filters Section -->
    <div class="modern-card p-6 mb-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 mb-1">Invoice Records</h2>
                <p class="text-gray-600">View and manage invoice payments</p>
            </div>
            
            <div class="flex flex-col sm:flex-row gap-3">
                <div class="relative">
                    <input type="text" 
                           id="searchInvoices"
                           placeholder="Search invoice #, client..." 
                           class="input-modern w-full sm:w-64 pl-10">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
                
                <select id="filterStatus" class="input-modern">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="paid">Paid</option>
                </select>

                <div class="flex gap-2">
                    <button onclick="exportInvoices('pdf')" class="modern-btn bg-red-600 text-white hover:bg-red-700" title="Download as PDF">
                        <i class="fas fa-file-pdf mr-2" style="color: white !important;"></i>PDF
                    </button>
                    <button onclick="exportInvoices('excel')" class="modern-btn bg-green-600 text-white hover:bg-green-700" title="Download as Excel">
                        <i class="fas fa-file-excel mr-2" style="color: white !important;"></i>Excel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Wills & Trusts Section -->
    <div class="mb-8">
        <div class="flex justify-between items-center mb-4">
            <h4 class="text-md font-semibold text-gray-700">Create Invoice for Will or Trust</h4>
        </div>
        @php
            // Get invoiced will/trust IDs
            $invoicedWillIds = \App\Models\Invoice::whereNotNull('will_id')->pluck('will_id')->toArray();
            
            // Get wills that don't have invoices yet AND are completed with package_id
            $wills = \App\Models\Will::with('client.kycDocuments', 'package')
                ->where('status', 'completed')
                ->where('will_type', '!=', 'trust')  // Exclude trusts from will type
                ->whereNotNull('package_id')
                ->whereNotIn('id', $invoicedWillIds)
                ->latest()
                ->get();
            
            // Get trusts from the TRUSTS table (not from wills table with will_type=trust)
            // Trusts can be invoiced at any status (drafting, completed, approved) as long as they have a package
            $trusts = \App\Models\Trust::with('client', 'package')
                ->whereNotNull('package_id')
                ->whereNotIn('id', $invoicedWillIds)  // Exclude already-invoiced trusts
                ->latest()
                ->get();
            
            // Get trusts WITHOUT packages (need package assignment first)
            $trustsNeedingPackage = \App\Models\Trust::with('client', 'package')
                ->whereNull('package_id')
                ->whereNotIn('id', $invoicedWillIds)
                ->latest()
                ->get();
            
            // Combine both into one array with type indicator
            $documents = [];
            foreach ($wills as $will) {
                $documents[] = (object)[
                    'id' => $will->id,
                    'type' => 'will',
                    'document_type' => 'Will',
                    'client' => $will->client,
                    'package' => $will->package,
                    'status' => $will->status
                ];
            }
            foreach ($trusts as $trust) {
                $documents[] = (object)[
                    'id' => $trust->id,
                    'type' => 'trust',
                    'document_type' => 'Trust',
                    'client' => $trust->client,
                    'package' => $trust->package,
                    'status' => $trust->status
                ];
            }
        @endphp
        
        @if(count($trustsNeedingPackage) > 0)
        <!-- Trusts Needing Package Assignment -->
        <div class="mb-6 bg-orange-50 border border-orange-200 rounded-lg p-4">
            <h5 class="text-sm font-semibold text-orange-800 mb-3">
                <i class="fas fa-exclamation-triangle mr-2"></i>Trusts Pending Package Assignment
            </h5>
            <p class="text-sm text-orange-700 mb-3">The following trusts need a package assigned before they can be invoiced:</p>
            <div class="space-y-2">
                @foreach($trustsNeedingPackage as $trust)
                <div class="flex items-center justify-between bg-white p-3 rounded border border-orange-200">
                    <div class="flex-1">
                        <p class="font-medium text-gray-800">{{ $trust->client ? $trust->client->full_name : 'Unknown Client' }}</p>
                        <p class="text-xs text-gray-500">Trust ID: {{ $trust->id }} | Status: {{ ucfirst($trust->status) }}</p>
                    </div>
                    <button onclick="showAssignPackageModal({{ $trust->id }}, '{{ $trust->client ? $trust->client->full_name : 'Unknown' }}', 'trust')" 
                            class="bg-orange-500 text-white px-3 py-1 rounded text-sm font-medium hover:bg-orange-600">
                        <i class="fas fa-cube mr-1"></i> Assign Package
                    </button>
                </div>
                @endforeach
            </div>
        </div>
        @endif
        
        @if(count($documents) > 0)
        <div class="overflow-x-auto border border-gray-200 rounded-lg">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">
                        <th class="pb-3 pt-3 px-4">Document #</th>
                        <th class="pb-3 pt-3 px-4">Type</th>
                        <th class="pb-3 pt-3 px-4">Client</th>
                        <th class="pb-3 pt-3 px-4">Status</th>
                        <th class="pb-3 pt-3 px-4">Package</th>
                        <th class="pb-3 pt-3 px-4">Price</th>
                        <th class="pb-3 pt-3 px-4">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($documents as $doc)
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-4"><span class="font-mono text-sm text-gray-600">#{{ $doc->id }}</span></td>
                        <td class="py-3 px-4">
                            <span class="px-2 py-1 text-xs font-medium rounded-full {{ $doc->type === 'will' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                                {{ $doc->document_type }}
                            </span>
                        </td>
                        <td class="py-3 px-4">
                            <p class="font-medium text-gray-800">{{ $doc->client ? $doc->client->full_name : 'Unknown Client' }}</p>
                            <p class="text-xs text-gray-500">{{ $doc->client ? $doc->client->email : 'No email' }}</p>
                        </td>
                        <td class="py-3 px-4">
                            <span class="px-2 py-1 text-xs font-medium rounded-full {{ ($doc->status === 'completed' || $doc->status === 'approved' || $doc->status === 'signed') ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                <i class="fas fa-check-circle mr-1"></i> {{ ucfirst($doc->status) }}
                            </span>
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-600">{{ $doc->package?->name ?? 'N/A' }}</td>
                        <td class="py-3 px-4">
                            @if($doc->package)
                            <span class="font-bold text-gray-800">RM{{ number_format($doc->package->price, 2) }}</span>
                            @else
                            <span class="text-gray-400">N/A</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if($doc->type === 'will')
                                <a href="{{ route('admin.wills.invoice.create', $doc->id) }}" class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-green-700 inline-block">
                                    <i class="fas fa-file-invoice-dollar mr-1"></i> Create Invoice
                                </a>
                            @elseif($doc->type === 'trust')
                                <a href="{{ route('admin.trusts.invoice.create', $doc->id) }}" class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-green-700 inline-block">
                                    <i class="fas fa-file-invoice-dollar mr-1"></i> Create Invoice
                                </a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center py-8 bg-green-50 rounded-lg border border-green-200">
            <i class="fas fa-check-circle text-green-500 text-4xl mb-3"></i>
            <p class="text-green-700 font-medium">All wills and trusts with packages are invoiced or pending approval.</p>
            <p class="text-green-600 text-sm mt-1">Ready to invoice count: {{ $willsReadyForInvoice }}</p>
        </div>
        @endif
    </div>

    <hr class="my-6">

    <!-- Existing Invoices Section -->
    <h4 class="text-md font-semibold text-gray-700 mb-4">Existing Invoices</h4>
    @if($invoices->count() > 0)
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50">
                    <th class="pb-3 pt-3 px-4">Invoice #</th>
                    <th class="pb-3 pt-3 px-4">Client</th>
                    <th class="pb-3 pt-3 px-4">Type</th>
                    <th class="pb-3 pt-3 px-4">Amount</th>
                    <th class="pb-3 pt-3 px-4">Status</th>
                    <th class="pb-3 pt-3 px-4">Due Date</th>
                    <th class="pb-3 pt-3 px-4">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach($invoices as $invoice)
                <tr class="hover:bg-gray-50">
                    <td class="py-4 px-4"><span class="font-mono text-sm text-gray-600">{{ $invoice->invoice_number }}</span></td>
                    <td class="py-4 px-4">
                        <p class="font-medium text-gray-800">{{ $invoice->client ? $invoice->client->full_name : 'Unknown Client' }}</p>
                        <p class="text-xs text-gray-500">{{ $invoice->client ? $invoice->client->email : 'No email' }}</p>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-600">{{ App\Models\Invoice::getTypes()[$invoice->type] }}</td>
                    <td class="py-4 px-4">
                        <span class="font-bold text-gray-800">RM{{ number_format($invoice->total_amount, 2) }}</span>
                        @if($invoice->discount > 0)
                        <p class="text-xs text-green-600">Disc: -RM{{ number_format($invoice->discount, 2) }}</p>
                        @endif
                    </td>
                    <td class="py-4 px-4">
                        <span class="px-2 py-1 text-xs font-medium rounded-full {{ $invoice->status_badge }}">
                            {{ App\Models\Invoice::getStatuses()[$invoice->status] }}
                        </span>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-600">{{ $invoice->due_date->format('d M Y') }}</td>
                    <td class="py-4 px-4">
                        <div class="flex items-center gap-3">
                            <!-- View Invoice Button -->
                            <button onclick="showInvoiceViewModal({{ $invoice->id }}, '{{ $invoice->invoice_number }}', '{{ $invoice->client ? $invoice->client->full_name : 'Unknown Client' }}', '{{ number_format($invoice->total_amount, 2) }}')" class="text-blue-600 hover:text-blue-800 text-sm font-medium" title="View Invoice">
                                <i class="fas fa-eye"></i>
                            </button>
                            
                            <!-- Download PDF Button -->
                            <a href="{{ route('admin.invoices.download', ['invoice' => $invoice->id]) }}" class="text-purple-600 hover:text-purple-800 text-sm font-medium" title="Download as PDF">
                                <i class="fas fa-file-pdf"></i>
                            </a>

                            <!-- Record Payment Button -->
                            @if($invoice->status === 'pending')
                            <button onclick="showPaymentModal({{ $invoice->id }})" class="text-green-600 hover:text-green-800 text-sm font-medium" title="Record Payment">
                                <i class="fas fa-check"></i>
                            </button>
                            @else
                            <span class="text-gray-400 text-xs">Paid</span>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Table Footer with Summary -->
    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 rounded-b-lg flex items-center justify-between">
        <div class="text-sm text-gray-600">
            <strong>{{ $invoices->count() }}</strong> invoice(s) displayed
        </div>
        <div class="flex items-center space-x-4 text-xs text-gray-600">
            <div class="flex items-center space-x-2">
                <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
                <span>Pending: {{ $invoices->where('status', 'pending')->count() }}</span>
            </div>
            <div class="flex items-center space-x-2">
                <span class="w-3 h-3 rounded-full bg-green-400"></span>
                <span>Paid: {{ $invoices->where('status', 'paid')->count() }}</span>
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-gray-700 font-semibold">Total: RM{{ number_format($invoices->sum('total_amount'), 2) }}</span>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    @if($invoices->count() > 0)
    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex items-center justify-between flex-wrap gap-4">
        <div class="text-sm text-gray-600">
            Showing <span class="font-semibold">{{ $invoices->firstItem() ?? 0 }}</span> to 
            <span class="font-semibold">{{ $invoices->lastItem() ?? 0 }}</span> of 
            <span class="font-semibold">{{ $invoices->total() }}</span> results
        </div>
        
        @if($invoices->hasPages())
        <div class="flex gap-1 flex-wrap">
            {{-- Previous Page Link --}}
            @if($invoices->onFirstPage())
                <button disabled class="px-3 py-2 bg-gray-300 text-gray-500 rounded text-sm cursor-not-allowed">
                    <i class="fas fa-chevron-left mr-1"></i>Previous
                </button>
            @else
                <a href="{{ $invoices->previousPageUrl() }}" class="px-3 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition">
                    <i class="fas fa-chevron-left mr-1"></i>Previous
                </a>
            @endif
            
            {{-- Page Numbers --}}
            @php
                $start = max(1, $invoices->currentPage() - 2);
                $end = min($invoices->lastPage(), $invoices->currentPage() + 2);
            @endphp
            
            @if($start > 1)
                <span class="px-2 py-2 text-gray-500">...</span>
            @endif
            
            @for($i = $start; $i <= $end; $i++)
                @if($i == $invoices->currentPage())
                    <span class="px-3 py-2 bg-blue-600 text-white rounded text-sm font-medium">{{ $i }}</span>
                @else
                    <a href="{{ $invoices->url($i) }}" class="px-3 py-2 border border-gray-300 text-gray-700 rounded text-sm hover:bg-gray-100 transition">
                        {{ $i }}
                    </a>
                @endif
            @endfor
            
            @if($end < $invoices->lastPage())
                <span class="px-2 py-2 text-gray-500">...</span>
            @endif
            
            {{-- Next Page Link --}}
            @if($invoices->hasMorePages())
                <a href="{{ $invoices->nextPageUrl() }}" class="px-3 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition">
                    Next<i class="fas fa-chevron-right ml-1"></i>
                </a>
            @else
                <button disabled class="px-3 py-2 bg-gray-300 text-gray-500 rounded text-sm cursor-not-allowed">
                    Next<i class="fas fa-chevron-right ml-1"></i>
                </button>
            @endif
        </div>
        @endif
    </div>
    @endif
    @else
    <div class="text-center py-12">
        <i class="fas fa-file-invoice text-gray-300 text-5xl mb-4"></i>
        <p class="text-gray-500">No invoices found.</p>
    </div>
    @endif
</div>

<!-- Invoice View Modal -->
<div id="invoiceViewModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-8 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-2xl font-bold text-gray-800">Invoice View</h3>
                <p class="text-gray-600 mt-1">Invoice #<span id="invoiceNum"></span></p>
            </div>
            <button onclick="closeInvoiceViewModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>

        <div id="invoiceContent" class="border border-gray-200 rounded-lg p-6 mb-6 bg-gray-50">
            <!-- Invoice details will be loaded here -->
            <div class="text-center py-12">
                <i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i>
                <p class="text-gray-500 mt-2">Loading invoice...</p>
            </div>
        </div>

        <div class="flex gap-3">
            <button type="button" onclick="downloadInvoicePDF()" class="flex-1 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-medium">
                <i class="fas fa-file-pdf mr-2"></i>Download as PDF
            </button>
            <button type="button" onclick="closeInvoiceViewModal()" class="flex-1 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
                Close
            </button>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-96">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Record Payment</h3>
        <form id="paymentForm" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                <select name="payment_method" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="cash">Cash</option>
                    <option value="online_transfer">Online Transfer</option>
                    <option value="card">Credit/Debit Card</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Date</label>
                <x-date-picker
                    name="paid_date"
                    value="{{ date("
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg"
                    required
                />
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="closePaymentModal()" class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
                <button type="submit" class="flex-1 py-2 octowill-btn text-white rounded-lg">Record</button>
            </div>
        </form>
    </div>
</div>

<!-- Will Invoice Modal -->
<div id="willInvoiceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Create Invoice for Will</h3>
        <form id="willInvoiceForm" method="GET" action="{{ route('admin.wills.invoice.create', ['will' => '__will__']) }}">
            @csrf
            <input type="hidden" name="will_id" id="modalWillId" value="">
            <input type="hidden" name="package_price" id="modalPackagePrice" value="">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Will Information</label>
                <div id="willInfo" class="p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600"><strong>Will #:</strong> <span id="willId"></span></p>
                    <p class="text-sm text-gray-600"><strong>Client:</strong> <span id="willClient"></span></p>
                    <p class="text-sm text-gray-600"><strong>Status:</strong> <span id="willStatus"></span></p>
                    <p class="text-sm text-gray-600"><strong>Package:</strong> <span id="willPackage"></span></p>
                    <p class="text-sm text-gray-600"><strong>Package Price:</strong> <span id="willPrice" class="font-bold text-green-600"></span></p>
                </div>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                <p class="text-sm text-yellow-800"><i class="fas fa-info-circle mr-2"></i>The package price will be automatically filled in the invoice form. You can modify it if needed.</p>
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="closeWillInvoiceModal()" class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
                <button type="submit" class="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Continue to Invoice Form</button>
            </div>
        </form>
    </div>
</div>

<!-- Assign Package Modal -->
<div id="assignPackageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Assign Package to <span id="modalDocumentType">Will</span></h3>
        <form id="assignPackageForm" method="POST" action="">
            @csrf
            <input type="hidden" name="will_id" id="assignWillId" value="">
            <input type="hidden" name="document_type" id="assignDocumentType" value="">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2"><span id="modalDocumentTypeLabel">Will</span> Information</label>
                <div id="assignWillInfo" class="p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600"><strong><span id="modalDocumentTypeLabel2">Will</span> #:</strong> <span id="assignWillIdDisplay"></span></p>
                    <p class="text-sm text-gray-600"><strong>Client:</strong> <span id="assignClient"></span></p>
                    <p class="text-sm text-gray-600"><strong><span id="modalDocumentTypeLabel3">Will</span> Type:</strong> <span id="assignWillType"></span></p>
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Select Package</label>
                <select name="package_id" id="packageSelect" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="">Select a package...</option>
                    @php $packages = \App\Models\Package::where('is_active', true)->get(); @endphp
                    @foreach($packages as $pkg)
                    <option value="{{ $pkg->id }}" data-price="{{ $pkg->price }}">{{ $pkg->name }} - RM{{ number_format($pkg->price, 2) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                <p class="text-sm text-blue-800"><i class="fas fa-info-circle mr-2"></i>Assigning a package will set the price for this <span id="modalDocumentTypeInline">will</span>. This price will be used when creating invoices.</p>
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="closeAssignPackageModal()" class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
                <button type="submit" class="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Assign Package</button>
            </div>
        </form>
    </div>
</div>

<script>
// Auto-assign packages to wills without packages on page load
document.addEventListener('DOMContentLoaded', function() {
    // Auto-assign packages to all wills without packages
    fetch('/admin/invoices/auto-assign-packages', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    }).then(response => response.json()).then(data => {
        if (data.assigned_count > 0) {
            console.log('Auto-assigned ' + data.assigned_count + ' packages');
            location.reload();
        }
    }).catch(error => console.error('Auto-assign failed:', error));

    // Search functionality
    document.getElementById('searchInvoices').addEventListener('keyup', filterInvoices);
    document.getElementById('filterStatus').addEventListener('change', filterInvoices);
});

function filterInvoices() {
    const searchTerm = document.getElementById('searchInvoices').value.toLowerCase();
    const statusFilter = document.getElementById('filterStatus').value;
    const rows = document.querySelectorAll('tbody tr');

    rows.forEach(row => {
        const invoiceNum = row.cells[0].textContent.toLowerCase();
        const clientName = row.cells[1].textContent.toLowerCase();
        const status = row.cells[4].textContent.toLowerCase();
        
        const matchesSearch = invoiceNum.includes(searchTerm) || clientName.includes(searchTerm);
        const matchesStatus = !statusFilter || status.includes(statusFilter);

        row.style.display = (matchesSearch && matchesStatus) ? '' : 'none';
    });
}

function showPaymentModal(invoiceId) {
    document.getElementById('paymentForm').action = `/admin/invoices/${invoiceId}/payment`;
    document.getElementById('paymentModal').classList.remove('hidden');
    document.getElementById('paymentModal').classList.add('flex');
}

function closePaymentModal() {
    document.getElementById('paymentModal').classList.add('hidden');
    document.getElementById('paymentModal').classList.remove('flex');
}

function showWillInvoiceModal(willId, clientName, packageName, packagePrice) {
    document.getElementById('willId').textContent = '#' + willId;
    document.getElementById('willClient').textContent = clientName;
    document.getElementById('willStatus').textContent = 'Completed';
    document.getElementById('willPackage').textContent = packageName;
    document.getElementById('willPrice').textContent = 'RM' + parseFloat(packagePrice).toFixed(2);
    document.getElementById('modalWillId').value = willId;
    document.getElementById('modalPackagePrice').value = packagePrice;
    
    const form = document.getElementById('willInvoiceForm');
    form.action = form.action.replace('__will__', willId);
    
    document.getElementById('willInvoiceModal').classList.remove('hidden');
    document.getElementById('willInvoiceModal').classList.add('flex');
}

function closeWillInvoiceModal() {
    document.getElementById('willInvoiceModal').classList.add('hidden');
    document.getElementById('willInvoiceModal').classList.remove('flex');
}

function showDocumentInvoiceModal(docId, docType, clientName, packageName, packagePrice) {
    // Route to the appropriate function based on document type
    if (docType === 'trust') {
        // For trusts, go directly to create invoice (same form, different endpoint)
        document.getElementById('willId').textContent = '#' + docId;
        document.getElementById('willClient').textContent = clientName;
        document.getElementById('willStatus').textContent = 'Approved';
        document.getElementById('willPackage').textContent = packageName;
        document.getElementById('willPrice').textContent = 'RM' + parseFloat(packagePrice).toFixed(2);
        document.getElementById('modalWillId').value = docId;
        document.getElementById('modalPackagePrice').value = packagePrice;
        
        // Store document type for later use
        document.getElementById('modalWillId').dataset.docType = docType;
        
        const form = document.getElementById('willInvoiceForm');
        // For trusts, route to trust invoice endpoint
        form.action = '/admin/trusts/' + docId + '/invoice/create';
        
        document.getElementById('willInvoiceModal').classList.remove('hidden');
        document.getElementById('willInvoiceModal').classList.add('flex');
    } else {
        // For wills, use the existing function
        showWillInvoiceModal(docId, clientName, packageName, packagePrice);
    }
}
}

function showAssignPackageModal(docId, clientName, documentType) {
    // Update modal labels based on document type
    const isWill = documentType === 'will' || documentType === 'Will';
    const docTypeLabel = isWill ? 'Will' : 'Trust';
    const docTypeLower = isWill ? 'will' : 'trust';
    
    document.getElementById('modalDocumentType').textContent = docTypeLabel;
    document.getElementById('modalDocumentTypeLabel').textContent = docTypeLabel;
    document.getElementById('modalDocumentTypeLabel2').textContent = docTypeLabel;
    document.getElementById('modalDocumentTypeLabel3').textContent = docTypeLabel;
    document.getElementById('modalDocumentTypeInline').textContent = docTypeLower;
    
    document.getElementById('assignWillIdDisplay').textContent = '#' + docId;
    document.getElementById('assignClient').textContent = clientName;
    document.getElementById('assignWillType').textContent = documentType;
    document.getElementById('assignWillId').value = docId;
    document.getElementById('assignDocumentType').value = documentType;
    
    // Set the form action based on document type
    const form = document.getElementById('assignPackageForm');
    if (isWill) {
        form.action = '/admin/wills/' + docId + '/assign-package';
    } else {
        form.action = '/admin/trusts/' + docId + '/assign-package';
    }
    
    document.getElementById('assignPackageModal').classList.remove('hidden');
    document.getElementById('assignPackageModal').classList.add('flex');
}

function closeAssignPackageModal() {
    document.getElementById('assignPackageModal').classList.add('hidden');
    document.getElementById('assignPackageModal').classList.remove('flex');
}

function autoAssignPackage(willId, button) {
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Assigning...';
    
    fetch(`/admin/wills/${willId}/auto-assign-package`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    }).then(response => response.json()).then(data => {
        if (data.success) {
            alert('Success: ' + data.message + '\n\nPackage: ' + data.package_name + ' - RM' + parseFloat(data.package_price).toFixed(2));
            location.reload();
        } else {
            alert('Error: ' + data.message);
            button.disabled = false;
            button.innerHTML = originalText;
        }
    }).catch(error => {
        alert('Error: Failed to assign package');
        button.disabled = false;
        button.innerHTML = originalText;
    });
}

function exportInvoices(format) {
    const searchTerm = document.getElementById('searchInvoices').value;
    const statusFilter = document.getElementById('filterStatus').value;
    
    const params = new URLSearchParams();
    if (searchTerm) params.append('search', searchTerm);
    if (statusFilter) params.append('status', statusFilter);
    params.append('format', format);
    
    window.location.href = `/admin/invoices/export?${params.toString()}`;
}

// Invoice View Modal Functions
let currentInvoiceId = null;

function showInvoiceViewModal(invoiceId, invoiceNumber, clientName, amount) {
    currentInvoiceId = invoiceId;
    document.getElementById('invoiceNum').textContent = invoiceNumber;
    
    // Load invoice details via AJAX
    fetch(`/admin/invoices/${invoiceId}/details`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayInvoiceContent(data.invoice);
        } else {
            document.getElementById('invoiceContent').innerHTML = '<div class="text-center text-red-600"><i class="fas fa-exclamation-circle text-2xl mb-2"></i><p>Failed to load invoice details</p></div>';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('invoiceContent').innerHTML = '<div class="text-center text-red-600"><i class="fas fa-exclamation-circle text-2xl mb-2"></i><p>Error loading invoice</p></div>';
    });
    
    document.getElementById('invoiceViewModal').classList.remove('hidden');
    document.getElementById('invoiceViewModal').classList.add('flex');
}

function closeInvoiceViewModal() {
    document.getElementById('invoiceViewModal').classList.add('hidden');
    document.getElementById('invoiceViewModal').classList.remove('flex');
    currentInvoiceId = null;
}

function displayInvoiceContent(invoice) {
    const html = `
        <div class="space-y-4">
            <!-- Header -->
            <div class="border-b pb-4">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h4 class="text-lg font-bold text-gray-900">Invoice #${invoice.invoice_number}</h4>
                        <p class="text-sm text-gray-500">Date: ${new Date(invoice.created_at).toLocaleDateString()}</p>
                    </div>
                    <span class="px-3 py-1 rounded-full text-sm font-medium ${
                        invoice.status === 'paid' 
                            ? 'bg-green-100 text-green-800' 
                            : 'bg-yellow-100 text-yellow-800'
                    }">
                        ${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
                    </span>
                </div>
            </div>

            <!-- Client Info -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xs text-gray-500 uppercase">Bill To</p>
                    <p class="font-semibold text-gray-900">${invoice.client_name || 'Unknown Client'}</p>
                    <p class="text-sm text-gray-600">${invoice.client_email || 'No email'}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase">Invoice Details</p>
                    <p class="text-sm text-gray-700"><strong>Type:</strong> ${invoice.type_label}</p>
                    <p class="text-sm text-gray-700"><strong>Due Date:</strong> ${new Date(invoice.due_date).toLocaleDateString()}</p>
                </div>
            </div>

            <!-- Items Table -->
            <div class="overflow-hidden border border-gray-200 rounded-lg">
                <table class="w-full text-sm">
                    <thead class="bg-gray-100 border-b">
                        <tr>
                            <th class="px-3 py-2 text-left text-gray-700 font-semibold">Description</th>
                            <th class="px-3 py-2 text-right text-gray-700 font-semibold">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-3 py-2 text-gray-800">Will Package / Service</td>
                            <td class="px-3 py-2 text-right text-gray-800 font-semibold">RM${parseFloat(invoice.total_amount).toFixed(2)}</td>
                        </tr>
                        ${invoice.discount > 0 ? `
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-3 py-2 text-gray-800">Discount</td>
                            <td class="px-3 py-2 text-right text-green-600 font-semibold">-RM${parseFloat(invoice.discount).toFixed(2)}</td>
                        </tr>
                        ` : ''}
                        <tr class="bg-gray-50">
                            <td class="px-3 py-2 text-gray-900 font-bold">Total</td>
                            <td class="px-3 py-2 text-right text-gray-900 font-bold">RM${(parseFloat(invoice.total_amount) - (invoice.discount || 0)).toFixed(2)}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Notes -->
            ${invoice.notes ? `
            <div class="bg-blue-50 border border-blue-200 rounded p-3">
                <p class="text-xs text-blue-700 font-semibold mb-1">Notes:</p>
                <p class="text-sm text-blue-700">${invoice.notes}</p>
            </div>
            ` : ''}

            <!-- Payment Info -->
            ${invoice.status === 'paid' ? `
            <div class="bg-green-50 border border-green-200 rounded p-3">
                <p class="text-xs text-green-700 font-semibold">Payment Status</p>
                <p class="text-sm text-green-700">Paid on ${new Date(invoice.paid_date).toLocaleDateString()}</p>
                ${invoice.payment_method ? `<p class="text-sm text-green-700">Method: ${invoice.payment_method}</p>` : ''}
            </div>
            ` : ''}
        </div>
    `;
    
    document.getElementById('invoiceContent').innerHTML = html;
}

function downloadInvoicePDF() {
    if (!currentInvoiceId) return;
    
    const btn = event.target.closest('button');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Generating PDF...';
    
    window.location.href = `/admin/invoices/${currentInvoiceId}/download`;
    
    // Reset button after 2 seconds
    setTimeout(() => {
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }, 2000);
}
</script>

@endsection