<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Proforma Invoice - {{ $globalSiteName }}</title>
    <style>
        /* Reset and base styles for PDF compatibility */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Helvetica, Arial, sans-serif; 
            font-size: 10pt; 
            line-height: 1.3;
            color: #333;
            padding: 10mm;
        }
        
        .page {
            width: 190mm;
            min-height: 277mm;
            margin: 0 auto;
            position: relative;
        }
        
        /* Header Section */
        .header {
            border-bottom: 3px solid #ef6c00;
            padding-bottom: 15px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .logo-section {
            float: left;
            width: 60%;
        }
        
        .company-name {
            font-size: 20pt;
            font-weight: bold;
            color: #0b2545;
            text-transform: uppercase;
            margin-bottom: 2px;
        }
        
        .company-tagline {
            font-size: 9pt;
            color: #666;
            font-weight: 600;
        }
        
        .document-info {
            float: right;
            text-align: right;
            width: 35%;
        }
        
        .doc-label {
            font-size: 8pt;
            color: #666;
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .doc-number {
            font-size: 16pt;
            font-weight: bold;
            color: #0b2545;
            font-family: 'Courier New', monospace;
        }
        
        /* Parties Section */
        .parties-container {
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .party-box {
            width: 48%;
            float: left;
            background: #f8f9fa;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .party-box:first-child {
            margin-right: 4%;
        }
        
        .party-label {
            font-size: 8pt;
            color: #ef6c00;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .party-name {
            font-size: 12pt;
            font-weight: bold;
            color: #0b2545;
            margin-bottom: 5px;
        }
        
        .party-details {
            font-size: 9pt;
            margin-bottom: 3px;
        }
        
        /* Meta Information Strip */
        .meta-strip {
            background: #0b2545;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .meta-grid {
            display: table;
            width: 100%;
        }
        
        .meta-item {
            display: table-cell;
            text-align: center;
            padding: 0 10px;
            border-right: 1px solid rgba(255,255,255,0.3);
        }
        
        .meta-item:last-child {
            border-right: none;
        }
        
        .meta-label {
            font-size: 7pt;
            opacity: 0.8;
            text-transform: uppercase;
        }
        
        .meta-value {
            font-size: 10pt;
            font-weight: bold;
            margin-top: 3px;
            font-family: 'Courier New', monospace;
        }
        
        /* Items Table */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        
        .items-table th {
            background: #0b2545;
            color: white;
            padding: 8px;
            text-align: left;
            font-size: 8pt;
            text-transform: uppercase;
            border-bottom: 2px solid #ef6c00;
        }
        
        .items-table td {
            padding: 8px;
            border-bottom: 1px solid #ddd;
            font-size: 9pt;
        }
        
        .items-table tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .mono { font-family: 'Courier New', monospace; }
        .bold { font-weight: bold; }
        
        /* Totals Section */
        .totals-section {
            margin-bottom: 20px;
            text-align: right;
        }
        
        .totals-box {
            width: 40%;
            display: inline-block;
        }
        
        .total-row {
            padding: 5px 0;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
        }
        
        .total-label {
            float: left;
            font-size: 9pt;
            font-weight: bold;
            color: #666;
            text-transform: uppercase;
        }
        
        .total-amount {
            float: right;
            font-size: 10pt;
            font-weight: bold;
        }
        
        .grand-total {
            border-top: 2px solid #0b2545;
            margin-top: 8px;
            padding-top: 8px;
            font-size: 14pt;
            color: #ef6c00;
        }
        
        /* Bottom Section */
        .bottom-section {
            margin-top: 20px;
            overflow: hidden;
        }
        
        .bank-details {
            float: left;
            width: 55%;
            background: #f8f9fa;
            padding: 12px;
            border-left: 3px solid #ddd;
            font-size: 9pt;
        }
        
        .signature-area {
            float: right;
            width: 40%;
            text-align: center;
        }
        
        .signature-line {
            border-bottom: 1px solid #0b2545;
            height: 40px;
            margin-bottom: 8px;
        }
        
        /* Footer */
        .footer {
            background: #0b2545;
            color: white;
            padding: 12px;
            margin-top: 25px;
            font-size: 8pt;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        
        .footer-grid {
            display: table;
            width: 100%;
        }
        
        .footer-col {
            display: table-cell;
            vertical-align: top;
        }
        
        .footer-col:last-child {
            text-align: right;
        }
        
        .footer-link {
            color: #ef6c00;
            font-weight: bold;
            text-decoration: none;
        }
        
        /* Disclaimer */
        .disclaimer {
            font-size: 8pt;
            color: #666;
            text-align: center;
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid #ddd;
        }
        
        .clear { clear: both; }
    </style>
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="header">
            <div class="logo-section">
                <div class="company-name">{{ $globalSiteName }}</div>
                <div class="company-tagline">Shipping & Logistics</div>
            </div>
            <div class="document-info">
                <div class="doc-label">Proforma Invoice No.</div>
                <div class="doc-number">PI-{{ $shipment->tracking_number }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Sender & Receiver -->
        <div class="parties-container">
            <div class="party-box">
                <div class="party-label">Exporter / Shipper</div>
                <div class="party-name">{{ $shipment->sender_name }}</div>
                <div class="party-details">{{ $shipment->sender_address }}</div>
                <div class="party-details">
                    <strong>Tax ID/EORI:</strong> 
                    <span class="mono">{{ $shipment->sender_phone_number }}</span>
                </div>
                <div class="party-details">
                    <strong>Contact:</strong> {{ $shipment->sender_name }}
                </div>
            </div>
            
            <div class="party-box">
                <div class="party-label">Consignee / Buyer</div>
                <div class="party-name">{{ $shipment->receiver_name }}</div>
                <div class="party-details">{{ $shipment->receiver_address }}</div>
                <div class="party-details">
                    <strong>Tax ID/EORI:</strong> 
                    <span class="mono">{{ $shipment->receiver_phone_number }}</span>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Meta Information -->
        <div class="meta-strip">
            <div class="meta-grid">
                <div class="meta-item">
                    <div class="meta-label">Date of Issue</div>
                    <div class="meta-value">{{ $shipment->created_at->format('Y-m-d') }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Transport Reference</div>
                    <div class="meta-value">{{ $shipment->tracking_number }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Incoterm</div>
                    <div class="meta-value">DAP</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Currency</div>
                    <div class="meta-value">USD</div>
                </div>
            </div>
        </div>

        <!-- Items Table -->
        <table class="items-table">
            <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="40%">Description of Goods</th>
                    <th width="15%">HS Code</th>
                    <th width="10%">Origin</th>
                    <th width="10%" class="text-right">Qty</th>
                    <th width="10%" class="text-right">Unit Price</th>
                    <th width="10%" class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="mono text-center">1</td>
                    <td>
                        <strong>{{ $shipment->shipment_name }}</strong><br>
                        <span style="color: #666; font-size: 8pt;">{{ $shipment->comments }}</span>
                    </td>
                    <td class="mono">8471.50</td>
                    <td>{{ strtoupper($shipment->origin_country) }}</td>
                    <td class="mono text-right">{{ $shipment->quantity }} Units</td>
                    <td class="mono text-right">500.00</td>
                    <td class="mono text-right bold">12,500.00</td>
                </tr>
                <tr>
                    <td colspan="6" style="background: #f1f5f9; color: #0b2545; font-weight: bold;">
                        SHIPPING & HANDLING
                    </td>
                    <td class="mono text-right" style="background: #f1f5f9; color: #ef6c00; font-weight: bold;">
                        500.00
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Totals -->
       <!-- Totals -->
<div class="totals-section">
    <table class="totals-table" style="width: 40%; margin-left: auto; border-collapse: collapse;">
        <tr class="total-row">
            <td class="total-label" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 9pt; font-weight: bold; color: #666; text-transform: uppercase;">Subtotal (FOB)</td>
            <td class="total-amount" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 10pt; font-weight: bold; text-align: right;">12,500.00</td>
        </tr>
        <tr class="total-row">
            <td class="total-label" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 9pt; font-weight: bold; color: #666; text-transform: uppercase;">Freight & Insurance</td>
            <td class="total-amount" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 10pt; font-weight: bold; text-align: right;">450.00</td>
        </tr>
        <tr class="total-row">
            <td class="total-label" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 9pt; font-weight: bold; color: #666; text-transform: uppercase;">Other Charges</td>
            <td class="total-amount" style="padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 10pt; font-weight: bold; text-align: right;">50.00</td>
        </tr>
        <tr class="total-row grand-total">
            <td class="total-label" style="padding: 10px 0 0 0; border-top: 2px solid #0b2545; font-size: 9pt; font-weight: bold; color: #0b2545; text-transform: uppercase;">Total Amount Due</td>
            <td class="total-amount" style="padding: 10px 0 0 0; border-top: 2px solid #0b2545; font-size: 14pt; font-weight: bold; color: #ef6c00; text-align: right;">USD 13,000.00</td>
        </tr>
    </table>
</div>
        <div class="clear"></div>

        <!-- Bottom Section -->
        <div class="bottom-section">
            <div class="bank-details">
                <strong style="color: #0b2545; text-transform: uppercase;">Bank Wire Instructions</strong><br><br>
                <strong>Bank Name:</strong> {{ $globalSiteName }} Financial Services<br>
                <strong>Account Name:</strong> {{ $shipment->sender_name }}<br>
                <strong>SWIFT/BIC:</strong> <span class="mono bold">{{ strtoupper(substr($globalSiteName, 0, 4)) }}US33XXX</span><br>
                <strong>IBAN/Account:</strong> <span class="mono bold">{{ $shipment->tracking_number }}</span>
            </div>
            
            <div class="signature-area">
                <div class="signature-line"></div>
                <div style="font-size: 8pt; color: #666; margin-bottom: 5px;">Authorized Signature</div>
                <div style="font-size: 10pt; font-weight: bold; margin-bottom: 3px;">{{ $shipment->sender_name }}</div>
                <div style="font-size: 8pt; color: #666;">Date: {{ $shipment->created_at->format('Y-m-d') }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Disclaimer -->
        <div class="disclaimer">
            This document is a Proforma Invoice used for customs and banking purposes only. It is not a tax invoice.<br>
            Country of Origin: {{ strtoupper($shipment->origin_country) }} | 
            Total Net Weight: {{ $shipment->weight }} KG | 
            Shipping Mode: {{ $shipment->shipping_mode }}
        </div>

        <!-- Footer -->
        <div class="footer">
            <div class="footer-grid">
                <div class="footer-col">
                    <strong>{{ $globalSiteName }}</strong><br>
                    <span style="opacity: 0.8;">{{ $globalAddress }}</span>
                </div>
                <div class="footer-col text-center">
                    <a href="#" class="footer-link">{{ $globalDomain }}</a>
                </div>
                <div class="footer-col">
                    <div>{{ $globalPhoneNumber }}</div>
                    <div style="opacity: 0.8;">{{ $globalEmail }}</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>