@extends('layouts.master')
@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Islamic DataPiker -->

    {{--    <link href="{{asset('css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet" />--}}

    <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
    <style>
        .main-input .invalid-feedback {
            position: absolute;
            top: 68%;
            text-align: center;
            font-weight: bold;
            transform: translateY(-50%);

        }

        .card-header {
            padding: 0
        }

        .card-header button {
            margin-bottom: 0
        }

        .select2-container--default .select2-selection--single {
            /*border-radius: 30px;*/
            height: 40px;
            line-height: 40px;
            border: 1px solid #dadada;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 40px;
        }

        .select2-container {
            width: 100% !important;
            direction: rtl;
        }

        .notsaudi {
            display: none;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            right: unset;
            left: 3px;
            height: 40px;
        }

        .w3-card-4 {
            left: 0 !important;
            right: 0;
            margin: auto !important;
            z-index: 9 !important;
        }

        .main-title {
            background: #f3f3f3;
            padding: 10px;
            font-size: 17px;
            font-weight: bold;
        }

        .cus-p {
            margin-bottom: 10px;
            font-size: 14px;
        }


        .main-input {
            position: relative;
            border: 1px solid #C6C6C6;
            border-radius: 5px;
            height: 140px;
            width: 140px;
        }

        .main-input .file-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            right: 0;
            z-index: 99;
            height: 100%;
        }

        .main-input i.fa-camera {
            position: absolute;
            width: 40px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            left: 0;
            right: 0;
            margin: auto;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .file-name {
            font-size: 12px;
            color: #928d8d;
        }

        button.remove-img {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            top: 0;
            border: none;
            background: rgba(0, 0, 0, 0.5);
            color: #ffff;
            font-size: 25px;
            z-index: 99;
        }

        .form label {
            font-size: 13px;
        }

        .main-input .uploaded-image {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .main-input .uploaded-image img {
            max-height: 100%;
            min-width: 100%;
            display: block;
            border-radius: 8px;
            transition: all .3s;
            height: 100%;
            max-width: 100% !important;
        }

        /*.main-input .uploaded-image.active img {*/
        /*    max-height: 400px;*/
        /*    min-width: auto;*/
        /*    max-width: calc(100vw - 20px);*/
        /*    height: auto;*/
        /*}*/
        /*.main-input .uploaded-image.active {*/
        /*    position: fixed;*/
        /*    top: 50%;*/
        /*    left: 50%;*/
        /*    transform: translate(-50%, -50%);*/
        /*    z-index: 999999;*/
        /*    width: auto;*/
        /*    height: auto;*/
        /*    box-shadow: none;*/
        /*}*/

        .orders h4,
        .orders h3 {
            color: {{setting('base_color')}};
            text-align: right;
            font-size: 17px;
            font-weight: bold;
        }

        .orders ol {
            padding-right: 0;
        }

        .orders p {
            font-size: 14px;
        }

        #accordion button.collapsed {
            background: #f3f3f3;
            color: #000;
        }

        #accordion button {
            width: 100%;
            background: {{setting('base_color')}};
            text-align: right;
            font-weight: bold;
            color: #fff;
            position: relative;
        }

        #accordion button:hover,
        #accordion button:focus {
            outline: none;
            text-decoration: none;
        }

        #accordion button.collapsed:after {
            content: "\f067";
        }

        #accordion button:after {
            font-family: 'FontAwesome';
            content: "\f068";
            float: left;
        }
    </style>
@endsection
@section('content')

    <form class="form needs-validation" novalidate action="{{route('signupDelegation')}}" id="signupDelegationForm" method="POST" enctype="multipart/form-data">
        <h4 class="main-title">ملاحظة مهمة</h4>
        <p class="cus-p">يجب عليك التحقق من ملفك الشخصي الخاص بك من خلال خانة “أنا” في التطبيق:</p>
        <p class="cus-p">1- أن تكون الصورة لك واضحة من غير نظارات شمسية وتظهر كامل الوجه.</p>
        <p class="cus-p">2- الاسم الثنائي لك كما هو ظاهر بالهوية الوطنية.</p>
        <p class="cus-p">مع العلم أنه لن يتم النظر لأي طلب لا يحقق الشروط المذكورة أعلاه.</p>
        {{csrf_field()}}
        <h4 class="main-title">بيانات المندوب</h4>
        <div class="form-group">
            <label class="label-control">الاسم كاملاً
                <span style="color: {{setting('base_color')}}">*</span>
                full Name</label>
            <input type="text" name="fullname" class="form-control" value="{{($user)? $user->name : ''}}" placeholder="الاسم كاملاً * full Name" required/>
            <div class="invalid-feedback">
               ادخل الاسم كاملا
            </div>
        </div>
        <div class="form-group">
            <label class="label-control">رقم الجوال
                <span style="color: {{setting('base_color')}}">*</span>
                phone</label>
            <input type="text" name="phone" class="form-control" value="{{($user)? '0'.$user->phone : ''}}" placeholder="رقم الجوال * phone" required/>
            <div class="invalid-feedback">
               ادخل رقم الجوال
            </div>
        </div>
        <div class="form-group">
            <label class="label-control">رقم الهوية الوطنية / هوية مقيم
                <span style="color: {{setting('base_color')}}">*</span>
                NationalID</label>
            <input type="number" name="identity_card" value="{{old('identity_card')}}" class="form-control" placeholder="رقم الهوية الوطنية / هوية مقيم * NationalID" required/>
            <div class="invalid-feedback">
                ادخل رقم الهويه الوطنية /هوية المقيم
            </div>
        </div>

        <div class="form-group input-group">
            <label class="label-control">الجنسية
                <span style="color: {{setting('base_color')}}">*</span>
                citizenship</label>
            <select name="nationality_id" id="nationality_id" class="form-control custom-select js-example-basic-single" placeholder="الجنسية * citizenship" required>
                @foreach($nationalities as $nationality)
                    <option {{old('nationality_id')&&old('nationality_id')==$nationality->id?'selected':''}} value="{{$nationality->id}}">{{$nationality->name_ar .' * '. $nationality->name_en}}</option>
                @endforeach
            </select>
            <div class="invalid-feedback">
                اختر الجنسية
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">تاريخ ميلاد السائق
                <span style="color: {{setting('base_color')}}">*</span>
                Driver date of birth</label>
            <input type="text" name="driver_date_of_birth" value="{{old('driver_date_of_birth')}}"  id="calender" class="form-control hijri-date-default" placeholder="تاريخ ميلاد السائق  * Driver date of birth" readonly required/>
            <div class="invalid-feedback">
                ادخل تاريخ ميلاد السائق
            </div>
        </div>
        <div class="notsaudi">
            <div class="form-group">
                <label class="label-control">تاريخ انتهاء الاقامه
                    <span style="color: {{setting('base_color')}}">*</span>
                    Driver Resident expiration date</label>
                <input type="text" name="nationalExpireDate" value="{{old('nationalExpireDate')}}" id="calender1"  class="form-control hijri-date-default" placeholder="تاريخ انتهاء الاقامة  * Driver Resident expiration date" readonly/>
                <div class="invalid-feedback">
                    ادخل تاريخ انتهاء الاقامة
                </div>
            </div>

            <div class="form-group">
                <label class="label-control">اسم الكفيل
                    <span style="color: {{setting('base_color')}}">*</span>
                    Sponsor Name</label>
                <input type="text" name="sponsor_name" value="{{old('sponsor_name')}}" class="form-control" placeholder="اسم الكفيل * Sponsor Name"/>
                <div class="invalid-feedback">
                    ادخل اسم الكفيل
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">البريد الإلكتروني
                <span style="color: {{setting('base_color')}}">*</span>
                Email</label>
            <input type="email" name="email" value="{{old('email')}}" class="form-control" placeholder="البريد الإلكتروني" required/>
            <div class="invalid-feedback">
                ادخل البريد الالكتروني
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">المنطقة
                <span style="color: {{setting('base_color')}}">*</span>
                Region</label>
            <select id="region_id" name="region_id" class="form-control js-example-basic-single" required >
                <option selected>إختر المنطقة
                    <span style="color: {{setting('base_color')}}">*</span>
                    Select Region</option>
                @foreach($regions as $region)
                    <option {{old('region_id')&&old('region_id')==$region->id?'selected':''}} value="{{$region->id}}">{{$region->name_ar .' * '. $region->name_en}}</option>
                @endforeach
            </select>
            <div class="invalid-feedback">
               اختر المنطقة
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">المدينة
                <span style="color: {{setting('base_color')}}">*</span>
                City</label>
            <select id="city_id" name="city_id" class="form-control js-example-basic-single" required >
                @if(old('region_id'))
                    @foreach(App\City::where('region_id',old('region_id'))->get() as $city)
                        <option {{old('city_id')&&old('city_id')==$city->id?'selected':''}} value="{{$city->id}}">{{$city->name_ar .' * '. $city->name_en}}</option>
                    @endforeach
                @endif
            </select>
            <div class="invalid-feedback">
                اختر المدينة
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">عنوان صاحب الحساب
                <span style="color: {{setting('base_color')}}">*</span>
                Address
            </label>
            <input style="height: 38px" type="address" name="address" value="{{old('address')}}" class="form-control" placeholder="عنوان صاحب الحساب * Address" required/>
            <div class="invalid-feedback">
               ادخل عنوان صاحب الحساب
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">رقم الحساب البنكي الآيبان والمكون من 24 خانة (حاليا ندعم البنوك التالية: الأهلي)
                <span style="color: {{setting('base_color')}}">*</span>
                IBAN 24-digit bank account number (currently we support the following banks: AlAhli)</label>
            <input  style="height: 38px" type="bank_iban_number" name="bank_iban_number" value="{{old('bank_iban_number')}}" class="form-control" placeholder="رقم حساب البنك الاهلي * Alahly Bank number" required/>
            <div class="invalid-feedback">
                ادخل رقم الحساب البنكي
            </div>
        </div>

        <div class="upload">
            <div class="form-group">
                <label class="label-control">الصورة الشخصية
                    <span style="color: {{setting('base_color')}}">*</span>
                    personal image</label>
                <div class="main-input">
                    <i class="fa fa-camera gray"></i>
                    <input class="form-control file-input" type="file" accept="image/*" name="personal_image" required />
                    <div class="invalid-feedback">
                       ادخل  الصورة الشخصية
                    </div>
                    <div class="uploaded-image"></div>
                </div>

            </div>

            <div class="form-group">
                <label class="label-control">صورة ال STCPAY QR
                    <span style="color: {{setting('base_color')}}">*</span>
                    STCPAY QR </label>
                <div class="main-input">
                    <i class="fa fa-camera gray"></i>
                    <input class="form-control file-input" type="file" accept="image/*" name="qr" required />
                    <div class="invalid-feedback">
                        ادخل  صورة ال STCPAY QR
                    </div>
                    <div class="uploaded-image"></div>
                </div>

            </div>
        </div>

        <div class="form-group">
            <label class="label-control">نوع السيارة
                <span style="color: {{setting('base_color')}}">*</span>
                car type</label>
            <select id="car_type" name="car_type_citc_id" class="form-control js-example-basic-single" required >
                <option selected disabled>نوع السيارة <span style="color: {{setting('base_color')}}">*</span>car type</option>
                @foreach($car_types as $car_type)
                    <option {{old('car_type_citc_id')&&old('car_type_citc_id')==$car_type->id?'selected':''}} value="{{$car_type->id_}}">{{$car_type->nameAr .' * '. $car_type->nameEn}}</option>
                @endforeach
            </select>
            <div class="invalid-feedback">
               اختر نوع السيارة
            </div>
        </div>
        <div class="form-group" id="car_size_parent" style="display:none">
            <label class="label-control">حجم السيارة
                <span style="color: {{setting('base_color')}}">*</span>
                car type</label>
            <select id="car_size" name="car_size_id" class="form-control js-example-basic-single" required >

            </select>
            <div class="invalid-feedback">
                اختر حجم السيارة السيارة
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">سنة الصنع
                <span style="color: {{setting('base_color')}}">*</span>
            </label>
            <input type="text" name="manufacturing_year" value="{{old('manufacturing_year')}}" class="form-control" placeholder="سنة الصنع " required/>
            <div class="invalid-feedback">
                ادخل سنة الصنع
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">حروف لوحة المركبة (باللغة الإنجليزية)
                <span style="color: {{setting('base_color')}}">*</span>
            </label>
            <input type="text" name="car_letters" value="{{old('car_letters')}}" class="form-control" placeholder="حروف لوحة المركبة (باللغة الإنجليزية)" required/>
            <div class="invalid-feedback">
                ادخل حروف اللوحة
            </div>
        </div>

        <div class="form-group">
            <label class="label-control">أرقام لوحة المركبة (باللغة الإنجليزية)
                <span style="color: {{setting('base_color')}}">*</span>
            </label>
            <input type="text" name="car_numbers" value="{{old('car_numbers')}}" class="form-control" placeholder="أرقام لوحة المركبة (باللغة الإنجليزية)" required/>
            <div class="invalid-feedback">
               ادخل رقم اللوحة
            </div>
        </div>

        <h4 class="main-title">الوثائق المطلوبة</h4>

        <div class="first">
            <div class="upload">
                <div class="form-group">
                    <label class="label-control">صورة من رخصة القيادة
                        <span style="color: {{setting('base_color')}}">*</span>
                    </label>
                    <div class="main-input">

                        <i class="fa fa-camera gray"></i>
                        <input class="file-input form-control" type="file" accept="image/*" name="driving_license" required />
                        <div class="invalid-feedback">
                            ارفع صورة رخصه القيادة
                        </div>
                        <div class="uploaded-image"></div>
                    </div>

                </div>
            </div>

            <div class="upload">
                <div class="form-group">
                    <label class="label-control"> صورة من بطاقة الهوية الوطنية / أو هوية مقيم.
                        <span style="color: {{setting('base_color')}}">*</span>
                    </label>
                    <div class="main-input">
                        <i class="fa fa-camera gray"></i>
                        <input class="file-input form-control" type="file" accept="image/*" name="identity_card_image" required />
                        <div class="invalid-feedback">
                            ارفع صورة الهوية الوطنية / او هوية المقيم
                        </div>
                        <div class="uploaded-image"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="second">
            <div class="upload">
                <div class="form-group">
                    <label class="label-control"> صور للسيارة من الخلف
                        <span style="color: {{setting('base_color')}}">*</span>
                    </label>
                    <div class="main-input">
                        <i class="fa fa-camera gray"></i>
                        <input class="file-input form-control" type="file" accept="image/*" name="car_back" required />
                        <div class="invalid-feedback">
                            ارفع  صور للسيارة من الخلف
                        </div>
                        <div class="uploaded-image"></div>
                    </div>
                </div>
            </div>

            <div class="upload">
                <div class="form-group">
                    <label class="label-control"> صور للسيارة من الأمام
                        <span style="color: {{setting('base_color')}}">*</span>
                    </label>
                    <div class="main-input">
                        <i class="fa fa-camera gray"></i>
                        <input class="file-input form-control" type="file" accept="image/*" name="car_front" required />
                        <div class="invalid-feedback">
                            ارفع صور للسيارة من الامام
                        </div>
                        <div class="uploaded-image"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="accordion">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span>معلومات مهمة</span>

                        </button>
                    </h5>
                </div>

                <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="orders">
                            <h4>ماهي شروط العمل في {{$site_title}}؟</h4>
                            {!! html_entity_decode(setting('terms_ar')) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="accept">
            <h4 style="color: {{setting('base_color')}};font-size:14px;font-weight: bold " >إقرار وموافقة</h4>
            <div class="checkbox">
                <label>
                    <input  type="checkbox" name="reading_terms" id="reading_terms" required >
                    <!-- <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> -->
                    أقر بأنني قد قرأت الشروط المذكورة ووافقت عليها،
                </label>
            </div>
        </div>
        <div class="invalid-feedback">
            وافق ع الشروط
        </div>
        <button type="submit" class="btn btn-send">أرسل الطلب</button>
    </form>

    <datepicker-hijri reference="calender" placement="bottom" ></datepicker-hijri>
    <datepicker-hijri reference="calender1" placement="bottom" ></datepicker-hijri>
@endsection
@section('script')

    <script type="text/javascript">

        $(document).on('change','#nationality_id',function(e){
            if($(this).val()==1){
                $(".notsaudi").css({
                    display:'none'
                });
            }else{
                $(".notsaudi").css({
                    display:'block'
                });
            }
        });

        $(document).on('change','#region_id',function(e){
            e.preventDefault();

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

            $.ajax({
                url:'/changeRegion/'+id,
                type:"GET",
                dataType: "json",
                success:function(data){
                    if(data.key == 'fail'){
                        alert(data.msg);
                    }else{
                        $('#city_id').html(data.html).fadeIn();
                    }

                }
            });
        });

        $(document).on('change','#car_type',function(e){
            e.preventDefault();

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

            $.ajax({
                url:'/changeCarType/'+id,
                type:"GET",
                dataType: "json",
                success:function(data){
                    if(data.key == 'fail'){
                        alert(data.msg);
                    }else if(data.key == 'no_results'){
                        $('#car_size').prop("required", false);
                        $('#car_size_parent').fadeOut();
                    }else{
                        $('#car_size').prop("required", true);
                        $('#car_size_parent').fadeIn();
                        $('#car_size').html(data.html).fadeIn();
                    }

                }
            });
        });

        $('#signupDelegationForm').on('submit',function(){
            var c = $('#reading_terms').prop('checked');
            if(c == false){
                alert('يجب عليك الموافقة علي الشروط المذكورة.');
                return false;
            }
        })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
    </script>

    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/gh/abublihi/datepicker-hijri@master/build/datepicker-hijri.js" type="text/javascript">
    </script>
    <script>
        $(document).on("change", ".file-input", function () {
            let input = $(this),
                uploadedImage = input.siblings(".uploaded-image"),
                placeHolder = input.siblings(".placeholder"),
                fileName = input.parent().find(".file-name"),
                plus = input.siblings("i.fas.fa-camera");
            if (input.val() === "") {
                fileName.empty();
                uploadedImage.empty();
                placeHolder.removeClass("active");
                plus.fadeIn(100);
            } else {
                plus.fadeOut(100);
                fileName.text(input.val().replace("C:\\fakepath\\", ""));
                uploadedImage.empty();
                uploadedImage.append('<img src="' + URL.createObjectURL(event.target.files[0]) + '">');
            }
        });
        $(document).on("click", ".file-name", function () {
            $(this).siblings(".file-input").click();
        });

        $(document).on("click", ".uploaded-image", function () {
            $(this).addClass("active");
        });
        $("body").on("click", function () {
            $('.uploaded-image').removeClass("active");
        });
    </script>

@endsection