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

@section('form-name', 'Reservation Checked In Edit')

@section('form-area')
<div class="reservation-checked-in-edit">
    <input type="text" name="resid" id="resid" value="{{ isset($res_details) ? $res_details->id : '' }}" hidden>
    <input type="text" class="gu_id" name="gu_id" id="gu_id" hidden>
    <div class="grid grid-cols-12 gap-4 row-gap-5 mt-5">
        <div class="intro-y col-span-12 sm:col-span-3 input-form">
            <div class="mb-2">Reservation Code</div>
            <input type="text" id="room_area" name="room_area" class="input w-full border flex-1"
                value="{{ isset($res_details) ? $res_details->code : '' }}" disabled>
        </div>
        <div class="intro-y col-span-12 sm:col-span-3 ">
            <div class="mb-2">Type</div>
            <select class="input w-full border flex-1" name="res_edit" id="res_edit">
                <option value="select_div">Select Type</option>
                <option value="div_one">Guest Allocation Edit</option>
                <option value="div_two">Date and Room Allocation Edit</option>
            </select>
        </div>
    </div>
    <div id="select_div" class="drop-down-show-hide">
    </div>
    <div id="div_one" class="drop-down-show-hide overfow-scroll">

        <br>
        <div style="margin-bottom: 2%;">
            <a href="javascript:;" data-toggle="modal" data-target="#guest_modal"
                class="button inline-block bg-theme-1 text-white" onclick="roomassignable()">Add Guest</a>
        </div>
        <table class="table table-report -mt-2 w-full" id="dttbl">

            <thead>
                <tr>
                    <th class=" text-center whitespace-no-wrap">Guest Name</th>
                    <th class=" text-center whitespace-no-wrap">Passport/NIC</th>
                    <th class=" text-center whitespace-no-wrap">Nationality</th>
                    <th class=" text-center whitespace-no-wrap">Date of birth</th>
                    <th class=" text-center whitespace-no-wrap">Address</th>
                    <th class=" text-center whitespace-no-wrap">Contact No</th>
                    <th class=" text-center whitespace-no-wrap">Email</th>
                    <th class=" text-center whitespace-no-wrap">Type</th>
                    <th class=" text-center whitespace-no-wrap">Room No</th>
                    <th class="text-center whitespace-no-wrap">Action</th>
                </tr>
            </thead>

            <tbody id="guestlistbody">
            </tbody>

        </table>

        <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">Add/Edit 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>Type</label>
                            <select class="input w-full border mt-2 flex-1 guest_type" id="guest_type" name="guest_type"
                                onchange="getrooms(this.value)">
                                <option value="0">None</option>
                                <option value="adult">Adult</option>
                                <option value="child">Child</option>
                            </select>
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <label>Guest Passport / NIC No</label>
                            <input type="text" maxlength="12" id="gpass" onblur="GetGuset(this.value);"
                                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>Date of Birth</label>
                            <input type="date" id="dob_field" name="dob_field" class="input w-full border mt-2 flex-1"
                                placeholder="">
                        </div>

                        <div class="col-span-12 sm:col-span-6">
                            <label>Address</label>
                            <input type="text" id="address_field" name="address_field"
                                class="input w-full border mt-2 flex-1" placeholder="">
                        </div>

                        <div class="col-span-12 sm:col-span-6">
                            <label>Nationality</label>
                            <input type="text" id="nationality" name="nationality" required maxlength="12"
                                class="input w-full border mt-2 flex-1" placeholder="">
                        </div>

                        <div class="col-span-12 sm:col-span-6">
                            <label>Room No</label>
                            <select class="input w-full border mt-2 flex-1 guest_room" name="guest_room" id="guest_room">
                            </select>
                        </div>

                        <div class="col-span-12 sm:col-span-6">
                            <label>Contact No</label>
                            <input type="text" id="g_contact" name="g_contact" onkeydown="validateMobileNumber(this)"
                                maxlength="15" class="input w-full border mt-2 flex-1" placeholder="">
                            <label hidden id="phone_no_error"></label>
                        </div>

                        <div class="col-span-12 sm:col-span-6">
                            <label>Email</label>
                            <input type="text" id="g_email" name="g_email" class="input w-full border mt-2 flex-1"
                                placeholder="">
                        </div>

                    </div>

                    <div class="col-span-12 sm:col-span-6" style="overflow-y:scroll; max-height:200px;">

                        <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">Guests room assignable count</h2>
                        </div>
                        <table class="table table-report -mt-2 w-full">
                            <tr>
                                <thead>
                                    <th></th>
                                    <th>Room No</th>
                                    <th>Adults</th>
                                    <th>Children</th>
                                </thead>
                            </tr>
                            <tbody id="room_assignable">
                            </tbody>
                        </table>

                    </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 addguestbtn">Add</button>
                    <button onclick="updateguest()" type="button" id="updateguest"
                        class="button w-20 bg-theme-1 text-white updateguest">Update</button>
                </div>
            </div>
        </div>

    </div>
    <div id="div_two" class="drop-down-show-hide">

        <form class="validate-form" id="frmdt" method="POST" action="{{ route('add_edit_reservation_checkin') }}">
            @csrf
            <input type="text" hidden name="codde" id="codde" value="{{ $res_details->code }}">
            <input type="text" hidden name="reserv_id" id="reserv_id" value="{{ $res_details->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">
            <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->checkinDate }}">
            <input type="text" hidden name="prev_checkout" id="prev_checkout"
                value="{{ $res_details->checkoutDate }}">
            <div class="grid grid-cols-12 gap-5">

                <div class="col-span-12">
                    <br>
                    <div class="intro-y col-span-12 sm:col-span-4 input-form">
                        <label class="flex flex-col">Guest Name <span class="gest-name">{{ $res_details->get_guest->guestFname }} {{ $res_details->get_guest->guestLname }}</span></label> 
                        <input type="hidden" 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 " 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 onchange="setSeasons()" style="width: 100%" name="season_id" id="season_id"
                                disabled="disabled" class="input w-full border flex-1 ">
                            </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="javascript:;" 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 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">

                            <div hidden class="intro-y col-span-12" id="filtered_div">
                                <div class="mb-2">
                                    <h2 style="animation-duration: ">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="avl-room-tab-link 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 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">{{ $res_details->remarks }}</textarea>
                            </div>

                        </div>

                    </div>

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

        <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="reservations_list">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
    <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>
</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() {
            Get_res_Guest();
            //preloader();
            var resid = $('#resid').val()
            var param = {
                'res_id': resid,
            }


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

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


                    var result = res;

                    var final = result.rooms;
                    sessionStorage.setItem('roomslist', JSON.stringify(final));
                    sessionStorage.setItem('guestcount', 0);

                    var rooms = JSON.parse(sessionStorage.getItem('roomslist'));
                    rooms.forEach(f => {
                        if (f.room_name == res.main_guest['room_no']) {

                            f.room_max_adults = Number(f.room_max_adults) - Number(1);

                        }

                        res.guest_count.forEach(r => {

                            if (f.room_name == r.room_no) {

                                if (r.guesttype == "adult") {
                                    f.room_max_adults = Number(f.room_max_adults) -
                                        Number(r.total);

                                }
                                if (r.guesttype == "child") {
                                    f.room_max_children = Number(f.room_max_children) -
                                        Number(r.total);

                                }


                            }

                        });
                    });
                    sessionStorage.setItem('roomslist', JSON.stringify(rooms));
                    console.log(rooms);

                    removeLoader();

                },
                error: function() {

                    removeLoader();

                }
            });

            $('.drop-down-show-hide').hide();
            $('#res_edit').change(function() {
                $(this).find("option").each(function() {
                    $('#' + this.value).hide();
                });
                $('#' + this.value).show();
                if (this.value == 'div_one') {
                    Get_res_Guest();
                    $('#save').attr('hidden', true);
                    $("#guestlistbody tr").remove();
                }
                if (this.value == 'div_two') {
                    $('#save').attr('hidden', false);
                    $('#save').text('Update');
                    $('#room-selector_date').html('');
                    $('#get_rooms').click();

                    //$('#div_date div').empty();
                }


            });

            sessionStorage.setItem("total_bill", 0);
            sessionStorage.setItem("facilities", JSON.stringify([]));
            sessionStorage.setItem("customers", JSON.stringify([]));
        });
        $('#save').click(function() {
            $('#season_id').prop('disabled', false);
            Submit_edit();
        });


        function roomassignable() {

            $('#addguestbtn').attr('hidden', true);
            $('#updateguest').attr('hidden', true);
            $('#gpass').val('');
            $('#fname').val('');
            $('#lname').val('');
            $('#guest_type').val('');
            $('#guest_room').val('');
            $('#nationality').val('');
            $('#dob_field').val('');
            $('#address_field').val('');
            $('#g_contact').val('');
            $('#g_email').val('');
            var roomslist = JSON.parse(sessionStorage.getItem('roomslist'));

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

            roomslist.forEach((r, index) => {

                index = index + 1;

                $('#room_assignable').append('<tr><td>' + index + '</td><td>' + r.room_name + '</td><td>' + r
                    .room_max_adults + '</td><td>' + r.room_max_children + '</td></tr>');

            });

        }

        function getrooms(value) {

            if (value == '0') {

                $('#guest_room').html('');
                $('#addguestbtn').attr('hidden', true);

            } else {


                if (value == "adult") {

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

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

                    rooms.forEach(r => {

                        if (r.room_max_adults > 0) {

                            $('#guest_room').append('<option value="' + r.room_name + '" >' + r.room_name +
                                '</option>');

                            if ($('#updateguest').is(":hidden") == true) {
                                $('#addguestbtn').attr('hidden', false);
                            }

                        } else {

                            $('#addguestbtn').attr('hidden', true);

                        }

                    });


                } else if (value == "child") {

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

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

                    rooms.forEach(r => {

                        if (r.room_max_children > 0) {

                            $('#guest_room').append('<option value="' + r.room_name + '" >' + r.room_name +
                                '</option>');

                            if ($('#updateguest').is(":hidden") == true) {
                                $('#addguestbtn').attr('hidden', false);
                            }

                        } else {

                            $('#addguestbtn').attr('hidden', true);

                        }

                    });

                }



            }

        }


        function GetGuset(value) {
            console.log(value);
            preloader();

            var param = {
                'nic': value,
            }

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

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

                    console.log(res);

                    $('#fname').val(res.guestFname);
                    $('#lname').val(res.guestLname);
                    $('#nationality').val(res.gcountry);
                    $('#dob_field').val(res.dob);
                    $('#address_field').val(res.guestAddress);
                    $('#g_contact').val(res.contactNo);
                    $('#g_email').val(res.guestEmail);
                    removeLoader();
                },
                error: function() {

                    removeLoader();

                }
            });

        };


        function addguest() {

            $('#guest_form').validate({

                rules: {
                    gpass: {
                        required: true,
                    },
                    fname: {
                        required: true,
                    },
                    lname: {
                        required: true,
                    },
                    nationality: {
                        required: true,
                    },
                    dob_field: {
                        required: true,
                    },

                }

            });


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


                var rooms = JSON.parse(sessionStorage.getItem('roomslist'));
                var guestcount = sessionStorage.getItem('guestcount');
                var guest_id_no = $('#gpass').val();
                var fname = $('#fname').val();
                var lname = $('#lname').val();
                var guest_type = $('#guest_type').val();
                var guest_room_val = $('#guest_room').val();
                var guest_room = $('#guest_room').val();
                var nationality = $('#nationality').val();
                var dob = $('#dob_field').val();
                var address = $('#address_field').val();
                var g_contact = $('#g_contact').val();
                var g_email = $('#g_email').val();
                var resid = $('#resid').val();


                if (guest_type == "adult") {

                    rooms.forEach(r => {

                        if (r.room_name == guest_room_val) {

                            r.room_max_adults = Number(r.room_max_adults) - Number(1);

                            preloader();


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

                            var param = {
                                'res_id': resid,
                                'gpass': guest_id_no,
                                'fname': fname,
                                'lname': lname,
                                'guest_room': guest_room,
                                'nationality': nationality,
                                'guest_type': guest_type,
                                'dob': dob,
                                'address': address,
                                'g_contact': g_contact,
                                'g_email': g_email
                            };


                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                            $.ajax({
                                type: 'POST',
                                url: url,
                                data: param,
                                success: function(res) {
                                    notify(0, 'Guest added successfully');
                                    $("#guestlistbody tr").remove();
                                    Get_res_Guest();
                                    removeLoader();
                                },
                                error: function(err) {
                                    notify(1, 'Guest added unsuccessfully');
                                    removeLoader();
                                }
                            });
                            guestcount = Number(guestcount) + Number(1);

                        }

                    });

                    sessionStorage.setItem('guestcount', guestcount);
                    sessionStorage.setItem('roomslist', JSON.stringify(rooms));

                    $('#gpass').val('');
                    $('#fname').val('');
                    $('#lname').val('');
                    $('#guest_type').val('');
                    $('#guest_room').val('');
                    $('#nationality').val('');
                    $('#dob_field').val('');
                    $('#address_field').val('');
                    $('#g_contact').val('');
                    $('#g_email').val('');

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

            }



        }

        function updateguest() {

            $('#guest_form').validate({

                rules: {
                    gpass: {
                        required: true,
                    },
                    fname: {
                        required: true,
                    },
                    lname: {
                        required: true,
                    },
                    nationality: {
                        required: true,
                    },
                    dob_field: {
                        required: true,
                    },

                }

            });


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

                var rooms = JSON.parse(sessionStorage.getItem('roomslist'));
                var guestcount = sessionStorage.getItem('guestcount');
                var guest_id_no = $('#gpass').val();
                var gu_id = $('#gu_id').val();
                var fname = $('#fname').val();
                var lname = $('#lname').val();
                var guest_type = $('#guest_type').val();
                var guest_room_val = $('#guest_room').val();
                var guest_room = $('#guest_room').val();
                var nationality = $('#nationality').val();
                var dob = $('#dob_field').val();
                var address = $('#address_field').val();
                var g_contact = $('#g_contact').val();
                var g_email = $('#g_email').val();
                var resid = $('#resid').val();


                rooms.forEach(r => {

                    if (r.room_name == guest_room_val) {





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

                        var param = {
                            'res_id': resid,
                            'gu_id': gu_id,
                            'gpass': guest_id_no,
                            'fname': fname,
                            'lname': lname,
                            'guest_room': guest_room,
                            'nationality': nationality,
                            'guest_type': guest_type,
                            'dob': dob,
                            'address': address,
                            'g_contact': g_contact,
                            'g_email': g_email
                        };


                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            type: 'POST',
                            url: url,
                            data: param,
                            success: function(res) {
                                notify(0, 'Guest update successfully');
                                $("#guestlistbody tr").remove();
                                Get_res_Guest();
                                removeLoader();
                            },
                            error: function(err) {
                                notify(1, 'Guest update unsuccessful');
                                removeLoader();
                            }
                        });


                    }

                });


                $('#gpass').val('');
                $('#fname').val('');
                $('#lname').val('');
                $('#guest_type').val('');
                $('#guest_room').val('');
                $('#nationality').val('');
                $('#dob_field').val('');
                $('#address_field').val('');
                $('#g_contact').val('');
                $('#g_email').val('');

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


            }



        }


        function Get_res_Guest() {

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

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

            var params = {
                'resid': resid
            };
            preloader();
            $.ajax({
                url: url,
                data: params,
                success: function(Guest) {


                    if (Guest.length) {

                        Guest.forEach(g => {

                            if (typeof(g.get_main_guset) != "undefined" && g.get_main_guset !== null) {
                                $('#guestlistbody').append(
                                    '<tr><td class="text-center">' + g.get_main_guset[
                                        'guestFname'] + ' ' + g.get_main_guset['guestLname'] +
                                    '</td><td class="text-center">' + g.get_main_guset[
                                        'passport_id'] +
                                    '</td><td class="text-center">' + g.get_main_guset['gcountry'] +
                                    '</td><td class="text-center">' + g.get_main_guset['dob'] +
                                    '</td><td class="text-center">' + g.get_main_guset[
                                        'guestAddress'] +
                                    '</td><td class="text-center">' + g.get_main_guset[
                                        'contactNo'] +
                                    '</td><td class="text-center">' + g.get_main_guset[
                                        'guestEmail'] +
                                    '</td><td class="text-center">adult</td><td class="text-center">' +
                                    g.room_no +
                                    '</td><td class="text-center"><a style="margin-top: 5px;" data-toggle="modal" data-target="#guest_modal" onclick="edit_guest(' +
                                    g.get_main_guset['id'] +
                                    ',1);roomassignable();"  class=" text-white" ><i class="fa fa-edit" aria-hidden="true"></i></a><button style="margin-top: 5px;" onclick="delete_res_guest(' +
                                    String(g.get_main_guset['id']) + ',' + String(g.get_main_guset[
                                        'passport_id']) +
                                    ')" class=" text-white  ml-1" type="submit"><i class="fa fa-trash" class="w-4 h-4 mr-1"></i></button></td></tr>'
                                );
                            } else if (typeof(g.get__gusetlist) != "undefined" && g.get__gusetlist !==
                                null) {
                                $('#guestlistbody').append(
                                    '<tr><td class="text-center">' + g.get__gusetlist[
                                        'guestFname'] + ' ' + g.get__gusetlist['guestLname'] +
                                    '</td><td class="text-center">' + g.get__gusetlist[
                                        'passport_id'] +
                                    '</td><td class="text-center">' + g.get__gusetlist['gcountry'] +
                                    '</td><td class="text-center">' + g.get__gusetlist['dob'] +
                                    '</td><td class="text-center">' + g.get__gusetlist[
                                        'guestAddress'] +
                                    '</td><td class="text-center">' + g.get__gusetlist[
                                        'contactNo'] +
                                    '</td><td class="text-center">' + g.get__gusetlist[
                                        'guestEmail'] +
                                    '</td><td class="text-center">' + g.get__gusetlist[
                                        'guesttype'] + '</td><td class="text-center">' + g.room_no +
                                    '</td><td class="text-center"><a style="margin-top: 5px;" data-toggle="modal" data-target="#guest_modal"  onclick="edit_guest(' +
                                    g.get__gusetlist['id'] +
                                    ',2);roomassignable();" class=" text-white" ><i class="fa fa-edit" aria-hidden="true"></i></a><button style="margin-top: 5px;" onclick="delete_res_guest(' +
                                    g.get__gusetlist['id'] + ',' + g.get__gusetlist['passport_id'] +
                                    ')" class=" text-white  ml-1" type="submit"><i class="fa fa-trash" class="w-4 h-4 mr-1"></i></button></td></tr>'
                                );
                            }

                        });

                    } else {

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

                    }
                    removeLoader();
                },
                error: function(err) {

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


        function edit_guest(G_id, flg) {

            preloader();

            var resid = $('#resid').val();
            var param = {
                'G_id': G_id,
                'flg': flg,
                'resid': resid,
            }

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

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

                    if (typeof(res.get_main_guset) != "undefined" && res.get_main_guset !== null) {
                        $(".guest_type").val("adult");
                        getrooms("adult");
                        $(".guest_room").val(res.room_no);
                    } else {

                        if (res.guesttype == "child") {
                            $(".guest_type").val("child");
                            getrooms("child");
                            $(".guest_room").val(res.room_no);
                        } else {
                            $(".guest_type").val("adult");
                            getrooms("adult");
                            $(".guest_room").val(res.room_no);
                        }
                    }
                    $('#gu_id').val(res.id);
                    $('#fname').val(res.guestFname);
                    $('#lname').val(res.guestLname);
                    $('#gpass').val(res.passport_id);
                    $('#nationality').val(res.gcountry);
                    $('#dob_field').val(res.dob);
                    $('#address_field').val(res.guestAddress);
                    $('#g_contact').val(res.contactNo);
                    $('#g_email').val(res.guestEmail);
                    $('#addguestbtn').attr('hidden', true);
                    $('#updateguest').attr('hidden', false);
                    removeLoader();
                    console.log(res);
                },
                error: function() {

                    removeLoader();

                }
            });

        }

        function delete_res_guest(G_id, pass) {

            preloader();

            var resid = $('#resid').val();
            var param = {
                'G_id': G_id,
                'resid': resid,
                'gpass': pass,
            }

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

            $.ajax({
                url: url,
                data: param,
                success: function(res) {
                    notify(0, 'Guest update successfully');
                    $("#guestlistbody tr").remove();
                    Get_res_Guest();
                    removeLoader();

                },
                error: function() {
                    notify(1, 'Guest update unsuccessful');
                    removeLoader();

                }
            });
            removeLoader();
        }

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

                    console.log(res);

                    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() {

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

        }


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

        // get avialable rooms 

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


            $('#frmdt').validate({

                rules: {

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


                },


            });

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

                //  preloader();

                var calenderDates = getCalenderDate();

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

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


                $.ajax({

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

                        $('#room-selector').html('');
                        $('#price_holder').html('');
                        $('#show_overwritten_btn').attr('hidden', true);
                        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) {

                                    var checkindate = '{{ $res_details->checkinDate }}';

                                    var checkoutdate = '{{ $res_details->checkoutDate }}';


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

                                        $('#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 (e.res_id == res.res) {

                                            if (e.status == 5) {

                                                // this room is extended by another reservation now it's not available

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

                                                owl.trigger('add.owl.carousel', [
                                                    '<div style="color:white;" class="h-40 px-2" ><div style="background-color:73777B;"  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();

                                                e.checked = 0;

                                            } else {

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


                                                owl.trigger('add.owl.carousel', [
                                                    '<div class="h-40 px-2"><div  style="background-color:#FF6347;" class=" removeBG2' +
                                                    e.room_id +
                                                    ' 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-blue"></i></span></a></div></li><li class="list-group-item  tooltip" title="info"><div class="floor-no ml-1"></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.checked = 1;

                                            }
                                        } else {
                                            $('#divrow' + e.room_category).attr('hidden',
                                                false);

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

                                            e.checked = 0;
                                        }

                                        $('#room_price' + e.room_id).html('');

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

                                            console.log(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>');

                                            }

                                            if (e.basis == c.meal_plan_id) {

                                                var id = '#rate' + e.room_id + '' + c
                                                    .meal_plan_id;
                                                $(id).attr('checked', false);

                                                e.meal_plan = e.basis;
                                                e.rate = c.rate;
                                            }



                                        });



                                        res.reserved.forEach(res => {

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

                                                var id = '#room_checked' + e.room_id;
                                                var roomdiv = '#roomdiv' + e.room_id;
                                                var meal_id = '#rate' + e.room_id + '' +
                                                    res.basis;
                                                var showbtn = '#showbtn' + e.room_id;
                                                var removebg2 = '.removeBG' + 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();
                                                $(removebg2).css({
                                                    "background-color": "#FF6347"
                                                });
                                                $(roomdiv).removeClass('bg-theme-1');
                                                $(roomdiv).addClass('bg-theme-6');

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

                                                $(meal_id).attr('checked', true);


                                                if (e.status == 5) {

                                                    e.checked = 0;

                                                } else {

                                                    $(id).attr('checked', true);
                                                    e.checked = 1;

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

                                                }

                                            }

                                        });


                                        res.confrom_rooms.forEach(conf_room => {

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


                                                var id = '#room_checked' + e.room_id;
                                                var roomdiv = '.roomdiv' + e.room_id;
                                                var meal_id = '#rate' + e.room_id + '' +
                                                    conf_room.basis;
                                                var showbtn = '#showbtn' + e.room_id;
                                                var removebg = '.removeBG' + e.room_id;
                                                var rateMEal = '.rateMEal' + e.room_id;


                                                $(removebg).css({
                                                    "background-color": "#FFA500"
                                                });
                                                $(roomdiv).removeClass('bg-theme-1');
                                                $(roomdiv).addClass('bg-theme-6');

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

                                                $(rateMEal).attr('checked', false);

                                                if (e.status == 5) {

                                                    e.checked = 0;

                                                } else {

                                                    $(id).attr('checked', false);
                                                    e.checked = 0;

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

                                                }

                                            }

                                        });

                                        res.booked_rooms.forEach(booked_rooms => {

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

                                                console.log(booked_rooms.room_id);
                                                var id = '#room_checked' + e.room_id;
                                                var roomdiv = '.roomdiv' + e.room_id;
                                                var meal_id = '#rate' + e.room_id + '' +
                                                    res.basis;
                                                var showbtn = '#showbtn' + e.room_id;
                                                var removebg = '.removeBG' + e.room_id;
                                                var rateMEal = '.rateMEal' + e.room_id;


                                                $(removebg).css({
                                                    "background-color": "#62f962"
                                                });
                                                $(roomdiv).removeClass('bg-theme-1');
                                                $(roomdiv).addClass('bg-theme-6');

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

                                                $(rateMEal).attr('checked', false);

                                                if (e.status == 5) {

                                                    e.checked = 0;

                                                } else {

                                                    $(id).attr('checked', false);
                                                    e.checked = 0;

                                                    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 = [];

                                        if (e.get_reservation_facilities.length > 0) {

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

                                                var facilitiy = {
                                                    'add_additional_facilites_id': f
                                                        .facility_id
                                                }

                                                e.facilities.push(facilitiy);

                                            });

                                        } else {


                                            e.facilities.push(1);

                                        }



                                    });


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

                                    cal_total_room_bill2();

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

                });


            }

        });

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

        // }


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

        function Submit_edit() {


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


                    checkif_rooms_override(finalrooms);

                    var calenderDates = getCalenderDate();

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




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

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


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

                    var result = res;
                    if (result.error_status == 0) {


                        if (result.res != "null") {
                            $('#reservations_list').html('');

                            if (result.res.data.length > 0) {
                                result.res.data.forEach((e, index) => {

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

                                });

                            }
                        }
                        if (result.booking != "null") {
                            if (result.booking.data.length > 0) {
                                result.booking.data.forEach((e, index) => {

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

                                });

                            }
                            $('#show_overwritten_btn').attr('hidden', false);

                            var msg = "one or more reservations / bookings should be overwritten,continue?";

                            confirmnotify(msg).then(result => {

                                if (result.isConfirmed) {
                                    removeLoader();
                                    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 getReservationRooms(id) {

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

            var params = {
                'res_id': id,
            }


            $.ajax({
                type: 'GET',
                url: url,
                data: params,
                success: function(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 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>
    @if (isset($res_details))
        <script>
            $(function() {

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

                var checkoutdate = "{{ $res_details->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);

                setSeasons();



            });
        </script>
    @endif

@endsection