@extends('website.layouts.master')
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

@endsection



@section('content')


<div class="container-fluid service">
    <div class="containery">
        <!-- navbar  -->
        <header class="mb-5 ">
            @include('website.layouts.includes.topbar')

            <!-- hero section  -->
            <section class="row card position-relative" style="margin-bottom: 5rem">
                <h2 class="mb-2 text-capitalize ">{{ $from_name }} To {{ $to_name }} ({{ $type }} Trip).</h2>
                <div class="row justify-content-center" style="margin-bottom: -70px">

                    <div class="col-12 col-md-10 col-lg-9 text-center position-relative">
                        {{--
                        <img class="img-fluid p-md-2 mb-2"
                            src="{{ URL::asset('img/dashboard/undraw_delivery_truck_vt6p.svg') }}" alt=""
                            style="margin-top:-51px; width:700px;"> --}}

                        <div class="w-100">

                            <form id="myform" method="get" action="{{ route('patient_auth.transp_search') }}">

                                <div class="">
                                    <div class="d-flex mb-2">
                                        <div class="check_custom_index me-3">
                                            <input @if($type==="single" ) checked @endif type="radio" id="single_radio"
                                                name="type" value="single">
                                            <label for="single_radio">Single</label>
                                            <div class="check">
                                                <div class="inside"></div>
                                            </div>
                                        </div>
                                        <div class="check_custom_index">
                                            <input @if($type==="round" ) checked @endif type="radio" id="round_radio"
                                                name="type" value="round">
                                            <label for="round_radio">Round</label>
                                            <div class="check">
                                                <div class="inside"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row rounded-pill py-3 px-4 rounded rounded-pill align-items-center justify-content-center"
                                    style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; background-color: #fcfbfb">

                                    <div class="col-6 col-md-3 date_transp_div pe-0">
                                        <div class="text-s text-gray-300 text-start mb-0"><i
                                                class="fa-solid fa-location-dot"></i>
                                            From</div>
                                        <select id="from"
                                            class="js-example-basic-single border-0  select_2_index select2-hidden-accessible @error('from') is-invalid @enderror"
                                            name="from" required>
                                            @foreach ($destination as $item)
                                            <option @if($from==$item->id) selected @endif value="{{ $item->id }}">
                                                {{ $item->name }}
                                            </option>
                                            @endforeach
                                        </select>

                                        @error('from')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-6 col-md-3 date_transp_div ps-0 border_right_gray">
                                        <div class="text-s text-gray-300 text-start mb-0"><i
                                                class="fa-solid fa-location-dot"></i> To
                                        </div>
                                        <select id="to"
                                            class="js-example-basic-single  select2-hidden-accessible @error('to') is-invalid @enderror"
                                            name="to" required>
                                            @foreach ($destination as $item)
                                            <option @if($to==$item->id) selected @endif value="{{ $item->id }}">
                                                {{ $item->name }}
                                            </option>
                                            @endforeach
                                        </select>

                                        @error('to')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-6 col-md-2 pe-0">
                                        <div class="text-s text-gray-300 text-start mb-0"><i
                                                class="fa-regular fa-calendar-days"></i>
                                            Depart</div>
                                        <input name="date_from" type="text"
                                            class="form-control clickable-item-pointer date_transp_div datepicker_time bg-white @error('date_from') is-invalid @enderror"
                                            placeholder="YYYY-MM-DD" data-enable-time="true" value="{{ $date_from }}"
                                            required>
                                        @error('date_from')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-6 col-md-2 ps-0 border_right_gray" id="date_to_div">
                                        <div class="text-s text-gray-300 text-start mb-0"><i
                                                class="fa-regular fa-calendar-days"></i>
                                            Return</div>
                                        <input id="date_to" name="date_to" type="text"
                                            class="form-control clickable-item-pointer date_transp_div datepicker_time bg-white @error('date_to') is-invalid @enderror"
                                            placeholder="YYYY-MM-DD" data-enable-time="true" value="{{ $date_to }}">
                                        @error('date_to')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-2 align-self-center">
                                        <button type="submit" class="btn Explore-btn fs-7 fw-bold submit_loader"> <a
                                                href="#" class="text-light "><i class="fas fa-search"></i>
                                                Search</a></button>
                                    </div>

                                </div>
                            </form>

                        </div>

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

        </header>

        <section class="row mt-5 mb-5">

            <div class="col-12 col-xl-4 col-xxl-3 position-relative p-0">
                <div class="filter-offcanvas" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop"
                    aria-controls="offcanvasTop">
                    <input type="text" placeholder="filter"
                        class="shadow position-relative radius-10 btn-drop w-100 mb-3">
                    <i class="fa-solid fa-arrow-down-wide-short position-absolute fs-6 text-secondary"
                        style="top: 1.8rem;right: 1.5rem;"></i>
                </div>
                <div class="offcanvas offcanvas-top h-100 filter-offcanvas" tabindex="-1" id="offcanvasTop"
                    aria-labelledby="offcanvasTopLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasTopLabel"><img src="images/Logo.png" class="w-50 p-2"
                                alt=""></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>

                    <div class="offcanvas-body p-0">
                        <div class="card">
                            <div class="d-flex justify-content-between align-items-center ps-3 pe-3">
                                <div>
                                    <p class="mb-0">Filter Your Search</p>
                                    <p class="fs-8 text-secondary mb-0"> to narrow down your search</p>
                                </div>
                                <button class=" pt-2 pb-2 reset" style="float: left;">reset</button>
                            </div>
                            <form action="" class="position-relative mt-5 mb-4 ps-3 pe-3 ">
                                <input type="text "
                                    class="form-control shadow2 border-0 related-card pt-4 pb-4 position-relative "
                                    placeholder="Where you want to go" style="padding-left: 2rem;" />
                                <i class="fa-solid fa-magnifying-glass position-absolute text-xs secandry-light"
                                    style="left: 27px; bottom:30px "></i>
                                <button class="btn position-absolute fs-7"
                                    style="padding: 0.8rem 1.1rem;right:25px;bottom: 10px;">Explore </button>
                            </form>
                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between mt-3 mb-3 ps-3 pe-3">
                                <button class="accordion text-capitalize is-open ">price</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>

                            <div class="accordion-content ps-3 pe-3 ">
                                <div class="price-wrap mt-3 mb-3 justify-content-between">
                                    <div class="price-wrap-1 d-flex">
                                        <label for="one-offcan">EGP</label>
                                        <input id="one-offcan">
                                    </div>
                                    <div class="price-wrap-2 d-flex">
                                        <label for="two-offcan">EGP</label>
                                        <input id="two-offcan">
                                    </div>
                                </div>
                                <fieldset class="filter-price pb-5">
                                    <div class="price-field position-relative">
                                        <input type="range" min="1000" max="15000" value="1000" id="lower-offcan">
                                        <input type="range" min="1000" max="15000" value="500" id="upper-offcan">
                                    </div>

                                </fieldset>
                            </div>
                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between mt-3 mb-3 ps-3 pe-3">
                                <button class="accordion text-capitalize is-open">duration</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>
                            <div class="accordion-content p-3">
                                <select class="form-select shadow2 radius-10 btn-drop" id="single-select-field"
                                    data-placeholder="Choose one thing">
                                    <option>Approx 2 night trip</option>
                                    <option>Reactive</option>
                                    <option>Solution</option>
                                    <option>Conglomeration</option>
                                    <option>Algoritm</option>
                                    <option>Holistic</option>
                                </select>
                            </div>
                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between ps-3 pe-3">
                                <button class="accordion text-capitalize is-open ">numbers</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>
                            <div class="accordion-content p-3 d-flex">
                                <select class="form-select shadow2 radius-10 btn-drop m-1" id="single-select-field"
                                    data-placeholder="Choose one thing">
                                    <option>2 adults</option>
                                    <option>Reactive</option>
                                    <option>Solution</option>
                                    <option>Conglomeration</option>
                                    <option>Algoritm</option>
                                    <option>Holistic</option>
                                </select>
                                <select class="form-select shadow2 radius-10 btn-drop m-1" id="single-select-field"
                                    data-placeholder="Choose one thing">
                                    <option>2 childs</option>
                                    <option>Reactive</option>
                                    <option>Solution</option>
                                    <option>Conglomeration</option>
                                    <option>Algoritm</option>
                                    <option>Holistic</option>
                                </select>
                            </div>

                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between  ps-3 pe-3">
                                <button class="accordion text-capitalize is-open">rooms</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>
                            <div class="accordion-content  p-3">
                                <select class="form-select shadow2 radius-10 btn-drop" id="single-select-field"
                                    data-placeholder="Choose one thing">
                                    <option>1 room - 3 beds - 1 bathroom</option>
                                    <option>Reactive</option>
                                    <option>Solution</option>
                                    <option>Conglomeration</option>
                                    <option>Algoritm</option>
                                    <option>Holistic</option>
                                </select>
                            </div>
                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between  ps-3 pe-3">
                                <button class="accordion text-capitalize is-open">district</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>
                            <div class="accordion-content  p-3">
                                <select class="form-select shadow2 radius-10 btn-drop" id="single-select-field"
                                    data-placeholder="Choose one thing">
                                    <option>aswan</option>
                                    <option>Reactive</option>
                                    <option>Solution</option>
                                    <option>Conglomeration</option>
                                    <option>Algoritm</option>
                                    <option>Holistic</option>
                                </select>
                            </div>
                            <hr class="m-3 secandry-light">
                            <div class="d-flex justify-content-between  ps-3 pe-3">
                                <button class="accordion text-capitalize is-open">hotel</button>
                                <button class="clear fs-7 text-secondary">clear</button>
                            </div>
                            <div class="accordion-content ">
                                <button class="select-btn text-capi1talize m-1">aswan</button>
                                <button class="select-btn text-capi1talize m-1">califronia</button>
                                <button class="select-btn text-capi1talize m-1">aswan</button>
                                <button class="select-btn text-capi1talize m-1">nuba</button>
                                <button class="select-btn text-capi1talize m-1">antaaarcaticca</button>
                            </div>
                        </div>
                    </div>

                </div>

                <form id="myform" class="mt-1" method="post" action="{{ route('patient_auth.transp_search_filter') }}">
                    {{ csrf_field() }}

                    <div class="card filter shadow px-2 pt-3 me-3">
                        <img src="images/Logo.png" class="w-50 p-3" alt="">
                        <div class="d-flex justify-content-between align-items-center ps-3 pe-3 mt-3">
                            <div>

                                <p class="mb-0 fw-600">Filter Your Search</p>
                                <p class="fs-8 text-secondary mb-0"> to narrow down your search</p>
                            </div>

                            <button class=" pt-2 pb-2 reset" style="float: left;">reset</button>
                        </div>


                        {{-- the defulat search of the user --}}
                        <input type="hidden" name="type" value="{{ $_GET['type'] }}">
                        <input type="hidden" name="from" value="{{ $_GET['from'] }}">
                        <input type="hidden" name="to" value="{{ $_GET['to'] }}">
                        <input type="hidden" name="date_from" value="{{ $_GET['date_from'] }}">
                        <input type="hidden" name="date_to" @if (!empty($_GET['date_to']))
                            value="{{ $_GET['date_from'] }}" @else value="" @endif>


                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between mt-3 mb-3 ps-3 pe-3">
                            <button class="accordion text-capitalize is-open ">price</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>

                        <div class="accordion-content ps-3 pe-3">
                            <div class="price-wrap mt-3 mb-3 justify-content-between">
                                <div class="price-wrap-1 d-flex">
                                    <label for="one">EGP</label>
                                    <input id="one">
                                </div>
                                <div class="price-wrap-2 d-flex">
                                    <label for="two">EGP</label>
                                    <input id="two">
                                </div>
                            </div>
                            <fieldset class="filter-price pb-5">
                                <div class="price-field position-relative">

                                    @if (!empty($_GET['price']))
                                    @php
                                    $filter_price = $_GET['price'];
                                    @endphp
                                    @endif

                                    <input type="range" name="price" @if (!empty($filter_price))
                                        value="{{ $filter_price }}" @else value="10" @endif min="1000" max="15000"
                                        onchange="this.form.submit()" id="lower">
                                    <input type="range" name="price" @if (!empty($filter_price))
                                        value="{{ $filter_price }}" @else value="1000" @endif min="100" max="15000"
                                        onchange="this.form.submit()" id="upper">
                                </div>

                            </fieldset>

                            <style>

                            </style>
                        </div>

                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between mt-3 mb-3 ps-3 pe-3">
                            <button class="accordion text-capitalize is-open">duration</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>
                        <div class="accordion-content p-3">
                            <select class="form-select shadow2 radius-10 btn-drop" id="single-select-field"
                                data-placeholder="Choose one thing">
                                <option>Approx 2 night trip</option>
                                <option>Reactive</option>
                                <option>Solution</option>
                                <option>Conglomeration</option>
                                <option>Algoritm</option>
                                <option>Holistic</option>
                            </select>
                        </div>
                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between ps-3 pe-3">
                            <button class="accordion text-capitalize is-open ">numbers</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>

                        <div class="accordion-content  p-3 d-flex">
                            <select class="form-select shadow2 radius-10 btn-drop m-1" id="single-select-field"
                                data-placeholder="Choose one thing">
                                <option>2 adults</option>
                                <option>Reactive</option>
                                <option>Solution</option>
                                <option>Conglomeration</option>
                                <option>Algoritm</option>
                                <option>Holistic</option>
                            </select>
                            <select class="form-select shadow2 radius-10 btn-drop m-1" id="single-select-field"
                                data-placeholder="Choose one thing">
                                <option>2 childs</option>
                                <option>Reactive</option>
                                <option>Solution</option>
                                <option>Conglomeration</option>
                                <option>Algoritm</option>
                                <option>Holistic</option>
                            </select>
                        </div>


                        @if (!empty($_GET['company']))
                        @php
                        $company = explode(',', $_GET['company']);
                        @endphp
                        @endif

                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between ps-3 pe-3">
                            <button class="accordion text-capitalize is-open">Companies</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>

                        <div class="accordion-content  p-3">
                            @foreach ($companies as $company_item)
                            <div class="form-check">
                                <input name="company[]" @if (!empty($company) && in_array($company_item->slug,
                                $company))
                                checked @endif
                                multiple="multiple" value="{{ $company_item->slug }}"
                                class="form-check-input clickable-item-pointer" type="checkbox"
                                id="{{ $company_item->slug . $company_item->id }}" onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer"
                                    for="{{ $company_item->slug . $company_item->id }}">
                                    {{ $company_item->name }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between ps-3 pe-3">
                            <button class="accordion text-capitalize is-open">Seats</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>
                        <div class="accordion-content  p-3">

                            @if (!empty($_GET['seats']))
                            @php
                            $seats = explode(',', $_GET['seats']);
                            @endphp
                            @endif

                            <select name="seats" class="form-select shadow2 radius-10 btn-drop" id="single-select-field"
                                data-placeholder="Choose one thing" onchange="this.form.submit()">
                                <option @if (!empty($seats) && in_array("2", $seats)) selected @endif value="2">2 People
                                </option>
                                <option @if (!empty($seats) && in_array("4", $seats)) selected @endif value="4">4 People
                                </option>
                                <option @if (!empty($seats) && in_array("6", $seats)) selected @endif value="6">6 People
                                </option>
                                <option @if (!empty($seats) && in_array("7", $seats)) selected @endif value="7">7 People
                                </option>
                                <option @if (!empty($seats) && in_array("more", $seats)) selected @endif value="more">+7
                                    People</option>
                            </select>
                        </div>
                        <hr class="m-3 secandry-light">
                        <div class="d-flex justify-content-between ps-3 pe-3">
                            <button class="accordion text-capitalize is-open">Features</button>
                            <button class="clear fs-7 text-secondary">clear</button>
                        </div>
                        <div class="accordion-content ps-3 pe-3">

                            @if (!empty($_GET['features']))
                            @php
                            $feature = explode(',', $_GET['features']);
                            @endphp
                            @endif

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("ac", $feature)) checked
                                    @endif multiple="multiple" value="ac"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_ac"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_ac">
                                    AC
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("wifi", $feature)) checked
                                    @endif multiple="multiple" value="wifi"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_wifi"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_wifi">
                                    WIFI
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("outlets", $feature)) checked
                                    @endif multiple="multiple" value="outlets"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_outlets"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_outlets">
                                    Outlets
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("automatic", $feature))
                                    checked @endif multiple="multiple" value="automatic"
                                    class="form-check-input clickable-item-pointer" type="checkbox"
                                    id="feature_automatic" onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_automatic">
                                    Automatic
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("dvd", $feature)) checked
                                    @endif multiple="multiple" value="dvd"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_dvd"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_dvd">
                                    DVD
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("tv", $feature)) checked
                                    @endif multiple="multiple" value="tv"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_tv"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_tv">
                                    TV
                                </label>
                            </div>

                            <div class="form-check">
                                <input name="features[]" @if (!empty($feature) && in_array("toilet", $feature)) checked
                                    @endif multiple="multiple" value="toilet"
                                    class="form-check-input clickable-item-pointer" type="checkbox" id="feature_toilet"
                                    onchange="this.form.submit()">
                                <label class="form-check-label clickable-item-pointer" for="feature_toilet">
                                    Toilet
                                </label>
                            </div>
                        </div>
                    </div>

                </form>

            </div>
            <div class="col-12 col-xl-8 col-xxl-9 ">
                <div class="row mt-4">
                    @foreach ($bus_single as $item)
                    <div class="col-12 mb-4">

                        <div class="card-product bg-white radius-20 shadow position-relative p-3">
                            <div class="row ps-2">
                                <div class="col-12 col-md-4">
                                    <img class="card_product_img"
                                        src="{{ URL::asset('img/products/' . $item->bus->main_image) }}">
                                </div>
                                <div class="col-12 col-md-8">

                                    <div class="d-flex justify-content-between align-items-baseline pt-3">

                                        <div class="text-truncate w-75 text-start me-1">
                                            <a href="" class="text-dark mb-0 text-start">
                                                <h2 class="fs-5 fw-600">{{$item->name}}</h2>
                                            </a>
                                            <p class="fs-6 text-gray-500 text-truncate mb-0 pe-4">
                                                {{$item->bus->short_description}}
                                            </p>
                                        </div>

                                        <div class="pe-2">
                                            <p class="fs-8 secandry-light mb-0"><i
                                                    class="fa-solid fa-location-arrow color-i"></i> From:
                                                {{$item->from->name}}
                                            </p>
                                            <p class="fs-8 secandry-light mb-0"><i
                                                    class="fa-solid fa-location-arrow color-i"></i> To:
                                                {{$item->to->name}}
                                            </p>
                                            <p class="fs-8 secandry-light mb-0"><i class="fa-solid fa-user color-i"></i>
                                                {{$item->bus->seats}} Seats
                                            </p>
                                        </div>
                                    </div>

                                    <div class="d-flex icon-product_transp mb-2">
                                        @if($item->bus->wifi)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="WIFI"
                                            class="fa-solid fa-wifi me-1"></i>
                                        @endif
                                        @if($item->bus->automatic)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Automatic"
                                            class="fa-solid fa-bolt me-1"></i>
                                        @endif
                                        @if($item->bus->outlets)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Outlets"
                                            class="fa-solid fa-plug me-1"></i>
                                        @endif
                                        @if($item->bus->tv)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="TV"
                                            class="fa-solid fa-tv me-1"></i>
                                        @endif
                                        @if($item->bus->toilet)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Toilet"
                                            class="fa-solid fa-toilet me-1"></i>
                                        @endif
                                        @if($item->bus->ac)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="AC"
                                            class="fa-solid fa-snowflake me-1"></i>
                                        @endif
                                        @if($item->bus->drink)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Drink"
                                            class="fa-solid fa-mug-hot me-1"></i>
                                        @endif
                                        @if($item->bus->food)
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Food"
                                            class="fa-solid fa-utensils"></i>
                                        @endif
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center pe-3">
                                        <div>
                                            <h3 class="fw-600 color-title m-0">{{ $item->price_per_seat }}</h3>
                                            <p class="secandry-light fs-9 m-0">Price Per Person</p>
                                        </div>
                                        <a href="{{route('patient_auth.unit_show', $item->name)}}"
                                            class="btn yellow-btn text-capitalize fs-8 radius-10 ">Book now</a>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                    @endforeach
                </div>
            </div>
        </section>
    </div>

</div>
@endsection
@section('js')

<!-- datapicker date and time -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/plugins/rangePlugin.min.js"
    integrity="sha512-44bA1YzQUqHACfLj2v0wEdX9z6EmlALcta6ENgPZnxH/aIiuBw92he+M/51kTCueY/2DsqEYM7mCwGUyO2q79w=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function() {


        fetch_resv_type();

        //for country and cities ajax inputs
        function fetch_resv_type(type = $('input[name="type"]:checked').val()) {

            console.log(type);
            if (type === "single") {
                $( "#date_to" ).prop("disabled", true);
                $( "#date_to_div" ).hide();
            }else{
                $( "#date_to" ).prop("disabled", false);
                $( "#date_to_div" ).show();
            }
        }

        $('input[name="type"]').on('change', function(e) {
            fetch_resv_type();
        });

});


    //-------- datepicker time --------
        $('.datepicker_time').flatpickr({
            dateFormat: "Y-m-d",
            enableTime: false,
            minDate: "today",
            theme: "dark", // defaults to "light"
            plugins: [new rangePlugin({ input: "#date_to"})]

            
        });
</script>

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<script>
    // range of price filter
        var lowerSlider = document.querySelector('#lower');
        var upperSlider = document.querySelector('#upper');

        document.querySelector('#two').value = upperSlider.value;
        document.querySelector('#one').value = lowerSlider.value;

        var lowerVal = parseInt(lowerSlider.value);
        var upperVal = parseInt(upperSlider.value);

        upperSlider.oninput = function() {
            lowerVal = parseInt(lowerSlider.value);
            upperVal = parseInt(upperSlider.value);

            if (upperVal < lowerVal + 4) {
                lowerSlider.value = upperVal - 4;
                if (lowerVal == lowerSlider.min) {
                    upperSlider.value = 4;
                }
            }
            document.querySelector('#two').value = this.value
        };

        lowerSlider.oninput = function() {
            lowerVal = parseInt(lowerSlider.value);
            upperVal = parseInt(upperSlider.value);
            if (lowerVal > upperVal - 4) {
                upperSlider.value = lowerVal + 4;
                if (upperVal == upperSlider.max) {
                    lowerSlider.value = parseInt(upperSlider.max) - 4;
                }
            }
            document.querySelector('#one').value = this.value
        };

        // range of price in offcanvas
        var lowerSlider1 = document.querySelector('#lower-offcan');
        var upperSlider1 = document.querySelector('#upper-offcan');

        document.querySelector('#two-offcan').value = upperSlider1.value;
        document.querySelector('#one-offcan').value = lowerSlider1.value;

        var lowerValu = parseInt(lowerSlider1.value);
        var upperValu = parseInt(upperSlider1.value);

        upperSlider1.oninput = function() {
            lowerValu = parseInt(lowerSlider1.value);
            upperValu = parseInt(upperSlider1.value);

            if (upperVal < lowerValu + 4) {
                lowerSlider1.value = upperValu - 4;
                if (lowerValu == lowerSlider1.min) {
                    upperSlider1.value = 4;
                }
            }
            document.querySelector('#two-offcan').value = this.value
        };

        lowerSlider1.oninput = function() {
            lowerValu = parseInt(lowerSlider1.value);
            upperValu = parseInt(upperSlider1.value);
            if (lowerValu > upperValu - 4) {
                upperSlider1.value = lowerValu + 4;
                if (upperValu == upperSlider1.max) {
                    lowerSlider1.value = parseInt(upperSlider1.max) - 4;
                }
            }
            document.querySelector('#one-offcan').value = this.value
        };

        var swiper = new Swiper(".hotel", {
            loop: true,
            freeMode: true,
            spaceBetween: 0,
            grabCursor: true,
            slidesPerView: 7,
            touchEventsTarget: 'container',
            loop: true,
            loopFillGroupWithBlank: true,
            loop: true,
            freeMode: true,
            speed: 4000,
            freeModeMomentum: false,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                500: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                640: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                },
                750: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                },
                1440: {
                    slidesPerView: 7,
                    spaceBetween: 20,
                },
                2500: {
                    slidesPerView: 8,
                    spaceBetween: 20,
                }
            },

        });
        // accordion
        const accordionBtns = document.querySelectorAll(".accordion");
        accordionBtns.forEach(el => {
            if (el.classList.contains("is-open")) {
                el.parentElement.nextElementSibling.style.maxHeight = "max-content";
            }
        });
        
        accordionBtns.forEach((accordion) => {
            accordion.onclick = function() {
                this.classList.toggle("is-open");
                let content = this.parentElement.nextElementSibling;
                if (content.style.maxHeight) {
                    content.style.transition = "all  0.2s ";
                    content.style.maxHeight = null;
                } else {
                    content.style.transition = "all  0.2s ";

                    content.style.maxHeight = content.scrollHeight + "px";
                    console.log(content.style.maxHeight);
                }
            };
        });
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))        
</script>
@endsection