@extends('layouts.master')
@section('content')

    <!-- Page Header Section Start -->
    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">{{$product->name}}</h1>
                        <nav class="wow fadeInUp" >
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('home')}}">home</a></li>
                                <li class="breadcrumb-item"><a href="#">/</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{$product->name}}</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Section End -->

    <!-- Page Fleet Single Start -->
    <div class="page-fleet-single">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <!-- Page Single Sidebar Start -->
                    <div class="page-single-sidebar">
                        <!-- Page Details Box Start -->
                        <form method="GET" action="{{ route('car-rental.checkout') }}" id="carRentalBookingForm">
                            <input type="hidden" name="product_id" value="{{ $product->id }}">

                            <div class="fleet-details-box wow fadeInUp">
                                <div class="fleet-detail-box-header">
                                    <h2>$ {{ number_format((float) $product->display_price, 2) }}</h2>
                                </div>

                                <div class="fleet-detail-box-body">
                                    <div class="booking-fields">
                                        <div class="booking-field-row">
                                            <label for="startInput">Start</label>
                                            <input type="datetime-local" name="start" id="startInput" required
                                                   value="{{ request('start', now()->addHour()->format('Y-m-d\TH:i')) }}">
                                        </div>
                                        <div class="booking-field-row">
                                            <label for="endInput">End</label>
                                            <input type="datetime-local" name="end" id="endInput" required
                                                   value="{{ request('end', now()->addHours(4)->format('Y-m-d\TH:i')) }}">
                                        </div>
                                        <div class="booking-field-row">
                                            <label for="discountCodeInput">Discount Code</label>
                                            <input type="text" name="discount_code" id="discountCodeInput"
                                                   value="{{ request('discount_code') }}" placeholder="Optional">
                                        </div>

                                        <div class="booking-field-row estimate-row">
                                            <span>Estimated Total</span>
                                            <strong id="estimateTotal">--</strong>
                                        </div>
                                        <p id="estimateMeta">Choose start and end time to calculate pricing.</p>
                                    </div>
                                </div>

                                <div class="fleet-detail-box-btn">
                                    <button type="submit" class="btn-default" {{ $product->is_available ? '' : 'disabled' }}>
                                        Book Now
                                    </button>
                                </div>
                            </div>
                        </form>
                        <!-- Page Details Box End -->

                        <!-- Sidebar CTA Box Start -->
                        <div class="sidebar-cta-box wow fadeInUp" data-wow-delay="0.25s">
                            <!-- Sidebar CTA Review Body Start -->
                            <div class="sidebar-cta-review-body">
                                <!-- Review Rating Box Start -->
                                <div class="sidebar-cta-review-counter">
                                    <h2><span class="counter">4.5</span></h2>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <!-- Review Rating Box End -->

                                <!-- Sidebar CTA Client Box Start -->
                                <div class="sidebar-cta-client-box">
                                    <!-- Satisfy Client Images Start -->
                                    <div class="satisfy-client-images">
                                        <div class="satisfy-client-image">
                                            <figure class="image-anime reveal">
                                                <img src="{{asset('assets/images/author-1.jpg')}}" alt="">
                                            </figure>
                                        </div>
                                        <div class="satisfy-client-image">
                                            <figure class="image-anime reveal">
                                                <img src="{{asset('assets/images/author-2.jpg')}}" alt="">
                                            </figure>
                                        </div>
                                        <div class="satisfy-client-image">
                                            <figure class="image-anime reveal">
                                                <img src="{{asset('assets/images/author-3.jpg')}}" alt="">
                                            </figure>
                                        </div>
                                        <div class="satisfy-client-image">
                                            <figure class="image-anime reveal">
                                                <img src="{{asset('assets/images/author-4.jpg')}}" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                    <!-- Satisfy Client Images End -->

                                    <!-- Satisfy CTA Client Content Start -->
                                    <div class="sidebar-cta-client-content">
                                        <p>Our customer review</p>
                                    </div>
                                    <!-- Satisfy CTA Client Content End -->
                                </div>
                                <!-- Sidebar CTA Client Box End -->
                            </div>
                            <!-- Sidebar CTA Review Body End -->

                            <!-- Sidebar CTA Contact Button Start -->
                            <div class="sidebar-cta-contact-btn">
                                <a href="tel:+123456789"><i class="fa-solid fa-phone"></i> {{$businessSetup->phone}}</a>
                            </div>
                            <!-- Sidebar CTA Contact Button End -->
                        </div>
                        <!-- Sidebar CTA Box End -->
                    </div>
                    <!-- Page Single Sidebar End -->
                </div>

                <div class="col-lg-8">
                    <!-- Fleet Single Content Start -->
                    <div class="fleet-single-content">
                        <!-- Page Single Image Sidebar Start -->
                        <div class="page-single-image-slider wow fadeInUp">
                            <div class="swiper">
                                <div class="swiper-wrapper" data-cursor-text="Drag">
                                    @php $mainPhoto = $product->photos->first(); @endphp
                                        <!-- Swiper Slide Start -->
                                    <div class="swiper-slide">
                                        <figure class="image-anime">
                                            @if($mainPhoto)
                                                <img src="{{ asset($mainPhoto->path) }}" alt="{{ $product->name }}">
                                            @else
                                            <img src="images/fleets-image-1.jpg" alt="">
                                            @endif
                                        </figure>
                                    </div>
                                    <!-- Swiper Slide End -->

                                    <!-- Swiper Slide End -->
                                </div>
                                <div class="page-single-image-pagination"></div>
                            </div>
                        </div>
                        <!-- Page Single Image Sidebar End -->

                        <!-- Fleet Information Box Start -->
                        <div class="fleet-information-box">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <span class="section-sub-title wow fadeInUp">General Information about vehicle</span>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">{!!$product->description!!}</p>
                            </div>
                            <!-- Section Title End -->
                        </div>
                        <!-- Fleet Information Box End -->

                        <!-- Page Single FAQs Start -->
                        <div class="page-single-faqs">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <h2 class="text-anime-style-3" data-cursor="-opaque">Frequently asked questions.</h2>
                            </div>
                            <!-- Section Title End -->

                            <!-- FAQ Accordion Start -->
                            <div class="faq-accordion" id="accordion">
                                <!-- FAQ Item Start -->
                                <div class="accordion-item wow fadeInUp">
                                    <h2 class="accordion-header" id="heading1">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                            Q1. What documents are required to rent a car here?
                                        </button>
                                    </h2>
                                    <div id="collapse1" class="accordion-collapse collapse show" role="region" aria-labelledby="heading1" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>Yes, we provide convenient pickup and drop-off services at selected locations, including airports, hotels, and major city points.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- FAQ Item End -->

                                <!-- FAQ Item Start -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s">
                                    <h2 class="accordion-header" id="heading2">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                            Q2. What is the minimum age required for renting cars?
                                        </button>
                                    </h2>
                                    <div id="collapse2" class="accordion-collapse collapse" role="region" aria-labelledby="heading2" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>Yes, we provide convenient pickup and drop-off services at selected locations, including airports, hotels, and major city points.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- FAQ Item End -->

                                <!-- FAQ Item Start -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s">
                                    <h2 class="accordion-header" id="heading3">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                            Q3. Do you provide pickup and drop off services everywhere?
                                        </button>
                                    </h2>
                                    <div id="collapse3" class="accordion-collapse collapse" role="region" aria-labelledby="heading3" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>Yes, we provide convenient pickup and drop-off services at selected locations, including airports, hotels, and major city points.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- FAQ Item End -->

                                <!-- FAQ Item Start -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.6s">
                                    <h2 class="accordion-header" id="heading4">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                            Q4. What payment methods do you accept for rentals currently?
                                        </button>
                                    </h2>
                                    <div id="collapse4" class="accordion-collapse collapse" role="region" aria-labelledby="heading4" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>Yes, we provide convenient pickup and drop-off services at selected locations, including airports, hotels, and major city points.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- FAQ Item End -->

                                <!-- FAQ Item Start -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.8s">
                                    <h2 class="accordion-header" id="heading5">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
                                            Q5. Is customer support available twenty four hours every day?
                                        </button>
                                    </h2>
                                    <div id="collapse5" class="accordion-collapse collapse" role="region" aria-labelledby="heading5" data-bs-parent="#accordion">
                                        <div class="accordion-body">
                                            <p>Yes, we provide convenient pickup and drop-off services at selected locations, including airports, hotels, and major city points.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- FAQ Item End -->
                            </div>
                            <!-- FAQ Accordion End -->
                        </div>
                        <!-- Page Single FAQs End -->
                    </div>
                    <!-- Fleet Single Content End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Fleet Single End -->
@endsection
@section('custom-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const startInput = document.getElementById('startInput');
            const endInput = document.getElementById('endInput');
            const discountCodeInput = document.getElementById('discountCodeInput');
            const estimateTotal = document.getElementById('estimateTotal');
            const estimateMeta = document.getElementById('estimateMeta');

            async function refreshEstimate() {
                if (!startInput.value || !endInput.value) {
                    return;
                }

                const startDate = new Date(startInput.value);
                const endDate = new Date(endInput.value);
                if (!(endDate > startDate)) {
                    estimateTotal.textContent = '--';
                    estimateMeta.textContent = 'End time must be after the start time.';
                    return;
                }

                estimateMeta.textContent = 'Calculating...';

                const response = await 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: {{ $product->id }},
                        start: startInput.value.replace('T', ' '),
                        end: endInput.value.replace('T', ' '),
                        discount_code: discountCodeInput.value || null
                    })
                });

                const data = await response.json();
                if (!response.ok) {
                    estimateTotal.textContent = '--';
                    estimateMeta.textContent = data.message || 'Pricing could not be calculated for the selected dates.';
                    return;
                }

                estimateTotal.textContent = '$' + data.total;
                estimateMeta.textContent = (data.rate_label || 'Estimated pricing') + ' including taxes and discounts.';
            }

            startInput.addEventListener('change', refreshEstimate);
            endInput.addEventListener('change', refreshEstimate);
            discountCodeInput.addEventListener('change', refreshEstimate);

            refreshEstimate();
        });
    </script>
@endsection