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

<style>
    .booking-shell {
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }

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

    .booking-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }

    .booking-subtitle {
        color: #64748b;
        margin-top: 8px;
        font-size: 0.96rem;
        font-weight: 380;
    }

    .filter-bar {
        padding: 15px 20px;
        background: #fff;
        border-bottom: 1px solid #eef2f7;
    }

    .filter-control {
        border-radius: 14px !important;
        min-height: 49px;
        border: 1px solid #d7dfeb !important;
        box-shadow: none !important;
        font-weight: 400;
        color: #334155;
    }

    .filter-control:focus {
        border-color: #c8d4e5 !important;
        box-shadow: none !important;
    }

    .filter-icon-btn {
        width: 50px;
    min-height: 49px;
    border-radius: 12px;
    border: 1px solid #d7dfeb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: 0.2s ease;
    text-decoration: none;
    padding: 0;
    }

    .filter-submit-btn {
        background: #fff;
    color: #64748b;
    width: 50px;
    min-height: 49px;
    }

    .filter-submit-btn:hover {
        background: #f8fafc;
    color: #334155;
    }

    .filter-reset-btn {
        background: #fff;
    color: #64748b;
    width: 50px;
    min-height: 49px;
    }

    .filter-reset-btn:hover {
        background: #f8fafc;
    color: #334155;
    }

    .search-wrap {
        position: relative;
    }

    .search-wrap .search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 1rem;
        z-index: 3;
    }

    .search-wrap input {
        padding-left: 40px !important;
    }

    .date-filter-wrap {
        position: relative;
        height: 50px;
        border: 1px solid #d7dfeb;
        border-radius: 14px;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 42px 0 16px;
        overflow: hidden;
    }

    .date-filter-text {
        color: #475569;
        font-size: 1rem;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .date-filter-chevron {
        position: absolute;
        right: 16px;
        color: #64748b;
        pointer-events: none;
        font-size: 0.95rem;
    }

    .native-date-input {
        position: absolute !important;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .booking-table-wrap {
        max-height: 68vh;
        overflow-y: auto;
        background: #fff;
    }

    .booking-table {
        margin: 0;
        min-width: 1120px;
    }

    .booking-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #f8fafc;
        color: #475569;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e5e7eb;
        padding: 16px 18px;
        white-space: nowrap;
        font-weight: 600;
    }

    .booking-table tbody td {
        padding: 18px;
        vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
    }

    .booking-row:hover {
        background: #f8fbff;
    }

    .ref-code {
        font-weight: 500;
        color: #0f172a;
        font-size: 0.96rem;
        line-height: 1.35;
    }

    .main-text {
        color: #1f2937;
        font-weight: 500;
        line-height: 1.45;
    }

    .mini-text {
        color: #6b7280;
        font-size: 0.88rem;
        margin-top: 4px;
        line-height: 1.45;
        font-weight: 400;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.75;
    }

      .status-pending { background: #fff7ed; color: #c2410c; }
    .status-confirmed { background: #eff6ff; color: #1d4ed8; }
    .status-picked-up { background: #eef2ff; color: #4338ca; }
    .status-collected-at-depot { background: #f5f3ff; color: #6d28d9; }
    .status-in-transit { background: #eff6ff; color: #2563eb; }
    .status-out-for-delivery { background: #ecfeff; color: #0f766e; }
    .status-delivered { background: #ecfdf5; color: #15803d; }
    .status-delivery-failed { background: #fff1f2; color: #be123c; }
    .status-returned { background: #fef2f2; color: #b91c1c; }
    .status-cancelled { background: #f3f4f6; color: #4b5563; }
    .status-on-hold { background: #fffbea; color: #a16207; }

    .view-btn {
        border-radius: 12px;
        padding: 10px 18px;
        font-weight: 500;
        border: none;
        background:linear-gradient(135deg, #3b82f6, #2563eb);
        color: #ffffff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 96px;
        transition: 0.2s ease;
        font-size: 0.95rem;
    }

    .view-btn:hover {
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
    }

    .empty-state {
        padding: 50px 24px;
        text-align: center;
        color: #6b7280;
    }
</style>

<?php
$selectedStatus = $selectedStatus ?? '';
$selectedPickupDate = $selectedPickupDate ?? '';
$search = $search ?? '';

function bookingStatusClass(string $status): string {
    $map = [
        'Pending' => 'status-pending',
        'Confirmed' => 'status-confirmed',
        'Picked Up' => 'status-picked-up',
        'Collected at Depot' => 'status-collected-at-depot',
        'In Transit' => 'status-in-transit',
        'Out for Delivery' => 'status-out-for-delivery',
        'Delivered' => 'status-delivered',
        'Delivery Failed' => 'status-delivery-failed',
        'Returned' => 'status-returned',
        'Cancelled' => 'status-cancelled',
        'On Hold' => 'status-on-hold',
    ];

    return $map[$status] ?? 'status-pending';
}
?>

<div class="booking-shell">
    <div class="booking-header">
        <h1 class="booking-title">Bookings</h1>
        <div class="booking-subtitle">
            Manage all courier bookings, view details, and update shipment status.
        </div>
    </div>

    <div class="filter-bar">
        <?= $this->Form->create(null, ['type' => 'get']) ?>
        <div class="row g-3 align-items-center">
            <div class="col-lg-3">
                <?= $this->Form->control('status', [
                    'label' => false,
                    'empty' => 'All Statuses',
                    'options' => array_combine($statusOptions, $statusOptions),
                    'value' => $selectedStatus,
                    'class' => 'form-select filter-control'
                ]) ?>
            </div>

            <div class="col-lg-3">
                <div class="date-filter-wrap">
                    <span class="date-filter-text" id="pickupDateText">
                        <?= !empty($selectedPickupDate) ? h(date('d M Y', strtotime($selectedPickupDate))) : 'Pickup Date: All' ?>
                    </span>
                    <i class="bi bi-chevron-down date-filter-chevron"></i>

                    <?= $this->Form->control('pickup_date', [
                        'label' => false,
                        'type' => 'date',
                        'value' => !empty($selectedPickupDate) ? $selectedPickupDate : null,
                        'class' => 'native-date-input',
                        'id' => 'pickupDateInput'
                    ]) ?>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="search-wrap">
                    <i class="bi bi-search search-icon"></i>
                    <?= $this->Form->control('q', [
                        'label' => false,
                        'placeholder' => 'Search by Ref, customer, phone or address',
                        'value' => $search,
                        'class' => 'form-control filter-control'
                    ]) ?>
                </div>
            </div>

            <div class="col-lg-1">
                <button class="filter-icon-btn filter-submit-btn w-100" type="submit" title="Filter">
                    <i class="bi bi bi-sliders"></i>
                </button>
            </div>

            <div class="col-lg-1">
                <a class="filter-icon-btn filter-reset-btn w-100"
                   href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'index']) ?>"
                   title="Reset">
                    <i class="bi bi-arrow-clockwise"></i>
                </a>
            </div>
        </div>
        <?= $this->Form->end() ?>
    </div>

    <div class="booking-table-wrap">
        <table class="table booking-table align-middle">
            <thead>
                <tr>
                    <th>Ref</th>
                    <th>Customer</th>
                    <th>Pickup</th>
                    <th>Delivery</th>
                    <th>Service</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
<?php if (!empty($bookings->toArray())): ?>
    <?php foreach ($bookings as $booking): ?>
        <tr class="booking-row">
            <td>
                <div class="ref-code"><?= h($booking->booking_reference) ?></div>
                <div class="mini-text">
                    Created:
                    <?= !empty($booking->created) ? h($booking->created->format('d M Y, h:i A')) : '-' ?>
                </div>
            </td>

            <td>
                <div class="main-text"><?= h($booking->shipper_name ?? '-') ?></div>
                <div class="mini-text"><?= h($booking->shipper_phone ?? '-') ?></div>
                <div class="mini-text"><?= h($booking->shipper_email ?? '-') ?></div>
            </td>

            <td>
                <div class="main-text"><?= h($booking->shipper_address ?? '-') ?></div>
                <div class="mini-text">
                    <?= !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>
            </td>

            <td>
                <div class="main-text"><?= h($booking->delivery_address ?? '-') ?></div>
                <div class="mini-text">
                    Deadline:
                    <?= !empty($booking->delivery_deadline) ? h($booking->delivery_deadline->format('d M Y')) : '-' ?>
                </div>
            </td>

            <td>
                <div class="main-text"><?= h($booking->delivery_speed ?? '-') ?></div>
                <div class="mini-text">
                    <?= h($booking->mode_of_transport ?? '-') ?> ·
                    <?= h($booking->package_type ?? '-') ?>
                </div>
            </td>

            <td>
                <span class="status-badge <?= bookingStatusClass((string)($booking->status ?? 'Pending')) ?>">
                    <?= h($booking->status ?? 'Pending') ?>
                </span>
            </td>

            <td>
                <a class="view-btn"
                   href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'view', $booking->id]) ?>">
                    View
                </a>
            </td>
        </tr>
    <?php endforeach; ?>
<?php else: ?>
    <tr>
        <td colspan="7">
            <div class="empty-state">No bookings found.</div>
        </td>
    </tr>
<?php endif; ?>
</tbody>
        </table>
    </div>

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

    function formatDateForDisplay(value) {
        if (!value) {
            return 'Pickup Date: All';
        }

        const parts = value.split('-');
        if (parts.length !== 3) {
            return 'Pickup Date: All';
        }

        const year = parts[0];
        const month = parts[1];
        const day = parts[2];

        const date = new Date(year, month - 1, day);
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        return day + ' ' + months[date.getMonth()] + ' ' + year;
    }

    if (pickupDateInput && pickupDateText) {
        pickupDateInput.addEventListener('change', function () {
            pickupDateText.textContent = formatDateForDisplay(this.value);
        });
    }
});
</script>
</div>

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