<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Booking Confirmation - {{ $globalSiteName }}</title>
    <style>
        /* PDF-Compatible CSS */
        @page { 
            size: A4; 
            margin: 0; 
        }
        
        body {
            margin: 0; 
            padding: 15mm;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 10pt;
            line-height: 1.3;
            color: #1e293b;
            background: #ffffff;
        }
        
        .page-container {
            width: 180mm;
            margin: 0 auto;
            position: relative;
        }
        
        .brand-header {
            border-bottom: 3px solid #ef6c00;
            padding-bottom: 10px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .logo-group {
            float: left;
            width: 60%;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: #0b2545;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 40px;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .company-title {
            font-size: 16pt;
            font-weight: bold;
            color: #0b2545;
            text-transform: uppercase;
            display: inline-block;
            vertical-align: middle;
        }
        
        .company-tag {
            font-size: 8pt;
            color: #64748b;
            font-weight: 600;
            display: block;
        }
        
        .header-right {
            float: right;
            text-align: right;
            width: 35%;
        }
        
        .doc-label {
            font-size: 8pt;
            color: #94a3b8;
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .doc-id {
            font-size: 16pt;
            font-weight: bold;
            color: #0b2545;
            font-family: 'Courier New', monospace;
        }
        
        .status-bar {
            background: #f1f5f9;
            border-left: 4px solid #10b981;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .status-text {
            font-size: 14pt;
            font-weight: bold;
            color: #10b981;
            text-transform: uppercase;
            float: left;
        }
        
        .status-meta {
            font-size: 9pt;
            color: #64748b;
            font-weight: 600;
            float: right;
            text-align: right;
        }
        
        .transport-strip {
            background: #0b2545;
            color: white;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .transport-table {
            width: 100%;
            color: white;
        }
        
        .ts-cell {
            padding: 12px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,0.2);
        }
        
        .ts-cell:last-child {
            border-right: none;
        }
        
        .ts-label {
            font-size: 8pt;
            opacity: 0.7;
            text-transform: uppercase;
            font-weight: bold;
            display: block;
        }
        
        .ts-val {
            font-size: 12pt;
            font-weight: bold;
            margin-top: 5px;
        }
        
        .ts-val.highlight {
            color: #ef6c00;
        }
        
        .info-grid {
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .party-box {
            width: 48%;
            float: left;
            padding: 12px;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        
        .party-box:first-child {
            margin-right: 4%;
        }
        
        .label {
            font-size: 8pt;
            color: #64748b;
            text-transform: uppercase;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        
        .value {
            font-size: 10pt;
            font-weight: 500;
            color: #1e293b;
        }
        
        .value.bold {
            font-weight: bold;
            color: #0b2545;
        }
        
        .section-title {
            font-size: 12pt;
            font-weight: bold;
            text-transform: uppercase;
            color: #0b2545;
            border-bottom: 2px solid #cbd5e1;
            padding-bottom: 6px;
            margin-bottom: 10px;
        }
        
        .manifest-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        
        .manifest-table th {
            background: #e2e8f0;
            color: #0b2545;
            text-align: left;
            padding: 8px;
            font-size: 8pt;
            text-transform: uppercase;
            font-weight: bold;
            border-bottom: 2px solid #0b2545;
        }
        
        .manifest-table td {
            padding: 8px;
            border-bottom: 1px solid #cbd5e1;
            font-size: 9pt;
        }
        
        .text-right {
            text-align: right;
        }
        
        .mono {
            font-family: 'Courier New', monospace;
        }
        
        .instruction-box {
            background: #fff7ed;
            border: 1px solid #ffedd5;
            border-left: 4px solid #ef6c00;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
        }
        
        .inst-title {
            font-size: 10pt;
            font-weight: bold;
            color: #ef6c00;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        
        .inst-text {
            font-size: 9pt;
            color: #7c2d12;
            line-height: 1.4;
        }
        
        .signature-area {
            margin-top: 20px;
            overflow: hidden;
        }
        
        .signature-box {
            width: 45%;
            border-top: 1px solid #ccc;
            padding-top: 5px;
            font-size: 8pt;
            text-align: center;
            color: #999;
        }
        
        .brand-footer {
            background: #0b2545;
            color: white;
            padding: 10px;
            margin-top: 20px;
            font-size: 8pt;
        }
        
        .footer-table {
            width: 100%;
            color: white;
        }
        
        .footer-cell {
            padding: 5px;
            vertical-align: top;
        }
        
        .footer-link {
            color: #ef6c00;
            text-decoration: none;
            font-weight: bold;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <!-- Header -->
        <div class="brand-header">
            <div class="logo-group">
                <div class="logo-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M22 2L11 13"/><path d="M22 2L15 22L11 13L2 9L22 2Z"/>
                    </svg>
                </div>
                <div style="display: inline-block; vertical-align: middle;">
                    <div class="company-title">{{ $globalSiteName }}</div>
                    <div class="company-tag">Shipping & Logistics</div>
                </div>
            </div>
            <div class="header-right">
                <div class="doc-label">Booking Ref</div>
                <div class="doc-id">{{ $shipment->tracking_number }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Status Bar -->
        <div class="status-bar">
            <div class="status-text">{{ $shipment->status }}</div>
            <div class="status-meta">
                Booking Date: <span class="mono" style="color:#000;">{{ $shipment->created_at->format('Y-m-d') }}</span>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Transport Strip -->
        <div class="transport-strip">
            <table class="transport-table">
                <tr>
                    <td class="ts-cell" width="25%">
                        <span class="ts-label">Transport Mode</span>
                        <div class="ts-val">{{ $shipment->shipping_mode }}</div>
                    </td>
                    <td class="ts-cell" width="25%">
                        <span class="ts-label">Origin (POL)</span>
                        <div class="ts-val highlight">{{ $shipment->origin_city }}</div>
                    </td>
                    <td class="ts-cell" width="25%">
                        <span class="ts-label">Destination (POD)</span>
                        <div class="ts-val highlight">{{ $shipment->destination_city }}</div>
                    </td>
                    <td class="ts-cell" width="25%">
                        <span class="ts-label">Carrier / Voyage</span>
                        <div class="ts-val">{{ $globalSiteName }}</div>
                        <div style="font-size:8pt; opacity:0.8;">{{ $shipment->shipping_mode }}</div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Parties -->
        <div class="info-grid">
            <div class="party-box">
                <div class="label">Shipper / Exporter</div>
                <div class="value bold" style="font-size: 12pt;">{{ $shipment->sender_name }}</div>
                <div class="value">{{ $shipment->sender_address }}</div>
                <div class="label" style="margin-top: 8px;">Contact</div>
                <div class="value">{{ $shipment->sender_phone_number }} | {{ $shipment->sender_email }}</div>
            </div>
            
            <div class="party-box">
                <div class="label">Consignee / Importer</div>
                <div class="value bold" style="font-size: 12pt;">{{ $shipment->receiver_name }}</div>
                <div class="value">{{ $shipment->receiver_address }}</div>
                <div class="label" style="margin-top: 8px;">Contact</div>
                <div class="value">{{ $shipment->receiver_phone_number }} | {{ $shipment->receiver_email }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Schedule -->
        <div class="info-grid">
            <div class="party-box">
                <div class="label">Estimated Departure</div>
                <div class="value bold mono" style="font-size: 14pt;">{{ $shipment->departure_date }}</div>
            </div>
            
            <div class="party-box">
                <div class="label">Cargo Cut-off Date/Time</div>
                <div class="value bold mono" style="font-size: 14pt; color: #ef6c00;">{{ $shipment->pickup_date }} {{ $shipment->pickup_time }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Cargo Manifest -->
        <div class="section-title">Cargo Manifest</div>
        <table class="manifest-table">
            <thead>
                <tr>
                    <th width="15%">Quantity</th>
                    <th width="45%">Commodity / Description</th>
                    <th width="20%" class="text-right">Gross Weight</th>
                    <th width="20%" class="text-right">Volume</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="mono bold">{{ $shipment->quantity }} Units</td>
                    <td>
                        <strong>{{ $shipment->shipment_name }}</strong><br>
                        <span style="font-size:8pt; color:#666;">{{ $shipment->comments }}</span>
                    </td>
                    <td class="text-right mono">{{ $shipment->weight }} KG</td>
                    <td class="text-right mono">-</td>
                </tr>
                <tr style="background: #e2e8f0;">
                    <td><strong>TOTAL</strong></td>
                    <td><strong>{{ $shipment->quantity }} Packages</strong></td>
                    <td class="text-right mono bold">{{ $shipment->weight }} KG</td>
                    <td class="text-right mono bold">1.2 CBM</td>
                </tr>
            </tbody>
        </table>

        <!-- Instructions -->
        <div class="instruction-box">
            <div class="inst-title">Delivery Instructions & Notes</div>
            <div class="inst-text">
                1. Please quote Booking Reference <strong>{{ $shipment->tracking_number }}</strong> on all shipping documents and cargo labels.<br>
                2. Cargo must be delivered to the terminal before the cut-off time indicated above.<br>
                3. Hazardous materials (Dangerous Goods) must be declared 48 hours prior to delivery.<br>
                4. Please ensure proper export packaging to avoid damage during transit.<br>
                5. Current Location: {{ $shipment->current_location }}
            </div>
        </div>

        <!-- Signatures -->
        <div class="signature-area">
            <div class="signature-box" style="float: left;">
                Shipper Acceptance (Sign/Date)
            </div>
            <div class="signature-box" style="float: right;">
                {{ $globalSiteName }} Agent
            </div>
            <div class="clear"></div>
        </div>

        <!-- Footer -->
        <div class="brand-footer">
            <table class="footer-table">
                <tr>
                    <td class="footer-cell" width="40%">
                        <strong>{{ $globalSiteName }}</strong><br>
                        <span style="opacity:0.8">{{ $globalAddress }}</span>
                    </td>
                    <td class="footer-cell" width="30%" style="text-align:center;">
                        <a href="#" class="footer-link">{{ $globalDomain }}</a>
                    </td>
                    <td class="footer-cell" width="30%" style="text-align:right;">
                        <div>{{ $globalPhoneNumber }}</div>
                        <div style="opacity:0.8">{{ $globalEmail }}</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>