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

@section('form-name', 'Room Reservation')

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

@section('form-area')

  <div class="edit-reservation-page">
    <form class="validate-form" id="frmdt" method="POST" action="{{ route('add_edit_reservation') }}">
        @csrf

        <input type="text" hidden name="reserv_id" value="{{ isset($details) ? $details->reserv_id : '' }}">
        <input type="text" hidden name="room_meals" id="room_meals">
        <input type="text" hidden name="add_facilities" id="add_facilities">
        <input type="text" hidden name="is_a_booking" id="is_a_booking">
        <div class="grid grid-cols-12 gap-1">

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

            <div class="input-form form-row">
                    <div class="grid grid-cols-12 gap-6 row-gap-5 mt-5">
                        @if (count($bookings) > 0)
                        <div class="intro-y col-span-12 sm:col-span-4 input-form">
                            <label class="flex flex-col sm:flex-row">Bookings</label>
                            <select id="booking_id" class="booking-id input w-full border flex-1 ">
                                <option value="" selected="selected">Select Booking</option>
                                @foreach ($bookings as $row)
                                    <option value="{{ $row->booking_reservations_id }}">{{ $row->code }}</option>
                                @endforeach

                            </select>

                    <span><button onclick="get_booking()" class="button inline-block bg-theme-1 text-white"
                            style="margin-left:2%;" id="booking_btn" type="button">Get Booking</button></span>
                        </div>
                        @endif
    
                        <div class="intro-y col-span-12 sm:col-span-4 input-form">
                            <label class="flex flex-col sm:flex-row">Guest Name</label>
                            <select name="guest_id" class="guest-id input w-full border flex-1"
                        id="guest_id" required>
                        <option value="" selected="selected">Select Guests</option>
                        @foreach ($guests as $row)
                            <option value="{{ $row->id }}"
                                >
                                {{ $row->guestFname . ' ' . $row->guestLname . ' ' . $row->passport_id . ' ' . $row->dob }}
                            </option>
                        @endforeach
                    </select>
                    <span><button style="margin-left:2%;" id="guest_modal_btn" type="button"><a href="javascript:;"
                                data-toggle="modal" data-target="#guest_modal"
                                class="button inline-block bg-theme-1 text-white">Add New Guest</a></button></span>
                        </div>
                        <div class="intro-y col-span-12 sm:col-span-4 input-form">
                            <div class="">Check-in Date</div>
                                <input type="text" class="input w-full border flex-1"name="datecalender" id="datecalender"
                            type="text" value="{{ old('datecalender') }}" required />
                        </div>

                    </div>
                </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 travel-agent">
                        <div class="mb-2">Travel Agent</div>
                        <select onchange="setSeasons()" style="width: 100%" name="agent_id" id="agent_id"
                            class="input w-full border flex-1  select-label" required>
                            <option value="0">select agent</option>
                            @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 season">
                        <div class="mb-2">Season</div>
                        <select style="width: 100%" name="season_id" id="season_id" class="input w-full border flex-1 "
                            required>
                        </select>
                    </div>

                    <div class="intro-y col-span-12 sm:col-span-4 input-form get-room">
                        <div style="margin:auto;" class="intro-y col-span-12 sm:col-span-6 input-form my-auto"
                        id="room_booking_btn_holder">
                            <button type="button" class="button w-full bg-theme-6 text-white" id="get_rooms">Get
                             Rooms</button>
                        </div>
                    </div>

                </div>


                <div>

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

                    <div hidden id="search_div" hidden style="margin:auto; width:30%;"
                        class="intro-y col-span-12 sm:col-span-6 input-form" id="room_booking_btn_holder">
                        <input type="text" id="search_box" placeholder="search here">
                    </div>

                    <div class="bill-note">
                        <div class="no-of-night">No of Nights : <span id="no_of_nights" class="value"></span> </div>
                        <div class="tot-bill ml-5">Total Bill : <span id="price_holder" class="value"></span></div>
                    </div>

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

                        <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 avl-room-title">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="#{{ $raw_category->room_categories_name }}"
                                            href="javascript:;"
                                            class="avl-room-tab-link flex-1 py-2 rounded-md text-center {{ $valap }}">{{ $raw_category->room_categories_name }}</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 class="mb-2">Remarks</div>
                            <textarea 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>

            </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 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 -->



    <!--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" onkeydown="validateMobileNumber(this)" id="gcontact" name="gcontact"
                            minlength="9" maxlength="15" required class="input w-full border mt-2 flex-1">
                        <label hidden id="phone_no_error"></label>
                    </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 class="col-span-12 sm:col-span-6">
                        <label>Country</label>
                        <input type="text" id="gcountry" required name="gcountry"
                            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>



    {{-- book room 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>



@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

   </div>

@section('script-area')

    <script>
        $(function() {
            $('input[name="datecalender"]').daterangepicker({
                opens: 'left',
                minDate: new Date()
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
            });
        });
        $(document).ready(function() {

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

            $('.dropdowncls').select2();

            // sessionStorage.clear();

            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


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


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

        });


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


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

        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 {
                        removeLoader();
                        $('#season_id').html('');

                    }


                },
                error: function(err) {
                    removeLoader();
                    $('#season_id').html('');

                }
            });

        }


        // get avialable rooms

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

            $('#frmdt').validate({

                rules: {

                    datecalender: {
                        required: true,
                    },

                    season_id: {
                        required: true,
                    },

                    agent_id: {
                        required: true,
                    }

                },


            });

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

                preloader();

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

                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(),
                }


                $.ajax({

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

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



                        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="'+e.room_categories_name +'" class="tab-content__pane '+ac+'"><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();

                                            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 +
                                                    '" 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 +
                                                    '</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();
                                        });

                                });

                                if (res.rooms.length > 0) {

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

                                        $('#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 "><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-6 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-6 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-6 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><li class="list-group-item  tooltip" title="Info"><div class="floor-no ml-1"><a onclick="get_booking_details(' +
                                                e.get_room_booking[0]
                                                .booking_reservations_id +
                                                ')" href="javascript:;" data-toggle="modal" data-target="#booking_info_modal"  class="inline-block"><span class="mt3"><i data-feather="alert-circle" class="side-menu__sub-icon color-green"></i></span></a></div></li></ul></div><div class="intro-y col-span-6 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-6 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-6 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-6 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-6 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="avl-item-type 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>');

                                            }

                                        });

                                        e.facilities = [];
                                        e.checked = 0;

                                        // 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();

                                } 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.');
                    }

                });


            }

        });


        // add the guest details to the form


        function addguest() {


            $('#guest_form').validate({
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                rules: {
                    gpass: {
                        required: true,
                        minlength: 5,
                        chk_guest_passport: true,
                    },
                    fname: {
                        required: true,
                        minlength: 3,
                    },
                    lname: {
                        required: true,
                    },
                    gemail: {
                        required: true,
                        email: true,
                        chk_guest_email: true,
                    },
                    gcontact: {
                        required: true,
                        minlength: 9,
                        maxlength: 15,
                    },
                    gcountry: {
                        required: true,
                        minlength: 2,
                    },

                },

            });


            jQuery.validator.addMethod("chk_guest_passport", function(value, element) {

                var guest_id = '';
                var guest_pass = $('#gpass').val();

                if (guest_pass != '') {

                    function valdt() {
                        var temp = 0;
                        $.ajax({
                            type: "POST",
                            url: "{{ route('validate_guest_passport') }}",
                            async: false,
                            data: {
                                "guest_pass": guest_pass,
                                'guest_id': guest_id
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            beforeSend: function() {
                                $("body").css("cursor", "wait");
                                $('#gpass').addClass('data_loading');
                            },
                            success: function(msg) {
                                temp = msg;
                                $("body").css("cursor", "default");
                                $('#gpass').removeClass('data_loading');
                            },
                            error: function() {
                                $("body").css("cursor", "default");
                                $('#gpass').removeClass('data_loading');
                                console.log("Error");
                            }
                        });

                        return temp;

                    }

                    var vlrs = valdt();

                    if (vlrs) {
                        return false;
                    } else {
                        return true;
                    }

                }

            }, "passport / nic no already exists");


            jQuery.validator.addMethod("chk_guest_email", function(value, element) {

                var guest_id = '';
                var gemail = $('#gemail').val();

                if (gemail != '') {

                    function valdt() {
                        var temp = 0;
                        $.ajax({
                            type: "POST",
                            url: "{{ route('validate_guest_email') }}",
                            async: false,
                            data: {
                                "gemail": gemail,
                                'guest_id': guest_id
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            beforeSend: function() {
                                $("body").css("cursor", "wait");
                                $('#gemail').addClass('data_loading');
                            },
                            success: function(msg) {
                                temp = msg;
                                $("body").css("cursor", "default");
                                $('#gemail').removeClass('data_loading');
                            },
                            error: function() {
                                $("body").css("cursor", "default");
                                $('#gemail').removeClass('data_loading');
                                console.log("Error");
                            }
                        });

                        return temp;

                    }

                    var vlrs = valdt();

                    if (vlrs) {
                        return false;
                    } else {
                        return true;
                    }

                }

            }, "email already exists");



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

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

                var customer = {
                    'passport_id': $('#gpass').val(),
                    'firstname': $('#fname').val(),
                    'lastname': $('#lname').val(),
                    'address': $('#gaddress').val(),
                    'email': $("#gemail").val(),
                    'contact': $('#gcontact').val(),
                    'dob': $('#gdob').val(),
                    'country': $('#gcountry').val(),
                }

                customers.push(customer);

                sessionStorage.setItem("customers", JSON.stringify(customers));

                $('#guest_id').append('<option id="' + customer.email + '" selected >' + customer.firstname + ' ' + customer
                    .lastname + '</option>');

                $('#gpass').val(),
                    $('#fname').val(''),
                    $('#lname').val(''),
                    $('#gaddress').val(''),
                    $("#gemail").val(''),
                    $('#gcontact').val(''),
                    $('#gdob').val(''),

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

            }


        }


        function validateEmail(email) {
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            return emailReg.test(email);
        }


        // 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>');
                    $('#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();
                }
            });

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



        }

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

        function setroommealplan(room_id, meal_id, rate) {

            var total = 0;

            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;

            // 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);


                    } else {

                        e.checked = 0;
                        $(room_id).prop('checked', false);



                    }

                }

            });


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

            cal_total_room_bill2();

        }


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


        // save the reservation

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


            $('#frmdt').validate({


                rules: {

                    guest_id: {
                        required: true,
                    },

                    reservation_status: {
                        required: true,
                    },

                    datecalender: {
                        required: true,
                    },

                    season_id: {
                        required: true,
                    },

                    agent_id: {
                        required: true,
                    },

                },

            });

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

                preloader();

                if (isRoomsSelected()) {

                    $('#guest_id').attr('disabled', false);
                    $('#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 +
                                '">');
                            $('#frmdt').append('<input type="text" name="g_country" hidden value="' + f
                                .country + '">');
                        }

                    });

                    var calenderDates = getCalenderDate();

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

                    $('#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 will trigger when a booking is selected from the dropdown and click get booking
        // this will auto fill all the details including the rooms selected in the booking

        function get_booking() {

            $('#booking_btn').hide();
            $('#get_rooms').hide();
            $('#search_box').hide();
            //$('#res_details').hide();

            preloader();

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

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

            var params = {
                'booking_id': booking_id,
            }

            // this ajax will be called to get the booking details
            $.ajax({

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

                    var booking = data;

                    console.log(booking);

                    var url1 = "{{ route('get_rooms') }}";

                    var params = {
                        'checkindate': booking.details.booking_checkinDate,
                        'checkoutdate': booking.details.booking_checkoutDate,
                        'agent_id': booking.details.agent_id,
                        'season_id': booking.details.season_id,
                    }

                    // this ajax will be called to get the vacant rooms with bookings
                    // so that the booked rooms for the current booking can be marked
                    $.ajax({
                        url: url1,
                        data: params,
                        success: function(data2) {

                            rooms = data2;

                            // this will check if the booking is overwritten and then show a msg

                            if (booking.details.status == 5) {

                                notify(2, booking.details.remarks);

                            }

                            // this will add hidden value to the form mentioning this is a booking
                            // which means that when new reservation is added the booking record should be
                            // deleted

                            $('#is_a_booking').val(booking.details.booking_reservations_id);

                            bCheckinDate = new Date(booking.details.booking_checkinDate)
                                .toDateString();
                            bCheckoutDate = new Date(booking.details.booking_checkoutDate)
                                .toDateString();

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

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

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


                            $("#guest_id").val(booking.details.guest_id).change();
                            $("#agent_id").val(booking.details.agent_id).change();
                            $("#season_id").val(booking.details.season_id).change();
                            $("#guest_id").prop("disabled", true);
                            $("#guest_modal_btn").prop("hidden", true);

                            // $('#guest_id').select2("val",$('#guest_id option:nth-child('+booking.details.guest_id+')').val());

                            // $('#agent_id').select2("val",$('#guest_id option:nth-child('+booking.details.agent_id+')').val());

                            // $('#season_id').select2("val",$('#season_id option:nth-child('+booking.details.season_id+')').val());

                            show_rooms_booked(rooms, booking);
                            //console.log(rooms);

                            if (rooms.rooms == 0) {

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

                                $('#res_details').show();

                            }

                            $('#booking_btn').show();
                            $('#show_booking_info_btn').html('');
                            $('#show_booking_info_btn').append(
                                '<a   href="javascript:;" data-toggle="modal" data-target="#booking_info_modal" id="booking_info_btn" onclick="get_booking_details(' +
                                booking_id +
                                ')" class="button w-full bg-theme-9 text-white mt-3" >show Booking Info</a>'
                            );
                            cal_total_room_bill2();
                            removeLoader();
                        },
                        error: function(err) {

                            console.log(err);

                            $('#booking_btn').show();

                        }
                    });

                },
                error: function(err) {
                    removeLoader();
                    console.log(err);
                    $('#booking_btn').show();
                }

            });

            removeLoader();

        }


        //----------------------- important ------------------------ important --------------------------------------------------------

        // plz note that this function will only called when a booking is selected and get details been clicked

        // this function won't call when get rooms button is clicked

        // this function will add the rooms as tiles to the div below avialble rooms p tag
        // this function is responsible for showing the rooms more attractively

        // the second parameter  booking.allocations is used to mark the booked rooms from all available rooms
        // along with the meal plan

        function show_rooms_booked(param, booking) {

            console.log(param);

            $('#room-selector').html('');

            if (param.status == 1) {

                //initalizing object
                param.rooms.forEach(e => {
                    e.meal_plan = [];
                    e.rate = [];
                    e.facilities = [];
                });

                sessionStorage.setItem('rooms', JSON.stringify(param.rooms));

                if (param.categories.length > 0) {

                    param.categories.forEach(e => {

                        $('#room-selector').append(
                                            '<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>');


                        param.types.forEach(q => {
                            //console.log(q);
                            $('#div' + e.room_categories_id).append('<h2>' + q.room_type_Select +
                                '</h2><div class="responsive-mode available-rooms room-selector-crousel" id="type' +
                                e.room_categories_id + q.room_type_id + '"></div>');

                        });

                    });

                    if (param.rooms.length > 0) {

                        param.rooms.forEach((e, index) => {

                            $('#divrow' + 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 && e
                                .get_room_booking[0].res_id == booking.details.booking_reservations_id) {

                                // $('#type'+''+e.room_category+''+e.room_type_id).append('<div class="bg-theme-6" 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" checked 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" onclick="get_booking_details()" class="button inline-block bg-theme-6 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>');

                                owl.trigger('add.owl.carousel', [
                                    '<div class="h-40 px-2"><div style="background-color:#9FC5E8;" class=" roomdiv'+ e.room_id +' h-full removeBG'+ e.room_id +' 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
                                    .get_room_type.room_type_Select + " " + 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-blue"></i></span></a></div></li><li class="list-group-item  tooltip" title="Info"><div class="floor-no ml-1"><a onclick="get_booking_details(' +
                                    e.get_room_booking[0].booking_reservations_id +
                                    ')" href="javascript:;" data-toggle="modal" data-target="#booking_info_modal"  class="inline-block"><span class="mt3"><i data-feather="alert-circle" class="side-menu__sub-icon color-blue"></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 {

                                // $('#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>');

                                owl.trigger('add.owl.carousel', [
                                    '<div class="h-40 px-2"><div  class=" roomdiv'+ e.room_id +' h-full removeBG'+ e.room_id +' 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
                                    .get_room_type.room_type_Select + " " + 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();

                            }

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

                                // $('#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%;"  onclick="setroommealplan('+e.room_id+','+c.meal_plan_id+','+c.rate+')" type="radio" id="meal'+e.room_id+''+c.meal_plan_id+'"  name="meal'+e.room_id+'" value=""><br>');

                                $('#room_price' + e.room_id).append('<div><input id="meal' + 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' + e.room_id +
                                    '" >' + c.get_meal_plan.mealPlanCode + ' ' + currency_symbol() +
                                    " " + currency_changer(c.rate) + '</div>');

                                if (c.get_meal_plan) {

                                    booking.allocations.forEach((f) => {


                                        if (f.basis == c.meal_plan_id && e.room_id == f
                                            .roomNumber) {

                                            if (booking.details.status == 0) {

                                                var room_id = "#room_checked" + f.roomNumber;
                                                var temp_id = "#meal" + e.room_id + c.meal_plan_id;

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

                                            }

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

                                            id = e.room_id;

                                            main.forEach(e => {


                                                if (e.room_id == id) {

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

                                                        e.checked = 1;

                                                    } else {

                                                        e.checked = 0;
                                                    }


                                                    e.meal_plan = f.basis;
                                                    e.rate = f.rate;


                                                }


                                                // 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(main));
                                            // cal_total_room_bill2();

                                        }

                                    });

                                }

                            });

                            booking.All_allocation.forEach(book => {

                                
                                if (book.roomNumber == e.room_id) {
                                    var roomdiv = '#roomdiv' + book.roomNumber;
                                    var removebg = '.removeBG' + book.roomNumber;
                                    var bgcor = '.bgclr' + book.roomNumber;
                                    
                                    var showbtn = '#showbtn' + book.roomNumber;
                                    console.log(roomdiv);
                                    // $(bgcor).css({
                                    //     "color": "#0B5394"
                                    // });

                                    if(e.get_room_booking.length > 0 && e.get_room_booking[0].status == 0 && e
                                .get_room_booking[0].res_id != booking.details.booking_reservations_id){
                                    $(removebg).css({
                                        "background-color": "#62f962"
                                    });
                                    $(showbtn).removeClass('bg-theme-1');
                                    $(showbtn).addClass('bg-theme-6');
                                }


                                }

                            });

                         


                            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);

                            });

                        });


                    } else {

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

                    }

                }


            } else {

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

            }

        }


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


        // this function get the details to the particular booking and assign to the
        // popup modal

        function get_booking_details(param) {

            preloader();

            const id = param;

            //console.log('test');
            var url = "{{ route('get_booked_rooms') }}";

            var params = {
                'res_id': id,
            }

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

                    var data = res;

                    // console.log(data);

                    $('#booked_rooms_list').html('');
                    $('#booked_remarks').html('');
                    $('#booking_checkindetails').html('');

                    $('#booking_checkindetails').append('<p >Booking Code : ' + data.res_details.code +
                        ' </p><br>');
                    $('#booking_checkindetails').append('<p >Guest Name : ' + data.res_details.get_guest
                        .guestFname + ' ' + data.res_details.get_guest.guestLname + '</p>');
                    $('#booking_checkindetails').append('<p style="margin-bottom:2%;" >Travel Agent : ' + data
                        .res_details.get_travel_agent.agentName + '</p>');
                    $('#booking_checkindetails').append('<p>Check in Date : ' + data.res_details
                        .booking_checkinDate + '</p><p>Check out Date : ' + data.res_details
                        .booking_checkoutDate + '</p>');
                    $('#booked_remarks').val(data.res_details.remarks);

                    data.rooms.forEach(e => {

                        $('#booked_rooms_list').append('<tr><td>' + e.get_room_type.room_type_Select +
                            '</td><td>' + e.mealPlanCode + '</td><td>' + e.get_category
                            .room_categories_name +
                            '</td><td><a href="javascript:;" data-toggle="modal" data-target="#additional_features_room" class=" text-white" onclick=get_room_facilities(' +
                            id + ',' + e.room_id +
                            ')  ><i class="fa fa-eye" aria-hidden="true"></i></a></td></tr>');

                    });

                    removeLoader();

                },
                error: function(err) {
                    removeLoader();
                    notify(1, 'unable to load booking rooms');

                }
            });


        }


        // get the booking room faciltiies

        //this will get the room facilities of particular room for particular booking
        // and add them to the facilities modal

        function get_room_facilities(booking_id, room_id) {

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

            var params = {
                'res_id': booking_id,
                'room_id': room_id,
            }

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

                    var data = res;

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

                    if (data.length) {

                        data.forEach(e => {
                            $('#facilitieslist').append('<p style="margin-bottom:2%;">' + e
                                .get_facilities.add_additional_facilites_name + '</p>');
                        });

                    } else {

                        $('#facilitieslist').append('<p>no additional facilities</p>');

                    }


                },
                error: function(err) {

                    notify(1, 'unable to get the room facilities');

                },
            });

        }



        function test() {

            var l = $('#keyword_input').val();

            var index = -1;

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

            var filter = main.find(function(item, i) {

                return item.room_name == l;

            });

            //console.log(filter);

        }



        // 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 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 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>

@endsection