@extends('../layout/menu/' . session('layout'))

@section('subcontent')
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 xxl:col-span-9 grid grid-cols-12 gap-6">
            <!-- BEGIN: General Report -->
            <div class="col-span-12 mt-8">
                <div class="intro-y flex items-center h-10">
                    <h2 class="text-lg font-medium truncate mr-5">
                    <img  class="menu-icon-img title-icon black-icon" src="{{ asset('dist/images/menu_icons/dashboard.png') }}">
                    Dashboard

                    </h2>
                    <a href="" class="ml-auto flex text-theme-1 dark:text-theme-10">
                        <i data-feather="refresh-ccw" class="w-4 h-4 mr-3"></i> Reload Data
                    </a>
                </div>
                <div class="grid grid-cols-12 gap-6 mt-5">
                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <img style="margin-top: 2%;" class=" menu-icon-img title-icon black-icon " id="title_icon" src="{{asset('dist/images/menu_icons/Rooms.png')}}">
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">{{$vacantrooms}}</div>
                                <div class="text-base text-gray-600 mt-1">Vacant Rooms Today</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                        <div class="report-box zoom-in">
                            <div class="box p-5" style="min-height:159px;">
                                <div class="flex">
                                    
                                </div>
                               
                                @forelse($meal_plans as $row)

                                    @if($row['meal_plan']==1)
                    
                                    <p>Tomorrow Breakfast Pax : {{$row['paxs']}}</p>
                    
                                    @endif
                    
                                    @if($row['meal_plan']==2)
                    
                                    <p>Tomorrow Lunch Pax : {{$row['paxs']}}</p>
                    
                                    @endif
                    
                                    @if($row['meal_plan']==3)
                    
                                    <p>Tonight Dinner Pax : {{$row['paxs']}}</p>
                    
                                    @endif
                    
                                    @empty 
                                    
                                @endforelse

                                <div class="text-base  text-gray-600 mt-8">Today Meal Count</div>
                        
                            </div>
                        </div>
                    </div>

                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <img style="margin-top:2%;" class="menu-icon-img" src="{{asset('dist/images/menu_icons/Hotel-Config.png')}}" width:="" 25px;="">
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-theme-9 tooltip cursor-pointer" title="22% Higher than last month">
                                            22% <i data-feather="chevron-up" class="w-4 h-4"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">{{$arrivals}}</div>
                                <div class="text-base text-gray-600 mt-1">Today Arrivals</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <img style="margin-top: 2%;" class="menu-icon-img title-icon black-icon" id="title_icon" src="{{asset('dist/images/menu_icons/Guests.png')}}">
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">{{$inhouse_guests}}</div>
                                <div class="text-base text-gray-600 mt-1">Inhouse Guests</div>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
            <!-- END: General Report -->
  
 
        </div>

    </div>

    <script>
        $(document).ready(function(){
    $('.report-box').matchHeight();
})
    </script>
@endsection