<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Airway Bill - {{ $shipment->tracking_number }}</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=Libre+Barcode+EAN13+Text&display=swap" rel="stylesheet">
    <style>
        body { font-family: Arial, sans-serif; color: #333; margin: 0; padding: 0; }
        .container { width: 100%; max-width: 700px; margin: auto; padding: 20px; border: 1px solid #ddd; }
        .header { text-align: center; margin-bottom: 20px; }
        .header img { width: 150px; margin-bottom: 10px; }
        .header h2 { margin: 5px 0; font-size: 24px; color: #1A73E8; }
        .section { margin-bottom: 20px; }
        .section h3 { font-size: 18px; background-color: #1A73E8; color: #fff; padding: 5px; margin: 0; }
        .details { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .details th, .details td { border: 1px solid #ddd; padding: 8px; }
        .details th { background-color: #f5f5f5; text-align: left; font-weight: bold; }
        .barcode { text-align: center; margin-top: 20px; }
        .barcode img { max-width: 100%; height: auto; }
        .footer { font-size: 12px; text-align: center; margin-top: 20px; color: #888; }
        .upc-barcode,
.ean-barcode {
  font-family: 'Libre Barcode EAN13 Text';
  font-size: 128px;
}
    </style>

</head>
<body>

<div class="container">

    <!-- Header with Logo and Tracking Number -->
    <div class="header">
        <img src="https://meridianshippingdelivery.com/assets/images/logoIcon/footer-logo.png" alt="Girl in a jacket">
        <h2>Airway Bill</h2>
        <div>
        {{-- Display the barcode --}}
        {!! DNS1D::getBarcodeHTML($shipment->tracking_number, 'C39', 2, 60) !!}
         </div>
        <p>Tracking Number: <strong>{{ $shipment->tracking_number }}</strong></p>
    </div>

    <!-- Sender Information -->
    <div class="section">
        <h3>Sender Information</h3>
        <table class="details">
            <tr><th>Name</th><td>{{ $shipment->sender_name }}</td></tr>
            <tr><th>Email</th><td>{{ $shipment->sender_email }}</td></tr>
            <tr><th>Phone Number</th><td>{{ $shipment->sender_phone_number }}</td></tr>
            <tr><th>Address</th><td>{{ $shipment->sender_address }}</td></tr>
        </table>
    </div>

    <!-- Receiver Information -->
    <div class="section">
        <h3>Receiver Information</h3>
        <table class="details">
            <tr><th>Name</th><td>{{ $shipment->receiver_name }}</td></tr>
            <tr><th>Email</th><td>{{ $shipment->receiver_email }}</td></tr>
            <tr><th>Phone Number</th><td>{{ $shipment->receiver_phone_number }}</td></tr>
            <tr><th>Address</th><td>{{ $shipment->receiver_address }}</td></tr>
        </table>
    </div>

    <!-- Shipment Details -->
    <div class="section">
        <h3>Shipment Details</h3>
        <table class="details">
            <tr><th>Shipment Name</th><td>{{ $shipment->shipment_name }}</td></tr>
            <tr><th>Weight</th><td>{{ $shipment->weight }} kg</td></tr>
            <tr><th>Quantity</th><td>{{ $shipment->quantity }}</td></tr>
            <tr><th>Shipping Mode</th><td>{{ $shipment->shipping_mode }}</td></tr>
            <tr><th>Current Location</th><td>{{ $shipment->current_location }}</td></tr>
            <tr><th>Status</th><td>{{ $shipment->status }}</td></tr>
        </table>
    </div>

    <!-- Route Information -->
    <div class="section">
        <h3>Route Information</h3>
        <table class="details">
            <tr><th>Origin</th><td>{{ $shipment->origin_city }}, {{ $shipment->origin_country }}</td></tr>
            <tr><th>Destination</th><td>{{ $shipment->destination_city }}, {{ $shipment->destination_country }}</td></tr>
            <tr><th>Departure Date & Time</th><td>{{ $shipment->departure_date }} {{ $shipment->departure_time }}</td></tr>
            <tr><th>Expected Delivery Date & Time</th><td>{{ $shipment->expected_delivery_date }} {{ $shipment->expected_delivery_time }}</td></tr>
            <tr><th>Delivery Address</th><td>{{ $shipment->delivery_address }}</td></tr>
            <tr><th>Pickup Date & Time</th><td>{{ $shipment->pickup_date }} {{ $shipment->pickup_time }}</td></tr>
        </table>
    </div>

    <!-- Comments -->
    <div class="section">
        <h3>Additional Comments</h3>
        <p>{{ $shipment->comments }}</p>
    </div>

    <!-- Footer -->
    <div class="footer">
        Thank you for shipping with us!
    </div>
</div>

</body>
</html>
