@extends('frontdesk.layouts.master_fullwidth')

@section('custom_style')

    <style>
        select{
            box-shadow: inset -1px 4px 10px 0px rgb(212 212 212);
            height: 28px !important;
            font-size: 14px !important;
        }
    </style>

@endsection
@section('content')

<div class="col-lg-12">
    <div class="row">
        @include("frontdesk.share.fd_booking_rightside_quick_access")
    </div>
    <div class="row" style="margin-top: 10px;">
        {{-- <div class="col-1" ></div> --}}
        <div class="col-12" style="margin-top: 10px">
            <input type="hidden" id="agent_id" value="{{$type}}">
            {{-- <div class="col-md-4 offset-md-4 mt-2">
                @if ($message = Session::get('success'))
                    <div class="alert alert-success alert-block text-center mt-2">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                @endif

                @if ($message = Session::get('danger'))
                    <div class="alert alert-danger alert-block text-center mt-2">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                @endif
            </div> --}}
            <form action="{{route('frontdesk.change.room.post')}}" method="post" id="form_booking">
                <input type="hidden" id="resv_type" name="resv_type" value="{{$type}}">
                <div class="card" style="margin: 0;padding: 0">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            Change @if($type == 1) Room @else Bed @endif/ Rent
                        </h5>
                    </div>
                    <div class="card-body">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="">Check In No</label>
                                    <select name="booking_id" class="form-control search-checkin checkin_no">
                                        <option value="">Select Check In No</option>
                                        @foreach ($checkins as $chin)
                                            <option value="{{$chin->id}}">{{$chin->checkin_code}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- <div class="col-md-4">
                                    <label for="">@if($type==1)Room @else Bed @endif No</label>
                                    <select name="from_room" class="form-control room_bed_no room_no">
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="">Avaiable Room @if($type!=1)/Bed @endif</label>
                                    <select name="to_room" class="form-control available_room">
                                    </select>
                                </div>

                                <div class="col-md-4 pt-3">
                                    <label for="">Maintainance Required</label>
                                    <select name="maintanance" class="form-control is_maintanance">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    <input type="text" name="maintainance_reason" class="maintainance_reason form-control mt-2" style="display: none;" placeholder="Write Reason">
                                </div>

                                <div class="col-md-4 pt-3">
                                    <label for="">Remarks</label>
                                    <textarea class="form-control" name="remarks" cols="30" rows="3"></textarea>
                                </div> --}}
                                {{-- <div class="col-md-2 pt-3">
                                    <label for="">&nbsp;</label><br>
                                    <button class="btn btn-success btn-sm px-5">Change</button>
                                </div> --}}
                            </div>

                    </div>
                </div>

                <div class="card mt-2">
                    <div class="card-header">
                        <h6>Check In Information</h6>
                    </div>
                    <div class="card-body data_load_spiner py-5" style="display: none;">
                        <div class="spinner-border" role="status" style="margin: 0 50%;">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <div class="card-body checkinallinfo" style="display: none;">
                        <div class="row d-flex justify-content-between">
                            <div class='col-md-5'>
                                <div class="form-group">
                                    <div>
                                        @foreach(getTaxes(array(1)) as $val)
                                            <input disabled onclick="alert('VAT is not changeable when room/bed change'); return false" class="vat_taxes" name="vat_taxes[]" value="{{$val->id}}" class="fd_vat_list" type="checkbox"  /> {{$val->name}}
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex justify-content-between">
                            <div class='col-md-3'>
                                <div class="form-group">
                                    <input name="fd_vat_type" class="fd_vat_type_inc" onclick="alert('VAT type is not changeable when room/bed'); return false" type="radio" value="1" /> Including
                                    <input name="fd_vat_type" class="fd_vat_type_exc" onclick="alert('VAT type is not changeable when room/bed'); return false" type="radio" value="2" /> Excluding
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-warning btn-sm rate_change_request" type="button" data-toggle="tooltip" data-placement="top" title="Will Be Added In Rate Change Log">Change Rent</button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Room/Bed</th>
                                            <th nowrap>From Date</th>
                                            <th>Total Night</th>
                                            <th nowrap>To Date</th>
                                            <th>Room Type</th>
                                            <th>New Room/Bed</th>
                                            <th>Pre. Rent</th>
                                            <th>Cur. Rent</th>
                                            <th>Maintanance</th>
                                            <th>Reason</th>
                                        </tr>
                                    </thead>
                                    <tbody class="all_rooms tbody_multi_row">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="">Remarks</label>
                                <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="form-group">
                                <button class="btn btn-success btn-block btn-sm">Change</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        {{-- <div class="col-1" style="margin: 0;padding: 0">@include('frontdesk.change_room_bed.bill')</div> --}}
    </div>
</div>
<script src="{{ asset('/') }}frontdesk/booking/fd_booking.js"></script>
@endsection

@section('script')

<script>
    $(".search-checkin").select2();

    $(document).ready(function(){

        var today = new Date();
        var cur_date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();

        $('.checkin_no').change(function(){
            $('.data_load_spiner').show();
            $('.checkinallinfo').hide();
            $('.room_no').html('<option disabled value="">Loading...</option>');
            var id = $(this).val();
            var type = $('#resv_type').val();

            var method="GET";
            var url="/frontdesk/ajax/get_checkin_details";
            var data={id:id,type:type};
            ajaxCustom(function (res) {
                $('#agent_id').val(res.booking_info.agent_id);
                console.log('tax_type',res.booking_info.tax_type);
                // var tax_type = ()?'.fd_vat_type_inc':'.fd_vat_type_exc';
                // $(tax_type).attr('checked',true).siblings().attr('checked',false);
                if(res.booking_info.tax_type == 1){
                    $('.fd_vat_type_inc').prop('checked',true);
                    $('.fd_vat_type_exc').prop('checked',false);
                }else{
                    $('.fd_vat_type_inc').prop('checked',false);
                    $('.fd_vat_type_exc').prop('checked',true);
                }
                $('.vat_taxes').val(res.vat_tax);
                var room_details_info = '';

                $.each(res.room_details, function(key, val){
                    var room_bed = '';
                    var room_bed_rent = (res.booking_info.tax_type == 2 ? val.rent : (parseFloat(val.rent)+parseFloat(val.vat)));
                    //when resv type is bed
                    console.log("type", res.booking_info.tax_type);
                    if(val.bed_id != 0){
                        room_bed = `<input type="text" class="form-control input_shadow" readonly name="pre_room[]" value="${val.get_bed_info.room_number} [${val.get_room_info.room_number}]"> `;
                    }
                    //when resv type is room
                    else{
                         room_bed = `<input type="text" class="form-control input_shadow" readonly name="pre_room[]" value="${val.get_room_info.room_number}">`;
                    }

                    room_details_info += `<tr data-id="${key}">
                        <td>${room_bed}
                            <input type="hidden" name="chk_row_id[]" value="${val.id}">
                        </td>
                        <td nowrap>${getFormatedDate(val.start_date_time)}</td>
                        <td>${val.qty}</td>
                        <td nowrap>${getFormatedDate(val.end_date_time,1)}
                            <input type="hidden" value="${cur_date}" class="b-from-date-${key}">
                        </td>
                        <td style="min-width: 100px">
                            <select data-id="${key}" onchange="keyUpResvRoomCate(this)" data-room-type="${val.room_type}" name="room_type[]" class="form-control resv_ch_room_type all_cur_room_type input_shadow b-room-types-${key}">
                                @foreach (getRoomTypes() as $rt)
                                    <option value="{{$rt->id}}">{{$rt->name}}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select class="form-control avl_rooms_${key}" name="new_room_number[]">
                            </select>
                        </td>
                        <td>
                            <input type="text" class="form-control pre-b-rent-${key}" name="old_rent[]" readonly value="${parseFloat(room_bed_rent).toFixed(2)}">
                        </td>
                        <td>
                            <input type="text" name="new_rent[]" class="form-control all_b_rent b-rent-${key}" readonly value="${parseFloat(room_bed_rent).toFixed(2)}">
                            <input type="hidden" name="new_o_rent[]" class="form-control o_b-rent-${key}" readonly value="${parseFloat(room_bed_rent).toFixed(2)}">
                        </td>
                        <td>
                            <select class="form-control input_shadow" name="maintanance[]">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </td>
                        <td><input type="text" class="form-control rd_remarks_${key}" name="reason[]"></td>
                    </tr>`;
                    getAvailableRoom(key,val.room_type,type);
                });

                $('.all_rooms').html(room_details_info);
                allCurRoomTypeSet();
                $('.data_load_spiner').hide();
                $('.checkinallinfo').show();
            },method,url,data);
        });

        // $('.room_no').change(function(){
        //     var id = $(this).val();
        //     var type = {{$type}};
        //     var method="GET";
        //     var url="/frontdesk/ajax/get_available_room/for_change";
        //     var data={id:id,type:type};
        //     ajaxCustom(function (res) {
        //         console.log(res);
        //         var list = '<option value="">Select New</option>';
        //         $.each(res, function(key, val){
        //             if(val.room_id != 0){
        //                 // var bed_info = val.get_bed_info.room_number;
        //                 list += '<option value="'+val.id+'">'+val.room_number +' (Room No: '+val.room.room_number+' - '+val.room_type.name+')'+'</option>';
        //             }
        //             else{
        //                 // bed_info = '';
        //                 list += '<option value="'+val.id+'">'+val.room_number +' ('+val.room_type.name+')'+'</option>';
        //             }

        //         });
        //         $('.available_room').html(list);
        //     },method,url,data);
        // });

        // console.log('agent', agent_id);
        // console.log('from_date', from_date);
        // console.log('to_date', to_date);
        // console.log('room type', room_type);
        // console.log('resv type', resv_type);

        $(document).on('change','.resv_ch_room_type', function(){
            var row_id = $(this).closest('tr').attr('data-id');
            // console.log('row id',row_id);
            var room_type = $(this).val();
            var type = $('#resv_type').val();
            console.log('room',row_id);
            getAvailableRoom(row_id,room_type,type);
        });

        $(document).ready(function(){
            $('.rate_change_request').click(function(){
                $('.all_b_rent').attr('readonly',false);
            });

            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        });


        $('.is_maintanance').change(function(){
            var is_maintanance = $('.is_maintanance').val();
            if(is_maintanance == 1){
                $('.maintainance_reason').show();
            }else{
                $('.maintainance_reason').hide();
            }
        });
    });


    function getFormatedDate(str,addDay = 0){

        var return_str = str.split(" ")[0].split('-');
        if(addDay == 0){
            return return_str[2]+'-'+return_str[1]+'-'+return_str[0];
        }else{
            let date = new Date(str.split(" ")[0]);
            // console.log('new_date', date);
            date.setDate(date.getDate() + addDay);
            return date.getDate() +'-' + (date.getMonth()+1) + '-' + date.getFullYear();
        }

    }

    function allCurRoomTypeSet(){
        $('.all_cur_room_type').each(function(){
            $(this).val($(this).attr('data-room-type'));
        })
    }

    function getAvailableRoom(row_id,room_type,type){
        $('.avl_rooms_'+row_id).html('<option value="" selected >Loading...</option>');
        var method = 'get';
        var url = '/frontdesk/ajax/get_available_room';
        var data = {room_type:room_type,type:type};
        var available_rooms = '<option value="">Current Room</option>';
        ajaxCustom(function(res){
            console.log(res);
            $.each(res, function(key,val){
                available_rooms += '<option value="'+val.id+'">'+val.room_number+'</option>';
            });
            $('.avl_rooms_'+row_id).html(available_rooms);
        },method, url, data);
    }
</script>

@endsection