@extends('adminlte::master')

@section('adminlte_css')
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Menggunakan CSS yang sama dengan Login untuk konsistensi */
        body, html { height: 100%; margin: 0; font-family: 'Poppins', sans-serif; background-color: #fff; }
        .login-container { display: flex; height: 100vh; width: 100%; }
        
        .login-left {
            flex: 1.3;
            background: linear-gradient(135deg, #6610f2 0%, #6f42c1 100%); /* Warna Ungu untuk Pembeda */
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            color: white; position: relative; overflow: hidden; padding: 40px; text-align: center;
        }
        .login-left::before { content: ""; position: absolute; width: 400px; height: 400px; background: rgba(255,255,255,0.1); border-radius: 50%; top: -100px; left: -100px; }

        .brand-icon {
            font-size: 4rem; margin-bottom: 20px; background: rgba(255,255,255,0.2);
            width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px);
        }
        .brand-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 5px; }

        .login-right { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; background: #ffffff; }
        .login-form-wrapper { width: 100%; max-width: 380px; }
        .login-header { margin-bottom: 30px; }
        .login-header h3 { font-weight: 700; color: #333; margin-bottom: 5px; }
        .login-header p { color: #888; font-size: 0.9rem; line-height: 1.5; }

        .form-control-custom {
            background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 22px 15px; font-size: 0.95rem;
        }
        .form-control-custom:focus { background-color: #fff; border-color: #6f42c1; box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1); }
        
        .btn-login {
            background: #6f42c1; border: none; border-radius: 10px; padding: 12px; font-weight: 600; font-size: 1rem; transition: all 0.3s;
        }
        .btn-login:hover { background: #5a32a3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(111, 66, 193, 0.3); }

        @media (max-width: 992px) { .login-left { display: none; } }
    </style>
@stop

@section('body')
    <div class="login-container">
        <div class="login-left">
            <div class="brand-icon"><i class="fas fa-lock-open"></i></div>
            <div class="brand-title">Lupa Password?</div>
            <div class="brand-subtitle" style="opacity: 0.9; font-weight: 300;">
                Jangan khawatir, kami akan membantu Anda mengatur ulang kata sandi akun Anda.
            </div>
        </div>

        <div class="login-right">
            <div class="login-form-wrapper">
                <div class="login-header">
                    <h3>Reset Password 🔒</h3>
                    <p>Masukkan alamat email yang terdaftar. Kami akan mengirimkan tautan untuk mereset password Anda.</p>
                </div>

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

                <form action="{{ route('password.email') }}" method="post">
                    @csrf
                    
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-secondary">EMAIL TERDAFTAR</label>
                        <input type="email" name="email" class="form-control form-control-custom @error('email') is-invalid @enderror"
                               value="{{ old('email') }}" placeholder="nama@sekolah.id" required autofocus>
                        @error('email')
                            <span class="invalid-feedback d-block mt-2"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary btn-block btn-login text-white">
                        Kirim Link Reset
                    </button>

                    <div class="mt-4 text-center">
                        <a href="{{ route('login') }}" class="text-muted small font-weight-bold" style="text-decoration: none;">
                            <i class="fas fa-arrow-left mr-1"></i> Kembali ke Login
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop