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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
{{-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> --}}

<main>
    <!-- Desktop Breadcrumb -->
    <section class="py-md-4 py-2">
        <div class="container">
            <nav class="breadcrumb-container" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('Home') }}"> @lang('site.home') </a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)"> {{ $car->name ?? '' }} </a>
                    </li>
                    <li class="breadcrumb-item text-gray-4" aria-current="page">
                        حجز سيارة
                    </li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- section -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 d-md-flex align-items-center justify-content-between">
                    <div>
                        <h2 class="pt-3">{{ $car->name ?? '' }}</h2>
                        <div class="d-flex align-items-center mt-3">
                            <div class="department-badge bg-main text-white">
                                <div class="pt-1">{{ round($car->carReview2()) }}</div>
                                <div>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                            <div class="number-ads gray-txt">@lang('site.comments') {{ $car->carComment->count() ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div
                        class="badge-ads-details bg-main round-border d-flex align-items-center justify-content-center mt-md-0 mt-3">
                        @lang('site.id number')({{ $car->id }})
                    </div>
                </div>
                <form class="form py-5" id="add-form">
                    @csrf
                    <div class="col-12">

                        <div class="wizard-tabs d-flex justify-content-center py-3">
                            <div class="wizard">
                                <div class="wizard-bar" style="width: 0" data-wizard-bar></div>

                                <ul class="wizard-list ps-0">
                                    <li>
                                        <div class="d-flex">
                                            <div class="wizard-item" data-wizard-item>
                                                <div class="d-flex justify-content-center">
                                                    <div class="wizard-item-round">1</div>
                                                </div>

                                                <div>
                                                    <div class="wizard-item-text">
                                                        <span>
                                                            <i class="far fa-book-open"></i>
                                                        </span>

                                                        <span class="wizard-item-t">@lang('site.book')</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="d-flex justify-content-center">
                                            <div class="wizard-item" data-wizard-item>
                                                <div class="d-flex justify-content-center">
                                                    <div class="wizard-item-round">2</div>
                                                </div>

                                                <div class="wizard-item-text">
                                                    <span>
                                                        <i class="far fa-user"></i>
                                                    </span>
                                                    <span class="wizard-item-t">@lang('site.personal') </span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="d-flex justify-content-end">
                                            <div class="wizard-item" data-wizard-item>
                                                <div class="d-flex justify-content-center wizard-end">
                                                    <div class="wizard-item-round">3</div>
                                                </div>

                                                <div class="wizard-item-text">
                                                    <span>
                                                        <i class="far fa-check-circle"></i>
                                                    </span>
                                                    <span class="wizard-item-t">@lang('site.reservation confirmation')
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-content-wizard active py-lg-5 pt-3" data-form-tab>
 <!-- حجز ب سعر واحد  -->
                            <!-- <div class="row">
                                <div class="col-lg-6">
                                    <div class="card-booking py-lg-4 px-lg-3 p-3 mb-lg-0 mb-3">
                                        <div class="row">
                                            <div class="col-12">
                                                <h2 class="mb-4 text-gray">@lang('site.Choose your reservation date')
                                                </h2>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder="{{ trans('site.reciept_date') }} " type="text"
                                                        name="reciept_date" id="datepicker" required
                                                        class="calendar mb-4 reciept_date " />
                                                    <span class="date-icon">
                                                        <i class="fal fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder="{{ trans('site.delivery_date') }} " type="text"
                                                        name="delivery_date" id="datepicker1" required
                                                        class="calendar mb-4 delivery_date" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder=" {{ trans('site.Receipt hour') }}" type="text"
                                                        name="receipt_hour" id="timepicker" required
                                                        class="form-control mb-4 date-input" />

                                                    <span class="date-icon">
                                                        <i class="fal fa-clock"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder="{{ trans('site.delivery hour') }}" type="text"
                                                        name="delivery_hour" id="timepicker1" required
                                                        class="form-control mb-4 date-input" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-clock"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input type="text" name="place_arrive" id="reciept_place"
                                                        placeholder="{{ trans('site.reciept place') }}"
                                                        class="form-control mb-4 date-input" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-map-marker-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input type="text" name="place_leave" id="delivery_place"
                                                        placeholder="{{ trans('site.delivery place') }}"
                                                        class="form-control mb-4 date-input" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-map-marker-alt"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <h2 class="text-gray mb-3">
                                                    @lang('site.Reservation and cancellation policy')
                                                </h2>
                                            </div>
                                            <div class="col-12">
                                                <div class="condition-content condition-contentt mb-3  pb-0">
                                                    
                                                    <p class="details-sm-txt padding-right">
                                                        @lang('site.Please follow the site policy')
                                                    </p>
                                                </div>
                                                <div class="condition-content condition-contentt mb-3 pb-0">
                                                    <h2 class="condition-title text-second">
                                                        @lang('site.Arrival dates')
                                                        <div
                                                            class="badge-condition round-border d-flex justify-content-center align-items-center"
                                                            style="background-color:#FEEEBA; color:#FF8600;">
                                                            {{ $car->car_delivery_date ?? '' }}
                                                        </div>
                                                    </h2>
                                                    <p class="details-sm-txt padding-right">
                                                        @lang('site.Please follow the site policy')
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="booking-main-img">

                                        <img src="{{ $car->main_image_ads }}"
                                            {{-- <img src="{{ asset('images/cars/' . $car->main_image_ads) }}" --}}
                                            onerror="this.src='{{ FRONTASSETS }}/images/cars/car-wizard.png'" alt="" />
                                    </div>
                                </div>
                            </div> -->


                            <!-- حجز ب اكثر من سعر لعدد الايام  -->

                            <div class="row">
                                <div class="col-lg-6">

                                    <div class="row">
                                        <div class="card-booking py-lg-4 px-lg-3 p-3 mb-lg-0 mb-3">
                                            <div class="col-12">
                                                <h2 class="mb-4 text-gray">@lang('site.Choose your reservation date')
                                                </h2>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder="{{ trans('site.reciept_date') }} " type="text"
                                                        name="reciept_date" id="datepicker" required
                                                        class="calendar mb-4 reciept_date " />
                                                    <span class="date-icon">
                                                        <i class="fal fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder="{{ trans('site.delivery_date') }} " type="text"
                                                        name="delivery_date" id="datepicker1" required
                                                        class="calendar mb-4 delivery_date" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input placeholder=" {{ trans('site.Receipt hour') }}" type="text"
                                                        name="receipt_hour" id="timepicker" required
                                                        class="form-control mb-4 date-input" />

                                                    <span class="date-icon">
                                                        <i class="fal fa-clock"></i>
                                                    </span>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="card-booking py-lg-4 px-lg-3 p-3 mb-lg-0 mb-3 mt-3">
                                            <div class="col-12">
                                                <h2 class="mb-4 text-gray">اختر السعر</h2>
                                            </div>
                                            <div class="col-12 ">
                                                <div class="d-flex justify-content-between">
                                                    <div class="radio-input d-flex ">
                                                        <input type="radio" name="options" id="" required 
                                                            style=" height: 16px; width: 25px; margin-top: 5px;" />
                                                        <p class="me-1" style="color:#005D9F;">سعر الايجار 4 ايام</p>
                                                    </div>
                                                    <div class="badge-condition round-border d-flex justify-content-center align-items-center"
                                                        style="background-color:#FEEEBA; color:#FF8600;">
                                                        1000 درهم مغربى
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <div class="radio-input d-flex ">
                                                        <input type="radio" name="options" id="" required
                                                            style=" height: 16px; width: 25px; margin-top: 5px;" />
                                                        <p class="me-1" style="color:#005D9F;"> سعر الايجار 5 ايام</p>
                                                    </div>
                                                    <div class="badge-condition round-border d-flex justify-content-center align-items-center"
                                                        style="background-color:#FEEEBA; color:#FF8600;">
                                                        1000 درهم مغربى
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <div class="radio-input d-flex ">
                                                        <input type="radio" name="options" id="" required
                                                            style=" height: 16px; width: 25px; margin-top: 5px;" />
                                                        <p class="me-1" style="color:#005D9F;"> سعر الايجار 7 ايام</p>
                                                    </div>
                                                    <div class="badge-condition round-border d-flex justify-content-center align-items-center"
                                                        style="background-color:#FEEEBA; color:#FF8600;">
                                                        1000 درهم مغربى
                                                    </div>
                                                </div>
                                            </div>


                                        </div>

                                        <div class="card-booking py-lg-4 px-lg-3 p-3 mb-lg-0 mb-3 mt-3">
                                            <div class="col-12">
                                                <h2 class="mb-4 text-gray">اختر مكان التسليم</h2>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input type="text" name="place_arrive" id="reciept_place"
                                                        placeholder="{{ trans('site.reciept place') }}"
                                                        class="form-control mb-4 date-input" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-map-marker-alt"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="position-relative">
                                                    <input type="text" name="place_leave" id="delivery_place"
                                                        placeholder="{{ trans('site.delivery place') }}"
                                                        class="form-control mb-4 date-input" />
                                                    <span class="date-icon">
                                                        <i class="fal fa-map-marker-alt"></i>
                                                    </span>
                                                </div>
                                            </div>


                                        </div>
                                        <div class="card-booking py-lg-4 px-lg-3 p-3 mb-lg-0 mb-3 mt-3">
                                        <div class="col-12">
                                                    <h2 class="text-gray mb-3">
                                                        @lang('site.Reservation and cancellation policy')
                                                    </h2>
                                                </div>
                                                <div class="col-12">
                                                    <div class="condition-content condition-contentt mb-3  pb-0">
                                                        <!-- <h2 class="condition-title text-second">
                                                            @lang('site.allownumber')
                                                            <div
                                                                class="badge-condition round-border d-flex justify-content-center align-items-center">
                                                                {{ $car->personnumber ?? 0 }}

                                                            </div>
                                                        </h2> -->
                                                        <p class="details-sm-txt padding-right">
                                                            @lang('site.Please follow the site policy')
                                                        </p>
                                                    </div>
                                                    <div class="condition-content condition-contentt mb-3 pb-0">
                                                        <h2 class="condition-title text-second">
                                                            @lang('site.Arrival dates')
                                                            <div
                                                                class="badge-condition round-border d-flex justify-content-center align-items-center"
                                                                style="background-color:#FEEEBA; color:#FF8600;">
                                                                {{ $car->car_delivery_date ?? '' }}
                                                            </div>
                                                        </h2>
                                                        <p class="details-sm-txt padding-right">
                                                            @lang('site.Please follow the site policy')
                                                        </p>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
</div>
                                <div class="col-lg-6">
                                    <div class="booking-main-img">

                                        <img src="{{ $car->main_image_ads }}"
                                            {{-- <img src="{{ asset('images/cars/' . $car->main_image_ads) }}" --}}
                                            onerror="this.src='{{ FRONTASSETS }}/images/cars/car-wizard.png'" alt="" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

<!-- end  -->


                    <div class="form-content-wizard py-lg-5 pt-3" data-form-tab>
                        <div class="row">
                            <div class="col-12">
                                <h2 class="mb-3 text-gray-2"> @lang('site.details')</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="card-booking mb-5">
                                    <div class="d-flex justify-content-between py-lg-4 px-lg-3 p-3">
                                        <div>
                                            <div class="d-flex align-items-center pb-3">
                                                <span class="time-ic">
                                                    <i class="fal fa-calendar-alt"></i>
                                                </span>
                                                <span class="text-second dd-txt pe-2">
                                                    @lang('site.reciept_date')
                                                </span>
                                            </div>
                                            <div class="card-booking p-md-3 text-center">

                                                <div class="text-gray-4 pt-1" id="reciept_datediv">
                                                    {{-- {{ $car->reciept_date ?? '' }} --}}
                                                </div>

                                            </div>
                                        </div>
                                        <div>
                                            <div class="d-flex align-items-center pb-3">
                                                <span class="time-ic">
                                                    <i class="fal fa-calendar-alt"></i>
                                                </span>
                                                <span class="text-second dd-txt pe-2">@lang('site.delivery_date')</span>
                                            </div>
                                            <div class="card-booking p-md-3 text-center">
                                                <div class="text-gray-4 pt-1" id="delivery_datediv">
                                                    {{-- {{ $car->reciept_date ?? '' }} --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="hr-saeeh my-0" />
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-clock"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2">
                                                @lang('site.Receipt hour')
                                            </span>
                                        </div>
                                        <div class="text-gray-2 d-flex align-items-center justify-content-center booking-data"
                                            id="reciept_hourdiv">
                                            {{--  {{$car->carbooking->delivery_hour ?? ''}} --}}

                                        </div>
                                    </div>
                                    <hr class="hr-saeeh my-0" />
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-clock"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2">
                                                @lang('site.delivery hour')
                                            </span>
                                        </div>
                                        <div class="text-gray-2 d-flex align-items-center justify-content-center booking-data"
                                            id="delivery_hourdiv">
                                            {{-- {{$car->carbooking->receipt_hour ?? ''}} --}}
                                        </div>
                                    </div>
                                    <hr class="hr-saeeh my-0" />
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-cloud-sun"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2"> @lang('site.day_numbers')
                                            </span>
                                        </div>
                                        <div
                                            class="text-gray d-flex align-items-center justify-content-center booking-data">
                                            <p id="daycount">


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

                                </div>

                                <div class="card-booking mb-4">
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-car-side"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2">@lang('site.category')</span>
                                        </div>
                                        <div
                                            class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                            {{ $car->categories->name_ar ?? '' }}

                                        </div>
                                    </div>
                                    <hr class="hr-saeeh my-0" />
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-car-side"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2"> @lang('site.year') </span>
                                        </div>
                                        <div
                                            class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                            {{ $car->year ?? '' }}
                                        </div>
                                    </div>
                                    <hr class="hr-saeeh my-0" />
                                    <div class="d-flex justify-content-between py-2 px-3">
                                        <div class="d-flex align-items-center">
                                            <span class="booking-icon">
                                                <i class="fal fa-palette"></i>
                                            </span>
                                            <span class="text-second dd-txt pe-2"> @lang('site.color') </span>
                                        </div>

                                        {{-- <div
                                                class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                                {{ $car->color ?? '' }}

                                    </div>
                                    --}}
                                    <div
                                        class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                        {{-- {{$booking->car->color ?? ''}} --}}
                                        <div style="background-color:{{ $car['color'] ?? '' }}; width:15%;">
                                            <p></p>
                                        </div>
                                    </div>

                                </div>

                                <hr class="hr-saeeh my-0" />
                                <div class="d-flex justify-content-between py-2 px-3">
                                    <div class="d-flex align-items-center">
                                        <span class="booking-icon">
                                            <i class="fal fa-car-side"></i>
                                        </span>
                                        <span class="text-second dd-txt pe-2">
                                            @lang('site.car_numbers')
                                        </span>
                                    </div>
                                    <div
                                        class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                        <!-- {{ $car->car_numbers ?? '0' }} -->
                                        {{ $car->car_numbers ?? '' }}

                                    </div>
                                </div>
                                {{-- <hr class="hr-saeeh my-0" />
                                        <div class="d-flex justify-content-between p-3">
                                            <div class="d-flex align-items-center">
                                                <span class="booking-icon">
                                                    <i class="fal fa-pencil-alt text-second"></i>
                                                </span>
                                                <a class="text-second dd-txt pe-2 booking-link">@lang('site.Modify your selection')
                                                </a>
                                            </div>
                                        </div> --}}
                            </div>
                            <h2 class="mb-3 text-gray-2">@lang('site.Price summary')</h2>
                            @if ($car->fixed_price != null)
                            {{-- fixed --}}
                            <div class="card-booking mb-4">
                                <div class="d-flex justify-content-between py-2 px-3">
                                    <div class="d-flex align-items-center">
                                        <span class="booking-icon">
                                            <i class="fal fa-wallet"></i>
                                        </span>
                                        <span class="text-second dd-txt pe-2"> @lang('site.price_day')</span>
                                    </div>
                                    <div
                                        class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                        {{ $car->fixed_price ? $car->fixed_price . ' ' . ($car->country->currency_ar ?? '') : '' }}

                                    </div>
                                </div>
                                <hr class="hr-saeeh my-0" />

                            </div>
                            <div class="card-booking mb-4 bg-light-orange">
                                <div class="d-flex justify-content-between py-2 px-3">
                                    <div class="d-flex align-items-center">
                                        <span class="booking-icon">
                                            <i class="fal fa-wallet"></i>
                                        </span>
                                        <span class="text-gray-2 dd-txt pe-2"> @lang('site.Reservation deposit')
                                        </span>
                                    </div>
                                    <div
                                        class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                        {{ $car->fixed_price ? $car->fixed_price . ' ' . ($car->country->currency_ar ?? '') : '' }}

                                    </div>
                                </div>
                            </div>
                            <div class="card-booking mb-4 bg-light-blue">
                                <div class="d-flex justify-content-between  p-3">
                                    <div class="d-flex align-items-center">
                                        <span class="booking-icon">
                                            <i class="fal fa-wallet"></i>
                                        </span>
                                        <span class="text-gray-2 dd-txt pe-2">

                                            @lang('site.totalprice')
                                        </span>
                                    </div>

                                    <div class="text-gray-2 d-flex align-items-center justify-content-center summary-price"
                                        id="total">

                                    </div>
                                </div>
                            </div>
                            {{-- fixed end --}}
                            @else
                            {{-- changed --}}
                            <div class="row">
                                @foreach (json_decode($car->changed_price)->day_num as $key => $item)
                                <div class="col-6">
                                    {{-- <div class="card-booking mb-4">
                                                    <div class="d-flex justify-content-between py-2 px-3">
                                                        <div class="d-flex align-items-center">
                                                            <span class="booking-icon">
                                                                <i class="fal fa-wallet"></i>
                                                            </span>
                                                            <span class="text-second dd-txt pe-2"> @lang('site.price')</span>
                                                        </div>
                                                        <div
                                                            class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                                            {{ $aqar->fixed_price ?? 0 }}
                                </div>
                            </div>
                            <hr class="hr-saeeh my-0" />

                        </div> --}}
                        <div class="card-booking mb-4 bg-light-orange">
                            <div class="d-flex justify-content-between py-2 px-3">
                                <div class="d-flex align-items-center">
                                    {{-- <span class="booking-icon">
                                                                    <i class="fal fa-wallet"></i>
                                                                </span> --}}
                                    <input type="radio" id="myCheckbox" name="day_num"
                                        value="{{ json_decode($car->changed_price)->day_num[$key] }}">


                                    <span class="text-gray-2 dd-txt pe-2"> @lang('site.day_numbers')
                                    </span>
                                </div>
                                <div class="text-gray-2 d-flex align-items-center justify-content-center booking-data">
                                    {{ json_decode($car->changed_price)->day_num[$key] }}
                                </div>
                            </div>
                        </div>
                        <div class="card-booking mb-4 bg-light-blue">
                            <div class="d-flex justify-content-between  p-3">
                                <div class="d-flex align-items-center">
                                    <span class="booking-icon">
                                        <i class="fal fa-wallet"></i>
                                    </span>
                                    <span class="text-gray-2 dd-txt pe-2">

                                        @lang('site.totalprice')
                                    </span>
                                </div>

                                <div class="text-gray-2 d-flex align-items-center justify-content-center booking-data">

                                    {{ json_decode($car->changed_price)->price[$key] ? json_decode($car->changed_price)->price[$key] . ' ' . ($car->country->currency_ar ?? '') : '' }}

                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
            </div>
            {{-- changed end --}}
            @endif
        </div>
        <div class="col-lg-7">
            <div class="col-12">
                <div class="card card-department round-border mb-3 p-md-3 p-2">
                    <div class="row g-0">
                        <div class="col-md-4 position-relative">
                            <div class="car-img">
                                <div>
                                    {{-- <img class="department-img-list of-cover"
                                                                src="{{ asset('images/cars/' . $car->main_image_ads) }}"
                                    onerror="this.src='{{ FRONTASSETS }}/images/cars/car-card-1.png'"
                                    alt="image 1" loading="lazy" /> --}}
                                    <img class="department-img-list of-cover" src="{{ $car->main_image_ads }}"
                                        onerror="this.src='{{ FRONTASSETS }}/images/cars/car-wizard.png'" alt="image 1"
                                        loading="lazy" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card-body card-car-body position-relative">
                                <div class="row justify-content-between align-items-center mb-3 small">
                                    <div class="col-auto mb-lg-0 mb-3">
                                        <span class="text-main number-ads">
                                            @lang('site.id number'){{ $car->id }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div class="department-badge bg-main text-white">
                                                <div class="pt-1">
                                                    {{ round($car->carReview2()) }}</div>
                                                <div>
                                                    <i class="fas fa-star"> </i>
                                                </div>
                                            </div>
                                            <div class="number-ads gray-txt">
                                                {{ $car->carComment->count() ?? 0 }}
                                                @lang('site.comments')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h2 class="card-title mb-2">
                                    {{ $car->name ?? '' }}
                                </h2>

                                <div class="gray-txt number-ads pb-2">
                                    <span>{!! strip_tags(html_entity_decode($car->description ?? '')) !!}
                                    </span>
                                </div>
                                <div class="text-gray-2 number-ads d-flex align-items-center">

                                    <div class="d-flex align-items-center">
                                        <div class="ps-2 car-sid-icon">
                                            <i class="fal fa-car-side text-main"></i>
                                        </div>
                                        <div> {{ $car->name ?? '' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-department round-border mb-3 p-3">
                    <h2 class="mb-3">@lang('site.Information that may interest you')</h2>
                    <p class="mb-2 department-txt">
                        @lang('site.It may take a few days for the request to be approved')
                    </p>
                    <p class="department-txt">
                        @lang('site.A reservation deposit is required to confirm the reservation')
                    </p>
                </div>
                @if (!empty(auth()->user()))
                @else
                <div class="card-booking mb-4">
                    <div class="d-flex justify-content-between py-md-4 px-md-3 p-3">
                        <div class="d-flex align-items-center">
                            <span class="booking-icon-x">
                                <i class="far fa-user"></i>
                            </span>
                            <h2 class="text-gray-2 pe-2 mb-0">
                                <a href="{{ route('sitelogin') }}" class="text-second">
                                    @lang('site.login') </a>
                                للحجز بتفاصيل محفوظه او
                                <a href="{{ route('registers') }}" class="text-second">@lang('site.register')</a>
                                جديد
                            </h2>
                        </div>
                    </div>
                </div>
                @endif
                <h2 class="mb-2 text-gray-2">@lang('site.special requests')</h2>
                <div class="d-flex align-items-center">
                    <span class="booking-icon-x">
                        <i class="far fa-question-circle"></i>
                    </span>
                    <h2 class="text-second pe-2 mb-0">
                        @lang('site.If you have an inquiry')
                    </h2>
                </div>
                <div class="col-12">
                    <div class="form-group">
                        <textarea class="form-control txtarea-booking px-3 py-2 mt-2"
                            placeholder="{{ trans('site.If you have an inquiry') }}" rows="4" name="note"></textarea>

                        <input type="hidden" name="car_id" value="{{ $car->id }}" class="car_id">
                        <input type="hidden" name="fixed_price" value="{{ $car->fixed_price ?? 0 }}">
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
        <div class="form-content-wizard py-lg-5 pt-3" data-form-tab>
            <div class="row">
                {{--                                    <div class="col-12"> --}}
                {{--                                        <div class="card-notification bg-light-blue p-3 mb-4"> --}}
                {{--                                            <h2 class="text-center mb-0"> --}}
                {{--                                                تم تسجيل طلب الحجز بنجاح بانتظار الموافقه من قبل --}}
                {{--                                                المالك --}}
                {{--                                            </h2> --}}
                {{--                                        </div> --}}
                {{--                                    </div> --}}
                <div class="col-12">
                    <div class="booking-dd-title mb-1">
                        <span>
                            <i class="far fa-book-open"></i>
                        </span>
                        <span class="pe-2">@lang('site.My bookings')</span>
                        <!-- <span class="pe-3">
                                                                                            <i class="fas fa-chevron-left"></i>
                                                                                        </span> -->

                    </div>
                </div>
            </div>
            <div class="row" id="mybookinghiddenSS">
                <div class="col-12">

                    @foreach ($bookings as $book)
                    @if (!empty($book->car))
                    <div class="card card-department round-border mb-4 p-md-3 p-2">
                        <div class="row g-0">
                            <div class="col-lg-3 position-relative">
                                <div class="cars-img">
                                    <div>
                                        <img class="department-img-list of-cover" src="{{  $car->main_image_ads }}"
                                            onerror="this.src='{{ FRONTASSETS }}/images/cars/car-card-1.png'"
                                            alt="image 1" loading="lazy" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="card-body position-relative px-lg-3 px-0">
                                    <div class="row justify-content-between align-items-center mb-3 small">
                                        <div class="col-auto mb-lg-0 mb-2">
                                            <span class="text-main number-ads">
                                                @lang('site.id number')({{ $book->car->id }})</span>
                                        </div>
                                        <div class="col-auto">
                                            <div class="d-flex justify-content-center align-items-center">
                                                <div class="department-badge bg-main text-white">
                                                    <div class="pt-1">
                                                        {{ round($book->car->carReview2()) }}</div>
                                                    <div>
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                </div>
                                                <div class="number-ads gray-txt">

                                                    {{ $book->car->carComment->count() ?? 0 }}
                                                    @lang('site.comments')
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h2 class="card-title mb-2">

                                        {{ $book->car->name ?? '' }}

                                    </h2>

                                    <div class="gray-txt number-ads pb-2">
                                        <span>{!! strip_tags(html_entity_decode($book->car->description ?? '')) !!}
                                        </span>
                                    </div>
                                    <div class="text-gray-2 number-ads d-flex align-items-center py-2">
                                        <div>
                                            <div class="ps-2 car-sid-icon">
                                                <i class="fal fa-car-side text-main"></i>
                                            </div>
                                            <span>{{ $book->car->car_numbers }}
                                                @lang('site.car_numbers')</span>
                                        </div>
                                        <div class="padding-35">
                                            <span class="ps-2 car-sid-icon">
                                                <i class="fa-light fa-clock text-main"></i>
                                            </span>
                                            <span> @lang('site.year')</span>
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-between mt-2">
                                        <div class="department-price">
                                            <span class="text-gray-2"> @lang('site.price_day'):</span>
                                            <span class="fw-bold text-main">
                                                {{ $book->fixed_price ? $book->fixed_price . ' ' . ($book->car->country->currency_ar ?? '') : '' }}

                                            </span>
                                        </div>
                                    </div>
                                    <!--waiting -->
                                    <div class="d-lg-flex align-items-center justify-content-between mt-3 flex-wrap">
                                        <div class="d-lg-flex align-items-center">
                                            <div class="round-border bg-light-orange ms-2">
                                                <div class="d-flex justify-content-between py-2 px-md-3 px-2">
                                                    <div class="d-flex align-items-center">
                                                        <span class="car-sid-icon">
                                                            <i class="fal fa-wallet text-main"></i>
                                                        </span>
                                                        <span class="text-gray-2 pe-1 ps-2">
                                                            @lang('site.Reservation deposit'):
                                                        </span>
                                                    </div>
                                                    <div
                                                        class="text-gray-2 d-flex align-items-center justify-content-center fw-bold span-14">
                                                        {{ $book->fixed_price ? $book->fixed_price . ' ' . ($book->car->country->currency_ar ?? '') : '' }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="round-border my-lg-0 my-3 {{ $book->bookingStatus->id != 1 && $book->bookingStatus->id != 2 && $book->bookingStatus->id != 3 && $book->bookingStatus->id != 5 ? 'bg-light-red' : 'bg-light-yellow' }}">
                                                <div
                                                    class="d-flex justify-sm-content-between flex-wrap align-items-center py-2 px-md-3 px-2">
                                                    <div class="d-flex align-items-center">
                                                        <span class="text-gray-2">
                                                            @lang('site.booking_status'):
                                                        </span>
                                                        @if ($book->bookingStatus->id == 1)
                                                        <span class="px-1">
                                                            <i class="far fa-alarm-clock text-main"></i>
                                                        </span>
                                                        @elseif($book->bookingStatus->id == 2)
                                                        <span class="px-1">
                                                            <i class="far fa-alarm-clock text-main"></i>
                                                        </span>
                                                        @elseif($book->bookingStatus->id == 3)
                                                        <span class="px-1">
                                                            <i class="far fa-check text-green"></i>
                                                        </span>
                                                        @elseif($book->bookingStatus->id == 4)
                                                        <span class="px-1">
                                                            <i class="far fa-ban text-red"></i>
                                                        </span>
                                                        @elseif($book->bookingStatus->id == 5)
                                                        <span class="px-1">
                                                            <i class="far fa-check text-green"></i>
                                                        </span>
                                                        @else
                                                        <span class="px-1">
                                                            <i class="far fa-ban text-red"></i>
                                                        </span>
                                                        @endif
                                                    </div>
                                                    <div class="text-gray-2 fw-bold span-14">
                                                        {{ $book->bookingStatus->status ?? '' }}
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="round-border bg-light-yellow my-lg-0 my-3">
                                                                        <div class="d-flex justify-content-between align-items-center py-2 px-md-3 px-2">
                                                                            <div class="d-flex align-items-center">
                                                                                <span class="text-gray-2">
                                                                                    @lang('site.booking_status'):
                                                                                </span>
                                                                                <span class="px-1 car-sid-icon">
                                                                                    <i class="fal fa-clock text-main"></i>
                                                                                </span>
                                                                            </div>
                                                                            <div class="text-gray-2 fw-bold span-14">
                                                                                {{ $book->bookingStatus->status ?? '' }}
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="details-btn d-flex align-items-center justify-content-center margin-top-12">
                                <a href="{{ route('detailbooking', $book->id) }}">@lang('site.Reservation
                                    information')</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endforeach


        </div>
        </div>

        <div id="mybooking1" class="row mybooking1">
        </div>
        </div>

        <div class="d-sm-flex align-items-center justify-content-between wizaredd">
            <button class="booking-now-btn " id="prevButton" type="button" data-btn-previous="true"
                style="display: none;">
                <span class="pe-3"> <i class="fas fa-chevron-right"></i></span>
                @lang('site.previous')

            </button>
            <button class="booking-now-btn " type="button" id="myButton" data-btn-next="true">
                @lang('site.next')
                <span class="pe-3"> <i class="fas fa-chevron-left"></i></span>
            </button>
            <button class="booking-now-btn" type="button" data-btn-submit="true" type="submit" id="btn-submit"
                style="display: none;">
                @lang('site.save')
                <span class="pe-3">
                    <i class="fas fa-chevron-left"></i>
                </span>
            </button>
        </div>
        </form>
        <script>
        $(document).ready(function() {
            $('#datepicker').datepicker({
                changeYear: false,
                dateFormat: "yy-m-d",
                minDate: 0
            });
            $('#datepicker1').datepicker({
                changeYear: false,
                dateFormat: "yy-m-d",
                minDate: 0
            });
        });
        $(document).ready(function() {
            $('#datepicker').change(function() {
                const oneDayInMilliseconds = 1000 * 60 * 60 * 24;
                startDate = $(this).datepicker('getDate');
                startDate.setTime(startDate.getTime() + oneDayInMilliseconds);
                // alert(startDate);
                $("#datepicker1").datepicker("option", "minDate", startDate);
            });
        });
        </script>

        </div>
        </div>
        </div>
    </section>
    <!-- /section -->
</main>

<br><br>
@endsection

@section('scripts')
<script>
// $(document).ready(function() {

$("#btn-submit").click(function(e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    // console.log("bookingssss");
    var formData = $("#add-form").serialize();
    // var url = "{{ route('addbookingcar') }}";

    // $.ajaxSetup({
    //     headers: {
    //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //     }
    // });
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },

        type: "POST",
        url: "{{ route('addbookingcar') }}",
        data: formData,
        processData: false,
        // contentType: false,
        success: function(response) {
            // Handle success response
            // alert("dd");
            console.log("success", response);
            $(".mybookinghiddenSS").hide();
            // // //
            $(".mybooking1").show();
            $(".mybooking1").html(response);
            // console.log("response", data);
        },
        error: function(xhr, textStatus, error) {
            // Handle error response
            alert(error);
            console.log("errrorrrs".error);
        }
    });

});

// });
</script>
<script>
jQuery('.delivery_date').change(function(e) {
    // console.log('e',e);
    // console.log("delivery_date", jQuery(".delivery_date").val());
    // console.log("reciept_date", jQuery('.reciept_date').val());
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    let currency = "{{ $car->country->currency_ar ?? '' }}";

    jQuery.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        },

        url: "{{ route('countDaysbetweendatesCar') }}",
        method: 'get',
        data: {
            _token: '{{ csrf_token() }}',

            delivery_date: jQuery(".delivery_date").val(),

            reciept_date: jQuery('.reciept_date').val(),

            'car_id': jQuery('.car_id').val(),

        },
        success: function(result) {

            console.log(result);
            $('#daycount').html(result.data.days)
            $('#total').html(result.data.total + ' ' + currency)

        },
        error: function(result) {
            // console.log(result.responseJSON);
            var errors = result.responseJSON;
            var errorsList = "";
            $.each(errors, function(_, value) {
                $.each(value, function(_, fieldErrors) {
                    fieldErrors.forEach(function(error) {
                        errorsList += "<li style='color:#e81f1f'>" +
                            error + "</li>";
                    })
                });
            });
            $('.register_errorsSrate').html(errorsList);


        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const myButton = document.getElementById("myButton");
    myButton.addEventListener("click", function() {
        const dateInput1 = document.getElementById('datepicker');
        const dateInput2 = document.getElementById('datepicker1');
        const dateInput3 = document.getElementById('delivery_place');
        const dateInput4 = document.getElementById('timepicker');
        const dateInput5 = document.getElementById('timepicker1');
        const dateInput6 = document.getElementById('reciept_place');

        // timepicker  
        const dateValue1 = dateInput1.value;
        const dateValue2 = dateInput2.value;
        const dateValue3 = dateInput3.value;
        const dateValue4 = dateInput4.value;
        const dateValue5 = dateInput5.value;
        const dateValue6 = dateInput6.value;

        // alert(dateValue4);
        // $("#datepicker").datepicker({
        //     minDate: 0 // Set to 0 for today, or a future date in milliseconds since epoch
        // });


        if ((dateValue1 === "") && (dateValue2 === "") && (dateValue3 === "") && (dateValue4 ===
                "") && (dateValue5 === "") && (dateValue6 === "")) {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_data') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue1 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_reciept_date') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue2 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_delivery_date') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue6 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_reciept_place') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue3 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_delivery place') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue4 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_reciept_time') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else if (dateValue5 === "") {
            swal({
                title: "Warning!",
                text: "{{ trans('site.please_delivery_time') }}",
                type: "warning",
                confirmButtonText: "OK"
            });

            setTimeout(function() {
                Swal.close()
            }, 2000)
            // document.getElementById('error').show();
            //    alert("Please enter a date.");
            myButton.removeAttribute('data-btn-next', false);
        } else {
            document.getElementById("reciept_datediv").innerHTML = dateValue1;
            document.getElementById("delivery_datediv").innerHTML = dateValue2;
            document.getElementById("delivery_place").innerHTML = dateValue3;
            document.getElementById("reciept_hourdiv").innerHTML = dateValue4;
            document.getElementById("delivery_hourdiv").innerHTML = dateValue5;
            document.getElementById("reciept_place").innerHTML = dateValue6;
            //  myButton.setAttribute('data-btn-next', true);
            myButton.fadeOut('fast');
            $('#prevButton').fadeIn('fast');
            $('#btn-submit').fadeIn('fast');
            //   $('#prevButton').fadeIn('fast'); 
            //   $('#btn-submit').fadeIn('fast');        



        }

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