@extends('layouts.delegate_join_request_layout')

@section('style')

@endsection

@section('content')
<div class="w-md-50  m-auto round10 p-5 form-cont" >
    <form id="login" class="container">
    {{csrf_field()}}
        <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>
        <button class="login button1 w-100 mt-3">{{awtTrans('ارسال كود التحقق ')}}
            <i class="spinner-ajax fa fa-spinner fa-spin"></i>
        </button>
    </form>
</div>
@endsection

@section('scripts')
    <script>
        $(document).on('click','.login',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#login').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('user.check_account')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.login').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);
                    }
                }
            });
        });
    </script>
@endsection