<?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, #143274ff, #3e66d4ff);
        color: white;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-weight: 500;
    }

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

    .btn-archive {
        background: #f59e0b;
        color: white;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-weight: 500;
    }

    .btn-delete {
        background: #dc2626;
        color: white;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-weight: 500;
    }

    .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;
        }
    }
</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">Pickup Address</div>
                    <div class="info-value"><?= h($booking->shipper_address) ?></div>
                </div>

                <div class="info-box">
                    <div class="info-label">Pickup Time</div>
                    <div class="info-value">
                        <?= !empty($booking->pickup_date) ? h($booking->pickup_date->format('d M Y')) : '-' ?>
                        <?php if (!empty($booking->pickup_time)): ?>
                            - <?= h($booking->pickup_time->format('h:i A')) ?>
                        <?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('shipper_address', [
                    'class' => 'form-control',
                    'label' => 'Pickup Address'
                ]) ?>
            </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>

                <?= $this->Form->postLink(
                    'Archive',
                    ['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'archive', $booking->id],
                    [
                        'class' => 'btn-archive text-decoration-none',
                        'confirm' => 'Archive this booking?'
                    ]
                ) ?>

                <?= $this->Form->postLink(
                    'Delete',
                    ['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'delete', $booking->id],
                    [
                        'class' => 'btn-delete text-decoration-none',
                        'confirm' => 'Delete this booking permanently?'
                    ]
                ) ?>
            </div>

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