@extends('layouts.guest')
@section('title', 'Reset Password')
@section('content')
<div class="workflow-page">
    <div
        class="workflow-card"
        style="
            max-width: 600px;
            margin: 50px auto;
        ">
        <div class="workflow-card-header">
            Reset Password
        </div>
        <div class="workflow-card-body">
            <p class="text-muted mb-4">
                Create a strong password for your EPDF Health System account.
            </p>
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form
                method="POST"
                action="{{ route('password.update') }}">
                @csrf
                <input
                    type="hidden"
                    name="token"
                    value="{{ $token }}">
                <div class="mb-3">
                    <label class="workflow-label">
                        Email Address
                    </label>
                    <input
                        type="email"
                        name="email"
                        class="workflow-input"
                        value="{{ old('email', $email) }}"
                        readonly>
                </div>
                <div class="mb-3">
                    <label class="workflow-label">
                        New Password
                    </label>
                    <div class="position-relative">
                        <input
                            type="password"
                            id="password"
                            name="password"
                            class="workflow-input"
                            autocomplete="new-password"
                            required>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="workflow-label">
                        Confirm Password
                    </label>
                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        class="workflow-input"
                        autocomplete="new-password"
                        required>
                </div>
                {{-- PASSWORD REQUIREMENTS --}}
                <div
                    class="border rounded p-3 mb-4 bg-light">
                    <h6 class="mb-3">
                        Password Requirements
                    </h6>
                    <div id="rule-length" class="text-danger">
                        ✖ Minimum 12 characters
                    </div>
                    <div id="rule-upper" class="text-danger">
                        ✖ At least one uppercase letter
                    </div>
                    <div id="rule-lower" class="text-danger">
                        ✖ At least one lowercase letter
                    </div>
                    <div id="rule-number" class="text-danger">
                        ✖ At least one number
                    </div>
                    <div id="rule-symbol" class="text-danger">
                        ✖ At least one special character
                    </div>
                    <div id="rule-match" class="text-danger">
                        ✖ Passwords match
                    </div>
                    <hr>
                    <strong>
                        Password Strength
                    </strong>
                    <div
                        class="progress mt-2"
                        style="height:12px;">
                        <div
                            id="strengthBar"
                            class="progress-bar bg-danger"
                            style="width:0%">
                        </div>
                    </div>
                    <small
                        id="strengthText"
                        class="text-muted">
                        Very Weak
                    </small>
                </div>
                <button
                    id="submitButton"
                    type="submit"
                    class="workflow-btn workflow-btn-primary w-100"
                    disabled>
                    Reset Password
                </button>
            </form>
        </div>
        <div class="workflow-card-footer text-center">
            <a
                href="{{ route('login') }}">
                Back to Login
            </a>
        </div>
    </div>
</div>
<script>
const password = document.getElementById('password');
const confirmPassword = document.getElementById('password_confirmation');
const bar = document.getElementById('strengthBar');
const text = document.getElementById('strengthText');
const submit = document.getElementById('submitButton');
function tick(id, ok, label)
{
    const e = document.getElementById(id);
    if(ok){
        e.className='text-success';
        e.innerHTML='✔ '+label;
    }else{
        e.className='text-danger';
        e.innerHTML='✖ '+label;
    }
}
function checkPassword(){
    const p=password.value;
    const c=confirmPassword.value;
    const rules={
        length:p.length>=12,
        upper:/[A-Z]/.test(p),
        lower:/[a-z]/.test(p),
        number:/[0-9]/.test(p),
        symbol:/[^A-Za-z0-9]/.test(p),
        match:p!=='' && p===c
    };
    tick('rule-length',rules.length,'Minimum 12 characters');
    tick('rule-upper',rules.upper,'At least one uppercase letter');
    tick('rule-lower',rules.lower,'At least one lowercase letter');
    tick('rule-number',rules.number,'At least one number');
    tick('rule-symbol',rules.symbol,'At least one special character');
    tick('rule-match',rules.match,'Passwords match');
    let score=0;
    Object.values(rules).forEach(r=>{
        if(r) score++;
    });
    const percent=(score/6)*100;
    bar.style.width=percent+'%';
    if(score<=2){
        bar.className='progress-bar bg-danger';
        text.innerHTML='Weak';
    }else if(score<=4){
        bar.className='progress-bar bg-warning';
        text.innerHTML='Fair';
    }else if(score===5){
        bar.className='progress-bar bg-info';
        text.innerHTML='Good';
    }else{
        bar.className='progress-bar bg-success';
        text.innerHTML='Strong';
    }
    submit.disabled=(score!==6);
}
password.addEventListener('keyup',checkPassword);
confirmPassword.addEventListener('keyup',checkPassword);
</script>
@endsection