<x-guest-layout>
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-teal-500 to-emerald-500 rounded-2xl mb-4 shadow-lg shadow-teal-500/30">
            <i class="fas fa-lock-open text-2xl text-white"></i>
        </div>
        <h2 class="text-2xl font-bold text-slate-800">Reset Password</h2>
        <p class="text-slate-500 mt-2">Masukkan password baru Anda</p>
    </div>

    <form method="POST" action="{{ route('password.store') }}" class="space-y-5" x-data="{ showPassword: false, showConfirm: false }">
        @csrf

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

        <!-- Email -->
        <div>
            <label for="email" class="block text-sm font-semibold text-slate-700 mb-2">Email</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-envelope text-slate-400 group-focus-within:text-teal-500 transition-colors"></i>
                </div>
                <input id="email" name="email" type="email" value="{{ old('email', $request->email) }}" required autofocus autocomplete="username"
                    class="block w-full pl-12 pr-4 py-3.5 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all duration-300 placeholder-slate-400">
            </div>
            @error('email')
                <p class="text-rose-500 text-sm mt-1.5 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle text-xs"></i>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Password -->
        <div>
            <label for="password" class="block text-sm font-semibold text-slate-700 mb-2">Password Baru</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-lock text-slate-400 group-focus-within:text-teal-500 transition-colors"></i>
                </div>
                <input id="password" name="password" :type="showPassword ? 'text' : 'password'" required autocomplete="new-password"
                    class="block w-full pl-12 pr-12 py-3.5 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all duration-300 placeholder-slate-400"
                    placeholder="Minimal 8 karakter">
                <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-teal-600">
                    <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
                </button>
            </div>
            @error('password')
                <p class="text-rose-500 text-sm mt-1.5 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle text-xs"></i>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Confirm Password -->
        <div>
            <label for="password_confirmation" class="block text-sm font-semibold text-slate-700 mb-2">Konfirmasi Password</label>
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-lock text-slate-400 group-focus-within:text-teal-500 transition-colors"></i>
                </div>
                <input id="password_confirmation" name="password_confirmation" :type="showConfirm ? 'text' : 'password'" required autocomplete="new-password"
                    class="block w-full pl-12 pr-12 py-3.5 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all duration-300 placeholder-slate-400"
                    placeholder="Ulangi password">
                <button type="button" @click="showConfirm = !showConfirm" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-teal-600">
                    <i :class="showConfirm ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
                </button>
            </div>
            @error('password_confirmation')
                <p class="text-rose-500 text-sm mt-1.5 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle text-xs"></i>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Submit Button -->
        <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-semibold rounded-xl transition-all duration-300 shadow-lg shadow-teal-500/30 hover:shadow-teal-500/40 flex items-center justify-center gap-2">
            <i class="fas fa-save"></i>
            Reset Password
        </button>
    </form>
</x-guest-layout>
