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

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



    <form class="validate-form" id="frmdt" method="POST" action="{{ route('add_edit_Booking') }}">
        @csrf

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

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

            <div class="input-form">
                <br>
                <label class="flex flex-col sm:flex-row">Guest Name</label><br>
                <select style="width: 40%;" name="guest_id" class="input w-full border flex-1" id="guest_id" required>
                    @foreach ($guests as $row)
                    <option value="{{ $row->id }}" >
                        {{ $row->guestFname . ' ' . $row->guestLname }}
                    </option>
                    @endforeach
                </select>
                <span><button style="margin-left:2%;" id="guest_modal_btn" type="button"><a href="javascript:;" data-toggle="modal" data-target="#guest_modal" class="button inline-block bg-theme-1 text-white">ADD NEW GUEST</a></button></span>
            </div>


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

                    <div class="intro-y col-span-12 sm:col-span-4 input-form">
                        <div class="mb-2">Check-in Date</div>
                        <input type="text" class="input w-full border flex-1" name="datecalender" id="datecalender"
                            type="text" value="{{ old('datecalender') }}" required />
                    </div>

                <div 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 Type</div>
                    <select style="width: 100%" name="season_id" id="season_id" class="input w-full border flex-1 " required>
                        @foreach ($seasons as $row)
                        <option value="{{ $row->id }}">{{ $row->seasonName }}</option>
                        @endforeach
                    </select>
                </div>

                </div>


                <div>

                    <div style="margin:auto; width:30%; margin-top: 1rem;" class=" intro-y col-span-12 sm:col-span-6 input-form mt-4">
                        <button type="button" class="button w-full bg-theme-6 text-white mt-1" id="get_rooms">Get
                            Rooms</button>
                    </div>
                    <div>
                        <span>No of Nights : <span id="no_of_nights"></span>
                            <span>Total Bill : <span id="price_holder"></span></span>
                    </div>
                    <br>
                    <div class="grid grid-cols-12 gap-1 row-gap-1 mt-1">
                        <div class="intro-y col-span-12">
                            <div class="sm:w-full lg:w-auto text-lg font-medium truncate mr-auto pb-4">Available Rooms</div>

                            @php
                                $category_name=sizeof($category);
                                $index=0;
                                if($index ==0)
                                {
                                $valap='active';
                                }
                                else {
                                $valap='';
                                }
                            @endphp
                            <div  id="tab_cate"; class="pos__tabs nav-tabs justify-center flex"> 
                                @foreach ($category as $raw_category)
                                <a data-toggle="tab" data-target="#{{$raw_category->room_categories_name}}" href="javascript:;" class="flex-1 py-2 rounded-md text-center {{$valap}}">{{$raw_category->room_categories_name}}</a>
                                @php
                                $index++;
                                
                                @endphp
                            @endforeach
                            </div>
                            
                            <div class="tab-content" id="room-selector">
                                
                            </div>

                        </div>
                    </div>

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

                </div>


            </div>

        </div>

    </form>

    <Script>
        $("#available_rooms").append(`
        <div class="h-40 px-2">
                                        <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item">
                                            <div class="h-full grid items-center items-center ">
                                                <div class="icon-line items-center mt-1">
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">
                                                        <div class="intro-y col-span-12 md:col-span-6 ml-2">
                                                            <div class="form-check form-switch tooltip" title="Select Unselect">
                                                                <input class="form-check-input input--switch input small" type="checkbox" id="flexSwitchCheckDefault">
                                                                <label class="form-check-label" for="flexSwitchCheckDefault">Dulux 103</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> : 1</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="Enter tooltip text here">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="eye" class="side-menu__sub-icon color-green"></i></span></a></div>
                                                                </li>


                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-circle" class="side-menu__sub-icon color-yellow"></i></span></a></div>
                                                                </li>
                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-octagon" class="side-menu__sub-icon color-red"></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="radio">
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> H/B $39.98 </div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/F $103.65</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> F/B $224.92</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/B $29.99</div>
                                                        </div>
                                                    </div>
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">

                                                    </div>


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

                                    </div>



                                    <div class="h-40 px-2">
                                        <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item">
                                            <div class="h-full grid items-center items-center ">
                                                <div class="icon-line items-center mt-1">
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">
                                                        <div class="intro-y col-span-12 md:col-span-6 ml-2">
                                                            <div class="form-check form-switch tooltip" title="Select Unselect>
                                                                <input class="form-check-input input--switch input small" type="checkbox" id="flexSwitchCheckDefault">
                                                                <label class="form-check-label" for="flexSwitchCheckDefault">Dulux 103</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> : 1</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(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="eye" class="side-menu__sub-icon color-green"></i></span></a></div>
                                                                </li>


                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-circle" class="side-menu__sub-icon color-yellow"></i></span></a></div>
                                                                </li>
                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-octagon" class="side-menu__sub-icon color-red"></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="radio">
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> H/B $39.98 </div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/F $103.65</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> F/B $224.92</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/B $29.99</div>
                                                        </div>
                                                    </div>
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">

                                                    </div>


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

                                    </div>
        `);

        $("#available_rooms").append(`

        <div class="h-40 px-2">
                                        <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item">
                                            <div class="h-full grid items-center items-center ">
                                                <div class="icon-line items-center mt-1">
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">
                                                        <div class="intro-y col-span-12 md:col-span-6 ml-2">
                                                            <div class="form-check form-switch tooltip" title="Select Unselect">
                                                                <input class="form-check-input input--switch input small" type="checkbox" id="flexSwitchCheckDefault">
                                                                <label class="form-check-label" for="flexSwitchCheckDefault">Dulux 103</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> : 1</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(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="eye" class="side-menu__sub-icon color-green"></i></span></a></div>
                                                                </li>


                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-circle" class="side-menu__sub-icon color-yellow"></i></span></a></div>
                                                                </li>
                                                                <li class="list-group-item tooltip" title="view">
                                                                    <div class="floor-no ml-1"><a onclick="showroominfo(1)" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="alert-octagon" class="side-menu__sub-icon color-red"></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="radio">
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> H/B $39.98 </div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/F $103.65</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> F/B $224.92</div>
                                                            <div><input class="input border" type="radio" name="meal0" id="flexSwitchCheckDefault"> B/B $29.99</div>
                                                        </div>
                                                    </div>
                                                    <div class="intro-y flex flex-col sm:flex-row items-center">

                                                    </div>


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

                                    </div>

        `);
    </Script>

    <!--modal start -->

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

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

            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                <div class="col-span-12 sm:col-span-6">
                    <h3 style="display: inline;">Additional Facilities</h3>
                    <span style="margin-left: 1%;"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <div id="facilitiescheckbox">

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

        </div>
    </div>

    <!--modal end -->



    <!--guest modal start -->

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

    <!--modal end -->

@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>
        function openPage(pageName, elmnt, color) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";

            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
                tablinks[i].classList.remove('active_tab');
            }
            //document.getElementById(pageName).style.display = "block";
            elmnt.style.backgroundColor = color;
            elmnt.classList.add('active_tab');
        }


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

        });
        $(document).ready(function() {




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

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

            //sessionStorage.clear();

            sessionStorage.setItem("facilities", JSON.stringify([]));
            sessionStorage.setItem("customers", JSON.stringify([]));

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

            setdatepickers();

        });

        // get avialable rooms
        $(document).ready(function() {
            $('#get_rooms').click(function() {
                $('#tab_cate').show();
                $('#frmdt').validate({

                    rules: {

                        indate: {
                            required: true,
                        },
                        outdate: {
                            required: true,
                        },
                        season_id: {
                            required: true,
                        }
                    },
                });


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

                    preloader();



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

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

                        url: url,
                        data: params,
                        success: function(data) {
                            console.log(data);
                            $('#room-selector').html('');

                            var res = data;

                            if (res.status == 1) {

                                if (res.categories.length > 0) {

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

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

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

                                    if (res.rooms.length > 0) {

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

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


                                            owl.owlCarousel({
                                                loop: false,
                                                nav: true,
                                                lazyLoad: true,
                                                responsiveClass: true,
                                                responsive: {
                                                    0: {
                                                        items: 1
                                                    },
                                                    576: {
                                                        items: 3
                                                    },
                                                    768: {
                                                        items: 5
                                                    },
                                                },
                                                autoplay: false,
                                                autoplayHoverPause: true,
                                                autoplayTimeout: 3000,
                                                smartSpeed: 750
                                            });
                                            owl.trigger('add.owl.carousel', [
                                                '<div class="h-40 px-2"><div  class="h-full bg-gray-200 dark:bg-dark-1 rounded-md available-rooms-item "><div class="h-full grid items-center items-center "><div class="icon-line items-center mt-1"><div class="intro-y flex flex-col sm:flex-row items-center"><div class="intro-y col-span-12 md:col-span-6 ml-2"><div class="form-check form-switch tooltip" title="Select unselect rooms"><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 Details"><div class="floor-no ml-1"><a onclick="showroominfo(' +
                                                e.room_id +
                                                ')" href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="inline-block"><span class="mt3"><i data-feather="eye" class="side-menu__sub-icon color-green"></i></span></a></div></li></ul></div><div class="intro-y col-span-12 md:col-span-6 mt-3 pl-2 text-left rate-text" id="room_price' +
                                                e.room_id +
                                                '"></div></div> <div class="intro-y flex flex-col sm:flex-row items-center"></div></div></div></div></div>'
                                            ]).trigger('refresh.owl.carousel');
                                            feather.replace();


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

                                            
                                            e.get_agent_rates.forEach(c => {

                                                if (c.get_meal_plan) {

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

                                            });

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

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

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

                                                e.facilities.push(
                                                    facilitiy);

                                            });

                                        });

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

                                    } else {

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

                                    }

                                }


                                removeLoader();

                            } else {

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

                            }

                        },

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

                    });



                }

            });
        });


        // add the guest details to the form


        function addguest() {


            $('#guest_form').validate({

                rule: {
                    gpass: {
                        required: true,
                        minlength: 5,
                    },
                    fname: {
                        required: true,
                        minlength: 3,
                    },
                    lname: {
                        required: true,
                    },
                    gemail: {
                        required: true,
                        email: true,
                    },
                    gcontact: {
                        required: true,
                        minlength: 9,
                        maxlength: 15,
                    },

                },

            });

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

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


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

                customers.push(customer);

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

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

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

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

            }


        }


        // 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(err) {
                    console.log('error.....');
                    console.log(err);
                }
            });

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



        }

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

        function setroommealplan(room_id, meal_id, rate) {

            //console.log("trigger");

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

            main.forEach(e => {

                if (e.room_id == id) {

                    if (e.checked == 0) {
                        e.checked = 1;
                    } else {
                        e.checked = 0;
                    }

                }

            });


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


        }



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


        // save the reservation

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


            $('#frmdt').validate({

                rules: {

                    guest_id: {
                        required: true,
                    },

                    reservation_status: {
                        required: true,
                    },

                    agent_id: {
                        required: true,
                    },

                    'room_selected[]': {
                        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 final = [];
                    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
                            }

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

                        }
                    });


                    var finalstring = JSON.stringify(final);

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

                    });
                    var calenderDates = getCalenderDate();

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

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

                    preloader();

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


                } else {

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


                }

            }

        });



        function isRoomsSelected() {

            ischecked = false;

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

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

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

                main.forEach(e => {

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


        }

        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;

        }

        function calculateDT() {
            var oneD = 1000 * 60 * 60 * 24;
            var calenderDates = getCalenderDate();
            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 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);

        }

        function setSeasons() {

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

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

            var calenderDates = getCalenderDate();

            var params = {
                'agent_id': agent_id,
                'checkindate': calenderDates.indate,
                'checkoutdate': calenderDates.outdate,
            };

            preloader();

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

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


                    var data = res;

                    if (data.error_status == 0) {

                        data.data.forEach(e => {

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

                        });

                        removeLoader();

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

                    }


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

                }
            });

        }
    </script>

@endsection