<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice - {{ $order->order_number }}</title>
    <style>
        @media print {
            @page {
                size: 80mm auto;
                margin: 0;
            }
            body {
                margin: 0;
                padding: 5mm;
            }
            .no-print {
                display: none !important;
            }
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.4;
            width: 80mm;
            max-width: 80mm;
            margin: 0 auto;
            padding: 5mm;
            background: white;
            color: #000;
        }
        
        .receipt-container {
            width: 100%;
        }
        
        .header {
            text-align: center;
            margin-bottom: 8px;
            border-bottom: 1px dashed #000;
            padding-bottom: 8px;
        }
        
        .store-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        
        .store-info {
            font-size: 10px;
            line-height: 1.3;
        }
        
        .invoice-info {
            margin: 8px 0;
            padding: 6px 0;
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
        }
        
        .invoice-row {
            display: flex;
            justify-content: space-between;
            margin: 3px 0;
            font-size: 11px;
        }
        
        .customer-info {
            margin: 6px 0;
            padding: 4px 0;
            font-size: 11px;
        }
        
        .items-section {
            margin: 8px 0;
        }
        
        .item-row {
            margin: 6px 0;
            padding: 4px 0;
            border-bottom: 1px dotted #ccc;
        }
        
        .item-name {
            font-weight: bold;
            margin-bottom: 2px;
        }
        
        .item-details {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            margin-top: 2px;
        }
        
        .item-qty {
            width: 30px;
            text-align: left;
        }
        
        .item-price {
            width: 60px;
            text-align: right;
        }
        
        .item-total {
            width: 60px;
            text-align: right;
            font-weight: bold;
        }
        
        .totals-section {
            margin: 10px 0;
            padding: 8px 0;
            border-top: 2px solid #000;
            border-bottom: 2px solid #000;
        }
        
        .total-row {
            display: flex;
            justify-content: space-between;
            margin: 4px 0;
            font-size: 11px;
        }
        
        .grand-total {
            font-size: 14px;
            font-weight: bold;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #000;
        }
        
        .footer {
            text-align: center;
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px dashed #000;
        }
        
        .qr-code {
            margin: 8px auto;
            text-align: center;
        }
        
        .qr-code img {
            max-width: 80px;
            height: auto;
        }
        
        .thank-you {
            font-size: 11px;
            font-weight: bold;
            margin: 8px 0;
        }
        
        .powered-by {
            font-size: 9px;
            color: #666;
            margin-top: 4px;
        }
        
        .divider {
            border-top: 1px dashed #000;
            margin: 6px 0;
        }
        
        .text-center {
            text-align: center;
        }
        
        .text-right {
            text-align: right;
        }
        
        .print-button {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .print-button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="receipt-container">
        <!-- Header Section -->
        <div class="header">
            @if(isset($showLogo) && $showLogo && isset($logoUrl) && $logoUrl)
                <div style="text-align: center; margin-bottom: 8px;">
                    <img src="{{ $logoUrl }}" alt="Logo" style="max-width: 80px; max-height: 60px; object-fit: contain;" onerror="this.style.display='none';">
                </div>
            @endif
            <div class="store-name">{{ $storeName ?? ($order->restaurant->name ?? 'Restaurant Name') }}</div>
            <div class="store-info">
                @if($storeAddress ?? null)
                    {{ $storeAddress }}<br>
                @endif
                @if($storePhone ?? null)
                    Tel: {{ $storePhone }}<br>
                @endif
                @if($storeTaxNumber ?? null)
                    Tax/Reg: {{ $storeTaxNumber }}
                @endif
            </div>
        </div>
        
        <!-- Invoice Info Section -->
        <div class="invoice-info">
            <div class="invoice-row">
                <span>Invoice #:</span>
                <span><strong>{{ $order->order_number }}</strong></span>
            </div>
            <div class="invoice-row">
                <span>Date:</span>
                <span>{{ $order->paid_at ? $order->paid_at->format('Y-m-d') : ($order->created_at ? $order->created_at->format('Y-m-d') : date('Y-m-d')) }}</span>
            </div>
            <div class="invoice-row">
                <span>Time:</span>
                <span>{{ $order->paid_at ? $order->paid_at->format('H:i') : ($order->created_at ? $order->created_at->format('H:i') : date('H:i')) }}</span>
            </div>
        </div>
        
        <!-- Customer Info Section -->
        @if($order->customer_name || $order->customer_phone)
        <div class="customer-info">
            @if($order->customer_name)
                <div><strong>Customer:</strong> {{ $order->customer_name }}</div>
            @endif
            @if($order->customer_phone)
                <div><strong>Phone:</strong> {{ $order->customer_phone }}</div>
            @endif
        </div>
        <div class="divider"></div>
        @endif
        
        <!-- Items Section -->
        <div class="items-section">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: bold; font-size: 11px; border-bottom: 1px solid #000; padding-bottom: 2px;">
                <span class="item-qty">Qty</span>
                <span style="flex: 1; text-align: left; margin-left: 8px;">Item</span>
                <span class="item-price">Price</span>
                <span class="item-total">Total</span>
            </div>
            @forelse($order->items as $item)
            <div class="item-row">
                <div class="item-name">{{ $item->item_name ?? 'N/A' }}</div>
                <div class="item-details">
                    <span class="item-qty">{{ $item->quantity ?? 0 }}</span>
                    <span style="flex: 1; text-align: left; margin-left: 8px;">x {{ number_format($item->price ?? 0, 2) }}</span>
                    <span class="item-total">{{ number_format($item->total ?? 0, 2) }}</span>
                </div>
            </div>
            @empty
            <div class="item-row">
                <div class="item-name" style="text-align: center; color: #999;">No items found</div>
            </div>
            @endforelse
        </div>
        
        <div class="divider"></div>
        
        <!-- Totals Section -->
        <div class="totals-section">
            <div class="total-row">
                <span>Subtotal:</span>
                <span>PKR {{ number_format($order->subtotal, 2) }}</span>
            </div>
            @if($order->discount > 0)
            <div class="total-row">
                <span>Discount:</span>
                <span>- PKR {{ number_format($order->discount, 2) }}</span>
            </div>
            @endif
            @if($order->service_charge > 0)
            <div class="total-row">
                <span>Service Charge:</span>
                <span>PKR {{ number_format($order->service_charge, 2) }}</span>
            </div>
            @endif
            @if($order->tax > 0)
            <div class="total-row">
                <span>Tax/GST:</span>
                <span>PKR {{ number_format($order->tax, 2) }}</span>
            </div>
            @endif
            <div class="total-row grand-total">
                <span>GRAND TOTAL:</span>
                <span>PKR {{ number_format($order->grand_total, 2) }}</span>
            </div>
            @if($order->payment_mode)
            <div class="total-row" style="margin-top: 4px; font-size: 10px;">
                <span>Payment:</span>
                <span>{{ strtoupper($order->payment_mode) }}</span>
            </div>
            @endif
        </div>
        
        <!-- Footer Section -->
        <div class="footer">
            @if($qrCodeUrl ?? null)
            <div class="qr-code">
                <img src="{{ $qrCodeUrl }}" alt="QR Code">
            </div>
            @endif
            <div class="thank-you">
                Thank you for your purchase!
            </div>
            <div class="powered-by">
                Powered by {{ $posName ?? 'POS System' }}
            </div>
        </div>
    </div>
    
    <button class="print-button no-print" onclick="window.print()">🖨️ Print Invoice</button>
    
    <script>
        // Auto-print if requested
        @if(request('auto_print') == '1')
        window.onload = function() {
            setTimeout(function() {
                window.print();
            }, 500);
        };
        @endif
    </script>
</body>
</html>
