@extends('frontend.layouts.main')
@section('title', 'Lấy lại mật khẩu')

@section('css')
<style>
    .form-login-section {
        padding: 40px 0;
    }

    .form-reset {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-width: 500px;
        margin: 0 auto;
        padding: 30px;
    }

    .form-reset .header {
        text-align: center;
        margin-bottom: 30px;
    }

    .form-reset .header h1 {
        font-size: 26px;
        color: #1aace3;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .form-reset .header p {
        color: #666;
        font-size: 15px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
        color: #333;
    }

    .form-group input {
        border-radius: 8px;
        border: 1px solid #ccc;
        padding: 10px 14px;
        width: 100%;
        font-size: 14px;
    }

    .submit-btn {
        background: #1aace3;
        color: #fff;
        border: none;
        border-radius: 8px;
        width: 100%;
        padding: 12px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .submit-btn:hover {
        background: #095b36;
    }

    .alert {
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }

    .invalid-feedback {
        color: #e74c3c;
        font-size: 13px;
        margin-top: 5px;
    }
</style>
@endsection

@section('content')
<section class="form-login-section">
    <div class="form-reset">
        <div class="header">
            <h1>Lấy lại mật khẩu</h1>
            <p>Vui lòng nhập email để nhận liên kết đặt lại mật khẩu</p>
        </div>

        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}">
            @csrf

            <div class="form-group">
                <label for="email">Email đăng ký</label>
                <input id="email" type="email"
                    class="@error('email') is-invalid @enderror"
                    name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <button type="submit" class="submit-btn">Gửi liên kết đặt lại mật khẩu</button>
        </form>
    </div>
</section>
@endsection