@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: 12.5%;
        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: 10px 4px;
        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;
    }
    .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;
    }
</style>

@endsection

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

    @include('frontdesk.dashboard.summary')
    @include('frontdesk.dashboard.rooms')
    {{-- @include('frontdesk.dashboard.beds') --}}




    <button class="btn w20px btn-success text-white show_added_room" style="position: fixed;top: 50%;right: 0; display: none; z-index: 9999;"><i class="fas fa-hotel"></i><span class="added_room_count"></span></button>
    {{-- <div class="card added_room_bed_list_div w-30%">
        <div class="card-header">
            <h5>Added Room/Bed</h5>
        </div>
        <div class="card-body">


            </form>
        </div>
    </div> --}}

    <!-- Modal -->

    @include('frontdesk.dashboard.added_modal')
@endsection

@section('script')

    <script>
        var collaction_of_rooms = [];
        $(document).ready(function(){

            $(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');
                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');

                if(add_or_remove == 1){
                    collaction_of_rooms.push({'id':id,'room_number':room_number});
                }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><td>${key+1}</td><td><input type="hidden" name="room_id[]" value="${val.id}"><input class="form-control input_shadow" value="${val.room_number}" disabled></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>`;
                });
                $('.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(){
                $('#addedRoomModal').modal('show');
                console.log(collaction_of_rooms);
            });

            $(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
                });
                console.log(collaction_of_rooms);

                collaction_of_rooms_html = '';

                collaction_of_rooms.map(function(val,key){
                    collaction_of_rooms_html += `<tr><td>${key+1}</td><td><input type="hidden" name="room_id[]" value="${val.id}"><input class="form-control input_shadow" value="${val.room_number}" disabled></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>`;
                });

                $('.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();
                    $('#addedRoomModal').modal('hide');
                }else{
                    $('.added_room_count').text(collaction_of_rooms.length);
                    $('.show_added_room').show();
                }
            }

            $(document).on('click','.room_bed_ready_accept',function(){
                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();
                    // }
                },'get', route,data);
            });
        });

        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');
            });
        }

    </script>

@endsection