{{-- @extends('frontdesk.layouts.master_fullwidth') --}}
@extends('admin.layout.master')

@section('content')

<div class="col-lg-12">
    <div class="row">
        @include("frontdesk.share.fd_booking_rightside_quick_access")
    </div>
    <div class="row">
        <div class="col-12">
            <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 sina-card" style="">
                    <div class="card-header py-1" id="headingOne">
                        <h5 class="mb-0">
                            @if($type == 1)
                                {{__('obs.add_room')}}
                            @else
                                {{__('obs.add_bed')}}
                            @endif
                        </h5>
                    </div>
                    <div class="card-body">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">{{__('obs.checkin_no')}}</label>
                                <select name="booking_id" class="form-control search-checkin checkin_no">
                                    <option value="">{{__('obs.select_checkin_no')}}</option>
                                    @foreach ($checkins as $chin)
                                        <option data-is-other-hotel-checkin="{{ $chin->is_other_hotel_checkin }}" 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">{{__('obs.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" /> {{__('obs.including')}}
                                    <input name="fd_vat_type" class="fd_vat_type_exc" onclick="alert('VAT type is not changeable'); return false" type="radio" value="2" /> {{__('obs.excluding')}}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary mb-2 btn-sm rate_change_request" type="button" data-toggle="tooltip" data-placement="top" title="Will Be Added In Rate Change Log">{{__('obs.change_rent')}}</button>
                            </div>
                        </div>

                        @include('frontdesk.common.common_room_details_info')

                        <div class="row">
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="bg-dark">
                                            <th class="text-center text-light other_hotel">{{__('obs.hotel')}}</th>
                                            <th class="text-center text-light">{{__('obs.room_type')}}</th>
                                            <th class="text-center text-light purchase_ref">{{__('obs.purchase_ref')}}</th>
                                            <th class="text-center text-light">{{__('obs.room')}}/{{__('obs.bed')}}</th>
                                            <th class="text-center text-light">{{__('obs.voucher')}}</th>
                                            {{-- <th class="text-center text-light" nowrap>{{__('obs.from')}}</th> --}}
                                            <th class="text-center text-light">{{__('obs.total_night')}}</th>
                                            <th class="text-center text-light" nowrap>{{__('obs.to')}}</th>
                                            <th class="text-center text-light">{{__('obs.rent')}}</th>
                                            <th class="text-center text-light">{{__('obs.total')}}</th>
                                            <th class="text-center text-light">{{__('obs.add_remarks')}}</th>
                                            <th class="text-center text-light bg-white">
                                                <button type="button" onclick="addRow()" class="btn btn-primary 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-12">
                            <div class="form-group text-center">
                                <button class="btn btn-primary btn-block btn-sm new_common_submit_button">{{__('obs.add')}}</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>
<div class="other_hotels_options d-none">
    <option>Select Hotel</option> {{-- To trigger chnage event --}}
    @foreach ($other_hotels as $rt)
        <option value="{{ $rt->id }}">{{ $rt->name }}</option>
    @endforeach
</div>
<script src="{{ asset('/') }}frontdesk/booking/fd_booking.js{{ getJsVersion() }}"></script>
@endsection

@section('script')

<script>
    $(".search-checkin").select2();
    row = 0;
    room_type = $('.room_type_options').html();
    let other_hotels = $('.other_hotels_options').html();
    function addRow(){
        let is_other_hotel_checkin = $('.checkin_no').find(':selected').data('is-other-hotel-checkin');
        let other_hotel_html = '';
        let purchase_ref = '';
        row ++;
        if(is_other_hotel_checkin == 1){
            $('.other_hotel').show();
            $('.purchase_ref').show();
            other_hotel_html = `<td style="min-width: 100px">
                <div class="d-flex">
                    <select readonly data-id="${row}" name="" class="form-control input_shadow select_2 resv_ch_room_type" id="other_hotel_id_${row}">
                        ${other_hotels}
                    </select>
                </div>
            </td>`;
            purchase_ref = `<td style="min-width: 100px">
                <div class="d-flex">
                    <select readonly data-id="${row}" name="purchase_details_id[${row}]" class="form-control input_shadow select_2" id="purchase_details_id_${row}">
                    </select>
                </div>
            </td>`;
        } else{
            $('.other_hotel').hide();
            $('.purchase_ref').hide();
        }
        insert_row =
        `<tr data-id="${row}" class="tr-${row}">
            ${other_hotel_html}
            <td style="min-width: 100px">
                <div class="d-flex">
                    <select readonly data-id="${row}" name="room_type[${row}]" id="room_type_${row}" class="form-control input_shadow select_2 resv_ch_room_type new_common_room_types${row} b-room-types-${row}">
                        ${room_type}
                    </select>
                </div>
            </td>
            ${purchase_ref}
            <td style="min-width: 100px">
                <div class="d-flex">
                    ${
                        is_other_hotel_checkin ?
                            `<input data-id="${row}" name="room_no[${row}]" class="form-control input_shadow add-room-no-${row}"/>`
                        :`<select name="room_no[${row}]" data-id="${row}" class="form-control input_shadow select_2 add-room-no-${row}">
                        </select>`
                    }
                </div>
            </td>
            <td>
                <input data-id="${row}" name="vou[${row}]" class="form-control input_shadow vou-${row}"/>
                <input type="hidden" data-id="${row}" value="1" name="room_qty[${row}]" class="form-control input_shadow b-qty-${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 type="number" data-id="${row}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Rent" 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);
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
        flatpickr('.bs_datepicker',{
            dateFormat: 'd-m-Y',//'YYYY-MM-DD',
        });
        $('.select_2').select2();
        $(`.b-room-types-${row}`).trigger('change');
        ++row;

        // <td>
        //     <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>
    }

    $(document).ready(function(){

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

        $('.checkin_no').change(function(){
            let is_other_hotel_checkin = $('.checkin_no').find(':selected').data('is-other-hotel-checkin');
            if(is_other_hotel_checkin == 1){
                force_no_rate_change = 1;
            }else{
                force_no_rate_change = 0;
            }
            $('.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('booking_info',res.booking_info);
                // 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);
                }
                // commonFromDateChange();
                $('#common_rate_code').html(`<option value="${res.booking_info.rate_code}">${res.booking_info.rate_code}</option>`);
                $('#common_season_code').val(res.booking_info.season_code);
                $('#common_package_code').val(res.booking_info.package_code);
                $.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');
            let is_other_hotel_checkin = $('.checkin_no').find(':selected').data('is-other-hotel-checkin');
            console.log('row id',row_id);
            var room_type = $(`#room_type_${row_id}`).val();
            let hotel_id = $(`#other_hotel_id_${row_id}`).val();
            var type = $('#resv_type').val();
            getAvailableRoom(row_id,room_type,type,hotel_id);
            keyUpResvRoomCate(this);
            if(is_other_hotel_checkin == 0){
            }
        });

        $(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 getAvailableRoom(row_id,room_type,type,hotel_id = null){
        let is_other_hotel_checkin = $('.checkin_no').find(':selected').data('is-other-hotel-checkin');
        if(is_other_hotel_checkin){
            $(`#purchase_details_id_${row_id}`).html('<option value="" selected >Loading...</option>');
        } else{
            $('.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};
        if(is_other_hotel_checkin){
            data.hotel_id = hotel_id;
        }
        var available_rooms = '<option value=""></option>';
        ajaxCustom(function(res){
            if(is_other_hotel_checkin == 1){
                $.each(res, function(key,val){
                    available_rooms += `<option value="${val.id}">${val.get_purchase_info.purchase_code ?? ""}/${val.get_purchase_info.get_vendor.name_eng ?? ''}</option>`
                });
                $(`#purchase_details_id_${row_id}`).html(available_rooms);
            } else{
                $.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