<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Local Regulatory Compliance Form - {{ $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: 4px double #15803d;
            padding-bottom: 10px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .authority-group {
            float: left;
            width: 60%;
        }
        
        .seal-icon {
            width: 40px;
            height: 40px;
            background: #15803d;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 40px;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .authority-title {
            font-size: 16pt;
            font-weight: bold;
            color: #0b2545;
            text-transform: uppercase;
            display: inline-block;
            vertical-align: middle;
        }
        
        .authority-tag {
            font-size: 8pt;
            color: #64748b;
            font-weight: 600;
            display: block;
        }
        
        .header-right {
            float: right;
            text-align: right;
            width: 35%;
        }
        
        .doc-title {
            font-size: 14pt;
            font-weight: bold;
            color: #0b2545;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .doc-label {
            font-size: 8pt;
            color: #94a3b8;
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .doc-id {
            font-size: 12pt;
            font-weight: bold;
            color: #15803d;
            font-family: 'Courier New', monospace;
        }
        
        .section-box {
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            padding: 12px;
            background: #f8fafc;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        
        .section-title {
            font-size: 9pt;
            font-weight: bold;
            color: #0b2545;
            text-transform: uppercase;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid #cbd5e1;
        }
        
        .data-label {
            font-size: 8pt;
            color: #64748b;
            text-transform: uppercase;
            font-weight: 600;
            display: block;
            margin-top: 5px;
        }
        
        .data-value {
            font-size: 10pt;
            font-weight: 500;
            color: #1e293b;
        }
        
        .data-value.large {
            font-size: 12pt;
            font-weight: bold;
            color: #0b2545;
        }
        
        .data-value.accent {
            color: #15803d;
        }
        
        .data-value.mono {
            font-family: 'Courier New', monospace;
        }
        
        /* Fixed table styles to prevent get_cellmap() error */
        .checklist-table {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-collapse: collapse;
            margin-bottom: 15px;
            table-layout: fixed;
        }
        
        .checklist-table th {
            background: #0b2545;
            color: white;
            text-align: left;
            padding: 8px;
            font-size: 8pt;
            text-transform: uppercase;
            font-weight: bold;
            border: 1px solid #0b2545;
        }
        
        .checklist-table td {
            padding: 8px;
            border: 1px solid #cbd5e1;
            font-size: 9pt;
            vertical-align: top;
        }
        
        .status-badge {
            font-size: 8pt;
            font-weight: bold;
            padding: 3px 6px;
            border-radius: 3px;
            display: inline-block;
            text-align: center;
        }
        
        .status-passed {
            background-color: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
        }
        
        .status-exempt {
            background-color: #f3f4f6;
            color: #4b5563;
            border: 1px solid #d1d5db;
        }
        
        .fees-stamps-container {
            width: 100%;
            margin-bottom: 15px;
        }
        
        .fees-stamps-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .fees-cell {
            width: 65%;
            padding-right: 10px;
            vertical-align: top;
        }
        
        .stamp-cell {
            width: 35%;
            vertical-align: top;
        }
        
        .fee-table {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-collapse: collapse;
        }
        
        .fee-table th, .fee-table td {
            padding: 6px;
            border: 1px solid #cbd5e1;
            font-size: 9pt;
        }
        
        .fee-table th {
            background: #e0f2f1;
            text-align: left;
        }
        
        .fee-table .total-row th {
            background: #15803d;
            color: white;
            font-size: 10pt;
        }
        
        .stamp-block {
            border: 2px solid #0b2545;
            padding: 12px;
            text-align: center;
            border-radius: 6px;
            background: #fff;
        }
        
        .stamp-title {
            font-size: 10pt;
            font-weight: bold;
            color: #0b2545;
            margin-bottom: 8px;
        }
        
        .stamp-area {
            height: 80px;
            border: 2px dashed #94a3b8;
            display: table;
            width: 100%;
            margin-bottom: 8px;
        }
        
        .stamp-area-inner {
            display: table-cell;
            vertical-align: middle;
            font-size: 9pt;
            color: #94a3b8;
        }
        
        .signature-line {
            border-bottom: 1px solid #0b2545;
            padding-bottom: 4px;
            margin-top: 10px;
        }
        
        .brand-footer {
            background: #0b2545;
            color: white;
            padding: 10px;
            margin-top: 20px;
            font-size: 8pt;
        }
        
        .footer-table {
            width: 100%;
            color: white;
            border-collapse: collapse;
        }
        
        .footer-cell {
            padding: 5px;
            vertical-align: top;
        }
        
        .text-right {
            text-align: right;
        }
        
        .text-center {
            text-align: center;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <!-- Header -->
        <div class="brand-header">
            <div class="authority-group">
                <div class="seal-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"/>
                        <path d="M12 6v6l4 2"/>
                    </svg>
                </div>
                <div style="display: inline-block; vertical-align: middle;">
                    <div class="authority-title">{{ $shipment->destination_city }} Municipal Government</div>
                    <div class="authority-tag">Port Services and Quarantine Department</div>
                </div>
            </div>
            <div class="header-right">
                <div class="doc-title">Compliance Approval Form</div>
                <div class="doc-label">Municipal File No.</div>
                <div class="doc-id">{{ strtoupper(substr($shipment->destination_city, 0, 3)) }}-{{ $shipment->tracking_number }}</div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Consignment and Receiving Party -->
        <table style="width: 100%; margin-bottom: 15px; border-collapse: collapse;">
            <tr>
                <td width="50%" style="padding-right: 8px; vertical-align: top;">
                    <div class="section-box">
                        <div class="section-title">Consignment Details</div>
                        <div class="data-label">Master B/L or AWB No.</div>
                        <div class="data-value mono">{{ $shipment->tracking_number }}</div>
                        
                        <div class="data-label" style="margin-top: 8px;">Port of Entry</div>
                        <div class="data-value large">{{ strtoupper($shipment->destination_city) }}</div>
                        
                        <div class="data-label" style="margin-top: 8px;">Cargo Classification</div>
                        <div class="data-value">{{ $shipment->shipment_name }}</div>
                    </div>
                </td>
                <td width="50%" style="vertical-align: top;">
                    <div class="section-box">
                        <div class="section-title">Receiving Party</div>
                        <div class="data-value large">{{ $shipment->receiver_name }}</div>
                        <div class="data-value">{{ $shipment->receiver_address }}</div>
                        
                        <div class="data-label" style="margin-top: 8px;">Date of Application</div>
                        <div class="data-value mono">{{ $shipment->created_at->format('Y-m-d') }}</div>
                    </div>
                </td>
            </tr>
        </table>

        <!-- Regulatory Clearance Checklist -->
        <div class="section-title" style="border-bottom: 2px solid #15803d; color: #15803d; margin-bottom: 10px;">
            Local Regulatory Clearance Checklist
        </div>
        <table class="checklist-table">
            <thead>
                <tr>
                    <th width="40%">Regulatory Area</th>
                    <th width="15%" class="text-center">Required</th>
                    <th width="35%">Compliance Notes / Inspector</th>
                    <th width="10%" class="text-center">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Plant/Pest Quarantine Inspection (MPAQ)</td>
                    <td class="text-center">NO</td>
                    <td>Cargo is electronic, wooden packaging certified (ISPM-15).</td>
                    <td class="text-center"><span class="status-badge status-exempt">EXEMPT</span></td>
                </tr>
                <tr>
                    <td>Local Environmental Waste Handling Permit</td>
                    <td class="text-center">YES</td>
                    <td>Documentation verified by Inspector {{ $globalSiteName }}.</td>
                    <td class="text-center"><span class="status-badge status-passed">PASSED</span></td>
                </tr>
                <tr>
                    <td>Municipal Infrastructure Usage Fee</td>
                    <td class="text-center">YES</td>
                    <td>Fee amount confirmed and paid on {{ $shipment->created_at->format('Y-m-d') }}.</td>
                    <td class="text-center"><span class="status-badge status-passed">PAID</span></td>
                </tr>
                <tr>
                    <td>High-Value Cargo Security Escort Approval</td>
                    <td class="text-center">NO</td>
                    <td>Below threshold for mandatory escort. Weight: {{ $shipment->weight }} KG</td>
                    <td class="text-center"><span class="status-badge status-exempt">EXEMPT</span></td>
                </tr>
            </tbody>
        </table>

        <!-- Fees and Stamps -->
        <table class="fees-stamps-table">
            <tr>
                <td class="fees-cell">
                    <div class="section-title" style="color: #0b2545;">Municipal Fees Payable</div>
                    <table class="fee-table">
                        <thead>
                            <tr>
                                <th width="70%">Fee Description</th>
                                <th width="30%" class="text-right">Amount (USD)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Administrative Document Processing Fee</td>
                                <td class="text-right mono">25.00</td>
                            </tr>
                            <tr>
                                <td>Local Port Infrastructure Fee (0.5% of CIF Value)</td>
                                <td class="text-right mono">150.00</td>
                            </tr>
                            <tr>
                                <td>Environmental Inspection Fee</td>
                                <td class="text-right mono">30.00</td>
                            </tr>
                            <tr class="total-row">
                                <th>TOTAL FEES PAID</th>
                                <th class="text-right mono">205.00</th>
                            </tr>
                        </tbody>
                    </table>
                    <p style="font-size: 8pt; margin-top: 8px; color: #64748b;">
                        *Fees are non-refundable and cover local administration and infrastructure costs associated with cargo entry.
                    </p>
                </td>
                
                <td class="stamp-cell">
                    <div class="stamp-block">
                        <div class="stamp-title">OFFICIAL APPROVAL STAMP</div>
                        <div class="stamp-area">
                            <div class="stamp-area-inner">
                                {{ $globalSiteName }} APPROVED<br>
                                {{ $shipment->destination_city }}
                            </div>
                        </div>
                        <div class="data-label">Authorized Signature / Inspector ID</div>
                        <div class="signature-line">{{ $globalSiteName }} Compliance Officer</div>
                        <div class="data-label">Approval Date and Time</div>
                        <span class="data-value mono accent">{{ $shipment->created_at->format('Y-m-d H:i') }}</span>
                    </div>
                </td>
            </tr>
        </table>

        <!-- Footer -->
        <div class="brand-footer">
            <table class="footer-table">
                <tr>
                    <td class="footer-cell" width="70%">
                        <strong>{{ $shipment->destination_city }} Municipal Government</strong><br>
                        <span style="opacity:0.8">This document confirms local city/port clearance for cargo release.</span>
                    </td>
                    <td class="footer-cell" width="30%" style="text-align:right;">
                        <span>Local Compliance Contact: <span style="font-weight: bold; color: white;">{{ $globalPhoneNumber }}</span></span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>