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

@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">
        {{-- <div class="col-1" ></div> --}}
        <div class="col-12">
            <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 sina-card">
                    <div class="card-header py-1" id="headingOne">
                        <h5 class="mb-0">
                            @if($type == 1)
                                {{__('obs.change_room_rent')}}
                            @else
                                {{__('obs.change_bed_rent')}}
                            @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 value="{{$chin->id}}">{{$chin->checkin_code}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sina-card mt-2">
                    <div class="card-header">
                        <h6>{{__('obs.checkin_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" 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" /> {{__('obs.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" /> {{__('obs.excluding')}}
                                </div>
                            </div>
                            <div class="col-md-2 mb-1">
                                <button class="btn btn-primary 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>

                        <div class="row">
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{{__('obs.room')}}/{{__('obs.bed')}}</th>
                                            <th nowrap>{{__('obs.from')}} {{__('obs.date')}}</th>
                                            <th>{{__('obs.total')}} {{__('obs.night')}}</th>
                                            <th nowrap>{{__('obs.to')}} {{__('obs.date')}}</th>
                                            <th>{{__('obs.room')}} {{__('obs.type')}}</th>
                                            <th>{{__('obs.new')}} {{__('obs.room')}}/{{__('obs.bed')}}</th>
                                            <th>{{__('obs.previous')}} {{__('obs.rent')}}</th>
                                            <th>{{__('obs.current')}} {{__('obs.rent')}}</th>
                                            <th>{{__('obs.maintanance')}}</th>
                                            <th>{{__('obs.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="">{{__('obs.remarks')}}</label>
                                <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group my-2 text-center">
                                <button class="btn btn-primary btn-block btn-sm">{{__('obs.change')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{{ asset('/') }}frontdesk/booking/fd_booking.js{{ getJsVersion() }}"></script>
@endsection

@section('script')

<script>
    $(".search-checkin").select2();
    let master_resv_type = @json($type);
    $(document).ready(function(){

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

        $('.checkin_no').change(function(){
            force_no_rate_change = 1;
            $('.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 = '';
                let current_hotel_id = null;
                $.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(res.booking_info.is_other_hotel_checkin == 1){
                        room_bed = `<input type="text" class="form-control input_shadow" readonly name="pre_room[]" value="${val.manual_room_no}">`;
                        room_bed += `<input type="hidden" class="form-control input_shadow" readonly name="pre_room_id[]" value="${val.purchase_info.id}">`;
                    }else{
                        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}]"> `;
                            room_bed += `<input type="hidden" class="form-control input_shadow" readonly name="pre_room_id[]" value="${val.get_bed_info.id}">`;
                        }else{ //when resv type is room
                            room_bed = `<input type="text" class="form-control input_shadow" readonly name="pre_room[]" value="${val.get_room_info.room_number}">`;
                            room_bed += `<input type="hidden" class="form-control input_shadow" readonly name="pre_room_id[]" value="${val.get_room_info.id}">`;
                        }
                    }
                    if(res.booking_info.is_other_hotel_checkin == 1){
                        if(current_hotel_id != val.purchase_info.oh_id){
                            room_details_info += `<tr>
                                <th class="text-center" colspan="10">${val.purchase_info.get_hotel.name ?? ""}</th>
                            </tr>`;
                            current_hotel_id = val.purchase_info.oh_id;
                        }
                    }
                    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>`;
                    if(res.booking_info.is_other_hotel_checkin == 1){
                        let other_hotels = '';
                        $.each(res.other_hotels, function(hkey, hval){
                            other_hotels += `<option ${hval.id == val.purchase_info.oh_id ? 'selected' : ''} value="${hval.id}">${hval.name}</option>`;
                        })
                        room_details_info += `<td>
                            <select class="form-control select_2" id="hotel_id${key}" onchange="hotelChange(${key})">
                                ${other_hotels}
                            </select>
                        </td>`;
                    }else{
                        room_details_info += `<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>`;
                    }
                    room_details_info += `<td>
                            <select class="form-control avl_rooms_${key}" name="new_room_number[]" onchange="roomNumberChange(this,${key})">
                                <option value="" >Loading...</option>
                            </select>
                            <input type="hidden" id="parent_room_id_${key}" name="parent_room_id[]" value="">
                        </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>`;
                    // if(res.booking_info.is_other_hotel_checkin == 0){
                    getAvailableRoom(key,val.room_type,type,res.booking_info.is_other_hotel_checkin == 1 ? val.purchase_info.oh_id : null);
                    // }
                });

                $('.all_rooms').html(room_details_info);
                allCurRoomTypeSet();
                $('.data_load_spiner').hide();
                $('.checkinallinfo').show();
            },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();
            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,hotel_id = null){
        $('.avl_rooms_'+row_id).html('<option value="" selected >Loading...</option>');
        var method = 'get';
        var url = '/frontdesk/ajax/get_available_room';
        var data = hotel_id ? {hotel_id} : {room_type:room_type,type:type};
        var available_rooms = '<option value="">Current Room</option>';
        ajaxCustom(function(res){
            console.log(res);
            if(hotel_id){
                $.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>`
                });
            } else{
                $.each(res, function(key,val){
                    if(master_resv_type == 1){
                        available_rooms += '<option value="'+val.id+'">'+val.room_number+'</option>';
                    } else{
                        let parent_room_info = val.get_bed_plannings_one ? (val.get_bed_plannings_one.get_room) : val.room;
                        available_rooms += `<option value="${val.id}" data-parent_room_id="${parent_room_info.id}">${val.room_number} [${parent_room_info.room_number}]</option>`;
                    }
                });
            }
            $('.avl_rooms_'+row_id).html(available_rooms);
        },method, url, data);
    }
    function hotelChange(key){
        let hotel_id = $(`#hotel_id${key}`).val();
        getAvailableRoom(key,0,1,hotel_id);
    }
    function roomNumberChange(el,id){
        if(master_resv_type == 2){
            let parent_room_id = $(el).children('option:selected').attr('data-parent_room_id');
            $(`#parent_room_id_${id}`).val(parent_room_id);
        }
    }
</script>

@endsection