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

@section('title','Room Reservation')

    @section('home-content')




    <div class="grid grid-cols-12 gap-1 mt-1" style="overflow: hidden; padding:15px;">
    <div class="col-span-12 sm:col-span-6 xl:col-span-6 intro-y mob-text-center">
    <form id="filterform">
         <div class="grid grid-cols-12 gap-1">
        
            <div class="col-span-12 sm:col-span-12 xl:col-span-5 intro-y mob-text-center"><input id="filterdate" data-daterange="false" class="datepicker input border block reservation_view_filterdate"></div>
            <div class="col-span-12 sm:col-span-12 xl:col-span-7 intro-y">
                <Button onclick="filter_reservations_by_date()" class="button w-20 bg-theme-9 text-white " type="button" style="margin-right:5px;">FILTER</Button>
                <a class="button w-20 bg-theme-13 text-white" href="{{'room_reservation_view'}}" style="margin-right:5px; margin-top:2rem; padding:10px;">RESET</a>
            </div>
            
            
        </div>
    </form>

                
        
        </div>
        <div class="col-span-12 sm:col-span-6 xl:col-span-6 intro-y text-right mob-text-center">
        <a href="{{route('add_update_reservation_view')}}" class="add-rate-link  mr-2 ml-auto"><i data-feather="plus-circle" class="w-5 h-5 mr-1"> </i> Add Reservation</a>
        </div>
    
        <!-- BEGIN: Data List -->

        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

        <table class="table table-report -mt-2" id="dttbl" style="width: 100%" >
            <thead>
                <tr>
                    <th class="whitespace-no-wrap">#</th>
                    <th class="whitespace-no-wrap">Reservation Code</th>
                    <th class="whitespace-no-wrap">Guest</th>
                    <th class="whitespace-no-wrap">Travel Agent</th>
                    <th class="whitespace-no-wrap">Check-in Date</th>
                    <th class="whitespace-no-wrap">Check-out Date</th>
                    <th class="text-center whitespace-no-wrap">Status</th>
                    <th class="text-center whitespace-no-wrap">ACTIONS</th>
                </tr>
            </thead>

            <tbody id="data_table">

            </tbody>

        </table>

    </div>

    </div>


    <!-- booked rooms Modal -->

    <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">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>
                                    <th>Additional Facilities</th>
                                </tr>
                            </thead>
                            <tbody id="booked_rooms_list">
                            </tbody id="tbody">
                    </table>
                </div>


                <div class="col-span-12 sm:col-span-12">
                    <div class="mb-2">Remarks</div>
                        <textarea  disabled style="width: 100%;" name="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" id="res_details_cls" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
            </div>
        </div>
    </div>

  {{-- end of modal --}}


    <!-- booked rooms Modal -->

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

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

  {{-- end of modal --}}


  <!-- show reservation guest list modal -------->

  <div class="modal" id="res_guest_list"  >
    <div class="modal__content" style="width: 50%;">
        <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 Guest List</h2>

        </div>

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

            <div class="col-span-12 sm:col-span-12">
                <div id="hello" ></div>
                <table class="table table-report -mt-2"  >
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Nationality</th>
                                <th>Room No</th>
                            </tr>
                        </thead>
                        <tbody id="resguestlist" >

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

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



    <!-- add manual additional bill modal -------->

    <div class="modal" id="bill_modal" >
        <div style="width: 70%;" 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">Manual Bill</h2>
                <button  type="button" class="button  bg-theme-13 text-white" style="margin-top:5%;" id="addbtn" onclick="addrow()" >Add a bill</button>
                <button  type="button" class="button  bg-theme-13 text-white" style="margin-top:5%; margin-left:2%; " id="clrbtn" onclick="clearbilllist()" >Clear</button>
            </div>

          <form id="bill_form" action="{{ route('add_bill') }}" method="POST" >

            @csrf

            <input type="text" hidden name="bill_res_id" id="bill_res_id" >

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

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

                    <div style="overflow:auto;">

                    <table class="table table-report mt-2" >

                        <thead>
                            <tr>
                                <td>Bill Type</td>
                                <td>Bill Refference No</td>
                                <td></td>
                                <td>Amount</td>
                                <td>Room No</td>
                            </tr>
                        </thead>
                        <tbody id="manual_bill_list">
                        </tbody>

                    </table>

                    </div>

                </div>

            </div>

            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                <button  onclick="save_manual_bill()" type="button" class="button w-20 bg-theme-9 text-white" style="margin-top:5%;" id="savebtn" >Save</button>
                <button type="button" id="bill_cln_btn" data-dismiss="modal" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
            </div>

        </form>

        </div>
    </div>

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



    @endsection


    @section('script-area')


        <script>

            // this function will load the reservations to the table  on initial page load

            $(function () {

                loadtable();


            });



            function loadtable(){

                var d = new Date();

                function getcheckoutdate(days){

                    d.setDate(d.getDate() + days);
                    return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
                }

                var params = {
                    'checkindate':d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate(),
                    'checkoutdate':getcheckoutdate(5),
                    'type':"all"

                };


                var table = $('#dttbl').DataTable({
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    ajax :{
                        'url':"{{route('get_all_reservations')}}",
                        'data':params,
                    },
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                        {data: 'code', name: 'code'},
                        {data: 'get_guest.guestFname', name: 'guest_name'},
                        {data: 'get_travel_agent.agentName', name: 'agent_name'},
                        {data:'checkinDate',name:'checkin'},
                        {data:'checkoutDate',name:'checkout'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: true,
                            searchable: true
                        },

                        {
                            data: 'info-btn',
                            name: 'info-btn'
                        }


                    ]
                });

            }


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


        // this function will tigger a filter for reservations on user selected
        // checkin date and checkoutdate and show them in the datatable


        function filter_reservations_by_date(){

            var datespicked = $('#filterdate').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();


            if((startdate&&enddate != null)&&(startdate<enddate)){


                var params = {
                    'checkindate':startdate,
                    'checkoutdate':enddate,
                    'type':"search"

                };


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

                var table = $('#dttbl').DataTable({
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    ajax :{
                        'url':"{{route('get_all_reservations')}}",
                        'data':params,
                    },
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                        {data: 'code', name: 'code'},
                        {data: 'get_guest.guestFname', name: 'guest_name'},
                        {data: 'get_travel_agent.agentName', name: 'agent_name'},
                        {data:'checkinDate',name:'checkin'},
                        {data:'checkoutDate',name:'checkout'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: true,
                            searchable: true
                        },

                        {
                            data: 'info-btn',
                            name: 'info-btn',
                        }

                    ]
                });


            }else{

                notify(1,'please select a valid check-in check-out date');

            }

        }


            // this function get the rooms to the particular reservation and assign to the
            // popup modal

            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;


                        $('#booked_rooms_list').html('');
                        $('#remarks').html('');
                        $('#checkindetails').html('');
                        $('#checkin-button-holder').html('');
                        $('#printdiv').html('');

                        $('#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%;" >Guest Mobile : '+data.res_details.get_guest.contactNo+'</p>');
                    $('#checkindetails').append('<p style="margin-bottom:2%;" >Guest Email : '+data.res_details.get_guest.guestEmail+'</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>');

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

                        data.rooms.forEach(e => {

                            $('#booked_rooms_list').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><td><a href="javascript:;" data-toggle="modal" data-target="#additional_features_room" class="button inline-block bg-theme-13 text-white" onclick="get_room_facilities('+id+','+e.room_id+')" ><i class="fa fa-eye" aria-hidden="true"></i></a></td></tr>');

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

                        });

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

                            $('#checkin-button-holder').html('');
                            $('#checkin-button-holder').append('<a href="{{route("guest_assign_reservation_view")}}?res_id='+data.res_details.id+'" class="button w-25 bg-theme-9 text-white" >Check IN</a>');
                            $('#printdiv').html('');
                            $('#printdiv').append('<a class="button w-30 bg-theme-6 text-white" href="{{route("print_grc")}}?id='+data.res_details.id+'" target="_blank" >PRINT GRC</a>');

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

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

                            $('#checkin-button-holder').append('<a href="{{route("checkout_view")}}?res_id='+data.res_details.id+'" class="button w-15 bg-theme-11 text-white" >CHECK OUT</a>');

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

                            $('#printdiv').append('<a href="javascript:;" onclick="guestlist('+res.res_details.id+')" data-toggle="modal" data-target="#res_guest_list" class="button inline-block bg-theme-13 text-white"  >View Guest List</a>');
                            $('#printdiv').append('<a href="javascript:;" style="margin-left:2%;" data-toggle="modal" onclick="setresid('+res.res_details.id+')" data-target="#bill_modal" class="button inline-block bg-theme-13 text-white"  >Add Manual Bill</a>');
                            $('#printdiv').append('<a style="margin-left:2%;" href="{{route("print_res_bill")}}?id='+data.res_details.id+'" class="button w-30 bg-theme-6 text-white"  target="_blank" >PRINT Bill</a>');

                        }else if(res.res_details.status==3){
                            $('#checkin-button-holder').html('');
                            $('#printdiv').html('');
                            $('#printdiv').append('<a style="margin-left:2%;" href="{{route("print_final_res_bill")}}?id='+data.res_details.id+'" class="button w-30 bg-theme-6 text-white"  target="_blank" >SHOW FINAL BILL</a>');

                        }

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

                        // this function will add the total bill to additional bill and append the result to modal uI

                         get_additional_bills(res.res_details.id);


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

                    },
                    error:function(err){

                        notify(1,'unable to load reservation rooms');

                    }
                });


            }


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

            function get_room_facilities(res_id,room_id){

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

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

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

                        var data = res;

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



                        if(data.length){

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

                        }else{

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

                        }


                    },
                    error:function(err){
                        console.log(err);
                        notify(1,'unable to get the room facilities');

                    },
               });

            }


        // 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(firstdate,lastdate) {

            var oneD = 1000 * 60 * 60 * 24;
            var startDT = firstdate;
            var endDT = lastdate;
            var sMS = new Date(startDT);
            var eMS = new Date(endDT);
            return Math.round((eMS.getTime() - sMS.getTime()) / oneD);

        }


        function guestlist(id){

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

            var param = {
                id:id,
            };

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

                    var result = res;

                    console.log(result);

                    if(result.error_status==0){

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

                        result.data.forEach(r=>{
                            $('#resguestlist').append('<tr><td>'+r.guestFname+'</td><td>'+r.guestLname+'</td><td>'+r.gcountry+'</td><td>'+r.room_no+'</td></tr>');
                        });

                    }

                },
                error:function(err){

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

                }
            });

        }


        // ------------- this is a setresid  function which is used only in add manual bill popup----//

        function setresid(id){

            $('#bill_res_id').val(id);

            sessionStorage.setItem('manual_bill_count',0);

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


        }

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


    // this function will add row to table in manual bill modal

    function addrow(){

        var selected = $('#b_type').val();

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

            var param = {
                'res_id':$('#bill_res_id').val(),
            };

            var index = Number(sessionStorage.getItem('manual_bill_count'));


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

                    var result = res;

                    $('#manual_bill_list').append('<tr id="bill'+index+'" ><td><select name="b_type[]" ><option value="1" >House keeping</option><option value="2" >Adititional Service</option><option value="3" >KOT Bill</option><option value="4" >BOT Bill</option></select></td><td><input name="b_code['+index+']" class="input  border flex-1" required ></td><td><p style="display:inline;" >'+currency_symbol()+'</p></td><td><input type="number" min:1; class="input  border flex-1" name="b_amount['+index+']" required placeholder="'+currency_symbol()+'" ></td><td><select name="room_id['+index+']" required id="room'+index+'" ></select></td></tr>');

                    result.rooms.forEach(e => {

                      $('#room'+index+'').append('<option value="'+e.room_id+'">'+e.room_name+'</option>');

                    });

                    index = Number(index) + Number(1);

                    sessionStorage.setItem('manual_bill_count',index);

                },
                error:function(err){
                    console.log(err);
                }
            });




    }


    // this will clear the bill list in the manual bill modal table

    function clearbilllist(){

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


        sessionStorage.setItem('manual_bill_count',0);

    }


    function save_manual_bill(){



        $('#bill_form').validate({
            rules:{

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

                "b_amount[]":{
                    required:true,
                    min:"1",
                }

            },
        });

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

            preloader();
            $('#bill_form').submit();

        }

    }


    // get the additional bills


    function get_additional_bills(id){

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

        var param = {
            'res_id':id,
        }


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

                var result = res;


                $('#checkindetails').append('<p style="margin-top:2%;" >Room Rate : '+currency_symbol()+" "+currency_changer(result.info.reservation_room_total)+' /='+'</p>');

                $('#checkindetails').append('<p style="margin-top:2%;" >Additional Bills : '+currency_symbol()+" "+currency_changer(result.info.bill_total)+' /='+'</p>');

                $('#checkindetails').append('<p style="margin-top:2%;" >Extra Charges : '+currency_symbol()+" "+currency_changer(result.info.extra_charges_total)+' /='+'</p>');

                $('#checkindetails').append('<p style="margin-top:2%;" >Total Bill : '+currency_symbol()+" "+currency_changer(result.info.grand_total)+' /='+' </p>');

            },
            error:function(err){

                console.log(err);

            }

        });



    }


    function deleteReservation(id){

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

        var param = {
            'res_id':id,
            "_token": "{{ csrf_token() }}",
        };

        confirmnotify("do you want to delete this reservation?").then(res=>{

           if(res.isConfirmed){

                $.ajax({

                    url:url,
                    type:"POST",
                    data:param,
                    success:function(res){

                        var result = res;

                        if(result.error_status==0){

                            notify(0,result.msg);
                            loadtable();

                        }else{
                            notify(1,result.msg);
                        }

                    },

                    error:function(err){

                        notify(1,err.msg);

                    }

                });

           }

        });

    }


</script>

@endsection