@extends('admin.layout.master')

@section('custom_style')

<style>
    .ckn_desh_parent{
        /* display: flex;
        flex-wrap: nowrap;  */
        width: 100%;
    }

    .ckn_desh_parent .ckn_desh_child{
        width: 8.33%;
        float: left;
        text-align: center;
    }

    .nowrap-1 {
        white-space: nowrap;
    }

    .ckn_desh_child .ckn_desh_child_wrapper{
        border: 1px solid rgb(119, 115, 115);
        margin: 2px 1px;
        border-radius: 10px;
        overflow: hidden;
    }
    /* .added_room_count{
        position: absolute;
        left: -5px;
        top: -5px;
        width: 22px;
        height: 22px;
        font-size: 14px;
        border-radius: 50%;
        text-align: center;
        font-weight: 700;
        background-color: rgb(104, 100, 100);
        color: #ffffff;
    } */
    .cus-bgc1{
        background-color: #363E8F;
    }
    .cus-bgc2{
        background-color: #37B9C1;
    }
    .cus-bgc3{
        background-color: #3678E6;
    }
    .cus-bgc4{
        background-color: #e7e40d;
    }
    .cus-bgc5{
        background-color: #e64b36;
    }
    .cus-bgc6{
        background-color: #c2c2c2;
    }
    .cus-bgc7{
        background-color: #E879F9;
    }
    .col-2{
        padding-left: 3px;
        padding-right: 3px;
    }
    .dashboard_clickable_div{
        cursor: pointer
    }
    .dashboard_clickable_div:hover{
        opacity: 0.8;
    }
    .bg-available{
        background-color: #229446!important;
    }
    .btn-success{
        background-color: #229446!important;
    }
    .common_summary{
        font-size: 1.25rem;
    }
    .custom_dropdown .dropdown-toggle::after{
        display: none
    }
</style>

@endsection

@section('content')
    {{-- @include('frontdesk.dashboard.auto_biil_generate') --}}

    @include('frontdesk.dashboard.summary')

    <div class="card">
        <div class="card-header bg-dark">
            <h4 class="text-center text-white">{{__('obs.rooms')}}</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="d-flex justify-content-between">
                    <div>
                        <button class="btn btn-sm btn-primary" id="room_floor_filter_options_button">{{ __('obs.show_filter_options') }}</button>
                    </div>
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-secondary allotment_filter_button allotment_filter_button_both" onclick="filter_rooms('both')">{{ __('obs.all') }}</button>
                        <button class="btn btn-sm btn-success allotment_filter_button allotment_filter_button_not_allotted" onclick="filter_rooms('not_allotted')">{{ __('obs.not_allotted') }}</button>
                        <button class="btn btn-sm btn-secondary allotment_filter_button allotment_filter_button_allotted" onclick="filter_rooms('allotted')">{{ __('obs.allotted') }}</button>
                    </div>
                    <div>
                        <input type="checkbox" id="checkAllRedyAccept">
                        <label for="checkAllRedyAccept">{{ __('obs.check_all') }}</label>
                        <button class="btn btn-sm btn-primary" onclick="makeSelectedRoomReady()">{{ __('obs.ready') }}-{{ __('obs.accept') }}</button>
                    </div>
                </div>
            </div>
            <div class="row mt-2" id="room_floor_filter_options_div" style="display: none;">
                <div class="col-3">
                    <div class="d-flex">
                        <div class="d-flex m-1 py-1 px-3 mx-1 rounded-2 bg-dark">
                            <p class="text-white mb-0">{{ __('obs.room_no') }}</p>
                        </div>
                        <div class="d-flex py-1 px-3 rounded-2">
                            <input type="text" onkeyup="filter_rooms()" id="s_room_no" class="form-control d-inline" style="border: 1px solid #000;" placeholder={{ __('obs.write_room_no') }}>
                        </div>
                    </div>
                </div>
                <div class="col-9">
                    <div class="d-flex flex-wrap">
                        <div class="d-flex m-1 py-1 px-3 rounded-2 bg-dark">
                            <p class="text-white">{{ __('obs.floor') }}</p>
                        </div>
                        @foreach ($floors as $f)
                            <div class="d-flex m-1 py-1 px-3 rounded-2 cus-bgc2">
                                <input onchange="filter_rooms()" type="checkbox" id="filter_floor{{ $f->id }}" name="floor[]" value="{{ $f->id }}">
                                <label style="padding-left: 3px;" for="filter_floor{{ $f->id }}">{{ $f->floor_no }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-flex flex-wrap">
                        <div class="d-flex m-1 py-1 px-3 rounded-2 bg-dark">
                            <p class="text-white">{{ __('obs.room_type') }}</p>
                        </div>
                        @foreach ($room_types as $r)
                            <div class="d-flex m-1 py-1 px-3 rounded-2 bg-primary">
                                <input onchange="filter_rooms()" type="checkbox" id="filter_room_type{{ $r->id }}" name="room_type[]" value="{{ $r->id }}">
                                <label class="text-white" style="padding-left: 3px;" for="filter_room_type{{ $r->id }}">{{ $r->name }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body ckn_desh_parent pt-0" id="room_body" style="min-height: 500px">
            @include('frontdesk.dashboard.loader')
        </div>
    </div>

    {{-- @include('frontdesk.dashboard.rooms') --}}
    {{-- @include('frontdesk.dashboard.beds') --}}
    <button class="btn w20px btn-md fw-bold show_added_room" style="position: fixed;background-color: #14B8A6; color: #ffffff; top: 35%;right: 0; width: 100px; display: none; z-index: 9999;"><i class="fas fa-hotel pe-2"></i>Room: <span class="added_room_count"></span></button>
    <button class="btn w20px btn-md fw-bold show_added_bed" style="position: fixed;background-color: #E879F9; color: #ffffff; top: 45%;right: 0; width: 100px; display: none; z-index: 9999;"><i class="fas fa-bed pe-2"></i>Bed: <span class="added_bed_count"></span></button>
    @include('frontdesk.dashboard.added_modal')

    @include('frontdesk.common.common')
    <button class="btn btn-md" id="dashboard_refresh_button" onclick="getSummary()" style="z-index: 99999; background-color: #F59E0B; color: #1F2937; position: fixed; right: 0; top: 15%">Refresh</button>
    <button class="btn btn-md" id="toggle_bed_info" onclick="toggleBedInfo()" style="z-index: 99999; background-color: #6366F1; color: #FFFFFF; position: fixed; right: 0; top: 25%">Bed Info</button>
    @php
        $zatca_connected_warehouses = session('zatca_connected_warehouses');
        $is_zatca_connected = in_array(current_store(), is_array($zatca_connected_warehouses) ? $zatca_connected_warehouses : []);
    @endphp
    @if($is_zatca_connected)
        <button class="btn btn-sm btn-warning text-dark" onclick="getZatcaSummary();" style="z-index: 99999; position: fixed; right: 0; top: 55%">{{ __('obs.zatca_summary') }}</button>
    @endif
    <a class="btn btn-md" target="_blank" href="{{ route('frontdesk.fr_dashboard.bed_status') }}" style="z-index: 99999; position: fixed; right: 0; top: 65%; background-color: #3B82F6; color: #ffffff;">Bed Status Dashboard</a>
@endsection

@include('frontdesk.dashboard.room_images_modal')
@section('script')

    <script>
        let all_floors = @json($floors->pluck('id')->toArray());
        let all_room_type = @json($room_types->pluck('id')->toArray());
        var collaction_of_rooms = [];
        var myChart = '';
        var myChartCheckinStatistics = '';
        let room_id_track = null;
        let loader = `<div class="d-flex justify-content-center frontdesk_report_loader">
            <div class="spinner-border" role="status">
            <span class="sr-only">{{__('obs.loading')}}...</span>
            </div>
        </div>`;
        $(document).ready(function(){

            $('#checkAllRedyAccept').click(function () {
                $('.dirty_to_ready').prop('checked', this.checked);
                console.log("There", "all", this.check);
            });

            $(document).on('change','.dirty_to_ready',function () {
                let check = ($('.dirty_to_ready').filter(":checked").length == $('.dirty_to_ready').length);
                console.log("here", "single", check);
                $('#checkAllRedyAccept').prop("checked", check);
            });

            getSummary();

            if(@json(checkAuthPermission('frontdesk.fr_dashboard.get_balance'))){
                // getBalance();
            }

            $(document).on('click','.add_room_for_checkin,.add_bed_for_checkin',function(){
                var type = $(this).data('room_or_bed');
                var id = $(this).data('room_id');
                var room_number = $(this).data('room_no');
                var add_or_remove = $(this).attr('data-add_or_remove');
                var bed_count = $(this).data('bed_count');
                if(type == 1){
                    $('.add_bed_for_checkin').attr('disabled','disabled');
                }else{
                    $('.add_room_for_checkin').attr('disabled','disabled');
                }

                // $(this).text((add_or_remove == 1)?'Remove':'Add').attr('data-add_or_remove',(add_or_remove == 1)?2:1);
                // $(this).addClass((add_or_remove == 1)?'btn-warning':'btn-success').removeClass((add_or_remove == 1)?'btn-success':'btn-warning');

                $(`.addable_room_${id}`).text((add_or_remove == 1)?'Remove':'Add').attr('data-add_or_remove',(add_or_remove == 1)?2:1);
                $(`.addable_room_${id}`).addClass((add_or_remove == 1)?'btn-warning':'btn-success').removeClass((add_or_remove == 1)?'btn-success':'btn-warning');
                let is_not_as_room = $(this).data('is_not_as_room');
                if(add_or_remove == 1){
                    collaction_of_rooms.push({'id':id,'room_number':room_number, 'bed_count':bed_count, 'is_not_as_room':is_not_as_room, 'bed_ids':$(this).data('bed_ids')});
                }else{
                    collaction_of_rooms = collaction_of_rooms.filter(function(item) {
                        return item.id !== id
                    })
                }

                collaction_of_rooms_html = '';
                collaction_of_rooms.map(function(val,key){
                    collaction_of_rooms_html += `<tr class="${val.is_not_as_room == 1 ? 'not_as_room' : ''}">
                        <td>${key+1}</td>
                        <td>
                            <input type="hidden" name="room_id[]" value="${val.is_not_as_room == 1 ? 0 : val.id}">
                            <input class="form-control input_shadow" value="${val.room_number}" disabled></td>
                            <td class="no_of_beds_of_room">${val.bed_count}</td>
                            <td>
                                <button type="button" data-room_id="${val.id}" class="btn btn-sm btn-danger remove_room_from_cart">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>`;
                        let beds = val.bed_ids;
                        if(beds.length > 0){
                            beds.map(function(bed){
                                collaction_of_rooms_html += `<input type="hidden" name="bed_id[${bed}]" value="${val.id}">`;
                            });
                        }
                });
                $('.added_room_bed_tbody').html(collaction_of_rooms_html);

                if(collaction_of_rooms.length == 0){
                    $('.add_bed_for_checkin').attr('disabled',false);
                    $('.add_room_for_checkin').attr('disabled',false);
                }
                // if(collaction_of_rooms.length > 0){

                // }
                show_hide_added_room_button();
            });


            $('.show_added_room').click(function(){
                // $('.no_of_beds_of_room').hide();
                $('.not_as_room').hide();
                $('.checkin_from_dashboard_confirm_button').text('Checkin By Room').addClass('btn-success').removeClass('btn-warning');
                $('#checkin_from_dashboard_resv_type').val(1);
                $('#addedRoomModal').modal('show');
            });
            $('.show_added_bed').click(function(){
                // $('.no_of_beds_of_room').show();
                $('.not_as_room').show();
                $('.checkin_from_dashboard_confirm_button').text('Checkin By Bed').addClass('btn-warning').removeClass('btn-success');
                $('#checkin_from_dashboard_resv_type').val(2);
                $('#addedRoomModal').modal('show');
            });

            $(document).on('click','.remove_room_from_cart',function(){
                var room_id = $(this).attr('data-room_id');
                // collaction_of_rooms_html = '';

                collaction_of_rooms = collaction_of_rooms.filter(function(item) {
                    return item.id != room_id
                });
                collaction_of_rooms_html = '';

                collaction_of_rooms.map(function(val,key){
                    collaction_of_rooms_html += `<tr class="${val.is_not_as_room == 1 ? 'not_as_room' : ''}">
                        <td>${key+1}</td>
                        <td>
                            <input type="hidden" name="room_id[]" value="${val.is_not_as_room == 1 ? 0 : val.id}">
                            <input class="form-control input_shadow" value="${val.room_number}" disabled>
                        </td>
                        <td class="no_of_beds_of_room">${val.bed_count}</td>
                        <td>
                            <button type="button" data-room_id="${val.id}" class="btn btn-sm btn-danger remove_room_from_cart">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                    </tr>`;
                    let beds = val.bed_ids;
                    if(beds.length > 0){
                        beds.map(function(bed){
                            collaction_of_rooms_html += `<input type="hidden" name="bed_id[${bed}]" value="${val.id}">`;
                        });
                    }
                });

                $('.addable_room_'+room_id).text('Add').attr('data-add_or_remove',1).removeClass('btn-warning').addClass('btn-success');
                $('.added_room_bed_tbody').html('');
                $('.added_room_bed_tbody').html(collaction_of_rooms_html);

                show_hide_added_room_button();
            });

            function show_hide_added_room_button(){
                if(collaction_of_rooms.length == 0){
                    $('.add_bed_for_checkin').attr('disabled',false);
                    $('.add_room_for_checkin').attr('disabled',false);
                    $('.show_added_room').hide();
                    $('.show_added_bed').hide();
                    $('#addedRoomModal').modal('hide');
                }else{
                    $('.added_room_count').text(collaction_of_rooms.filter(item => item.is_not_as_room != 1).length);
                    $('.added_bed_count').text(collaction_of_rooms.reduce((total, item) => total + item.bed_count, 0));
                    $('.show_added_room').show();
                    $('.show_added_bed').show();
                }
            }

            $(document).on('click','.room_bed_ready_accept',function(){
                getLoadingStatusNew();
                var is_bad = $(this).attr('data-is_bad');
                var room_id = $(this).attr('data-room_id');
                console.log('room',room_id, 'bed', is_bad);

                if(is_bad == 1){
                    var route = `{{url('frontdesk/accept/bed/clean/status/${room_id}')}}`;
                }else{
                    var route = `{{route('frontdesk.accept.room_clean.status')}}`;
                }
                var data = {room_id:room_id};
                ajaxCustom(function (data) {
                    console.log(data);
                    // if(room_id == data.id){
                        // window.location.reload();
                        myChart.destroy();
                        myChartCheckinStatistics.destroy();
                        getSummary();
                        $('#shortcutModal').modal('hide');
                        closeSweetAlert();
                    // }
                },'get', route,data);
            });


        });
        function makeSelectedRoomReady(){
            getLoadingStatusNew();
            let room_ids = $("input[name='dirty_to_ready[]']:checked").map(function () {
                return this.value;
            }).get();

            let str_room_ids = JSON.stringify(room_ids);
            console.log("len", room_ids.length);

            if(room_ids.length > 0){
                customAjaxCall(function(res){
                    console.log("ressss", res);
                    // window.location.reload();
                    sweet_success(function(){
                        myChart.destroy();
                        myChartCheckinStatistics.destroy();
                        getSummary();
                        $('#shortcutModal').modal('hide');
                        closeSweetAlert();
                    }, 'success', 'HK Ready Room Accepted');
                }, 'POST',"{{route('frontdesk.accept.room_clean.status_all')}}",{room_ids: str_room_ids, 'multiple': 1});
            } else{
                sweet_warning(null, 'Please select A room');
                return false;
            }
        }

        function setAlreadyAddedRoom(){
            console.log("called", collaction_of_rooms);
            $.each(collaction_of_rooms, function(key,val){
                $(`.addable_room_${val.id}`).text('Remove').attr('data-add_or_remove',2);
                $(`.addable_room_${val.id}`).addClass('btn-warning').removeClass('btn-success');
            });
        }

        function getBalance(){
            $('.common_summary_balance').html(loader);
            ajaxCustom(function(res){
                $('#summary_booking_balance').text(res.summary_booking_balance);
                $('#summary_checkin_balance').text(res.summary_checkin_balance);
                $('#summary_checkout_balance').text(res.summary_checkout_balance);
            }, 'GET',"{{ route('frontdesk.fr_dashboard.get_balance') }}",{});
        }
        let allotment_type = 'both';
        function filter_rooms(type = null){
            $('.allotment_filter_button').removeClass('btn-success').addClass('btn-secondary');
            if(type != null){
                allotment_type = type;
            }

            console.log("====", allotment_type, type);
            
            $(`.allotment_filter_button_${allotment_type}`).removeClass('btn-secondary').addClass('btn-success');
            let room_no = $('#s_room_no').val();
            $('.s_all_room').hide();
            if(room_no != ''){

                console.log("room", room_no);
                $(`.${room_no}s_room_no`).show();
            }else{
                let floors = $("input[name='floor[]']:checked").map(function () {
                    return this.value;
                }).get();

                let room_type = $("input[name='room_type[]']:checked").map(function () {
                    return this.value;
                }).get();

                if(floors.length == 0){
                    floors = all_floors;
                }
                if(room_type.length == 0){
                    room_type = all_room_type;
                }

                for(let i of floors){
                    for(let j of room_type){
                        // console.log("floor room type",i,j);
                        $(`.s_floor${i}_room_type${j}.${allotment_type}`).show(300);
                        // s_floor66_room_type5
                    }
                }
            }
        }

        $(document).on('click', '.shortcutPrint', function() {
            window.open(`/frontdesk/dashboard-shortcut?type=1&room_id=${room_id_track}`, '_blank');
            swal.clickConfirm();
        });
        $(document).on('click', '.shortcutPrintOnlyRoom', function() {
            window.open(`/frontdesk/dashboard-shortcut?type=5&room_id=${room_id_track}`, '_blank');
            swal.clickConfirm();
        });
        $(document).on('click', '.shortcutEdit', function() {
            window.open(`/frontdesk/dashboard-shortcut?type=2&room_id=${room_id_track}`, '_blank');
            swal.clickConfirm();
        });
        $(document).on('click', '.shortcutReceipt', function() {
            window.open(`/frontdesk/dashboard-shortcut?type=3&room_id=${room_id_track}`, '_blank');
            swal.clickConfirm();
        });
        $(document).on('click', '.shortcutDayadjust', function() {
            window.open(`/frontdesk/dashboard-shortcut?type=4&room_id=${room_id_track}`, '_blank');
            swal.clickConfirm();
        });

        function showShortcutButtons(room_number="",room_id=null){
            room_id_track = room_id;
            Swal.fire({
                title: `Room Number: ${room_number}`,
                html: `<button type="button" role="button" tabindex="0" class="shortcutPrint btn btn-sm btn-primary mx-1 customSwalBtn">Print</button>
                    <button type="button" role="button" tabindex="0" class="shortcutPrintOnlyRoom btn btn-sm btn-dark mx-1 customSwalBtn">Print (${room_number})</button>
                    <button type="button" role="button" tabindex="0" class="shortcutEdit btn btn-sm btn-danger mx-1 customSwalBtn ${@json(!checkAuthPermission('frontdesk.checkin.edit')) ? 'd-none' : '' } ">Edit</button>
                    <button type="button" role="button" tabindex="0" class="shortcutReceipt btn btn-sm btn-success mx-1 customSwalBtn">Receive</button>
                    <button type="button" role="button" tabindex="0" class="shortcutDayadjust btn btn-sm btn-info mx-1 customSwalBtn">Day adjust</button>`,
                showCancelButton: false,
                showConfirmButton: false
            }).then((result) => {
               console.log(result);
            });
        }
        function createButton(text, cb) {
            return $('<button class="btn btn-sm btn-primary mx-1">' + text + '</button>').on('click', cb);
        }
        function blockUnblockRoom(room_id){
            getLoadingStatusNew();
            customAjaxCall(function(res){
                sweet_success(function(){
                    getSummary();
                    closeSweetAlert();
                }, 'success', res.message);
            }, 'POST',"{{route('frontdesk.frontdesk.room.block_unblock')}}",{room_id});
        }

        $('#room_floor_filter_options_button').click(function () {
            $('#room_floor_filter_options_div').toggle();
            $('#room_floor_filter_options_button').toggleClass('btn-primary btn-danger').text($('#room_floor_filter_options_div').is(':visible') ? '{{ __('obs.hide_filter_options') }}' : '{{ __('obs.show_filter_options') }}');
        });
        function toggleBedInfo(){
            const $box = $('.bed_info');
            let isShown = $box.is(':visible');
            if(isShown){
                $('.for_padding_only').addClass('d-block').removeClass('d-none');
            } else {
                $('.for_padding_only').addClass('d-none').removeClass('d-block');
            }
            $box.toggle();
        }
    </script>

@endsection