<x-guest-layout>
    <div class="mb-6 text-center">
        <h2 class="text-2xl font-bold text-gray-800">Password Baru</h2>
        <p class="text-sm text-gray-600 mt-2">Silakan buat password baru yang kuat untuk akun Anda.</p>
    </div>

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

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

        <div>
            <label class="block text-sm font-medium text-gray-700">Email Anda</label>
            <input id="email" class="block mt-1 w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-500" 
                   type="email" name="email" value="{{ old('email', $request->email) }}" required readonly />
        </div>

        <div class="mt-4">
            <label class="block text-sm font-medium text-gray-700">Password Baru</label>
            <div class="relative">
                <input id="password" class="block mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-[#7ebc12] focus:border-[#7ebc12]" 
                       type="password" name="password" required />
                <button type="button" onclick="togglePassword()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                    <i id="eyeIcon" class="fas fa-eye"></i>
                </button>
            </div>
            
            <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                <div id="rule-length" class="text-red-500 transition-colors">✖ Minimal 8 Karakter</div>
                <div id="rule-uppercase" class="text-red-500 transition-colors">✖ Huruf Kapital</div>
                <div id="rule-number" class="text-red-500 transition-colors">✖ Angka</div>
                <div id="rule-symbol" class="text-red-500 transition-colors">✖ Simbol Unik</div>
            </div>
        </div>

        <div class="mt-4">
            <label class="block text-sm font-medium text-gray-700">Konfirmasi Password Baru</label>
            <input id="password_confirmation" class="block mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-[#7ebc12] focus:border-[#7ebc12]" 
                   type="password" name="password_confirmation" required />
            <div id="password-match" class="text-xs mt-1 text-red-500">✖ Password tidak sama</div>
        </div>

        <button type="submit" id="resetBtn" class="w-full mt-6 bg-[#7ebc12] hover:bg-[#6aa30f] text-white font-semibold py-2 rounded-lg shadow-md transition">
            Update Password
        </button>
    </form>
</x-guest-layout>