<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Booking $booking
 * @var array $statusOptions
 */
?>

<style>
    .detail-page {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 24px;
    }

    .detail-card {
        background: #fff;
        border-radius: 24px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .detail-head {
        padding: 24px 28px;
        border-bottom: 1px solid #eef2f7;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .detail-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
    }

    .detail-subtitle {
        color: #6b7280;
        margin-top: 6px;
    }

    .detail-body {
        padding: 26px 28px;
    }

    .section-title {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 14px;
        font-weight: 700;
    }

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

    .info-box {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 16px;
    }

    .info-label {
        font-size: 0.8rem;
        color: #64748b;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 600;
    }

    .info-value {
        color: #0f172a;
        font-weight: 500;
        line-height: 1.55;
    }

    .form-control, .form-select, textarea {
        border-radius: 14px !important;
        min-height: 48px;
        border: 1px solid #dbe3ef !important;
        box-shadow: none !important;
    }

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

    .action-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .btn-save {
        background: linear-gradient(135deg, #0c1e42ff, #18274cff);
        color: white;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-weight: 500;
    }

    .btn-save:hover {
        color: white;
    }

    .btn-back {
        background: #e2e8f0;
        color: #0f172a;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-weight: 500;
        text-decoration: none;
    }

    @media (max-width: 1100px) {
        .detail-page {
            grid-template-columns: 1fr;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }
    }

    .flatpickr-calendar {
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    padding: 10px !important;
}

.flatpickr-day,
.flatpickr-weekday,
.flatpickr-current-month,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    font-size: 16px !important;
}

.flatpickr-day {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    border-radius: 10px !important;
}

.flatpickr-months .flatpickr-month {
    height: 52px !important;
}

.flatpickr-current-month {
    padding-top: 10px !important;
}

.flatpickr-time {
    height: 52px !important;
    border-top: 1px solid #eee !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    height: 52px !important;
    line-height: 52px !important;
}

.flatpickr-input[readonly] {
    background: #fff;
    cursor: pointer;
}
</style>

<div class="detail-page">
    <div class="detail-card">
        <div class="detail-head">
            <h1 class="detail-title">Booking Detail</h1>
            <div class="detail-subtitle">
                Ref: <strong><?= h($booking->booking_reference) ?></strong>
            </div>
        </div>

        <div class="detail-body">
            <div class="section-title">Booking Information</div>

            <div class="info-grid">
                <div class="info-box">
                    <div class="info-label">Ref</div>
                    <div class="info-value"><?= h($booking->booking_reference) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Current Status</div>
                    <div class="info-value"><?= h($booking->status ?? 'Pending') ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Shipper Name</div>
                    <div class="info-value"><?= h($booking->shipper_name) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Shipper Contact</div>
                    <div class="info-value">
                        <?= h($booking->shipper_phone) ?><br>
                        <?= h($booking->shipper_email) ?>
                    </div>
                </div>

                <div class="info-box">
    <div class="info-label">Collection Method</div>
    <div class="info-value"><?= h($booking->collection_method ?? 'Pickup') ?></div>
</div>

<?php if (($booking->collection_method ?? 'Pickup') === 'Drop Off'): ?>
    <div class="info-box">
        <div class="info-label">Drop Off Location</div>
        <div class="info-value">
            <?= h($booking->dropoff_location ?: '1011 Sydney Road, Coburg North, Victoria 3047') ?>
        </div>
    </div>
<?php else: ?>
    <div class="info-box">
        <div class="info-label">Pickup Address</div>
        <div class="info-value"><?= h($booking->shipper_address ?: '-') ?></div>
    </div>
<?php endif; ?>

   <div class="info-box">
    <div class="info-label">Pickup Time</div>
    <div class="info-value">
        <?php if (($booking->collection_method ?? 'Pickup') === 'Drop Off'): ?>
            -
        <?php else: ?>
            <?php if (!empty($booking->pickup_date) && !empty($booking->pickup_time)): ?>
                <?= h($booking->pickup_date->format('d M Y')) ?>, <?= h($booking->pickup_time->format('h:i A')) ?>
            <?php elseif (!empty($booking->pickup_date)): ?>
                <?= h($booking->pickup_date->format('d M Y')) ?>
            <?php elseif (!empty($booking->pickup_time)): ?>
                <?= h($booking->pickup_time->format('h:i A')) ?>
            <?php else: ?>
                -
            <?php endif; ?>
        <?php endif; ?>
    </div>
</div>

                <div class="info-box">
                    <div class="info-label">Receiver Name</div>
                    <div class="info-value"><?= h($booking->receiver_name) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Receiver Contact</div>
                    <div class="info-value">
                        <?= h($booking->receiver_phone) ?><br>
                        <?= h($booking->receiver_email) ?>
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Delivery Address</div>
                    <div class="info-value"><?= h($booking->delivery_address) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Delivery Deadline</div>
                    <div class="info-value">
                        <?= !empty($booking->delivery_deadline) ? h($booking->delivery_deadline->format('d M Y')) : '-' ?>
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Goods</div>
                    <div class="info-value"><?= h($booking->type_of_goods) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Package Details</div>
                    <div class="info-value">
                        Type: <?= h($booking->package_type) ?><br>
                        Packages: <?= h((string)$booking->number_of_packages) ?><br>
                        Weight: <?= h((string)$booking->weight) ?> kg
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Delivery Service</div>
                    <div class="info-value">
                        <?= h($booking->delivery_speed) ?><br>
                        <?= h($booking->mode_of_transport) ?>
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Special Handling</div>
                    <div class="info-value"><?= h($booking->special_handling ?: '-') ?></div>
                </div>
            </div>
        </div>
    </div>

    <div class="detail-card">
        <div class="detail-head">
            <h2 class="detail-title" style="font-size:1.35rem;">Update Booking</h2>
            <div class="detail-subtitle">Edit booking details, tracking and status</div>
        </div>

        <div class="detail-body">
            <?= $this->Form->create($booking) ?>

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

            <div class="mb-3">
                <?= $this->Form->control('tracking_number', [
                    'class' => 'form-control',
                    'label' => 'Tracking Number'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('assigned_courier', [
                    'class' => 'form-control',
                    'label' => 'Assigned Courier'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('shipper_name', [
                    'class' => 'form-control',
                    'label' => 'Shipper Name'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('shipper_phone', [
                    'class' => 'form-control',
                    'label' => 'Shipper Phone'
                ]) ?>
            </div>

            <div class="mb-3">
    <?= $this->Form->control('collection_method', [
        'type' => 'select',
        'options' => [
            'Drop Off' => 'Drop Off',
            'Pickup' => 'Pickup',
        ],
        'class' => 'form-select',
        'label' => 'Collection Method',
        'id' => 'collection-method-select'
    ]) ?>
</div>

<div class="mb-3" id="pickup-address-wrap">
    <?= $this->Form->control('shipper_address', [
        'class' => 'form-control',
        'label' => 'Pickup Address'
    ]) ?>
</div>

<div class="mb-3" id="pickup-date-wrap">
    <label for="pickup-date-picker" class="form-label">Pickup Date</label>
    <input
        type="text"
        id="pickup-date-picker"
        name="pickup_date"
        class="form-control"
        autocomplete="off"
        value="<?= !empty($booking->pickup_date) ? h($booking->pickup_date->format('Y-m-d')) : '' ?>"
        placeholder="dd/mm/yyyy"
    >
</div>

<div class="mb-3" id="pickup-time-wrap">
    <label for="pickup-time-picker" class="form-label">Pickup Time</label>
    <input
        type="text"
        id="pickup-time-picker"
        name="pickup_time"
        class="form-control"
        autocomplete="off"
        value="<?= !empty($booking->pickup_time) ? h($booking->pickup_time->format('H:i:s')) : '' ?>"
        placeholder="--:--"
    >
</div>

            <div class="mb-3">
                <?= $this->Form->control('receiver_name', [
                    'class' => 'form-control',
                    'label' => 'Receiver Name'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('receiver_phone', [
                    'class' => 'form-control',
                    'label' => 'Receiver Phone'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('delivery_address', [
                    'class' => 'form-control',
                    'label' => 'Delivery Address'
                ]) ?>
            </div>

            <div class="mb-3">
                <?= $this->Form->control('courier_notes', [
                    'type' => 'textarea',
                    'class' => 'form-control',
                    'label' => 'Courier Notes'
                ]) ?>
            </div>

            <div class="action-row mt-4">
                <button type="submit" class="btn-save">Save Changes</button>

                <a href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'index']) ?>"
                   class="btn-back">
                    Back
                </a>
            </div>

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const methodSelect = document.getElementById('collection-method-select');
    const pickupAddressWrap = document.getElementById('pickup-address-wrap');
    const pickupDateWrap = document.getElementById('pickup-date-wrap');
    const pickupTimeWrap = document.getElementById('pickup-time-wrap');

    function togglePickupFields() {
        if (!methodSelect) return;

        const isPickup = methodSelect.value === 'Pickup';

        if (pickupAddressWrap) {
            pickupAddressWrap.style.display = isPickup ? 'block' : 'none';
        }

        if (pickupDateWrap) {
            pickupDateWrap.style.display = isPickup ? 'block' : 'none';
        }

        if (pickupTimeWrap) {
            pickupTimeWrap.style.display = isPickup ? 'block' : 'none';
        }
    }

    if (document.getElementById('pickup-date-picker')) {
        flatpickr('#pickup-date-picker', {
            dateFormat: 'Y-m-d',
            altInput: true,
            altFormat: 'd/m/Y',
            disableMobile: true
        });
    }

    if (document.getElementById('pickup-time-picker')) {
        flatpickr('#pickup-time-picker', {
            enableTime: true,
            noCalendar: true,
            dateFormat: 'H:i:00',
            altInput: true,
            altFormat: 'h:i K',
            time_24hr: false,
            minuteIncrement: 5,
            disableMobile: true
        });
    }

    if (methodSelect) {
        togglePickupFields();
        methodSelect.addEventListener('change', togglePickupFields);
    }
});
</script>