@extends('frontend.layouts.main')
@section('title', 'Đặt 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>Đặt lại mật khẩu</h1>
            <p>Vui lòng nhập mật khẩu mới cho tài khoản của bạn</p>
        </div>

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

            <input type="hidden" name="token" value="{{ $token }}">

            <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="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>

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

            <div class="form-group">
                <label for="password">Mật khẩu mới</label>
                <input id="password" type="password"
                    class="@error('password') is-invalid @enderror"
                    name="password" required autocomplete="new-password">

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

            <div class="form-group">
                <label for="password-confirm">Nhập lại mật khẩu mới</label>
                <input id="password-confirm" type="password"
                    name="password_confirmation" required autocomplete="new-password">
            </div>

            <button type="submit" class="submit-btn">Cập nhật mật khẩu</button>
        </form>
    </div>
</section>
@endsection