@extends('layouts.public')

@section('title', 'Forgot PIN - BANKING')

@section('content')

<div class="auth-page">
    <div class="auth-center-wrap">
        <div class="auth-card">

            <div class="auth-card-body">

                {{-- Back Link --}}
                <a href="{{ route('login') }}" class="auth-back-link">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Back to Login
                </a>

                <div class="auth-card-header auth-card-header-center">
                    <div class="auth-forgot-icon">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="#e8f5f1"/>
                            <rect x="12" y="18" width="16" height="12" rx="3" stroke="#0D6B58" stroke-width="2"/>
                            <path d="M16 18v-2a4 4 0 118 0v2" stroke="#0D6B58" stroke-width="2" stroke-linecap="round"/>
                            <circle cx="20" cy="24" r="2" fill="#0D6B58"/>
                            <path d="M20 26v1.5" stroke="#0D6B58" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h2 class="auth-card-title">Forgot your PIN?</h2>
                    <p class="auth-card-subtitle">Enter your email or username to receive a PIN reset link</p>
                </div>

                {{-- Success Message --}}
                @if(session('success'))
                <div class="auth-alert auth-alert-success">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M6 9l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ session('success') }}
                </div>
                @endif

                {{-- Validation Errors --}}
                @if($errors->any())
                <div class="auth-alert auth-alert-error">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M9 5.5v4M9 12h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    <div>
                        @foreach($errors->all() as $error)
                        <div>{{ $error }}</div>
                        @endforeach
                    </div>
                </div>
                @endif

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

                    <div class="auth-field">
                        <label class="auth-label" for="email">Email or Username</label>
                        <div class="auth-input-wrap">
                            <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="4" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 6l7 4 7-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <input
                                type="text"
                                id="email"
                                name="email"
                                class="auth-input @error('email') is-error @enderror"
                                value="{{ old('email') }}"
                                placeholder="Enter your email or username"
                                required
                                autofocus
                            >
                        </div>
                        @error('email')
                        <span class="auth-field-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="auth-submit" id="forgotBtn">
                        <span class="auth-submit-text">Send Reset Link</span>
                        <span class="auth-submit-spinner" style="display:none">
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/><path d="M9 2a7 7 0 017 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                        </span>
                    </button>
                </form>

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

<style>
.auth-page {
    min-height: calc(100vh - 70px);
    background: #f8fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.auth-center-wrap {
    width: 100%;
    max-width: 440px;
}
.auth-card-body {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf0;
}
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
    margin-bottom: 28px;
    transition: color 0.2s;
}
.auth-back-link:hover {
    color: #0D6B58;
}
.auth-card-header-center {
    text-align: center;
    margin-bottom: 32px;
}
.auth-forgot-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.auth-card-title {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
}
.auth-card-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Alerts */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.auth-alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.auth-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.auth-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}
.auth-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    background: #f8fafb;
    transition: all 0.2s ease;
    outline: none;
}
.auth-input:focus {
    border-color: #0D6B58;
    background: white;
    box-shadow: 0 0 0 3px rgba(13,107,88,0.1);
}
.auth-input.is-error {
    border-color: #dc2626;
}
.auth-input::placeholder {
    color: #94a3b8;
}
.auth-field-error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 2px;
}

/* Submit */
.auth-submit {
    width: 100%;
    padding: 13px 24px;
    background: #0D6B58;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-submit:hover {
    background: #094E41;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13,107,88,0.3);
}
.auth-submit:active {
    transform: translateY(0);
}
.auth-submit-spinner svg {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    .auth-card-body {
        padding: 28px 20px;
    }
    .auth-card-title {
        font-size: 20px;
    }
}
</style>

@push('scripts')
<script>
document.getElementById('forgotForm').addEventListener('submit', function() {
    var btn = document.getElementById('forgotBtn');
    btn.querySelector('.auth-submit-text').style.display = 'none';
    btn.querySelector('.auth-submit-spinner').style.display = 'inline-flex';
    btn.disabled = true;
});
</script>
@endpush

@endsection