<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invoice #{{ $shipment->tracking_number }}</title>
    <style>
        @page {
            margin: 20px;
        }
        
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            font-size: 14px;
            line-height: 1.4;
            color: #333;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }

        .logo {
            max-height: 60px;
            margin-bottom: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .header h1 {
            margin: 0;
            color: #2563eb;
            font-size: 24px;
        }

        .invoice-info {
            margin-bottom: 30px;
            padding: 15px;
            background: #f9fafb;
            border-radius: 5px;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 16px;
            color: #1f2937;
            margin-bottom: 10px;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 5px;
            font-weight: bold;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #e5e7eb;
            padding: 12px;
            text-align: left;
            font-size: 12px;
        }

        th {
            background-color: #f9fafb;
            font-weight: bold;
            color: #1f2937;
        }

        .total {
            text-align: right;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #e5e7eb;
        }

        .total table {
            width: auto;
            margin-left: auto;
        }

        .total table td {
            border: none;
            padding: 5px 15px;
        }

        .barcode {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.barcode img {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.barcode p {
    margin: 10px 0;
    font-size: 14px;
    font-family: monospace;
    color: #374151;
}

        .footer {
            margin-top: 50px;
            text-align: center;
            color: #6b7280;
            font-size: 12px;
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
        }

        .info-block {
            float: left;
            width: 50%;
        }

        .status-tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-pending { background: #FEF3C7; color: #92400E; }
        .status-in_transit { background: #DBEAFE; color: #1E40AF; }
        .status-delivered { background: #D1FAE5; color: #065F46; }
    </style>
</head>
<body>
    <div class="header">
        @if($logo)
            <img src="data:image/png;base64,{{ $logo }}" alt="{{ Setting::get('site_name', config('app.name')) }}" class="logo">
        @endif
        <p>Shipping Invoice</p>
    </div>

    <div class="invoice-info clearfix">
        <div class="info-block">
            <strong>Invoice Date:</strong> {{ now()->format('M d, Y') }}<br>
            <strong>Tracking Number:</strong> {{ $shipment->tracking_number }}<br>
            <strong>Ship Mode:</strong> {{ ucfirst($shipment->ship_mode) }}<br>
            <strong>Carrier:</strong> {{ $shipment->carrier }}
        </div>
        <div class="info-block" style="text-align: right;">
            <strong>Status:</strong> 
            <span class="status-tag status-{{ $shipment->status }}">
                {{ ucfirst($shipment->status) }}
            </span><br>
            <strong>Payment Mode:</strong> {{ ucfirst($shipment->payment_mode) }}<br>
            <strong>Reference:</strong> {{ $shipment->carrier_ref }}
        </div>
    </div>

    <div class="section">
        <div class="section-title">Shipping Details</div>
        <table>
            <tr>
                <td width="50%" style="vertical-align: top;">
                    <strong style="color: #4B5563;">From:</strong><br>
                    {{ $shipment->sender_name }}<br>
                    {{ $shipment->sender_address }}<br>
                    <strong>Contact:</strong> {{ $shipment->sender_contact }}<br>
                    <strong>Email:</strong> {{ $shipment->sender_email }}
                </td>
                <td width="50%" style="vertical-align: top;">
                    <strong style="color: #4B5563;">To:</strong><br>
                    {{ $shipment->receiver_name }}<br>
                    {{ $shipment->receiver_address }}<br>
                    <strong>Contact:</strong> {{ $shipment->receiver_contact }}<br>
                    <strong>Email:</strong> {{ $shipment->receiver_email }}
                </td>
            </tr>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Package Details</div>
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Weight</th>
                    <th>Quantity</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ $shipment->pdesc }}</td>
                    <td>{{ $shipment->weight }}</td>
                    <td>{{ $shipment->quantity }}</td>
                    <td>{{ $shipment->total_f }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Shipment Timeline</div>
        <table>
            <thead>
                <tr>
                    <th>Event</th>
                    <th>Date</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dispatch Date</td>
                    <td>{{ $shipment->dispatch_date }}</td>
                    <td>{{ $shipment->dispatch_location }}</td>
                </tr>
                <tr>
                    <td>Expected Delivery</td>
                    <td>{{ $shipment->delivery_date }}</td>
                    <td>{{ $shipment->destination }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="total">
        <table>
            <tr>
                <td style="text-align: right;">
                    <strong>Total Freight:</strong>
                </td>
                <td style="width: 150px; text-align: right;">
                    {{ $shipment->total_f }}
                </td>
            </tr>
        </table>
    </div>

    <div class="barcode">
    <img src="data:image/png;base64,{{ $barcode }}" alt="Tracking Barcode">
    <p>{{ $shipment->tracking_number }}</p>
    </div>

    <div class="footer">
        <p>Thank you for choosing {{ Setting::get('site_name', config('app.name')) }}</p>
        @if(Setting::get('site_address'))
            <p>{{ Setting::get('site_address') }}</p>
        @endif
        <p>For any queries, please contact our support team</p>
    </div>
</body>
</html>