<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Packing Slip #{{ $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;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #0f172a;
            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; }

        .slip-box {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 36px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            border: 2px solid #0f172a;
        }

        .slip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #0f172a;
            padding-bottom: 16px;
            margin-bottom: 20px;
        }

        .slip-title {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .shipping-label-card {
            border: 3px solid #186297;
            border-radius: 12px;
            padding: 20px;
            background: #f0f7fc;
            margin-bottom: 24px;
        }

        .label-badge {
            display: inline-block;
            background: #186297;
            color: white;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.5px;
            padding: 3px 10px;
            border-radius: 4px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .recipient-name {
            font-size: 22px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .recipient-address {
            font-size: 15px;
            line-height: 1.5;
            color: #1e293b;
            font-weight: 500;
        }

        .pincode-highlight {
            font-size: 20px;
            font-weight: 800;
            color: #186297;
        }

        .items-checklist {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 24px;
        }

        .items-checklist th {
            background: #0f172a;
            color: white;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
        }

        .items-checklist td {
            padding: 12px;
            border-bottom: 1px dashed #cbd5e1;
            font-size: 14px;
        }

        .verification-box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 16px;
            background: #f8fafc;
        }

        .verification-field {
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
            font-weight: 700;
        }

        .verification-line {
            height: 24px;
            border-bottom: 1px solid #94a3b8;
            margin-top: 8px;
        }

        @media print {
            body { background: white; padding: 0; }
            .action-bar { display: none; }
            .slip-box { box-shadow: none; border: 2px solid #000; padding: 20px; 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 Packing Slip</button>
    </div>

    <div class="slip-box">
        <!-- Header -->
        <div class="slip-header">
            <div>
                <div style="font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #186297;">Divine Drops</div>
                <div style="font-size: 11px; color: #64748b;">Fulfilled by Divine Drops Central Dispatch Warehouse</div>
            </div>
            <div style="text-align: right;">
                <div class="slip-title">PACKING SLIP</div>
                <div style="font-size: 14px; font-weight: 700; color: #186297;">Order #{{ $order->order_number }}</div>
                <div style="font-size: 11px; color: #64748b;">Date: {{ $order->created_at ? $order->created_at->format('d M, Y') : date('d M, Y') }}</div>
            </div>
        </div>

        <!-- Big Shipping Label Card -->
        <div class="shipping-label-card">
            <span class="label-badge">SHIP TO ADDRESS</span>
            <div class="recipient-name">{{ $order->customer_name }}</div>
            <div class="recipient-address">
                {{ $order->shipping_address }}<br>
                {{ $order->city }}, {{ $order->state }} — PIN: <span class="pincode-highlight">{{ $order->pincode }}</span><br>
                <strong>Mobile Phone:</strong> {{ $order->customer_phone }} | <strong>Email:</strong> {{ $order->customer_email }}
            </div>
            <div style="margin-top: 12px; font-size: 12px; font-weight: 700; color: #0f172a; background: white; display: inline-block; padding: 4px 12px; border-radius: 6px; border: 1px solid #cbd5e1;">
                Payment Type: {{ strtoupper($order->payment_status === 'pending' ? 'CASH ON DELIVERY (COD)' : 'PREPAID ONLINE') }}
            </div>
        </div>

        <!-- Package Items List Table -->
        <div style="font-size: 13px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; color: #0f172a;">
            Package Items List (Total: {{ $order->items->sum('quantity') }} Items)
        </div>
        <table class="items-checklist">
            <thead>
                <tr>
                    <th style="width: 50px; text-align: center;">S.No</th>
                    <th>Item Description</th>
                    <th style="width: 140px;">Size / Variant</th>
                    <th style="width: 80px; text-align: center;">Qty</th>
                </tr>
            </thead>
            <tbody>
                @foreach($order->items as $idx => $item)
                    <tr>
                        <td style="text-align: center; font-weight: 600;">{{ $idx + 1 }}</td>
                        <td>
                            <strong style="color: #0f172a;">{{ $item->product_name }}</strong>
                        </td>
                        <td><span style="background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-weight: 600;">{{ $item->size ?? 'Standard' }}</span></td>
                        <td style="text-align: center; font-size: 16px; font-weight: 800; color: #186297;">{{ $item->quantity }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        @if($order->notes)
            <div style="margin-bottom: 24px; padding: 12px; background: #fffbebfb; border: 1px solid #fef08a; border-radius: 8px; font-size: 13px;">
                <strong>⚠️ Customer Packing Note:</strong> "{{ $order->notes }}"
            </div>
        @endif

        <!-- Dispatch Verification -->
        <div class="verification-box">
            <div>
                <div class="verification-field">Picked & Verified By</div>
                <div class="verification-line"></div>
            </div>
            <div>
                <div class="verification-field">Packed & Sealed By</div>
                <div class="verification-line"></div>
            </div>
            <div>
                <div class="verification-field">Courier AWB / Tracking #</div>
                <div class="verification-line"></div>
            </div>
        </div>
    </div>

</body>
</html>
