@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="d-flex flex-column-fluid">
    <!--begin::Container-->
    <div class="container">
        <!--begin::Card-->
        <div class="card card-custom">
            <div class="card-body">

                <div class="form-group row">

                    <div class="col-lg-3">
                        <label> الأسم الأول باللغة العربية <span class="text-danger">*</span> </label>
                        {!! Form::text('ar_first_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الأول باللغة العربية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الأسم الثاني باللغة العربية <span class="text-danger">*</span> </label>
                        {!! Form::text('ar_second_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الثاني باللغة العربية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الأسم الثالث باللغة العربية <span class="text-danger">*</span> </label>
                        {!! Form::text('ar_third_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الثالث باللغة العربية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الأسم الرابع باللغة العربية <span class="text-danger">*</span> </label>
                        {!! Form::text('ar_fourth_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الرابع باللغة العربية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                </div>

                <div class="form-group row">

                    <div class="col-lg-3">
                        <label> الأسم الرابع باللغة الإنكليزية <span class="text-danger">*</span> </label>
                        {!! Form::text('en_fourth_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الرابع باللغة الإنكليزية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الأسم الثالث باللغة الإنكليزية <span class="text-danger">*</span> </label>
                        {!! Form::text('en_third_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الثالث باللغة الإنكليزية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الأسم الثاني باللغة الإنكليزية <span class="text-danger">*</span> </label>
                        {!! Form::text('en_second_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال  الأسم الثاني باللغة الإنكليزية ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>




                    <div class="col-lg-3">

                        <label> الأسم الأول باللغة الإنكليزية <span class="text-danger">*</span> </label>
                        {!! Form::text('en_first_name', null ,['class'=>'form-control form-control-lg form-control-solid','placeholder'=>'من فضلك قم بإدخال الأسم الأول باللغة الإنكليزية  ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>
                </div>

                <div class="form-group row">

                    <div class="col-lg-4">
                        <div class="image-input image-input-outline" id="kt_image_1">
                            <label> صورة النزيل   </label>
                            <div class="image-input-wrapper"
                                 style="background-image: url({{isset($item)?getimg($item->image):''}})"></div>

                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                   data-action="change" data-toggle="tooltip" title=" صورة النزيل"
                                   data-original-title=" صورة النزيل">
                                <i class="fa fa-pen icon-sm text-muted"></i>
                                <input type="file" name="image" accept=".png, .jpg, .jpeg"/>
                            </label>

                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                  data-action="cancel" data-toggle="tooltip" title="حذف">
                                      <i class="ki ki-bold-close icon-xs text-muted"></i>
                                </span>
                        </div>


                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-4">
                        <div class="image-input image-input-outline" id="kt_image_2">
                            <label> صورة جواز السفر </label>
                            <div class="image-input-wrapper"
                                 style="background-image: url({{isset($item)?getimg($item->passport_image):''}})"></div>

                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                   data-action="change" data-toggle="tooltip" title="صورة جواز السفر"
                                   data-original-title="ًصورة جواز السفر">
                                <i class="fa fa-pen icon-sm text-muted"></i>
                                <input type="file" name="passport_image" accept=".png, .jpg, .jpeg"/>
                            </label>

                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                  data-action="cancel" data-toggle="tooltip" title="حذف">
                                      <i class="ki ki-bold-close icon-xs text-muted"></i>
                                </span>
                        </div>


                        <span class="form-text text-danger"> </span>
                    </div>
                </div>

                <div class="form-group row">

                    <div class="col-lg-3">
                        <label> الجنس : </label>
                        {!! Form::select('gender',['male'=>'ذكر','female'=>'انثي'], null ,['class'=>'form-control form-control-lg form-control-solid select2','placeholder'=>'من فضلك قم   باختيار جنس النزيل        ','autocomplete'=>'off']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>


                    <div class="col-lg-3">
                        <label>الدولة : </label>
                        {!! Form::select('country_id',$countries, isset($states)?$item->city->country->id:null ,['class'=>'form-control form-control-lg form-control-solid select2','id'=>'country_id','placeholder'=>'من فضلك قم بإختيار الدولة ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label>المحافظة / المنطقة : </label>
                        {!! Form::select('state_id',isset($states)?$states: [],  isset($states)?$item->city->state->id:null  ,['class'=>'form-control form-control-lg form-control-solid select2','id'=>'state_id','placeholder'=>'من فضلك قم بإختيار المحافظة  ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> المدينة : </label>
                        {!! Form::select('city_id', isset($cities)?$cities:[], null ,['class'=>'form-control form-control-lg form-control-solid select2','id'=>'city_id','placeholder'=>'من فضلك قم بإختيار المدينة   ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                </div>

                <div class="form-group row">
                    <div class="col-lg-3">
                        <label>الجنسية</label>
                        {!! Form::select('nationality_id',$nationalities, null ,['class'=>'form-control form-control-lg form-control-solid select2','id'=>'nationality_id','placeholder'=>'من فضلك قم بإختيار الدولة ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>
                    <div class="col-lg-3">
                        <label> رقم   الجواز <span class="text-danger">*</span></label>
                        {!! Form::text('identifier_id', null ,['class'=>'form-control form-control-lg form-control-solid  ','placeholder'=>'من فضلك قم بإدخال  رقم البطافة / الجواز   ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>
                    <div class="col-lg-3">
                        <label><span class="text-danger">*</span> رقم الإقامة  </label>
                        {!! Form::text('iqama', null ,['class'=>'form-control form-control-lg form-control-solid  ','placeholder'=>'من فضلك قم بإدخال  رقم   الإقامة     ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> جهه اصدار البطافة / الجواز  </label>
                        {!! Form::text('identifier_location_export',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم بإدخال  جهه اصدار البطافة / الجواز ', ]); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label>رقم تأشيرة دخول</label>
                        {!! Form::text('visa_number',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم   بإدخال    رقم الفيزا', ]); !!}

                        <span class="form-text text-danger"> </span>
                    </div>


                </div>

                <div class="form-group row">
                    <div class="col-lg-3">
                        <label> جهه اصدار تأشيرة دخول </label>
                        {!! Form::text('visa_expired_location', null ,['class'=>'form-control form-control-lg form-control-solid  ','placeholder'=>'من فضلك قم بإدخال  جهه اصدار تأشيرة دخول   ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> تاريخ انتهاء تأشيرة دخول </label>
                        {!! Form::text('visa_expired_date',   null ,['class'=>'form-control form-control-lg form-control-solid w-100 datepicker ','placeholder'=>'من فضلك قم   تاريخ انتهاء الفيزا   ','readonly ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>


                    <div class="col-lg-3">
                        <label> تاريخ الميلاد <span class="text-danger">*</span> </label>
                        {!! Form::text('date_of_birth',   null ,['class'=>'form-control form-control-lg form-control-solid w-100  datepicker ','placeholder'=>'من فضلك قم بإدخال  تاريخ الميلاد  ','readonly ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> الهاتف <span class="text-danger">*</span></label>
                        {!! Form::text('phone', null ,['class'=>'form-control form-control-lg form-control-solid  ','placeholder'=>'من فضلك قم بإدخال الهاتف  ']); !!}
                        <span class="form-text text-danger"> </span>
                    </div>


                </div>

                <div class="form-group row">

                    <div class="col-lg-3">
                        <label> العنوان </label>
                        {!! Form::text('address',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم   بإدخال  هاتف العمل', ]); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> البريد الإلكترونى   </label>
                        {!! Form::email('email',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم بإدخال البريد الإلكترونى  ','  ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> هاتف العمل </label>
                        {!! Form::text('work_phone',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم   بإدخال  هاتف العمل', ]); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                    <div class="col-lg-3">
                        <label> عنوان العمل </label>
                        {!! Form::text('work_location',   null ,['class'=>'form-control form-control-lg form-control-solid   ','placeholder'=>'من فضلك قم  عنوان العمل ','  ']); !!}

                        <span class="form-text text-danger"> </span>
                    </div>

                </div>


                <button type="submit" class="btn btn-primary font-weight-bolder px-9 py-4"
                        data-wizard-type="action-next">حفظ
                </button>


            </div>
        </div>
        <!--end::Card-->
    </div>
    <!--end::Container-->
</div>

@push('scripts')
    <!--begin::Page Scripts(used by this page)-->
    <script src="{{asset('/admin/assets')}}/js/pages/crud/file-upload/image-input.js"></script>
    <script src="{{asset('/admin/assets')}}/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
    <script src="{{asset('/admin/assets')}}/js/pages/crud/forms/widgets/select2.js"></script>
    <script>
        $('.select2').select2({});
        var avatar1 = new KTImageInput('kt_image_1');

        $('.datepicker').datepicker({
            todayHighlight: true,
            orientation: "bottom left",
            format: "yyyy-mm-dd",
            width: '100%',
        });
        $("#country_id").change(function () {
            var url = "/dashboard/lookup/get-states-by-country/" + $(this).val();
            $('#state_id').empty();
            $.getJSON(url, function (data) {
                $.each(data, function (index, value) {
                    // APPEND OR INSERT DATA TO SELECT ELEMENT.

                    $('#state_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                });
            });
        });
        $("#state_id").change(function () {
            var url = "/dashboard/lookup/get-cities-by-state/" + $(this).val();
            $('#city_id').empty();
            $.getJSON(url, function (data) {
                $.each(data, function (index, value) {
                    // APPEND OR INSERT DATA TO SELECT ELEMENT.

                    $('#city_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                });
            });
        });
    </script>
    <!--end::Page Scripts-->
@endpush