@extends('layouts.app')

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

@section('content')
<div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 space-y-6">
        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center flex items-center justify-center gap-2">
            <span class="text-blue-600">🔐</span> Lupa Password
        </h1>
        <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
            Masukkan alamat email Anda untuk menerima tautan pengaturan ulang kata sandi.
        </p>

        @if (session('status'))
            <div class="bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg flex items-center justify-between animate-fade-in" role="alert">
                <span>{{ session('status') }}</span>
                <button type="button" class="text-green-800 dark:text-green-200 hover:text-green-900 dark:hover:text-green-100" onclick="this.parentElement.remove()">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg flex items-center justify-between animate-fade-in" role="alert">
                <span>{{ session('error') }}</span>
                <button type="button" class="text-red-800 dark:text-red-200 hover:text-red-900 dark:hover:text-red-100" onclick="this.parentElement.remove()">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}" class="space-y-6">
            @csrf

            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Alamat Email</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}"
                       class="form-input w-full" {{-- Pastikan w-full ada di sini --}}
                       required autofocus autocomplete="email" placeholder="example@farmakolog.org">
                @error('email')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Perbaiki Div untuk Tombol --}}
            <div class="flex justify-center"> {{-- Ubah dari justify-end menjadi justify-center --}}
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out w-full">
                    Kirim Link Reset
                </button>
            </div>
        </form>

        <div class="text-center mt-4">
            <a href="{{ route('login') }}" class="text-sm text-blue-600 hover:underline dark:text-blue-400">
                Kembali ke halaman Login
            </a>
        </div>
    </div>
</div>

@push('styles')
<style>
    /* Tambahkan animasi untuk pesan flash */
    .animate-fade-in {
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Definisi form-input agar konsisten dengan file lain */
    .form-input {
        /* Gabungkan w-full, mt-1, border, rounded, px-3, py-2 dari input langsung */
        /* dan dark mode styling */
        @apply w-full mt-1 border rounded-md px-3 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500;
    }

    /* Variabel warna primer jika belum didefinisikan secara global */
    :root {
        --primary-color: #4c51bf; /* Contoh: Indigo 700 */
        --primary-dark-color: #3b4097; /* Contoh: Warna Indigo yang lebih gelap */
    }
</style>
@endpush
@endsection