@extends('layout')

@section('title', 'Register')

@section('meta:title', 'AccessWorld: Register')
@section('meta:description', 'Sign up for a new account.')

@section('content')
    <section class="no-banner"  id="awtSignUpSection">
        <div class="container">
            <div class="section-body">
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="card awtsignUpCard">
                        <div class="card-head">
                            <h2 class="sign-up-card-header">Registration</h2>
                            <p class="awtTitleCaption fw-600">Let's fill in your other important details.</p>   
                        </div>
                        <div class="card-body">
                            <form action="{{route('customer.storeProfileDetails')}}" method="POST" class="cust-form" id="cust_register_form" role="form" novalidate>
                                {{csrf_field()}}
                                <div class="row registerRow1">
                                    <input type="hidden" name="cust_id" value="{{ Auth::user()->id }}">
                                    <div class="col-sm-4 ">
                                        <div class="form-group signUp-form-group">
                                            <input type="number" name="phone" placeholder="Phone..." class="form-control" id="phone" value="{{ Auth::user()->phone }}" min="0" readonly>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="name" name="username" placeholder="Enter your username" class="form-control" id="username" value="{{old('username')}}" required>    
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="email" name="email" placeholder="Enter your email address" class="form-control" id="email" value="{{ old('email') }}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="password" name="password" placeholder="Enter Password" class="form-control" id="password" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="password" name="password_confirmation" placeholder="Re-enter password" class="form-control" id="password_confirmation" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="text" name="first_name" placeholder="First Name" class="form-control" id="first_name" value="{{old('first_name')}}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <input type="text" name="last_name" placeholder="Last Name" class="form-control" id="last_name" value="{{old('last_name')}}" required>
                                        </div>
                                    </div>
                                    @php
                                    $countries = App\Models\Country::where('is_supported',1)->get();
                                    @endphp
                                    <div class="col-sm-4">
                                        <div class="form-group signUp-form-group">
                                            <select name="country_id" id="country_id_dd" class="form-control" required>
                                                <option value="" selected disabled>Choose your Country</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{$country->id}}" @if(Auth::user()->country_id == $country->id) selected @endif>{{$country->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group has-error">
                                            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_PUBLIC_KEY') }}"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row signUpBtnRow">
                                    <div class="col-sm-3">
                                        <div class="form-group signUp-form-group-btn ml-0">
                                            <button type="submit" class="btn btn-default pull-right ink-reaction signUpBtn" id="submit">
                                                Sign Up
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="row padding-1">
                                            <div class="col-sm-12">
                                                    <em>By signing up, you agree to our
                                                        <a href="{{ route('page.show', 'terms-and-conditions') }}">Terms and Conditions</a>
                                                        and our
                                                        <a href="{{ route('page.show', 'privacy-policy') }}">Privacy Policy.</a>
                                                    </em>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <section id="loading">
                                    <div id="loading-content"></div>
                                </section>
                                <style>
                                    .registerRow1{
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: center;
                                    }
                                    .loading {
                                            z-index: 20;
                                            position: absolute;
                                            top: 0;
                                            left:-5px;
                                            width: 100%;
                                            height: 100%;
                                            background-color: rgba(0,0,0,0.4);
                                        }
                                        .loading-content {
                                            position: absolute;
                                            border: 16px solid #f3f3f3;
                                            border-top: 16px solid #3498db;
                                            border-radius: 50%;
                                            width: 50px;
                                            height: 50px;
                                            top: 40%;
                                            left:50%;
                                            animation: spin 2s linear infinite;
                                            }
                                              
                                            @keyframes spin {
                                                0% { transform: rotate(0deg); }
                                                100% { transform: rotate(360deg); }
                                            }
                                </style>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@push('scripts')
    <script>
        var check_email = "{{ route('api.check.email') }}";
        var check_username = "{{ route('api.check.username') }}";
    </script>
    <script src="{{ asset('js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/pages/register_validation.min.js') }}"></script>
    <script src="{{asset('js/custom.js')}}"></script>
    <script>
        var sendOtp = "{{route('sendOtp')}}";
        var verifyOtp = "{{route(verifyOtp)}}";
    </script>
@endpush