@extends('layouts.delegate_join_request_layout')

@section('style')

@endsection

@section('content')

    <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
        <div class="">
            <h6 class="bold border-bottom pt-3 pb-3 mb-3">{{awtTrans('ملاحظة مهمة')}} </h6>
            <p class="font14">
                {{awtTrans('     يجب عليك التحقق من ملفك الشخصي الخاص بك من خلال خانة (أنا) في التطبيق:
                1- أن تكون الصورة لك واضحة من غير نظارات شمسية وتظهر كامل الوجه.
                2- الاسم الثنائي لك كما هو ظاهر بالهوية الوطنية.
                مع العلم أنه لن يتم النظر لأي طلب لا يحقق الشروط المذكورة أعلاه')}}
            </p>
        </div>
    </div>

    <div class="w-md-50  m-auto round10 p-3 form-cont" >

        <form id="join_request" class="container ">
            {{csrf_field()}}
            <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{awtTrans(' بيانات المندوب')}} </h6>

            <div class="form-group">
                <div class="row align-items-center justify-content-start ">
                    <div class="">
                        <label for="file1">
                            <div class="input-img-cont ">
                                <img src="{{URL::to('site/imgs/icons/upload-img.png')}}" style="width:130%;height:130%;object-fit:contain" id="view1" class="input-img" alt="">
                                <img src="{{URL::to('site/imgs/icons/camera.png')}}" class="input-img-camera" alt="">
                            </div>
                            <input name="personal_image" onchange="viewImg(event ,'#view1')"  accept="image/*" class="d-none" type="file" name="" id="file1">
                        </label>
                    </div>
                    <div class="col">
                        <h6 class="bold font14">{{awtTrans('الصورة الشخصية')}} </h6>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans(' الجنسية')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <select name="nationality_id" class="form-control">
                    <option selected disabled> {{awtTrans(' الرجاء تحديد الجنسية')}} </option>
                    @foreach($nationalities as $nationality)
                        <option value="{{$nationality->id}}">{{$nationality->name}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('الإسم بالكامل بالعربية')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="fullname_ar" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('الإسم بالكامل')}}">
            </div>


            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('الإسم بالكامل بالانجليزية')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="fullname_en" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('الإسم بالكامل')}}">
            </div>


            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('  تاريخ الميلاد')}}   <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="driver_date_of_birth" type="date" class="form-control direction" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{awtTrans('  تاريخ الميلاد')}} ">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans(' اسم الكفيل(ان وجد) ')}}</label>
                <input name="sponsor_name" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans(' اسم الكفيل')}}">
            </div>
            
            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('البريد الالكتروني')}}</label>
                <input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans(' البريد الالكتروني')}}">
            </div>

{{--            <div class="form-group">--}}
{{--                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans(' شركة المناديب ان وجد')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>--}}
{{--                <select name="company_id" class="form-control">--}}
{{--                    <option selected disabled> {{awtTrans(' الرجاء تحديد الشركة')}} </option>--}}
{{--                    <option value="" >{{awtTrans('لا يوجد')}}</option>--}}
{{--                     @foreach($companies as $company)--}}
{{--                        <option value="{{$company->id}}">{{$company->name}}</option>--}}
{{--                    @endforeach--}}
{{--                </select>--}}
{{--            </div>--}}

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans(' المنطقة')}}   <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <select id="region_id" name="region_id" class="form-control">
                    <option selected disabled>{{awtTrans(' الرجاء تحديد المنطقة')}} </option>
                    @foreach($regions as $region)
                        <option value="{{$region->id}}">{{$region->name}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('المدينة')}}   <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <select id="city_id" name="city_id" class="form-control">
                    <option selected disabled>{{awtTrans(' الرجاء إختيار المنطقة أولا')}}  ً</option>
                </select>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('العنوان')}}    <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="address" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('العنوان')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('رقم الهوية الوطنية او الاقامة')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="identity_card" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('رقم الهوية الوطنية')}}">
            </div>

            <!--<div class="form-group">-->
            <!--    <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('رقم الحساب البنكي')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>-->
            <!--    <input name="bank_acc_number" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('رقم الحساب البنكي')}}">-->
            <!--</div>-->

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('رقم الايبان')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
{{--                <input name="bank_iban_number" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('رقم الايبان')}}">--}}
                <div class="position-relative">
                    <input name="bank_iban_number" type="text" class="form-control" id="exampleInputEmail1"  placeholder="{{trans('stores_dashboard.iban')}}">
                    <span class="float_span">SA</span>
                </div>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('اسم البنك')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="bank_name" type="text" class="form-control"  aria-describedby="emailHelp" placeholder="{{awtTrans('اسم البنك')}}">
            </div>

            <div class="form-group">
                <label class="bold font14 d-block" for="coverImgcont3">
                    <div class="mb-2">
                        {{trans('stores_dashboard.iban_image')}} <span style="color: #ff3333;margin: auto 20px;"> * </span>
                    </div>

                    <input name="iban_image" type="file" onchange="viewImg(event ,'#coverImg3')" class="d-none w-100" id="coverImgcont3" >
                    <div class="row transition img-input align-items-center border w-100 p-2 round5">
                        <div class="col img-input-title">{{trans('stores_dashboard.iban_image')}}</div>
                        <div class="col  text-align2">
                            <img id="coverImg3" style="width:100%;height:100%;object-fit:contain" src="{{URL::to('site/imgs/icons/camera.svg')}}" alt="">
                        </div>
                    </div>
                </label>
            </div>
              <div class="col-md-7 col-12 mb-3">
                            <div class="d-flex align-items-center">
                                <h6 class="font15 M_end_20">{{awtTrans('هل لديك تامين للسياره')}}</h6>
                                <label class="radio-label M_end_20" style="padding:4px">
                                    <input class="radio-input" name="insurance" type="radio" value="true">
                                    <span class="custom_checked" style="padding:3px"></span>
                                    <span class="ml-1 mr-1">{{trans('stores_dashboard.yes')}}</span>
                                </label>
                                <label class="radio-label M_end_20" style="padding:4px">
                                    <input class="radio-input" name="insurance" type="radio" value="false">
                                    <span class="custom_checked" style="padding:3px"></span>
                                    <span class="ml-1 mr-1">{{trans('stores_dashboard.no')}}</span>
                                </label>
                            </div>
                        </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans(' نوع السيارة')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <select name="car_type_id" class="form-control">
                    <option selected disabled>{{awtTrans('الرجاء تحديد نوع السيارة')}} </option>
                    @foreach($cartypes as $cartype)
                        <option value="{{$cartype->id}}">{{$cartype->name}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('سنة الصنع')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="manufacturing_year" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('سنة الصنع')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">  {{awtTrans(' حروف لوحة المركبة بالانجليزية')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="car_letters_en" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans(' حروف لوحة المركبة بالانجليزية')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">  {{awtTrans(' حروف لوحة المركبة بالعربيه')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="car_letters_ar" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans(' حروف لوحة المركبة بالعربيه')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('أرقام لوحة المركبة بالعربيه')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="car_numbers_ar" type="text" inputmode="numeric" class="form-control number-only" id="car_numbers_ar" aria-describedby="emailHelp" placeholder="{{awtTrans('أرقام لوحة المركبة بالعربيه')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('أرقام لوحة المركبة بالانجليزية')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="car_numbers_en" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('أرقام لوحة المركبة بالانجليزية')}}">
            </div>

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1"> {{awtTrans('موديل المركبة')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="car_model" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('موديل المركبة')}}">
            </div>

            <h6 class="bold -bottom pt-3 pb-3 mb-4"> {{awtTrans('المرفقات  ')}} </h6>

            <div class="row">
                <div class="col-sm-6 col-md-3  p-1">
                    <div class=" round10  text-center">
                        <label for="upload1">
                            <input name="identity_card_image" type="file" name="" accept="image/*" id="upload1" onchange="viewImg(event ,'#viewer1')" class="d-none">
                            <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer1" class="mb-2 cp" alt="">
                            <span class="bold font12">{{awtTrans(' الهوية الوطنية')}}</span>
                        </label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3  p-1">
                    <div class=" round10  text-center">
                        <label for="upload2">
                            <input name="driving_license" type="file" name="" accept="image/*" id="upload2" onchange="viewImg(event ,'#viewer2')" class="d-none">
                            <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer2" class="mb-2 cp" alt="">
                            <span class="bold font12">{{awtTrans(' رخصة القيادة')}} </span>
                        </label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3  p-1">
                    <div class=" round10  text-center">
                        <label for="upload3">
                            <input name="car_front" type="file" name="" accept="image/*" id="upload3" onchange="viewImg(event ,'#viewer3')" class="d-none">
                            <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer3" class="mb-2 cp" alt="">
                            <span class="bold font12">{{awtTrans('السيارة من الامام')}}   </span>
                        </label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3  p-1">
                    <div class=" round10  text-center">
                        <label for="upload4">
                            <input name="car_back" type="file" name="" accept="image/*" id="upload4" onchange="viewImg(event ,'#viewer4')" class="d-none">
                            <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer4" class="mb-2 cp" alt="">
                            <span class="bold font12">{{awtTrans('السيارة من الخلف')}} </span>
                        </label>
                    </div>
                </div>
                  <div class="col-sm-6 col-md-3  p-1">
                    <div class=" round10  text-center">
                        <label for="upload5">
                            <input name="car_license" type="file" name="" accept="image/*" id="upload5" onchange="viewImg(event ,'#viewer5')" class="d-none">
                            <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer5" class="mb-2 cp" alt="">
                            <span class="bold font12">{{awtTrans('رخصة سير السيارة (استمارة)')}} </span>
                        </label>
                    </div>
                </div>
            </div>

            <div>
                <div class="">
                    <input name="terms" class="" type="checkbox">
                    <label  class="cp m-2 font14" >
                        {{awtTrans(' الموافقة على الشروط والاحكام')}}
                        <a href="{{route('delegate_join_request.terms')}}" target="_blank">{{awtTrans('اضغط هنا')}}</a>
                    </label>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{awtTrans('معلومات مهمة ')}} </h5>
                        </div>
                            <div class="modal-body">
                                {{awtTrans( 'والذي هو عبارة عن منصة إلكترونية تسمح للمندوبين بتقديم خدمات الشراء نيابة عن العملاء والتوصيل إلى منازلهم أو في المواقع التي يتم تحديدها مسبقاً من العملاء، حيث يقوم التطبيق بإتاحة الفرصة للعميل لاختيار المندوب المناسب للقيام بعملية التوصيل. ')}}

                            </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <button class="join_request button1 w-100 mt-3"> {{awtTrans('إرسال الطلب')}}
                <i class="spinner-ajax fa fa-spinner fa-spin"></i>
            </button>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        document.getElementById('car_numbers_ar').addEventListener("keypress", function(e){
            let code=e.keyCode-48;
            if (code>=0 && code<10) {
            e.target.value = e.target.value.slice(0,e.target.selectionStart)
            + "٠١٢٣٤٥٦٧٨٩"[code]
            + e.target.value.slice(e.target.selectionEnd);
            e.target.selectionStart = e.target.selectionEnd = e.target.selectionStart + 1;
            e.preventDefault();
            }
        })
    </script>
    <script>
        $(".number-only").bind({
            keydown: function(e) {
                if (e.shiftKey === true ) {
                    if (e.keyCode == 9) {
                        return true;
                    }
                    return false;
                }
                if (e.keyCode > 57) {
                    return false;
                }
                if (e.keyCode==32) {
                    return false;
                }
                return true;
            }
        });
    </script>
    <script>
        $(document).on('click','.join_request',function (e) {
            e.preventDefault();
            
            //get form data
            var form = $('#join_request').get(0);
            var formData = new FormData(form);

            //disable the submitted button and show he spinner
            $(this).prop('disabled', true).css({opacity: '0.5'});
            $('.spinner-ajax').css({display: 'inline-block'});
            $("#join_request :input").prop("disabled", true);
            $.ajax({
                url: "{{route('delegate_join_request.join_request.post')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.join_request').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        location.assign(data.url);
                    } else {
                        swal({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                        $("#join_request :input").prop("disabled", false);
                    }
                }
            });
        });
        // fech region cities
        $(document).on('change','#region_id',function(e){
            e.preventDefault();

            var id = $(this).val();

            var url = "{{route('delegate_join_request.join_request.change_region',['id'=>".id."])}}";
            console.log(url);
            $.ajax({
                url:'/delegate_join_request/change_region/'+id,
                type:"GET",
                dataType: "json",
                success:function(data){
                    if(data.key == 'fail'){
                        swal({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }else{
                        $('#city_id').html(data.html).fadeIn();
                    }

                }
            });
        });
    </script>
@endsection