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

@section('form-name', 'Reservation Guest List')

@section('form-area')


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

    <form action="{{ route('final_checkin') }}" method="post" id="guestlistform">
        @csrf

        <input type="text" name="res_id" value="{{ $res_id }}" hidden>

        <div style="overflow-x: scroll;">

            <table class="table table-report -mt-2 w-full" id="dttbl">

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

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

            </table>

        </div>

    </form>


    <!--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">Add 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" 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" 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">Add</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>
        const Nid = [];

        $(document).ready(function() {

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

            preloader();

            var param = {
                'res_id': '{{ $res_id }}',
            }


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

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

                    removeLoader();

                },
                error: function() {

                    removeLoader();

                }
            });


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

        });


        function GetGuset(value) {
            preloader();

            var param = {
                'nic': value,
            }

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

            $.ajax({
                url: url,
                data: param,
                success: function(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();

                }
            });

        };


        // this function will assign the rooms based on adult/children in the guest add modal

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

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

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

                        } else {

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

                        }

                    });

                }



            }

        }



        // this function will assign the room assignable adult and children count to the 
        // room assignable table in add guest modal so that the user can know how many guests can be assigned
        // to that particular room

        function roomassignable() {

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

            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 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').text();
                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();
                console.log(Nid);
                var turFls = Nid.includes(guest_id_no);
                
                console.log(turFls);
                if (turFls == false) {
                    Nid.push(guest_id_no)

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

                                $('#guestlistbody').append(
                                    '<tr><td><input required readonly type="text" name="guestfname[' +
                                    guestcount +
                                    ']" value="' + fname +
                                    '" ></td><td><input required readonly  type="text" name="guestlname[' +
                                    guestcount + ']" value="' + lname +
                                    '" ></td><td><input readonly required maxlength="12" type="text" name="guestpno[' +
                                    guestcount + ']" value="' + guest_id_no +
                                    '" ></td><td><input readonly value=' +
                                    nationality + ' name="nationality[' + guestcount +
                                    ']"  ></td><td><input readonly type="text" name="guestdob[' + guestcount +
                                    ']" value="' + dob +
                                    '" ></td><td><input style="border: 1px solid blue;"  type="text" name="guestaddress[' +
                                    guestcount + ']" value="' + address +
                                    '" ></td><td><input maxlength="15"  style="border: 1px solid blue;"  type="text" name="gcontact[' +
                                    guestcount + ']" value="' + g_contact +
                                    '" ></td><td><input style="width:200px;border:1px solid blue;" type="text" name="gmail[' +
                                    guestcount + ']" value="' + g_email +
                                    '" ></td><td><input  readonly type="text" name="guesttype[' + guestcount +
                                    ']" value="' + guest_type +
                                    '" ></td><td><input readonly type="text" name="guestroom[' + guestcount +
                                    ']" value="' + guest_room_val + '"  ></td></tr>');

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

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


                        rooms.forEach(r => {

                            if (r.room_name == guest_room_val) {

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

                                $('#guestlistbody').append(
                                    '<tr><td><input style="border: 1px solid blue;" required  type="text" name="guestfname[' +
                                    guestcount + ']" value="' + fname +
                                    '" ></td><td><input style="border: 1px solid blue;" required type="text" name="guestlname[' +
                                    guestcount + ']" value="' + lname +
                                    '" ></td><td><input required maxlength="12" type="text" name="guestpno[' +
                                    guestcount + ']" value="' + guest_id_no +
                                    '" ></td><td><input readonly  value=' + nationality +
                                    ' name="nationality[' +
                                    guestcount + ']"  ></td><td><input  readonly type="text" name="guestdob[' +
                                    guestcount + ']" value="' + dob +
                                    '" ></td><td><input style="border: 1px solid blue;" type="text" name="guestaddress[' +
                                    guestcount + ']" value="' + address +
                                    '" ></td><td><input style="border: 1px solid blue;" type="text" name="gcontact[' +
                                    guestcount + ']" value="' + g_contact +
                                    '" ></td><td><input style="width:200px;border:1px solid blue;" type="text" name="gmail[' +
                                    guestcount + ']" value="' + g_email +
                                    '" ></td><td><input  readonly type="text" name="guesttype[' + guestcount +
                                    ']" value="' + guest_type +
                                    '" ></td><td><input readonly type="text" name="guestroom[' + guestcount +
                                    ']" value="' + guest_room_val + '"  ></td></tr>');

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

                }
                else
                {
                    notify(1,'Guset already add !');
                    $('#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();
                }

            }



        }


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

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

            var guestcount = Number(sessionStorage.getItem('guestcount'));

            if (guestcount > 0) {

                $('#guestlistform').validate({

                    rules: {

                        "guestfname[]": {
                            required: true,
                            minlength: 2,
                        },

                        "guestlname[]": {
                            required: true,
                        },

                        "guestpno[]": {
                            required: true,
                        },

                        "guestroom[]": {
                            required: true,
                        },

                        "nationality[]": {
                            required: true,
                        }

                    },

                });


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

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

                }

            } else {

                notify(1, 'please add at least one guest detail');

            }


        });
    </script>

@endsection