@extends('layouts.master')
    
@section('title', 'Reset Password')
    
@section('style')
	<style>

	</style>
@endsection
    
@section('script')
	<script>


    $(document).ready(function() {
        checkPassword();
                        // $("#charac_8").hide();
            // alert('1234');

     })

function checkPassword() {

let passwordNew = $('#password_new').val();
    console.log('passwordNew',passwordNew);

                // $("#charac_8").hide();

        if(passwordNew != ''){

                if (passwordNew.length < 8) {

                    $("#charac_8").show();
                    $("#charac_big").hide();     // แสดงแจ้งเตือนเรื่องตัวอักษร/ตัวเลข
                    $("#submit_button").hide();
                    // alert('1234');

                } else if (!/[a-zA-Z]/.test(passwordNew) || !/[0-9]/.test(passwordNew)) {
                            // ถ้าไม่มีตัวอักษรหรือตัวเลข
                    $("#charac_8").hide();       // ซ่อนแจ้งเตือนความยาว
                    $("#charac_big").show();     // แสดงแจ้งเตือนเรื่องตัวอักษร/ตัวเลข
                    $("#submit_button").hide();
        
            

                } else {

                    $("#charac_8").hide();
                    $("#charac_big").hide();
                    $("#submit_button").show();

            
                }

        }else{

                    $("#charac_8").hide();
                    $("#charac_big").hide();
                    $("#submit_button").hide();


        }
            
    };

function togglePassword(passwordId, toggleId) {
        let passwordInput = document.getElementById(passwordId);
        let toggleIcon = document.querySelector(`#${toggleId} i`);

        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            toggleIcon.classList.remove("uil-eye");
            toggleIcon.classList.add("uil-eye-slash");
        } else {
            passwordInput.type = "password";
            toggleIcon.classList.remove("uil-eye-slash");
            toggleIcon.classList.add("uil-eye");
        }
    }

	</script>
@endsection
    


@section('content')
    
@include('layouts.header')
    
<section class="video-wrapper bg-overlay bg-overlay-gradient px-3 px-md-12 mt-0 min-vh-60 bg-cover bg-image"
data-image-src="{{ asset('/logo/Home Page 2.png') }}"
style="background-image: url({{ asset('/logo/Home Page 2.png') }}); background-size: cover; background-position: center;filter: brightness(1.2);">
<div class="video-content">
	<div class="container-fluid">
		<div class="row">
		  <h2 class="display-1 fs-60 mb-4 text-white animate__animated animate__slideInDown animate__delay-1s"
						 align="Left">
						SIIT Scholarship and Loan <br>Repayment System </h2>
		</div>
	</div>
</div>
</section>

<section class="wrapper bg-light">
	<div class="container py-14 py-md-16">
		<div class="row gx-lg-8 gx-xl-12">

			<div class="col-md-8 col-lg-7 col-xl-6 col-xxl-5">
				<h5 class="display-1 mb-3">@yield('title')</h5>
				<p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
			</div>
        
			<div class="col-lg-12">
				<div class="blog single">
					<div class="card">
						<div class="card-body">
                        	
							<form class="contact-form" method="post" action="{{ url('/forgotpasswordupdate') }}">
								{{ csrf_field() }}
								
								<input type="hidden" name="user_id" value="{{ $id }}">
								<input type="hidden" name="code" value="{{ $code }}">
								<input type="hidden" name="forgotpassword_id" value="{{ $check->forgotpassword_id }}">
								
								<div class="messages"></div>
								<div class="row gx-4">

								

									<div id="charac_8" style="color: red ;">Please enter a password of at least 8-20 characters.</div>	
                                    <div id="charac_big" style="color: red ;">Your password must contain at least one letter (a-Z) and one number (0-9).</div>

									<div class="col-md-12">
										<div class="form-floating password-field mb-4">
											<input type="password" id="password_new" name="password_new" class="form-control" placeholder="New Password" onchange="checkPassword()" required>
											<label for="password_new">New Password *</label>
									
											<span class="password-toggle" id="toggle-password-new" onclick="togglePassword('password_new', 'toggle-password-new')">
												<i class="uil uil-eye"></i>
											</span>
									
											<div class="valid-feedback">Looks good!</div>
											<div class="invalid-feedback">Please enter your New Password.</div>
										</div>
									</div>
									
									<div class="col-md-12">
										<div class="form-floating password-field mb-4">
											<input type="password" id="password_confirm" name="password_confirm" class="form-control" placeholder="Confirm New Password" required>
											<span class="password-toggle" id="toggle-password-confirm" onclick="togglePassword('password_confirm', 'toggle-password-confirm')">
												<i class="uil uil-eye"></i>
											</span>
											<label for="password_confirm">Confirm New Password *</label>
											<div class="valid-feedback">Looks good!</div>
											<div class="invalid-feedback">Please confirm your new password.</div>
										</div>
									</div>


									<div id="submit_button"  class="col-12 text-center">
										<input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Submit" name="submit">
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


@include('layouts.footer')
    
@endsection