<?php
$this->assign('title', 'Shipment Details');

$booking = $shipment->booking ?? null;
$status = $shipment->status ?? 'Approved';

function badgeClass($value) {
    return match ($value) {
        'Delivered', 'Paid', 'Arrived' => 'green',
        'In Transit', 'In Progress', 'Out for Delivery' => 'blue',
        'Delayed', 'Normal', 'Pending', 'Approved' => 'yellow',
        'Cancelled', 'Returned', 'Rejected' => 'red',
        default => 'gray',
    };
}

function fmtDate($date, $withTime = false) {
    if (empty($date)) return '-';
    if (is_object($date) && method_exists($date, 'format')) {
        return $date->format($withTime ? 'd M Y, h:i A' : 'd M Y');
    }
    return h((string)$date);
}

$trackingNo = $shipment->tracking_no ?? '-';
$bookingRef = $booking->booking_reference ?? '-';

$serviceType = $booking->mode_of_transport ?? $booking->delivery_speed ?? '-';
$priority = $booking->priority ?? $booking->service_priority ?? 'Normal';

$parcelType = $booking->package_type ?? '-';
$weight = $booking->weight ?? $booking->parcel_weight ?? '-';
$pieces = $booking->quantity ?? $booking->pieces ?? $booking->number_of_pieces ?? 1;

$length = $booking->length ?? null;
$width = $booking->width ?? null;
$height = $booking->height ?? null;

$dimensions = (!empty($length) && !empty($width) && !empty($height))
    ? $length . 'cm x ' . $width . 'cm x ' . $height . 'cm'
    : '-';

$declaredValue = $booking->declared_value ?? $booking->goods_value ?? '-';
$description = $booking->goods_description ?? $booking->description ?? $booking->parcel_description ?? $booking->courier_notes ?? '-';

$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 ?? '-';

$pickupDate = $shipment->pickup_date ?? $booking->pickup_date ?? null;
$expectedDate = $shipment->expected_arrived ?? $booking->delivery_deadline ?? null;
$airline = $shipment->airline ?? $shipment->carrier ?? $booking->assigned_courier ?? '-';
?>

<style>
.shipment-page {
    padding: 8px 4px 40px;
    color: #334155;
    font-weight: 400;
}

.shipment-page * {
    font-weight: 400;
}

.shipment-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.shipment-heading h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: #111827;
}

.back-btn,
.action-btn,
.outline-btn,
.download-btn {
    font-weight: 500;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #d9e1ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    text-decoration: none;
    font-size: 0.88rem;
}

.top-actions {
    display: flex;
    gap: 14px;
    align-items: center;
}

.action-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid #d9e1ef;
    background: #fff;
    color: #334155;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.action-btn.primary {
    background: #235fe1ff;
    color: #fff;
    border-color: #235fe1ff;
}

.detail-card {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.summary-card {
    padding: 22px 26px;
    margin-bottom: 18px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}

.info-block {
    margin-bottom: 18px;
}

.info-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.info-value {
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 500;
}

.link-value {
    color: #2563eb;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.copy-icon {
    color: #64748b;
    margin-left: 8px;
    font-size: 0.86rem;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
}

.badge-green { background: #dcfce7; color: #15803d; }
.badge-blue { background: #dbeafe; color: #2350b0ff; }
.badge-yellow { background: #fef3c7; color: #d97706; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-gray { background: #f1f5f9; color: #64748b; }

.content-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.25fr;
    gap: 18px;
}

.right-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.card-section {
    padding: 24px 26px;
}

.card-title {
    margin: 0 0 24px;
    color: #2563eb;
    font-size: 1.06rem;
    font-weight: 600;
}

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    bottom: 40px;
    width: 3px;
    background: #22c55e;
}

.timeline-item {
    position: relative;
    margin-bottom: 27px;
}

.timeline-dot {
    position: absolute;
    left: -40px;
    top: 0;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d1fae5;
}

.timeline-dot.current {
    background: #2563eb;
    box-shadow: 0 0 0 5px #dbeafe;
}

.timeline-dot.pending {
    background: #cbd5e1;
    box-shadow: none;
}

.timeline-title {
    color: #111827;
    font-weight: 600;
    font-size: 0.95rem;
}

.timeline-date {
    color: #64748b;
    font-size: 0.84rem;
    margin-top: 3px;
}

.timeline-desc {
    color: #475569;
    font-size: 0.86rem;
    margin-top: 3px;
    font-weight: 400;
}

.outline-btn {
    border: 1px solid #9bbcff;
    color: #2563eb;
    background: #fff;
    border-radius: 7px;
    padding: 9px 20px;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
}

.detail-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.person-row {
    display: grid;
    grid-template-columns: 24px 88px 1fr;
    gap: 12px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.person-row i {
    color: #2563eb;
    font-size: 1rem;
}

.person-label {
    color: #64748b;
    font-weight: 500;
    font-size: 0.86rem;
}

.person-value {
    color: #1f2937;
    font-weight: 500;
    line-height: 1.5;
}

.bottom-grid {
    display: grid;
    grid-template-columns: 0.8fr 0.72fr 0.72fr;
    gap: 18px;
    margin-top: 18px;
}

.simple-row {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 20px;
    margin-bottom: 22px;
}

.doc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    gap: 15px;
}

.doc-name {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-weight: 500;
    font-size: 0.9rem;
}

.download-btn {
    border: 1px solid #d9e1ef;
    color: #2563eb;
    background: #fff;
    border-radius: 6px;
    padding: 6px 13px;
    text-decoration: none;
    font-size: 0.82rem;
}

.full-width-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 1200px) {
    .summary-grid,
    .content-grid,
    .right-grid,
    .bottom-grid,
    .detail-grid-3 {
        grid-template-columns: 1fr;
    }

    .shipment-topbar {
        flex-direction: column;
    }
}
</style>

<div class="shipment-page">

    <div class="shipment-topbar">
        <div class="shipment-heading">
            <h1>Shipment Details</h1>

            <a class="back-btn" href="<?= $this->Url->build(['action' => 'index']) ?>">
                <i class="bi bi-arrow-left"></i>
                Back to Shipments
            </a>
        </div>

        <div class="top-actions">
            <a class="action-btn" href="<?= $this->Url->build(['action' => 'edit', $shipment->id]) ?>">
                <i class="bi bi-pencil-fill"></i>
                Edit Shipment
            </a>

            <a class="action-btn primary" target="_blank" href="<?= $this->Url->build(['action' => 'invoice', $shipment->id]) ?>">
    <i class="bi bi-file-earmark-text"></i>
    Print Invoice
</a>

            <a class="action-btn" href="#">
                More Actions
                <i class="bi bi-three-dots-vertical"></i>
            </a>
        </div>
    </div>

    <div class="detail-card summary-card">
        <div class="summary-grid">

            <div>
                <div class="info-block">
                    <div class="info-label">Shipment ID</div>
                    <div class="info-value">
                        <a class="link-value" href="#">SHP-<?= str_pad((string)$shipment->id, 5, '0', STR_PAD_LEFT) ?></a>
                        <i class="bi bi-copy copy-icon"></i>
                    </div>
                </div>

                <div class="info-block">
                    <div class="info-label">Booking ID</div>
                    <div class="info-value">
                        <a class="link-value" href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'view', $booking->id ?? 0]) ?>">
                            <?= h($bookingRef) ?>
                        </a>
                    </div>
                </div>

                <div class="info-block">
                    <div class="info-label">Service Type</div>
                    <span class="badge-soft badge-blue"><?= h($serviceType) ?></span>
                </div>
            </div>

            <div>
                <div class="info-block">
                    <div class="info-label">Current Status</div>
                    <span class="badge-soft badge-<?= badgeClass($status) ?>">
                        <i class="bi bi-truck"></i>
                        <?= h($status) ?>
                    </span>
                </div>

                <div class="info-block">
                    <div class="info-label">Priority</div>
                    <span class="badge-soft badge-yellow"><?= h($priority) ?></span>
                </div>

                <div class="info-block">
                    <div class="info-label">Payment Status</div>
                    <span class="badge-soft badge-green">Paid</span>
                </div>
            </div>

            <div>
                <div class="info-block">
                    <div class="info-label">Booking Date</div>
                    <div class="info-value"><?= fmtDate($booking->created ?? null, true) ?></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Pickup Date</div>
                    <div class="info-value"><?= fmtDate($pickupDate, true) ?></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Expected Delivery</div>
                    <div class="info-value"><?= fmtDate($expectedDate) ?></div>
                </div>
            </div>

            <div>
                <div class="info-block">
                    <div class="info-label">Tracking Number</div>
                    <div class="info-value">
                        <?= h($trackingNo) ?>
                        <i class="bi bi-copy copy-icon"></i>
                    </div>
                </div>

                <div class="info-block">
                    <div class="info-label">Assigned Airline</div>
                    <div class="info-value"><?= h($airline) ?></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Created By</div>
                    <div class="info-value">Admin User</div>
                </div>
            </div>

        </div>
    </div>

    <div class="content-grid">

        <div class="detail-card card-section">
            <h2 class="card-title">Shipment Timeline</h2>

            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="timeline-title">Booking Received</div>
                    <div class="timeline-date"><?= fmtDate($booking->created ?? null, true) ?></div>
                    <div class="timeline-desc">Shipment booking has been received.</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="timeline-title">Booking Approved</div>
                    <div class="timeline-date"><?= fmtDate($shipment->created ?? null, true) ?></div>
                    <div class="timeline-desc">Booking has been approved by admin.</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="timeline-title">Picked Up</div>
                    <div class="timeline-date"><?= fmtDate($pickupDate, true) ?></div>
                    <div class="timeline-desc">Shipment has been picked up.</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot current"><i class="bi bi-truck"></i></div>
                    <div class="timeline-title" style="color:#2563eb;"><?= h($status) ?></div>
                    <div class="timeline-date"><?= fmtDate($shipment->last_api_sync ?? $shipment->modified ?? null, true) ?></div>
                    <div class="timeline-desc"><?= h($shipment->shipment_event ?? 'Shipment is on the way to destination.') ?></div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot pending"></div>
                    <div class="timeline-title">Delivered</div>
                    <div class="timeline-date">-</div>
                    <div class="timeline-desc">Shipment not yet delivered.</div>
                </div>
            </div>

            <a class="outline-btn" href="<?= $this->Url->build(['action' => 'trackingHistory', $shipment->id]) ?>">
    View Full Tracking History
</a>
        </div>

        <div>
            <div class="detail-card card-section">
                <h2 class="card-title">Parcel Details</h2>

                <div class="detail-grid-3">
                    <div>
                        <div class="info-label">Parcel Type</div>
                        <div class="info-value"><?= h($parcelType) ?></div>
                    </div>

                    <div>
                        <div class="info-label">Weight</div>
                        <div class="info-value"><?= $weight !== '-' ? h($weight) . ' kg' : '-' ?></div>
                    </div>

                    <div>
                        <div class="info-label">No. of Pieces</div>
                        <div class="info-value"><?= h($pieces) ?></div>
                    </div>
                </div>

                <div class="detail-grid-3" style="border-top:1px solid #e5eaf3; margin-top:24px; padding-top:24px;">
                    <div>
                        <div class="info-label">Dimensions</div>
                        <div class="info-value"><?= h($dimensions) ?></div>
                    </div>

                    <div>
                        <div class="info-label">Declared Value</div>
                        <div class="info-value"><?= $declaredValue !== '-' ? '$' . h($declaredValue) : '-' ?></div>
                    </div>

                    <div>
                        <div class="info-label">Description</div>
                        <div class="info-value"><?= h($description) ?></div>
                    </div>
                </div>
            </div>

            <div class="right-grid" style="margin-top:18px;">
                <div class="detail-card card-section">
                    <h2 class="card-title">Sender Details</h2>

                    <div class="person-row">
                        <i class="bi bi-person"></i>
                        <div class="person-label">Name</div>
                        <div class="person-value"><?= h($senderName) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-telephone"></i>
                        <div class="person-label">Phone</div>
                        <div class="person-value"><?= h($senderPhone) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-envelope"></i>
                        <div class="person-label">Email</div>
                        <div class="person-value"><?= h($senderEmail) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-geo-alt"></i>
                        <div class="person-label">Address</div>
                        <div class="person-value"><?= h($senderAddress) ?></div>
                    </div>
                </div>

                <div class="detail-card card-section">
                    <h2 class="card-title">Receiver Details</h2>

                    <div class="person-row">
                        <i class="bi bi-person"></i>
                        <div class="person-label">Name</div>
                        <div class="person-value"><?= h($receiverName) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-telephone"></i>
                        <div class="person-label">Phone</div>
                        <div class="person-value"><?= h($receiverPhone) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-envelope"></i>
                        <div class="person-label">Email</div>
                        <div class="person-value"><?= h($receiverEmail) ?></div>
                    </div>

                    <div class="person-row">
                        <i class="bi bi-geo-alt"></i>
                        <div class="person-label">Address</div>
                        <div class="person-value"><?= h($receiverAddress) ?></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="bottom-grid">

        <div class="detail-card card-section">
            <h2 class="card-title">Tracking Information</h2>

            <div class="simple-row">
                <div class="info-label">Tracking Number</div>
                <div class="info-value"><?= h($trackingNo) ?> <i class="bi bi-copy copy-icon"></i></div>
            </div>

            <div class="simple-row">
                <div class="info-label">Last Location</div>
                <div class="info-value"><?= h($shipment->last_location ?? 'N/A') ?></div>
            </div>

            <div class="simple-row">
                <div class="info-label">Latest Update</div>
                <div class="info-value"><?= fmtDate($shipment->last_api_sync ?? $shipment->modified ?? null, true) ?></div>
            </div>
        </div>

        <div class="detail-card card-section">
            <h2 class="card-title">Assigned Airline</h2>

            <div class="simple-row">
                <div class="info-label">Airline</div>
                <div class="info-value"><?= h($airline) ?></div>
            </div>

            <div class="simple-row">
                <div class="info-label">Flight Number</div>
                <div class="info-value"><?= h($shipment->flight_number ?? '-') ?></div>
            </div>

            <div class="simple-row">
                <div class="info-label">ETD (Est. Departure)</div>
                <div class="info-value"><?= fmtDate($shipment->estimated_departure ?? null, true) ?></div>
            </div>
        </div>

        <div class="detail-card card-section">
            <h2 class="card-title">Documents</h2>

            <div class="doc-row">
    <div class="doc-name"><i class="bi bi-file-earmark-text"></i> Invoice</div>
    <a class="download-btn" target="_blank" href="<?= $this->Url->build(['action' => 'invoice', $shipment->id]) ?>">Download</a>
</div>

<div class="doc-row">
    <div class="doc-name"><i class="bi bi-upc-scan"></i> Barcode Label</div>
    <a class="download-btn" target="_blank" href="<?= $this->Url->build(['action' => 'barcodeLabel', $shipment->id]) ?>">Download</a>
</div>

            <div class="doc-row">
                <div class="doc-name"><i class="bi bi-file-earmark"></i> Commercial Invoice</div>
                <a class="download-btn" href="#">Download</a>
            </div>

            <a class="outline-btn full-width-btn" href="#">View All Documents</a>
        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">