@extends('front.layout')

@section('title')
{{ __('a4') }} - {{ __('n1') }}
@endsection

@section('content')
    <div class="container py-5 dir">

        <div class="w-75 mx-auto my-5 p-5 border border-1 rounded-2 bg3">
            <h1 class="text-center fw-bold">
            {{ __('a4') }}
            </h1>
            <form action="{{ route('reset.logic') }}" method="POST">

                @csrf
                @method('POST')

                <div class="form-outline mb-4">
                    <label class="form-label fw-bold" for="password4">{{ __('a6') }}</label>
                    <input type="password" id="password4" name="password" class="form-control dir fw-bold" onkeyup="checkPass1($(this).val())" required/>
                    <input type="hidden" id="" name="email" class="form-control dir fw-bold" value="{{ request()->query('email') }}" required/>
                    <p class="p-more-81 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                    {{ __('a7') }}
                    </p>
                    <p class="p-must-number1 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                    {{ __('a8') }}
                    </p>
                    <p class="p-must-spical1 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                    {{ __('a9') }}
                    </p>
                    <p class="p-must-ca1 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                    {{ __('a10') }}
                    </p>
                    <p class="p-must-lo1 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                    {{ __('a11') }}
                    </p>
                </div>

                <div class="form-outline mb-4">
                    <label class="form-label fw-bold" for="password_confirmation3">{{ __('a12') }}</label>
                    <input type="password" id="password_confirmation3" name="password_confirmation" class="form-control dir fw-bold" required/>
                    <small class="text-danger fw-bold passwordError3" style="display: none;">{{ __('a13') }}</small>
                </div>

                <button type="submit" class="btn btn-primary btn-block mb-4 w-100 fw-bold signUp">{{ __('a14') }}</button>

            </form>
        </div>

    </div>

    {{-- JQuery --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {{-- /JQuery --}}

<script>
    function checkPass1(password) {
            var xx = 0;
            
            // 8 Or More
            if (password.length > 2) {
                if (password.length < 8) {
                    $('.p-more-81').slideDown();
                    xx = 0;
                } else {
                    $('.p-more-81').slideUp();
                    xx = 1;
                }
            }
            
            // Number
            if (password.length > 4) {
                var matches = password.match(/\d+/g);
                if (matches == null) {
                    $('.p-must-number1').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-number1').slideUp();
                    xx = 1;
                }
            }
            
            // Special char
            if (password.length > 4) {
                var matches2 = password.match(/\W|_/g);
                if (matches2 == null) {
                    $('.p-must-spical1').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-spical1').slideUp();
                    xx = 1;
                }
            }
            
            // Capital char
            if (password.length > 4) {
                var matches3 = password.match(/[A-Z]/g);
                if (matches3 == null) {
                    $('.p-must-ca1').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-ca1').slideUp();
                    xx = 1;
                }
            }
            
            
            // Lower char
            if (password.length > 4) {
                var matches4 = password.match(/[a-z]/g);
                if (matches4 == null) {
                    $('.p-must-lo1').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-lo1').slideUp();
                    xx = 1;
                }
            }
            
            if (password.length == 0) {
                $('.p-must-number1').slideUp();
                $('.p-more-81').slideUp();
                $('.p-must-spical1').slideUp();
                $('.p-must-ca1').slideUp();
                $('.p-must-lo1').slideUp();
            }
            
            if (xx == 0) {
                $('.signUp').addClass('disabled');
            } else {
                $('.signUp').removeClass('disabled');
            }
            
        }
        
        $('#password_confirmation3').on('keyup', function () {
            if ($('#password_confirmation3').val() != $('#password4').val()) {
                $('.passwordError3').slideDown();
                $('.signUp').addClass('disabled');
            } else {
                $('.passwordError3').slideUp();
                $('.signUp').removeClass('disabled');
            }
        });
</script>
@endsection