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

@section('title','Guests')

@section('home-content')

<div class="grid grid-cols-12 gap-1 mt-1" style="padding:15px;">
    <div class="intro-y col-span-12 inline-grid flex-wrap sm:flex-no-wrap items-center ">

        <a href="{{route('add_update_guest_view')}}" class="add-rate-link  mr-2 ml-auto"> <i data-feather="plus-circle" class="w-5 h-5 mr-1"> </i> Add Guest</a>

        <div class="hidden md:block mx-auto text-gray-600"></div>

    </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">
            <thead>
                <tr>
                    <th class="whitespace-no-wrap">#</th>
                    <th class="whitespace-no-wrap">First Name</th>
                    <th class="whitespace-no-wrap">Last Name</th>
                    <th class="whitespace-no-wrap">Guest Email</th>
                    <th class="whitespace-no-wrap">Guest Contact No</th>
                    <th class="text-center whitespace-no-wrap"> Action</th>

                </tr>
            </thead>

            <tbody id="data_table">

            </tbody >

        </table>

    </div>

</div>


<div class="modal" id="header-footer-modal-preview"   >
    <div class="modal__content">
        <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5">
            <h2 class="font-medium text-base mr-auto">Guest All Reservations</h2>
            <div id="checkin-button-holder">

            </div>
        </div>

        <div class="">

            <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 style=" overflow-x: scroll;" class="col-span-12 sm:col-span-12">
                <table class="table table-report" id="booked_rooms_table" >
                        <thead>
                            <tr>
                                <th>Reservation Code</th>
                                <th>Travel Agent</th>
                                <th>Check-in Date</th>
                                <th>Check-out Date</th>
                            </tr>
                        </thead>
                        <tbody id="booked_rooms_list">
                        </tbody >
                </table>
            </div>
        </div>

    </div>
</div>

@endsection

@section('script-area')

    <script>
        $(function(){

           getguests();

        });

        function getguests(){

            var table = $('#dttbl').DataTable({
                processing: true,
                serverSide: false,
                bDestroy: true,
                ajax :{
                    'url':"{{route('getallguests')}}",
                },
                columns:[
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'guestFname', name: 'guestFname'},
                    {data: 'guestLname', name: 'guestLname'},
                    {data: 'guestEmail', name: 'guestEmail'},
                    {data: 'contactNo', name: 'contactNo'},
                    {
                            data: 'info-btn',
                            name: 'info-btn'
                    }

                ]
            });

        }

        function getGuestsReservations(guest_id){

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

            var params = {
                'guest_id':guest_id,
            }

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

                    var result = res;

                    if(result.status==200){

                        console.log(result);

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

                        result.data.forEach(e => {

                            $('#booked_rooms_list').append('<tr><td>'+e.code+'</td><td>'+e.agentName+'</td><td>'+e.checkinDate+'</td><td>'+e.checkoutDate+'</td></tr>');

                        });


                    }else{
                        notify(1,'unable to fetch guest reservations');
                    }

                },
                error:function(err){

                    notify(1,'unable to fetch guest reservations');

                },
            });

        }


        function deleteGuest(id){

            var url = "{{route('deleteguest')}}";
            var param = {
                'guest_id':id,
                "_token": "{{ csrf_token() }}",
            };

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

                if(res.isConfirmed){
                    preloader();
                    $.ajax({
                        url:url,
                        type:'post',
                        data:param,
                        success:function(res){

                            var data = res;
                            console.log(data);
                            if(data.error_status==0){
                                removeLoader();
                                notify(0,data.msg);
                                location.reload();

                            }else{
                                removeLoader();
                                notify(1,data.msg);
                                console.log(data.msg);

                            }

                        },
                        error:function(err){
                            removeLoader();
                            console.log(err);
                            notify(1,err.msg);
                        }
                    });

                }
            });

        }

    </script>

@endsection