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

@section('title','Room Allocation Forecast')

    @section('home-content')


    <div class="grid grid-cols-12 gap-6 mt-5 room-alocation-forecast">
        <div class="intro-y col-span-12 inline-grid flex-wrap sm:flex-no-wrap items-center mt-2">
         <form id="allocation_form" action="{{route('room_allocation_forecast_view')}}">
            <div id="dateholder"></div>
            <label class="page-title">Date Range</label>
            <input  name="datecalender" id="datecalender" class="date-selector datepicker input w-56 border block mx-auto" style="display:inline;"   >

            <button onclick="formsubmit()" type="button" class="btn-search button bg-theme-6 text-white">SEARCH</button>

            <a class="btn-print button bg-theme-9 text-white" href="{{route('print_room_allocation_forecast')}}?s_date={{ isset($s_date) ? $s_date : '' }}&e_date={{isset($e_date) ? $e_date : ''}}" target="_blank">PRINT FORECAST</a>
         
        </form>

        <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" style="overflow-x:auto;" >
        <table class="table table-report -mt-2" >
        
          <tr>
              <thead>

                    <td>Room</td>

                @forelse ($table as $row)
            
                <td>{{$row['date']}}</td>

                @empty
                
                @endforelse

              </thead>

          </tr>

              <tbody>

                @forelse($rooms as $room)

                    <tr>
   
                        <td>{{$room->room_name}}</td>

                        @forelse ($table as $mahaloop)
                        
                           @foreach ($table as $podiloop)

                              @if($mahaloop['date'] == $podiloop['date'])

                                @if ($podiloop['rooms']==null)

                                    <td style="min-width:85px;">Vacant</td>

                                @else
                                
                                   @php 

                                    $checked = 0;
                                    $status = null;
                                    $type = null;
                                    $ref_id = null;

                                     foreach ($podiloop['rooms'] as $roomloop) {
                                        
                                        if($roomloop['room_id'] == $room->room_id){

                                            $checked = 1;
                                            $status = $roomloop['status'];
                                            $type = $roomloop['type'];
                                            $ref_id = $roomloop['ref_id'];
                                            break;

                                        }else{

                                            

                                        }

                                     }

                                    @endphp

                                    @if($checked==1)

                                        @switch($type)

                                            @case(1)

                                                 {{-- if this is this is a reservation show this button --}}
                                                <td><a href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-6 text-white" onclick="get_booking_details({{$ref_id}})" >{{$status}}</a></td>
                                                
                                                @break
                                            @case(2)

                                                 {{-- if this is this is a booking show this button --}}
                                                
                                                 <td><a href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-12 text-white" onclick="getbookingRooms({{$ref_id}})"  >{{$status}}</a></td>

                                                @break
                                            @default
                                                
                                        @endswitch

                                    @else

                                     <td style="min-width:85px;">Vacant</td>

                                    @endif
                                    
                                @endif
                               
                              @endif
                               
                           @endforeach

                        @empty
                            
                        @endforelse

                    </tr>

                @empty

                @endforelse


              </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"><span id="typeholder"></span> 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">
                    <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 --}}


    @endsection

    @section('script-area')


    <script>

        function formsubmit(){
            
            var reportdates = getCalenderDate();

            $('#dateholder').html('');
            
            $('#dateholder').append('<input name="s_date"  hidden value="'+reportdates.indate+'" >');
            $('#dateholder').append('<input name="e_date"  hidden value="'+reportdates.outdate+'" >');

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

        }
        
        function get_booking_details(ref_id){

            $('#checkindetails').html('');
            $('#typeholder').html('');

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

            var params = {
                'res_id':ref_id,
            }

            $.ajax({
                type: 'GET',
                url : url,
                data:params,
                success:function(res){
                
                    var data = res;
                    console.log(data);
                    $('#typeholder').html('Reservation');
                    $('#checkindetails').append('<p>Reservation ID : '+data.res_details.code+' </p>');
                    $('#checkindetails').append('<p style="margin-bottom:2%;" >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);

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

        }


        function getbookingRooms(res_id){

            $('#checkindetails').html('');
            
            $('#typeholder').html('');

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

            var params = {
                'res_id':res_id,
            }

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

                    var data = res;

                    console.log(data);

                    $('#typeholder').html('Booking');
                    $('#checkindetails').append('<p>Booking ID : '+data.res_details.code+' </p>');
                    $('#checkindetails').append('<p style="margin-bottom:2%;" >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.booking_checkinDate+'</p><p>Check out Date : '+data.res_details.booking_checkoutDate+'</p>');
                    $('#remarks').val(data.res_details.remarks);

                    

                },
                error:function(err){

                    console.log(err);

                }
            });


        }


        function getCalenderDate(){

            var datespicked = $('#datecalender').val();

            var dateranger = datespicked.split('-');

            var startdate = new Date(dateranger[0]);

            var enddate = new Date(dateranger[1]);

            startdate = startdate.getFullYear()+"-"+String(startdate.getMonth()+1)+"-"+startdate.getDate();

            enddate = enddate.getFullYear()+"-"+String(enddate.getMonth()+1)+"-"+enddate.getDate();

            var data = {
                'indate':startdate,
                'outdate':enddate,
            };

            return data;

        }

    </script>


    @if(isset($s_date)&&isset($e_date))

    <script>
        $(function(){

            bCheckinDate = new Date('{{$s_date}}').toDateString();
            bCheckoutDate = new Date('{{$e_date}}').toDateString();

            bCheckinDate = bCheckinDate.split(' ');
            bCheckoutDate = bCheckoutDate.split(' ');

            bookingdates = bCheckinDate[2]+' '+bCheckinDate[1]+','+bCheckinDate[3]+' - '+bCheckoutDate[2]+' '+bCheckoutDate[1]+','+bCheckoutDate[3];

            $('#datecalender').val(bookingdates);

        });
    </script>

    @endif

    @endsection