@extends('layouts.store_dashboard_un_authed_layout')

@section('title')
{{Session::has('lang')&&Session::get('lang')=='en'?'Register  ':'   تسجيل حساب جديد '}}

@endsection
@section('content')
    <!-- start page content -->

    <div class="page-content">


        <div class="mt-4  mb-3 text-center">

            <h5 class="bold">{{trans('stores_dashboard.sign_up')}}</h5>
            <p class="m-3 bold"> {{awtTrans('انضم الينا أسر منتجة - مقدم خدمة')}} </p>
            <p class="m-3"> {{trans('stores_dashboard.sign_up_rule')}}</p>

        </div>


        <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
            <div class="container register-header register-header-update  m-auto">
                <div class="current update-curent">
                    <span class="select-register-step">1</span>
                    <span class="font16 bold">
                    {{trans('stores_dashboard.main_info')}}
                    </span>
                </div>
                <div class="line-between line-update"></div>
                <div class="update-curent">
                    <span class="select-register-step">2</span>
                    <span class="font16 bold">
                    {{trans('stores_dashboard.store_info')}}
                    </span>
                </div>
            </div>
        </div>

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

             <form id="registerForm" class="container ">
                 @csrf

                <h6 class="bold border-bottom pt-3 pb-3 mb-4"> {{trans('stores_dashboard.manager_info')}} </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 onchange="viewImg(event ,'#view1')" class="d-none" type="file" name="avatar" id="file1">
                            </label>
                        </div>
                        <div class="col">
                            <h6 class="bold font14"> {{trans('stores_dashboard.avatar')}} </h6>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="bold font14" for="exampleInputEmail1">  {{trans('stores_dashboard.name')}} <span style="color: #ff3333;margin: auto 20px;"> </span></label>
                    <input name="name" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('stores_dashboard.name')}} ">
                </div>


                <div class="form-group">
                    <label class="bold font14" for="exampleInputEmail1">  {{trans('stores_dashboard.phone')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                    <div class="row">
                        <div class="col-4 col-md-2 p-1 pr-0">
                            <select id="exampleInputEmail1" type="text" name="country_key" class="form-control">
                                @foreach($countries as $country)
                                     <option value="{{$country->calling_code}}" selected >{{$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=" {{trans('stores_dashboard.phone')}} ">
                        </div>

                    </div>
                </div>



                <div class="form-group">
                    <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.email')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                    <input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('stores_dashboard.email')}} ">
                </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>-->


                <button id="registerBtn" class="button1 w-100 mt-3 material-button" > {{trans('stores_dashboard.save')}} </button>

{{--                <div class="text-center p-3 ">--}}
{{--                    <p> {{trans('stores_dashboard.have_account')}} <a href="{{route('stores_dashboard.get_login')}}" >{{trans('stores_dashboard.press')}}</a></p>--}}
{{--               </div>--}}
            </form>
        </div>



    </div>

    <!-- end page content -->

@endsection

@section('scripts')
    <script>
        $("#registerBtn").on('click',function(e){
            e.preventDefault();
            var form = $('#registerForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.post_register')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#registerBtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        location.assign(data.msg);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection