@extends('front.layouts.main')

@section('title'){{ @trans('seo.signup_title') }}@endsection

@section('description'){{ @trans('seo.signup_desc') }}@endsection

@section('content')

<main class="before-login-page">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 offset-lg-1 col-md-6 my-md-auto">
                <h1 class="bold">{{ @trans('client_signup.getting_started') }}</h1>
                <form method="post" action="{{route('auth.postregister')}}" id="frmsignup" autocomplete="off">
                    @csrf
                    @honeypot
                    <div class="form-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('client_signup.first_name') }}</label>
                                    <input type="text" name="first_name" class="form-control" value="{{old('first_name')}}" placeholder="{{ @trans('client_signup.first_name') }}" />
                                    @if($errors->has('first_name'))
                                    <span class="invalid-feedback">{{$errors->first('first_name')}}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('client_signup.last_name') }}</label>
                                    <input type="text" name="last_name" class="form-control" value="{{old('last_name')}}" placeholder="{{ @trans('client_signup.last_name') }}" />
                                    @if($errors->has('last_name'))
                                    <span class="invalid-feedback">{{$errors->first('last_name')}}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('client_signup.phone_number') }}</label>
                                    <input type="text" name="mobile" id="mobile" class="form-control mobile" value="{{old('mobile')}}" placeholder="{{ @trans('client_signup.phone_number') }}" />
                                    @if($errors->has('mobile'))
                                    <span class="invalid-feedback">{{$errors->first('mobile')}}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group btm-arrow select">
                                    <label class="control-label" for="country">{{ @trans('client_signup.select_country') }}</label>
                                    <select name="country" id="country" class="form-control">
                                        <option value="" hidden="">{{ @trans('client_signup.select_country') }}</option>
                                        @foreach ($countries as $country)
                                        <option value="{{$country->id}}" @if(old('country')==$country->id) selected="selected" @endif >{{$country->name}}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('country'))
                                    <span class="invalid-feedback">{{$errors->first('country')}}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group date">
                                    <label class="control-label">Birth Date</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control bg-white"
                                            placeholder="Select Date" id="birth_date" name="birth_date"
                                            readonly
                                            value="{{old('birth_date')}}">
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                    @if($errors->has('birth_date'))
                                        <span class="invalid-feedback">{{$errors->first('birth_date')}}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{ @trans('client_signup.email') }}</label>
                            <input type="email" name="email" value="{{old('email')}}" class="form-control" placeholder="{{ @trans('client_signup.email') }}" />
                            @if($errors->has('email'))
                            <span class="invalid-feedback">{{$errors->first('email')}}</span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{ @trans('client_signup.password') }}</label>
                            <input type="password" name="password" id="password" class="form-control" placeholder="{{ @trans('client_signup.password') }}" />
                            <small class="d-block mt-1">Password must contain at least one special character</small>
                            @if($errors->has('password'))
                            <span class="invalid-feedback">{{$errors->first('password')}}</span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{ @trans('client_signup.confirm_password') }}</label>
                            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="{{ @trans('client_signup.confirm_password') }}" />
                            @if($errors->has('password_confirmation'))
                            <span class="invalid-feedback">{{$errors->first('password_confirmation')}}</span>
                            @endif
                        </div>

                        <div class="form-group">
                            <div id="currentStatus" class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="agreecheck" name="agreecheck" value="1">
                                <label class="custom-control-label control-label" for="agreecheck">I have read and agree to the <a target="_blank" href="{{route('terms')}}"><b>Terms and Conditions</b></a>.</label>
                                @if($errors->has('agreecheck'))
                                <span class="invalid-feedback">{{$errors->first('agreecheck')}}</span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="g-recaptcha" data-sitekey="{{ config('custom.google_recaptcha_site_key') }}"></div>
                            @if($errors->has('g-recaptcha-response'))
                            <span class="invalid-feedback">{{$errors->first('g-recaptcha-response')}}</span>
                            @endif
                        </div>
                        
                    </div>
                    <div class="form-action">
                        <button type="submit" class="btn btn-transparent sign-up-button">{{ @trans('client_signup.register') }}</button>
                    </div>
                    <p class="gray">Already a member? <a href="{{ route('home') }}" class="gray mr-2 btn font-orange small-font nav-btn">{{ @trans('client_signup.sign_in') }}</a></p>
                </form>
            </div>
            <div class="col-md-6 my-md-auto">
                <img src="{{ asset('img/login-img.png') }}" alt="Empower" class="d-none d-md-block" />
            </div>
        </div>
    </div>
</main>

@endsection
@push('pageJs')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript" src="{{ asset('js/vendor/js.cookie.min.js') }}"></script>
<script>
    //called when key is pressed in textbox
    $("#mobilephone").keypress(function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && e.which != 40 && e.which != 41 && e.which != 45 && e.which != 32 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });
    $(document).ready(function() {

        // check cookies are enable or not
        Cookies.set('is_created_cookie', 'yes');
        if(Cookies.get('is_created_cookie')) {
            Cookies.remove('is_created_cookie');
        } else {
            $('.form-body').prepend(`<div class="alert alert-danger">Your browser has cookies disabled. 
                Make sure that your cookies are enabled and try again.</div>`);
        }

        $('#birth_date').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
        });
        $('#birth_date').change(function() {
            $(this).valid();
        })

        $(".sign-up-button").click(function() {
            $("#frmsignup").submit();
            $(".sign-up-button").addClass("disabled");
            $(".sign-up-button").text("Please Wait..");
        });
    });
</script>
@endpush