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

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

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

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

$goods = $booking->package_type ?? $booking->goods ?? '-';
$created = !empty($shipment->created) ? $shipment->created->format('d/m/Y') : date('d/m/Y');
?>

<!DOCTYPE html>
<html>
<head>
    <title><?= h($labelNo) ?></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;
        }

        .label-sheet {
            width: 760px;
            background: #fff;
            margin: auto;
            border: 2px solid #111827;
        }

        .top {
            display: grid;
            grid-template-columns: 180px 1fr;
            border-bottom: 2px solid #111827;
        }

        .logo {
            padding: 14px;
            border-right: 2px solid #111827;
            font-size: 22px;
            font-weight: 800;
            color: #2458c9ff;
            line-height: 1.1;
        }

        .logo span {
            color: #c52222ff;
        }

        .title {
            padding: 14px;
            text-align: center;
        }

        .title h1 {
            margin: 0;
            font-size: 26px;
        }

        .tracking {
            padding: 14px;
            text-align: center;
            border-bottom: 2px solid #111827;
        }

        .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;
}

        .tracking-no {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 2px solid #111827;
        }

        .info-box {
            padding: 16px;
            min-height: 150px;
            border-right: 2px solid #111827;
            line-height: 1.55;
        }

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

        .goods {
            padding: 14px;
            border-bottom: 2px solid #111827;
        }

        .footer {
            padding: 14px;
            display: flex;
            justify-content: space-between;
        }

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

            .toolbar {
                display: none;
            }
        }
    </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="labelArea" class="label-sheet">

    <div class="top">
        <div class="logo">Impeccable<br><span>Courier</span></div>
        <div class="title">
            <h1>Barcode Label</h1>
            <p>Impeccable Courier Pvt. Ltd</p>
        </div>
    </div>

    <div class="tracking">
        <div class="fake-barcode">
    <?php for ($i = 0; $i < 34; $i++): ?>
        <span></span>
    <?php endfor; ?>
</div>

        <div class="tracking-no"><?= h($trackingNo) ?></div>
    </div>

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

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

    <div class="goods">
        <strong>Description of Goods:</strong> <?= h($goods) ?>
    </div>

    <div class="footer">
        <span>Print Date: <?= h(date('d/m/Y')) ?></span>
        <span>Created: <?= h($created) ?></span>
    </div>

</div>

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

</body>
</html>