@extends('../layout/form-layout')

@section('form-name', 'Booking Edit ')

@section('style-area')
    <style>
        .owl-stage {
            display: flex;
        }
    </style>
@endsection

@section('form-area')

    <form class="validate-form" id="frmdt" method="POST" action="{{ route('add_edit_Booking') }}">
        @csrf
        <input type="text" hidden name="guest_id" id="guest_id" value="{{ $res_details->guest_id }}">
        <input type="text" hidden name="booking_id" id="booking_id" value="{{ $res_details->booking_reservations_id }}">
        <input type="text" hidden name="booking_code" id="booking_code" value="{{ $res_details->code }}">
        <input type="text" hidden name="season_id" id="season_id" value="{{ $res_details->season_id }}">
        <input type="text" hidden name="reserv_id" id="reserv_id" value="{{ $res_details->booking_reservations_id }}">
        <input type="text" hidden name="room_meals" id="room_meals">
        <input type="text" hidden name="s_id" id="s_id" value="{{ $res_details->season_id }}">
        <input type="text" hidden name="add_facilities" id="add_facilities">
        <input type="text" hidden name="is_a_booking" id="is_a_booking">

        <input type="text" hidden name="res_status" id="res_status" value="{{ $res_details->status }}">
        <input type="text" hidden name="prev_checkin" id="prev_checkin" value="{{ $res_details->booking_checkinDate }}">
        <input type="text" hidden name="prev_checkout" id="prev_checkout"
            value="{{ $res_details->booking_checkoutDate }}">
        <div class="grid grid-cols-12 gap-5">

            <div class="col-span-12 ">


                <div class="input-form">

                    <br>
                    <label class="flex flex-col sm:flex-row">Guest Name</label><br>
                    <input type="text" disabled style="width: 50%;" class="input  border mt-2"
                        value="{{ $res_details->get_guest->guestFname }} {{ $res_details->get_guest->guestLname }} ">

                </div>


                <div class="grid grid-cols-12 gap-4 row-gap-5 mt-5" id="res_details">

                    <div class="intro-y col-span-12 sm:col-span-4 input-form">
                        <div class="mb-2">Check-in Date</div>
                        <input class="datepicker input w-56 border block mx-auto" style="width:100%;" name="datecalender"
                            id="datecalender" type="text" value="{{ old('datecalender') }}" required>
                    </div>

                    <div class="intro-y col-span-12 sm:col-span-4 input-form">
                        <div class="mb-2">Travel Agent </div>
                        <select style="width: 100%" name="agent_id" id="agent_id" class="input w-full border flex-1 "
                            onchange="setSeasons()" required>
                            @foreach ($agents as $row)
                                <option value="{{ $row->id }}"
                                    >
                                    {{ $row->agentName }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="intro-y col-span-12 sm:col-span-4 input-form">
                        <div class="mb-2">Season</div>
                        <select style="width: 100%" name="season_id" id="season_id" class="input w-full border flex-1 " disabled="disabled">
                            @if (isset($res_details))
                                @foreach ($seasons as $row)
                                    <option value="{{ $row->id }}"
                                        >
                                        {{ $row->seasonName }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>


                </div>


                <div>

                    <div style="margin:auto; width:30%;" class=" intro-y col-span-12 sm:col-span-6 input-form"
                        id="room_booking_btn_holder">
                        <button type="button" class="button w-full bg-theme-6 text-white mt-3" id="get_rooms">Get
                            Rooms</button><br><br>
                        <a href="" id="show_overwritten_btn" hidden data-toggle="modal"
                            data-target="#overiding_reservations" class="button w-full bg-theme-1 text-white mt-3">Show
                            Overriding reservations</a>
                    </div>

                    <div style="margin:auto; width:30%;" class=" intro-y col-span-12 sm:col-span-6 input-form"
                        id="show_booking_info_btn">
                    </div>

                    <div>
                        <span>No of Nights : <span id="no_of_nights"></span><br>
                            <span>Total Bill : <span id="price_holder"></span></span>
                    </div>

                    <div class="grid grid-cols-12 gap-4 row-gap-5 mt-8">

                        <div hidden class="intro-y col-span-12" id="filtered_div">
                            <div class="mb-2">
                                <h2 style="margin-bottom: 2%;">Searched Rooms</h2>
                                <div id="filtered_rooms" style="overflow-y:scroll; display:inline; "></div>
                            </div>

                        </div>

                        <div class="intro-y col-span-12" id="available_div">
                            <div class="mb-2">
                                <div class="sm:w-full lg:w-auto text-lg font-medium truncate mr-auto pb-4">Available Rooms
                                </div>
                                @php
                                    $index = 0;
                                   
                                @endphp
                                <div id="tab_cate"; class="pos__tabs nav-tabs justify-center flex">
                                    @foreach ($category as $raw_category)
                                    @php
                                         if ($index == 0) {
                                        $valap = 'active';
                                    } else {
                                        $valap = '';
                                    }
                                    @endphp
                                        <a data-toggle="tab" data-target="#roomtarget{{ $raw_category->room_categories_id }}"
                                            href="javascript:;"
                                            class="flex-1 py-2 rounded-md text-center {{ $valap }}">{{ $raw_category->room_categories_name }}  <span class="text-xs px-1 rounded-full bg-theme-6 text-white mr-1 str{{$raw_category->room_categories_id}}"> ! </span></a>
                                        @php
                                            $index++;
                                            
                                        @endphp
                                    @endforeach
                                </div>
                                <div class="tab-content" id="room-selector">
                                </div>
                            </div>
                        </div>

                        <div style="margin-top: 0%;" class="intro-y col-span-12 sm:col-span-4 input-form">
                            <div id="remarks" class="color-red">{{ $res_details->remarks }}</div>
                            <div class="mb-2">Remarks</div>
                            <textarea style="width: 100%;" name="user_remarks" id="user_remarks" cols="5"
                                rows="5"class="input w-full border mt-2 bg-gray-100">{{ $res_details->user_remarks }}</textarea>
                        </div>

                    </div>

                </div>

            </div>

    </form>



    <!--modal start -->

    <div class="modal" id="header-footer-modal-preview">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto"><span hidden id="room_id"></span> Room Details</h2>
                <div class="dropdown sm:hidden">
                    <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                        <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-600"></i>
                    </a>
                    <div class="dropdown-box w-40">
                    </div>
                </div>
            </div>
            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                <div class="col-span-12 sm:col-span-6">
                    <label>Room Category</label>
                    <div style="margin-top:2%;" id="room_category"></div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <label>Room Type</label>
                    <div style="margin-top:2%;" id="room_type"></div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <label>Room Max Adults</label>
                    <div style="margin-top:2%;" id="room_adults"></div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <label>Room Max Children</label>
                    <div style="margin-top:2%;" id="room_max_children"></div>
                </div>

                <div style="margin-top:2%;" class="col-span-12 sm:col-span-6">
                    <label>Remarks</label>
                    <span id="room_desc"></span>
                </div>
            </div>

            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                <div class="col-span-12 sm:col-span-6">
                    <h3 style="display: inline;">Additional Facilities</h3>
                    <div id="facilitiescheckbox">

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

        </div>
    </div>

    <!--modal end -->


    <!--- if overriding reservations show this modal to view the overiding reservations --->

    <!--modal start -->

    <div class="modal" id="overiding_reservations">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">Overriding Reservations</h2>
                <div class="dropdown sm:hidden">
                    <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                        <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-600"></i>
                    </a>
                    <div class="dropdown-box w-40">
                    </div>
                </div>
            </div>
            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                <div id="booking_list">
                </div>
            </div>
        </div>
    </div>


    <!--- ----------------------------------------------------------------- --- >



                                         <!--guest modal start -->

    <div class="modal" id="guest_modal">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">Guest Information</h2>
                <div class="dropdown sm:hidden">
                    <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                        <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-600"></i>
                    </a>
                </div>
            </div>
            <form autocomplete="off" id="guest_form">
                <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                    <div class="col-span-12 sm:col-span-6">
                        <label>Guest Passport / NIC No</label>
                        <input type="text" maxlength="13" id="gpass" name="gpass" required
                            class="input w-full border mt-2 flex-1" placeholder="99xxxxxx">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>First Name</label>
                        <input autocomplete="off" type="text" id="fname" name="fname" required
                            class="input w-full border mt-2 flex-1" placeholder="sam">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>Last Name</label>
                        <input type="text" id="lname" name="lname" required
                            class="input w-full border mt-2 flex-1" placeholder="smith">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>Guest Address</label>
                        <input autocomplete="off" type="text" id="gaddress" class="input w-full border mt-2 flex-1">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>Guest Email</label>
                        <input type="email" id="gemail" name="gemail" required
                            class="input w-full border mt-2 flex-1">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>Guest Contact No</label>
                        <input type="tel" id="gcontact" name="gcontact" minlength="9" maxlength="15" required
                            class="input w-full border mt-2 flex-1">
                    </div>
                    <div class="col-span-12 sm:col-span-6">
                        <label>Guest Date of birth</label>
                        <input type="date" id="gdob" name="gdob" class="input w-full border mt-2 flex-1">
                    </div>
                </div>
            </form>
            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                <button type="button" id="clsbtn" data-dismiss="modal"
                    class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Close</button>
                <button onclick="addguest()" type="button" id="addguestbtn"
                    class="button w-20 bg-theme-1 text-white">Save</button>
            </div>
        </div>
    </div>

    <!--modal end -->



    <!-- booked rooms Modal -->

    <div class="modal" id="booking_info_modal">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">Booking Details</h2>
            </div>

            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">

                <div class="col-span-12 sm:col-span-12" id="booking_checkindetails">
                </div>

                <div class="col-span-12 sm:col-span-12">
                    <table class="table table-report -mt-2" id="booked_rooms_table">
                        <thead>
                            <tr>
                                <th>Room Type</th>
                                <th>Meal Plan</th>
                                <th>Room Category</th>
                            </tr>
                        </thead>
                        <tbody id="booked_rooms_list">
                        </tbody id="tbody">
                    </table>
                </div>

                <div class="col-span-12 sm:col-span-12">
                    <div class="mb-2">Remarks</div>
                    <textarea disabled style="width: 100%;" name="booked_remarks" id="booked_remarks" cols="5"
                        rows="5"class="input w-full border mt-2 bg-gray-100"></textarea>
                </div>

            </div>
            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                <button type="button" data-dismiss="modal"
                    class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
            </div>
        </div>
    </div>



    {{-- room reservation edit additional features modal --}}

    <div class="modal" id="additional_features_room">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">Additional Features</h2>
            </div>

            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                <div class="col-span-12 sm:col-span-12">
                    <div id="facilitieslist">
                    </div>
                </div>
            </div>
            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                <button type="button" data-dismiss="modal"
                    class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
            </div>
        </div>
    </div>


    {{-- RESERVATION DETAILS SHOWING MODAL --}}

    <div class="modal" id="reservationmodal">
        <div class="modal__content">
            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">Reservation Details</h2>
                <div id="checkin-button-holder">

                </div>
            </div>

            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">

                <div class="col-span-12 sm:col-span-12" id="checkindetails">
                </div>

                <div class="col-span-12 sm:col-span-12" id="printdiv">
                </div>

                <div class="col-span-12 sm:col-span-12">
                    <table class="table table-report -mt-2" id="booked_rooms_table">
                        <thead>
                            <tr>
                                <th>Room No.</th>
                                <th>Room Type</th>
                                <th>Room Category</th>
                                <th>Basis</th>
                            </tr>
                        </thead>
                        <tbody id="bookedroomslist">
                        </tbody id="tbody">
                    </table>
                </div>

                <div class="col-span-12 sm:col-span-12">
                    <div class="mb-2">Remarks</div>
                    <textarea disabled style="width: 100%;" name="remarks" id="remarks" cols="5"
                        rows="5"class="input w-full border mt-2 bg-gray-100"></textarea>
                </div>

            </div>
            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                <button type="button" data-dismiss="modal"
                    class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
            </div>
        </div>
    </div>




@endsection



@if (isset($status_info))

    <div>

        @section('additional-info')
            <p>Created By : {{ isset($status_info) ? $status_info['created_by'] : '' }}</p>
            <p>Created Date : {{ isset($status_info) ? $status_info['created_at'] : '' }}</p>
            <p>Updated By : {{ isset($status_info) ? $status_info['updated_by'] : '' }}</p>
            <p>Updated Date : {{ isset($status_info) ? $status_info['updated_at'] : '' }}</p>
        @endsection

    </div>

@endif


@section('script-area')

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

            $('#save').attr('hidden', false);
            $('#save').text('UPDATE');
            $('#cancel').attr('hidden', false);

            preloader();

            $('.dropdowncls').select2();
            // sessionStorage.clear();
            sessionStorage.setItem("total_bill", 0);
            sessionStorage.setItem("facilities", JSON.stringify([]));
            sessionStorage.setItem("customers", JSON.stringify([]));

            // this function will limit the date select to select only the today and future dates 
            // not previous dates

            //  setdatepickers();

            // this function will get the vacant rooms along with the reservation rooms

            // -----------------------------------------------------------------------------


            //-----------------------------------------------------------------------------

        });


        //-----------------------------------------------------------------------------


        function setSeasons() {

            var url = "{{ route('get_agent_seasons') }}";

            var agent_id = $('#agent_id').val();

            var calenderDates = getCalenderDate();

            var params = {
                'agent_id': agent_id,
                'checkindate': calenderDates.indate,
                'checkoutdate': calenderDates.outdate
            };
            preloader();
            $.ajax({
                url: url,
                data: params,
                success: function(res) {

                    $('#season_id').html('');

                    

                    var data = res;

                    if (data.error_status == 0) {

                        data.data.forEach(e => {

                            $('#season_id').append('<option value="' + e.season_id + '" >' + e
                                .seasonName + '</option>');

                        });
                        removeLoader();
                    } else {

                        $('#season_id').html('');
                        removeLoader();
                    }


                },
                error: function(err) {

                    $('#season_id').html('');
                    removeLoader();
                }
            });
            removeLoader();
        }


        //-----------------------------------------------------------------------------


        function btnclicker() {
            $('#season_id').prop('disabled',false);
            $('#get_rooms').click();

        }




        //---------------------------------------------------------------------------

        // get avialable rooms 

        $('#get_rooms').click(function() {

            $('#frmdt').validate({

                rules: {

                    datecalender: {
                        required: true,
                    },
                    agent_id: {
                        required: true,
                    }

                },


            });

            if ($('#frmdt').valid()) {



                var url = "{{ route('get_rooms_booking_eded') }}";

                var calenderDates = getCalenderDate();

                var params = {
                    'checkindate': calenderDates.indate,
                    'checkoutdate': calenderDates.outdate,
                    'meal_plan': $('#basis_id').val(),
                    'agent_id': $('#agent_id').val(),
                    'season_id': $('#season_id').val(),
                    'res_id': $('#reserv_id').val(),
                }


                $.ajax({

                    url: url,
                    data: params,
                    success: function(data) {

                        $('#room-selector').html('');
                        $('#price_holder').html('');
                        var res = data;
                        let arry = [];


                        if (res.status == 1) {

                            if (res.categories.length > 0) {

                                res.categories.forEach((e,index) => {
                                        if(index==0)
                                        {
                                            var ac='active';
                                        }
                                        else
                                        {
                                            var ac='';
                                        }

                                    $('#room-selector').append('<div id="roomtarget'+e.room_categories_id +'" class="tab-content__pane "><div style="overflow-y:scroll;" class="grid grid-cols-12 gap-2 row-gap-1 mt-1" ><div hidden id="divrow' +
                                            e.room_categories_id +
                                            '" class="intro-y col-span-12" ><div  class="text-lg font-medium truncate">' +
                                            e.room_categories_name +
                                            '</div><div  id="div' + e
                                            .room_categories_id +
                                            '"></div></div></div></div>');
                                            $('#divrow'+e.room_categories_id).show();
                                            $('.str'+e.room_categories_id).hide();

                                            res.types.forEach(q => {
                                            $('#div' + e.room_categories_id)
                                                .append(
                                                    '<div class="col-span-12 lg:col-span-6"  id="divCheckbox'+e.room_categories_id + q.room_type_id +'" ><div  class="accordion user-permissions-content"><div id="modulediv' +
                                                    e.room_categories_id +q.room_type_id +
                                                    '" class="user-permissions accordion__pane  border-b border-gray-200 dark:border-dark-5"> <div class="intro-y grid grid-cols-12 gap-6 border-b header-row"><div class="col-span-12 lg:col-span-9 title-side"><h2 class="font-medium text-base mr-auto">' +
                                                    q.room_type_Select +
                                                    ' <span class="text-xs px-1 rounded-full bg-theme-6 text-white mr-1 strtype'+
                                                    e.room_categories_id +q.room_type_id +'"> ! </span></h2></div><div class="col-span-12 lg:col-span-3 controler-side"><a id="togglerbtn' +
                                                    e.room_categories_id +
                                                    '"  href="javascript:;" class="user-permissions-list accordion__pane__toggle view-more-icon font-medium block"><i style="" class="fas fa-chevron-circle-down"></i></a></div></div><div class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"><div class="responsive-mode available-rooms room-selector-crousel" id="type' +
                                                    e.room_categories_id + q
                                                    .room_type_id +
                                                    '"></div></div></div></div>'
                                                  );
                                                  
                                                $('#divCheckbox'+e.room_categories_id + q.room_type_id).hide();
                                                $('.strtype'+e.room_categories_id + q.room_type_id).hide();
                                        });

                                });

                                if (res.rooms.length > 0) {
                                   
                                    res.rooms.forEach((e, index) => {
                                        $('#divCheckbox'+e.room_category + e.room_type_id).show();

                                        res.reserved.forEach(res => {

                                            if (res.room_id == e.room_id) {

                                                var clr = 'color-blue';

                                            } else {
                                                var clr = 'color-green';
                                            }

                                        });

                                        $('#h2' + e.room_category).attr('hidden', false);
                                        $('#div' + e.room_category).attr('hidden', false);

                                        var owl = $('#type' + '' + e.room_category + '' + e
                                            .room_type_id);

                                        owl.owlCarousel({
                                            loop: false,
                                            nav: true,
                                            lazyLoad: true,
                                            responsiveClass: true,
                                            responsive: {
                                                0: {
                                                    items: 1
                                                },
                                                576: {
                                                    items: 3
                                                },
                                                768: {
                                                    items: 5
                                                },
                                            },
                                            autoplay: false,
                                            autoplayHoverPause: true,
                                            autoplayTimeout: 3000,
                                            smartSpeed: 750
                                        });

                                        // if there is a booking for the room then show it in different color
                                        // or show it in default color

                                        if (e.get_room_booking.length > 0 && e.get_room_booking[
                                                0].status == 0) {


                                            // $('#type'+''+e.room_category+''+e.room_type_id).append('<div class="bg-theme-9" style=" padding-bottom:2%; width: 150px;height:13%; display: inline-block;  margin-left:1%; margin-top:1%; margin-bottom:2%; "><div   style=" margin-top:10%; margin-left:10%;"><input type="checkbox" id="room_checked'+e.room_id+'" name="room_selected[]" onclick="setselected('+e.room_id+')" value="'+e.room_id+'"><h2 style="display: inline; margin-left:2%; color:white; text-align:center " >'+e.get_room_type.room_type_Select+" "+e.room_name+'</h2><a onclick="showroominfo('+e.room_id+')" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-9 text-white">Show Room Info</a><br><p style="color:white;" >Floor No : '+e.room_floor+'</p><div id="room_price'+e.room_id+'"></div><a  href="javascript:;" data-toggle="modal" data-target="#booking_info_modal" onclick="get_booking_details('+e.get_room_booking[0].booking_reservations_id+')" class="button inline-block bg-theme-9 text-white">Show Booking</a></div></div>');

                                            owl.trigger('add.owl.carousel', [
                                                '<div class="h-40 px-2"><div  style="background-color:#62f962;" class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item removeBG' +
                                                e.room_id +
                                                '"><div class="h-full grid items-center items-center "><div class="icon-line items-center mt-1"><div class="intro-y flex flex-col sm:flex-row items-center"><div class="intro-y col-span-12 md:col-span-6 ml-2"><div class="form-check form-switch tooltip" title="Select Unselect"><input class="form-check-input input--switch input small" type="checkbox" id="room_checked' +
                                                e.room_id +
                                                '" name="room_selected[]" onclick="setselected(' +
                                                e.room_id + ');" value="' + e.room_id +
                                                '" disabled><label class="form-check-label" for="flexSwitchCheckDefault">' +
                                                e.room_name +
                                                '</label></div></div><div class="intro-y col-span-12 md:col-span-6 ml-3 tooltip" title="Floor number"><div class="floor-no"><i data-feather="layers" class="side-menu__sub-icon"></i> : ' +
                                                e.room_floor +
                                                '</div></div></div><div class="intro-y flex flex-col sm:flex-row items-center"><div class="intro-y col-span-12 md:col-span-6 ml-2"><ul class="list-group"><li class="list-group-item  tooltip" title="view"><div class="floor-no ml-1"><a onclick="showroominfo(' +
                                                e.room_id +
                                                ')" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i style="color:#38761D;" data-feather="eye" class="side-menu__sub-icon bgclr' +
                                                e.room_id +
                                                ' "></i></span></a></div></li></ul></div><div class="intro-y col-span-12 md:col-span-6 mt-3 pl-2 text-left rate-text" id="room_price' +
                                                e.room_id +
                                                '"></div></div> <div class="intro-y flex flex-col sm:flex-row items-center"></div></div></div></div></div>'
                                            ]).trigger('refresh.owl.carousel');

                                            feather.replace();

                                        } else {


                                            owl.trigger('add.owl.carousel', [
                                                '<div class="h-40 px-2"><div  class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item "><div class="h-full grid items-center items-center "><div class="icon-line items-center mt-1"><div class="intro-y flex flex-col sm:flex-row items-center"><div class="intro-y col-span-12 md:col-span-6 ml-2"><div class="form-check form-switch tooltip" title="Select Unselect"><input class="form-check-input input--switch input small" type="checkbox" id="room_checked' +
                                                e.room_id +
                                                '" name="room_selected[]" onclick="setselected(' +
                                                e.room_id + ');" value="' + e.room_id +
                                                '" ><label class="form-check-label" for="flexSwitchCheckDefault">' +
                                                e.room_name +
                                                '</label></div></div><div class="intro-y col-span-12 md:col-span-6 ml-3 tooltip" title="Floor number"><div class="floor-no"><i data-feather="layers" class="side-menu__sub-icon"></i> : ' +
                                                e.room_floor +
                                                '</div></div></div><div class="intro-y flex flex-col sm:flex-row items-center"><div class="intro-y col-span-12 md:col-span-6 ml-2"><ul class="list-group"><li class="list-group-item  tooltip" title="view"><div class="floor-no ml-1"><a onclick="showroominfo(' +
                                                e.room_id +
                                                ')" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="eye" class="side-menu__sub-icon color-green"></i></span></a></div></li></ul></div><div class="intro-y col-span-12 md:col-span-6 mt-3 pl-2 text-left rate-text" id="room_price' +
                                                e.room_id +
                                                '"></div></div> <div class="intro-y flex flex-col sm:flex-row items-center"></div></div></div></div></div>'
                                            ]).trigger('refresh.owl.carousel');

                                            feather.replace();

                                            // $('#type'+''+e.room_category+''+e.room_type_id).append('<div class="bg-theme-1" style=" padding-bottom:2%; width: 150px;height:13%; display: inline-block;  margin-left:1%; margin-top:1%; margin-bottom:2%; "><div   style=" margin-top:10%; margin-left:10%;"><input type="checkbox" id="room_checked'+e.room_id+'" name="room_selected[]" onclick="setselected('+e.room_id+')" value="'+e.room_id+'"><h2 style="display: inline; margin-left:2%; color:white; text-align:center " >'+e.get_room_type.room_type_Select+" "+e.room_name+'</h2><a onclick="showroominfo('+e.room_id+')" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-1 text-white">Show Room Info</a><br><p style="color:white;" >Floor No : '+e.room_floor+'</p><div id="room_price'+e.room_id+'"></div></div></div>');

                                        }

                                        e.get_agent_rates.forEach((c) => {



                                            if (c.get_meal_plan) {


                                                $('#room_price' + e.room_id).append(
                                                    '<div><input id="rate' + e
                                                    .room_id + '' + c.meal_plan_id +
                                                    '" onclick="setroommealplan(' +
                                                    e.room_id + ',' + c
                                                    .meal_plan_id + ',' + c.rate +
                                                    ')" class="input border" type="radio" name="meal' +
                                                    index + '">' + c.get_meal_plan
                                                    .mealPlanCode + ' ' +
                                                    currency_symbol() + " " +
                                                    currency_changer(c.rate) +
                                                    '</div>');

                                                // $('#room_price'+e.room_id).append('<p style=" padding-top:2%; color:white; margin-top:5%; margin-bottom:2%; margin-left:2%; display:inline; " >'+c.get_meal_plan.mealPlanCode+'</p><p style="display: inline; color:white; margin-left:5%; " class="currency_logo"></p><p  class="room_rate" style="color:white; margin-left:1%; display:inline;" >'+currency_symbol()+" "+currency_changer(c.rate)+'</p><input style="margin-left:5%;" id="rate'+e.room_id+''+c.meal_plan_id+'"  onclick="setroommealplan('+e.room_id+','+c.meal_plan_id+','+c.rate+')" type="radio" name="meal'+index+'" value=""><br>');

                                            }

                                        });


                                        
                                        res.reserved.forEach(res => {
                                            
                                            if (res.room_id == e.room_id) {
                                                
                                                arry.push(res.room_category);
                                                
                                                $("#modulediv"+res.room_category+res.room_type_id).addClass("active");
                                                $('.str'+res.room_category).show();
                                                $('.strtype'+res.room_category+res.room_type_id).show();

                                                var id = '#room_checked' + e.room_id;
                                                var roomdiv = '#roomdiv' + e.room_id;
                                                var removebg = '.removeBG' + e.room_id;
                                                var bgcor = '.bgclr' + e.room_id
                                                var meal_id = '#rate' + e.room_id +
                                                    res.basis;
                                                var showbtn = '#showbtn' + e.room_id;

                                                $(bgcor).css({
                                                    "color": "#0B5394"
                                                });
                                                $(removebg).css({
                                                    "background-color": "#9FC5E8"
                                                });
                                                $(roomdiv).removeClass('bg-theme-1');
                                                $(roomdiv).addClass('bg-theme-6');

                                                $(showbtn).removeClass('bg-theme-1');
                                                $(showbtn).addClass('bg-theme-6');

                                                // $(meal_id).prop('checked', true);


                                                if (e.status == 5 || e.status == 2) {

                                                    e.checked = 0;

                                                } else {

                                                    $(id).prop('checked', true);
                                                    $(meal_id).prop('checked', true);
                                                    $(id).prop('disabled', false);

                                                    e.checked = 1;



                                                    e.meal_plan = res.basis;
                                                    e.basis = res.basis;
                                                    e.rate = res.rate;

                                                }

                                            }

                                            
                                        });
                                        var minnumber = Math.min.apply(Math,arry);
                                        $("#roomtarget"+minnumber).addClass("active");
                                        
                                        e.facilities = [];

                                        // add the facilities to res.rooms.facilities
                                        e.get_facilities.forEach(f => {

                                            var facilitiy = {
                                                'add_additional_facilites_id': f
                                                    .add_additional_facilites_id,
                                                'add_additional_facilites_name': f
                                                    .add_additional_facilites_name,
                                            }

                                            e.facilities.push(facilitiy);

                                        });

                                    });


                                    sessionStorage.setItem('rooms', JSON.stringify(res.rooms));
                                    sessionStorage.setItem('total_bill', 0);
                                    //$('#search_div').attr('hidden',false);
                                    calculateDT();
                                    cal_total_room_bill2();
                                } else {

                                    $('#room-selector').html('');
                                    $('#room-selector').append('<p>No vacant rooms found</p>');

                                }

                            }

                            removeLoader();

                        } else {

                            removeLoader();

                            notify(1, 'unable to fetch available rooms');

                        }

                    },

                    error: function() {
                        removeLoader();
                        notify(1, 'An error was encountered.');
                    }

                });


            }

        });


        // show room information in a modal 

        function showroominfo(id) {

            preloader();

            var url = "{{ route('get_room_details') }}";

            var data = {
                'room_id': id,
                'agent_id': $('#agent_id').val(),
            }


            $.ajax({
                url: url,
                data: data,
                success: function(data) {

                    var res = data;
                    //console.log(res.get_agent_rates);

                    $('#room_id').html('');
                    $('#room_category').html('');
                    $('#room_type').html('');
                    $('#room_adults').html('');
                    $('#room_max_children').html('');
                    $('#room_desc').html('');
                    $('#facilitiesbody').html('');
                    $('#facilitiescheckbox').html('');
                    $('#meal_plan_body').html('');
                    $('#room_id').append(res.room_name);
                    $('#room_category').append('<p>' + res.get_category.room_categories_name + '</p>');
                    $('#room_type').append('<p>' + res.get_room_type.room_type_Select + '</p>');
                    $('#room_adults').append('<p>' + res.room_max_adults + '</p>');
                    $('#room_max_children').append('<p>' + res.room_max_children + '</p>');

                    if (res.room_descrption != null) {
                        $('#room_desc').append('<p>' + res.room_descrption + '</p>');
                    }

                    var index = 1;

                    var rooms = sessionStorage.getItem('rooms');
                    rooms = JSON.parse(rooms);

                    res.get_agent_rates.forEach(e => {

                        $('#meal_plan_body').append('<tr><td>' + e.get_meal_plan.mealPlanCode +
                            '</td><td>' + e.rate + '</td><td><input onclick="setroommealplan(' +
                            id + ',' + e.meal_plan_id + ')" type="radio" name="meal" value="' + e
                            .meal_plan_id + '"></td></tr>');

                    });

                    res.all_facilities.forEach(d => {

                        $('#facilitiescheckbox').append('<br><input onclick="getchecked(' + id + ',' +
                            index + ')" style="margin-top: 2%;" id="check' + index +
                            '" class="input input--switch border" name="room_facilitiy[]" type="checkbox"  value="' +
                            d.add_additional_facilites_id +
                            '" ><label class="cursor-pointer select-none" style="margin-top: 2%; margin-left:3%;">' +
                            d.add_additional_facilites_name + '</label>');


                        rooms.forEach(room => {

                            if (room.room_id == id) {

                                room.facilities.forEach(f => {


                                    if (f.add_additional_facilites_id == d
                                        .add_additional_facilites_id) {

                                        $('#check' + index).prop('checked', true);
                                        //  console.log(" value "+f.add_additional_facilites_id+" value "+d.add_additional_facilites_id);

                                    }

                                });

                            }

                        });

                        index++;



                    });



                },
                error: function() {

                    console.log('error.....');
                }
            });

            removeLoader();
            $('#room_id').append(id);



        }

        //--------- setroommealplan-------------------------------

        function setroommealplan(room_id, meal_id, rate) {


            var main = JSON.parse(sessionStorage.getItem("rooms"));


            main.forEach(e => {

                if (e.room_id == room_id) {



                    delete e.meal_plan;
                    delete e.rate;
                    e.meal_plan = meal_id;
                    e.rate = rate;

                }

            });


            sessionStorage.setItem("rooms", JSON.stringify(main));

            // this will check all the checkboxes related to the given room meal plan

            var checker_id = "#rate" + room_id + "" + meal_id;

            $(checker_id).prop('checked', true);

            cal_total_room_bill2();


        }

        //---------------------------------------------------------------

        // this function will add new facility input box to the show room info


        //--------------------------------------


        // this function will get the checked facilities and store then in sessionStorage


        function getchecked(id, index) {

            var checked = [];


            $.each($("input[name='room_facilitiy[]']:checked"), function() {

                var facility = {
                    'add_additional_facilites_id': parseInt(this.value),
                }

                checked.push(facility);

            });

            var main = JSON.parse(sessionStorage.getItem("rooms"));


            main.forEach(e => {

                if (e.room_id == id) {

                    delete e.facilities;
                    e.facilities = checked;

                }

            });

            sessionStorage.setItem("rooms", JSON.stringify(main));
            //console.log(main);


        }



        //============================================


        //---------- setselected ----------------


        function setselected(id) {


            var main = JSON.parse(sessionStorage.getItem("rooms"));

            var room_id = '#room_checked' + id;

            var roomdiv = '#roomdiv' + id;

            // console.log(room_id);

            main.forEach(e => {

                if (e.room_id == id) {

                    if (e.checked == 0 || e.checked == null) {
                        e.checked = 1;

                        $(room_id).prop('checked', true);

                        $(roomdiv).removeClass('bg-theme-1');
                        $(roomdiv).addClass('bg-theme-6');

                    } else {

                        var rate_id = '#rate' + id + e.meal_plan;

                        e.checked = 0;

                        delete e.meal_plan;
                        delete e.rate;

                        $(room_id).prop('checked', false);
                        $(rate_id).prop('checked', false);

                        $(roomdiv).removeClass('bg-theme-6');
                        $(roomdiv).addClass('bg-theme-1');

                    }

                }

            });


            sessionStorage.setItem("rooms", JSON.stringify(main));

            cal_total_room_bill2();

        }


        // ----------------------------------------


        // save the reservation

        $('#save').click(function() {
            $('#season_id').prop('disabled',false);

            $('#frmdt').validate({


                rules: {

                    guest_id: {
                        required: true,
                    },

                    reservation_status: {
                        required: true,
                    },

                    indate: {
                        required: true,
                    },
                    outdate: {
                        required: true,
                    },

                    agent_id: {
                        required: true,
                    },

                },

            });

            if ($('#frmdt').valid()) {

                preloader();

                if (isRoomsSelected()) {

                    // $('#save').attr('disabled',true);
                    // $('#get_rooms').attr('disabled',true);
                    // $("#guest_modal_btn").attr('hidden',true);
                    // $('#room-selector').attr('hidden',true);
                    // $('#guest_id').attr('hidden',true);

                    var main = JSON.parse(sessionStorage.getItem("rooms"));
                    var customers = JSON.parse(sessionStorage.getItem("customers"));
                    var room_facilities = [];
                    var finalrooms = [];

                    main.forEach(e => {
                        if (e.checked == 1) {

                            var row = {
                                'room_id': e.room_id,
                                'facilities': e.facilities,
                            }

                            var row2 = {
                                'room_id': e.room_id,
                                'meal_plan': e.meal_plan,
                                'rate': e.rate,
                                'booking': null,
                            }


                            if (e.get_room_booking != "") {

                                row2.booking = e.get_room_booking[0].res_id;

                            }

                            room_facilities.push(row);
                            finalrooms.push(row2);

                        }
                    });


                    var finalstring = JSON.stringify(room_facilities);

                    var finalrooms = JSON.stringify(finalrooms);

                    $('#add_facilities').val(finalstring);

                    $('#room_meals').val(finalrooms);

                    // get the selected guest form drop down if there is a new guest added

                    var guest_name = $("#guest_id").val();

                    customers.forEach(f => {

                        var storedguest_name = f.firstname + ' ' + f.lastname;

                        if (guest_name == storedguest_name) {

                            $('#frmdt').append('<input type="text" name="gpass" value="' + f.passport_id +
                                '" >');
                            $('#frmdt').append('<input type="text" name="f_name"  value="' + f.firstname +
                                '">');
                            $('#frmdt').append('<input type="text" name="l_name" hidden value="' + f
                                .lastname + '">');
                            $('#frmdt').append('<input type="text" name="g_address" hidden value="' + f
                                .address + '">');
                            $('#frmdt').append('<input type="text" name="g_email" hidden value="' + f
                                .email + '">');
                            $('#frmdt').append('<input type="text" name="g_contact" hidden value="' + f
                                .contact + '">');
                            $('#frmdt').append('<input type="text" name="g_dob" hidden value="' + f.dob +
                                '">');
                        }

                    });


                    // this function will check if this reservation rooms are overriding 
                    //another reservation rooms, and if so then show a popup asking whether to overwrite 
                    // or terminate the process which then user can choose another rooms



                    var calenderDates = getCalenderDate();

                    $('#frmdt').append('<input hidden type="text" name="indate" value="' + calenderDates.indate +
                        '" >');
                    $('#frmdt').append('<input hidden type="text" name="outdate" value="' + calenderDates.outdate +
                        '" >');
                    checkif_rooms_override(finalrooms);
                    //$('#frmdt').submit();


                } else {

                    removeLoader();

                    notify(1, 'please select a room for the reservation and meal plan');


                }

            }

        });



        function isRoomsSelected() {

            ischecked = false;

            var main = JSON.parse(sessionStorage.getItem("rooms"));

            $.each($("input[name='room_selected[]']:checked"), function(id) {

                //$("input[name='room_selected[]']").attr('hidden',true);

                main.forEach(e => {
                    //console.log(this.value);
                    if (e.room_id == this.value) {

                        if (e.meal_plan != null) {

                            ischecked = true;

                        } else {

                            // $("input[name='room_selected[]']").attr('hidden',false);
                            ischecked = false;

                        }

                    }

                });


            });

            return ischecked;

        }



        // this function will limit the date select to select only the today and future dates not previous 
        // dates

        function setdatepickers() {

            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();

            today = yyyy + '-' + mm + '-' + dd;

            // $("#indate").attr('min',today);

            //$("#outdate").attr('min',today);


        }



        // this function make the calculate the total room bill and save it in session storage 
        //and show in the UI

        function cal_total_room_bill2() {

            var rooms = JSON.parse(sessionStorage.getItem("rooms"));

            var total_bill = 0;

            rooms.forEach(e => {

                if (e.rate != null && e.checked == 1) {

                    total_bill = Number(total_bill) + Number(e.rate);

                } else {

                    total_bill = Number(total_bill) + 0;

                }

            });

            var dif = calculateDT();

            total_bill = Number(total_bill) * Number(dif);

            $('#price_holder').html('');
            $('#price_holder').append('<p style="display: inline;" >' + currency_symbol() + " " + currency_changer(
                total_bill) + ' /=' + '</p>');

            sessionStorage.setItem('total_bill', total_bill);

        }


        // this function will calculate the difference between two dates which is used for the calculation 
        // of room rate (total roo price * no of days);

        function calculateDT() {

            var oneD = 1000 * 60 * 60 * 24;
            var startDT = ($("#indate").val());
            var endDT = ($("#outdate").val());
            var sMS = new Date(startDT);
            var eMS = new Date(endDT);

            $('#no_of_nights').html('');

            var diff = Math.round((eMS.getTime() - sMS.getTime()) / oneD);

            $('#no_of_nights').append('<p style="display:inline;">' + diff + '</p><br>');

            return diff;

        }




        function checkif_rooms_override(rooms) {

            var calenderDates = getCalenderDate();
            var url = "{{ route('check_booking_rooms_overriding') }}";

            var param = {
                id: '{{ $res_details->booking_reservations_id }}',
                indate: calenderDates.indate,
                outdate: calenderDates.outdate,
                rooms: rooms
            }


            $.ajax({
                Type: 'GET',
                url: url,
                data: param,
                success: function(res) {


                    var result = res;
                    var rooms = res;

                    if (result.error_status == 0) {

                        //console.log(result.data.length);
                        if (result.data.length > 0) {

                            $('#booking_list').html('');

                            result.data.forEach((e, index) => {


                                $('#booking_list').append('<div><a onclick="get_booking_rooms(' +
                                    result.data2[index] +
                                    ')"  href="javascript:;" data-toggle="modal" data-target="#reservationmodal" class="button inline-block  text-white" style="background-color:#383838;" >' +
                                    e + '</a></div><br>');
                                get_booking_rooms(result.data2[index]);

                            });
                            $('#show_overwritten_btn').attr('hidden', false);
                            var msg = result.data + "  Booking should be overwritten,continue ?";

                            confirmnotify(msg).then(result => {

                                if (result.isConfirmed) {
                                    rooms.data.forEach((e, index) => {
                                        booking_delete_by_loop(rooms.data2[index]);
                                    });
                                    formsubmit();
                                } else if (result.isDenied) {
                                    removeLoader();
                                }

                            });


                        } else {

                            console.log('can submit without conflict');
                            $('#frmdt').submit();

                        }

                    } else {

                        removeLoader();

                        notify(1, 'unable to save the changes,something went wrong');

                    }


                },
                error: function(err) {

                    console.log(err);

                }
            });

        }



        function formsubmit() {

            $('#frmdt').submit();

        }

        function get_booking_rooms(id) {

            var url = "{{ route('get_booking_rooms') }}";

            var params = {
                'res_id': id,
            }


            $.ajax({
                type: 'GET',
                url: url,
                data: params,
                success: function(res) {
                    //console.log(res);
                    var data = res;

                    var total_bill = 0;


                    $('#bookedroomslist').html('');
                    $('#remarks').html('');
                    $('#checkindetails').html('');

                    $('#checkindetails').append('<p >Reservation : ' + data.res_details.code + '</p>');
                    $('#checkindetails').append('<p >Guest Name : ' + data.res_details.get_guest.guestFname +
                        ' ' + data.res_details.get_guest.guestLname + '</p>');
                    $('#checkindetails').append('<p style="margin-bottom:2%;" >Travel Agent : ' + data
                        .res_details.get_travel_agent.agentName + '</p>');
                    $('#checkindetails').append('<p>Check in Date : ' + data.res_details.checkinDate +
                        '</p><p>Check out Date : ' + data.res_details.checkoutDate + '</p>');

                    if (data.res_details.status == 0) {
                        // pending
                        $('#checkindetails').append('<p>Reservation Status : PENDING </p>');
                    }

                    if (data.res_details.status == 1) {

                        // confirmed
                        $('#checkindetails').append('<p>Reservation Status : CONFIRMED </p>');

                    }

                    if (data.res_details.status == 2) {

                        // checked in
                        $('#checkindetails').append('<p>Reservation Status : CHECKED-IN </p>');

                    }

                    if (data.res_details.status == 3) {

                        // checkout
                        $('#checkindetails').append('<p>Reservation Status : CHECKOUT </p>');

                    }

                    $('#remarks').val(data.res_details.remarks);

                    data.rooms.forEach(e => {



                        $('#bookedroomslist').append('<tr><td>' + e.room_name + '</td><td>' + e
                            .get_room_type.room_type_Select + '</td><td>' + e.get_category
                            .room_categories_name + '</td><td>' + e.mealPlanCode + '</td></tr>');

                        total_bill = Number(total_bill) + Number(e.rate);

                    });

                    if (res.res_details.status == 2) {

                        $('#checkin-button-holder').html('');

                        // $('#checkin-button-holder').append('<button disabled class="button w-30 bg-theme-6 text-white " >Checked IN</button>');

                        $('#printdiv').html('');

                    }

                    // var diff = calculatedifference(data.res_details.checkinDate,data.res_details.checkoutDate);

                    // $('#checkindetails').append('<p style="margin-top:1%;" >No of Nights : '+diff+'</p>');


                },
                error: function(err) {

                    console.log(err);

                }

            });

        }

        function booking_delete_by_loop(id) {

            var url = "{{ route('booking_delete_by_loop') }}";

            var params = {
                'res_id': id,
            }


            $.ajax({
                type: 'GET',
                url: url,
                data: params,
                success: function(res) {

                },
                error: function(err) {

                    console.log(err);

                }

            });

        }

        function calculateDT() {

            var calenderDates = getCalenderDate();

            var oneD = 1000 * 60 * 60 * 24;
            var startDT = calenderDates.indate;
            var endDT = calenderDates.outdate;
            var sMS = new Date(startDT);
            var eMS = new Date(endDT);

            $('#no_of_nights').html('');

            var diff = Math.round((eMS.getTime() - sMS.getTime()) / oneD);

            $('#no_of_nights').append('<p style="display:inline;">' + diff + '</p><br>');

            return diff;

        }

        // function notyfy_resevation(id, name) {

        //     jQuery('#room_checked' + id).change(function() {
        //         if ($(this).prop('checked')) {
        //             notify(0, 'Room number ' + name + ' added to this resevation');
        //         } else {
        //             notify(0, 'Room number ' + name + ' Remove from this resevation'); //not checked
        //         }
        //     });
        // }

        function getCalenderDate() {

            var datespicked = $('#datecalender').val();

            var dateranger = datespicked.split('-');

            var startdate = new Date(dateranger[0]);

            var enddate = new Date(dateranger[1]);

            startdate = startdate.getFullYear() + "-" + String(startdate.getMonth() + 1) + "-" + startdate.getDate();

            enddate = enddate.getFullYear() + "-" + String(enddate.getMonth() + 1) + "-" + enddate.getDate();

            var data = {
                'indate': startdate,
                'outdate': enddate,
            };

            return data;

        }
    </script>

    @if (isset($res_details))
        <script>
            $(function() {

                var checkindate = "{{ $res_details->booking_checkinDate }}";

                var checkoutdate = "{{ $res_details->booking_checkoutDate }}";

                bCheckinDate = new Date(checkindate).toDateString();
                bCheckoutDate = new Date(checkoutdate).toDateString();

                bCheckinDate = bCheckinDate.split(' ');
                bCheckoutDate = bCheckoutDate.split(' ');

                bookingdates = bCheckinDate[2] + ' ' + bCheckinDate[1] + ',' + bCheckinDate[3] + ' - ' + bCheckoutDate[
                    2] + ' ' + bCheckoutDate[1] + ',' + bCheckoutDate[3];

                $('#datecalender').val(bookingdates);


                $('#get_rooms').click();

            });
        </script>
    @endif

@endsection