@extends('frontend.layouts.master')

@section('page_title')
    {{ __('accountseller.register.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')   
    <div class="py-5 text-center text-white align-items-center d-flex h-100 portada jarallax" style="">
        <div class="tinte2"></div>
        <div class="container py-5">
            <div class="row text-center">
                <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                    <h1 class="display-4 mb-4 sombratexto text-light">
                        {{ __('accountseller.register.title') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>    
    <div class="container">
        <div class="row mt-4 d-flex justify-content-center ">
            <div class=" col-lg-8  col-md-12">
                <div class="pb-4">
                    <form class="login-register" method="post" action="{{ route('backendseller.register.store') }}" @submit.prevent="onSubmit">

                        {{ csrf_field() }}

                        <p class="mb-4 s-text"><span style="color: red;font-size: 18px; ">*</span> {{ __('account.register.required-fields') }}</p>

                        <div class="form-group mb-4" :class="[errors.has('shop_title') ? 'has-error' : '']">
                            <label class="form-label required" for="shop_title">{{ __('accountseller.register.form.shop_title') }}</label>
                            <input type="text" name="shop_title" value="{{ old('shop_title') }}" id="shop_title" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.shop_title') }}&quot;" />
                            <span class="control-error" v-if="errors.has('shop_title')">@{{ errors.first('shop_title') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('first_name') ? 'has-error' : '']">
                            <label class="form-label required" for="first_name">{{ __('accountseller.register.form.first_name') }}</label>
                            <input type="text" name="first_name" value="{{ old('first_name') }}" id="first_name" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.first_name') }}&quot;" />
                            <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('last_name') ? 'has-error' : '']">
                            <label class="form-label required" for="last_name">{{ __('accountseller.register.form.last_name') }}</label>
                            <input type="text" name="last_name" value="{{ old('last_name') }}" id="last_name" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.last_name') }}&quot;" />
                            <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('email') ? 'has-error' : '']">
                            <label class="form-label required" for="email">{{ __('accountseller.register.form.email') }}</label>
                            <input type="email" name="email" value="{{ old('email') }}" id="email" v-validate="'required|email'" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.email') }}&quot;" />
                            <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('phone') ? 'has-error' : '']">
                            <label class="form-label required" for="phone">{{ __('accountseller.register.form.phone') }}</label>
                            <input type="text" name="phone" value="{{ old('phone') }}" id="phone" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.phone') }}&quot;" />
                            <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('password') ? 'has-error' : '']">
                            <label class="form-label required" for="password">{{ __('accountseller.register.form.password') }}</label>
                            <div class="input-group">
                                <input type="password" ref="password" value="{{ old('password') }}" name="password" v-validate="'required|min:8'" id="password" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.password') }}&quot;" />
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="fa fa-eye"></i></div>
                                </div>
                            </div>
                            <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
                            <label class="form-label required" for="password_confirmation">{{ __('accountseller.register.form.password_confirmation') }}</label>
                            <div class="input-group">
                                <input type="password" value="{{ old('password_confirmation') }}" name="password_confirmation" v-validate="'required|min:8|confirmed:password'" id="password_confirmation" class="form-control" data-vv-as="&quot;{{ __('accountseller.register.form.password_confirmation') }}&quot;" />
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="fa fa-eye"></i></div>
                                </div>
                            </div>
                            <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
                        </div>

                        {!! RecaptchaV3::field('register_seller', 'g-recaptcha-response') !!}
                        

                        <div class="form-check mt-2" :class="[errors.has('cond') ? 'has-error' : '']">
                                            
                            <input type="checkbox" v-validate="'required'" name="cond" class="form-check-input" id="conditions" data-vv-as="&quot;{{ __('account.register.cond-name') }}&quot;">
                            <label for="conditions" class="form-check-label mandatory">{{ __('accountseller.register.form.cond-accept') }} 
                                <a target="_blank" href="{{ __('accountseller.register.form.cond-link') }} ">{{ __('accountseller.register.form.cond-text-link') }}</a>
                            </label>
                            <br>
                            <span class="control-error" v-if="errors.has('cond')">@{{ errors.first('cond') }}</span>
                        </div>

                        <!-- Submit button -->
                        <button type="submit" class="site-btn link wow bounceInUp btn-block mt-4 mb-4">{{ __('accountseller.register.submit') }}</button>

                        <!-- Register buttons -->
                        <div class="text-center">
                            <p>{{ __('accountseller.register.btn-login') }} <a href="{{ route('backend.session.login') }}">{{ __('accountseller.login.menu') }}</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

<script>

var viewPass = false;
$(window).ready(function () {

    $('.input-group-text').click(function() {

        if(!viewPass){
            $('#password_confirmation').attr('type', 'text');
            $('#password').attr('type', 'text');
            $('.fa-eye').addClass('fa-eye-slash');
            $('.fa-eye').removeClass('fa-eye');
        } else {
            $('#password_confirmation').attr('type', 'password');
            $('#password').attr('type', 'password');
            $('.fa-eye-slash').addClass('fa-eye');
            $('.fa-eye-slash').removeClass('fa-eye-slash');
        }

        viewPass = !viewPass;

    });

});

</script>

@endpush