<?php
$booking = $shipment->booking ?? null;

$trackingNo = $shipment->tracking_no ?? '-';
$invoiceNo = 'INV-' . str_pad((string)$shipment->id, 6, '0', STR_PAD_LEFT);

$senderName = $booking->shipper_name ?? '-';
$senderPhone = $booking->shipper_phone ?? '-';
$senderEmail = $booking->shipper_email ?? '-';
$senderAddress = $booking->shipper_address ?? '-';

$receiverName = $booking->receiver_name ?? '-';
$receiverPhone = $booking->receiver_phone ?? '-';
$receiverEmail = $booking->receiver_email ?? '-';
$receiverAddress = $booking->delivery_address ?? '-';

$goods = $booking->package_type ?? $booking->goods ?? '-';
$service = trim(($booking->delivery_speed ?? '') . ' ' . ($booking->mode_of_transport ?? ''));
$weight = $booking->weight ?? '-';
$pieces = $booking->quantity ?? $booking->pieces ?? 1;
$created = !empty($shipment->created) ? $shipment->created->format('d/m/Y') : date('d/m/Y');
?>

<!DOCTYPE html>
<html>
<head>
    <title><?= h($invoiceNo) ?></title>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

    <style>
        body {
            background: #f3f4f6;
            font-family: Arial, sans-serif;
            color: #111827;
            padding: 24px;
        }

        .toolbar {
            margin-bottom: 16px;
            display: flex;
            gap: 10px;
        }

        .btn {
            border: 1px solid #d1d5db;
            background: #fff;
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        }

        .btn-primary {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .invoice {
            width: 1100px;
            background: #fff;
            margin: auto;
            border: 2px solid #9ca3af;
        }

        .row {
            display: grid;
            grid-template-columns: 220px 1fr 310px;
            border-bottom: 2px solid #9ca3af;
        }

        .box {
            padding: 14px;
            border-right: 2px solid #9ca3af;
            min-height: 80px;
        }

        .box:last-child {
            border-right: none;
        }

        .logo {
            font-size: 26px;
            font-weight: 800;
            color: #2563eb;
            line-height: 1.1;
        }

        .logo span {
            color: #dc2626;
        }

        .company {
            text-align: center;
            padding-top: 10px;
        }

        .company h1 {
            margin: 0;
            font-size: 24px;
        }

        .company p {
            margin: 8px 0 0;
            font-size: 15px;
        }

        .web {
            text-align: right;
            font-size: 15px;
            line-height: 1.7;
        }

        .origin-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 2px solid #9ca3af;
        }

        .origin-box {
            padding: 14px;
            min-height: 105px;
            border-right: 2px solid #9ca3af;
        }

        .origin-box:last-child {
            border-right: none;
        }

        .label {
            font-weight: 800;
            font-size: 15px;
        }

        .barcode {
            text-align: center;
            margin-top: 14px;
        }

        .barcode-bars {
            font-family: "Libre Barcode 39", monospace;
            font-size: 48px;
            letter-spacing: 2px;
        }

        .fake-barcode {
    height: 42px;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    margin-top: 10px;
    margin-bottom: 3px;
}

.fake-barcode span {
    display: block;
    background: #000;
    height: 42px;
}

.fake-barcode span:nth-child(1),
.fake-barcode span:nth-child(5),
.fake-barcode span:nth-child(9),
.fake-barcode span:nth-child(14),
.fake-barcode span:nth-child(19),
.fake-barcode span:nth-child(24),
.fake-barcode span:nth-child(29) {
    width: 2px;
}

.fake-barcode span:nth-child(2),
.fake-barcode span:nth-child(6),
.fake-barcode span:nth-child(11),
.fake-barcode span:nth-child(16),
.fake-barcode span:nth-child(21),
.fake-barcode span:nth-child(27),
.fake-barcode span:nth-child(32) {
    width: 4px;
}

.fake-barcode span:nth-child(3),
.fake-barcode span:nth-child(7),
.fake-barcode span:nth-child(12),
.fake-barcode span:nth-child(17),
.fake-barcode span:nth-child(22),
.fake-barcode span:nth-child(28),
.fake-barcode span:nth-child(33) {
    width: 6px;
}

.fake-barcode span:nth-child(4),
.fake-barcode span:nth-child(8),
.fake-barcode span:nth-child(13),
.fake-barcode span:nth-child(18),
.fake-barcode span:nth-child(23),
.fake-barcode span:nth-child(30),
.fake-barcode span:nth-child(34) {
    width: 3px;
}

        .goods-row {
            padding: 12px 14px;
            border-bottom: 2px solid #9ca3af;
            min-height: 42px;
        }

        .details-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            border-bottom: 2px solid #9ca3af;
        }

        .details-box {
            padding: 14px;
            min-height: 160px;
            border-right: 2px solid #9ca3af;
            line-height: 1.55;
        }

        .details-box:last-child {
            border-right: none;
        }

        .footer-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .footer-box {
            padding: 14px;
            border-right: 2px solid #9ca3af;
        }

        .footer-box:last-child {
            border-right: none;
            text-align: right;
        }

        @media print {
            body {
                background: #fff;
                padding: 0;
            }

            .toolbar {
                display: none;
            }

            .invoice {
                width: 100%;
                border: 2px solid #000;
            }
        }
    </style>
</head>

<body>

<div class="toolbar">
    <button class="btn btn-primary" onclick="window.print()">Print</button>
    <button class="btn" onclick="downloadImage()">Download PNG</button>
</div>

<div id="invoiceArea" class="invoice">

    <div class="row">
        <div class="box">
            <div class="logo">Impeccable<br><span>Courier</span></div>
        </div>

        <div class="box company">
            <h1>Impeccable Courier</h1>
            <p>Impeccable Courier Pvt. Ltd</p>
            <p><strong>Invoice:</strong> <?= h($invoiceNo) ?></p>
        </div>

        <div class="box web">
            www.impeccablecourier.com.au<br>
            www.impeccablecourier.com.pk<br>
            Tracking: <?= h($trackingNo) ?>
        </div>
    </div>

    <div class="origin-row">
        <div class="origin-box">
            <div class="label">ORIGIN: [ AUS ]</div>
            <div class="barcode">
                <div class="fake-barcode">
    <?php for ($i = 0; $i < 34; $i++): ?>
        <span></span>
    <?php endfor; ?>
</div>
                <div><?= h($trackingNo) ?></div>
            </div>
        </div>

        <div class="origin-box">
            <div class="label">DESTINATION: [ AUS ]</div>
            <br>
            <?= h($receiverAddress) ?>
        </div>
    </div>

    <div class="goods-row">
        <strong>Description of Goods:</strong>
        <?= h($goods) ?> |
        Service: <?= h($service ?: '-') ?> |
        Weight: <?= h($weight) ?> kg |
        Pieces: <?= h($pieces) ?>
    </div>

    <div class="details-row">
        <div class="details-box">
            <strong>Sender:</strong><br>
            Name: <?= h($senderName) ?><br>
            Address: <?= h($senderAddress) ?><br>
            Phone: <?= h($senderPhone) ?><br>
            Email: <?= h($senderEmail) ?>
        </div>

        <div class="details-box">
            <strong>Receiver:</strong><br>
            Name: <?= h($receiverName) ?><br>
            Address: <?= h($receiverAddress) ?><br>
            Phone: <?= h($receiverPhone) ?><br>
            Email: <?= h($receiverEmail) ?>
        </div>
    </div>

    <div class="footer-row">
        <div class="footer-box">
            PFN Print Date: <?= h(date('m/d/Y')) ?>
        </div>

        <div class="footer-box">
            Order Creation Date: <?= h($created) ?>
        </div>
    </div>

</div>

<script>
function downloadImage() {
    html2canvas(document.getElementById('invoiceArea'), {
        scale: 2,
        backgroundColor: '#ffffff'
    }).then(canvas => {
        const link = document.createElement('a');
        link.download = '<?= h($invoiceNo) ?>.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });
}
</script>

</body>
</html>