@extends('layouts.auth')
@section('title', 'Confirm password')
@section('auth_title', 'Confirm your password')
@section('auth_subtitle', 'This is a secure area. Please confirm your password to continue.')

@section('content')

<form method="POST" action="{{ route('password.confirm') }}" class="auth-form" novalidate>
    @csrf

    <div class="auth-group">
        <label for="password" class="auth-label">Password</label>
        <div class="auth-input-wrap">
            <svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
            <input type="password" id="password" name="password"
                   class="auth-input has-trailing @error('password') is-invalid @enderror"
                   placeholder="Enter your current password"
                   required autocomplete="current-password" autofocus>
            <button type="button" class="auth-trailing-btn" id="togglePassword" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleIconOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleIconOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
        @error('password')
            <div class="auth-error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                {{ $message }}
            </div>
        @enderror
    </div>

    <button type="submit" class="auth-submit">
        Confirm
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
    </button>
</form>

@endsection

@push('scripts')
<script>
document.getElementById('togglePassword').addEventListener('click', function () {
    var pw = document.getElementById('password');
    var on = document.getElementById('toggleIconOn');
    var off = document.getElementById('toggleIconOff');
    if (pw.type === 'password') { pw.type = 'text'; on.style.display = 'none'; off.style.display = 'block'; }
    else { pw.type = 'password'; on.style.display = 'block'; off.style.display = 'none'; }
});
</script>
@endpush