@extends('layouts.layout-horizontal')

@section('title', 'Sales Invoices')

@section('css')
<style>
    /* Page tint — sales (light green) */
    body, .pc-container, .pc-content { background: #c8ecd2 !important; }

    /* Sticky header */
    .sales-scroll { max-height: calc(100vh - 240px); overflow-y: auto; }
    .sales-scroll thead th {
        position: sticky; top: 0; z-index: 3;
        background: #eef1f5; border-bottom: 2px solid #dee2e6;
        font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: #6c757d;
        padding: 8px 6px; white-space: nowrap;
    }
    .sales-scroll table td { font-size: .875rem; padding: 6px 6px; vertical-align: middle; }

    /* Numbers: monospace + tabular-nums everywhere */
    .num { font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; }
    .num-amt { font-weight: 500; color: #334155; }
    .num-tax { font-weight: 400; color: #6c757d; }
    .num-total { font-weight: 700; color: #1e293b; }

    /* Party avatar */
    .party-avatar {
        width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }

    /* Date group header */
    .date-group-row td {
        background: #f8f9fa !important; font-size: .75rem; font-weight: 600; color: #6c757d;
        text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px !important;
        border-bottom: 1px solid #e9ecef;
    }

    /* Sticky footer */
    .sticky-totals {
        position: sticky; bottom: 0; z-index: 3;
        background: #1e293b; color: #e2e8f0;
    }
    .sticky-totals th { padding: 8px 6px; font-size: .8rem; font-weight: 600; border: none; }

    /* Actions always visible */
    .tbl-actions { opacity: 1; }

    /* Quick filter pills */
    .filter-pill { padding: 4px 12px; border-radius: 20px; font-size: .75rem; border: 1px solid #dee2e6; color: #6c757d; background: #fff; cursor: pointer; text-decoration: none; transition: all .15s; }
    .filter-pill:hover, .filter-pill.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
</style>
@endsection

@section('content')

    <div class="card">
        {{-- Header with filters --}}
        <div class="card-header" style="padding:10px 16px;background:#f8f9fb;border-bottom:1px solid #e9ecef;">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <span style="font-weight:700;font-size:.95rem;color:#1e293b">Sales</span>

                {{-- Quick date pills --}}
                <div class="d-flex align-items-center gap-1">
                    @php
                        [$fyStartFilter, $fyEndFilter] = financial_year_range();
                        $isToday = ($dateFrom === now()->toDateString() && $dateTo === now()->toDateString());
                        $isThisMonth = ($dateFrom === now()->startOfMonth()->toDateString() && $dateTo === now()->toDateString());
                        $isLast30 = ($dateFrom === now()->subDays(30)->toDateString() && $dateTo === now()->toDateString());
                    @endphp
                    <a href="{{ route('sale.index', ['date_from' => now()->toDateString(), 'date_to' => now()->toDateString(), 'party_id' => request('party_id')]) }}" class="filter-pill {{ $isToday ? 'active' : '' }}">Today</a>
                    <a href="{{ route('sale.index', ['date_from' => now()->startOfMonth()->toDateString(), 'date_to' => now()->toDateString(), 'party_id' => request('party_id')]) }}" class="filter-pill {{ $isThisMonth && !$isToday ? 'active' : '' }}">This Month</a>
                    <a href="{{ route('sale.index', ['date_from' => now()->subDays(30)->toDateString(), 'date_to' => now()->toDateString(), 'party_id' => request('party_id')]) }}" class="filter-pill {{ $isLast30 && !$isThisMonth && !$isToday ? 'active' : '' }}">Last 30d</a>
                </div>

                <div style="width:1px;height:24px;background:#dee2e6"></div>

                {{-- Date range --}}
                <form method="GET" action="{{ route('sale.index') }}" class="d-flex align-items-center gap-1" id="filterForm">
                    <input type="date" name="date_from" value="{{ $dateFrom }}" class="form-control form-control-sm" style="width:130px;height:30px;font-size:.8rem">
                    <span style="color:#94a3b8;font-size:.75rem">to</span>
                    <input type="date" name="date_to" value="{{ $dateTo }}" class="form-control form-control-sm" style="width:130px;height:30px;font-size:.8rem">

                    <div style="width:1px;height:24px;background:#dee2e6;margin:0 4px"></div>

                    {{-- Party filter --}}
                    <div style="width:220px">
                    <select name="party_id" id="partyFilter">
                        <option value="">All Parties</option>
                        @foreach($parties as $p)
                            <option value="{{ $p->id }}" data-gst="{{ $p->gst_number }}" @selected(request('party_id') == $p->id)>{{ $p->name }}</option>
                        @endforeach
                    </select>
                    </div>

                    <button type="submit" class="btn btn-sm btn-outline-primary" style="height:30px;font-size:.75rem;padding:0 12px">Filter</button>
                    @if(request('party_id') || $dateFrom !== $fyStartFilter->toDateString() || $dateTo !== $fyEndFilter->toDateString())
                        <a href="{{ route('sale.index') }}" class="btn btn-sm btn-outline-secondary" style="height:30px;font-size:.75rem;padding:0 10px">Clear</a>
                    @endif
                </form>

                {{-- Right: New Sale + count --}}
                <div class="ms-auto d-flex align-items-center gap-2">
                    <span class="badge bg-light text-dark border" style="font-size:.75rem">{{ $sales->count() }} invoices</span>
                    <a href="{{ route('sale.create') }}" class="btn btn-primary btn-sm" style="font-size:.8rem;padding:5px 14px">
                        <i class="ph-duotone ph-plus me-1"></i> New Sale
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div data-st data-st-export="excel" data-st-filename="sales-invoices-{{ now()->format('Y-m-d') }}">
            <div class="sales-scroll">
                <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="export-only" style="display:none">Date</th>
                            <th>Party</th>
                            <th>Bill No</th>
                            @if(($companyMode ?? 'bill') !== 'cash')
                            <th>Type</th>
                            @endif
                            <th class="text-end">Amount</th>
                            @if(($companyMode ?? 'bill') !== 'cash')
                            <th class="text-end">Tax</th>
                            @endif
                            <th class="text-end">Grand Total</th>
                            <th width="160" class="text-center no-sort no-export">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $avatarColors = ['#6366f1','#ec4899','#f59e0b','#10b981','#3b82f6','#8b5cf6','#ef4444','#14b8a6','#f97316','#06b6d4'];
                            $grouped = $sales->groupBy(fn($s) => $s->invoice_date->format('Y-m-d'));
                        @endphp

                        @forelse ($grouped as $date => $dateSales)
                            {{-- Date group header --}}
                            @php
                                $dateObj = \Carbon\Carbon::parse($date);
                                $dateLabel = $dateObj->isToday() ? 'Today' : ($dateObj->isYesterday() ? 'Yesterday' : $dateObj->format('d M Y'));
                                $dayTotal = $dateSales->sum('grand_total');
                            @endphp
                            <tr class="date-group-row">
                                <td colspan="{{ ($companyMode ?? 'bill') !== 'cash' ? 7 : 5 }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>{{ $dateLabel }} <span style="font-weight:400;opacity:.6">({{ $dateSales->count() }})</span></span>
                                        <span class="num num-total">₹{{ indian_number($dayTotal, 2) }}</span>
                                    </div>
                                </td>
                            </tr>

                            @foreach ($dateSales as $sale)
                                @php $initial = strtoupper(substr($sale->party?->name ?? '?', 0, 1)); $colorIdx = ($sale->party_id ?? 0) % count($avatarColors); @endphp
                                <tr>
                                    <td class="export-only" style="display:none" data-export-value="{{ $sale->invoice_date->format('Y-m-d') }}">{{ $sale->invoice_date->format('d-M-Y') }}</td>
                                    <td data-export-value="{{ $sale->party?->name ?? '-' }}">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="party-avatar" style="background:{{ $avatarColors[$colorIdx] }}">{{ $initial }}</span>
                                            <span>{{ $sale->party?->name ?? '—' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ route('sale.edit', $sale->id) }}" class="fw-bold text-primary text-decoration-none">{{ $sale->bill_no ?: '—' }}</a>
                                        @if(($companyMode ?? 'bill') === 'cash' && !empty($transfersBySource[$sale->id]))
                                            <div class="d-flex flex-wrap gap-1 mt-1">
                                                @foreach($transfersBySource[$sale->id] as $tr)
                                                    @if($tr->targetSale)
                                                        <a href="{{ route('sale.show', ['sale' => $tr->target_sale_id, 'company' => $tr->target_company_id]) }}"
                                                           target="_blank"
                                                           class="badge bg-success-subtle text-success border text-decoration-none"
                                                           style="font-size:.65rem;font-weight:500"
                                                           title="Shifted to {{ $tr->targetCompany->name ?? 'Bill Co' }} · ₹{{ indian_number($tr->transferred_amount, 2) }}">
                                                            <i class="ph-duotone ph-arrow-square-right"></i>
                                                            {{ $tr->targetSale->bill_no }}
                                                            <span class="text-muted">· {{ $tr->targetCompany->name ?? '' }}</span>
                                                        </a>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                        @if($sale->party && $sale->party->is_sez)
                                            @if($sale->arn_no)
                                                <span class="badge bg-success arn-badge" role="button" data-sale-id="{{ $sale->id }}" title="ARN: {{ $sale->arn_no }} (click to edit)" style="font-size:.6rem;cursor:pointer">ARN ✓</span>
                                            @else
                                                <span class="badge bg-danger arn-badge" role="button" data-sale-id="{{ $sale->id }}" title="Click to add ARN" style="font-size:.6rem;cursor:pointer">ARN</span>
                                            @endif
                                            <div class="d-none arn-input-wrap" data-sale-id="{{ $sale->id }}">
                                                <div class="input-group input-group-sm" style="width:180px">
                                                    <input type="text" class="form-control form-control-sm arn-field" value="{{ $sale->arn_no }}" placeholder="ARN No">
                                                    <button class="btn btn-success btn-sm arn-save" type="button"><i class="ph-duotone ph-check"></i></button>
                                                    <button class="btn btn-outline-secondary btn-sm arn-cancel" type="button"><i class="ph-duotone ph-x"></i></button>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    @if(($companyMode ?? 'bill') !== 'cash')
                                    <td>
                                        @if($sale->bill_type == 'cash')
                                            <span class="badge bg-dark" style="font-size:.65rem">Cash</span>
                                        @elseif($sale->bill_type == 'cash memo')
                                            <span class="badge bg-info" style="font-size:.65rem">Memo</span>
                                        @else
                                            <span class="badge bg-primary" style="font-size:.65rem">Bill</span>
                                        @endif
                                    </td>
                                    @endif
                                    <td class="text-end num num-amt">{{ indian_number($sale->amount_total, 2) }}</td>
                                    @if(($companyMode ?? 'bill') !== 'cash')
                                    <td class="text-end num num-tax">{{ indian_number($sale->tax_total, 2) }}</td>
                                    @endif
                                    <td class="text-end num num-total" data-export-value="{{ number_format((float) $sale->grand_total, 2, '.', '') }}">₹{{ indian_number($sale->grand_total, 2) }}</td>
                                    <td class="text-center">
                                        <div class="tbl-actions">
                                            <a href="{{ route('sale.show', $sale->id) }}" class="tbl-act" data-bs-toggle="tooltip" title="View"><i class="ph-duotone ph-eye"></i></a>
                                            <button type="button" class="tbl-act invoice-preview-btn" data-preview-url="{{ route('sale.pdf', $sale->id) }}" data-preview-title="Sales Invoice {{ $sale->bill_no }}" data-bs-toggle="tooltip" title="Preview"><i class="ph-duotone ph-file-magnifying-glass"></i></button>
                                            @if($sale->mode === 'cash')
                                                <a href="{{ route('sale.show', $sale->id) }}#transfer" class="tbl-act" data-bs-toggle="tooltip" title="Transfer to Bill"><i class="ph-duotone ph-arrow-square-right"></i></a>
                                            @endif
                                            @php
                                                $needsPdfScaleModal = $sale->mode === 'bill' && $sale->bill_type === 'bill' && $sale->items_count > 10;
                                            @endphp
                                            @if($needsPdfScaleModal)
                                                <button type="button" class="tbl-act invoice-pdf-action" data-pdf-action="download" data-pdf-url="{{ route('sale.pdf', ['id' => $sale->id, 'download' => 1]) }}" data-needs-scale-modal="true" data-bs-toggle="tooltip" title="Download PDF"><i class="ph-duotone ph-download-simple"></i></button>
                                            @else
                                                <a href="{{ route('sale.pdf', ['id' => $sale->id, 'download' => 1]) }}" class="tbl-act" data-bs-toggle="tooltip" title="Download PDF"><i class="ph-duotone ph-download-simple"></i></a>
                                            @endif
                                            <button type="button" class="tbl-act print-pdf-btn {{ $needsPdfScaleModal ? 'invoice-pdf-action' : '' }}" data-pdf-url="{{ route('sale.pdf', $sale->id) }}" @if($needsPdfScaleModal) data-pdf-action="print" data-needs-scale-modal="true" @endif data-bs-toggle="tooltip" title="Print"><i class="ph-duotone ph-printer"></i></button>
                                            @if($sale->mode !== 'cash')
                                                <button type="button" class="tbl-act ewb-trigger"
                                                    data-sale-id="{{ $sale->id }}"
                                                    data-bill-no="{{ $sale->bill_no }}"
                                                    data-data-url="{{ route('sale.ewb.data', $sale->id) }}"
                                                    data-generate-url="{{ route('sale.ewb.generate', $sale->id) }}"
                                                    data-save-number-url="{{ route('sale.ewb.saveNumber', $sale->id) }}"
                                                    data-bs-toggle="tooltip" title="E-way Bill"><i class="ph-duotone ph-truck"></i></button>
                                            @endif
                                            @if($sale->party && $sale->party->mobile)
                                                <button type="button" class="tbl-act wa-share-btn"
                                                    data-mobile="{{ $sale->party->mobile }}"
                                                    data-bill-no="{{ $sale->bill_no }}"
                                                    data-date="{{ $sale->invoice_date->format('d-M-Y') }}"
                                                    data-amount="{{ indian_number($sale->grand_total, 2) }}"
                                                    data-bs-toggle="tooltip" title="WhatsApp"><i class="ph-duotone ph-whatsapp-logo"></i></button>
                                            @endif
                                            @if(auth()->user()->role === 'admin')
                                                <div class="dropdown d-inline">
                                                    <button class="tbl-act tbl-act-more" type="button" data-bs-toggle="dropdown"><i class="ph-duotone ph-dots-three-vertical"></i></button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        @if(isset($lastActivities[$sale->id]))
                                                            @php $activity = (object) $lastActivities[$sale->id]; @endphp
                                                            <li><span class="dropdown-item" data-bs-toggle="tooltip" data-bs-html="true"
                                                                title="<strong>{{ ucfirst($activity->action) }}</strong> by {{ $activity->user['name'] ?? 'Unknown' }}<br>{{ \Carbon\Carbon::parse($activity->created_at)->format('d-M-Y h:i A') }}">
                                                                <i class="ph-duotone ph-clock-counter-clockwise me-2"></i>Activity</span></li>
                                                        @else
                                                            <li><span class="dropdown-item text-muted"><i class="ph-duotone ph-clock-counter-clockwise me-2"></i>No activity</span></li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="{{ ($companyMode ?? 'bill') !== 'cash' ? 7 : 5 }}">
                                    @include('partials._empty-state', [
                                        'icon' => 'ph-receipt',
                                        'title' => 'No invoices found',
                                        'subtitle' => 'Try changing the date range or create a new invoice.',
                                        'action' => route('sale.create'),
                                        'actionLabel' => 'Create Invoice',
                                    ])
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                    @if ($sales->count())
                        <tfoot class="sticky-totals">
                            <tr>
                                <th colspan="{{ ($companyMode ?? 'bill') !== 'cash' ? 3 : 2 }}" class="text-end" style="color:#94a3b8">
                                    {{ $sales->count() }} invoices
                                </th>
                                <th class="text-end num" style="color:#94a3b8;font-weight:500">{{ indian_number($sales->sum('amount_total'), 2) }}</th>
                                @if(($companyMode ?? 'bill') !== 'cash')
                                <th class="text-end num" style="color:#64748b;font-weight:400">{{ indian_number($sales->sum('tax_total'), 2) }}</th>
                                @endif
                                <th class="text-end num" style="color:#94a3b8;font-weight:500" data-export-value="{{ number_format((float) $sales->sum('grand_total'), 2, '.', '') }}">₹{{ indian_number($sales->sum('grand_total'), 2) }}</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    @endif
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
@if(session('print_sale_id'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        printSalesPdfInPage("{{ route('sale.pdf', session('print_sale_id')) }}");
        @if(session('download_sale_id'))
        downloadSalesPdf("{{ route('sale.pdf', ['id' => session('download_sale_id'), 'download' => 1]) }}");
        @endif
    });
</script>
@endif
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function(tooltipTriggerEl) { new bootstrap.Tooltip(tooltipTriggerEl); });

        // Party filter TomSelect with GST search
        const partyFilterTs = new TomSelect('#partyFilter', {
            allowEmptyOption: true, placeholder: 'All Parties', maxOptions: null,
            searchField: ['text', 'gst'],
            render: {
                option: function(data, escape) {
                    const gst = data.gst ? '<span style="color:#999;font-size:.7rem;margin-left:6px">GST: ' + escape(data.gst) + '</span>' : '';
                    return '<div>' + escape(data.text) + gst + '</div>';
                },
                item: function(data, escape) { return '<div>' + escape(data.text) + '</div>'; }
            }
        });
        partyFilterTs.on('change', function() { document.getElementById('filterForm').submit(); });
    });
</script>

@php $companyName = currentCompany()->name ?? config('app.name'); @endphp
<script>
document.addEventListener('click', function(e) {
    const btn = e.target.closest('.wa-share-btn');
    if (!btn) return;
    const companyName = @json($companyName);
    let phone = btn.dataset.mobile.replace(/[\s\-\+\(\)]/g, '');
    if (phone.length === 10) phone = '91' + phone;
    
    const msg = `*${companyName}*\nInvoice: *${btn.dataset.billNo}*\nDate: ${btn.dataset.date}\nTotal: ₹${btn.dataset.amount}`;
    window.open('https://api.whatsapp.com/send?phone=' + phone + '&text=' + encodeURIComponent(msg + '\n\nPlease attach the invoice PDF/document manually before sending.'), '_blank');
});
</script>
<style>.spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }</style>
<script>
function printSalesPdfInPage(pdfUrl, btn) {
    let frame = document.getElementById('sales-print-pdf-frame');
    if (!frame) {
        frame = document.createElement('iframe');
        frame.id = 'sales-print-pdf-frame';
        frame.style.display = 'none';
        document.body.appendChild(frame);
    }

    const origHtml = btn ? btn.innerHTML : null;
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<i class="ph-duotone ph-spinner spin"></i>';
    }

    const resetButton = function() {
        if (!btn) return;
        btn.disabled = false;
        btn.innerHTML = origHtml;
    };

    frame.onload = function() {
        try {
            frame.contentWindow.focus();
            frame.contentWindow.print();
        } catch (err) {
            window.location.href = pdfUrl;
        }
        resetButton();
    };

    const separator = pdfUrl.includes('?') ? '&' : '?';
    frame.src = pdfUrl + separator + 'print_ts=' + Date.now();
}

function downloadSalesPdf(pdfUrl) {
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.download = '';
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    setTimeout(function() { link.remove(); }, 1000);
}

document.addEventListener('click', function(e) {
    const btn = e.target.closest('.print-pdf-btn');
    if (!btn) return;
    if (btn.dataset.needsScaleModal === 'true') return;
    const pdfUrl = btn.dataset.pdfUrl;
    printSalesPdfInPage(pdfUrl, btn);
});
</script>
@if(($companyMode ?? 'bill') === 'bill' && $sales->contains(fn ($sale) => $sale->mode === 'bill' && $sale->bill_type === 'bill' && $sale->items_count > 10))
    @include('sales.partials.pdf_scale_modal')
@endif
<script>
const arnBaseUrl = @json(route('sale.update-arn', ['id' => '__ID__']));
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
document.addEventListener('click', function(e) {
    const badge = e.target.closest('.arn-badge');
    if (badge) { const id = badge.dataset.saleId; badge.classList.add('d-none'); document.querySelector(`.arn-input-wrap[data-sale-id="${id}"]`).classList.remove('d-none'); document.querySelector(`.arn-input-wrap[data-sale-id="${id}"] .arn-field`).focus(); return; }
    const cancelBtn = e.target.closest('.arn-cancel');
    if (cancelBtn) { const wrap = cancelBtn.closest('.arn-input-wrap'), id = wrap.dataset.saleId; wrap.classList.add('d-none'); document.querySelector(`.arn-badge[data-sale-id="${id}"]`).classList.remove('d-none'); return; }
    const saveBtn = e.target.closest('.arn-save');
    if (saveBtn) { const wrap = saveBtn.closest('.arn-input-wrap'), id = wrap.dataset.saleId, val = wrap.querySelector('.arn-field').value.trim(); saveBtn.disabled = true;
        fetch(arnBaseUrl.replace('__ID__', id), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }, body: JSON.stringify({ arn_no: val }) })
        .then(r => r.json()).then(data => { if (data.success) { const badge = document.querySelector(`.arn-badge[data-sale-id="${id}"]`); if (val) { badge.className = 'badge bg-success arn-badge'; badge.title = 'ARN: ' + val; badge.textContent = 'ARN ✓'; } else { badge.className = 'badge bg-danger arn-badge'; badge.title = 'Click to add ARN'; badge.textContent = 'ARN'; } badge.dataset.saleId = id; badge.style.cursor = 'pointer'; badge.style.fontSize = '.6rem'; wrap.classList.add('d-none'); badge.classList.remove('d-none'); } saveBtn.disabled = false; }).catch(() => { saveBtn.disabled = false; }); }
});
document.addEventListener('keydown', function(e) { if (!e.target.classList.contains('arn-field')) return; if (e.key === 'Enter') { e.preventDefault(); e.target.closest('.arn-input-wrap').querySelector('.arn-save').click(); } if (e.key === 'Escape') e.target.closest('.arn-input-wrap').querySelector('.arn-cancel').click(); });
</script>

@if(($companyMode ?? 'bill') !== 'cash')
    @include('sales._ewb-modal')
@endif
<div class="modal fade" id="invoicePreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title" id="invoicePreviewTitle">Invoice Preview</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="height:78vh">
                <iframe id="invoicePreviewFrame" title="Invoice preview" style="width:100%;height:100%;border:0;background:#f8fafc"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
(function(){
    const modalEl = document.getElementById('invoicePreviewModal');
    const frame = document.getElementById('invoicePreviewFrame');
    if (!modalEl || !frame) return;
    const title = document.getElementById('invoicePreviewTitle');
    const modal = new bootstrap.Modal(modalEl);
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.invoice-preview-btn');
        if (!btn) return;
        frame.src = btn.dataset.previewUrl;
        title.textContent = btn.dataset.previewTitle || 'Invoice Preview';
        modal.show();
    });
    modalEl.addEventListener('hidden.bs.modal', function() { frame.src = 'about:blank'; });
})();
</script>
@endpush