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

$shipperNameError      = $booking->getError('shipper_name');
$shipperEmailError     = $booking->getError('shipper_email');
$shipperPhoneError     = $booking->getError('shipper_phone');
$shipperAddressError   = $booking->getError('shipper_address');

$receiverNameError     = $booking->getError('receiver_name');
$receiverEmailError    = $booking->getError('receiver_email');
$receiverPhoneError    = $booking->getError('receiver_phone');
$deliveryAddressError  = $booking->getError('delivery_address');

$typeOfGoodsError      = $booking->getError('type_of_goods');
$packageTypeError      = $booking->getError('package_type');
$numberPackagesError   = $booking->getError('number_of_packages');
$weightError           = $booking->getError('weight');
$valueError            = $booking->getError('value_of_goods');

$modeTransportError    = $booking->getError('mode_of_transport');
$deliverySpeedError    = $booking->getError('delivery_speed');
$pickupDateError       = $booking->getError('pickup_date');
$pickupTimeError       = $booking->getError('pickup_time');
$deadlineError         = $booking->getError('delivery_deadline');
$termsError            = $booking->getError('terms_accepted');

$selectedSpecialHandling = [];
if (!empty($booking->special_handling)) {
    $decoded = json_decode((string)$booking->special_handling, true);
    if (is_array($decoded)) {
        $selectedSpecialHandling = $decoded;
    }
}
?>

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

<div class="booking-page">
    <section class="booking-hero-section">
        <div class="booking-hero-overlay"></div>

        <nav class="navbar navbar-expand-lg hero-navbar">
            <div class="container-fluid hero-nav-container">
                <a class="navbar-brand brand-link" href="<?= $this->Url->build('/') ?>">
                    <?= $this->Html->image('impeccable-logo.png', [
                        'alt' => 'Impeccable Courier',
                        'class' => 'brand-logo'
                    ]) ?>
                </a>

                <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#heroNavbar" aria-controls="heroNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="heroNavbar">
                    <ul class="navbar-nav align-items-lg-center hero-menu">
                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/') ?>">Home</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle active-nav-link" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="servicesDropdown">
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/booking') ?>">Book a Shipment</a></li>
                                <li><a class="dropdown-item" href="#">Track a Shipment</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/') ?>#volumetricSection">Volumetric Weight Calculator</a></li>
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/contact') ?>">Contact Us</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="helpDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Help
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="helpDropdown">
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/terms') ?>">Terms and Conditions</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/restricted-cargos') ?>">Restricted Cargos</a></li>
                            </ul>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if (!$this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Log in', ['controller' => 'Auth', 'action' => 'login'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Logout', ['controller' => 'Auth', 'action' => 'logout'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Dashboard', ['prefix' => 'Admin', 'controller' => 'Dashboard', 'action' => 'index'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="booking-hero-center">
            <h1>Book Shipment</h1>
            <p><a href="<?= $this->Url->build('/') ?>">Home</a> / Book Shipment</p>
        </div>
    </section>

    <section class="booking-main-section">
        <div class="booking-main-container">
            <div class="booking-heading-wrap">
                <h2>Book your shipment in minutes</h2>
                <p>
                    Fill in the booking form below and our team will review your request as soon as possible.
                </p>
            </div>

            <div class="booking-form-card">
                <?= $this->Form->create($booking, [
                    'url' => ['controller' => 'Booking', 'action' => 'index'],
                    'id' => 'bookingForm',
                    'novalidate' => false
                ]) ?>

                <div class="booking-section-title">Shipper Information</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Full Name / Company <span>*</span></label>
                        <input type="text" name="shipper_name" maxlength="30" required
                               value="<?= h((string)$booking->shipper_name) ?>"
                               placeholder="Shipper Name">
                        <?php if (!empty($shipperNameError)) : ?>
                            <div class="field-error"><?= h(reset($shipperNameError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Email <span>*</span></label>
                        <input type="email" name="shipper_email" maxlength="40" required
                               value="<?= h((string)$booking->shipper_email) ?>"
                               placeholder="Email">
                        <?php if (!empty($shipperEmailError)) : ?>
                            <div class="field-error"><?= h(reset($shipperEmailError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Phone <span>*</span></label>
                        <input type="text" name="shipper_phone" maxlength="12" required
                               value="<?= h((string)$booking->shipper_phone) ?>"
                               placeholder="Phone">
                        <?php if (!empty($shipperPhoneError)) : ?>
                            <div class="field-error"><?= h(reset($shipperPhoneError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field booking-address-autocomplete">
    <label>Address <span>*</span></label>
    <div class="booking-input-wrap">
        <input
            type="text"
            id="shipper_address"
            name="shipper_address"
            maxlength="255"
            required
            autocomplete="off"
            value="<?= h((string)$booking->shipper_address) ?>"
            placeholder="Shipper Address"
        >
        <div class="booking-address-suggestions" id="shipperAddressSuggestions"></div>
    </div>
    <?php if (!empty($shipperAddressError)) : ?>
        <div class="field-error"><?= h(reset($shipperAddressError)) ?></div>
    <?php endif; ?>
</div>
                </div>

                <div class="booking-section-title">Receiver Information</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Full Name / Company <span>*</span></label>
                        <input type="text" name="receiver_name" maxlength="30" required
                               value="<?= h((string)$booking->receiver_name) ?>"
                               placeholder="Receiver Name">
                        <?php if (!empty($receiverNameError)) : ?>
                            <div class="field-error"><?= h(reset($receiverNameError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Email <span>*</span></label>
                        <input type="email" name="receiver_email" maxlength="40" required
                               value="<?= h((string)$booking->receiver_email) ?>"
                               placeholder="Email">
                        <?php if (!empty($receiverEmailError)) : ?>
                            <div class="field-error"><?= h(reset($receiverEmailError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Phone <span>*</span></label>
                        <input type="text" name="receiver_phone" maxlength="12" required
                               value="<?= h((string)$booking->receiver_phone) ?>"
                               placeholder="Phone">
                        <?php if (!empty($receiverPhoneError)) : ?>
                            <div class="field-error"><?= h(reset($receiverPhoneError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field booking-address-autocomplete">
    <label>Delivery Address <span>*</span></label>
    <div class="booking-input-wrap">
        <input
            type="text"
            id="delivery_address"
            name="delivery_address"
            maxlength="255"
            required
            autocomplete="off"
            value="<?= h((string)$booking->delivery_address) ?>"
            placeholder="Delivery Address"
        >
        <div class="booking-address-suggestions" id="deliveryAddressSuggestions"></div>
    </div>
    <?php if (!empty($deliveryAddressError)) : ?>
        <div class="field-error"><?= h(reset($deliveryAddressError)) ?></div>
    <?php endif; ?>
</div>
                </div>

                <div class="booking-section-title">Shipment Details</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Type of Goods <span>*</span></label>
                        <input type="text" name="type_of_goods" maxlength="40" required
                               value="<?= h((string)$booking->type_of_goods) ?>"
                               placeholder="e.g. Electronics, Furniture">
                        <?php if (!empty($typeOfGoodsError)) : ?>
                            <div class="field-error"><?= h(reset($typeOfGoodsError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Package Type <span>*</span></label>
                        <select name="package_type" required>
                            <option value="">Select package type</option>
                            <option value="Box" <?= ((string)$booking->package_type === 'Box') ? 'selected' : '' ?>>Box</option>
                            <option value="Carton" <?= ((string)$booking->package_type === 'Carton') ? 'selected' : '' ?>>Carton</option>
                            <option value="Pallet" <?= ((string)$booking->package_type === 'Pallet') ? 'selected' : '' ?>>Pallet</option>
                            <option value="Crate" <?= ((string)$booking->package_type === 'Crate') ? 'selected' : '' ?>>Crate</option>
                            <option value="Envelope" <?= ((string)$booking->package_type === 'Envelope') ? 'selected' : '' ?>>Envelope</option>
                        </select>
                        <?php if (!empty($packageTypeError)) : ?>
                            <div class="field-error"><?= h(reset($packageTypeError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Number of Packages <span>*</span></label>
                        <input type="number" name="number_of_packages" min="1" step="1" required
                               value="<?= h((string)$booking->number_of_packages) ?>"
                               placeholder="0">
                        <?php if (!empty($numberPackagesError)) : ?>
                            <div class="field-error"><?= h(reset($numberPackagesError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Weight (kg) <span>*</span></label>
                        <input type="number" name="weight" min="0.01" step="any" required
                               value="<?= h((string)$booking->weight) ?>"
                               placeholder="Weight">
                        <?php if (!empty($weightError)) : ?>
                            <div class="field-error"><?= h(reset($weightError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field full-width" style="display: flex; gap: 15px; align-items: flex-end;">
                        <div style="flex: 0 0 30%;">
                            <label>Currency <span>*</span></label>
                            <select name="currency" id="currency_select" required style="width: 100%; padding: 8px;">
                                <option value="AUD">AUD</option>
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label>Value of Goods <span>*</span></label>
                            <input type="number" name="value_of_goods" min="0" step="any" required
                                   value="<?= h((string)$booking->value_of_goods) ?>"
                                   placeholder="e.g. 5000" style="width: 100%;">
                        </div>
                    </div>
                    <?php if (!empty($valueError)) : ?>
                        <div class="field-error"><?= h(reset($valueError)) ?></div>
                    <?php endif; ?>
                    <script>
                        document.addEventListener("DOMContentLoaded", function() {
                            const apiKey = '1f49b8b7-2ae438ef-61e99add-0ed50dc7';
                            const apiUrl = `https://api.exconvert.com/currencies/?access_key=${apiKey}`;
                            fetch(apiUrl)
                                .then(response => response.json())
                                .then(data => {
                                    if (data.currencies) {
                                        const select = document.getElementById('currency_select');
                                        select.innerHTML = '';
                                        for (const [code, name] of Object.entries(data.currencies)) {
                                            let option = new Option(`${code} - ${name}`, code);
                                            if (code === 'AUD') {
                                                option.selected = true;
                                            }
                                            select.add(option);
                                        }
                                    } else {
                                        console.error("API did not return currencies data", data);
                                    }
                                })
                                .catch(error => {
                                    console.error("Fetch failed:", error);
                                });
                        });
                    </script>
                </div>
                <div class="booking-section-title">Logistics Options</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Mode of Transport <span>*</span></label>
                        <select name="mode_of_transport" required>
                            <option value="">Select mode</option>
                            <option value="Truck" <?= ((string)$booking->mode_of_transport === 'Truck') ? 'selected' : '' ?>>Truck</option>
                            <option value="Air Freight" <?= ((string)$booking->mode_of_transport === 'Air Freight') ? 'selected' : '' ?>>Air Freight</option>
                            <option value="Sea Freight" <?= ((string)$booking->mode_of_transport === 'Sea Freight') ? 'selected' : '' ?>>Sea Freight</option>
                            <option value="Rail Freight" <?= ((string)$booking->mode_of_transport === 'Rail Freight') ? 'selected' : '' ?>>Rail Freight</option>
                        </select>
                        <?php if (!empty($modeTransportError)) : ?>
                            <div class="field-error"><?= h(reset($modeTransportError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Delivery Speed <span>*</span></label>
                        <select name="delivery_speed" required>
                            <option value="">Select speed</option>
                            <option value="Standard" <?= ((string)$booking->delivery_speed === 'Standard') ? 'selected' : '' ?>>Standard</option>
                            <option value="Express" <?= ((string)$booking->delivery_speed === 'Express') ? 'selected' : '' ?>>Express</option>
                            <option value="Priority" <?= ((string)$booking->delivery_speed === 'Priority') ? 'selected' : '' ?>>Priority</option>
                        </select>
                        <?php if (!empty($deliverySpeedError)) : ?>
                            <div class="field-error"><?= h(reset($deliverySpeedError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-field special-handling-wrap">
                    <label>Special Handling</label>
                    <div class="special-options">
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Fragile" <?= in_array('Fragile', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Fragile</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Perishable" <?= in_array('Perishable', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Perishable</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Hazardous" <?= in_array('Hazardous', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Hazardous</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Oversized" <?= in_array('Oversized', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Oversized</span>
                        </label>
                    </div>
                </div>

                <div class="booking-section-title">Schedule</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Pickup Date <span>*</span></label>
                        <input type="text" id="pickup_date_picker" name="pickup_date" required
                               value="<?= !empty($booking->pickup_date) ? h($booking->pickup_date instanceof \Cake\I18n\Date ? $booking->pickup_date->format('Y-m-d') : (string)$booking->pickup_date) : '' ?>"
                               placeholder="dd/mm/yyyy" autocomplete="off">
                        <?php if (!empty($pickupDateError)) : ?>
                            <div class="field-error"><?= h(reset($pickupDateError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Pickup Time <span>*</span></label>
                        <input type="text" id="pickup_time_picker" name="pickup_time" required
                               value="<?= !empty($booking->pickup_time) ? h($booking->pickup_time instanceof \Cake\I18n\Time ? $booking->pickup_time->format('H:i:s') : (string)$booking->pickup_time) : '' ?>"
                               placeholder="--:--" autocomplete="off">
                        <?php if (!empty($pickupTimeError)) : ?>
                            <div class="field-error"><?= h(reset($pickupTimeError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field full-width">
                        <label>Delivery Deadline <span>*</span></label>
                        <input type="text" id="delivery_deadline_picker" name="delivery_deadline" required
                               value="<?= !empty($booking->delivery_deadline) ? h($booking->delivery_deadline instanceof \Cake\I18n\Date ? $booking->delivery_deadline->format('Y-m-d') : (string)$booking->delivery_deadline) : '' ?>"
                               placeholder="dd/mm/yyyy" autocomplete="off">
                        <?php if (!empty($deadlineError)) : ?>
                            <div class="field-error"><?= h(reset($deadlineError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-field notes-field">
                    <label>Additional Notes</label>
                    <textarea name="additional_notes" rows="5" placeholder="Enter any special instructions..."><?= h((string)$booking->additional_notes) ?></textarea>
                </div>

                <div class="booking-terms-wrap">
                    <label class="check-wrap terms-check">
                        <input type="checkbox" name="terms_accepted" value="1" required <?= !empty($booking->terms_accepted) ? 'checked' : '' ?>>
                        <span>I agree to the Terms &amp; Conditions</span>
                    </label>
                    <?php if (!empty($termsError)) : ?>
                        <div class="field-error"><?= h(reset($termsError)) ?></div>
                    <?php endif; ?>
                </div>

                <div class="booking-submit-wrap">
                    <button type="submit" id="bookingSubmitBtn" class="booking-submit-btn">
                        Book Shipment
                    </button>
                </div>

                <?php if (!empty($saveErrorMessage)) : ?>
                    <div class="booking-error-message">
                        <?= h($saveErrorMessage) ?>
                    </div>
                <?php endif; ?>

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

    <footer style="
    background:#ffffff;
    border-top:1px solid #ffffff;
    padding:70px 40px 50px 40px;
">
    <div style="
        max-width:1480px;
        margin:0 auto;
    ">
        <div style="
            display:flex;
            justify-content:flex-start;
            align-items:flex-start;
            gap:150px;
            flex-wrap:wrap;
            padding-bottom:26px;
            border-bottom:1px solid #d9dde5;
        ">
            <!-- LEFT -->
            <div style="
                flex:1 1 420px;
                min-width:300px;
            ">
                <div style="margin-bottom:16px;">
                    <?= $this->Html->image('footer-logo.png', [
                        'alt' => 'Impeccable Courier',
                        'style' => 'max-width:640px; width:100%; height:auto; display:block;'
                    ]) ?>
                </div>

                <p style="
                    margin:0 0 0 27px;
                    color:#475467;
                    font-size:18px;
                    line-height:1.8;
                    font-weight:400;
                    font-family:var(--font-main);
                    max-width:560px;
                ">
                    Trusted international courier services with affordable rates, secure delivery, and reliable support across Australia, Pakistan, the UK, USA and Canada.
                </p>
            </div>

            <!-- RIGHT -->
            <div style="
                flex:1 1 760px;
                min-width:320px;
                display:flex;
                justify-content:space-between;
                gap:70px;
                flex-wrap:wrap;
                align-items:flex-start;
            ">
                <!-- CONTACT + QUICK LINKS -->
                <div style="
                    min-width:260px;
                    display:flex;
                    flex-direction:column;
                    gap:34px;
                ">
                    <!-- contact -->
                    <div>
                        <h4 style="
                            margin:0 0 16px 0;
                            color:#c91c1c;
                            font-size:20px;
                            font-weight:700;
                            font-family:var(--font-main);
                            text-transform:uppercase;
                            letter-spacing:0.6px;
                        ">
                            Contact
                        </h4>

                        <p style="
                            margin:0 0 12px 0;
                            color:#101828;
                            font-size:18px;
                            line-height:1.8;
                            font-family:var(--font-main);
                        ">
                            <?php
                            $phone = $this->ContentBlock->text('contact-phone');
                            $phoneClean = preg_replace('/\s+/', '', $phone); // removes spaces
                            ?>
                            <strong>Phone:</strong>
                            <a href="tel:<?= h($phoneClean) ?>">
                                <?= h($phone) ?>
                            </a>
                        </p>

                        <p style="
                            margin:0;
                            color:#101828;
                            font-size:18px;
                            line-height:1.8;
                            font-family:var(--font-main);
                        ">
                            <?php $email = $this->ContentBlock->text('contact-email'); ?>
                        <strong>Email:</strong>
                        <a href="mailto:<?= h($email) ?>">
                            <?= h($email) ?>
                        </a>
                        </p>
                    </div>

                    <!-- quick links -->
                    <div>
                        <h4 style="
                            margin:0 0 16px 0;
                            color:#c91c1c;
                            font-size:20px;
                            font-weight:700;
                            font-family:var(--font-main);
                            text-transform:uppercase;
                            letter-spacing:0.6px;
                        ">
                            Quick Links
                        </h4>

                        <div style="
                            display:flex;
                            gap:50px;
                            flex-wrap:wrap;
                        ">
                            <!-- left half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:140px;
                            ">
                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Home
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Booking
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   About Us
                                </a>
                            </div>

                            <!-- right half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:180px;
                            ">
                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Contact Us
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Terms &amp; Condition
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- WAREHOUSE -->
                <div style="min-width:260px; margin-left:10px;">
                    <h4 style="
                        margin:0 0 16px 0;
                        color:#c91c1c;
                        font-size:20px;
                        font-weight:700;
                        font-family:var(--font-main);
                        text-transform:uppercase;
                        letter-spacing:0.6px;
                    ">
                        Warehouse
                    </h4>

                    <p style="
                        margin:0;
                        color:#101828;
                        font-size:18px;
                        line-height:1.8;
                        font-family:var(--font-main);
                        max-width:340px;
                    ">
                         <a href="https://www.google.com/maps?q=1011+Sydney+Road,+Coburg+North,+Victoria+3047" target="_blank">
                            1011 Sydney Road, Coburg North,<br>
                            Victoria 3047
                        </a>
                    </p>
                </div>
            </div>
        </div>

        <div style="
            padding-top:18px;
            text-align:center;
        ">
            <p style="
                margin:0;
                color:#c91c1c;
                font-size:18px;
                line-height:1.7;
                font-weight:500;
                font-family:var(--font-main);
            ">
                © All Rights Reserved by Webspire 2026
            </p>
        </div>
    </div>
</footer>
</div>

<style>
:root {
    --font-main: 'Inter', Arial, sans-serif;
    --white: #ffffff;
    --black: #161616;
    --soft-black: #2c2c2c;
    --text-gray: #5d5d5d;
    --accent-red: #c62828;
    --bg-soft: #f7f8fa;
    --border-soft: #d0d5dd;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: var(--font-main);
    background: #ffffff;
    color: var(--black);
    scroll-behavior: smooth;
}

body { min-width: 320px; font-weight: 300; }

.hero-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 50px;
    background: rgba(8, 8, 8, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-nav-container { align-items: center; }
.brand-link { margin: 0; padding: 0; }
.brand-logo { width: 280px; max-width: 100%; height: auto; display: block; }
.hero-menu { gap: 10px; }
.hero-menu .nav-link {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 12px !important;
}
.hero-menu .nav-link:hover { color: var(--accent-red) !important; }
.active-nav-link { color: #fff !important; }

.custom-dropdown {
    border: none;
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    min-width: 270px;
}
.custom-dropdown .dropdown-item {
    font-size: 15px;
    padding: 12px 18px;
    font-weight: 400;
    font-family: var(--font-main);
}
.custom-dropdown .dropdown-item:hover { background: #eef0f4; }

.nav-login-item { margin-left: 10px; }
.login-btn {
    background: #fff;
    color: #161616;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 17px;
    font-weight: 400;
    min-width: 118px;
    border: none;
}
.login-btn:hover { background: var(--accent-red); color: #fff; }

.custom-toggler {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.08);
}
.custom-toggler .navbar-toggler-icon { filter: invert(1); }

.booking-hero-section {
    position: relative;
    min-height: 420px;
    background-image: url('/img/plane3.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.booking-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.55);
    z-index: 1;
}
.booking-hero-center {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    text-align: center;
}
.booking-hero-center h1 {
    margin: 0 0 12px 0;
    color: #fff;
    font-size: 64px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1px;
}
.booking-hero-center p,
.booking-hero-center a {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    text-decoration: none;
}

.booking-main-section {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef2f7 100%);
    padding: 70px 36px 100px;
}
.booking-main-container {
    max-width: 1280px;
    margin: 0 auto;
}
.booking-heading-wrap {
    text-align: center;
    margin-bottom: 42px;
}
.booking-heading-wrap h2 {
    margin: 0 0 16px 0;
    color: #101828;
    font-size: 54px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1px;
}
.booking-heading-wrap p {
    max-width: 760px;
    margin: 0 auto;
    color: #667085;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
}

.booking-form-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 24px;
    padding: 30px 40px;
    box-shadow: 0 20px 60px rgba(16,24,40,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.booking-section-title {
    font-size: 42px;
    line-height: 1.12;
    font-weight: 600;
    color: #101828;
    margin: 0 0 32px 0;
}
.booking-section-title:not(:first-child) {
    margin-top: 46px;
}

.booking-grid {
    display: grid;
    gap: 22px 28px;
}
.booking-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-field label {
    display: block;
    margin-bottom: 10px;
    color: #101828;
    font-size: 16px;
    font-weight: 600;
}
.booking-field label span { color: var(--accent-red); }

.booking-field input,
.booking-field select,
.booking-field textarea {
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #fff;
    color: #101828;
    font-size: 17px;
    font-family: var(--font-main);
    outline: none;
    box-shadow: none;
    transition: all 0.25s ease;
}
.booking-field input,
.booking-field select {
    height: 60px;
    padding: 0 18px;
}
.booking-field textarea {
    min-height: 140px;
    padding: 16px 18px;
    resize: vertical;
}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus,
.booking-field input:hover,
.booking-field select:hover,
.booking-field textarea:hover {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 0.12rem rgba(201, 28, 28, 0.08);
}
.full-width { grid-column: 1 / -1; }

.special-handling-wrap {
    margin-top: 24px;
}
.special-options {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin-top: 14px;
    align-items: center;
}

.check-wrap {
   display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    line-height: normal !important;
    vertical-align: middle;
    cursor: pointer;
}

.check-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    accent-color: var(--accent-red);
}

.check-wrap span {
    display: inline-block !important;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px !important;
    color: #c91c1c;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.notes-field {
    margin-top: 28px;
}

.booking-terms-wrap {
    margin-top: 30px;
}
.terms-check {
    font-size: 18px;
    color: #475467;
}

.booking-submit-wrap {
    margin-top: 28px;
}
.booking-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 60px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d11f1f 0%, #a90f0f 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(201,28,28,0.22);
    transition: all 0.25s ease;
}
.booking-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(201,28,28,0.26);
}
.booking-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.field-error {
    margin-top: 8px;
    color: #c62828;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}
.booking-error-message {
    margin-top: 24px;
    padding: 18px 22px;
    border: 1px solid #ef4444;
    background: #fff1f2;
    color: #c81e1e;
    border-radius: 12px;
    font-size: 16px;
}

.site-footer {
    background: #ffffff;
    padding: 70px 40px 50px;
}
.site-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
}
.site-footer-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 150px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid #d9dde5;
}
.footer-left {
    flex: 1 1 420px;
    min-width: 300px;
}
.footer-logo-wrap { margin-bottom: 16px; }
.footer-logo {
    max-width: 640px;
    width: 100%;
    height: auto;
    display: block;
}
.footer-desc {
    margin: 0 0 0 27px;
    color: #475467;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 560px;
}
.footer-right {
    flex: 1 1 760px;
    min-width: 320px;
    display: flex;
    justify-content: space-between;
    gap: 70px;
    flex-wrap: wrap;
}
.footer-col h4 {
    margin: 0 0 16px 0;
    color: #c91c1c;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.footer-col p,
.footer-col a {
    display: block;
    margin: 0 0 12px 0;
    color: #101828;
    font-size: 18px;
    line-height: 1.8;
    text-decoration: none;
}
.footer-col a:hover { color: #c91c1c; }
.site-footer-bottom {
    padding-top: 18px;
    text-align: center;
}
.site-footer-bottom p {
    margin: 0;
    color: #c91c1c;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}

@media (max-width: 768px) {
    footer { padding: 20px 15px 15px 15px !important; }
    footer div[style*="gap:150px"] { gap: 20px !important; padding-bottom: 15px !important; border-bottom: 1px solid #eee !important; }
    footer div[style*="flex:1 1 420px"] { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 100% !important; }
    footer div[style*="margin-bottom:16px"] { margin-bottom: 5px !important; }
    footer img { max-width: 160px !important; }
    footer p[style*="margin:0 0 0 27px"] { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
    footer div[style*="flex:1 1 760px"] { gap: 15px !important; flex: 1 1 100% !important; justify-content: center !important; }
    footer div[style*="min-width:260px"] { min-width: 100% !important; margin-left: 0 !important; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px !important; }
    footer h4 { font-size: 15px !important; margin-bottom: 4px !important; letter-spacing: 0 !important; }
    footer p[style*="margin:0 0 12px 0"] { margin-bottom: 4px !important; }
    footer div[style*="gap:50px"] { gap: 8px 20px !important; justify-content: center !important; }
    footer div[style*="min-width:140px"], footer div[style*="min-width:180px"] { min-width: auto !important; gap: 4px !important; align-items: center; }
    footer p, footer a { font-size: 13px !important; line-height: 1.4 !important; }
    footer div[style*="padding-top:18px"] { padding-top: 10px !important; }
    footer p[style*="color:#c91c1c"] { font-size: 12px !important; }
}

.flatpickr-calendar {
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    padding: 10px !important;
    font-family: var(--font-main) !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;
}
.booking-field .flatpickr-input[readonly] {
    background: #fff;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .hero-navbar { padding: 18px 20px 0 20px; }
    .booking-heading-wrap h2 { font-size: 36px; }
    .booking-section-title { font-size: 30px; }
    .booking-main-section { padding: 40px 20px 50px; }
}

@media (max-width: 991px) {
    .hero-menu {
        gap: 0;
        margin-top: 12px;
        padding: 16px;
        border-radius: 12px;
        background: rgba(8, 10, 18, 0.85);
        backdrop-filter: blur(8px);
    }
    .nav-login-item {
        margin-left: 0;
        margin-top: 8px;
    }
    .booking-grid.two-col {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .booking-form-card {
        padding: 24px 18px;
    }
}

@media (max-width: 767px) {
    .brand-logo { width: 180px; }
    .booking-hero-section { min-height: 280px; }
    .booking-hero-center {
        min-height: 280px;
        padding: 100px 15px 40px;
    }
    .booking-hero-center h1 { font-size: 32px; line-height: 1.2; }
    .booking-heading-wrap h2 { font-size: 26px; margin-bottom: 12px; }
    .booking-section-title { font-size: 22px; margin-bottom: 16px; }

    .booking-submit-btn {
        width: 100%;
        height: 52px;
        font-size: 16px;
        margin-top: 10px;
    }
    .special-options {
        gap: 12px 16px;
    }
}
.booking-input-wrap {
    position: relative;
    overflow: visible;
}

.booking-address-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    z-index: 99999;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.booking-address-suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f3f3f3;
    border-bottom: 1px solid #e6e6e6;
    color: #424242;
    font-size: 15px;
    font-weight: 500;
}

.booking-address-suggestion-item {
    padding: 14px 16px;
    border-bottom: 1px solid #ececec;
    background: #fff;
    cursor: pointer;
    transition: background 0.18s ease;
}

.booking-address-suggestion-item:last-child {
    border-bottom: none;
}

.booking-address-suggestion-item:hover,
.booking-address-suggestion-item.active {
    background: #f7f7f7;
}

.booking-address-suggestion-primary {
    font-size: 16px;
    line-height: 1.45;
    color: #2a2a2a;
    font-weight: 600;
}

.booking-address-suggestion-secondary {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #6a6a6a;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('bookingForm');
    const submitBtn = document.getElementById('bookingSubmitBtn');

    if (document.getElementById('pickup_date_picker')) {
        flatpickr("#pickup_date_picker", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            minDate: "today",
            disableMobile: true
        });
    }

    if (document.getElementById('delivery_deadline_picker')) {
        flatpickr("#delivery_deadline_picker", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            minDate: "today",
            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 (form && submitBtn) {
        form.addEventListener('submit', function (e) {
            const weightInput = form.querySelector('input[name="weight"]');
            const valueInput = form.querySelector('input[name="value_of_goods"]');
            const pickupDate = form.querySelector('input[name="pickup_date"]');
            const pickupTime = form.querySelector('input[name="pickup_time"]');
            const deliveryDeadline = form.querySelector('input[name="delivery_deadline"]');

            if (!form.checkValidity()) {
                return;
            }

            if (!weightInput.value || parseFloat(weightInput.value) <= 0) {
                e.preventDefault();
                weightInput.focus();
                return;
            }

            if (valueInput.value === '' || parseFloat(valueInput.value) < 0) {
                e.preventDefault();
                valueInput.focus();
                return;
            }

            if (!pickupDate.value || !pickupTime.value || !deliveryDeadline.value) {
                e.preventDefault();
                return;
            }

            submitBtn.disabled = true;
            submitBtn.textContent = 'Sending...';
        });
    }
});

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

async function fetchAddressSuggestions(query) {
    const response = await fetch(`/locations/search?q=${encodeURIComponent(query)}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });

    if (!response.ok) {
        return [];
    }

    return await response.json();
}

function setupAddressAutocomplete(inputId, dropdownId, prefix) {
    const input = document.getElementById(inputId);
    const dropdown = document.getElementById(dropdownId);

    if (!input || !dropdown) {
        return;
    }

    let results = [];
    let activeIndex = -1;

    function closeDropdown() {
        dropdown.style.display = 'none';
        dropdown.innerHTML = '';
        activeIndex = -1;
    }

    function openDropdown() {
        dropdown.style.display = 'block';
    }

    function renderSuggestions(items) {
        dropdown.innerHTML = '';

        if (!items.length) {
            closeDropdown();
            return;
        }

        const header = document.createElement('div');
        header.className = `${prefix}-header`;
        header.innerHTML = `<i class="bi bi-geo-alt"></i><span>Address</span>`;
        dropdown.appendChild(header);

        items.forEach((item, index) => {
            const option = document.createElement('div');
            option.className = `${prefix}-item`;
            option.innerHTML = `
                <div class="${prefix}-primary">${item.primary || item.display_name}</div>
                <div class="${prefix}-secondary">${item.secondary || ''}</div>
            `;

            option.addEventListener('click', function () {
                input.value = item.display_name;
                closeDropdown();
            });

            dropdown.appendChild(option);
        });

        openDropdown();
    }

    const searchAddresses = debounce(async function () {
        const query = input.value.trim();

        if (query.length < 2) {
            closeDropdown();
            return;
        }

        try {
            results = await fetchAddressSuggestions(query);
            activeIndex = -1;
            renderSuggestions(results);
        } catch (error) {
            closeDropdown();
            console.error('Address autocomplete error:', error);
        }
    }, 250);

    input.addEventListener('input', searchAddresses);

    input.addEventListener('focus', function () {
        if (dropdown.innerHTML.trim() !== '') {
            openDropdown();
        }
    });

    input.addEventListener('keydown', function (e) {
        const items = dropdown.querySelectorAll(`.${prefix}-item`);
        if (!items.length) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            activeIndex = (activeIndex + 1) % items.length;
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            activeIndex = (activeIndex - 1 + items.length) % items.length;
        } else if (e.key === 'Enter') {
            if (activeIndex >= 0 && results[activeIndex]) {
                e.preventDefault();
                input.value = results[activeIndex].display_name;
                closeDropdown();
            }
            return;
        } else if (e.key === 'Escape') {
            closeDropdown();
            return;
        } else {
            return;
        }

        items.forEach((item, index) => {
            item.classList.toggle('active', index === activeIndex);
        });
    });

    document.addEventListener('click', function (e) {
        if (!input.contains(e.target) && !dropdown.contains(e.target)) {
            closeDropdown();
        }
    });
}

document.addEventListener('DOMContentLoaded', function () {
    setupAddressAutocomplete(
        'shipper_address',
        'shipperAddressSuggestions',
        'booking-address-suggestion'
    );

    setupAddressAutocomplete(
        'delivery_address',
        'deliveryAddressSuggestions',
        'booking-address-suggestion'
    );
});

</script>
