@extends('layouts.delegate_join_request_layout')

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@endsection

@section('content')


    <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')}}" id="view1" class="input-img" alt="">
                                <img src="{{URL::to('site/imgs/icons/camera.png')}}" class="input-img-camera" alt="">
                            </div>
                            <input name="avatar" 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>
                <input name="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('  رقم الهاتف ')}}    <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <div class="row">
                    <div class="col-md-2 col-4 p-1 pr-0">
                        <select name="country_key" class="form-control">
                            @foreach($countries as $country)
                                <option value="{{$country->calling_code}}">{{$country->calling_code}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col pt-1 pb-1 pl-0 pr-1">
                        <input name="phone" type="number" class="form-control"  aria-describedby="emailHelp" placeholder=" {{awtTrans('  رقم الهاتف ')}} ">
                    </div>
                </div>
            </div>
            <input type="hidden" value="post_it" name="used_method">

            <div class="form-group">
                <label class="bold font14" for="exampleInputEmail1">{{awtTrans('  البريد الالكترونى')}}   <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="email" 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>
                <select id="city_id" name="city_id" class="form-control">
                    <option selected disabled>{{awtTrans(' الرجاء تحديد المدينة')}} </option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->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="district_id" name="district_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>
                <select id="category_id" name="category_id[]" class="form-control select2" multiple="multiple">
{{--                    <option selected disabled>{{awtTrans(' الرجاء تحديد القسم')}} </option>--}}
                    @foreach($categories as $category)
                        <option value="{{$category->id}}">{{$category->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="owner_bank_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('اسم البنك  ')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="bank_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('رقم الحساب البنكي')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                <input name="bank_acc_number" inputmode="numeric" 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="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="commerical_id" inputmode="numeric" 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="identity_card" inputmode="numeric" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{awtTrans('رقم الهوية ')}}">
            </div>



         


            <div class="form-group">
                <label class="bold font14" for="Password1">  {{trans('stores_dashboard.password')}}  </label>
                <div class="password-cont">
                    <input name="password" type="password" class="form-control" id="Password1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.password')}}">
                    <i class="fa fa-eye color-gray" id="signInShowPassword1"></i>
                </div>
            </div>

            <div class="form-group">
                <label class="bold font14" for="Password2">{{trans('stores_dashboard.password_confirm')}}  </label>
                <div class="password-cont">
                    <input name="password_confirmation" type="password" class="form-control" id="Password2" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.password_confirm')}}">
                    <i class="fa fa-eye color-gray" id="signInShowPassword2"></i>
                </div>
            </div>
      
            <div>
                <div class="">
                    <input name="terms" class="" type="checkbox">
                    <label data-toggle="modal" data-target="#exampleModal" class="cp m-2 font14" >
                        {{awtTrans(' الموافقة على الشروط والاحكام')}}
                    </label>
                </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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </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'});

            $.ajax({
                url: "{{route('provider_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);
                    }
                }
            });
        });
        // fech region cities
        $(document).on('change','#city_id',function(e){
            e.preventDefault();

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

            var url = "{{route('provider_join_request.join_request.change_region',['id'=>".id."])}}";
            console.log(url);
            $.ajax({
                url:'/provider_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{
                        $('#district_id').html(data.html).fadeIn();
                    }

                }
            });
        });


    </script>
    <!-- Upload Multiple Images -->
    <script>
        const fileInput = document.getElementById('upload2');
        const imagesDiv = document.getElementById('imagesMe');

        if(fileInput){
            fileInput.onchange = function (){
                for(file of fileInput.files){
                    // Create Main Div
                    let imgContainer = document.createElement('div');
                    imgContainer.classList.add('img-hidden');

                    // Create Input Hidden To Get The File Name
                    let inputHidden = document.createElement('input');
                    inputHidden.setAttribute("type", "hidden");
                    inputHidden.value = `${file.name}`;

                    // Append The Input To Main Div
                    imgContainer.append(inputHidden);

                    // Create Remove Button
                    let removeBtn = document.createElement('span');
                    removeBtn.classList.add('remove-img-btn');
                    removeBtn.innerHTML = `<i class="fa fa-times" aria-hidden="true"></i>`;

                    // Append The Button To Main Div
                    imgContainer.append(removeBtn);

                    $(removeBtn).click(function () {
                        $(this).parent(".img-hidden").detach();
                    });

                    let reader = new FileReader();
                    reader.onload = ()=>{
                        // Create Img
                        let img = document.createElement('img');
                        img.setAttribute('src', reader.result);

                        // Append The Img To Main Div
                        imgContainer.append(img);
                    }
                    imagesDiv.prepend(imgContainer);
                    reader.readAsDataURL(file);
                }
            }
        }
    </script>
    <!-- Upload Multiple Files -->
    <script>
        const fileInput3 = document.getElementById('upload3');
        const filesDiv = document.getElementById('filesUploadMe');

        if(fileInput3){
            fileInput3.onchange = function (){
                // filesDiv.style.display = 'flex'
                for(file of fileInput3.files){
                    // Create Main Div
                    let fileContainer = document.createElement('div');
                    fileContainer.classList.add('file-hidden');

                    // Create Input Hidden To Get The File Name
                    let inputHidden = document.createElement('input');
                    inputHidden.setAttribute("type", "hidden");
                    inputHidden.value = `${file.name}`;

                    // Append The Input To Main Div
                    fileContainer.append(inputHidden);

                    // Create Remove Button
                    let removeBtn = document.createElement('span');
                    removeBtn.classList.add('remove-img-btn');
                    removeBtn.innerHTML = `<i class="fa fa-times" aria-hidden="true"></i>`;

                    // Append The Button To Main Div
                    fileContainer.append(removeBtn);

                    let spanName = document.createElement('span');
                    spanName.innerText = file.name;

                    fileContainer.append(spanName)

                    // Remove Parent Div From Page When Click The Button
                    $(removeBtn).click(function () {
                        $(this).parent(".file-hidden").detach();
                    });
                    filesDiv.prepend(fileContainer);
                }
            }
        }
    </script>
    <script>

        $(".remove-img-btn").click(function () {
            if(this.parentElement.classList.contains('img-hidden')){

                $(this).parent(".img-hidden").detach();

            } else if(this.parentElement.classList.contains('file-hidden')){

                $(this).parent(".file-hidden").detach();

            }
        })

    </script>
@endsection