{{-- <div class="card">
    <div class="card-header text-center">
        <h4>{{store_info()->name_eng}}</h4>
                <p>{{store_info()->address_eng}},
                {{store_info()->email}},
                {{store_info()->contact_info}}</p>
    </div>
</div> --}}

<div class="card">
    <div class="card-header">
        <h3 class="text-center">{{ store_info()->name_eng }}</h3>
        <h6 class="text-center">{{ store_info()->address_eng }}</h6>
        <h6 class="text-center">{{ store_info()->email }}</h6>
        <h6 class="text-center">{{ store_info()->contact_info }}</h6>
    </div>
    <div class="card-body text-center">
        <div class="row">
            <div class="col-4 offset-2">
                <div class="card-header text-white cus-bgc1">
                    <h6>Checkout Time</h6>
                    <h4>{{ date('h:i:sa', strtotime(store_info()->check_in_time)) }}</h4>
                </div>
            </div>
            <div class="col-3">
                <div class="card-header text-white cus-bgc1">
                    <h6>Checkout Consider Time</h6>
                    <h4 class="d-inline">{{ store_info()->check_in_consider_time }} Minutes</h4>
                    @if (checkAuthPermission('frontdesk.hotel_check_in_checkout_info_edit'))
                        <button type="button" class="d-inline btn btn-sm btn-light" data-toggle="modal"
                            data-target="#exampleModal">Change</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h4>Charts</h4>
    </div>
    <div class="card-body text-center">
        <div class="row">
            <div class="col-4">
                <canvas id="roomStatusPie"></canvas>
            </div>
            <div class="col-8">
                <canvas id="checkinStatistics"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Checkout Consider Time</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('frontdesk.hotel_check_in_checkout_info_edit') }}">
                <div class="modal-body">
                    <label for="">Checkout Consider Time</label>
                    <div class="input-group mb-3">
                        <input value={{ store_info()->check_out_consider_time }} name="check_out_consider_time"
                            type="number" class="form-control" placeholder="Checkout Consider Time"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <span style="height: 28px !important;font-size: 14px !important;"
                                class="input-group-text bg-primary text-white" id="basic-addon2">Minutes</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>Summary</h3>
    </div>
    <div class="card-body text-center">
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Total</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2">
                                <h3>{{ $room_and_bed->where('type', 1)->count() }}</h3>
                                <h6>Rooms</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $room_and_bed->where('type', 2)->count() }}</h3>
                                <h6>Beds</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Occupied</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2">
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', 0)->where('check_in_status', 1)->where('check_in_time', '<', date('Y-m-d'))->count() }}
                                </h3>
                                <h6>Rooms</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', '!=', 0)->where('check_in_status', 1)->where('check_in_time', '<', date('Y-m-d'))->count() }}
                                </h3>
                                <h6>Beds</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Vacant</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2 dashboard_clickable_div" onclick="getFilteredRooms(1,1,'Vacant Room')">
                                <h3>{{ $room_and_bed->where('type', 1)->where('room_clean_status', 1)->count() }}
                                </h3>
                                <h6>Rooms</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $room_and_bed->where('type', 2)->where('room_clean_status', 1)->count() }}
                                </h3>
                                <h6>Beds</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Dirty/Out Of Order</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2 dashboard_clickable_div" onclick="getFilteredRooms(1,3,'Dirty Room')">
                                <h3>{{ $room_and_bed->where('type', 1)->where('room_clean_status', 3)->count() }}
                                </h3>
                                <h6>Dirty</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3 dashboard_clickable_div" onclick="getFilteredRooms(1,4,'Out Of Order')">
                                <h3>{{ $room_and_bed->where('type', 1)->where('room_clean_status', 4)->count() }}
                                </h3>
                                <h6>Out Of Order</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Check-In Today</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2">
                                @php
                                    $today_last_second = date('Y-m-d') . ' 23:59:59';
                                    $today_first_second = date('Y-m-d') . ' 00:00:00';
                                @endphp
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', 0)->where('check_in_status', 1)->whereBetween('check_in_time', [$today_first_second, $today_last_second])->count() }}
                                </h3>
                                <h6>Room</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', '!=', 0)->where('check_in_status', 1)->whereBetween('check_in_time', [$today_first_second, $today_last_second])->count() }}
                                </h3>
                                <h6>Bed</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Reserved Today</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2">
                                <h3>{{ $booking_room->where('get_booking_info.type', 1)->count() }}</h3>
                                <h6>Room</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $booking_room->where('get_booking_info.type', 2)->count() }}</h3>
                                <h6>Bed</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Allotted Room</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2">
                                <h3>{{ intVal($allotted_room) }}</h3>
                                <h6>Total</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $checkin_room->where('allotment_id', '!=', 0)->where('check_in_status', 1)->count() }}
                                </h3>
                                <h6>Check-In</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <div class="card-header text-white cus-bgc1">
                        <h4>Possible Checkout</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="row mx-0">
                            <div class="col text-white py-2 cus-bgc2 dashboard_clickable_div" onclick="getPossibleCheckoutRoom()">
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', 0)->where('check_in_status', 1)->where('end_date_time', '<', today())->count() }}
                                </h3>
                                <h6>Room</h6>
                            </div>
                            <div class="col text-white py-2 cus-bgc3">
                                <h3>{{ $checkin_room->where('allotment_id', 0)->where('bed_id', '!=', 0)->where('check_in_status', 1)->where('end_date_time', '<', today())->count() }}
                                </h3>
                                <h6>Bed</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('frontdesk.dashboard.possible_checkout_rooms')
@include('frontdesk.dashboard.shortcut_modal')

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script>

    function getPossibleCheckoutRoom() {
        $('#possibleCheckoutRoom').modal('show');
    }

    function getFilteredRooms(booking_type,type,modal_title){
        var alertData={showLoading:'true',title:"Loading...",tpb: true,position:'center',aoc:true};
        // sweetAlert(alertData);

        ajaxCustom(function(res){
            // console.log(res);
            $('#shortcutModal').modal('show');
            $('#shortcutModalBody').html(res.html);
            $('#shortcutModalTitle').text(modal_title);

            if(type == 1){
                setAlreadyAddedRoom();
            }

            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        }, 'GET',"{{ route('frontdesk.fr_dashboard.filtered_rooms') }}",{booking_type:booking_type, type: type});
    }

    const ctx = document.getElementById('roomStatusPie').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['In Used', 'Vacant', 'Dirty', 'Out Of Order'],
            datasets: [{
                title: 'Room Status',
                data: [
                    @json($room_and_bed->where('type', 1)->where('room_clean_status', 2)->count()),
                    @json($room_and_bed->where('type', 1)->where('room_clean_status', 1)->count()),
                    @json($room_and_bed->where('type', 1)->where('room_clean_status', 3)->count()),
                    @json($room_and_bed->where('type', 1)->where('room_clean_status', 4)->count()),
                ],
                backgroundColor: [
                    '#dc3545', '#28a745', '#6c757d', '#007bff'
                ],
                // borderColor: [
                //     'rgba(255, 99, 132, 1)',
                //     'rgba(54, 162, 235, 1)',
                //     'rgba(255, 206, 86, 1)',
                //     'rgba(75, 192, 192, 1)',
                // ],
                borderWidth: 1,
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.label;
                            let value = context.formattedValue;

                            if (!label)
                                label = 'Unknown'

                            let sum = 0;
                            let dataArr = context.chart.data.datasets[0].data;
                            dataArr.map(data => {
                                sum += Number(data);
                            });

                            let percentage = (value * 100 / sum).toFixed(2) + '%';
                            return label + ": " + percentage + "("+value+")";
                        }
                    }
                }
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    const checkinStatistics = document.getElementById('checkinStatistics').getContext('2d');
    const myChartCheckinStatistics = new Chart(checkinStatistics, {
        type: 'line',
        data: {
            labels: @json($checkin_info_statistics[0]),
            datasets: [{
                label: 'Room Occupied & Checkin (Last 10 Days)',
                data: @json($checkin_info_statistics[1]),
                // backgroundColor: [
                //     // '#dc3545', '#28a745', '#6c757d', '#007bff'
                // ],
                borderColor: [
                    '#dc3545'
                ],
                borderWidth: 4,
                fill: true,
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    // max: 320
                }
            }
        }
    });
</script>