@extends('layouts.app')

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

@section('content')
<div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8"> {{-- Tambah padding vertikal & horizontal --}}
    <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"> {{-- Styling lebih modern --}}
        <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> Reset Password
        </h1>

        @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.update') }}" class="space-y-6"> {{-- Tambah spacing --}}
            @csrf

            <input type="hidden" name="token" value="{{ request()->route('token') }}">

            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Email</label>
                <input type="email" name="email" id="email" value="{{ old('email', request()->email) }}" {{-- Pre-fill email from request --}}
                       class="form-input" {{-- Gunakan kelas konsisten --}}
                       required autofocus>
                @error('email')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Password Baru</label>
                <input type="password" name="password" id="password"
                       class="form-input"
                       required>
                @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation"
                       class="form-input"
                       required>
                @error('password_confirmation') {{-- Tambahkan error handling untuk konfirmasi password --}}
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end">
                <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">
                    Reset Password
                </button>
            </div>
        </form>
    </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 {
        @apply w-full mt-1 px-4 py-2 border rounded-md dark:bg-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 text-gray-800;
    }

    /* 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