{{-- @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;
        }
        table th{
            padding: 0!important;
            vertical-align: middle!important;
        }
        #guest_all_info th,#guest_all_info td{
            padding: 0 0.1rem;
        }
        #guest_all_info tr{
            border-bottom: 2px solid #000;
        } */

    </style>

@endsection
@section('content')

<div class="col-lg-12">
    @if(get_guard() == 'admin')
        <div class="row">
            @include("frontdesk.share.fd_booking_rightside_quick_access")
        </div>
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card sina-card" style="margin: 0;padding: 0">
                <div class="card-header" id="headingOne">
                    <h4 class="mb-0">
                        {{__('obs.guest_management')}}
                    </h4>
                </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 fd_checkin_no_search" onchange="loadAgents()" {{ get_guard() == 'party'? 'disabled' : '' }}>
                                @if($booking)
                                    <option value="{{ $booking->id }}">{{ $booking->resv_code }}</option>
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mt-2">
                        <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">
                                <div class="col-12 rounded-2" style="max-height: calc(100vh - 320px);" id="guest_all_info">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('frontdesk.common.common')
@endsection

@section('script')

<script>
    $(".search-checkin").select2();
    let guard = @json(get_guard());
    let row = 0;
    let room_beds = '';
    $(document).ready(function(){
        loadAgents();
        $('.select_2').select2();
    });

    function loadAgents(){
        var id = $('.checkin_no').val();
        if(!id){
            return false;
        }
        $('.data_load_spiner').show();
        $('.checkinallinfo').hide();
        $('.room_no').html('<option disabled value="">Loading...</option>');
        var type = $('#resv_type').val();

        var method="GET";
        var url=guard == "admin" ? "/frontdesk/ajax/get_guest_info" : '/agent/frontdesk/guest/get_guest_info';
        var data={id:id};
        ajaxCustom(function (res) {
            $('#guest_all_info').html(res.html);
            $('.data_load_spiner').hide();
            $('.checkinallinfo').show();
            $('.select_2').select2();
            remote_select('country', "{{ route('frontdesk.country_live_search') }}", true, "Select Country");
            flatpickr('.date_picker', {
                enableTime: false,
                dateFormat: 'd-m-Y', //'YYYY-MM-DD',
                disableMobile: "true"
            });
            flatpickr('.date_time_picker', {
                enableTime: true,
                dateFormat: 'd-m-Y H:i', //'YYYY-MM-DD',
                disableMobile: "true"
            });
            room_beds = res.room_beds;
            row = res.row;
            $('#booking_id').val(res.booking_id);
        },method,url,data);
    }

    function storeCallback(){
        // alert("dp");
    }

    // function funcCall(){
    //     console.log("0000000000000");
    //     $('.checkin_no').trigger('change');
    // }

    function addRow(){
        let booking_id = $('.checkin_no').val();

        console.log(booking_id);
        let html = `<tr>
            <td>
                <form action="{{ get_guard() == 'admin' ? route('frontdesk.guest_info_update.store') : route('frontdesk_agent.frontdesk.guest.store') }}" method="post" class="form_submit">
                    <div class="row g-2">
                        <div class="col-11">
                            <div class="row">
                                <div class="col-lg-4">
                                    <table class="table cl-table table-bordered">
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.name')}} <span class="required_field"></span></label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="name" value="" class="form-control input_shadow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="hidden" name="row_id" value="">
                                                <input type="hidden" name="booking_id" value="${booking_id}">
                                                <label class="cl-form-label">{{ __('obs.room') }}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <select name="room" class="append_all_room select_2 form-control input_shadow">
                                                        ${room_beds}
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.voucher')}} {{__('obs.no')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input value="" name="voucher_no" class="form-control input_shadow" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.email')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="email" value="" class="form-control input_shadow" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.mobile')}} {{__('obs.no')}} <span class="required_field"></span></label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input value="" name="mobile_no" class="form-control input_shadow" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.checkin_date_time')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input value="" name="checkin_date_time" class="form-control input_shadow date_time_picker" />
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-lg-4">
                                    <table class="table cl-table table-bordered">
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.company')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="guest_company_name" value="" class="form-control input_shadow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.country')}}<span class="required_field"></span></label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <select style="width: 100%;" name="country_id" class="form-control select_2 input_shadow">
                                                        @foreach (getCountries() as $country)
                                                            <option value="{{$country->id}}">{{$country->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.identity')}} {{__('obs.type')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <select name="indentity_type" class="form-control input_shadow select_2">
                                                        @foreach (getFdIndentities() as $identitie)
                                                            <option value="{{$identitie->id}}">{{$identitie->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.identity')}} {{__('obs.no')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="identity_no" value="" class="form-control input_shadow" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.date_of_issue')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="identity_date_of_issue" value="" class="form-control input_shadow date_picker">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.date_of_expiry')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="identity_date_of_expiry" value="" class="form-control input_shadow date_picker">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.version')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="version" value="" class="form-control input_shadow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.checkout_date_time')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input value="" name="checkout_date_time" class="form-control input_shadow date_time_picker" />
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-lg-4">
                                    <table class="table cl-table table-bordered">
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.tax_no')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="guest_tax_no" value="" class="form-control input_shadow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.place_of_issue')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="identity_place_of_issue" value="" class="form-control input_shadow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.date_of_birth')}}<span class="required_field"></span></label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <input name="identity_date_of_birth" value="" class="form-control input_shadow date_picker">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.purpose_of_visit')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <select name="purpose_of_visit" class="form-control select_2">
                                                        @foreach(getResvPurposeOfVisit() as $key=>$p)
                                                            <option value="{{ $p->id }}">{{ $p->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.address')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <textarea name="address" class="form-control"></textarea>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label class="cl-form-label">{{__('obs.remarks')}}</label>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <textarea name="remarks" class="form-control"></textarea>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-1 d-flex align-items-center justify-content-end">
                            <button type="button" onclick="addRow()" class="btn btn-sm btn-success">{{__('obs.add')}}</button>
                            <button class="btn btn-sm btn-primary">{{__('obs.Save')}}</button>
                        </div>
                    </div>
                </form>
            </td>
        </tr>`;
        $('#guest_all_info_body').append(html);
        $('.select_2').select2();
        remote_select('country', "{{ route('frontdesk.country_live_search') }}", true, "Select Country");
        flatpickr('.date_time_picker', {
            enableTime: true,
            dateFormat: 'd-m-Y H:i', //'YYYY-MM-DD',
            disableMobile: "true"
        });
        flatpickr('.date_picker', {
            enableTime: false,
            dateFormat: 'd-m-Y', //'YYYY-MM-DD',
        });
    }

    function removeRow(row){
        $(`#tr_${row}`).remove();
    }
</script>

@endsection