@extends('layouts.master')
@section('custom-styles')
    <style>
        .booked-slots-chip{
            display:inline-flex;
            align-items:center;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(245,183,84,0.12);
            border:1px solid rgba(245,183,84,0.35);
            color:#F5B754;
            font-size:13px;
            font-weight:600;
            line-height:1;
            letter-spacing:.3px;
            backdrop-filter:blur(8px);
            box-shadow:0 4px 12px rgba(245,183,84,0.12);
            transition:all .2s ease;
        }

        .booked-slots-chip:hover{
            transform:translateY(-2px);
            background:rgba(245,183,84,0.18);
            border-color:rgba(245,183,84,0.5);
        }

        .booked-slots-chip.is-paid{
            background:rgba(16,185,129,0.12);
            border:1px solid rgba(16,185,129,0.35);
            color:#34d399;
            box-shadow:0 4px 12px rgba(16,185,129,0.15);
        }
        #homePromoCode::placeholder{
            color: rgba(255,255,255,0.65);
            opacity: 1;
        }
        #modalStartDate::-webkit-calendar-picker-indicator,
        #modalEndDate::-webkit-calendar-picker-indicator {
            filter: invert(1); opacity:.6; cursor:pointer;
        }
        #modalStartTime option, #modalEndTime option,
        #modalStartDate, #modalEndDate {
            background:#162042; color:#fff;
        }
    </style>
@endsection
@section('content')
    @php
        $productDetails = $products->mapWithKeys(function ($product) {
            return [
                $product->id => [
                    'id' => $product->id,
                    'name' => $product->name,
                    'category' => optional($product->category)->name,
                    'description' => $product->description,
                    'price' => (float) $product->display_price,
                    'rate_type' => $product->display_rate_type,
                    'available' => (bool) $product->is_available,
                    'tags' => $product->tags->pluck('name')->values(),
                    'photos' => $product->photos->map(fn ($photo) => asset($photo->path))->values(),
                ],
            ];
        });
    @endphp
    <!-- Page Header Section Start -->
    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Our Cars</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">home</a></li>
                                <li class="breadcrumb-item">/</li>
                                <li class="breadcrumb-item active" aria-current="page">Our Cars</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Fleets Section Start -->
    <div class="page-fleets">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="page-single-sidebar">
                        <div class="fleet-category-item wow fadeInUp">

                            <!-- Search Box -->
                            <div class="fleets-search-box">
                                <form id="fleetsForm" method="GET" action="{{ route('car-rental.index') }}">
                                    <div class="form-group mb-2">
                                        <input
                                            type="text"
                                            name="search"
                                            class="form-control"
                                            id="search"
                                            placeholder="Search..."
                                            value="{{ request('search') }}"
                                        >
                                    </div>

                                    <!-- Start Date Filter -->
                                    <div class="fleet-category-options">
{{--                                        <h2 class="fleet-category-options-title">Start Date</h2>--}}
                                        <div class="form-group" style="position: relative;">
                                            <i class="bi bi-calendar3" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1rem; pointer-events: none;"></i>
                                            <input
                                                type="date"
                                                id="dateFilter"
                                                name="date"
                                                class="form-control"
                                                style="padding-left: 40px;"
                                                value="{{ request('date') ? \Carbon\Carbon::parse(request('date'))->format('Y-m-d') : '' }}"
                                                onchange="this.form.submit()"
                                            >
                                        </div>
                                    </div>

                                    <!-- Color / Tag Dropdown -->
                                    <div class="fleet-category-options">
                                        <h2 class="fleet-category-options-title">Color</h2>
                                        <div class="filter-dropdown" id="colorDropdown" style="position: relative;">
                                            <button type="button" class="btn btn-outline-secondary dropdown-toggle w-100 text-start" id="colorDropdownTrigger" aria-expanded="false" onclick="toggleColorDropdown()">
                                                <i class="bi bi-palette" style="margin-right: 8px; color: #94a3b8;"></i>
                                                <span id="colorDropdownText">
                                                    {{ collect($selectedTags ?? [])->isNotEmpty() ? collect($selectedTags)->implode(', ') : 'All colors' }}
                                                </span>
                                                <i class="bi bi-chevron-down" style="float: right; margin-top: 4px;"></i>
                                            </button>
                                            <div class="dropdown-menu w-100 p-2" id="colorDropdownMenu" style="display: none; max-height: 250px; overflow-y: auto;">
                                                <div class="mb-2" style="position: relative;">
                                                    <input type="text" class="form-control form-control-sm" id="colorFilterSearch" placeholder="Search colors..." onkeyup="filterColors()">
                                                    <i class="bi bi-search" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.8rem;"></i>
                                                </div>
                                                <div id="colorOptions">
                                                    @foreach($allTags ?? [] as $tag)
                                                        <label class="dropdown-item d-flex align-items-center" data-color-name="{{ strtolower($tag->name) }}">
                                                            <input type="checkbox" name="tag[]" value="{{ $tag->name }}"
                                                                   {{ collect($selectedTags ?? [])->contains($tag->name) ? 'checked' : '' }}
                                                                   class="form-check-input me-2"
                                                                   onchange="updateColorText(); this.form.submit();"
                                                            >
                                                            <span>{{ $tag->name }}</span>
                                                        </label>
                                                    @endforeach
                                                    @if(empty($allTags) || count($allTags) == 0)
                                                        <div class="dropdown-item text-muted">No colors available.</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Car Type Checkboxes -->
                                    <div class="fleet-category-options">
                                        <h2 class="fleet-category-options-title">Car Types</h2>
                                        <ul>
                                            @foreach([
                                                'Sport_Cars'  => 'Sport Cars',
                                                'SUVs'        => 'SUVs',
                                                'Convertible' => 'Convertible',
                                                'Luxury_Cars' => 'Luxury Cars',
                                                'Sedan'       => 'Sedan',
                                                'Small_Cars'  => 'Small Cars',
                                            ] as $value => $label)
                                                <li>
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        id="{{ $value }}"
                                                        name="interest[]"
                                                        value="{{ $value }}"
                                                        {{ in_array($value, (array) request('interest', [])) ? 'checked' : '' }}
                                                    >
                                                    <label for="{{ $value }}">{{ $label }}</label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                    <!-- Search Button -->
                                    <div class="fleet-category-btn" style="display: flex; gap: 10px;">
                                        <button type="submit" class="btn-default" style="flex: 1;">Search</button>
                                        <a href="{{ route('car-rental.index') }}" class="btn btn-outline-secondary" style="flex: 1;">Clear</a>
                                    </div>

                                </form>
                            </div>

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

                <div class="col-lg-8">
                    <div class="row g-4">
                        @foreach($products as $cars)
                            <div class="col-md-6">
                                @include('components.cars-card', ['cars' => $cars])
                            </div>
                        @endforeach
                    </div>
                </div>

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

    {{-- ── Details Modal ── --}}
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content" style="border:0; border-radius:20px; overflow:hidden; background:#0d1b3e;">

                <div class="modal-header" style="background:#0a1628; border-bottom:1px solid rgba(245,183,84,0.2); padding:20px 28px;">
                    <div>
                        <h5 class="mb-0 fw-bolder" id="detailsProductName"
                            style="font-size:1.4rem; letter-spacing:-0.02em; color:#fff;"></h5>
                        <div class="small mt-1" style="color:#F5B754; opacity:.9;" id="detailsCategoryLine"></div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4 p-lg-5" style="background:#0d1b3e;">
                    <div class="row g-4">

                        <div class="col-lg-7">
                            <img id="detailsHeroImage" src="" alt=""
                                 style="width:100%; height:320px; object-fit:cover; border-radius:14px;
                                    border:1px solid rgba(255,255,255,0.08);">
                            <div id="detailsGallery" class="d-grid mt-3"
                                 style="grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;"></div>
                        </div>

                        <div class="col-lg-5">
                            <div id="detailsMeta" class="d-flex flex-wrap gap-2 mb-3"></div>

                            <div class="mb-3"
                                 style="border-radius:12px; border:1px solid rgba(245,183,84,0.3);
                                    background:rgba(245,183,84,0.08); padding:16px 18px;">
                                <div style="font-size:.7rem; font-weight:700; letter-spacing:.08em;
                                        text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:4px;">
                                    Starting From
                                </div>
                                <div class="fw-bolder" id="detailsPriceAmount"
                                     style="font-size:2rem; line-height:1.05; color:#F5B754;"></div>
                            </div>

                            <div id="detailsDescription"
                                 style="color:rgba(255,255,255,.7); line-height:1.7; font-size:.9rem;"></div>

                            <div class="d-flex gap-2 mt-4">
                                <button type="button" id="detailsAvailabilityBtn"
                                        style="display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
                                           border-radius:10px; border:1px solid rgba(245,183,84,0.4);
                                           background:rgba(245,183,84,0.08); color:#F5B754;
                                           font-size:.85rem; font-weight:700; cursor:pointer;
                                           letter-spacing:.03em; transition:background .2s;"
                                        onmouseover="this.style.background='rgba(245,183,84,0.18)'"
                                        onmouseout="this.style.background='rgba(245,183,84,0.08)'">
                                    <i class="fa-regular fa-calendar"></i> Availability
                                </button>
                                <button type="button" id="detailsBookBtn"
                                        style="flex:1; display:inline-flex; align-items:center; justify-content:center;
                                           gap:8px; padding:11px 20px; border-radius:10px; border:0;
                                           background:#F5B754; color:#0d1b3e; font-size:.9rem; font-weight:800;
                                           cursor:pointer; letter-spacing:.04em; text-transform:uppercase;
                                           transition:background .2s;"
                                        onmouseover="this.style.background='#e5a800'"
                                        onmouseout="this.style.background='#F5B754'">
                                    <i class="fa-solid fa-calendar-check"></i> Book Now
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

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

    {{-- ── Book Now Modal ── --}}
    <div class="modal fade" id="bookNowModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content" style="border:0; border-radius:20px; overflow:hidden; background:#0d1b3e;">

                <div class="modal-header" style="background:#0a1628; border-bottom:1px solid rgba(245,183,84,0.2); padding:20px 28px;">
                    <div>
                        <h5 class="mb-0 fw-bolder" id="modalProductName"
                            style="font-size:1.4rem; letter-spacing:-0.02em; color:#fff;"></h5>
                        <div class="small mt-1" style="color:rgba(255,255,255,.6);" id="modalPriceLine"></div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4 p-lg-5" style="background:#0d1b3e;">

                    <div class="mb-3">
                    <span id="modalStatusBadge" class="badge rounded-pill text-uppercase"
                          style="font-size:.78rem; padding:.55rem 1rem; font-weight:700;
                                 background:rgba(16,185,129,.15); color:#34d399;
                                 border:1px solid rgba(52,211,153,.3);">
                        Available
                    </span>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                      text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;">
                                Start Date
                            </label>
                            <input type="date" class="form-control" id="modalStartDate"
                                   style="height:48px; border-radius:10px; background:#162042;
                                      border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem;">
                        </div>
                        <div class="col-md-6">
                            <label style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                      text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;">
                                Start Time
                            </label>
                            <select class="form-select" id="modalStartTime"
                                    style="height:48px; border-radius:10px; background:#162042;
                                       border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem;">
                                <option value="07:00">07:00 AM</option><option value="08:00">08:00 AM</option>
                                <option value="09:00">09:00 AM</option><option value="10:00">10:00 AM</option>
                                <option value="11:00">11:00 AM</option><option value="12:00">12:00 PM</option>
                                <option value="13:00">01:00 PM</option><option value="14:00">02:00 PM</option>
                                <option value="15:00">03:00 PM</option><option value="16:00">04:00 PM</option>
                                <option value="17:00">05:00 PM</option><option value="18:00">06:00 PM</option>
                                <option value="19:00">07:00 PM</option><option value="20:00">08:00 PM</option>
                                <option value="21:00">09:00 PM</option><option value="22:00">10:00 PM</option>
                                <option value="23:00">11:00 PM</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                      text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;">
                                End Date
                            </label>
                            <input type="date" class="form-control" id="modalEndDate"
                                   style="height:48px; border-radius:10px; background:#162042;
                                      border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem;">
                        </div>
                        <div class="col-md-6">
                            <label style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                      text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;">
                                End Time
                            </label>
                            <select class="form-select" id="modalEndTime"
                                    style="height:48px; border-radius:10px; background:#162042;
                                       border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem;">
                                <option value="08:00">08:00 AM</option><option value="09:00">09:00 AM</option>
                                <option value="10:00">10:00 AM</option><option value="11:00">11:00 AM</option>
                                <option value="12:00">12:00 PM</option><option value="13:00">01:00 PM</option>
                                <option value="14:00">02:00 PM</option><option value="15:00">03:00 PM</option>
                                <option value="16:00">04:00 PM</option><option value="17:00">05:00 PM</option>
                                <option value="18:00">06:00 PM</option><option value="19:00">07:00 PM</option>
                                <option value="20:00">08:00 PM</option><option value="21:00">09:00 PM</option>
                                <option value="22:00">10:00 PM</option><option value="23:00">11:00 PM</option>
                                <option value="00:00">12:00 AM</option>
                            </select>
                        </div>
                    </div>

                    {{-- Already booked slots --}}
                    <div id="bookedSlotsBox" class="mb-4" style="display:none;">
                        <div style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;">
                            Already Booked on This Day
                        </div>
                        <div id="bookedSlotsList" class="d-flex flex-wrap gap-2"></div>
                    </div>

                    {{-- Price summary --}}
                    <div class="mb-3"
                         style="border-radius:12px; border:1px solid rgba(245,183,84,0.25);
                            background:rgba(245,183,84,0.07); padding:16px 20px;">
                        <div style="font-size:.7rem; font-weight:700; letter-spacing:.08em;
                                text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:4px;"
                             id="priceLabel">Choose dates to calculate</div>
                        <div class="fw-bolder" id="priceTotal"
                             style="font-size:2rem; line-height:1.1; color:#F5B754;">--</div>
                        <div id="priceNote" style="color:rgba(255,255,255,.5); font-size:.85rem; margin-top:4px;">
                            Select dates to see an estimated price.
                        </div>
                        <div id="priceDiscountNote"
                             style="display:none; font-size:.88rem; color:#34d399; font-weight:700; margin-top:6px;"></div>
                    </div>

                    {{-- Rule info --}}
                    <div id="bookingRulesInfo" class="mb-3"
                         style="display:none; border-radius:10px; padding:12px 16px;
                            background:rgba(37,99,235,.1); border:1px solid rgba(96,165,250,.25);
                            color:rgba(147,197,253,1); font-size:.88rem;"></div>

                    {{-- Error box --}}
                    <div id="bookingRuleError" class="mb-3"
                         style="display:none; border-radius:10px; padding:12px 16px;
                            background:rgba(239,68,68,.12); border:1px solid rgba(248,113,113,.3);
                            color:#fca5a5; font-weight:700; font-size:.88rem;"></div>

                    {{-- Promo code --}}
                    <div>
                        <label style="font-size:.75rem; font-weight:700; color:rgba(255,255,255,.5);
                                  text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;">
                            Promo or Voucher
                        </label>
                        <input type="text" class="form-control" id="promoCodeInput"
                               placeholder="Optional promo code"
                               style="height:48px; border-radius:10px; background:#162042;
                                  border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.9rem;">
                    </div>

                </div>

                <div class="modal-footer"
                     style="background:#0a1628; border-top:1px solid rgba(255,255,255,.08); padding:16px 28px;">
                    <button type="button" class="btn" data-bs-dismiss="modal"
                            style="border-radius:10px; background:rgba(255,255,255,.08);
                               border:1px solid rgba(255,255,255,.12); color:#fff;
                               padding:10px 22px; font-weight:600;">
                        Close
                    </button>
                    <button type="button" id="modalContinueBtn" onclick="continueToCheckout()"
                            style="border-radius:10px; background:#F5B754; border:0; color:#0d1b3e;
                               padding:10px 28px; font-weight:800; font-size:.9rem;
                               letter-spacing:.04em; text-transform:uppercase; transition:background .2s;"
                            onmouseover="this.style.background='#e5a800'"
                            onmouseout="this.style.background='#F5B754'">
                        Continue
                    </button>
                </div>

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

    {{-- ── Availability Modal ── --}}
    <div class="modal fade" id="availabilityModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content" style="border:0; border-radius:20px; overflow:hidden; background:#0d1b3e;">

                <div class="modal-header" style="background:#0a1628; border-bottom:1px solid rgba(245,183,84,0.2); padding:20px 28px;">
                    <div>
                        <h5 class="mb-0 fw-bold" id="availModalProductName"
                            style="color:#fff; font-size:1.3rem; letter-spacing:-0.02em;"></h5>
                        <div class="small mt-1" style="color:rgba(255,255,255,.5);">Click a date to see booked time slots</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4" style="background:#0d1b3e;">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <button id="availPrev" type="button"
                                style="border-radius:8px; background:rgba(255,255,255,.08);
                                   border:1px solid rgba(255,255,255,.12); color:#fff;
                                   padding:6px 16px; font-weight:600; cursor:pointer;">
                            ‹ Prev
                        </button>
                        <div class="fw-bold" id="availMonthLabel" style="color:#F5B754; font-size:1rem;"></div>
                        <button id="availNext" type="button"
                                style="border-radius:8px; background:rgba(255,255,255,.08);
                                   border:1px solid rgba(255,255,255,.12); color:#fff;
                                   padding:6px 16px; font-weight:600; cursor:pointer;">
                            Next ›
                        </button>
                    </div>

                    <div class="d-grid text-center mb-2"
                         style="grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;">
                        @foreach(['Su','Mo','Tu','We','Th','Fr','Sa'] as $wd)
                            <div style="text-transform:uppercase; color:rgba(255,255,255,.4);
                                    font-weight:700; font-size:.72rem; padding:8px 0;">{{ $wd }}</div>
                        @endforeach
                    </div>

                    <div id="availCalDays" class="d-grid"
                         style="grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;"></div>

                    <div id="availLoading" class="text-center py-4 d-none">
                        <div class="spinner-border spinner-border-sm" style="color:#F5B754;"></div>
                        <div class="mt-2" style="color:rgba(255,255,255,.5); font-size:.85rem;">Loading availability...</div>
                    </div>

                    <div id="availDayDetail" class="mt-4" style="display:none;">
                        <div style="border-radius:12px; border:1px solid rgba(245,183,84,0.25);
                                background:rgba(245,183,84,0.06); padding:16px 18px;">
                            <div style="font-size:.72rem; font-weight:700; text-transform:uppercase;
                                    letter-spacing:.07em; color:rgba(255,255,255,.45); margin-bottom:10px;"
                                 id="availDayTitle"></div>
                            <div id="availDaySlots" class="d-flex flex-wrap gap-2"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <form id="checkoutForm" method="GET" action="{{ route('car-rental.checkout') }}" class="d-none">
        <input type="hidden" name="product_id" id="cfProductId">
        <input type="hidden" name="start"      id="cfStart">
        <input type="hidden" name="end"        id="cfEnd">
        <input type="hidden" name="discount_code" id="cfDiscountCode">
    </form>
@endsection
@section('custom-scripts')
    <script>
        // Toggle color dropdown visibility
        function toggleColorDropdown() {
            const menu = document.getElementById('colorDropdownMenu');
            const trigger = document.getElementById('colorDropdownTrigger');

            if (menu.style.display === 'none' || menu.style.display === '') {
                menu.style.display = 'block';
                trigger.setAttribute('aria-expanded', 'true');
            } else {
                menu.style.display = 'none';
                trigger.setAttribute('aria-expanded', 'false');
            }
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            const dropdown = document.getElementById('colorDropdown');
            const menu = document.getElementById('colorDropdownMenu');
            const trigger = document.getElementById('colorDropdownTrigger');

            if (!dropdown.contains(event.target)) {
                menu.style.display = 'none';
                trigger.setAttribute('aria-expanded', 'false');
            }
        });

        // Filter colors by search input
        function filterColors() {
            const searchValue = document.getElementById('colorFilterSearch').value.toLowerCase();
            const options = document.querySelectorAll('#colorOptions [data-color-name]');

            options.forEach(function(option) {
                const colorName = option.getAttribute('data-color-name');
                if (colorName.includes(searchValue)) {
                    option.style.display = 'flex';
                } else {
                    option.style.display = 'none';
                }
            });
        }

        // Update dropdown button text based on selected colors
        function updateColorText() {
            const checkboxes = document.querySelectorAll('input[name="tag[]"]:checked');
            const textSpan = document.getElementById('colorDropdownText');

            if (checkboxes.length === 0) {
                textSpan.textContent = 'All colors';
            } else {
                const selected = Array.from(checkboxes).map(cb => cb.value);
                textSpan.textContent = selected.join(', ');
            }
        }
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('.filter-shell');
            const dropdown = document.getElementById('colorDropdown');
            const trigger = document.getElementById('colorDropdownTrigger');
            const menu = document.getElementById('colorDropdownMenu');
            const searchInput = document.getElementById('colorFilterSearch');
            const summary = document.getElementById('colorDropdownText');
            const checkboxes = Array.from(dropdown.querySelectorAll('input[type="checkbox"][name="tag[]"]'));
            const options = Array.from(dropdown.querySelectorAll('[data-filter-option]'));
            const productDetails = @json($productDetails);
            const selectedDate = @json($date?->toDateString() ?? now()->toDateString());
            const fallbackImage = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23eef2f7"/><text x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" fill="%2394a3b8" font-size="42" font-family="Arial">No Image</text></svg>';
            const detailsModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('detailsModal'));
            const bookNowModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('bookNowModal'));
            const availabilityModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('availabilityModal'));
            const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

            let currentProductId = null;
            let currentBasePrice = '0.00';
            let currentBaseRateLabel = 'Base price';
            let currentBookedSlots = [];
            let availProductId = null;
            let availYear = null;
            let availMonth = null;
            let availData = {};

            const searchFilterInput = document.getElementById('searchFilter');
            if (searchFilterInput) {
                searchFilterInput.addEventListener('input', function () {
                    clearTimeout(this._searchTimer);
                    this._searchTimer = setTimeout(() => this.closest('form').submit(), 500);
                });
            }

            function updateSummary() {
                const selected = checkboxes.filter(function (checkbox) {
                    return checkbox.checked;
                }).map(function (checkbox) {
                    return checkbox.value;
                });
                summary.textContent = selected.length ? selected.join(', ') : 'Filtering';
            }

            function submitFilters() {
                updateSummary();
                form.submit();
            }

            function formatRateText(rateType) {
                return rateType === 'per_hour' ? 'per hour' : rateType === 'per_day' ? 'per day' : rateType === 'per_24_hours' ? 'per 24 hrs' : 'per booking';
            }

            function formatRateSuffix(rateType) {
                return rateType === 'per_hour' ? '/ hour' : rateType === 'per_day' ? '/ day' : rateType === 'per_24_hours' ? '/ 24 hrs' : '/ booking';
            }

            function parseModalDateTime(dateValue, timeValue) {
                if (!dateValue) {
                    return null;
                }

                return new Date(dateValue + 'T' + (timeValue || '00:00') + ':00');
            }

            function formatModalDate(date) {
                return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
            }

            function formatModalTime(date) {
                return String(date.getHours()).padStart(2, '0') + ':' + String(date.getMinutes()).padStart(2, '0');
            }

            function getModalDurationMinutes() {
                const startDateTime = parseModalDateTime(
                    document.getElementById('modalStartDate').value,
                    document.getElementById('modalStartTime').value
                );
                const endDateTime = parseModalDateTime(
                    document.getElementById('modalEndDate').value,
                    document.getElementById('modalEndTime').value
                );

                if (!startDateTime || !endDateTime) {
                    return 60;
                }

                const minutes = Math.round((endDateTime.getTime() - startDateTime.getTime()) / 60000);
                return minutes > 0 ? minutes : 60;
            }

            function syncModalEndWithStart(force) {
                const startDateInput = document.getElementById('modalStartDate');
                const startTimeInput = document.getElementById('modalStartTime');
                const endDateInput = document.getElementById('modalEndDate');
                const endTimeInput = document.getElementById('modalEndTime');

                const startDateTime = parseModalDateTime(startDateInput.value, startTimeInput.value);
                const endDateTime = parseModalDateTime(endDateInput.value, endTimeInput.value);

                if (!startDateTime) {
                    return;
                }

                if (!force && endDateTime && endDateTime > startDateTime) {
                    return;
                }

                const durationMinutes = force ? 60 : getModalDurationMinutes();
                const nextEnd = new Date(startDateTime.getTime() + (durationMinutes * 60000));

                endDateInput.value = formatModalDate(nextEnd);
                endTimeInput.value = formatModalTime(nextEnd);
            }

            function setContinueBtn(enabled, reason) {
                const button = document.getElementById('modalContinueBtn');
                button.disabled = !enabled;
                if (reason) {
                    document.getElementById('priceNote').textContent = reason;
                }
            }

            function showBox(id, message) {
                const box = document.getElementById(id);
                if (!message) {
                    box.style.display = 'none';
                    box.textContent = '';
                    return;
                }
                box.textContent = message;
                box.style.display = 'block';
            }

            function setDetailsHero(src) {
                document.getElementById('detailsHeroImage').src = src || fallbackImage;
                document.querySelectorAll('.details-thumb').forEach(function (thumb) {
                    thumb.classList.toggle('active', thumb.dataset.src === src);
                });
            }

            function slotConflicts(startStr, endStr) {
                const selectedStart = new Date(startStr);
                const selectedEnd = new Date(endStr);
                return currentBookedSlots.some(function (slot) {
                    const slotStart = new Date(startStr.split('T')[0] + 'T' + slot.start);
                    const slotEnd = new Date(startStr.split('T')[0] + 'T' + slot.end);
                    return selectedStart < slotEnd && selectedEnd > slotStart;
                });
            }

            function checkSlotConflict() {
                syncModalEndWithStart(false);
                const startDate = document.getElementById('modalStartDate').value;
                const endDate = document.getElementById('modalEndDate').value;
                if (!startDate || !endDate) {
                    return false;
                }
                const start = startDate + 'T' + (document.getElementById('modalStartTime').value || '07:00');
                const end = endDate + 'T' + (document.getElementById('modalEndTime').value || '08:00');
                if (slotConflicts(start, end)) {
                    const message = 'This time slot overlaps an existing booking. Please choose different times.';
                    showBox('bookingRuleError', message);
                    setContinueBtn(false, message);
                    return true;
                }
                showBox('bookingRuleError', '');
                return false;
            }

            function fetchBookedSlots() {
                const date = document.getElementById('modalStartDate').value;
                if (!date || !currentProductId) {
                    return;
                }
                const box = document.getElementById('bookedSlotsBox');
                const list = document.getElementById('bookedSlotsList');
                box.style.display = 'block';
                list.innerHTML = '<span class="text-muted small">Loading...</span>';
                currentBookedSlots = [];

                fetch('{{ route('car-rental.booked-slots') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ product_id: currentProductId, date: date })
                })
                    .then(function (response) { return response.json(); })
                    .then(function (data) {
                        currentBookedSlots = data.slots || [];
                        if (!currentBookedSlots.length) {
                            box.style.display = 'none';
                            return;
                        }
                        list.innerHTML = currentBookedSlots.map(function (slot) {
                            return '<span class="booked-slots-chip ' + (slot.status === 'paid' ? 'is-paid' : '') + '">' + slot.start_label + ' - ' + slot.end_label + '</span>';
                        }).join('');
                        checkSlotConflict();
                    })
                    .catch(function () {
                        box.style.display = 'none';
                    });
            }

            function fetchPrice() {
                syncModalEndWithStart(false);
                const startDate = document.getElementById('modalStartDate').value;
                const endDate = document.getElementById('modalEndDate').value;
                if (!startDate || !endDate || !currentProductId) {
                    return;
                }
                const start = startDate + 'T' + (document.getElementById('modalStartTime').value || '07:00') + ':00';
                const end = endDate + 'T' + (document.getElementById('modalEndTime').value || '08:00') + ':00';

                document.getElementById('priceLabel').textContent = 'Calculating price';
                document.getElementById('priceTotal').textContent = '...';
                document.getElementById('priceNote').textContent = 'Checking the selected booking time.';
                showBox('priceDiscountNote', '');
                showBox('bookingRuleError', '');
                setContinueBtn(false);

                fetch('{{ route('car-rental.calculate-price') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        product_id: currentProductId,
                        start: start,
                        end: end,
                        discount_code: (document.getElementById('promoCodeInput').value || '').trim()
                    })
                })
                    .then(function (response) {
                        return response.json().then(function (data) {
                            if (!response.ok) throw data;
                            return data;
                        });
                    })
                    .then(function (data) {
                        document.getElementById('priceLabel').textContent = 'Estimated price';
                        document.getElementById('priceTotal').textContent = '$' + data.subtotal;
                        document.getElementById('priceNote').textContent = (data.rate_label || 'Estimated pricing') + ' · Taxes & fees added at checkout';
                        showBox('priceDiscountNote', parseFloat(data.discount || 0) > 0 ? 'Discount applied: -$' + data.discount : '');
                        if (!checkSlotConflict()) {
                            setContinueBtn(true);
                        }
                    })
                    .catch(function (error) {
                        document.getElementById('priceLabel').textContent = currentBaseRateLabel;
                        document.getElementById('priceTotal').textContent = '$' + currentBasePrice;
                        const message = error && error.errors && error.errors.start ? error.errors.start[0] : 'This date/time is unavailable. Please choose different dates.';
                        showBox('bookingRuleError', message);
                        setContinueBtn(false, message);
                    });
            }

            function renderAvailabilityCalendar(data) {
                const bookedByDate = data.booked_by_date || {};
                const closedDates = new Set(data.closed_dates || []);
                const today = new Date();
                today.setHours(0, 0, 0, 0);
                const firstDay = new Date(availYear, availMonth - 1, 1).getDay();
                const daysInMonth = new Date(availYear, availMonth, 0).getDate();
                const container = document.getElementById('availCalDays');
                document.getElementById('availDayDetail').style.display = 'none';

                let html = '';
                for (let blank = 0; blank < firstDay; blank += 1) {
                    html += '<div></div>';
                }
                for (let day = 1; day <= daysInMonth; day += 1) {
                    const dateString = availYear + '-' + String(availMonth).padStart(2, '0') + '-' + String(day).padStart(2, '0');
                    const date = new Date(dateString + 'T00:00:00');
                    const isPast = date < today;
                    const isClosed = closedDates.has(dateString);
                    const isPartial = !!bookedByDate[dateString];
                    const style = isPast
                        ? 'background:#f8fafc;color:#94a3b8;'
                        : isClosed
                            ? 'background:#e2e8f0;color:#475569;'
                            : isPartial
                                ? 'background:#ffedd5;color:#c2410c;'
                                : 'background:#dcfce7;color:#166534;';
                    html += '<button type="button" class="border-0 rounded-3 fw-bold" style="min-height:48px;' + style + '" data-date="' + dateString + '" ' + (isPast || isClosed ? 'disabled' : '') + '>' + day + '</button>';
                }
                container.innerHTML = html;
                container.querySelectorAll('[data-date]').forEach(function (button) {
                    button.addEventListener('click', function () {
                        const dateString = this.dataset.date;
                        const slots = bookedByDate[dateString] || [];
                        document.getElementById('availDayTitle').textContent = new Date(dateString + 'T00:00:00').toLocaleDateString('en-US', {
                            weekday: 'long',
                            month: 'long',
                            day: 'numeric',
                            year: 'numeric'
                        });
                        document.getElementById('availDaySlots').innerHTML = slots.length
                            ? slots.map(function (slot) {
                                return '<span class="booked-slots-chip ' + (slot.status === 'paid' ? 'is-paid' : '') + '">' + slot.start_label + ' - ' + slot.end_label + '</span>';
                            }).join('')
                            : '<span class="text-success fw-semibold">Fully available on this day.</span>';
                        document.getElementById('availDayDetail').style.display = 'block';
                    });
                });
            }

            function loadAvailabilityMonth() {
                const key = availYear + '-' + String(availMonth).padStart(2, '0');
                document.getElementById('availMonthLabel').textContent = monthNames[availMonth - 1] + ' ' + availYear;
                document.getElementById('availLoading').classList.remove('d-none');
                document.getElementById('availCalDays').innerHTML = '';

                if (availData[key]) {
                    document.getElementById('availLoading').classList.add('d-none');
                    renderAvailabilityCalendar(availData[key]);
                    return;
                }

                fetch('{{ route('car-rental.check-availability') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ product_id: availProductId, year: availYear, month: availMonth })
                })
                    .then(function (response) { return response.json(); })
                    .then(function (data) {
                        availData[key] = data;
                        renderAvailabilityCalendar(data);
                    })
                    .finally(function () {
                        document.getElementById('availLoading').classList.add('d-none');
                    });
            }

            window.openDetails = function (id) {
                const product = productDetails[id];
                if (!product) return;

                document.getElementById('detailsProductName').textContent = product.name || 'Vehicle';
                document.getElementById('detailsCategoryLine').textContent = product.category || 'Car Rental';
                document.getElementById('detailsPriceAmount').innerHTML = '$' + Number(product.price || 0).toFixed(2) + ' <small style="font-size:.95rem;font-weight:600;color:#64748b;">' + formatRateSuffix(product.rate_type) + '</small>';
                document.getElementById('detailsDescription').innerHTML = product.description || '<p>No additional details available.</p>';

                const pills = [];
                pills.push('<span class="badge rounded-pill ' + (product.available ? 'bg-label-success' : 'bg-label-danger') + '">' + (product.available ? 'Available' : 'Unavailable') + '</span>');
                if (product.category) pills.push('<span class="badge rounded-pill bg-label-primary">' + product.category + '</span>');
                (product.tags || []).forEach(function (tag) {
                    pills.push('<span class="badge rounded-pill bg-label-secondary">' + tag + '</span>');
                });
                document.getElementById('detailsMeta').innerHTML = pills.join('');

                const photos = product.photos || [];
                const hero = photos.length ? photos[0] : fallbackImage;
                setDetailsHero(hero);
                document.getElementById('detailsGallery').innerHTML = photos.length > 1
                    ? photos.map(function (photo, index) {
                        return '<img src="' + photo + '" class="details-thumb ' + (index === 0 ? 'active' : '') + '" data-src="' + photo + '" alt="Vehicle photo" style="width:100%;height:78px;object-fit:cover;border-radius:12px;cursor:pointer;">';
                    }).join('')
                    : '';
                document.querySelectorAll('.details-thumb').forEach(function (thumb) {
                    thumb.addEventListener('click', function () {
                        setDetailsHero(this.dataset.src);
                    });
                });

                document.getElementById('detailsAvailabilityBtn').onclick = function () {
                    detailsModal.hide();
                    openAvailability(product.id, product.name);
                };
                document.getElementById('detailsBookBtn').onclick = function () {
                    detailsModal.hide();
                    openBookNow(product.id, product.name, String(product.price || 0), product.rate_type || '', product.available);
                };

                detailsModal.show();
            };
            window.homeOpenDetails = function(id) {
                openDetails(id);
            };

            window.openBookNow = function (id, name, price, rateType, available) {
                currentProductId = id;
                currentBasePrice = parseFloat(price || 0).toFixed(2);
                currentBaseRateLabel = 'Base price ' + formatRateText(rateType);

                document.getElementById('modalProductName').textContent = name;
                document.getElementById('modalPriceLine').textContent = '$' + currentBasePrice + ' ' + formatRateText(rateType);
                document.getElementById('modalStartDate').value = selectedDate;
                document.getElementById('modalStartTime').value = '07:00';
                document.getElementById('modalEndDate').value = selectedDate;
                document.getElementById('modalEndTime').value = '08:00';
                syncModalEndWithStart(true);
                document.getElementById('promoCodeInput').value = '';
                showBox('priceDiscountNote', '');
                showBox('bookingRuleError', '');
                showBox('bookingRulesInfo', available ? 'Choose your booking dates and continue to checkout.' : 'This vehicle is currently unavailable for online booking.');

                const status = document.getElementById('modalStatusBadge');
                status.textContent = available ? 'Available' : 'Unavailable';
                status.style.background = available ? '#d9f99d' : '#fecaca';
                status.style.color = available ? '#365314' : '#991b1b';

                setContinueBtn(false);
                fetchBookedSlots();
                fetchPrice();
                bookNowModal.show();
            };

            window.continueToCheckout = function () {
                const startDate = document.getElementById('modalStartDate').value;
                const endDate = document.getElementById('modalEndDate').value;
                if (!startDate || !endDate || document.getElementById('modalContinueBtn').disabled) {
                    return;
                }
                document.getElementById('cfProductId').value = currentProductId;
                document.getElementById('cfStart').value = startDate + 'T' + document.getElementById('modalStartTime').value + ':00';
                document.getElementById('cfEnd').value = endDate + 'T' + document.getElementById('modalEndTime').value + ':00';
                document.getElementById('cfDiscountCode').value = (document.getElementById('promoCodeInput').value || '').trim();
                document.getElementById('checkoutForm').submit();
            };

            window.openAvailability = function (id, name) {
                availProductId = id;
                const now = new Date();
                availYear = now.getFullYear();
                availMonth = now.getMonth() + 1;
                availData = {};
                document.getElementById('availModalProductName').textContent = name;
                loadAvailabilityMonth();
                availabilityModal.show();
            };

            trigger.addEventListener('click', function () {
                menu.classList.toggle('d-none');
                trigger.setAttribute('aria-expanded', menu.classList.contains('d-none') ? 'false' : 'true');
                if (!menu.classList.contains('d-none')) {
                    searchInput.focus();
                }
            });

            document.addEventListener('click', function (event) {
                if (!dropdown.contains(event.target)) {
                    menu.classList.add('d-none');
                    trigger.setAttribute('aria-expanded', 'false');
                }
            });

            searchInput.addEventListener('input', function () {
                const term = searchInput.value.trim().toLowerCase();
                options.forEach(function (option) {
                    option.classList.toggle('d-none', !option.dataset.name.includes(term));
                });
            });

            checkboxes.forEach(function (checkbox) {
                checkbox.addEventListener('change', submitFilters);
            });

            ['modalEndDate', 'modalEndTime'].forEach(function (id) {
                document.getElementById(id).addEventListener('change', fetchPrice);
            });
            ['modalStartDate', 'modalStartTime'].forEach(function (id) {
                document.getElementById(id).addEventListener('change', function () {
                    syncModalEndWithStart(false);
                    if (id === 'modalStartDate') {
                        fetchBookedSlots();
                    }
                    fetchPrice();
                });
            });
            document.getElementById('promoCodeInput').addEventListener('change', fetchPrice);
            document.getElementById('availPrev').addEventListener('click', function () {
                availMonth -= 1;
                if (availMonth < 1) {
                    availMonth = 12;
                    availYear -= 1;
                }
                loadAvailabilityMonth();
            });
            document.getElementById('availNext').addEventListener('click', function () {
                availMonth += 1;
                if (availMonth > 12) {
                    availMonth = 1;
                    availYear += 1;
                }
                loadAvailabilityMonth();
            });

            updateSummary();
        });

    </script>
@endsection