@extends('../layout/form-layout')

@section('form-name', 'Guests')

@section('form-area')


<form style="margin-left: 3%;" autocomplete="off" class="validate-form" id="frmdt" method="POST" action="{{ route('guest_add_edit') }}">
    @csrf

    <input type="text" id="guest_id" hidden name="guest_id" value="{{ isset($details) ? $details->id : '' }}">

    <div class="grid grid-cols-12 gap-5">
        <div class="col-span-12 ">
            <div class="grid grid-cols-12 gap-4 row-gap-6 mt-5">

                <div class="intro-y col-span-12 sm:col-span-5">

                    <div class="input-form">
                        <label class="flex flex-col sm:flex-row">First Name</label>
                        <input type="text" name="gfname" id="gfname" class="input w-full border mt-1" placeholder="" value="{{isset($details) ? $details->guestFname : '' }}" value="{{old('gfname')}}">
                    </div>

                    <div class="input-form mt-2">
                        <label class="flex flex-col sm:flex-row">Guest Email</label>
                        <input name="gemail" id="gemail" type="email" class="input w-full border flex-1" placeholder="" value="{{isset($details) ? $details->guestEmail : '' }}" value="{{old('email')}}">
                    </div>

                </div>

                <div class="intro-y col-span-12 sm:col-span-5 ">

                    <div class="input-form">
                        <label class="flex flex-col sm:flex-row">Last Name</label>
                        <input type="text" name="glname" id="glname" class="input w-full border mt-1" placeholder="" value="{{isset($details) ? $details->guestLname : '' }}" value="{{old('glname')}}">
                    </div>

                    <div class="input-form mt-2">
                        <label class="flex flex-col sm:flex-row">Guest Address</label>
                        <input name="gaddress" id="gaddress" type="input" class="input w-full border flex-1" placeholder="" value="{{isset($details) ? $details->guestAddress : '' }}" value="{{old('gaddress')}}">
                    </div>

                </div>
            </div>

            <div class="grid grid-cols-12 gap-4 row-gap-6 mt-5">

                <div class="intro-y col-span-12 sm:col-span-3">
                    <div class="input-form">
                        <label class="flex flex-col sm:flex-row">Passport / NIC No</label>
                        <input type="text" name="gpass" id="gpass" maxlength="13" minlength="1" class="input w-full border " style="" placeholder="" value="{{isset($details) ? $details->passport_id : '' }}" value="{{old('gpass')}}">
                    </div>
                </div>

                <div class="intro-y col-span-12 sm:col-span-3">
                    <div class="input-form">
                        <label class="flex flex-col sm:flex-row">Guest Contact No</label>
                        <input onkeydown="validateMobileNumber(this)" maxlength="15" name="gcontact" id="gcontact" type="input" class="input w-full border flex-1" placeholder="" value="{{isset($details) ? $details->contactNo : '' }}" value="{{old('gcontact')}}">
                        <label hidden id="phone_no_error"></label>
                    </div>
                </div>

                <div class="intro-y col-span-12 sm:col-span-3">
                    <div class="input-form">
                        <label class="flex flex-col sm:flex-row">Guest DOB</label>
                        <input type="date" id="gdob" name="gdob" class="input w-full border flex-1" value="{{isset($details) ? $details->dob : '' }}" value="{{old('gdob')}}">
                    </div>
                </div>

            </div>

         

        </div>
    </div>

    <button type="button" class="button w-20 bg-theme-9 text-white mt-3" id="savebtn">Save</button>

</form>



@endsection




@if (isset($status_info))


@section('additional-info') 
<tr>
    <th>Created By</th>
    <th style="text-align:right">{{ $status_info['created_by'] }}</th>
</tr>
<tr>
    <th>Created Date:</th>
    <th style="text-align:right">{{ $status_info['created_at'] }}</th>
</tr>
<tr>
    @if(isset($status_info['updated_by']))
    <th>Updated By:</th>
    <th style="text-align:right">{{ $status_info['updated_by'] }}</th>
    @endif
</tr>
<tr>
    @if(isset($status_info['updated_by']))
    <th>Updated Date:</th>
    <th style="text-align:right">{{ $status_info['updated_at'] }}</th>
    @endif
</tr>
@endsection

@endif


@section('script-area')

@if(!isset($details))

<script>
    $(function() {

        $('#clear').attr('hidden', false);

    });
</script>

@endif


<script>
    $(document).ready(function() {

        $('#save').attr('hidden', true);
        $('#cancel').attr('hidden', false);

    });


    $('#savebtn').click(function() {


        $('#frmdt').validate({
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            rules: {
                gpass: {
                    required: true,
                    minlength: 1,
                    chk_guest_passport:true,
                },
                gfname: {
                    required: true,
                    minlength: 3,
                },
                glname: {
                    required: true,
                    minlength: 3,
                },

            },

            // relavant messages

            messages: {
                gpass: "please enter a valid guest Passport / NIC No",
                gfname: "please enter guest first name more than 3 characters",
                glname: "please enter guest last name more than 3 characters",
                gemail: "please provide a valid email ID",
                agent_contact_person: "please provide a contact no",

            }

        });


        jQuery.validator.addMethod("chk_guest_passport",function(value,element){

            var guest_id = $('#guest_id').val();
            var guest_pass = $('#gpass').val();

            if(guest_pass!=''){

                function valdt(){
                    var temp = 0;
                    $.ajax({
                        type        : "POST",
                        url         : "{{ route('validate_guest_passport') }}",
                        async       : false,
                        data        : {"guest_pass":guest_pass,'guest_id':guest_id},
                        headers     : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        beforeSend  : function(){$("body").css("cursor","wait"); $('#gpass').addClass('data_loading');},
                        success     : function(msg){ temp=msg; $("body").css("cursor","default"); $('#gpass').removeClass('data_loading');},
                        error       : function(){ $("body").css("cursor","default"); $('#gpass').removeClass('data_loading'); console.log("Error");  }
                    });

                    return temp;

                }

                var vlrs = valdt();

                if(vlrs){
                    return false;
                }else {
                    return true;
                }

            }

        },"passport / nic no already exists");


        if ($('#frmdt').valid()) {

            var guest_id = $('#guest_id').val();
            var pass_id = $('#gpass').val();

            
                preloader();
                $('#frmdt').submit();


        }

    });
</script>

@if(isset($details))

    <script>
        $(function(){
            $('#savebtn').text('UPDATE');
            $('#status_box').show('fast');
        });
    </script>

@endif

@endsection