<?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 flex-wrap gap-3">
            <div>
                <h1 class="text-lg font-semibold text-gray-800">Invoice Details</h1>
                <p class="text-xs text-gray-400 mt-0.5"><?php echo e($invoice->local_invoice_no ?: '#' . $invoice->id); ?></p>
            </div>
            <div class="flex items-center gap-2">
                <a href="<?php echo e(route('invoices.index')); ?>"
                    class="text-sm text-gray-500 hover:text-gray-700 font-medium mr-2 inline-flex items-center gap-1">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to Invoices
                </a>
                <a href="<?php echo e(route('invoices.download-pdf', ['id' => $invoice->id])); ?>" target="_blank"
                    class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-50 text-gray-700 text-xs font-semibold 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 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>
                    Print PDF
                </a>
                <button onclick="window.dispatchEvent(new CustomEvent('trigger-email-modal'))"
                    class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-50 text-gray-700 text-xs font-semibold 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="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>
                    Email Invoice
                </button>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <div x-data="invoiceDetail()" x-init="init()" class="max-w-7xl mx-auto space-y-6">

        <!-- ============ ROW 1: Status Bar (full width) ============ -->
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 sm:p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center gap-4">
                    <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0" :class="{
                             'bg-gray-100': invoice.sync_status === 'draft',
                             'bg-blue-100': invoice.sync_status === 'queued' || invoice.sync_status === 'syncing',
                             'bg-emerald-100': invoice.sync_status === 'synced',
                             'bg-rose-100': invoice.sync_status === 'failed'
                         }">
                        <svg class="w-5 h-5" :class="{
                                 'text-gray-500': invoice.sync_status === 'draft',
                                 'text-blue-600': invoice.sync_status === 'queued' || invoice.sync_status === 'syncing',
                                 'text-emerald-600': invoice.sync_status === 'synced',
                                 'text-rose-600': invoice.sync_status === 'failed'
                             }" 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>
                    </div>
                    <div>
                        <span class="text-[11px] font-bold text-gray-400 uppercase tracking-wide">FBR Sync Status</span>
                        <div class="flex items-center gap-2 mt-1">
                            <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>
                            <span class="text-xs text-gray-400" x-show="invoice.fbr_invoice_number"
                                x-text="'IRN: ' + invoice.fbr_invoice_number"></span>
                            <span class="text-xs text-indigo-600 font-semibold flex items-center gap-1 bg-indigo-50/50 px-2 py-0.5 rounded-lg border border-indigo-100/50" x-show="invoice.scheduled_sync_at">
                                <svg class="w-3.5 h-3.5" 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 x-text="'Scheduled: ' + formatDateTime(invoice.scheduled_sync_at)"></span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex gap-2">
                        <button x-show="invoice.sync_status !== 'synced'" @click="validateInvoice()" :disabled="processing"
                            class="px-3.5 py-2 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs font-semibold transition disabled:opacity-50 inline-flex items-center gap-1.5 bg-white">
                            <svg class="w-3.5 h-3.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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                            </svg>
                            Dry-Run Validate
                        </button>
                        <button x-show="invoice.sync_status !== 'synced'" @click="syncInvoice()" :disabled="processing"
                            class="px-3.5 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition disabled:opacity-50 inline-flex items-center gap-1.5 shadow-sm">
                            <svg class="w-3.5 h-3.5" :class="processing && 'animate-spin'" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            <span x-text="processing ? 'Processing...' : 'Sync Now'"></span>
                        </button>
                    </div>

                    <!-- Date-Time Scheduler Picker -->
                    <div x-show="invoice.sync_status !== 'synced'" class="flex items-center gap-2 border-l border-gray-100 pl-4">
                        <div class="relative">
                            <input type="text" x-flatpickr="{ enableTime: true, dateFormat: 'Y-m-d H:i:s', minDate: 'today' }"
                                   x-model="schedulerTime" placeholder="Schedule sync time..."
                                   class="pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-xs w-48 focus:border-indigo-400 focus:ring-indigo-400 bg-white">
                            <div class="absolute left-2.5 top-2.5 text-gray-400">
                                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                            </div>
                        </div>
                        <button @click="saveSchedule()" :disabled="processing || !schedulerTime"
                                class="px-3.5 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-lg transition disabled:opacity-50">
                            Schedule
                        </button>
                        <button x-show="invoice.scheduled_sync_at" @click="cancelSchedule()" :disabled="processing"
                                class="px-2.5 py-2 text-rose-600 hover:text-rose-800 text-xs font-semibold rounded-lg transition"
                                title="Cancel Schedule">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ============ ROW 2: Customer (2/3) + Totals (1/3) ============ -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Customer Card -->
            <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
                <h2 class="text-sm font-semibold text-gray-700 border-b border-gray-50 pb-2 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    Customer Details
                </h2>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-5 text-xs">
                    <div>
                        <span class="text-gray-400 block uppercase mb-1 tracking-wide text-[10px]">Name</span>
                        <span class="font-semibold text-gray-800 text-sm"
                            x-text="invoice.customer?.name || 'Walk-in Customer'"></span>
                    </div>
                    <div>
                        <span class="text-gray-400 block uppercase mb-1 tracking-wide text-[10px]">NTN / CNIC</span>
                        <span class="font-semibold text-gray-800" x-text="invoice.customer?.ntn || '—'"></span>
                    </div>
                    <div>
                        <span class="text-gray-400 block uppercase mb-1 tracking-wide text-[10px]">Registration
                            Type</span>
                        <span class="font-semibold text-gray-800"
                            x-text="invoice.customer?.registration_type || '—'"></span>
                    </div>
                    <div>
                        <span class="text-gray-400 block uppercase mb-1 tracking-wide text-[10px]">Invoice Date</span>
                        <span class="font-semibold text-gray-800 text-sm" x-text="invoice.invoice_date"></span>
                    </div>
                </div>
            </div>

            <!-- Totals Card -->
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-3">
                <h2 class="text-sm font-semibold text-gray-700 border-b border-gray-50 pb-2 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 7h6m0 10v-3m-3 3v-6m-3 6v-1m-2 4h10a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                    Financial Breakdown
                </h2>
                <div class="space-y-2.5 text-xs pt-1">
                    <div class="flex justify-between text-gray-500">
                        <span>Subtotal</span>
                        <span class="font-mono text-gray-800"
                            x-text="formatCurrency(invoice.subtotal)"></span>
                    </div>
                    <div class="flex justify-between text-gray-500">
                        <span>Sales Tax</span>
                        <span class="font-mono text-indigo-600 font-semibold"
                            x-text="'+ ' + formatCurrency(invoice.total_tax)"></span>
                    </div>
                    <div class="flex justify-between text-gray-500" x-show="invoice.items?.reduce((sum, item) => sum + Number(item.discount || 0), 0) > 0">
                        <span>Item Discount</span>
                        <span class="font-mono text-emerald-600"
                            x-text="'- ' + formatCurrency(invoice.items?.reduce((sum, item) => sum + Number(item.discount || 0), 0))"></span>
                    </div>
                    <div class="border-t border-gray-100 pt-3 flex justify-between font-bold text-sm text-gray-800">
                        <span>Grand Total</span>
                        <span class="font-mono text-indigo-700 text-base"
                            x-text="formatCurrency(invoice.total_amount)"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ============ ROW 3: Line Items (full width) ============ -->
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
            <h2 class="text-sm font-semibold text-gray-700 border-b border-gray-50 pb-2 flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
                </svg>
                Line Items
            </h2>
            <div class="overflow-x-auto -mx-2 px-2">
                <table class="w-full text-left border-collapse text-xs min-w-[640px]">
                    <thead>
                        <tr class="border-b border-gray-100 text-gray-400 uppercase tracking-wider text-[10px]">
                            <th class="py-2.5 pr-4 w-1/3">Item Master / Description</th>
                            <th class="py-2.5 px-2 text-center">Qty</th>
                            <th class="py-2.5 px-2">Price (Excl)</th>
                            <th class="py-2.5 px-2 text-center">ST Rate</th>
                            <th class="py-2.5 px-2">Tax Amt</th>
                            <th class="py-2.5 px-2 text-right">Total</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <template x-for="item in invoice.items" :key="item.id">
                            <tr class="hover:bg-gray-50/60 transition">
                                <td class="py-3 pr-4">
                                    <div class="font-semibold text-gray-800"
                                        x-text="item.item?.name || 'Custom Product'"></div>
                                    <div class="text-[10px] text-gray-400 mt-0.5"
                                        x-text="item.product_description || 'No description'"></div>
                                    <div class="text-[10px] text-emerald-600 mt-1 font-semibold flex items-center gap-1" x-show="Number(item.discount || 0) > 0">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5a2 2 0 10-2 2h2zm0 0h4m-4 0H8m12 3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        <span x-text="formatCurrency(item.discount)"></span>
                                    </div>
                                </td>
                                <td class="py-3 px-2 text-center text-gray-700 font-mono" x-text="formatQuantity(item.quantity)"></td>
                                <td class="py-3 px-2 text-gray-700 font-mono"
                                    x-text="formatCurrency(item.value_sales_excluding_st)"></td>
                                <td class="py-3 px-2 text-center">
                                    <span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-600 font-mono text-[10px]"
                                        x-text="`${item.rate}%`"></span>
                                </td>
                                <td class="py-3 px-2 text-gray-500 font-mono"
                                    x-text="formatCurrency(item.sales_tax_applicable)"></td>
                                <td class="py-3 px-2 font-semibold text-gray-800 font-mono text-right"
                                    x-text="formatCurrency(item.total_values)"></td>
                            </tr>
                        </template>
                        <tr x-show="!invoice.items || invoice.items.length === 0">
                            <td colspan="6" class="py-8 text-center text-gray-400 text-xs">No line items found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- ============ ROW 4: FBR Integration Logs (full width, new row) ============ -->
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4" x-data="{ expandedLog: null }">
            <div class="flex items-center justify-between border-b border-gray-50 pb-2">
                <h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" 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>
                    FBR Integration Logs
                </h2>
                <span class="text-[10px] text-gray-400" x-show="invoice.fbr_logs?.length"
                    x-text="`${invoice.fbr_logs?.length} total`"></span>
            </div>

            <!-- Full-width list: every log item takes the entire row -->
            <div class="flex flex-col gap-3">
                <template x-for="log in paginatedLogs" :key="log.id">
                    <div
                        class="w-full border border-gray-100 rounded-xl overflow-hidden transition hover:shadow-md bg-gray-50/20">
                        <!-- Log Header -->
                        <div class="p-3.5 flex items-center justify-between gap-4 bg-white cursor-pointer select-none flex-wrap"
                            @click="expandedLog = (expandedLog === log.id ? null : log.id)">
                            <div class="flex items-center gap-3 min-w-0">
                                <span class="w-2.5 h-2.5 rounded-full shrink-0" :class="{
                                          'bg-emerald-500': log.status === 'valid',
                                          'bg-amber-500': log.status === 'invalid',
                                          'bg-rose-500': log.status === 'error'
                                      }"></span>
                                <span
                                    class="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded shrink-0"
                                    :class="log.action === 'post' ? 'bg-indigo-50 text-indigo-600' : 'bg-sky-50 text-sky-600'"
                                    x-text="log.action"></span>
                                <span class="text-xs font-semibold text-gray-700 shrink-0"
                                    x-text="log.status === 'valid' ? 'Success' : (log.status === 'invalid' ? 'Invalid' : 'System Error')"></span>
                                <span class="text-[10px] text-gray-400 font-mono truncate"
                                    x-text="new Date(log.created_at).toLocaleString()"></span>
                            </div>
                            <div class="flex items-center gap-3 shrink-0">
                                <span class="text-[10px] text-gray-400 font-mono" x-show="log.fbr_invoice_number"
                                    x-text="'IRN: ' + log.fbr_invoice_number"></span>
                                <span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-gray-100 text-gray-500"
                                    x-text="log.is_sandbox ? 'Sandbox' : 'Production'"></span>
                                <svg class="w-4 h-4 text-gray-400 transform transition-transform"
                                    :class="expandedLog === log.id && 'rotate-180'" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>

                        <!-- Log Body Details (Collapsible) -->
                        <div x-show="expandedLog === log.id" x-collapse x-cloak
                            class="border-t border-gray-100 bg-gray-50/50 p-3 space-y-3">
                            <template x-if="log.error_message">
                                <div
                                    class="p-2.5 rounded-md bg-rose-50 border border-rose-100 text-xs text-rose-700 font-medium">
                                    <div class="font-bold flex items-center gap-1">
                                        <svg class="w-3.5 h-3.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 x-text="`Error Code: ${log.error_code || 'N/A'}`"></span>
                                    </div>
                                    <div class="mt-1 font-mono text-[10px] break-words" x-text="log.error_message">
                                    </div>
                                </div>
                            </template>

                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-[10px]">
                                <div>
                                    <span class="text-gray-400 block">HTTP Status</span>
                                    <span class="font-mono font-bold text-gray-700"
                                        x-text="log.http_status || 'Connection Failure'"></span>
                                </div>
                                <div>
                                    <span class="text-gray-400 block">FBR Code</span>
                                    <span class="font-mono font-bold text-gray-700"
                                        x-text="log.status_code || '—'"></span>
                                </div>
                                <template x-if="log.fbr_invoice_number">
                                    <div class="col-span-2">
                                        <span class="text-gray-400 block">FBR Invoice IRN</span>
                                        <span class="font-mono font-bold text-indigo-600"
                                            x-text="log.fbr_invoice_number"></span>
                                    </div>
                                </template>
                            </div>

                            <div class="space-y-2 text-[10px]" x-data="{ view: 'response' }">
                                <div class="flex border-b border-gray-200">
                                    <button type="button" @click="view = 'response'"
                                        class="px-2 py-1 font-semibold transition border-b-2 -mb-[1px]"
                                        :class="view === 'response' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-400'">Response</button>
                                    <button type="button" @click="view = 'request'"
                                        class="px-2 py-1 font-semibold transition border-b-2 -mb-[1px]"
                                        :class="view === 'request' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-400'">Request
                                        Payload</button>
                                </div>

                                <div
                                    class="bg-gray-900 text-gray-300 rounded-lg p-2.5 font-mono overflow-x-auto text-[9px] max-h-48 leading-relaxed">
                                    <template x-if="view === 'response'">
                                        <pre class="whitespace-pre"
                                            x-text="JSON.stringify(log.response_payload || {}, null, 2)"></pre>
                                    </template>
                                    <template x-if="view === 'request'">
                                        <pre class="whitespace-pre"
                                            x-text="JSON.stringify(log.request_payload || {}, null, 2)"></pre>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Pagination -->
            <div x-show="invoice.fbr_logs && invoice.fbr_logs.length > logPerPage"
                class="flex items-center justify-between pt-3 border-t border-gray-100">
                <span class="text-[10px] text-gray-400" x-text="`Page ${logPage} of ${totalLogPages}`"></span>
                <div class="flex items-center gap-1">
                    <button type="button" @click="logPage = Math.max(1, logPage - 1)" :disabled="logPage === 1"
                        class="px-2.5 py-1.5 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-40 disabled:hover:bg-transparent text-[11px] font-semibold">
                        &larr; Prev
                    </button>
                    <button type="button" @click="logPage = Math.min(totalLogPages, logPage + 1)"
                        :disabled="logPage === totalLogPages"
                        class="px-2.5 py-1.5 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-40 disabled:hover:bg-transparent text-[11px] font-semibold">
                        Next &rarr;
                    </button>
                </div>
            </div>

            <div x-show="!invoice.fbr_logs || invoice.fbr_logs.length === 0"
                class="text-xs text-gray-400 text-center py-8">
                No integration logs available for this invoice.
            </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 invoiceDetail() {
            return {
                invoice: {},
                processing: false,
                showEmailModal: false,
                sendingEmail: false,
                schedulerTime: '',
                emailForm: {
                    recipient: '',
                    subject: '',
                    body: '',
                    invoiceId: null,
                    filename: ''
                },
                logPage: 1,
                logPerPage: 5, // full-width rows per page
                init() {
                    this.loadInvoice();
                    window.addEventListener('trigger-email-modal', () => {
                        this.openEmailModal();
                    });
                },
                get paginatedLogs() {
                    if (!this.invoice.fbr_logs) return [];
                    const start = (this.logPage - 1) * this.logPerPage;
                    return this.invoice.fbr_logs.slice(start, start + this.logPerPage);
                },
                get totalLogPages() {
                    if (!this.invoice.fbr_logs) return 1;
                    return Math.ceil(this.invoice.fbr_logs.length / this.logPerPage) || 1;
                },
                async loadInvoice() {
                    try {
                        const data = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>`, {
                            headers: { 'Accept': 'application/json' }
                        });
                        this.invoice = data.data;
                        this.schedulerTime = this.invoice.scheduled_sync_at ? this.invoice.scheduled_sync_at.replace('T', ' ').substring(0, 19) : '';
                    } catch (e) { }
                },
                async syncInvoice() {
                    this.processing = true;
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/sync`, { method: 'POST' });
                        if (res.success) {
                            notify('Invoice synced successfully.', 'success');
                        } else {
                            notify(res.sync_error || 'Sync failed.', 'error');
                        }
                    } catch (e) {
                    } finally {
                        this.loadInvoice();
                        this.processing = false;
                    }
                },
                async validateInvoice() {
                    this.processing = true;
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/validate`, { method: 'POST' });
                        if (res.success) {
                            notify('Dry-run Validation Successful. Invoice matches FBR schema.', 'success');
                        } else {
                            notify(res.error || 'FBR dry-run validation failed.', 'error');
                        }
                    } catch (e) {
                    } finally {
                        this.processing = false;
                    }
                },
                async openEmailModal() {
                    notify('Loading preview...', 'info');
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/email-preview`);
                        this.emailForm.recipient = res.recipient;
                        this.emailForm.subject = res.subject;
                        this.emailForm.body = res.body;
                        this.emailForm.invoiceId = <?php echo e($invoice->id); ?>;
                        this.emailForm.filename = res.filename;
                        this.showEmailModal = true;
                    } catch (e) {
                        notify('Failed to load email preview.', 'error');
                    }
                },
                async emailInvoice() {
                    this.sendingEmail = true;
                    notify('Sending email...', 'info');
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/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 saveSchedule() {
                    this.processing = true;
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/schedule`, {
                            method: 'POST',
                            body: { scheduled_sync_at: this.schedulerTime }
                        });
                        if (res.success) {
                            notify(res.message, 'success');
                        } else {
                            notify(res.message || 'Failed to schedule sync.', 'error');
                        }
                    } catch (e) {
                        notify(e.message || 'Error scheduling sync.', 'error');
                    } finally {
                        this.loadInvoice();
                        this.processing = false;
                    }
                },
                async cancelSchedule() {
                    this.processing = true;
                    try {
                        const res = await apiFetch(`/invoices/<?php echo e($invoice->id); ?>/schedule`, {
                            method: 'POST',
                            body: { scheduled_sync_at: null }
                        });
                        if (res.success) {
                            notify(res.message, 'success');
                            this.schedulerTime = '';
                        } else {
                            notify(res.message || 'Failed to cancel schedule.', 'error');
                        }
                    } catch (e) {
                        notify(e.message || 'Error cancelling schedule.', 'error');
                    } finally {
                        this.loadInvoice();
                        this.processing = false;
                    }
                },
                formatDateTime(dateStr) {
                    if (!dateStr) return '';
                    const d = new Date(dateStr);
                    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                },
            };
        }
    </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/an.shiningerp.com/resources/views/invoices/show.blade.php ENDPATH**/ ?>