<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex items-center justify-between w-full">
            <div>
                <h1 class="text-lg font-semibold text-gray-800">Invoices</h1>
                <p class="text-xs text-gray-400 mt-0.5">Manage digital invoices and FBR synchronization</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="<?php echo e(route('invoices.import')); ?>"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 text-gray-700 bg-white text-sm font-medium hover:bg-gray-50 transition shadow-sm">
                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    Import Invoices
                </a>
                <a href="<?php echo e(route('invoices.create')); ?>"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition shadow-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    New Invoice
                </a>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <div x-data="invoiceList()" class="space-y-6">
        <!-- Metric Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-gray-400 uppercase">Total Invoices</span>
                    <span class="p-1.5 rounded-lg bg-indigo-50 text-indigo-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </span>
                </div>
                <div class="mt-2 flex items-baseline gap-2">
                    <span class="text-2xl font-bold text-gray-800" x-text="pagination.total">0</span>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-gray-400 uppercase">Synced (FBR)</span>
                    <span class="p-1.5 rounded-lg bg-emerald-50 text-emerald-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </span>
                </div>
                <div class="mt-2 flex items-baseline gap-2">
                    <span class="text-2xl font-bold text-gray-800" x-text="metrics.synced">0</span>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-gray-400 uppercase">Pending Drafts</span>
                    <span class="p-1.5 rounded-lg bg-amber-50 text-amber-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                    </span>
                </div>
                <div class="mt-2 flex items-baseline gap-2">
                    <span class="text-2xl font-bold text-gray-800" x-text="metrics.drafts">0</span>
                    <button @click="bulkSync()" :disabled="metrics.drafts === 0 || syncing"
                        class="ml-auto text-xs text-indigo-600 hover:text-indigo-800 font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
                        Sync All
                    </button>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-gray-400 uppercase">Failed Syncs</span>
                    <span class="p-1.5 rounded-lg bg-rose-50 text-rose-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </span>
                </div>
                <div class="mt-2 flex items-baseline gap-2">
                    <span class="text-2xl font-bold text-gray-800" x-text="metrics.failed">0</span>
                </div>
            </div>
        </div>

        <!-- Filter Bar -->
        <div
            class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex flex-wrap items-center gap-3">
                <select x-model="filters.sync_status" @change="fetchInvoices()"
                    class="rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                    <option value="">All Statuses</option>
                    <option value="draft">Draft</option>
                    <option value="queued">Queued</option>
                    <option value="syncing">Syncing</option>
                    <option value="synced">Synced</option>
                    <option value="failed">Failed</option>
                </select>

                <select x-model="filters.invoice_type" @change="fetchInvoices()"
                    class="rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                    <option value="">All Types</option>
                    <option value="1">Sale Invoice</option>
                    <option value="2">Debit Note</option>
                    <option value="3">Credit Note</option>
                </select>

                <input type="text" x-model="date_range" x-flatpickr="{ mode: 'range' }" placeholder="Select Date Range"
                    class="rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400 w-48 sm:w-56 bg-white cursor-pointer">
            </div>

            <div class="flex items-center gap-2">
                <button @click="resetFilters()"
                    class="text-sm text-gray-500 hover:text-gray-700 px-3 py-2">Reset</button>
                <a :href="`/invoices/export-excel?sync_status=${filters.sync_status}&invoice_type=${filters.invoice_type}&date_range=${date_range}`"
                    class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold transition shadow-sm">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    Export Excel
                </a>
            </div>
        </div>

        <!-- Bulk Actions Bar -->
        <div x-show="selectedInvoices.length > 0" x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 translate-y-2"
            class="sticky bottom-6 z-30 w-full bg-gray-900/95 backdrop-blur-md border border-gray-800 rounded-2xl px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-2xl ring-1 ring-black/5">
            <div class="flex items-center gap-3">
                <span
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500 text-xs font-bold text-white shadow animate-pulse"
                    x-text="selectedInvoices.length"></span>
                <span class="text-sm font-semibold text-gray-200">Invoices Selected</span>
            </div>
            <div class="flex flex-wrap items-center gap-2.5">
                <button @click="bulkSync()"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition shadow-md hover:shadow-indigo-500/20 active:scale-95 duration-150">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7C4.68 9.547 4.634 10.768 4.634 12c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.092-1.209.138-2.43.138-3.662z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 10.5l3 3 3-3" />
                    </svg>
                    Sync Selected
                </button>
                <a :href="`/invoices/export-excel?ids=${selectedInvoices.join(',')}`"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold transition active:scale-95 duration-150 shadow-md hover:shadow-emerald-500/20">
                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="2"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg>
                    Export Excel
                </a>
                <a :href="`/invoices/bulk-pdf?ids=${selectedInvoices.join(',')}`" target="_blank"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700 text-xs font-bold transition active:scale-95 duration-150 shadow-sm">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg>
                    Combined PDF
                </a>
                <button @click="bulkDelete()"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-rose-600/90 hover:bg-rose-500 text-white text-xs font-bold transition active:scale-95 duration-150 shadow-md hover:shadow-rose-500/20">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                    </svg>
                    Delete Selected
                </button>
            </div>
        </div>

        <!-- Invoices List Table -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr
                            class="bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            <th class="px-6 py-4 w-10">
                                <input type="checkbox" @change="toggleSelectAll($event)" :checked="isAllSelected()"
                                    class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                            </th>
                            <th class="px-6 py-4">Invoice details</th>
                            <th class="px-6 py-4">Customer</th>
                            <th class="px-6 py-4">Invoice Type</th>
                            <th class="px-6 py-4">FBR Invoice No</th>
                            <th class="px-6 py-4">Total Amount</th>
                            <th class="px-6 py-4 text-center">FBR Sync Status</th>
                            <th class="px-6 py-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-sm text-gray-600">
                        <template x-for="invoice in invoices" :key="invoice.id">
                            <tr class="hover:bg-gray-50 transition"
                                :class="{ 'bg-indigo-50/20': selectedInvoices.includes(invoice.id) }">
                                <td class="px-6 py-4 w-10">
                                    <input type="checkbox" :value="invoice.id" x-model="selectedInvoices"
                                        class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-1.5">
                                        <div class="font-medium text-gray-800"
                                            x-text="invoice.local_invoice_no || ('#' + invoice.id)"></div>
                                        <template x-if="invoice.scheduled_sync_at">
                                            <span class="inline-flex items-center text-indigo-600 cursor-help"
                                                :title="'Scheduled: ' + new Date(invoice.scheduled_sync_at).toLocaleString()">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                </svg>
                                            </span>
                                        </template>
                                    </div>
                                    <div class="text-xs text-gray-400 mt-0.5" x-text="invoice.invoice_date"></div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="font-medium text-gray-800"
                                        x-text="invoice.customer?.name || 'Walk-in Customer'"></div>
                                    <div class="text-xs text-gray-400 mt-0.5"
                                        x-text="invoice.customer?.ntn_cnic || 'No NTN/CNIC'"></div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="text-xs text-gray-700 font-medium" x-text="invoice.invoice_type || '—'">
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="font-mono text-xs text-gray-500"
                                        x-text="invoice.fbr_invoice_number || '—'"></span>
                                </td>
                                <td class="px-6 py-4 font-semibold text-gray-800">
                                    Rs. <span
                                        x-text="Number(invoice.total_amount).toLocaleString(undefined, {minimumFractionDigits:2})"></span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span
                                        class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold"
                                        :class="{
                                              'bg-gray-100 text-gray-700': invoice.sync_status === 'draft',
                                              'bg-blue-100 text-blue-700': invoice.sync_status === 'queued' || invoice.sync_status === 'syncing',
                                              'bg-emerald-100 text-emerald-700': invoice.sync_status === 'synced',
                                              'bg-rose-100 text-rose-700': invoice.sync_status === 'failed'
                                          }">
                                        <span class="w-1.5 h-1.5 rounded-full" :class="{
                                                   'bg-gray-500': invoice.sync_status === 'draft',
                                                   'bg-blue-500 animate-pulse': invoice.sync_status === 'queued' || invoice.sync_status === 'syncing',
                                                   'bg-emerald-500': invoice.sync_status === 'synced',
                                                   'bg-rose-500': invoice.sync_status === 'failed'
                                               }"></span>
                                        <span x-text="invoice.sync_status.toUpperCase()"></span>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <a :href="`/invoices/${invoice.id}`"
                                            class="p-1 text-gray-400 hover:text-gray-600 transition"
                                            title="View Details">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                        </a>

                                        <a :href="`/invoices/pdf?id=${invoice.id}`" target="_blank"
                                            class="p-1 text-gray-400 hover:text-indigo-600 transition"
                                            title="Print PDF">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                        </a>

                                        <button @click="openEmailModal(invoice.id)"
                                            class="p-1 text-gray-400 hover:text-indigo-600 transition"
                                            title="Email PDF to Customer">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                            </svg>
                                        </button>

                                        <template
                                            x-if="invoice.sync_status === 'draft' || invoice.sync_status === 'failed'">
                                            <a :href="`/invoices/${invoice.id}/edit`"
                                                class="p-1 text-gray-400 hover:text-indigo-600 transition"
                                                title="Edit Draft">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                </svg>
                                            </a>
                                        </template>

                                        <template
                                            x-if="invoice.sync_status === 'draft' || invoice.sync_status === 'failed'">
                                            <button @click="syncInvoice(invoice.id)"
                                                class="p-1 text-gray-400 hover:text-emerald-600 transition"
                                                title="Sync with FBR">
                                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg"
                                                    viewBox="0 0 16 16">
                                                    <path fill="currentColor"
                                                        d="M1.705 8.005a.75.75 0 0 1 .834.656a5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z" />
                                                </svg>
                                            </button>
                                        </template>

                                        <template
                                            x-if="invoice.sync_status === 'draft' || invoice.sync_status === 'failed'">
                                            <button @click="deleteInvoice(invoice.id)"
                                                class="p-1 text-gray-400 hover:text-rose-600 transition"
                                                title="Delete Invoice">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="invoices.length === 0">
                            <td colspan="8" class="px-6 py-12 text-center text-gray-400">
                                <svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                </svg>
                                No invoices found.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination Footer -->
            <div x-show="pagination.last_page > 1"
                class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                <button @click="changePage(pagination.current_page - 1)" :disabled="pagination.current_page === 1"
                    class="px-3 py-1 rounded border border-gray-200 text-sm hover:bg-gray-100 disabled:opacity-50 disabled:hover:bg-transparent">
                    Previous
                </button>
                <span class="text-xs text-gray-500"
                    x-text="`Page ${pagination.current_page} of ${pagination.last_page}`"></span>
                <button @click="changePage(pagination.current_page + 1)"
                    :disabled="pagination.current_page === pagination.last_page"
                    class="px-3 py-1 rounded border border-gray-200 text-sm hover:bg-gray-100 disabled:opacity-50 disabled:hover:bg-transparent">
                    Next
                </button>
            </div>
            <!-- Email Composition Modal -->
            <div x-show="showEmailModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak style="display: none;">
                <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                    <div x-show="showEmailModal" x-transition:enter="ease-out duration-300"
                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                        x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity"
                        @click="showEmailModal = false">
                        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                    </div>

                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

                    <div x-show="showEmailModal" x-transition:enter="ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                        x-transition:leave="ease-in duration-200"
                        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-100">

                        <div class="bg-white px-6 pt-6 pb-4">
                            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
                                <h3 class="text-lg font-semibold text-gray-800 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                    Compose Email
                                </h3>
                                <button @click="showEmailModal = false"
                                    class="text-gray-400 hover:text-gray-600 transition">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <div class="mt-4 space-y-4">
                                <div>
                                    <label
                                        class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">To
                                        (Recipient)</label>
                                    <input type="text" x-model="emailForm.recipient" disabled
                                        class="w-full rounded-xl border-gray-200 bg-gray-50 text-gray-500 text-sm focus:outline-none focus:ring-0 focus:border-gray-200">
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Subject</label>
                                    <input type="text" x-model="emailForm.subject" placeholder="Enter email subject"
                                        class="w-full rounded-xl border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Message
                                        Body</label>
                                    <textarea x-model="emailForm.body" rows="6" placeholder="Write your message here..."
                                        class="w-full rounded-xl border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"></textarea>
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Attachment</label>
                                    <div
                                        class="mt-1 flex items-center gap-2 p-3 bg-indigo-50 border border-indigo-100 rounded-xl text-indigo-700 text-xs font-medium">
                                        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                                        </svg>
                                        <span x-text="emailForm.filename"></span>
                                        <span class="text-gray-400 text-[10px] ml-auto">(PDF generated
                                            dynamically)</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            class="bg-gray-50 px-6 py-4 flex flex-row-reverse gap-2 rounded-b-2xl border-t border-gray-100">
                            <button type="button" @click="emailInvoice()" :disabled="sendingEmail"
                                class="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition shadow-sm disabled:opacity-50 min-w-[100px]">
                                <svg x-show="sendingEmail" class="animate-spin h-4 w-4 text-white" fill="none"
                                    viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                                <span x-text="sendingEmail ? 'Sending...' : 'Send Email'"></span>
                            </button>
                            <button type="button" @click="showEmailModal = false" :disabled="sendingEmail"
                                class="px-4 py-2 bg-white hover:bg-gray-50 border border-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function invoiceList() {
            return {
                invoices: [],
                syncing: false,
                selectedInvoices: [],
                date_range: '',
                showEmailModal: false,
                sendingEmail: false,
                emailForm: {
                    recipient: '',
                    subject: '',
                    body: '',
                    invoiceId: null,
                    filename: ''
                },
                filters: {
                    sync_status: '',
                    invoice_type: '',
                    from_date: '',
                    to_date: '',
                    page: 1,
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    total: 0,
                },
                metrics: {
                    synced: 0,
                    drafts: 0,
                    failed: 0,
                },
                init() {
                    this.$watch('date_range', value => {
                        if (value && value.includes(' to ')) {
                            const [start, end] = value.split(' to ');
                            this.filters.from_date = start;
                            this.filters.to_date = end;
                        } else if (value) {
                            this.filters.from_date = value;
                            this.filters.to_date = value;
                        } else {
                            this.filters.from_date = '';
                            this.filters.to_date = '';
                        }
                        this.filters.page = 1;
                        this.fetchInvoices();
                    });
                    this.fetchInvoices();
                    this.fetchMetrics();
                },
                async fetchInvoices() {
                    const params = new URLSearchParams(this.filters);
                    try {
                        const data = await apiFetch(`/invoices/data?${params.toString()}`);
                        this.invoices = data.data;
                        this.pagination = {
                            current_page: data.current_page,
                            last_page: data.last_page,
                            total: data.total,
                        };
                        this.selectedInvoices = []; // Clear selection on fetch
                    } catch (e) { }
                },
                async fetchMetrics() {
                    try {
                        const data = await apiFetch('/invoices/data?per_page=100');
                        const list = data.data || [];
                        this.metrics.synced = list.filter(i => i.sync_status === 'synced').length;
                        this.metrics.drafts = list.filter(i => i.sync_status === 'draft').length;
                        this.metrics.failed = list.filter(i => i.sync_status === 'failed').length;
                    } catch (e) { }
                },
                resetFilters() {
                    this.date_range = '';
                    this.filters = { sync_status: '', invoice_type: '', from_date: '', to_date: '', page: 1 };
                    this.fetchInvoices();
                },
                changePage(page) {
                    this.filters.page = page;
                    this.fetchInvoices();
                },
                toggleSelectAll(e) {
                    if (e.target.checked) {
                        this.selectedInvoices = this.invoices.map(inv => inv.id);
                    } else {
                        this.selectedInvoices = [];
                    }
                },
                isAllSelected() {
                    return this.invoices.length > 0 && this.selectedInvoices.length === this.invoices.length;
                },
                async syncInvoice(id) {
                    try {
                        const res = await apiFetch(`/invoices/${id}/sync`, { method: 'POST' });
                        if (res.success) {
                            notify('Invoice synced with FBR successfully.', 'success');
                        } else {
                            notify(res.sync_error || 'FBR Sync failed.', 'error');
                        }
                    } catch (e) {
                    } finally {
                        this.fetchInvoices();
                        this.fetchMetrics();
                    }
                },
                async openEmailModal(id) {
                    notify('Loading preview...', 'info');
                    try {
                        const res = await apiFetch(`/invoices/${id}/email-preview`);
                        this.emailForm.recipient = res.recipient;
                        this.emailForm.subject = res.subject;
                        this.emailForm.body = res.body;
                        this.emailForm.invoiceId = id;
                        this.emailForm.filename = res.filename;
                        this.showEmailModal = true;
                    } catch (e) {
                        notify('Failed to load email preview.', 'error');
                    }
                },
                async emailInvoice() {
                    if (!this.emailForm.invoiceId) return;
                    this.sendingEmail = true;
                    notify('Sending email...', 'info');
                    try {
                        const res = await apiFetch(`/invoices/${this.emailForm.invoiceId}/send-email`, {
                            method: 'POST',
                            body: {
                                subject: this.emailForm.subject,
                                body: this.emailForm.body
                            }
                        });
                        if (res.success) {
                            notify(res.message, 'success');
                            this.showEmailModal = false;
                        } else {
                            notify(res.message || 'Failed to send email.', 'error');
                        }
                    } catch (e) {
                        notify(e.message || 'Error occurred while sending email.', 'error');
                    } finally {
                        this.sendingEmail = false;
                    }
                },
                async bulkSync() {
                    if (this.selectedInvoices.length === 0) return;
                    this.syncing = true;
                    try {
                        const res = await apiFetch('/invoices/bulk-sync', {
                            method: 'POST',
                            body: JSON.stringify({ ids: this.selectedInvoices }),
                            headers: { 'Content-Type': 'application/json' }
                        });
                        notify(res.message, 'success');
                        this.selectedInvoices = [];
                        this.fetchInvoices();
                        this.fetchMetrics();
                    } catch (e) {
                        notify(e.message || 'Bulk sync failed.', 'error');
                    } finally {
                        this.syncing = false;
                    }
                },
                async bulkDelete() {
                    if (this.selectedInvoices.length === 0) return;
                    const result = await Swal.fire({
                        title: 'Are you sure?',
                        text: "This will permanently delete the selected draft/failed invoices. Synced invoices cannot be deleted.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#4f46e5',
                        cancelButtonColor: '#ef4444',
                        confirmButtonText: 'Yes, delete selected!'
                    });

                    if (result.isConfirmed) {
                        try {
                            const res = await apiFetch('/invoices/bulk-delete', {
                                method: 'POST',
                                body: JSON.stringify({ ids: this.selectedInvoices }),
                                headers: { 'Content-Type': 'application/json' }
                            });
                            Swal.fire('Completed!', res.message, 'success');
                            this.selectedInvoices = [];
                            this.fetchInvoices();
                            this.fetchMetrics();
                        } catch (e) {
                            Swal.fire('Error!', e.message || 'Bulk delete failed.', 'error');
                        }
                    }
                },
                async deleteInvoice(id) {
                    const result = await Swal.fire({
                        title: 'Are you sure?',
                        text: "This draft invoice will be deleted permanently!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#4f46e5',
                        cancelButtonColor: '#ef4444',
                        confirmButtonText: 'Yes, delete it!'
                    });

                    if (result.isConfirmed) {
                        try {
                            await apiFetch(`/invoices/${id}`, { method: 'DELETE' });
                            Swal.fire(
                                'Deleted!',
                                'Invoice has been deleted successfully.',
                                'success'
                            );
                            this.fetchInvoices();
                            this.fetchMetrics();
                        } catch (e) {
                            Swal.fire(
                                'Error!',
                                e.message || 'Could not delete invoice.',
                                'error'
                            );
                        }
                    }
                },
            };
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH /www/wwwroot/lifeelements.shiningerp.com/resources/views/invoices/index.blade.php ENDPATH**/ ?>