@extends('layouts.agency')

@section('title', __('website.add_account').' | ITVJP.COM Seller')

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
<div id="content">
    <section id="account" class="mb-30">
        <div class="w3-container">
            <h3 class="fw-700">{{trans('message.accounts_and_services')}} </h3>
            <p>{{ @$sub_page }}</p>
            <div class="w3-row mt-20">
                <div class="w3-col s12 m3 mb-30">
                    <div class="w3-card pro-menu">
                        @include('pages.agency.profile.nav')
                    </div>
                </div>
                <div class="w3-col s12 m9">
                    <div class="w3-card">
                        <h4 class="fw-700 text-center">{{__('website.create_an_account')}} - {{$services->name}} ({{__('website.remaining')}} {{$agency_service->total_account - $agency_service->used_account}} {{__('website.account')}})</h4>
                        <form action="{{route('agency.postAddAccount.agency',$service_id)}}" method="post">
                            {{ csrf_field() }}
                            <div class="personal__account-security mt-30">
                                <div class="form-input">
                                    <label class="w3-text text-bold @if($errors->has('email')) w3-text-red @endif" for="email">{{trans('message.email')}}</label>
                                    <input type="email" class="@if($errors->has('email')) w3-border-red @endif w3-input w3-border w3-round-large w3-change-password w3-input-coler" id="email" value="{{ old('email') }}" name="email" placeholder=""/>
                                    @if($errors->has('email'))
                                        <div class="error w3-text-red">{{ $errors->first('email') }}</div>
                                    @endif
                                </div>
                                <div class="form-input">
                                    <label class="w3-text fw-700 @if($errors->has('phone')) w3-text-red @endif" for="phone">{{trans('message.phone')}}</label>
                                    <input type="text" class="@if($errors->has('phone')) w3-border-red @endif w3-input w3-border w3-round-large w3-change-password w3-input-coler" autocomplete="off" autofill="off" id="phone"  name="phone" placeholder="" value="{{ old('phone') }}"/>
                                    @if($errors->has('phone'))
                                        <div class="error w3-text-red">{{ $errors->first('phone') }}</div>
                                    @endif
                                </div>
                                <div class="w3-row">
                                    <div class="w3-col m6 s12">
                                        <label class="w3-text fw-700 @if($errors->has('password')) w3-text-red @endif" for="password">{{trans('message.password')}}</label>
                                        <input type="password" class="@if($errors->has('password')) w3-border-red @endif w3-input w3-border w3-round-large w3-change-password w3-input-coler"  autocomplete="off" autofill="off" id="password"  name="password" placeholder/>
                                        @if($errors->has('password'))
                                            <div class="error w3-text-red">{{ $errors->first('password') }}</div>
                                        @endif
                                    </div>
                                    <div class="w3-col m6 s12">
                                        <label class="w3-text fw-700 @if($errors->has('password')) w3-text-red @endif" for="password_confirmation">{{trans('message.confirm_password')}}</label>
                                        <input type="password" class="@if($errors->has('password')) w3-border-red @endif w3-input w3-border w3-round-large w3-change-password w3-input-coler" id="password_confirmation"  name="password_confirmation" placeholder/>
                                        @if($errors->has('password'))
                                            <div class="error w3-text-red">{{ $errors->first('password') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="item">
                                        <button type="submit" class="btn btn-primary">{{trans('website.create_account')}}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>  
</div>
@stop

@section('scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			$('input').attr('autocomplete', 'off');
			$('.service').click(function() {
				var price = $(this).attr('price');
				var duration = $(this).attr('duration');
				$('#duration').text(duration);
				$('#total').text(price+'$');
				$('#price').text(price+'$');
				$('.total').text(price+'$');
			});
		    
		});

		$('#email').on('input', function() {
	    	var email = $('#email').val();
	        var errorMessage = $('#error-message');
	        var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

	        if (!emailPattern.test(email)) {
	        	$('#email').removeClass('success');
	            $('#emailError').text('{{trans('message.invalid_email')}}');
	        } else {

	        	var urlCheckEmail = "{{ route('checkEmail') }}";
	        	$.post('/check-email', {email: email, _token: _token}, function(data){
		            if(data.exists){
		                $('#email').removeClass('success');
	            		$('#emailError').text('{{trans('message.email_exists')}}');
		            } else {
		                $('#email').addClass('success');	
	            		$('#emailError').text('');
		            }
		        }, 'json');
	        }
	    });

	    $('#password').on('input', function() {
	        var passwordValue = $('#password').val();
	        var errorMessage = $('#passwordError');
	        var rePassword = $('#re-password').val();

	        if (passwordValue.length < 6) {
	        	$('#password').removeClass('success');
	            errorMessage.text('{{__('message.password_length')}}');
	        } else if (/\s/.test(passwordValue)) {
	        	$('#password').removeClass('success');
	            errorMessage.text('{{__('message.password_spaces')}}');
	        } else if( rePassword != "" && passwordValue != rePassword){
	        	$('#password').removeClass('success');
	        	errorMessage.text('{{__('message.password_confirmation')}}');
	        }else {
	        	$('#password').addClass('success');
				$('#password').removeClass('w3-input-coler');
	            errorMessage.text('');
	        }
	    });

        $('#new_password').on('input', function() {
	        var passwordValue = $('#new_password').val();
	        var errorMessage = $('#new_passwordError');
	        var rePassword = $('#re-password').val();

	        if (passwordValue.length < 6) {
	        	$('#new_password').removeClass('success');
	            errorMessage.text('{{__('message.password_length')}}');
	        } else if (/\s/.test(passwordValue)) {
	        	$('#new_password').removeClass('success');
	            errorMessage.text('{{__('message.password_spaces')}}');
	        } else if( rePassword != "" && passwordValue != rePassword){
	        	$('#new_password').removeClass('success');
	        	errorMessage.text('{{__('message.password_confirmation')}}');
	        }else {
	        	$('#new_password').addClass('success');
				$('#new_password').removeClass('w3-input-coler');
	            errorMessage.text('');
	        }
	    });

	    $('#re-password').on('input', function() {
	        var passwordValue = $('#new_password').val();
	        var rePassword = $('#re-password').val();
	        var errorMessage = $('#rePasswordError');

	        if( passwordValue != rePassword){
	        	$('#re-password').removeClass('success');
	        	errorMessage.text('{{__('message.password_confirmation')}}');
	        }else {
	        	$('#re-password').addClass('success');
				$('#re-password').removeClass('w3-input-coler');
	            errorMessage.text('');
	        }
	    });

	    $('#password, #email, #re-password').on('input', function() {
	    	if( $('.success').length != 3  ){
	    		$('#submit').addClass('disabled');
	    		$('#submit').attr('disabled', true);
	    	}else {
	    		$('#submit').removeClass('disabled');
	    		$('#submit').attr('disabled', false);
	    	}
	    });


		function validateEmail(email) {
		    var re = /\S+@\S+\.\S+/;
		    return re.test(email);
		}

		var modal = document.getElementById('auth');
		var timeout = 3000;
		setTimeout(function() {
			modal.style.display = 'none';
		}, timeout);

		window.addEventListener('click', function(event) {
			if (event.target !== modal) {
				modal.style.display = 'none';
			}
    	});
	</script>
@stop