@extends('front.layouts.master')

@push('css_before')
<link rel="stylesheet" href="{{asset('front/assets/css/color1.css')}}">
@endpush
@push('css_after')
<style>
    .hero-section {
        position: relative;
    }

    .hero-single {
        padding-top: 140px;
        padding-bottom: 100px;
        background-position: center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    .hero-single::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: -0.5px;
        top: 0;
        background: var(--hero-overlay-color);
        opacity: 0.85;
        z-index: -1;
    }

    .hero-single .hero-content {
        height: 100%;
    }

    .hero-single .hero-content .hero-title {
        color: var(--color-white);
        font-size: 60px;
        font-weight: 800;
        margin: 20px 0;
        text-transform: capitalize;
    }

    .hero-single .hero-content .hero-title span {
        color: var(--theme-color);
    }

    .hero-single .hero-content .hero-sub-title {
        display: inline-block;
        color: var(--theme-color);
        font-size: 20px;
        letter-spacing: 6px;
        font-weight: 800;
        position: relative;
        text-transform: uppercase;
    }

    .hero-single .hero-content p {
        color: var(--color-white);
        line-height: 30px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .hero-single .hero-content .hero-btn {
        gap: 1rem;
        display: flex;
        margin-top: 35px;
        justify-content: start;
    }

    .hero-single .hero-img::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: var(--theme-color);
        right: 100px;
        bottom: 0px;
        border-radius: 50%;
        filter: blur(150px);
        z-index: -1;
    }

    .hero-single .hero-img {
        position: absolute;
        right: 100px;
        bottom: 120px;
        width: 50%;
        z-index: -1;
    }

    .hero-slider.owl-theme .owl-nav {
        margin-top: 0px;
    }

    .hero-slider.owl-theme .owl-nav [class*=owl-] {
        color: var(--color-white);
        font-size: 25px;
        margin: 0;
        padding: 0;
        background: var(--slider-arrow-bg);
        display: inline-block;
        cursor: pointer;
        height: 55px;
        width: 55px;
        line-height: 55px;
        border-radius: 50px;
        text-align: center;
        transition: var(--transition);
    }

    .hero-slider.owl-theme .owl-nav [class*=owl-]:hover {
        background: var(--color-white);
        color: var(--theme-color);
    }

    .hero-slider.owl-theme .owl-nav .owl-prev {
        left: 40px;
    }

    .hero-slider.owl-theme .owl-nav .owl-next {
        right: 40px;
    }

    .hero-slider.owl-theme .owl-nav .owl-prev,
    .hero-slider.owl-theme .owl-nav .owl-next {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }

    @media all and (max-width: 1199px) {

        .hero-single .hero-content .hero-title {
            font-size: 37px;
        }

        .hero-slider.owl-theme .owl-nav .owl-prev,
        .hero-slider.owl-theme .owl-nav .owl-next {
            top: unset;
            bottom: 70px !important;
        }

        .hero-slider.owl-theme .owl-nav .owl-prev {
            left: unset;
            right: 120px;
        }

        .hero-slider.owl-theme .owl-nav .owl-next {
            right: 40px;
        }

    }

    @media all and (max-width: 991px) {

        .hero-single .hero-content .hero-title {
            font-size: 50px;
        }

        .hero-single .hero-img {
            position: relative;
            width: 100%;
            right: unset;
            bottom: unset;
            margin-top: 50px;
        }

        .hero-single .hero-img::before {
            width: 250px;
            height: 250px;
        }

    }

    @media all and (max-width: 767px) {

        .hero-single .hero-content .hero-sub-title {
            font-size: 18px;
        }

        .hero-single .hero-content .hero-btn {
            gap: 1rem;
        }

    }


    .select2-container--default .select2-selection--single {
        background-color: unset !important;
        border: none !important;
        height: auto !important;


    }
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: black !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 12px !important;
    }

</style>
@endpush
@section('content')

<div class="preloader">
    <div class="loader-ripple">
        <div></div>
        <div></div>
    </div>
</div>
<div class="container-fluid bg">
    <div class="container">
    <main>
        <section class="breadcrumb-section pt-0">
            <img src="{{ asset('front/assets/img/bokkingBanner.png') }}" class="bg-img img-fluid blur-up lazyload"
                alt="">
        </section>

        <section id="theme_search_form_tour">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="theme_search_form_area">
                            <div class="theme_search_form_tabbtn">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="flights-tab-1" data-bs-toggle="tab" data-bs-target="#flights-1"
                                            type="button" role="tab" aria-controls="flights-1" aria-selected="true" onclick="toggleReturnDate(true)">Round Trip</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="flights-tab-2" data-bs-toggle="tab" data-bs-target="#flights-2" type="button"
                                            role="tab" aria-controls="flights-2" aria-selected="true" onclick="toggleReturnDate(true)">One Way</button>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade" id="flights-2" role="tabpanel" aria-labelledby="flights-tab-2">
                                    <div class="tab-content" id="myTabContent1">
                                        <div class="tab-pane fade show active" id="oneway_flight" role="tabpanel" aria-labelledby="oneway-tab">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="oneway_search_form">
                                                        <form method="get" action="{{ route('site.flight.search') }}">
                                                            <div class="row">
                                                                <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                                    <div class="flight_Search_boxed">
                                                                        <p>From</p>
                                                                        <select id="autocomplete_from" class="form-control" name="origin">
                                                                            <option value="" {{ $app->request->get('origin') ? '' : 'selected' }}>Select an option</option>
                                                                            @if($app->request->get('origin'))
                                                                                <option value="{{ $app->request->get('origin') }}" selected>{{ $app->request->get('origin') }}</option>
                                                                            @endif
                                                                        </select>
                                                                        <div class="plan_icon_posation">
                                                                            <i class="fas fa-plane-departure"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                                    <div class="flight_Search_boxed">
                                                                        <p>To</p>
                                                                        <select id="autocomplete_to" class="form-control" name="destination">
                                                                            <option value="" {{ $app->request->get('destination') ? '' : 'selected' }}>Select an option</option>
                                                                            @if($app->request->get('destination'))
                                                                                <option value="{{ $app->request->get('destination') }}" selected>{{ $app->request->get('destination') }}</option>
                                                                            @endif
                                                                        </select>
                                                                        <div class="plan_icon_posation">
                                                                            <i class="fas fa-plane-arrival"></i>
                                                                        </div>
                                                                        <div class="range_plan">
                                                                            <i class="fas fa-exchange-alt"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                                    <div class="form_search_date">
                                                                        <div class="flight_Search_boxed date_flex_area">
                                                                            <div class="Journey_date">
                                                                                <p>Journey date</p>
                                                                                <input type="date" name="depart_date" value="{{ $app->request->get('depart_date') }}" required>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="top_form_search_button text-center py-2">
                                                                    <button class="theme-btn px-5 py-2">Search</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade show active" id="flights-1" role="tabpanel" aria-labelledby="flights-tab-1">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="tour_search_form">
                                                <form method="get" action="{{ route('site.flight.search') }}">
                                                    <div class="row">
                                                        <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                            <div class="flight_Search_boxed">
                                                                <p>From</p>
                                                                <select id="autocomplete_from_2" class="form-control" name="origin">
                                                                    <option value="" {{ $app->request->get('origin') ? '' : 'selected' }}>Select an option</option>
                                                                    @if($app->request->get('origin'))
                                                                        <option value="{{ $app->request->get('origin') }}" selected>{{ $app->request->get('origin') }}</option>
                                                                    @endif
                                                                </select>
                                                                <div class="plan_icon_posation">
                                                                    <i class="fas fa-plane-departure"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                            <div class="flight_Search_boxed">
                                                                <p>To</p>
                                                                <select id="autocomplete_to_2" class="form-control" name="destination">
                                                                    <option value="" {{ $app->request->get('destination') ? '' : 'selected' }}>Select an option</option>
                                                                    @if($app->request->get('destination'))
                                                                        <option value="{{ $app->request->get('destination') }}" selected>{{ $app->request->get('destination') }}</option>
                                                                    @endif
                                                                </select>
                                                                <div class="plan_icon_posation">
                                                                    <i class="fas fa-plane-arrival"></i>
                                                                </div>
                                                                <div class="range_plan">
                                                                    <i class="fas fa-exchange-alt"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                            <div class="form_search_date">
                                                                <div class="flight_Search_boxed date_flex_area">
                                                                    <div class="Journey_date">
                                                                        <p>Journey date</p>
                                                                        <input type="date" name="depart_date" value="{{ $app->request->get('depart_date') }}" required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                            <div class="form_search_date">
                                                                <div class="flight_Search_boxed date_flex_area">
                                                                    <div class="Return_date">
                                                                        <p>Return date</p>
                                                                        <input type="date" name="return_date" value="{{ $app->request->get('return_date') }}" required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="top_form_search_button text-center py-2">
                                                            <button class="theme-btn px-5 py-2">Search</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @if ($success)
        @section('content')
        <section class="xs-section mt-5">
            <div class="container">
                <div class="row">
                    <div class="col-3">
                        <div class="left-filter">
                            <h4 class="mb-5"><span class="result-count">{{ count($data) }}</span> Flights found</h4>
                            <form method="GET" action="{{ route('site.flight.search') }}">
                                <input type="hidden" name="origin" value="{{ request('origin') }}">
                                <input type="hidden" name="destination" value="{{ request('destination') }}">
                                <input type="hidden" name="depart_date" value="{{ request('depart_date') }}">
                                <input type="hidden" name="return_date" value="{{ request('return_date') }}">
                                <div class="form-row">
                                    <div class="car-widget">
                                        <div class="col price-range-slider">
                                            <h4 class="car-widget-title">Filter By Price</h4>
                                            <div class="slider">
                                                <div class="progress"></div>
                                            </div>
                                            <div class="range-input">
                                                <input type="range" class="range-min" min="0" max="10000" value="{{ request()->has('min_price') ? request()->get('min_price') : 0 }}" step="100">
                                                <input type="range" class="range-max" min="0" max="10000" value="{{ request()->has('max_price') ? request()->get('max_price') : 10000 }}" step="100">
                                            </div>
                                            <div class="price-input">
                                                <div class="field">
                                                    <input type="number" name="min_price" readonly class="input-min" value="{{ request()->has('min_price') ? request()->get('min_price') : 0 }}">
                                                </div>
                                                <div class="separator">-</div>
                                                <div class="field">
                                                    <input type="number" name="max_price" readonly class="input-max" value="{{ request()->has('max_price') ? request()->get('max_price') : 10000 }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="car-widget">
                                        <div class="col">
                                            <h4 class="car-widget-title">Number of stops</h4>

                                            <div class="form-check">
                                              <input class="form-check-input me-3" type="checkbox" value="0" id="flexCheckDefault">
                                              <label class="form-check-label" for="flexCheckDefault">
                                                Direct
                                              </label>
                                            </div>
                                            <div class="form-check">
                                              <input class="form-check-input me-3" type="checkbox" value="1" id="flexCheckDefault2">
                                              <label class="form-check-label" for="flexCheckDefault2">
                                                1 Transfer
                                              </label>
                                            </div>
                                            <div class="form-check">
                                              <input class="form-check-input me-3" type="checkbox" value="2" id="flexCheckDefault3">
                                              <label class="form-check-label" for="flexCheckDefault3">
                                                2 Transfers
                                              </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="top_form_search_button text-center py-2">
                                    <button class="theme-btn px-5 py-2">APPLY FILTER</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-9 ratio3_2">
                        <a href="javascript:void(0)" class="mobile-filter shadow-cls border-top-0">
                            <h5>latest filter</h5>
                            <img src="{{ asset('end-user/assets/images/icon/adjust.png') }}"
                                class="img-fluid blur-up lazyload" alt="">
                        </a>
                        <div class="product-wrapper-grid special-section">
                            <div class="row content grid justify-content-center">
                                @if(count($data) > 0)
                                    @foreach ($data as $flight)
                                        <div class="col-lg-12 popular grid-item wow fadeInUp" data-class="popular">
                                            <div class="special-box">
                                                <div class="flight_search_items">
                                                    <div class="multi_city_flight_lists">
                                                        <div class="flight_logo mx-4">
                                                            <img src="http://pics.avs.io/200/200/{{$flight['validatingAirlineCodes'][0]}}.png" alt="img" style="height: 80px">
                                                        </div>
                                                        <div class="flight_multis_area_wrapper">
                                                            <div class="flight_search_left">
                                                                <div class="flight_search_destination">
                                                                    <h3> {{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][0]['departure']['at'])->format('H:i') }}</h3>
                                                                    <p>{{ $flight['itineraries'][0]['segments'][0]['departure']['iataCode'] }}</p>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][0]['departure']['at'])->format('M-d') }}</p>
                                                                </div>

                                                            </div>
                                                            <div class="flight_search_middel">
                                                                <div class="flight_right_arrow">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="right mx-3">
                                                                            <i class="fas fa-plane-departure"></i>
                                                                            <p>{{ $flight['itineraries'][0]['segments'][0]['departure']['iataCode'] }}</p>
                                                                        </div>


                                                                        @if (isset($flight['itineraries'][0]['segments'][1] )  )
                                                                            <div class="middle mx-3">
                                                                                <div class="travel-time"></div>
                                                                            </div>
                                                                            <div class="flight_search_destination">
                                                                                <h3>{{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][1]['departure']['at'])->format('H:i') }}</h3>
                                                                                <p>{{ $flight['itineraries'][0]['segments'][1]['departure']['iataCode'] }}</p>
                                                                                <p>{{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][1]['departure']['at'])->format('M-d') }}</p>
                                                                            </div>
                                                                            <div class="middle mx-3">
                                                                                <div class="travel-time"></div>
                                                                            </div>
                                                                        @else
                                                                            <div class="middle mx-3">
                                                                                <div class="travel-time"></div>
                                                                                <p>Number of stops: {{ $flight['itineraries'][0]['segments'][0]['numberOfStops'] }}</p>
                                                                            </div>
                                                                        @endif
                                                                        <div class="left mx-3">
                                                                            <i class="fas fa-plane-arrival"></i>
                                                                            @if (isset($flight['itineraries'][0]['segments'][1] )  )
                                                                                <p>{{ $flight['itineraries'][0]['segments'][1]['arrival']['iataCode'] }}</p>
                                                                            @else
                                                                                <p>{{ $flight['itineraries'][0]['segments'][0]['arrival']['iataCode'] }}</p>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="flight_search_left">
                                                                <div class="flight_search_destination">
                                                                    <h3>{{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][0]['arrival']['at'])->format('H:i') }}</h3>
                                                                    <p>{{ $flight['itineraries'][0]['segments'][0]['arrival']['iataCode'] }}</p>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][0]['segments'][0]['arrival']['at'])->format('M-d') }}</p>
                                                                </div>

                                                            </div>

                                                        </div>
                                                            @if (isset($flight['itineraries'][1]))
                                                        <div class="flight_multis_area_wrapper">
                                                            <div class="flight_search_left">
                                                                <div class="flight_logo">
                                                                    <img src="http://pics.avs.io/200/200/{{$flight['validatingAirlineCodes'][0]}}.png" alt="img" style="width: 100px">
                                                                </div>
                                                                <div class="flight_search_destination">
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][0]['departure']['at'])->format('H:i') }}</p>
                                                                    <h3>{{ $flight['itineraries'][1]['segments'][0]['departure']['iataCode'] }}</h3>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][0]['departure']['at'])->format('M-d') }}</p>
                                                                </div>
                                                                @if (isset($flight['itineraries'][1]['segments'][1] )  )
                                                                <div class="flight_search_destination">
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['departure']['at'])->format('H:i') }}</p>
                                                                    <h3>{{ $flight['itineraries'][1]['segments'][1]['departure']['iataCode'] }}</h3>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['departure']['at'])->format('M-d') }}</p>
                                                                </div>
                                                                @endif

                                                            </div>
                                                            <div class="flight_search_middel">
                                                                <div class="flight_right_arrow">
                                                                    <div class="icon">
                                                                        <i class="fa-solid fa-arrow-right-long"></i>
                                                                    </div>
                                                                    <p>Number of stops: {{ $flight['itineraries'][1]['segments'][0]['numberOfStops'] }}</p>
                                                                </div>
                                                            </div>
                                                            <div class="flight_search_left">

                                                                @if (isset($flight['itineraries'][1]['segments'][1] )  )
                                                                <div class="flight_search_destination">
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['departure']['at'])->format('H:i') }}</p>
                                                                    <h3>{{ $flight['itineraries'][1]['segments'][1]['departure']['iataCode'] }}</h3>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['departure']['at'])->format('M-d') }}</p>
                                                                </div>

                                                                <div class="flight_search_destination">
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['arrival']['at'])->format('H:i') }}</p>
                                                                    <h3>{{ $flight['itineraries'][1]['segments'][1]['arrival']['iataCode'] }}</h3>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][1]['arrival']['at'])->format('M-d') }}</p>
                                                                </div>
                                                                @else
                                                                <div class="flight_search_destination">
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][0]['arrival']['at'])->format('H:i') }}</p>
                                                                    <h3>{{ $flight['itineraries'][1]['segments'][0]['arrival']['iataCode'] }}</h3>
                                                                    <p>{{ \Carbon\Carbon::parse($flight['itineraries'][1]['segments'][0]['arrival']['at'])->format('M-d') }}</p>
                                                                </div>

                                                                @endif

                                                            </div>

                                                        </div>
                                                            @endif
                                                    </div>
                                                    <div class="flight_search_right">
                                                        <h2>{{ $flight['price']['total'] }} {{ $flight['price']['currency'] }}</h2>
                                                        <a class="theme-btn py-2 px-4" target="_blank" href="#">Book now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <p>No flights found.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

    </main>
</div>
</div>
@endsection
@push('js')
<script>

    $(document).ready(function() {
        const rangeInput = document.querySelectorAll(".range-input input"),
            priceInput = document.querySelectorAll(".price-input input"),
            range = document.querySelector(".slider .progress");
        let priceGap = 1000;

        priceInput.forEach((input) => {
          input.addEventListener("input", (e) => {
            let minPrice = parseInt(priceInput[0].value),
              maxPrice = parseInt(priceInput[1].value);

            if (maxPrice - minPrice >= priceGap && maxPrice <= rangeInput[1].max) {
              if (e.target.className === "input-min") {
                rangeInput[0].value = minPrice;
                range.style.left = (minPrice / rangeInput[0].max) * 100 + "%";
              } else {
                rangeInput[1].value = maxPrice;
                range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
              }
            }
          });
        });

        rangeInput.forEach((input) => {
          input.addEventListener("input", (e) => {
            let minVal = parseInt(rangeInput[0].value),
              maxVal = parseInt(rangeInput[1].value);

            if (maxVal - minVal < priceGap) {
              if (e.target.className === "range-min") {
                rangeInput[0].value = maxVal - priceGap;
              } else {
                rangeInput[1].value = minVal + priceGap;
              }
            } else {
              priceInput[0].value = minVal;
              priceInput[1].value = maxVal;
              range.style.left = (minVal / rangeInput[0].max) * 100 + "%";
              range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
            }
          });
        });
    });

</script>
<script>
    $(document).ready(function() {
        function initializeSelect2(selector) {
            $(selector).select2({
                ajax: {
                    url: "{{ url('/fetch/city') }}",
                    dataType: 'json',
                    data: function (params) {
                        return {
                            query: params.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                minimumInputLength: 2,
                // placeholder: 'Select an option'
            });
        }

        initializeSelect2('#autocomplete_from');
        initializeSelect2('#autocomplete_to');
        initializeSelect2('#autocomplete_from_2');
        initializeSelect2('#autocomplete_to_2');
    });
</script>
@endpush