<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Invoice #INV-{{ $order->order_number }} — Divine Drops</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #1e293b;
            background: #f8fafc;
            margin: 0;
            padding: 24px;
            font-size: 13px;
            line-height: 1.5;
        }

        .action-bar {
            max-width: 800px;
            margin: 0 auto 20px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            border: none;
            transition: all 0.2s;
        }

        .btn-primary { background: #186297; color: white; }
        .btn-primary:hover { background: #145380; }
        .btn-secondary { background: #e2e8f0; color: #334155; }
        .btn-secondary:hover { background: #cbd5e1; }

        .invoice-box {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid #186297;
            padding-bottom: 20px;
            margin-bottom: 24px;
        }

        .logo-img { height: 48px; object-fit: contain; }

        .company-title {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            color: #186297;
            margin: 0;
        }

        .tax-invoice-badge {
            text-align: right;
        }

        .invoice-title {
            font-family: 'Playfair Display', serif;
            font-size: 26px;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: 1px;
            margin: 0;
            text-transform: uppercase;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 24px;
        }

        .section-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 16px;
        }

        .section-box-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #186297;
            margin-bottom: 8px;
        }

        table.invoice-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 24px;
        }

        table.invoice-table th {
            background: #186297;
            color: white;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
        }

        table.invoice-table td {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .summary-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 30px;
        }

        .summary-table {
            width: 320px;
            border-collapse: collapse;
        }

        .summary-table td {
            padding: 6px 12px;
        }

        .grand-total-row {
            background: #e0eff9;
            font-size: 16px;
            font-weight: 700;
            color: #186297;
        }

        .grand-total-row td {
            padding: 12px;
            border-top: 2px solid #186297;
        }

        .footer-note {
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 11px;
            color: #64748b;
        }

        @media print {
            body { background: white; padding: 0; }
            .action-bar { display: none; }
            .invoice-box { box-shadow: none; border: none; padding: 0; width: 100%; max-width: 100%; }
        }
    </style>
</head>
<body>

    <div class="action-bar">
        <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-secondary">← Back to Order</a>
        <button onclick="window.print()" class="btn btn-primary">🖨️ Print Tax Invoice / Download PDF</button>
    </div>

    <div class="invoice-box">
        <!-- Header -->
        <div class="invoice-header">
            <div>
                <img src="{{ asset('images/logo.png') }}" alt="Divine Drops" class="logo-img" onerror="this.style.display='none'; document.getElementById('alt-brand').style.display='block';">
                <h1 id="alt-brand" class="company-title" style="display:none;">Divine Drops</h1>
                <div style="font-size: 11px; color: #64748b; margin-top: 6px;">
                    <strong>Divine Drops Luxury Skincare Pvt. Ltd.</strong><br>
                    Plot No. 42, Botanical Park Road, Jubilee Hills<br>
                    Hyderabad, Telangana - 500033 | Contact: +91 98765 43210<br>
                    GSTIN: <strong>36ABCDE1234F1Z5</strong> | FSSAI: 13622011000142
                </div>
            </div>
            <div class="tax-invoice-badge">
                <h2 class="invoice-title">TAX INVOICE</h2>
                <div style="margin-top: 8px; font-size: 13px;">
                    <strong>Invoice #:</strong> INV-{{ $order->order_number }}<br>
                    <strong>Invoice Date:</strong> {{ $order->created_at ? $order->created_at->format('d M, Y') : date('d M, Y') }}<br>
                    <strong>Order Ref:</strong> #{{ $order->order_number }}
                </div>
            </div>
        </div>

        <!-- Billed & Shipped Info -->
        <div class="grid-2">
            <div class="section-box">
                <div class="section-box-title">Billed & Shipped To</div>
                <strong style="font-size: 14px; color: #0f172a;">{{ $order->customer_name }}</strong><br>
                {{ $order->shipping_address }}<br>
                {{ $order->city }}, {{ $order->state }} - <strong>{{ $order->pincode }}</strong><br>
                Phone: {{ $order->customer_phone }}<br>
                Email: {{ $order->customer_email }}
            </div>

            <div class="section-box">
                <div class="section-box-title">Payment & Dispatch Summary</div>
                <strong>Payment Mode:</strong> {{ strtoupper($order->payment_status === 'pending' ? 'Cash on Delivery (COD)' : 'Prepaid Online') }}<br>
                <strong>Payment Status:</strong> 
                <span style="color: {{ $order->payment_status === 'paid' ? '#15803d' : '#b45309' }}; font-weight: 700;">
                    {{ strtoupper($order->payment_status) }}
                </span><br>
                <strong>Order Status:</strong> {{ ucfirst($order->order_status) }}<br>
                <strong>Place of Supply:</strong> {{ $order->state }} (Code: 36)
            </div>
        </div>

        <!-- Items Table -->
        <table class="invoice-table">
            <thead>
                <tr>
                    <th style="width: 40px; text-align: center;">#</th>
                    <th>Product & Variant</th>
                    <th style="width: 80px; text-align: center;">HSN</th>
                    <th style="width: 60px; text-align: center;">Qty</th>
                    <th style="width: 90px; text-align: right;">Rate (₹)</th>
                    <th style="width: 70px; text-align: center;">GST %</th>
                    <th style="width: 100px; text-align: right;">Total (₹)</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $taxableSubtotal = 0;
                @endphp
                @foreach($order->items as $idx => $item)
                    @php
                        $itemTotal = $item->subtotal;
                        $taxableSubtotal += $itemTotal;
                    @endphp
                    <tr>
                        <td style="text-align: center;">{{ $idx + 1 }}</td>
                        <td>
                            <strong style="color: #0f172a;">{{ $item->product_name }}</strong>
                            <div style="font-size: 11px; color: #64748b;">Size: {{ $item->size ?? 'Standard' }}</div>
                        </td>
                        <td style="text-align: center; font-family: monospace; font-size: 11px;">330499</td>
                        <td style="text-align: center;">{{ $item->quantity }}</td>
                        <td style="text-align: right;">₹{{ number_format($item->price, 2) }}</td>
                        <td style="text-align: center;">18%</td>
                        <td style="text-align: right; font-weight: 600;">₹{{ number_format($itemTotal, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totals & GST Summary -->
        <div class="summary-container">
            <table class="summary-table">
                <tr>
                    <td>Taxable Value:</td>
                    <td style="text-align: right; font-weight: 600;">₹{{ number_format($order->total_amount + ($order->discount_amount ?? 0), 2) }}</td>
                </tr>
                @if($order->discount_amount > 0)
                    <tr style="color: #15803d;">
                        <td>Discount ({{ $order->coupon_code }}):</td>
                        <td style="text-align: right; font-weight: 600;">- ₹{{ number_format($order->discount_amount, 2) }}</td>
                    </tr>
                @endif
                <tr>
                    <td>CGST (9%):</td>
                    <td style="text-align: right;">Included</td>
                </tr>
                <tr>
                    <td>SGST (9%):</td>
                    <td style="text-align: right;">Included</td>
                </tr>
                <tr>
                    <td>Shipping Charges:</td>
                    <td style="text-align: right; color: #15803d; font-weight: 600;">FREE</td>
                </tr>
                <tr class="grand-total-row">
                    <td>Grand Total:</td>
                    <td style="text-align: right;">₹{{ number_format($order->total_amount, 2) }}</td>
                </tr>
            </table>
        </div>

        <!-- Footer -->
        <div class="footer-note">
            <div>
                <strong>Terms & Conditions:</strong><br>
                1. All products are 100% natural and quality verified before dispatch.<br>
                2. Goods once sold are covered under Divine Drops Return Policy within 7 days.
            </div>
            <div style="text-align: right;">
                <div style="font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #186297; margin-bottom: 20px;">Divine Drops</div>
                <strong>Authorized Signatory</strong>
            </div>
        </div>
    </div>

</body>
</html>
