@php
    use Illuminate\Support\Facades\Storage;
    use Illuminate\Support\Facades\Auth;
    $seller = config('einvoice.seller', []);
    $sellerAddress = $seller['address'] ?? [];
    $taxRate = (float) (config('einvoice.tax.rate') ?? 0);
    $grossAmount = (float) ($request->amount ?? 0);
    $netAmount = $taxRate > 0 ? round($grossAmount / (1 + $taxRate), 2) : $grossAmount;
    $taxAmount = round($grossAmount - $netAmount, 2);
    $grandTotal = $grossAmount;
    $showTaxBreakdown = (bool) ($showTaxBreakdown ?? false);
    $viewMode = $viewMode ?? 'admin';
    $isBackoffice = Auth::user()?->isBackofficeUser() ?? false;
    $canEmailCustomer = $isBackoffice;
    $customerType = strtolower((string) ($request->customer_type ?? 'individual'));
    $isCompany = $customerType === 'company';
    $pdfRouteParams = ['invoice' => $request->id];
    if ($viewMode === 'customer') {
        $pdfRouteParams['view'] = 'customer';
    }

    $payStatus = $request->invoice_status ?? 'unpaid';
    $isPaid = $payStatus === 'paid';
    $isApproved = $isPaid && !empty($request->payment_approved_at);
    $isSubmitted = !empty($request->lhdn_uuid);

    $period = $request->invoice_cycle_month
        ? \Carbon\Carbon::parse($request->invoice_cycle_month)->format('m/Y')
        : '-';
@endphp
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    body { font-size: 14px; color: #111827; }
    .invoice-shell { background: #f5f5f5; min-height: 100vh; }
    .invoice-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 28px; margin-top: 16px; }
    .section-title { font-size: 13px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #2563eb; padding-bottom: 4px; margin-bottom: 10px; }
    .detail-row { font-size: 13px; line-height: 1.9; display: flex; }
    .detail-label { font-weight: 600; color: #374151; min-width: 140px; }
    .detail-value { color: #111827; }
    .items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .items-table th { background: #f3f4f6; border: 1px solid #d1d5db; padding: 8px 10px; text-align: left; font-weight: 600; font-size: 12px; }
    .items-table td { border: 1px solid #d1d5db; padding: 8px 10px; }
    .text-end { text-align: right; }
    .text-center { text-align: center; }
    .summary-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
    .summary-table td { padding: 5px 10px; font-size: 13px; }
    .summary-table .total-row td { border-top: 2px solid #111827; font-weight: 700; font-size: 14px; }
    .tax-summary { width: 50%; margin-left: auto; margin-top: 12px; border-collapse: collapse; font-size: 11px; }
    .tax-summary th { background: #f3f4f6; border: 1px solid #d1d5db; padding: 5px 8px; text-align: left; font-weight: 600; }
    .tax-summary td { border: 1px solid #d1d5db; padding: 5px 8px; }
    .qr-box { text-align: center; border-left: 1px solid #e5e7eb; padding-left: 20px; }
    .qr-box img { width: 130px; height: 130px; }
    .print-btn { border: 1px solid #1d4ed8; color: #1d4ed8; font-weight: 600; font-size: 12px; background: #fff; }
    .print-btn:hover { background: #eff6ff; }
    .stamp-paid {
        display: inline-block; padding: 4px 16px; border: 3px solid #16a34a; color: #16a34a;
        font-size: 18px; font-weight: 800; letter-spacing: 0.1em; transform: rotate(-3deg);
        border-radius: 4px;
    }
    .stamp-unpaid {
        display: inline-block; padding: 4px 16px; border: 3px solid #dc2626; color: #dc2626;
        font-size: 18px; font-weight: 800; letter-spacing: 0.1em; transform: rotate(-3deg);
        border-radius: 4px;
    }
    .receipt-info { font-size: 12px; color: #525252; margin-top: 4px; }
    .hr { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; }
    .pdf-modal {
        position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
        display: none; align-items: center; justify-content: center; z-index: 1050;
    }
    .pdf-modal:target { display: flex; }
    .pdf-modal .modal-card {
        width: min(980px, 94vw); height: min(90vh, 920px); background: #fff; border-radius: 12px;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2); display: flex; flex-direction: column;
    }
    .pdf-modal .modal-header {
        padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display: flex;
        align-items: center; justify-content: space-between;
    }
    .pdf-modal .modal-body { flex: 1; }
    .pdf-modal iframe { width: 100%; height: 100%; border: 0; }
    @media print { .print-btn { display: none; } body { background: #fff; } .invoice-shell { background: #fff; } .invoice-card { box-shadow: none; } }
    @media (max-width: 768px) {
        .details-grid { flex-direction: column !important; }
        .qr-box { border-left: none; padding-left: 0; margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 16px; }
    }
</style>
@endpush

<x-app-layout>

    <div class="py-4 invoice-shell">
        <div class="container" style="max-width: 900px;">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $errors->first() }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- HEADER --}}
            <div class="d-flex justify-content-between align-items-start gap-3">
                <div class="d-flex align-items-start gap-3">
                    <div style="width:64px; height:64px; overflow:hidden; flex-shrink:0;">
                        <img src="{{ asset('images/subs_logo.jpeg') }}" alt="{{ config('app.name', 'SUBS') }}" style="width:100%; height:100%; object-fit:contain;">
                    </div>
                    <div>
                        <div style="font-size:28px; font-weight:700; color:#111827; letter-spacing:0.02em;">INVOICE</div>
                        <div class="mt-1" style="font-size:12px; color:#525252; line-height:1.5;">
                            {{ $seller['name'] ?? config('app.name', 'SUBS') }} ({{ $seller['registration_number'] ?? '-' }})<br>
                            {{ $sellerAddress['line1'] ?? '' }}<br>
                            @if(!empty($sellerAddress['line2'])) {{ $sellerAddress['line2'] }}<br>@endif
                            {{ $sellerAddress['postcode'] ?? '' }} {{ $sellerAddress['city'] ?? '' }}, {{ $sellerAddress['state'] ?? '' }}<br>
                            Tel: {{ $seller['contact_number'] ?? '-' }} &nbsp; Email: {{ $seller['email'] ?? '-' }}
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-2 flex-shrink-0">
                    @if($isBackoffice)
                        @if($viewMode === 'customer')
                            <a class="btn print-btn" href="{{ route('invoices.preview', ['invoice' => $request->id, 'view' => 'admin']) }}">Admin View</a>
                        @else
                            <a class="btn print-btn" href="{{ route('invoices.preview', ['invoice' => $request->id, 'view' => 'customer']) }}">Customer View</a>
                        @endif
                    @endif
                    <a class="btn print-btn" href="{{ route('invoices.pdf', $pdfRouteParams) }}" download>Download PDF</a>
                    <a class="btn print-btn" href="#pdf-modal">View PDF</a>
                    @if($canEmailCustomer)
                        <form method="post" action="{{ route('admin.requests.sendCustomer', ['invoice' => $request->id]) }}">
                            @csrf
                            <button class="btn print-btn" type="submit" onclick="return confirm('Send this invoice to customer?')">
                                {{ $payStatus === 'unpaid' ? 'Send Invoice' : 'Send E-Invoice' }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>

            <div class="invoice-card">

                {{-- PAID STAMP --}}
                @if($isApproved && !$isSubmitted)
                    <div class="text-center mb-3">
                        <div class="stamp-paid">PAID</div>
                        @if($request->receipt_no)
                            <div class="receipt-info fw-semibold">Receipt No: {{ $request->receipt_no }}</div>
                        @endif
                        <div class="receipt-info">Payment Date: {{ optional($request->payment_date)->format('d/m/Y') ?? '-' }}</div>
                    </div>
                    <hr class="hr">
                @endif

                {{-- UNPAID STAMP --}}
                @if($payStatus === 'unpaid')
                    <div class="text-center mb-3">
                        <div class="stamp-unpaid">UNPAID</div>
                        <div class="receipt-info">Invoice Date: {{ optional($request->txn_date)->format('d/m/Y') ?? '-' }}</div>
                        <div class="receipt-info">Due Date: {{ optional($request->due_date)->format('d/m/Y') ?? '-' }}</div>
                    </div>
                    <hr class="hr">
                @endif

                {{-- DETAILS SECTION --}}
                <div class="d-flex details-grid" style="gap: 24px;">
                    {{-- CUSTOMER --}}
                    <div style="flex: 1;">
                        <div class="section-title">CUSTOMER</div>
                        <div class="detail-row">
                            <span class="detail-label">Customer ID</span>
                            <span class="detail-value">: {{ $request->customer_id ?? $request->ic_passport ?? '-' }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Customer</span>
                            <span class="detail-value">: {{ $request->name ?? '-' }}</span>
                        </div>
                        @if(!empty($request->email))
                            <div class="detail-row" style="padding-left: 140px;">
                                <span class="detail-value">{{ $request->email }}</span>
                            </div>
                        @endif
                        <div class="detail-row">
                            <span class="detail-label">Contact</span>
                            <span class="detail-value">: {{ $request->phone ?? '-' }}</span>
                        </div>
                    </div>

                    {{-- DETAILS --}}
                    <div style="flex: 1;">
                        <div class="section-title">DETAILS</div>
                        <div class="detail-row">
                            <span class="detail-label">Invoice No</span>
                            <span class="detail-value">: {{ $request->invoice_no ?? '-' }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Invoice Date</span>
                            <span class="detail-value">: {{ optional($request->txn_date)->format('d/m/Y') ?? '-' }}</span>
                        </div>
                        @if(!$isPaid && $request->due_date)
                            <div class="detail-row">
                                <span class="detail-label">Due Date</span>
                                <span class="detail-value">: {{ optional($request->due_date)->format('d/m/Y') ?? '-' }}</span>
                            </div>
                        @endif
                        @if($isSubmitted)
                            <div class="detail-row">
                                <span class="detail-label">Unique Identifier No</span>
                                <span class="detail-value">: {{ $request->lhdn_uuid ?? '-' }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">E-Invoice UUID</span>
                                <span class="detail-value">: <span style="word-break:break-all;">{{ $request->lhdn_uuid ?? '-' }}</span></span>
                            </div>
                        @else
                            <div class="detail-row">
                                <span class="detail-label">Unique Identifier No</span>
                                <span class="detail-value">:</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">E-Invoice UUID</span>
                                <span class="detail-value">:</span>
                            </div>
                        @endif
                    </div>

                    {{-- QR BOX --}}
                    @if($isSubmitted)
                        <div class="qr-box flex-shrink-0">
                            <div class="fw-semibold text-muted" style="font-size:12px;">LHDN QR</div>
                            @if(!empty($qrDataUri))
                                <img src="{{ $qrDataUri }}" alt="LHDN QR">
                            @endif
                            @if(!empty($shareUrl))
                                <div class="mt-2">
                                    <a class="btn btn-sm btn-primary" target="_blank" href="{{ $shareUrl }}">Open LHDN Link</a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>

                <hr class="hr">

                {{-- ITEMS TABLE --}}
                <table class="items-table">
                    <thead>
                        <tr>
                            <th style="width:5%;">No</th>
                            <th style="width:14%;">Car Plate</th>
                            <th style="width:16%;">Site</th>
                            <th style="width:14%;">Period</th>
                            <th style="width:31%;">Description</th>
                            <th style="width:20%;" class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center">1</td>
                            <td>{{ $request->car_plate ?? '-' }}</td>
                            <td>{{ $request->site->name ?? '-' }}</td>
                            <td>{{ $period }}</td>
                            <td>Parking Subscription - {{ $request->site->name ?? '-' }}</td>
                            <td class="text-end">RM {{ number_format($grossAmount, 2) }}</td>
                        </tr>
                    </tbody>
                </table>

                {{-- SUMMARY --}}
                <div class="d-flex mt-2">
                    <div style="flex: 1;"></div>
                    <div style="width: 50%;">
                        <table class="summary-table">
                            <tr>
                                <td class="text-end" style="padding-right: 10px;">Subtotal</td>
                                <td class="text-end" style="width:120px;">RM {{ number_format($netAmount, 2) }}</td>
                            </tr>
                            @if($taxRate > 0)
                                <tr>
                                    <td class="text-end" style="padding-right: 10px;">Add Service Tax ({{ number_format($taxRate * 100, 0) }}%)</td>
                                    <td class="text-end">RM {{ number_format($taxAmount, 2) }}</td>
                                </tr>
                            @endif
                            <tr class="total-row">
                                <td class="text-end" style="padding-right: 10px; border-top: 2px solid #111827; font-weight: 700;">Total</td>
                                <td class="text-end" style="border-top: 2px solid #111827; font-weight: 700;">RM {{ number_format($grandTotal, 2) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                {{-- SERVICE TAX SUMMARY --}}
                @if($taxRate > 0)
                    <table class="tax-summary">
                        <thead>
                            <tr>
                                <th>Service Tax Summary</th>
                                <th class="text-end">Amount(RM)</th>
                                <th class="text-end">Tax(RM)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>* {{ number_format($taxRate * 100, 2) }}%</td>
                                <td class="text-end">{{ number_format($netAmount, 2) }}</td>
                                <td class="text-end">{{ number_format($taxAmount, 2) }}</td>
                            </tr>
                            <tr>
                                <td>** Nil</td>
                                <td class="text-end">0.00</td>
                                <td class="text-end">-</td>
                            </tr>
                        </tbody>
                    </table>
                @endif

                <div class="text-center text-muted small mt-4">
                    No authorised signatures required as this is a computer generated invoice
                    <div class="fw-semibold mt-1">{{ $seller['name'] ?? config('app.name', 'SUBS') }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- PDF MODAL --}}
    <div class="pdf-modal" id="pdf-modal" aria-hidden="true">
        <div class="modal-card" role="dialog" aria-modal="true" aria-label="Invoice PDF">
            <div class="modal-header">
                <div class="fw-semibold">Invoice PDF</div>
                <a class="btn btn-sm btn-outline-secondary" href="#">Close</a>
            </div>
            <div class="modal-body">
                <iframe src="{{ route('invoices.pdf', $pdfRouteParams) }}" title="Invoice PDF"></iframe>
            </div>
        </div>
    </div>
</x-app-layout>