@extends('layouts.front')

@section('content')
<div class="jel-portal-page">
    @include('front.partials.flash-messages')

    <section class="jel-password-layout">
        <div class="jel-history-intro">
            <span class="jel-portal-kicker">Account Security</span>
            <h1>Update your student password.</h1>
            <p>Secure password set karke account access safe rakhiye. Password update ke baad next login se naya password use hoga.</p>
        </div>

        <section class="jel-form-panel">
            <div class="jel-form-panel-head">
                <h2>Change Password</h2>
                <p>New password aur confirm password same hona chahiye.</p>
            </div>

            <form class="jel-portal-form" action="{{ route('admin.userpasswordsave') }}" method="post">
                @csrf

                <label class="jel-portal-field">
                    <span>New Password</span>
                    <div class="jel-password-wrap">
                        <input type="password" name="password" id="password" maxlength="50" minlength="6" placeholder="Enter your new password" required>
                        <button class="jel-password-toggle-btn" id="passwordToggle" type="button">Show</button>
                    </div>
                    @error('password')
                        <small class="jel-entry-error">{{ $message }}</small>
                    @enderror
                </label>

                <label class="jel-portal-field">
                    <span>Confirm Password</span>
                    <input type="password" name="confirmpassword" id="confirmpassword" maxlength="50" minlength="6" placeholder="Confirm your password" required>
                    @error('confirmpassword')
                        <small class="jel-entry-error">{{ $message }}</small>
                    @enderror
                </label>

                <button class="jel-portal-button" type="submit">Update Password</button>
            </form>
        </section>
    </section>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const passwordField = document.getElementById('password');
    const passwordToggle = document.getElementById('passwordToggle');

    if (passwordField && passwordToggle) {
        passwordToggle.addEventListener('click', function () {
            const isPassword = passwordField.getAttribute('type') === 'password';
            passwordField.setAttribute('type', isPassword ? 'text' : 'password');
            passwordToggle.textContent = isPassword ? 'Hide' : 'Show';
        });
    }
});
</script>
@endpush
@endsection
