@use('App\Enums\Payments\OrderType')
@use('App\Enums\InvoiceStatus')
<x-admin-layout>
    @push('styles')
        <style>
            @page {
                size: auto;
                margin: 5mm 8mm; /* Slightly tighter margins to maximize usable area */
            }
            @media print {
                /* Hide sidebar, sticky headers, modals, popovers, search boxes, and action buttons */
                aside, header, nav, .print-button-container, [role="dialog"], button, a[href*="edit"] {
                    display: none !important;
                }
                
                /* Reset margins and paddings on root containers for layout normalization */
                body, html {
                    background: white !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 100% !important;
                    height: auto !important;
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                }
                
                /* Unset main margins (e.g. sidebar spacing md:ml-64) in print mode */
                main {
                    margin: 0 !important;
                    padding: 0 !important;
                    margin-left: 0 !important;
                    padding-left: 0 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                }

                .invoice-page-wrapper {
                    position: static !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                    padding: 16px !important; /* Reduced padding for tighter layout */
                    border: 1px solid #e4e4e7 !important; /* border-zinc-200 */
                    border-radius: 12px !important; /* rounded-xl for premium look */
                    background: white !important;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
                }

                /* Tighter spacing for print to fit elegantly on exactly one page */
                .invoice-page-wrapper .pb-6 {
                    padding-bottom: 10px !important;
                }
                .invoice-page-wrapper .pt-4 {
                    padding-top: 10px !important;
                }
                .invoice-page-wrapper .py-6 {
                    padding-top: 10px !important;
                    padding-bottom: 10px !important;
                }
                .invoice-page-wrapper .my-6 {
                    margin-top: 8px !important;
                    margin-bottom: 8px !important;
                }
                .invoice-page-wrapper .my-8 {
                    margin-top: 12px !important;
                    margin-bottom: 12px !important;
                }
                .invoice-page-wrapper table th,
                .invoice-page-wrapper table td {
                    padding-top: 6px !important;
                    padding-bottom: 6px !important;
                }
                .invoice-page-wrapper .p-4 {
                    padding: 10px !important;
                }
                .invoice-page-wrapper .p-8 {
                    padding: 0 !important;
                }
                
                /* Cut line style adjustments for printable version */
                .cut-line {
                    margin: 16px 0 12px 0 !important;
                    border-top: 1px dashed #a1a1aa !important; /* border-zinc-400 */
                }
                
                .address-section {
                    display: grid !important;
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                    gap: 16px !important;
                }

                /* Prevent child blocks from splitting across pages awkwardly */
                .address-section, table, .total-section, .card-message-section, .cut-line {
                    page-break-inside: avoid !important;
                }
            }
        </style>
    @endpush

    <script>
        function printInvoice() {
            window.print();
        }

        function confirmDuplicate(event) {
            event.preventDefault();
            window.showSwal({
                title: 'Duplicate Invoice?',
                text: 'This will create a new invoice with a fresh number and copy all order, delivery, and item data. Payments will not be copied.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Duplicate Invoice',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#059669',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sendBtn = document.getElementById('send-receipt-btn');
            if (sendBtn) {
                sendBtn.addEventListener('click', async function () {
                    const invoiceId = this.getAttribute('data-invoice-id');
                    const csrf = document.querySelector('meta[name="csrf-token"]').content;
                    this.disabled = true; this.innerHTML = '<span class="inline-block animate-spin mr-2"><svg class="w-3 h-3 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>Sending...';
                    try {
                        const res = await fetch('{{ route('invoices.send-receipt') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': csrf
                            },
                            body: JSON.stringify({ invoice_id: invoiceId })
                        });
                        const data = await res.json();
                        if (!res.ok || !data.success) throw new Error(data.message || 'Failed');
                        // Success
                        window.dispatchEvent(new CustomEvent('close-modal', { detail: 'receiptPreviewModal' }));
                        window.showSwal({ title: 'Sent', text: 'Receipt email sent successfully', icon: 'success' });
                    } catch (e) {
                        window.showSwal({ title: 'Error', text: e.message || 'Failed to send receipt', icon: 'error' });
                    } finally {
                        this.disabled = false; this.innerHTML = '<i class="uil uil-message mr-1"></i> Send Receipt';
                    }
                });
            }
        });

        // Generate Invoice Logic
        document.addEventListener('DOMContentLoaded', function() {
            const generateBtn = document.getElementById('generate-invoice-btn');
            if (generateBtn) {
                generateBtn.addEventListener('click', async function() {
                    this.disabled = true;
                    const originalHTML = this.innerHTML;
                    this.innerHTML = '<span class="inline-block animate-spin mr-2"><svg class="w-3 h-3 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>Generating...';

                    window.showSwal({
                        title: "Generating Invoice...",
                        text: "Please wait...",
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    try {
                        const csrf = document.querySelector('meta[name="csrf-token"]').content;
                        const res = await fetch('{{ route('invoices.generate') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrf,
                                'Accept': 'application/json'
                            }
                        });

                        const data = await res.json();

                        if (!res.ok) throw new Error(data.message || 'Failed to generate invoice');

                        if (data.redirect_url) {
                            window.location.href = data.redirect_url;
                            return; // Wait for redirect
                        }

                        window.showSwal({
                            icon: "success",
                            title: "Success!",
                            text: data.message,
                            timer: 3000
                        });
                    } catch (e) {
                        window.showSwal({
                            icon: "error",
                            title: "Error",
                            text: e.message || 'Failed to generate invoice'
                        });
                    } finally {
                        this.disabled = false;
                        this.innerHTML = originalHTML;
                    }
                });
            }
        });
    </script>

    <div class="max-w-4xl mx-auto my-6 p-8 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-lg print:max-w-full invoice-page-wrapper">
        
        <!-- Action Buttons (Hidden on print) -->
        <div class="flex justify-between items-center mb-8 pb-4 border-b border-zinc-150 dark:border-zinc-800 print-button-container">
            <button id="generate-invoice-btn" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer">
                <span class="uil uil-plus"></span>
                <span>New Invoice</span>
            </button>
            <div class="flex items-center gap-2">
                <a href="{{ route('orders.edit', ['order' => $invoice->order]) }}" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer">
                    <span class="uil uil-edit"></span>
                    <span>Edit Order</span>
                </a>
                <form method="POST" action="{{ route('invoices.duplicate', $invoice) }}"
                      onsubmit="return confirmDuplicate(event)">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer">
                        <span class="uil uil-copy"></span>
                        <span>Duplicate Invoice</span>
                    </button>
                </form>
                <button class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-zinc-700 hover:bg-zinc-800 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer" onclick="printInvoice()">
                    <span class="uil uil-print"></span>
                    <span>Print Invoice</span>
                </button>
                @php
                    $order = $invoice->order;
                    $customerEmail = $order?->customer?->email;
                    $canSendReceipt = $order && in_array($order->order_type, [OrderType::Phone, OrderType::WalkIn]) && $customerEmail && filter_var($customerEmail, FILTER_VALIDATE_EMAIL);
                @endphp
                @if($canSendReceipt)
                    <button class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-teal-600 hover:bg-teal-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer" x-data="" @click="$dispatch('open-modal', 'receiptPreviewModal')">
                        <span class="uil uil-envelope"></span>
                        <span>Send Receipt</span>
                    </button>
                @endif
            </div>
        </div>

        @if($canSendReceipt)
        <!-- Receipt Preview Modal -->
        <x-modal name="receiptPreviewModal" maxWidth="2xl">
            <div class="p-6">
                <div class="flex justify-between items-center pb-3 border-b border-zinc-200 dark:border-zinc-800">
                    <h5 class="text-sm font-bold text-zinc-900 dark:text-zinc-100" id="receiptPreviewModalLabel">Email Receipt Preview</h5>
                    <button type="button" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer" x-on:click="$dispatch('close-modal', 'receiptPreviewModal')">
                        <span class="sr-only">Close</span>
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="py-4">
                    <div class="flex items-center mb-4">
                        <img src="{{ asset('hydepark-logo.png') }}" alt="{{ setting('app_name', config('app.name')) }}" class="h-10 dark:brightness-95">
                        <span class="sr-only">{{ setting('app_name', config('app.name')) }}</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Order ID</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">#{{ $order->id }}</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Customer</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">{{ $order->customer?->name }}</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Email</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">{{ $order->customer?->email }}</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Order Date</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">{{ $order->formatted_order_date ?? ($order->order_date?->format('M j, Y') ?? 'Not set') }}</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Delivery Date</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">{{ $order->formatted_delivery_date ?? ($order->delivery_date?->format('M j, Y') ?? 'Not set') }}</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-900/50 p-3.5 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <div class="text-zinc-450 dark:text-zinc-500 font-semibold mb-0.5">Amount</div>
                            <div class="font-bold text-zinc-800 dark:text-zinc-200">${{ number_format($order->total, 2) }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end pt-3 border-t border-zinc-200 dark:border-zinc-800 space-x-2">
                    <button type="button" class="px-4 py-2 bg-zinc-500 hover:bg-zinc-600 text-white text-xs font-semibold rounded-xl transition-colors cursor-pointer" x-on:click="$dispatch('close-modal', 'receiptPreviewModal')">Close</button>
                    <button type="button" class="px-4 py-2 bg-teal-650 hover:bg-teal-700 text-white text-xs font-semibold rounded-xl transition-colors cursor-pointer" id="send-receipt-btn" data-invoice-id="{{ $invoice->id }}">
                        <i class="uil uil-message mr-1"></i> Send Receipt
                    </button>
                </div>
            </div>
        </x-modal>
        @endif

        @isset($invoice->order)
            @php
                $order = $invoice->order;
                $isPickup = $order->delivery->is_in_store_pickup ?? false;
                $isWired = $order->order_type === App\Enums\Payments\OrderType::Wired;
                $delivery = $order->delivery ?? null;
                $customer = $order->customer ?? null;
                $cardMessage = $order->cardMessage ?? null;
            @endphp

            <!-- Header Section -->
            <div class="flex flex-col gap-4 pb-6 border-b-2 border-zinc-200 dark:border-zinc-800">
                <!-- Centered Logo -->
                <div class="flex justify-center items-center py-2">
                    <img src="{{ asset('hydepark-logo.png') }}" alt="Hyde Park Florist Logo" class="max-h-10 w-auto dark:brightness-200">
                </div>
                
                <!-- Company details and Invoice metadata side by side -->
                <div class="flex flex-col sm:flex-row justify-between items-start gap-4 pt-4 border-t border-zinc-150 dark:border-zinc-850">
                    <!-- Left: Shop Info -->
                    <div class="space-y-1">
                        <h2 class="text-sm font-extrabold text-zinc-900 dark:text-zinc-100 leading-tight uppercase tracking-wider">{{ setting('app_name', config('app.name', 'Laravel')) }}</h2>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{!! nl2br(e(setting('shop_address', '1748 E 55th Street Chicago IL 60616'))) !!}</p>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1 font-semibold">{{ setting('shop_phone', '773-288-2800') }}</p>
                    </div>
                    <!-- Right: Invoice Metadata -->
                    <div class="text-left sm:text-right space-y-1 text-xs text-zinc-650 dark:text-zinc-400 shrink-0">
                        <p><strong class="text-zinc-700 dark:text-zinc-300">Order Date:</strong> {{ $order->formatted_order_date ?? 'Not specified' }}</p>
                        @if($isPickup)
                            <p><strong class="text-zinc-700 dark:text-zinc-300">Pickup Date:</strong> {{ $order?->formatted_delivery_date ?? 'Not specified' }}</p>
                        @else
                            <p><strong class="text-zinc-700 dark:text-zinc-300">Delivery Date:</strong> {{ $order?->formatted_delivery_date ?? 'Not specified' }}</p>
                        @endif
                        <p><strong class="text-zinc-700 dark:text-zinc-300">Invoice No.:</strong> <span class="font-mono font-bold text-zinc-800 dark:text-zinc-200">{{ $order->invoice->number }}</span></p>
                    </div>
                </div>
            </div>
            <!-- Address Section - First Copy (For Customer) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 py-6 border-b-2 border-zinc-200 dark:border-zinc-800 address-section">
                <div class="space-y-3">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Customer Details</h3>
                    <div class="space-y-1 text-xs text-zinc-650 dark:text-zinc-400">
                        @if($isWired)
                            <p><strong>Order Type:</strong> Wired</p>
                            <p><strong>Wire ID:</strong> {{ $order->wire_id ?? 'Not specified' }}</p>
                            @if($customer)
                                <p><strong>Customer:</strong> {{ $customer->name }}</p>
                                <p><strong>Phone:</strong> {{ $customer->phone }}</p>
                            @endif
                        @else
                            @if($customer)
                                <p><strong>Customer:</strong> {{ $customer->name ?? 'Not specified' }}</p>
                                <p><strong>Address:</strong>
                                    @if(!empty($customer->address))
                                        {{ trim(collect([
                                            $customer->address,
                                            $customer->apartment_number ? '#'.$customer->apartment_number : null
                                        ])->filter()->join(', ')) }}
                                    @else
                                        {{ trim(collect([
                                            $customer->city,
                                            $customer->state,
                                            $customer->zipcode
                                        ])->filter()->join(' ')) ?: 'Not specified' }}
                                    @endif
                                </p>
                                <p><strong>Phone:</strong> {{ $customer->phone ?? 'Not specified' }}</p>
                            @else
                                <p>No customer details available</p>
                            @endif
                        @endif
                    </div>
                </div>

                <div class="space-y-3">
                    @if($isPickup)
                        <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Pickup Information</h3>
                        <div class="bg-blue-50 dark:bg-blue-950/20 p-4 rounded-xl border border-blue-200 dark:border-blue-900/30 text-xs space-y-1">
                            <p class="flex items-center gap-2 text-blue-800 dark:text-blue-300 font-bold mb-1">
                                <span class="uil uil-store"></span>
                                <span>ORDER WILL BE PICKED UP IN STORE</span>
                            </p>
                            <p class="text-blue-700 dark:text-blue-400">Location: 1748 E 55th Street Chicago IL 60616</p>
                            @if($delivery && $delivery->special_instructions)
                                <div class="mt-2 pt-2 border-t border-blue-200/50 dark:border-blue-900/40 text-zinc-700 dark:text-zinc-300">
                                    <strong>Instructions:</strong>
                                    <div class="mt-1 whitespace-pre-wrap word-break bg-white/60 dark:bg-zinc-950/40 p-2 rounded border border-blue-250/50 dark:border-blue-900/20 font-serif italic text-blue-900 dark:text-blue-350 shadow-sm">{{ $delivery->special_instructions }}</div>
                                </div>
                            @endif
                        </div>
                    @else
                        <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Delivery Information</h3>
                        <div class="space-y-1 text-xs text-zinc-650 dark:text-zinc-400">
                            @if($delivery)
                                <p><strong>Recipient:</strong> {{ $delivery->name ?? ($customer->name ?? 'Not specified') }}</p>
                                <p><strong>Address:</strong>
                                    @if(!empty($delivery?->address))
                                        {{ trim(collect([
                                            $delivery?->address,
                                            $delivery?->apartment_number ? '#'.$delivery->apartment_number : null
                                        ])->filter()->join(', ')) }}
                                    @else
                                        {{ trim(collect([
                                            $delivery?->city,
                                            $delivery?->state,
                                            $delivery?->zipcode
                                        ])->filter()->join(' ')) ?: 'Not specified' }}
                                    @endif
                                </p>
                                <p><strong>Phone:</strong> {{ $delivery->phone ?? ($customer->phone ?? 'Not specified') }}</p>
                                @if($delivery->special_instructions)
                                    <div class="mt-2 pt-2 border-t border-zinc-150 dark:border-zinc-850 text-zinc-750 dark:text-zinc-300">
                                        <strong>Instructions:</strong>
                                        <div class="mt-1 whitespace-pre-wrap word-break bg-zinc-55 dark:bg-zinc-950/60 p-3 rounded-lg border border-zinc-200 dark:border-zinc-800 font-serif italic text-zinc-800 dark:text-zinc-300 shadow-inner">{{ $delivery->special_instructions }}</div>
                                    </div>
                                @endif
                            @else
                                <p>No delivery information available</p>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Product Table -->
            <div class="my-6 overflow-hidden border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-sm bg-white dark:bg-zinc-950">
                <table class="w-full text-left border-collapse text-xs">
                    <thead>
                        <tr class="border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 text-zinc-700 dark:text-zinc-300 font-bold uppercase tracking-wider">
                            <th class="py-3 px-4">Product</th>
                            <th class="py-3 px-4 text-center">Quantity</th>
                            <th class="py-3 px-4 text-right">Price/Unit</th>
                            <th class="py-3 px-4 text-right">Discount</th>
                            <th class="py-3 px-4 text-right">Extended</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                        @forelse ($order->items as $item)
                            <tr class="hover:bg-zinc-50/50 dark:hover:bg-zinc-800/30 transition-colors">
                                <td class="py-3 px-4 font-semibold text-zinc-800 dark:text-zinc-200">{{ $item->product->name }}</td>
                                <td class="py-3 px-4 text-center text-zinc-650 dark:text-zinc-400 font-bold">{{ $item->quantity }}</td>
                                <td class="py-3 px-4 text-right text-zinc-650 dark:text-zinc-400">{{ currency_format($item->price) }}</td>
                                <td class="py-3 px-4 text-right text-zinc-600 dark:text-zinc-450">{{ currency_format($item->discount) }}</td>
                                <td class="py-3 px-4 text-right font-bold text-zinc-800 dark:text-zinc-200">{{ currency_format($item->quantity * ($item->price - $item->discount)) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-4 text-center text-zinc-500 dark:text-zinc-400 font-medium">No items listed for this order</td>
                            </tr>
                        @endforelse
                        <tr class="bg-zinc-50/50 dark:bg-zinc-900/30 font-semibold text-zinc-700 dark:text-zinc-300">
                            <td colspan="4" class="py-3.5 px-4 text-right uppercase tracking-wider font-bold">{{ $isPickup ? 'PICKUP FEE' : 'DELIVERY FEE' }}</td>
                            <td class="py-3.5 px-4 text-right text-zinc-900 dark:text-zinc-100 font-bold">${{ number_format($order->delivery_fee, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Totals & Message Box -->
            <div class="flex flex-col md:flex-row print:flex-row justify-between items-start gap-6 py-6 border-b-2 border-zinc-200 dark:border-zinc-800">
                <div class="flex-1 w-full">
                    <!-- Card Message Section -->
                    @if($cardMessage && $cardMessage->message)
                        <div class="bg-amber-50 dark:bg-amber-950/20 p-4 rounded-xl border border-amber-200 dark:border-amber-900/30 text-xs">
                            <h4 class="flex items-center gap-2 font-bold text-amber-800 dark:text-amber-400 mb-2">
                                <span class="uil uil-envelope-open"></span>
                                <span>Card Message</span>
                            </h4>
                            <div class="whitespace-pre-wrap font-serif italic text-amber-955 dark:text-amber-300 bg-white/70 dark:bg-zinc-950/40 p-3 rounded-lg border border-amber-250/50 dark:border-amber-900/20 shadow-sm leading-relaxed">{{ $cardMessage->message }}</div>
                        </div>
                    @endif
                </div>

                <div class="w-full md:w-72 print:w-72 bg-zinc-50 dark:bg-zinc-900/50 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 text-xs space-y-2 self-stretch sm:self-end flex flex-col justify-center">
                    <div class="flex justify-between text-zinc-600 dark:text-zinc-400">
                        <span>Sub-Total:</span>
                        <span class="font-semibold">${{ number_format($order->subtotal, 2) }}</span>
                    </div>
                    @if($order->tax_enabled && $order->tax > 0)
                        <div class="flex justify-between text-zinc-600 dark:text-zinc-400">
                            <span>Sales Tax:</span>
                            <span class="font-semibold">${{ number_format($order->tax, 2) }}</span>
                        </div>
                    @endif
                    <div class="flex justify-between pt-2 border-t border-zinc-200 dark:border-zinc-800 text-sm font-bold text-zinc-900 dark:text-zinc-100">
                        <span>TOTAL:</span>
                        <span>${{ number_format($order->total, 2) }}</span>
                    </div>
                </div>
            </div>

            <!-- Cut Line -->
            <div class="mt-6 mb-4 relative border-t border-dashed border-zinc-300 dark:border-zinc-700 print:my-4 cut-line">
                <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-zinc-900 px-4 py-0.5 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-widest border border-zinc-200 dark:border-zinc-800 rounded-full flex items-center gap-1.5 shadow-sm">
                    <span class="uil uil-scissors"></span>
                    <span>Cut Here</span>
                </span>
            </div>

            <!-- Address Section - Second Copy (For Store) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 pb-6 address-section">
                <div class="space-y-3">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Customer Details (Store Copy)</h3>
                    <div class="space-y-1 text-xs text-zinc-650 dark:text-zinc-400">
                        @if($isWired)
                            <p><strong>Order Type:</strong> Wired</p>
                            <p><strong>Wire ID:</strong> {{ $order->wire_id ?? 'Not specified' }}</p>
                            @if($customer)
                                <p><strong>Customer:</strong> {{ $customer->name }}</p>
                                <p><strong>Phone:</strong> {{ $customer->phone }}</p>
                            @endif
                        @else
                            @if($customer)
                                <p><strong>Customer:</strong> {{ $customer->name ?? 'Not specified' }}</p>
                                <p><strong>Address:</strong>
                                    @if(!empty($customer->address))
                                        {{ trim(collect([
                                            $customer->address,
                                            $customer->apartment_number ? '#'.$customer->apartment_number : null
                                        ])->filter()->join(', ')) }}
                                    @else
                                        {{ trim(collect([
                                            $customer->city,
                                            $customer->state,
                                            $customer->zipcode
                                        ])->filter()->join(' ')) ?: 'Not specified' }}
                                    @endif
                                </p>
                                <p><strong>Phone:</strong> {{ $customer->phone ?? 'Not specified' }}</p>
                            @else
                                <p>No customer details available</p>
                            @endif
                        @endif
                    </div>
                </div>

                <div class="space-y-3">
                    @if($isPickup)
                        <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Pickup Information (Store Copy)</h3>
                        <div class="bg-blue-50 dark:bg-blue-950/20 p-4 rounded-xl border border-blue-200 dark:border-blue-900/30 text-xs space-y-1">
                            <p class="flex items-center gap-2 text-blue-800 dark:text-blue-300 font-bold mb-1">
                                <span class="uil uil-store"></span>
                                <span>ORDER WILL BE PICKED UP IN STORE</span>
                            </p>
                            <p class="text-blue-700 dark:text-blue-400">Location: 1748 E 55th Street Chicago IL 60616</p>
                        </div>
                    @else
                        <h3 class="text-xs font-bold uppercase tracking-wider text-zinc-700 dark:text-zinc-300 pb-1 border-b border-zinc-150 dark:border-zinc-850">Delivery Information (Store Copy)</h3>
                        <div class="space-y-1 text-xs text-zinc-650 dark:text-zinc-400">
                            @if($delivery)
                                <p><strong>Recipient:</strong> {{ $delivery->name ?? ($customer->name ?? 'Not specified') }}</p>
                                <p><strong>Address:</strong>
                                    @if(!empty($delivery?->address))
                                        {{ trim(collect([
                                            $delivery?->address,
                                            $delivery?->apartment_number ? '#'.$delivery->apartment_number : null
                                        ])->filter()->join(', ')) }}
                                    @else
                                        {{ trim(collect([
                                            $delivery?->city,
                                            $delivery?->state,
                                            $delivery?->zipcode
                                        ])->filter()->join(' ')) ?: 'Not specified' }}
                                    @endif
                                </p>
                                <p><strong>Phone:</strong> {{ $delivery->phone ?? ($customer->phone ?? 'Not specified') }}</p>
                            @else
                                <p>No delivery information available</p>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

        @else
            <div class="text-center py-12 bg-zinc-50 dark:bg-zinc-950 rounded-2xl border border-zinc-200 dark:border-zinc-800">
                <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">No order found for this invoice.</p>
                <a href="{{ route('orders.create', ['secure_id' => encrypt($invoice->id)]) }}" class="inline-flex items-center gap-1.5 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl shadow transition-colors cursor-pointer">
                    <span>Click here to add new order</span>
                </a>
            </div>
        @endisset
    </div>
</x-admin-layout>