@extends('layouts.master')

@section('title', 'ITV Live')

@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">
                        <ul class="p-menu">
                            <li ><a href="{{route('profile.dasboard')}}"><img src="./images/account/user.png" alt=""> <span>{{trans('message.profile')}}</span></a></li>
                            {{-- <li><a href="#"><img src="./images/account/smartphone.png" alt=""><span>{{trans('message.devices')}}</span></a></li> --}}
                            <li><a href="{{route('account-transaction')}}"><img src="./images/account/file.png" alt=""><span>{{trans('message.transaction')}}</span></a></li>
                            <li><a href="{{route('account-service')}}"><img src="./images/account/customer.png" alt=""><span>{{trans('message.services')}}</span></a></li>
                            <li class="active"><a href="{{route('change_password')}}"><img src="./images/account/key.png" alt=""><span>{{trans('message.change_password')}}</span></a></li>
                            <li class="line"></li>
                            <li><a href="{{route('logout')}}"><img src="./images/account/logout.png" alt=""><span>{{trans('message.logout')}}</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="w3-col s12 m9">
                    <div class="w3-card">
						@if($errors->has('errorpassword'))
							<div id="auth" class="w3-modal w3-modal-err">
								<div class="w3-modal-content-err">
									<div class="w3-containe w3-center">
										<h3>{{ __('website.notify') }}</h3>
										{{ $errors->first('errorpassword') }}
									</div>
								</div>
							</div>
						@endif
						@if($errors->has('errorrepassword'))
							<div id="auth" class="w3-modal w3-modal-err">
								<div class="w3-modal-content-err">
									<div class="w3-containe w3-center">
										<h3>{{ __('website.notify') }}</h3>
										{{ $errors->first('errorrepassword') }}
									</div>
								</div>
							</div>
						@endif
                        <h4 class="fw-700">{{trans('message.change_password')}}</h4>
                        <form action="{{route('post_change_password')}}" method="post">
                            {{ csrf_field() }}
                            <div class="personal__account-security mt-30">
								<div class="form-input">
									<label class="w3-text fw-700 @if($errors->has('password')) w3-text-red @endif" for="password">{{trans('message.password')}}</label>
                                    <input type="password" class="w3-input w3-border w3-round-large w3-change-password w3-input-coler @if($errors->has('password')) w3-border-red @endif" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="password" name="password" value="{{ old('password') }}" placeholder/>
                                    @if($errors->has('password'))
                                        <div class="error w3-text-red">{{ $errors->first('password') }}</div>
                                    @endif
                                </div>
                                <div class="w3-row">
									<div class="w3-col s6">
                                        <label class="w3-text fw-700 @if($errors->has('new_password')) w3-text-red @endif" for="new_password">{{__('website.new_password')}}</label>
                                        <input type="password" class="w3-input w3-border w3-round-large w3-change-password w3-input-coler @if($errors->has('new_password')) w3-border-red @endif" value="{{ old('new_password') }}" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="new_password" name="new_password" placeholder/>
                                        @if($errors->has('new_password'))
                                            <div class="error w3-text-red">{{ $errors->first('new_password') }}</div>
                                        @endif
                                    </div>
                                    <div class="w3-col s6">
                                        <label class="w3-text fw-700 @if($errors->has('password_confirmation')) w3-text-red @endif" for="password_confirmation">{{__('website.confirmation_password')}}</label>
                                        <input type="password" class="w3-input w3-border w3-round-large w3-change-password w3-input-coler @if($errors->has('password_confirmation')) w3-border-red @endif" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="password_confirmation" value="{{ old('password_confirmation') }}" name="password_confirmation" placeholder/>
                                        @if($errors->has('password_confirmation'))
                                            <div class="error w3-text-red">{{ $errors->first('password_confirmation') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="item">
                                        <button type="submit" class="btn btn-primary">{{trans('message.update')}}</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