<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invoice - {{ $order->invoice_number }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #333; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 20px; }
        .header h1 { font-size: 24px; margin-bottom: 10px; }
        .header p { font-size: 14px; color: #666; }
        .invoice-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
        .invoice-info .info-block { width: 48%; }
        .info-block h3 { font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 10px; }
        .info-block p { margin-bottom: 5px; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        table th { background-color: #f5f5f5; padding: 10px; text-align: left; border-bottom: 2px solid #333; font-size: 11px; }
        table td { padding: 10px; border-bottom: 1px solid #ddd; }
        table .text-right { text-align: right; }
        table .text-center { text-align: center; }
        .totals { float: right; width: 300px; }
        .totals table { margin-bottom: 0; }
        .totals table td { padding: 5px 10px; }
        .totals .total-row { font-size: 16px; font-weight: bold; background-color: #f5f5f5; }
        .footer { margin-top: 50px; text-align: center; color: #666; font-size: 11px; }
        .clear { clear: both; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{ config('app.name', 'POS SYSTEM') }}</h1>
            <p>123 Business Street | City, State 12345 | Tel: (555) 123-4567</p>
        </div>

        <div class="invoice-info">
            <div class="info-block">
                <h3>Invoice Details</h3>
                <p><strong>Invoice #:</strong> {{ $order->invoice_number }}</p>
                <p><strong>Date:</strong> {{ $order->created_at->format('M d, Y H:i') }}</p>
                <p><strong>Status:</strong> {{ ucfirst($order->status) }}</p>
            </div>
            <div class="info-block">
                <h3>{{ $order->customer ? 'Customer' : 'Customer Info' }}</h3>
                @if($order->customer)
                    <p><strong>Name:</strong> {{ $order->customer->name }}</p>
                    <p><strong>Email:</strong> {{ $order->customer->email ?? 'N/A' }}</p>
                    <p><strong>Phone:</strong> {{ $order->customer->phone ?? 'N/A' }}</p>
                @else
                    <p>Walk-in Customer</p>
                @endif
                <p><strong>Cashier:</strong> {{ $order->user->name ?? 'N/A' }}</p>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Item</th>
                    <th class="text-center">Qty</th>
                    <th class="text-right">Price</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($order->items as $index => $item)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>
                        {{ $item->product_name }}
                        @if($item->product_sku)
                            <br><small style="color: #666;">SKU: {{ $item->product_sku }}</small>
                        @endif
                    </td>
                    <td class="text-center">{{ $item->quantity }}</td>
                    <td class="text-right">{{ number_format($item->price, 2) }}</td>
                    <td class="text-right">{{ number_format($item->subtotal, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="totals">
            <table>
                <tr>
                    <td>Subtotal:</td>
                    <td class="text-right">{{ number_format($order->subtotal, 2) }}</td>
                </tr>
                @if($order->discount > 0)
                <tr>
                    <td>Discount:</td>
                    <td class="text-right">-{{ number_format($order->discount, 2) }}</td>
                </tr>
                @endif
                @if($order->tax > 0)
                <tr>
                    <td>Tax ({{ $order->tax_rate }}%):</td>
                    <td class="text-right">{{ number_format($order->tax, 2) }}</td>
                </tr>
                @endif
                <tr class="total-row">
                    <td>TOTAL:</td>
                    <td class="text-right">{{ number_format($order->total, 2) }}</td>
                </tr>
            </table>
        </div>

        <div class="clear"></div>

        <div style="margin-top: 20px;">
            <p><strong>Payment Method:</strong> 
                @if($order->payment_methods)
                    @foreach(json_decode($order->payment_methods, true) as $pm)
                        {{ ucfirst($pm['method']) }}: Kes {{ number_format($pm['amount'], 2) }}{{ !$loop->last ? ', ' : '' }}
                    @endforeach
                @else
                    {{ ucfirst($order->payment_method) }}
                @endif
            </p>
            <p><strong>Amount Paid:</strong> {{ number_format($order->paid_amount, 2) }}</p>
            <p><strong>Change:</strong> {{ number_format($order->change_amount, 2) }}</p>
        </div>

        @if($order->notes)
        <div style="margin-top: 20px;">
            <p><strong>Notes:</strong> {{ $order->notes }}</p>
        </div>
        @endif

        <div class="footer">
            <p>Thank you for your business!</p>
            <p>Please contact us for any inquiries</p>
        </div>
    </div>
</body>
</html>
