@extends('front.layouts.master')
@push('css_before')
<link rel="stylesheet" href="{{asset('front/assets/css/color1.css')}}">
@endpush

@push('css_after')
<style>
    .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;
    }
    .hotel-card {
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            max-width: 300px;
        }
        .hotel-card img {
            width: 100%;
            border-radius: 10px;
        }
        .hotel-info {
            text-align: center;
        }
</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 class="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="row">
                                    <div class="col-lg-12">
                                        <div class="tour_search_form">
                                            <form action="{{ route('site.SearchbookingHotel') }}" id="hotels_search_form" method="get">
                                                <div class="row">
                                                    <div class="mb-2 col-lg-3 col-md-6 col-sm-12 col-12">
                                                        <div class="flight_Search_boxed">
                                                            <p>city</p>
                                                            <select id="autocomplete_from" class="form-control" name="city" required>
                                                                <option value="" {{ $app->request->get('city') ? '' : 'selected' }}>Select an option</option>
                                                                @if($app->request->get('city'))
                                                                    <option value="{{ $app->request->get('city') }}" selected>{{ $app->request->get('city') }}</option>
                                                                @endif
                                                            </select>
                                                            <div class="plan_icon_posation">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="mb-2 col-lg-6 col-md-6 col-sm-12 col-12">
                                                        <div class="row">
                                                            <div class="col-lg-6 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>Check in date</p>
                                                                            <input type="date" name="check_in" value="{{ $app->request->get('check_in') }}" required>
                                                                            <span></span>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 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>Check out date</p>
                                                                            <input type="date" name="check_out"
                                                                                value="{{ $app->request->get('check_out') }}" required>
                                                                            <span></span>
                                                                        </div>

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

                                                    </div>
                                                    <div class="mb-2 col-lg-3  col-md-6 col-sm-12 col-12">
                                                        <div class="flight_Search_boxed dropdown_passenger_area">
                                                            <p>Persons, Class </p>
                                                            <div class="dropdown">
                                                                <button
                                                                    class="dropdown-toggle final-count hotels_persons_count"
                                                                    data-toggle="dropdown" type="button"
                                                                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                                    aria-expanded="false">0 Persons</button>
                                                                <div class="dropdown-menu dropdown_passenger_info"
                                                                    aria-labelledby="dropdownMenuButton1"
                                                                    style="margin: 0px;">
                                                                    <div class="traveller-calulate-persons">
                                                                        <div class="passengers">
                                                                            <h6>Persons</h6>
                                                                            <div class="passengers-types">
                                                                                <div class="passengers-type">
                                                                                    <div class="text counted">
                                                                                        <span
                                                                                            class="count pcount">0</span>
                                                                                        <input class="countable"
                                                                                            type="number" value="0"
                                                                                            max=""
                                                                                            name="adult_search_count"
                                                                                            min="0" required>
                                                                                        <div class="type-label">
                                                                                            <p>
                                                                                                Adult
                                                                                            </p>
                                                                                            <span>
                                                                                                12+ yrs
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="button-set">
                                                                                        <button type="button"
                                                                                            class="btn-add plus_btn"
                                                                                            onclick="plus_search_count(this)">
                                                                                            <i class="fas fa-plus"></i>
                                                                                        </button>
                                                                                        <button type="button"
                                                                                            class="btn-subtract minus_btn"
                                                                                            onclick="minus_search_count(this)">
                                                                                            <i class="fas fa-minus"></i>
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="passengers-type">
                                                                                    <div class="text counted">
                                                                                        <span
                                                                                            class="count ccount">0</span>
                                                                                        <input class="countable"
                                                                                            type="hidden" value="0"
                                                                                            max=""
                                                                                            name="children_search_count"
                                                                                            min="0">

                                                                                        <div class="type-label">
                                                                                            <p class="fz14 mb-xs-0">
                                                                                                Children
                                                                                            </p>
                                                                                            <span>
                                                                                                2- Less than 12 yrs
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="button-set">
                                                                                        <button type="button"
                                                                                            class="btn-add-c plus_btn"
                                                                                            onclick="plus_search_count(this)">
                                                                                            <i class="fas fa-plus"></i>
                                                                                        </button>
                                                                                        <button type="button"
                                                                                            class="btn-subtract-c minus_btn"
                                                                                            onclick="minus_search_count(this)">
                                                                                            <i class="fas fa-minus"></i>
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="passengers-type">
                                                                                    <div class="text counted">
                                                                                        <span
                                                                                            class="count incount">0</span>
                                                                                        <input class="countable"
                                                                                            type="hidden" value="0"
                                                                                            max=""
                                                                                            name="infant_search_count"
                                                                                            min="0">

                                                                                        <div class="type-label">
                                                                                            <p class="fz14 mb-xs-0">
                                                                                                Infant
                                                                                            </p>
                                                                                            <span>
                                                                                                Less than 2 yrs
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="button-set">
                                                                                        <button type="button"
                                                                                            class="btn-add-in plus_btn"
                                                                                            onclick="plus_search_count(this)">
                                                                                            <i class="fas fa-plus"></i>
                                                                                        </button>
                                                                                        <button type="button"
                                                                                            class="btn-subtract-in minus_btn"
                                                                                            onclick="minus_search_count(this)">
                                                                                            <i class="fas fa-minus"></i>
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <span></span>
                                                        </div>
                                                    </div>
                                                    <div class="top_form_search_button">
                                                        <div class="globalBtn mt-3 ">
                                                            <ul>
                                                                <li>
                                                                    <button type="submit" id="search_hotels">
                                                                        Search
                                                                        <span></span><span></span><span></span><span></span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            @if($success)
            <div class="container">
                <h4 class="mb-5"><span class="result-count"></span> Hotels found</h4>
                <div class="row">
                        @foreach ($results as $result)
                            <div class="col-md-4 mb-4">
                                <div class="card">
                                    <img class="card-img-top" src="{{ $result['photo_url'] }}" alt="Hotel Image" style="height: 366px">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ $result['name'] }}</h5>
                                        <div class="d-flex justify-content-between align-items-center pt-3">
                                            <p class="card-text" style="font-size: 14px">
                                                Price: <span class="price">{{ $result['minPriceTotal'] }} AED</span>
                                            </p>
                                            <p class="card-text" style="font-size: 14px">
                                                Stars: <span class="price">{{ $result['stars'] }} </span>
                                            </p>
                                            <a class="theme-btn btn-small py-1 px-4" href="{{ $result['fullUrl'] }}" target="_blank">Book now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                </div>

            </div>
            @endif

            <div class="car-area bg py-120">
                <!-- car area end -->
                <div class="car-area bg py-120">
                    <div class="choose-area py-120">
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="choose-content">
                                        <div class="site-heading wow fadeInDown" data-wow-delay=".25s">
                                            <span class="site-title-tagline text-white justify-content-start">

                                                {{ TranslationHelper::translate('How to Use', 'site') }}
                                            </span>

                                            <h2 class="site-title text-white mb-10"> {{
                                                TranslationHelper::translate('Steps to
                                                Create Your First Ad', 'site') }} </h2>

                                            <p>
                                                {{ setting('show_section_how_to_use') }}
                                            </p>
                                        </div>
                                        <div class="choose-img wow fadeInUp" data-wow-delay=".25s">
                                            <img src="{{ setting('how_section_how_to_use_img') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="choose-content-wrapper wow fadeInRight" data-wow-delay=".25s">
                                        <div class="row">
                                            <div class="col-md-6 col-lg-6 mt-lg-5">
                                                <div class="choose-item">
                                                    <span class="choose-count">01</span>
                                                    <div class="choose-item-icon">
                                                        <img src="{{ setting('how_section_how_to_use_icon1') }}" alt="">
                                                    </div>
                                                    <div class="choose-item-info">

                                                        <h3>{{ TranslationHelper::translate('Step One', 'site') }}</h3>

                                                        <h6>
                                                            {{ setting('show_section_how_to_use_step1') }}
                                                        </h6>
                                                    </div>
                                                </div>
                                                <div class="choose-item mb-lg-0">
                                                    <span class="choose-count">02</span>
                                                    <div class="choose-item-icon">
                                                        <img src="{{ setting('how_section_how_to_use_icon2') }}" alt="">
                                                    </div>
                                                    <div class="choose-item-info">

                                                        <h3>{{ TranslationHelper::translate('Step Two', 'site') }}</h3>
                                                        <h6>
                                                            {{ setting('show_section_how_to_use_step2') }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-lg-6">
                                                <div class="choose-item">
                                                    <span class="choose-count">03</span>
                                                    <div class="choose-item-icon">
                                                        <img src="{{ setting('how_section_how_to_use_icon3') }}" alt="">
                                                    </div>
                                                    <div class="choose-item-info">

                                                        <h3>{{ TranslationHelper::translate('Step Three', 'site') }}
                                                        </h3>
                                                        <h6>
                                                            {{ setting('show_section_how_to_use_step3') }}
                                                        </h6>
                                                    </div>
                                                </div>
                                                <div class="choose-item mb-lg-0">
                                                    <span class="choose-count">04</span>
                                                    <div class="choose-item-icon">
                                                        <img src="{{ setting('how_section_how_to_use_icon4') }}" alt="">
                                                    </div>
                                                    <div class="choose-item-info">

                                                        <h3>{{ TranslationHelper::translate('Step Four', 'site') }}</h3>
                                                        <h6>
                                                            {{ setting('show_section_how_to_use_step4') }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- How to use end -->


                    <!-- download area -->
                    <div class="download-area mb-120">
                        <div class="container">
                            <div class="download-wrapper">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="download-content">
                                            <div class="site-heading mb-4">
                                                <span class=" justify-content-start" style="color: #ff631c">

                                                    {{ TranslationHelper::translate('get_our_app', 'site') }}
                                                </span>
                                                <h2 class="site-title mb-10">{{ setting('show_section_title') }}</h2>
                                                <p>
                                                    {{ setting('show_section_content') }}
                                                </p>
                                            </div>
                                            <div class="download-btn">
                                                <a href="{{ setting('download_playstore', 'en') }}" target="_blank">
                                                    <i class="fab fa-google-play"></i>
                                                    <div class="download-btn-content">
                                                        <span> {{ TranslationHelper::translate('get_it_on', 'site') }}
                                                        </span>
                                                        <strong> {{ TranslationHelper::translate('google_play', 'site')
                                                            }}
                                                        </strong>
                                                    </div>
                                                </a>
                                                <a href="{{ setting('download_appstore', 'en') }}" target="_blank">
                                                    <i class="fab fa-app-store"></i>
                                                    <div class="download-btn-content">
                                                        <span>{{ TranslationHelper::translate('get_it_on', 'site')
                                                            }}</span>
                                                        <strong>{{ TranslationHelper::translate('app_store', 'site') }}
                                                        </strong>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="download-img">
                                    <img src="{{ setting('show_section_img') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- download area end -->
        </main>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        let plus_btn = $('.plus_btn');
        let minus_btn = $('.minus_btn');

        let swal2_container = $(".swal2-container");
        swal2_container.on('click', function () {
            event.stopPropagation();
            event.preventDefault();

        });

        let country = $("#country");
        country.select2();
        let city = $("#city");
        city.select2();
    });

    function verify_plus_search_count(btn) {
        let room_id = $("#room_id");
        let err_choose_room = $(".err_choose_room");
        if (room_id.val() === '') {
            err_choose_room.show();
            event.stopPropagation();
            event.preventDefault();

        } else {
            plus_search_count(btn)
        }

    }

    function verify_minus_search_count(btn) {
        let room_id = $("#room_id");
        let err_choose_room = $(".err_choose_room");

        if (room_id.val() === '') {
            err_choose_room.show();
            event.stopPropagation();
            event.preventDefault();

        } else {
            minus_search_count(btn)
        }
        event.stopPropagation();
        event.preventDefault();

    }

    function plus_search_count(plus_btn) {
        let plus = $(plus_btn);
        let counted_inp = plus.parent().parent().find('.counted input');
        let counted_span = plus.parent().parent().find('.counted .count');

        let max = '';
        if (counted_inp.attr('max') && parseFloat(counted_inp.attr('max')) > 0) {
            max = counted_inp.attr('max');
        }
        let current_val = counted_inp.val();
        // alert(current_val);
        // alert(max);
        if (parseInt(current_val) === parseInt(max)) {

        } else {
            counted_inp.val(parseInt(current_val) + 1);
            counted_span.text(parseInt(current_val) + 1)
        }
        countCountable();
        event.stopPropagation();
        event.preventDefault();

    }

    function minus_search_count(minus_btn) {
        let minus = $(minus_btn);
        let counted_inp = minus.parent().parent().find('.counted input');
        let counted_span = minus.parent().parent().find('.counted .count');

        let min = '';
        if (counted_inp.attr('min')) {
            min = counted_inp.attr('min');
        }
        let current_val = counted_inp.val();
        // alert(current_val);
        // alert(max);
        if (parseInt(current_val) === parseInt(min)) {

        } else {
            counted_inp.val(parseInt(current_val) - 1);
            counted_span.text(parseInt(current_val) - 1)
        }
        countCountable();
        event.stopPropagation();
        event.preventDefault();

    }

    function countCountable() {
        let total = 0;
        let countable = $(".countable");
        countable.each(function () {
            total += parseFloat($(this).val()) || 0;
        });
        let hotels_persons_count = $(".hotels_persons_count");
        hotels_persons_count.text(total + " Persons")
    }

    function updateRoomInputsInBooking(btn) {
        let btn_tag = $(btn);
        let err_choose_room = $(".err_choose_room");


        let id = btn_tag.attr('data-id');
        let adults = btn_tag.attr('data-adults');
        let children = btn_tag.attr('data-children');
        let infants = btn_tag.attr('data-infants');
        let price = btn_tag.attr('data-price');
        let discount = btn_tag.attr('data-discount');
        let discount_type = btn_tag.attr('data-discount-type');
        let discount_value = btn_tag.attr('data-discount-value');
        let price_after_discount = btn_tag.attr('data-price-after-discount');


        let room_id = $("#room_id");
        let before_discount = $("#before_discount del");
        let final_price = $("#final_price");
        let adult_search_count = $("input[name='adult_search_count']");
        let children_search_count = $("input[name='children_search_count']");
        let infant_search_count = $("input[name='infant_search_count']");

        err_choose_room.hide();
        room_id.val(id);
        adult_search_count.attr('max', adults);
        children_search_count.attr('max', children);
        infant_search_count.attr('max', infants);

        if (parseFloat(discount) > 0) {
            before_discount.text('$' + price)
            final_price.text('$' + price_after_discount)
        }

    }

    function submitBookingForm() {
        let booking_form = $("#booking_form");
        let dropdownMenuButton1 = $("#dropdownMenuButton1");

        let room_id = $("#room_id").val();
        let check_in = $("#check_in").val();
        let check_out = $("#check_out").val();
        let adult_search_count = $("input[name='adult_search_count']").val();
        let children_search_count = $("input[name='children_search_count']").val();
        let infant_search_count = $("input[name='infant_search_count']").val();

        let data = [
            room_id,
            check_in,
            check_out,
            adult_search_count,
            children_search_count,
            infant_search_count
        ];

        let inputsNotEmpty = true;

        $.each(data, function (index, value) {
            if (value === "" || (adult_search_count === '0' && children_search_count === '0' && infant_search_count === '0')) {
                inputsNotEmpty = false;
                return false; // exit the loop early
            }
        });

        if (inputsNotEmpty) {
            booking_form.submit();
        } else {
            Swal.fire({
                icon: 'error',
                text: "Please Complete the Booking Inputs",
                dangerMode: true,
                confirmButtonColor: '#bf325c',
                // cancelButtonColor: '#d33',
                confirmButtonText: 'Fine',
                showCloseButton: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    clickPersons();
                }
            });
        }
    }


    function submitBookingApplyForm() {
        let booking_form = $("#apply_form");

        let room_id = $("#room_id").val();
        let check_in = $("#check_in").val();
        let check_out = $("#check_out").val();
        let adult_search_count = $("input[name='adult_search_count']").val();
        let children_search_count = $("input[name='children_search_count']").val();
        let infant_search_count = $("input[name='infant_search_count']").val();
        let f_name = $("input[name='f_name']").val();
        let l_name = $("input[name='l_name']").val();
        let email = $("input[name='email']").val();
        let phone = $("input[name='phone']").val();


        let data = [
            room_id,
            check_in,
            check_out,
            adult_search_count,
            children_search_count,
            infant_search_count,
            f_name,
            l_name,
            email,
            phone
        ];

        let inputsNotEmpty = true;

        $.each(data, function (index, value) {
            if (value === "" || (adult_search_count === '0' && children_search_count === '0' && infant_search_count === '0')) {
                inputsNotEmpty = false;
                return false; // exit the loop early
            }
        });

        if (inputsNotEmpty) {
            booking_form.submit();
        } else {
            Swal.fire({
                icon: 'error',
                text: "Please Complete the Personal Information",
                dangerMode: true,
                confirmButtonColor: '#bf325c',
                // cancelButtonColor: '#d33',
                confirmButtonText: 'Fine',
                showCloseButton: true,
            });
        }
    }


    function chooseRoom(room) {
        let room_id = $(room).attr('data-id');
        // alert(room_id);
        let choose_room_btn = $('#room_' + room_id);
        choose_room_btn.click();
        clickPersons();
    }

    function clickPersons() {
        let dropdownMenuButton1 = $("#dropdownMenuButton1");
        dropdownMenuButton1.click();
        event.stopPropagation();
        event.preventDefault();
    }

    function submitBookingPayForm() {
        let pay_form = $("#pay_form");

        let booking_id = $("#booking_id").val();
        let payment_method = $("#payment_method").val();

        let data = [
            booking_id,
            payment_method
        ];

        let inputsNotEmpty = true;

        $.each(data, function (index, value) {
            if (value === "") {
                inputsNotEmpty = false;
                return false; // exit the loop early
            }
        });

        if (inputsNotEmpty) {
            pay_form.submit();
        } else {
            Swal.fire({
                icon: 'error',
                text: "Some Error Happened .. Try Again Later",
                dangerMode: true,
                confirmButtonColor: '#bf325c',
                // cancelButtonColor: '#d33',
                confirmButtonText: 'Fine',
                showCloseButton: true,
            });
        }
    }

    function getCitiesFromCountry() {
        let country = $('#country');
        let city = $('#city');
        let lang = "en";

        let current_country = country.val();
        if (current_country !== "") {
            // $(this).parent().find('.errored').removeClass('errored');

            $.ajax({
                url: "https://dev02.matrix-clouds.com/welt_travel/public/country/getCities",
                data: {
                    _token: "BKQt5Gx7mwkl4dr6sqc67lfo3bFsCnxt3f8BDyuC",
                    id: current_country,
                },
                type: "POST",
                success: function (response) {
                    if (typeof (response) != 'object') {
                        response = $.parseJSON(response)
                    }
                    console.log(response);
                    city.find('option').remove();
                    if (response.status === 1) {
                        city.removeAttr('disabled');
                        let data = response.data;
                        // console.log(data);
                        let html_option = '';
                        let new_data = [];
                        new_data.push({
                            id: '',
                            text: '<span>Choose City</span>',
                            html: '<span>Choose City</span>',
                            title: 'Choose City',
                        });

                        $.each(data, function (i, item) {
                            new_data.push({
                                id: item.id,
                                text: "<span>" + item.name[lang] + "</span>",
                                html: "<span>" + item.name[lang] + "</span>",
                                title: item.name[lang]
                            });
                        });

                        // console.log(new_data);
                        city.select2({
                            data: new_data,
                            escapeMarkup: function (markup) {
                                return markup;
                            },
                            templateResult: function (data) {
                                return data.html;
                            },
                            templateSelection: function (data) {
                                return data.text;
                            }
                        });

                        city.val('');
                        city.trigger('change');


                    }
                }
            });
        } else {
            city.find('option').remove();
            let empty_data = [];
            empty_data.push({
                id: "",
                text: '<span>Choose City</span>',
                html: '<span>Choose City</span>',
                title: 'Choose City',
            });

            city.select2({
                data: empty_data,
                escapeMarkup: function (markup) {
                    return markup;
                },
                templateResult: function (data) {
                    return data.html;
                },
                templateSelection: function (data) {
                    return data.text;
                }
            });
            city.val('');
            city.trigger('change');
        }

    }

    function submitLogin() {
        let main_author_form = $("#main_author_form");
        let name = $("#name").val();
        let l_name = $("#l_name").val();

        let username = $("#username").val();
        let password = $("#password").val();


        let data = [
            name,
            l_name,
            username,
            password,
        ];

        let inputsNotEmpty = true;

        $.each(data, function (index, value) {
            if (value === "") {
                inputsNotEmpty = false;
                return false; // exit the loop early
            }
        });

        let phone = $("#phone").val();
        let phonePattern = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;
        let phoneError = $("#phoneError");
        let phoneValidation = true;

        if (!phonePattern.test(phone)) {
            // phoneValidation = false;
            phoneValidation = true;
            phoneError.show();
        } else {
            phoneError.hide();
        }


        if (inputsNotEmpty && phoneValidation) {
            main_author_form.submit();
        } else {
            if (!inputsNotEmpty) {
                Swal.fire({
                    icon: 'error',
                    text: "Please Complete the Required Fields",
                    dangerMode: true,
                    confirmButtonColor: '#bf325c',
                    // cancelButtonColor: '#d33',
                    confirmButtonText: 'Fine',
                    showCloseButton: true,
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    text: "Please Enter Correct Phone Number",
                    dangerMode: true,
                    confirmButtonColor: '#bf325c',
                    // cancelButtonColor: '#d33',
                    confirmButtonText: 'Fine',
                    showCloseButton: true,
                });
            }

        }

    }


    function submitLogout() {
        let logout_form = $("#logout_form");
        logout_form.submit();
    }

    function favouriteChange(btn) {
        var href = $(btn).attr('data-url');
        var icon = $(btn).find('i');
        let parent_div = $(btn).parent().parent().parent().parent();


        $.ajax({

            type: 'POST',
            url: href,
            data: {
                _token: "BKQt5Gx7mwkl4dr6sqc67lfo3bFsCnxt3f8BDyuC"
            },
            success: function (data) {
                if (data.status === 1) {
                    if (data.new_status === 1) {
                        icon.removeClass('far');
                        icon.addClass('fas');


                        Swal.fire({
                            icon: 'success',
                            text: data.msg,
                            dangerMode: false,
                            confirmButtonColor: '#bf325c',
                            // cancelButtonColor: '#d33',
                            confirmButtonText: 'Thanks !',
                            showCloseButton: true,
                        });
                    } else {
                        icon.removeClass('fas');
                        icon.addClass('far');

                        if (parent_div.hasClass('parent_div')) {
                            parent_div.remove();
                        }
                        Swal.fire({
                            icon: 'success',
                            text: data.msg,
                            dangerMode: false,
                            confirmButtonColor: '#bf325c',
                            // cancelButtonColor: '#d33',
                            confirmButtonText: 'Thanks !',
                            showCloseButton: true,
                        });
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        text: data.msg,
                        dangerMode: true,
                        confirmButtonColor: '#bf325c',
                        // cancelButtonColor: '#d33',
                        confirmButtonText: 'Thanks !',
                        showCloseButton: true,
                    });
                }
            }
        });
    }


    function submitProgrammeBookingForm() {
        let programme_booking_form = $('#programme_booking_form');

        let adult_search_count = $("input[name='adult_search_count']");
        let children_search_count = $("input[name='children_search_count']");
        let infant_search_count = $("input[name='infant_search_count']");

        let person_count =
            parseInt(adult_search_count.val()) +
            parseInt(children_search_count.val()) +
            parseInt(infant_search_count.val());

        let check_in = $("#check_in");


        if (person_count === 0) {
            Swal.fire({
                icon: 'error',
                text: "Minimum 1 Person in The Programme",
                dangerMode: true,
                confirmButtonColor: '#bf325c',
                // cancelButtonColor: '#d33',
                confirmButtonText: 'Thanks !',
                showCloseButton: true,
            });
        }

        if (check_in.val() === '') {
            Swal.fire({
                icon: 'error',
                text: "Please Choose Check in Date",
                dangerMode: true,
                confirmButtonColor: '#bf325c',
                // cancelButtonColor: '#d33',
                confirmButtonText: 'Thanks !',
                showCloseButton: true,
            });
        }

        if (check_in.val() !== '' && person_count > 0) {
            programme_booking_form.submit();
        }
    }

</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');
    });
</script>
@endpush