@extends('layouts.auth')

@section('title', 'Forgot Password')

@section('content')
<div class="card shadow-sm border-0 rounded-4">
    <div class="card-body p-4">
        <h5 class="card-title fw-bold text-dark mb-2">Forgot Password?</h5>
        <p class="text-muted small mb-4">Enter your registered email address and we'll send you a password reset link.</p>

        <form id="forgotPasswordForm" method="POST" action="{{ route('admin.forgot-password.send') }}">
            @csrf

            <div class="mb-4">
                <label for="email" class="form-label text-secondary small fw-medium">Email Address</label>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-envelope text-muted"></i></span>
                    <input type="email" class="form-control bg-light" id="email" name="email" placeholder="admin@example.com" required autofocus>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 rounded-3 fw-semibold mb-3">Send Reset Link</button>

            <div class="text-center">
                <a href="{{ route('admin.login') }}" class="text-secondary small text-decoration-none">
                    <i class="bi bi-arrow-left me-1"></i> Back to Login
                </a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function () {
        $('#forgotPasswordForm').validate({
            rules: {
                email: { required: true, email: true }
            },
            messages: {
                email: { required: 'Please enter your email address.', email: 'Please enter a valid email address.' }
            },
            errorElement: 'div',
            errorClass: 'invalid-feedback invalid-feedback-custom text-danger small mt-1',
            errorPlacement: function (error, element) {
                if (element.closest('.input-group').length) {
                    error.insertAfter(element.closest('.input-group'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
                $(element).closest('.input-group').addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                const group = $(element).closest('.input-group');
                if (group.length && !group.find('.is-invalid').length) {
                    group.removeClass('is-invalid');
                }
            },
            submitHandler: function (form) {
                AdminAjax.submit({
                    form: form
                });
            }
        });
    });
</script>
@endpush