@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;
        }
        table th{
            padding: 0!important;
            vertical-align: middle!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-12" style="margin-top: 10px">
            <input type="hidden" id="agent_id" value="{{$type}}">
            <form action="{{route('frontdesk.add_room.store')}}" 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">
                            Add @if($type == 1) Room @else Bed @endif
                        </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>
                    </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 fd_vat_list vat_taxes{{$val->id}}" name="vat_taxes[]" value="{{$val->id}}" 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'); return false" type="radio" value="1" /> Including
                                    <input name="fd_vat_type" class="fd_vat_type_exc" onclick="alert('VAT type is not changeable'); 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 class="bg-dark">
                                            <th class="text-center text-light">Room Type</th>
                                            <th class="text-center text-light">Room/Bed</th>
                                            <th class="text-center text-light">Voucher No</th>
                                            <th class="text-center text-light" nowrap>From Date</th>
                                            <th class="text-center text-light">T.Night</th>
                                            <th class="text-center text-light" nowrap>To Date</th>
                                            <th class="text-center text-light">Rent</th>
                                            <th class="text-center text-light">Total</th>
                                            <th class="text-center text-light">Remarks</th>
                                            <th class="text-center text-light bg-white">
                                                <button type="button" onclick="addRow()" class="btn btn-info btn-sm"><span class="fa fa-plus-circle"></span><span class="btn_mRow_text"></span></button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="all_rooms tbody_multi_row">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="form-group">
                                <button class="btn btn-success btn-block btn-sm">Add-Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="room_type_options d-none">
    @foreach ($room_types as $rt)
        <option value="{{ $rt->id }}">{{ $rt->name }}</option>
    @endforeach
</div>
<script src="{{ asset('/') }}frontdesk/booking/fd_booking.js"></script>
@endsection

@section('script')

<script>
    $(".search-checkin").select2();
    row = 0;
    room_type = $('.room_type_options').html();
    function addRow(){
        row ++;

        insert_row =
        `<tr data-id="${row}" class="tr-${row}">
            <td style="min-width: 100px">
                <select readonly data-id="${row}" name="room_type[${row}]" class="form-control input_shadow select_2 resv_ch_room_type b-room-types-${row}">
                    ${room_type}
                </select>
            </td>
            <td style="min-width: 100px">
                <select name="room_no[${row}]" data-id="${row}" class="form-control input_shadow select_2 add-room-no-${row}">
                </select>
            </td>
            <td><input data-id="${row}" name="vou[${row}]" class="form-control input_shadow vou-${row}"/></td>
            <td>
                <input type="hidden" data-id="${row}" value="1" name="room_qty[${row}]" class="form-control input_shadow b-qty-${row}" />
                <input data-id="${row}" name="from_date[${row}]" value="{{ date('d-m-Y') }}" onchange="keyUpResvNight(this)" class="form-control bs_datepicker input_shadow b-from-date-${row}"/>
            </td>
            <td width="5%"><input onkeyup="keyUpResvNight(this)" value="1" onfocus="this.select()" data-id="${row}" name="room_night[${row}]" class="form-control input_shadow b-night-${row}"/></td>
            <td><input data-id="${row}" name="to_date[${row}]" class="form-control input_shadow b-to-date-${row}" readonly /></td>
            <td width="8%"><input data-id="${row}" name="rent[${row}]" onkeyup="calTotalOnRateChange(this)" class="form-control input_shadow all_b_rent b-rent-${row}"/>
                <input type="hidden" data-id="${row}" name="o_rent[${row}]" class="form-control input_shadow o_b-rent-${row}"/>
            </td>
            <td width="8%"><input data-id="${row}" name="total_rent[${row}]" class="form-control input_shadow b-rent-total-${row}" readonly /></td>
            <td><input class="form-control input_shadow rd_remarks_${row} all_rd_remarks" name="rd_remarks[${row}]"></td>
            <td><button type="button" onclick="rowDelete(${row})" class="btn btn-sm btn-danger"><span class="fa fa-minus-circle"></span><span class="btn_mRow_text"></span></button></td>
        </tr>`;
        $('.tbody_multi_row').append(insert_row);
        flatpickr('.bs_datepicker',{
            dateFormat: 'd-m-Y',//'YYYY-MM-DD',
        });
        $('.select_2').select2();
        $(`.b-room-types-${row}`).trigger('change');
        ++row;
    }

    $(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);
                $('.vat_taxes').each(function(){
                    $(this).prop('checked', false);
                });
                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);
                }


                $.each(res.vat_tax, function(key,val){
                    console.log(parseInt(val), 'ere');
                    $(`.vat_taxes${parseInt(val)}`).prop('checked', true);
                });

                var room_details_info = '';

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

        $(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();
            getAvailableRoom(row_id,room_type,type);
            keyUpResvRoomCate(this);
        });

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

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

        function rowDelete(delete_id){
            if(confirm("Are You Really Want To Remove?")){
                $(".tr-" + delete_id).remove();
                console.log("delete called");
                calResvAmount();
            }
        }
    });


    // 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 getAvailableRoom(row_id,room_type,type){
        $('.add-room-no-'+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=""></option>';
        ajaxCustom(function(res){
            console.log(res);
            $.each(res, function(key,val){
                available_rooms += '<option value="'+val.id+'">'+val.room_number+'</option>';
            });
            $('.add-room-no-'+row_id).html(available_rooms);
        },method, url, data);
    }
</script>

@endsection