@extends('front.layouts.default')
@section('content')
<!-- Contact Starts -->
<section class="bike_rental">
    <div id="form_errors" style="display:none;" class="alert alert-danger"></div>
    <form class="" id="booking_form" action="{{ route('book_bike_rental') }}" method="post"
          enctype="multipart/form-data">
        <input type="hidden" name="date" id="date_hidden">
        <input type="hidden" name="time" id="time_hidden">
        <input type="hidden" name="duration" id="duration_hidden">
        <input type="hidden" name="guests" id="guests_hidden">
        <input type="hidden" name="cart_items" id="cart_items_input">
        <div class="booking_banner">
            <div class="banner_images">
                <img src="{{ asset('front/images/bike_rental/main-banner.png') }}" alt="" />
                <img src="{{ asset('front/images/bike_rental/main-banner.png') }}" alt="" />
                <img src="{{ asset('front/images/bike_rental/main-banner.png') }}" alt="" />
            </div>

            <div class="booking_form">
                <div class="form_item date">
                    <label for="date_input">
                        <i class="icon">&#128197;</i>
                        <span class="label text-dark">Date</span>
                        <i class="fa fa-angle-down"></i>
                    </label>
                    <input id="date_input" type="date" class="date_input dropdown" placeholder="Pick a date" />
                </div>
                <div class="form_item duration">
                    <i class="icon">&#9201;</i>
                    <span class="label text-dark">Duration</span>
                    <i class="fa fa-angle-down"></i>
                    <div class="dropdown">
                        <div data-duration="01:00:00">1 hour</div>
                        <div data-duration="02:00:00">2 hours</div>
                        <div data-duration="03:00:00">3 hours</div>
                    </div>
                </div>
                <div class="form_item no_border guests">
                    <i class="icon">&#x1F465;</i>
                    <span class="label text-dark">Guests</span>
                    <i class="fa fa-angle-down"></i>
                    <div class="dropdown">
                        <div>1 Person</div>
                        <div>2 Persons</div>
                        <div>3 Persons</div>
                        <div>4 Persons</div>
                        <div>5 Persons</div>
                        <div>6 Persons</div>
                        <div>7 Persons</div>
                        <div>8 Persons</div>
                        <div>9 Persons</div>
                        <div>10 Persons</div>
                        <div>11 Persons</div>
                        <div>12 Persons</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid bike_rental_layout">
            <div class="row">
                <div class="col-lg-8">
                    <div class="available_bike_section section_card">
                        <div class="section_header">
                            <div>
                                <div class="section_kicker">Inventory</div>
                                <div class="section_title">Available Bikes</div>
                            </div>
                            <div class="section_hint">Select quantities from the cards below.</div>
                        </div>
                        <div class="row" id="bike_list">

                            @php
                            $regularBikes = $inventories->filter(fn($item) => $item->bikeType->is_addon == 0);
                            @endphp

                            @forelse ($regularBikes as $item)
                            @php $rp = $bikeRentalPrices[$item->bikeType->id] ?? null; @endphp
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                                <div class="bike-card"
                                     data-bike-id="{{ $item->id }}"
                                     data-bike-type-id="{{ $item->bikeType->id }}"
                                     data-store-id="{{ $item->bikeStore->id }}"
                                     data-store-name="{{ $item->bikeStore->store_name }}"
                                     data-bike-name="{{ $item->bikeType->name }}"
                                     data-bike-type="{{ $item->bikeType->type }}"
                                     data-is-kids="{{ $item->bikeType->is_kids }}"
                                     data-max="{{ $item->qty }}"
                                     data-bike-price="0"
                                     data-price-id=""
                                     data-is-addon="0">

                                    <img src="{{ $item->bikeType->photo_url }}" alt="{{ $item->bikeType->name }}">

                                    <div class="card_text">
                                        <div class="bike_fare">
                                            <p class="bike-name">{{ $item->bikeType->name }} | {{ $item->bikeType->type }}</p>
                                            <p class="bike-price"
                                               data-price-1hr="{{ $rp->one_hour_price ?? 0 }}"
                                               data-price-2hr="{{ $rp->two_hour_price ?? 0 }}"
                                               data-price-3hr="{{ $rp->three_hour_price ?? 0 }}">
                                                ${{ number_format($rp->one_hour_price ?? 0, 2) }}
                                            </p>
                                        </div>
                                        <div class="bike_fare no_border">
                                            <p class="bike-name">Quantity ({{ $item->qty }})</p>
                                            <div class="qty-controls">
                                                <a href="javascript:" class="minus">-</a>
                                                <div class="qty">0</div>
                                                <a href="javascript:" class="plus">+</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <h4>No regular bikes added yet.</h4>
                            @endforelse

                        </div>
                    </div>

                    <section class="available_bike_section no_bg section_card section_card_secondary">
                        <div class="section_header">
                            <div>
                                <div class="section_kicker">Extras</div>
                                <div class="section_title">Add On</div>
                            </div>
                            <div class="section_hint">Optional add-ons for the ride.</div>
                        </div>

                        <div class="row">

                            @php
                            $addonBikes = $inventories->filter(fn($item) => $item->bikeType->is_addon == 1);
                            @endphp

                            @forelse ($addonBikes as $item)
                            @php $rp = $bikeRentalPrices[$item->bikeType->id] ?? null; @endphp
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                                <div class="bike-card"
                                     data-bike-id="{{ $item->id }}"
                                     data-bike-type-id="{{ $item->bikeType->id }}"
                                     data-store-id="{{ $item->bikeStore->id }}"
                                     data-store-name="{{ $item->bikeStore->store_name }}"
                                     data-bike-name="{{ $item->bikeType->name }}"
                                     data-bike-type="{{ $item->bikeType->type }}"
                                     data-is-kids="{{ $item->bikeType->is_kids }}"
                                     data-max="{{ $item->qty }}"
                                     data-bike-price="0"
                                     data-price-id=""
                                     data-is-addon="1">

                                    <img src="{{ $item->bikeType->photo_url }}" alt="Bike">

                                    <div class="card_text">
                                        <div class="bike_fare">
                                            <div>
                                                <p class="bike-name">{{ $item->bikeType->name }} | {{ $item->bikeType->type }}</p>
                                                <p>{{ $item->bikeStore->store_name }}</p>
                                            </div>
                                            <p class="bike-price"
                                               data-price-1hr="{{ $rp->one_hour_price ?? 0 }}"
                                               data-price-2hr="{{ $rp->two_hour_price ?? 0 }}"
                                               data-price-3hr="{{ $rp->three_hour_price ?? 0 }}">
                                                ${{ number_format($rp->one_hour_price ?? 0, 2) }}
                                            </p>
                                        </div>
                                        <div class="bike_fare no_border">
                                            <p class="bike-name">Quantity ({{ $item->qty }})</p>
                                            <div class="qty-controls">
                                                <a href="javascript:" class="minus">-</a>
                                                <div class="qty">0</div>
                                                <a href="javascript:" class="plus">+</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <h4>No add-on bikes added yet.</h4>
                            @endforelse

                        </div>
                    </section>
                </div>

                <div class="col-lg-4">
                    <div class="cart cart_area section_card" id="cart">
                        <div class="section_header compact">
                            <div>
                                <div class="section_kicker">Summary</div>
                                <h3>Selected Bikes</h3>
                            </div>
                        </div>
                        <ul id="cart_items"></ul>
                    </div>
                    <div class="time_slots_container section_card">
                        <div class="section_header compact">
                            <div>
                                <div class="section_kicker">Schedule</div>
                                <h3>Select a time slot<sup>*</sup></h3>
                            </div>
                        </div>
                        <input type="hidden" id="date" />
                        <input type="hidden" name="start_time" id="start_time" />
                        <div class="row time_slots_main"></div>
                        <div class="error_msg start_time_error"></div>
                    </div>
                </div>
            </div>
            <br /><br /><br />
        </div>

        <div class="container bike_rental_checkout_inner">
            <section class="payment_area section_card payment_card">
                <div class="row">
                    <div class="payment_form col-xs-12 col-md-8 col-lg-6">
                        <div class="payment_options">
                            <label>Payment Option<sup>*</sup></label>
                            <div class="options">
                                <div>
                                    <input type="radio" class="btn-check payment_option" name="payment_option"
                                           id="card" value="card" autocomplete="off" checked>
                                    <label class="btn btn-secondary" for="card">Pay Online in Full</label>
                                </div>
                                <div>
                                    <input type="radio" value="cash" class="btn-check payment_option"
                                           name="payment_option" id="cash" autocomplete="off">
                                    <label class="btn btn-secondary" for="cash">Pay by Cash</label>
                                </div>
                            </div>
                            <div class="error_msg payment_option_error"></div>
                        </div>

                        <input type="hidden" id="payment_amount" name="payment_amount" />

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="guest_name">Name<sup>*</sup></label>
                                    <input value="{{ @request()->user->name }}" type="text" name="guest_name"
                                           id="guest_name" class="form-control" />
                                    <small class="form-text error_msg guest_name_error"></small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="guest_email">E-Mail<sup>*</sup></label>
                                    <input value="{{ @request()->user->email }}" type="email" name="guest_email"
                                           id="guest_email" class="form-control" />
                                    <small class="form-text error_msg guest_email_error"></small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="guest_email_confirm">Confirm E-Mail<sup>*</sup></label>
                                    <input value="{{ @request()->user->email }}" type="email"
                                           name="guest_email_confirm" id="guest_email_confirm" class="form-control" />
                                    <small class="form-text error_msg guest_email_confirm_error"></small>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="address">Address<sup>*</sup></label>
                                    <input value="{{ @request()->user->address }}" type="text" name="address"
                                           id="address" class="form-control" />
                                    <small class="form-text error_msg address_error"></small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="city">City<sup>*</sup></label>
                                    <input value="{{ @request()->user->city }}" type="text" name="city"
                                           id="city" class="form-control" />
                                    <small class="form-text error_msg city_error"></small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="state">State</label>
                                    <input value="{{ @request()->user->state }}" type="text" name="state"
                                           id="state" class="form-control" />
                                    <small class="form-text error_msg state_error"></small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="zip">Zip Code<sup>*</sup></label>
                                    <input value="{{ @request()->user->zip }}" type="text" name="zip"
                                           id="zip" class="form-control" />
                                    <small class="form-text error_msg postcode_error"></small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="country">Country<sup>*</sup></label>
                                    <select name="country" id="country" class="form-control">
                                        <option value="">Select</option>
                                        @foreach ($countries as $country)
                                        <option value="{{ $country->code }}"
                                                {{ $country->code == @request()->user->country ? 'selected' : '' }}>
                                            {{ $country->nicename }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <small class="form-text error_msg country_error"></small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="guest_phone">Phone<sup>*</sup></label>
                                    <div class="d-flex on_phonecode">
                                        <select style="max-width:70px" name="phonecode" id="phonecode"
                                                class="form-control">
                                            @foreach ($countries as $country)
                                            <option value="{{ $country->phonecode }}"
                                                    data-country-code="{{ $country->code }}">
                                                +{{ $country->phonecode }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <input value="{{ @request()->user->phone }}" type="text"
                                               name="guest_phone" id="guest_phone" class="form-control" />
                                    </div>
                                    <small class="form-text error_msg guest_phone_error"></small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="guest_phone_confirm">Confirm Phone<sup>*</sup></label>
                                    <div class="d-flex on_phonecode">
                                        <select style="max-width:70px" name="phonecode_confirm"
                                                id="phonecode_confirm" class="form-control">
                                            @foreach ($countries as $country)
                                            <option value="{{ $country->phonecode }}"
                                                    data-country-code="{{ $country->code }}">
                                                +{{ $country->phonecode }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <input value="{{ @request()->user->phone }}" type="text"
                                               name="guest_phone_confirm" id="guest_phone_confirm"
                                               class="form-control" />
                                    </div>
                                    <small class="form-text error_msg guest_phone_confirm_error"></small>
                                </div>
                            </div>

                            <div id="pay_by_card" class="col-sm-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="nameOnCard">Name on Card<sup>*</sup></label>
                                            <input type="text" name="name_on_card" id="nameOnCard"
                                                   class="form-control" />
                                            <small class="form-text error_msg name_on_card_error"></small>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="CardNumber">Card Number<sup>*</sup></label>
                                            <input type="text" name="card_number" id="CardNumber"
                                                   class="form-control" />
                                            <small class="form-text error_msg card_number_error"></small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="month">Exp Month<sup>*</sup></label>
                                            <select id="exp_month" name="exp_month" class="form-control dropbox">
                                                @foreach (['01','02','03','04','05','06','07','08','09','10','11','12'] as $month)
                                                <option value="{{ $month }}">{{ $month }}</option>
                                                @endforeach
                                            </select>
                                            <small class="form-text error_msg exp_month_error"></small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="year">Exp Year<sup>*</sup></label>
                                            <select id="exp_year" name="exp_year" class="form-control dropbox">
                                                @for ($year = intval(date('Y')); $year <= intval(date('Y')) + 10; $year++)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                                @endfor
                                            </select>
                                            <small class="form-text error_msg exp_year_error"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <br />
                                <div style="text-align:center;display:none;" class="fee_amount_area">
                                    <label>Surcharge:</label> <span style="vertical-align:text-top;">0</span>
                                </div>
                                <div class="booking_button">
                                    <button type="submit" class="submit_button">Book Now - <span>$0</span></button>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="notes"
                                     style="display:none;font-size:12px;color:gray;text-align:center;">
                                    * Total amount is <span class="fullPrice"></span>. Due amount after booking is
                                    to be payable on site.
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </form>

    <div class="container bike_rental_promo_wrap">
        <div class="promo_banner">
            <img class="desktop" src="{{ asset('front/images/bike_rental/promo-banner.png') }}" alt="Promo">
            <img class="mobile" src="{{ asset('front/images/bike_rental/promo-banner-mobile.png') }}" alt="Promo">
            <div class="promo_texts">
                <span>Best Bike</span> <span>-</span> <span>Tag Along Bike</span> <span>-</span>
                <span>Child Seat</span> <span>-</span> <span>Bike Trailer</span>
            </div>
        </div>
    </div>

    <section class="social_contact">
        <ul>
            <li>
                <div class="social_icon phone"><i class="fa fa-phone icon"></i></div>
                <div class="social_name">Call</div>
            </li>
            <li>
                <div class="social_icon skype"><i class="fa fa-skype icon"></i></div>
                <div class="social_name">Skype</div>
            </li>
            <li>
                <div class="social_icon viber">
                    <img class="img-responsive" src="{{ asset('images/bike_rental/viber.png') }}">
                </div>
                <div class="social_name">Viber</div>
            </li>
            <li>
                <div class="social_icon whatsapp"><i class="fa fa-whatsapp icon"></i></div>
                <div class="social_name">Whatsapp</div>
            </li>
            <li style="vertical-align:top;">
                <div class="helpline">
                    <img class="img-responsive" src="{{ asset('images/bike_rental/phone-volume-solid.svg') }}">
                </div>
                <div class="helpline_text">
                    <div class="helpline_heading">Need Help?</div>
                    <div class="helpline_heading">{{ env('ADMIN_PHONE') }}</div>
                </div>
                <div class="clearfix"></div>
            </li>
        </ul>
    </section>

    <!-- Store Selection Modal -->
    <div id="storeModal" style="position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:none;align-items:center;justify-content:center;">
        <div style="background:white;padding:20px;border-radius:10px;max-width:400px;width:90%;">
            <h4 style="margin-bottom:10px;">Select a Bike Store</h4>
            <ul id="storeList" style="list-style:none;padding:0;margin:0;"></ul>
        </div>
    </div>

</section>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
let selectedStoreId = null;
const bikeStores = @json($bikeStores);

document.addEventListener('DOMContentLoaded', function () {
    if (!bikeStores || bikeStores.length === 0) {
        alert('No bike stores available.');
        return;
    }
    if (bikeStores.length === 1) {
        selectedStoreId = bikeStores[0].id;
        setStoreIdHiddenInput(selectedStoreId);
        filterBikesByStore(selectedStoreId);
    } else {
        showStoreSelectionModal(bikeStores);
    }
});

function setStoreIdHiddenInput(storeId) {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'store_id';
    input.value = storeId;
    document.getElementById('booking_form').appendChild(input);
}

function showStoreSelectionModal(stores) {
    const modal = document.getElementById('storeModal');
    const list = document.getElementById('storeList');
    modal.style.display = 'flex';
    list.innerHTML = '';
    stores.forEach(store => {
        const li = document.createElement('li');
        li.innerHTML = `<button style="display:block;width:100%;margin:5px 0;padding:10px;background:#007bff;color:white;border:none;border-radius:5px;">${store.store_name}</button>`;
        li.querySelector('button').addEventListener('click', () => {
            selectedStoreId = store.id;
            setStoreIdHiddenInput(store.id);
            filterBikesByStore(store.id);
            modal.style.display = 'none';
            getDateForCalendar();
        });
        list.appendChild(li);
    });
}

function filterBikesByStore(storeId) {
    document.querySelectorAll('.bike-card').forEach(card => {
        const col = card.closest('[class*="col-"]');
        if (col) col.style.display = parseInt(card.dataset.storeId) === parseInt(storeId) ? 'block' : 'none';
    });
}
</script>

<script>
let flatpickrInstance;
let cart = [];

document.addEventListener('DOMContentLoaded', function () {
    flatpickrInstance = flatpickr(".date_input", {
        dateFormat: "Y-m-d",
        minDate: "today",
        onChange: function (selectedDates, dateStr) {
            const label = document.querySelector('.form_item.date .label');
            if (label) label.textContent = new Date(dateStr).toLocaleDateString();
            getDateForCalendar();
        }
    });
    setInitialDateAndDuration();
});

document.querySelectorAll('.form_item').forEach(item => {
    item.addEventListener('click', function (e) {
        e.stopPropagation();
        const dropdown = this.querySelector('.dropdown');
        if (dropdown) {
            document.querySelectorAll('.dropdown').forEach(d => d.style.display = 'none');
            dropdown.style.display = 'block';
        }
    });
});

document.addEventListener('click', function () {
    document.querySelectorAll('.dropdown').forEach(d => d.style.display = 'none');
});

document.querySelectorAll('.dropdown div').forEach(option => {
    option.addEventListener('click', function (e) {
        e.stopPropagation();
        const formItem = this.closest('.form_item');
        const label = formItem.querySelector('.label');
        label.textContent = this.textContent.trim();
        formItem.querySelector('.dropdown').style.display = 'none';
        if (formItem.classList.contains('duration')) {
            const durationValue = this.getAttribute('data-duration');
            formItem.setAttribute('data-selected-duration', durationValue);
            updateBikePrices(durationValue);
            getDateForCalendar();
        }
        if (formItem.classList.contains('guests')) {
            const number = this.textContent.match(/\d+/)?.[0];
            if (number) {
                label.setAttribute('data-value', number);
                getDateForCalendar();
            }
        }
    });
});

function setInitialDateAndDuration() {
    if (flatpickrInstance) {
        flatpickrInstance.setDate(new Date(), true);
    }
    document.querySelectorAll('.form_item').forEach(item => {
        const dropdown = item.querySelector('.dropdown');
        const defaultOption = dropdown ? dropdown.querySelector('[data-duration="01:00:00"]') : null;
        if (defaultOption) {
            item.querySelector('.label').textContent = defaultOption.textContent.trim();
            item.setAttribute('data-selected-duration', '01:00:00');
            updateBikePrices('01:00:00');
        }
    });
}

function updateBikePrices(selectedDuration) {
    document.querySelectorAll('.bike-card').forEach(card => {
        const priceElement = card.querySelector('.bike-price');
        if (!priceElement) return;
        let price = 0;
        if (selectedDuration === '01:00:00') price = parseFloat(priceElement.dataset.price1hr) || 0;
        else if (selectedDuration === '02:00:00') price = parseFloat(priceElement.dataset.price2hr) || 0;
        else if (selectedDuration === '03:00:00') price = parseFloat(priceElement.dataset.price3hr) || 0;
        priceElement.textContent = '$' + price.toFixed(2);
        card.setAttribute('data-bike-price', price.toFixed(2));
        card.setAttribute('data-price-id', '');
    });
    cart = cart.map(cartItem => {
        const bikeCard = document.querySelector(`.bike-card[data-bike-id="${cartItem.item_id}"]`);
        if (bikeCard) {
            return { ...cartItem, price: parseFloat(bikeCard.getAttribute('data-bike-price')) || 0 };
        }
        return cartItem;
    });
    renderCart();
}

function updateBookingButton() {
    const paymentOption = $('.payment_option:checked').val();
    let total = 0;
    cart.forEach(item => { total += item.price * item.qty; });
    if (total === 0) {
        $('.booking_button .submit_button span').html('$0');
    } else if (paymentOption === 'cash') {
        $('.booking_button .submit_button span').html('$' + total.toFixed(2) + ' Pay on spot');
    } else {
        $('.booking_button .submit_button span').html('$' + total.toFixed(2) + ' Pay now');
    }
}

function renderCart() {
    const cartList = document.getElementById('cart_items');
    cartList.innerHTML = '';
    let total = 0;
    cart.forEach(item => {
        const li = document.createElement('li');
        const textsDiv = document.createElement('div');
        textsDiv.classList.add('texts');
        textsDiv.textContent = item.store_name + ' | ' + item.bike_name + ' | Qty: ' + item.qty;
        const priceDiv = document.createElement('div');
        priceDiv.classList.add('price');
        const itemTotal = item.price * item.qty;
        priceDiv.textContent = '$' + itemTotal.toFixed(2);
        total += itemTotal;
        li.appendChild(textsDiv);
        li.appendChild(priceDiv);
        cartList.appendChild(li);
    });
    if (cart.length > 0) {
        const totalLi = document.createElement('li');
        totalLi.classList.add('total');
        const td = document.createElement('div');
        td.classList.add('texts');
        td.textContent = 'TOTAL';
        const tp = document.createElement('div');
        tp.classList.add('price');
        tp.textContent = '$' + total.toFixed(2);
        totalLi.appendChild(td);
        totalLi.appendChild(tp);
        cartList.appendChild(totalLi);
    }
    checkPaymentMethod();
    updateBookingButton();
    getDateForCalendar();
}

document.querySelectorAll('.bike-card').forEach(card => {
    const minusBtn = card.querySelector('.minus');
    const plusBtn = card.querySelector('.plus');
    const qtyDiv = card.querySelector('.qty');
    const maxQty = parseInt(card.dataset.max);
    const bikeId = card.dataset.bikeId;
    const bikeTypeId = card.dataset.bikeTypeId;
    const storeName = card.dataset.storeName;
    const bikeName = card.dataset.bikeName;
    const isKids = parseInt(card.dataset.isKids);
    const isAddon = parseInt(card.dataset.isAddon);

    minusBtn.addEventListener('click', () => {
        const index = cart.findIndex(item => item.item_id === bikeId);
        if (index !== -1) {
            if (cart[index].qty > 1) {
                cart[index].qty -= 1;
            } else {
                cart.splice(index, 1);
            }
            qtyDiv.textContent = cart.find(item => item.item_id === bikeId)?.qty || 0;
            renderCart();
        }
    });

    plusBtn.addEventListener('click', () => {
        const latestPrice = parseFloat(card.getAttribute('data-bike-price')) || 0;
        const index = cart.findIndex(item => item.item_id === bikeId);
        if (index !== -1) {
            if (cart[index].qty < maxQty) {
                cart[index].qty += 1;
                cart[index].price = latestPrice;
            }
        } else {
            cart.push({
                item_id: bikeId,
                qty: 1,
                price: latestPrice,
                price_id: '',
                bike_type_id: bikeTypeId,
                store_name: storeName,
                bike_name: bikeName,
                is_kids: isKids,
                is_addon: isAddon
            });
        }
        qtyDiv.textContent = cart.find(item => item.item_id === bikeId)?.qty || 0;
        renderCart();
    });
});

function getDateForCalendar() {
    const date = document.getElementById('date_input').value;
    const durationItem = document.querySelector('.form_item.duration');
    const duration = durationItem ? durationItem.getAttribute('data-selected-duration') : '01:00:00';
    if (!date || !duration || cart.length === 0 || !selectedStoreId) {
        document.querySelector('.time_slots_main').innerHTML = '';
        return;
    }
    $.ajax({
        url: '{{ route("bike_rental.ajax_get_available_times") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            store_id: selectedStoreId,
            duration: duration,
            cart_items: JSON.stringify(cart),
            date: date
        },
        success: function (response) {
            document.querySelector('.time_slots_main').innerHTML = response;
            bindTimeSlotClicks();
        },
        error: function () {
            document.querySelector('.time_slots_main').innerHTML = '<p style="padding:10px;color:red;">Error loading time slots.</p>';
        }
    });
}

function bindTimeSlotClicks() {
    document.querySelectorAll('.time_slot').forEach(slot => {
        slot.addEventListener('click', function () {
            if (this.classList.contains('disabled')) return;
            document.querySelectorAll('.time_slot').forEach(s => s.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('start_time').value = this.getAttribute('data-datetime');
            document.querySelector('.start_time_error').textContent = '';
        });
    });
}

function checkPaymentMethod() {
    const paymentOption = $('.payment_option:checked').val();
    if (paymentOption === 'cash') {
        $('#pay_by_card').hide();
    } else {
        $('#pay_by_card').show();
    }
}

$('.payment_option').on('change', function () {
    checkPaymentMethod();
    updateBookingButton();
});

$('#booking_form').ajaxForm({
    beforeSubmit: function () {
        $('#form_errors').hide().html('');
        const date = document.getElementById('date_input').value;
        const durationItem = document.querySelector('.form_item.duration');
        const duration = durationItem ? durationItem.getAttribute('data-selected-duration') : '';
        const guestsLabel = document.querySelector('.form_item.guests .label');
        const guests = guestsLabel ? (guestsLabel.getAttribute('data-value') || '1') : '1';
        const startTime = document.getElementById('start_time').value;
        if (!date) { $('#form_errors').html('Please select a date.').show(); return false; }
        if (!duration) { $('#form_errors').html('Please select a duration.').show(); return false; }
        if (cart.length === 0) { $('#form_errors').html('Please add at least one bike to your cart.').show(); return false; }
        if (!startTime) { $('#form_errors').html('Please select a time slot.').show(); return false; }
        document.getElementById('date_hidden').value = date;
        document.getElementById('duration_hidden').value = duration;
        document.getElementBy **...**

_This response is too long to display in full._<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Not Found</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}code{font-family:monospace,monospace;font-size:1em}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}code{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-gray-400{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-xl{max-width:36rem}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wider{letter-spacing:.05em}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes  spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@-webkit-keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes  ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes  pulse{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes  bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
                <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
                    <div class="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
                        404                    </div>

                    <div class="ml-4 text-lg text-gray-500 uppercase tracking-wider">
                        Not Found                    </div>
                </div>
            </div>
        </div>
    </body>
</html>