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

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

function editFmtDate($date) {
    if (empty($date)) return '';
    if (is_object($date) && method_exists($date, 'format')) {
        return $date->format('Y-m-d');
    }
    return (string)$date;
}

function editFmtDateTime($date) {
    if (empty($date)) return '';
    if (is_object($date) && method_exists($date, 'format')) {
        return $date->format('Y-m-d\TH:i');
    }
    return (string)$date;
}
?>

<style>
.edit-shipment-page {
    color: #334155;
}

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

.edit-title {
    margin: 0;
    color: #111827;
    font-size: 1.6rem;
    font-weight: 600;
}

.edit-subtitle {
    margin-top: 6px;
    color: #64748b;
    font-size: 0.95rem;
}

.back-btn {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d9e1ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

.edit-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.25fr;
    gap: 20px;
}

.card-box {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    padding: 24px 26px;
}

.card-title {
    margin: 0 0 22px;
    color: #2560e1ff;
    font-size: 1.08rem;
    font-weight: 600;
}

.progress-list {
    position: relative;
    padding-left: 42px;
}

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

.progress-item {
    position: relative;
    margin-bottom: 34px;
}

.progress-dot {
    position: absolute;
    left: -42px;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    border: 2px solid #fff;
}

.progress-dot.current {
    background: #fff;
    border: 3px solid #2560e1ff;
}

.progress-dot.pending {
    background: #cbd5e1;
}

.progress-title {
    color: #111827;
    font-size: .98rem;
    font-weight: 600;
}

.progress-title.current-text {
    color: #2560e1ff;
}

.progress-date {
    margin-top: 4px;
    color: #64748b;
    font-size: .88rem;
}

.notice-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #334155;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 24px;
}

.form-label {
    color: #334155;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 7px;
}

.form-control,
.form-select {
    height: 46px;
    border-radius: 8px;
    border: 1px solid #d8dee9;
    font-size: .95rem;
    color: #111827;
    box-shadow: none !important;
}

textarea.form-control {
    height: auto;
    min-height: 110px;
}

.selected-box {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 18px;
}

.selected-title {
    color: #334155;
    font-weight: 550;
    margin-bottom: 12px;
}

.selected-value {
    color: #64748b;
    font-style: italic;
}

.airline-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 96px;
    padding: 14px 18px;
    border-radius: 10px;

    background: #fdf9ebff;
    border: 1px solid #f2e2a1ff;

    color: #334155;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}

.airline-hint span {
    max-width: 250px;
}

.airline-tip i {
    font-size: 2rem;
    color: #334155;
}

.btn-row {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.btn-primary-clean {
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background: #2560e1ff;
    color: #fff;
    font-weight: 500;
}

.btn-light-clean {
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid #d8dee9;
    background: #fff;
    color: #334155;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.api-box {
    margin-top: 20px;
    border: 1px solid #e5eaf3;
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
}

@media (max-width: 1100px) {
    .edit-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }
}
.airplane-icon {
    font-size: 1rem;
    color: #334155;
    transform: rotate(45deg);
    opacity: 0.95;
    flex-shrink: 0;
}
</style>

<div class="edit-shipment-page">

    <div class="edit-topbar">
        <div>
            <h1 class="edit-title">Edit Shipment</h1>
            <div class="edit-subtitle">
                Update shipment status, tracking number, tracking event and assigned airline.
            </div>
        </div>

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

    <div class="edit-grid">

        <div class="card-box">
            <h2 class="card-title">Shipment Progress</h2>

            <div class="progress-list">
                <div class="progress-item">
                    <div class="progress-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="progress-title">Booking Received</div>
                    <div class="progress-date">
                        <?= !empty($booking->created) ? h($booking->created->format('d M Y, h:i A')) : '-' ?>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="progress-title">Booking Approved</div>
                    <div class="progress-date">
                        <?= !empty($shipment->created) ? h($shipment->created->format('d M Y, h:i A')) : '-' ?>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-dot"><i class="bi bi-check-lg"></i></div>
                    <div class="progress-title">Parcel Picked Up</div>
                    <div class="progress-date">
                        <?= !empty($shipment->pickup_date ?? $booking->pickup_date ?? null)
                            ? h(($shipment->pickup_date ?? $booking->pickup_date)->format('d M Y, h:i A'))
                            : '-' ?>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-dot current"></div>
                    <div class="progress-title current-text"><?= h($shipment->status ?? 'In Transit') ?></div>
                    <div class="progress-date">
                        <?= !empty($shipment->last_api_sync)
                            ? h($shipment->last_api_sync->format('d M Y, h:i A'))
                            : '-' ?>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-dot pending"></div>
                    <div class="progress-title">Delivered</div>
                    <div class="progress-date">-</div>
                </div>
            </div>
        </div>

        <div class="card-box">
            <h2 class="card-title">Assign Airline & Update Status</h2>

            <div class="notice-box">
                <i class="bi bi-info-circle-fill text-primary"></i>
                <span>Select an airline/carrier and update shipment status. This will update the shipment list and detail timeline.</span>
            </div>

            <?= $this->Form->create($shipment) ?>

            <div class="form-grid">
                <div>
                    <div class="mb-3">
                        <label class="form-label">Tracking Number</label>
                        <?= $this->Form->control('tracking_no', [
                            'label' => false,
                            'value' => $shipment->tracking_no,
                            'class' => 'form-control',
                            'placeholder' => 'Enter tracking number'
                        ]) ?>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipment Status</label>
                        <?= $this->Form->control('status', [
                            'label' => false,
                            'options' => $statusOptions,
                            'value' => $shipment->status,
                            'class' => 'form-select'
                        ]) ?>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Available Airlines / Carriers</label>
                        <?= $this->Form->control('airline', [
                            'label' => false,
                            'empty' => 'Select Airline',
                            'options' => $airlineOptions,
                            'value' => $shipment->airline ?? $shipment->carrier,
                            'class' => 'form-select',
                            'id' => 'airlineSelect'
                        ]) ?>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipment Event</label>
                        <?= $this->Form->control('shipment_event', [
                            'label' => false,
                            'type' => 'textarea',
                            'value' => $shipment->shipment_event,
                            'class' => 'form-control',
                            'placeholder' => 'Example: Shipment is on the way to destination.'
                        ]) ?>
                    </div>
                </div>

                <div>
                    <div class="selected-box">
                        <div class="selected-title">Selected Airline</div>
                        <div class="selected-value" id="selectedAirlineText">
                            <?= !empty($shipment->airline) ? h($shipment->airline) : 'None Selected' ?>
                        </div>
                    </div>

                    <div class="airline-tip">
                        <i class="bi bi-airplane airplane-icon"></i>
                        <div>
                            Assigning an airline will help in tracking and estimated delivery updates.
                        </div>
                    </div>

                    <div class="api-box">
                        <div class="mb-3">
                            <label class="form-label">Last Location</label>
                            <?= $this->Form->control('last_location', [
                                'label' => false,
                                'value' => $shipment->last_location,
                                'class' => 'form-control',
                                'placeholder' => 'Example: Melbourne, Australia'
                            ]) ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Expected Arrived</label>
                            <?= $this->Form->control('expected_arrived', [
                                'label' => false,
                                'type' => 'date',
                                'value' => editFmtDate($shipment->expected_arrived),
                                'class' => 'form-control'
                            ]) ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Flight Number</label>
                            <?= $this->Form->control('flight_number', [
                                'label' => false,
                                'value' => $shipment->flight_number,
                                'class' => 'form-control',
                                'placeholder' => 'Example: EK 650'
                            ]) ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">ETD Estimated Departure</label>
                            <?= $this->Form->control('estimated_departure', [
                                'label' => false,
                                'type' => 'datetime-local',
                                'value' => editFmtDateTime($shipment->estimated_departure),
                                'class' => 'form-control'
                            ]) ?>
                        </div>

                        <label style="display:flex; gap:8px; align-items:center; color:#334155;">
                            <?= $this->Form->checkbox('sync_courierplease', ['value' => 1]) ?>
                            Sync with CourierPlease API using tracking number
                        </label>
                    </div>
                </div>
            </div>

            <div class="btn-row">
                <button type="submit" class="btn-primary-clean">
                    Save Shipment
                </button>

                <a class="btn-light-clean" href="<?= $this->Url->build(['action' => 'view', $shipment->id]) ?>">
                    Cancel
                </a>
            </div>

            <?= $this->Form->end() ?>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const airlineSelect = document.getElementById('airlineSelect');
    const selectedAirlineText = document.getElementById('selectedAirlineText');

    if (airlineSelect && selectedAirlineText) {
        airlineSelect.addEventListener('change', function () {
            selectedAirlineText.textContent = this.value ? this.value : 'None Selected';
        });
    }
});
</script>

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