<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Password - NusaOTP</title>
    
    <!-- Google Fonts: Poppins -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        'dz-navy': '#1D2A78',
                        'dz-navy-dark': '#151D5B',
                        'dz-blue': '#1E40AF',
                        'dz-cyan': '#00C6FF',
                        'dz-cyan-light': '#00E5FF',
                        'telegram': '#229ED9',
                        'telegram-hover': '#1b8cc4',
                    }
                }
            }
        }
    </script>
    
    <style>
        .bg-card-gradient {
            background: linear-gradient(180deg, #1E40AF 0%, #00C6FF 100%);
        }
        .shadow-cyan-glow {
            box-shadow: 0 8px 20px rgba(0, 198, 255, 0.35);
        }
        .shadow-navy-glow {
            box-shadow: 0 8px 20px rgba(29, 42, 120, 0.35);
        }

        /* Float Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
    </style>
</head>
<body class="min-h-screen w-full flex font-sans antialiased bg-white p-0 overflow-x-hidden">

    <!-- Container Utama Full Screen -->
    <div class="w-full min-h-screen flex flex-col lg:flex-row relative">
        
        <!-- ========================================== -->
        <!-- SISI KIRI: MOCKUP & BRANDING (DESKTOP)     -->
        <!-- ========================================== -->
        <div class="hidden lg:flex lg:w-7/12 bg-card-gradient p-10 xl:p-14 flex-col justify-between relative overflow-hidden text-white min-h-screen">
            <!-- Background Decorative Circles -->
            <div class="absolute -top-16 -left-16 w-80 h-80 bg-white/10 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -bottom-20 -right-20 w-96 h-96 bg-cyan-400/20 rounded-full blur-3xl pointer-events-none"></div>

            <!-- Top Header / Tagline -->
            <div class="z-10 max-w-xl">
                <h2 class="text-3xl xl:text-4xl font-bold leading-tight drop-shadow-sm">
                    Nusa<span class="text-cyan-200">OTP</span>
                </h2>
                <p class="mt-2 text-white/80 text-xs xl:text-sm leading-relaxed">
                    Platform penyedia nomor virtual untuk berbagai kebutuhan verifikasi akun. Instan, otomatis, aman, dan aktif 24 jam tanpa perlu kartu fisik.
                </p>
            </div>

            <!-- MOCKUP MONITOR PC (3D Style Frame) -->
            <div class="z-10 my-auto py-4 w-full max-w-xl mx-auto flex flex-col items-center justify-center">
                <div class="w-full bg-slate-900 rounded-2xl p-2.5 shadow-2xl border border-white/20 relative animate-float transition-all duration-300">
                    <div class="w-2 h-2 bg-slate-700 rounded-full mx-auto mb-1.5"></div>
                    <div class="w-full bg-slate-950 rounded-xl overflow-hidden border border-white/10 text-slate-100 p-3 sm:p-4 font-sans relative">
                        <div class="flex items-center justify-between pb-2.5 border-b border-white/10 mb-3">
                            <div class="flex items-center gap-2">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-[9px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full font-mono flex items-center gap-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> ONLINE
                                </span>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-2.5 mb-3">
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Total OTP Diterima</p>
                                <p class="text-sm font-bold text-cyan-300 mt-0.5 font-mono">12,840</p>
                                <span class="text-[8px] text-emerald-400">↑ 14% minggu ini</span>
                            </div>
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Saldo Akun</p>
                                <p class="text-sm font-bold text-emerald-400 mt-0.5 font-mono">Rp 250.000</p>
                                <span class="text-[8px] text-slate-400">Siap Digunakan</span>
                            </div>
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Kecepatan SMS</p>
                                <p class="text-sm font-bold text-yellow-300 mt-0.5 font-mono">&lt; 3 Detik</p>
                                <span class="text-[8px] text-cyan-400">Instant Server</span>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <p class="text-[10px] font-semibold text-slate-300 flex items-center justify-between">
                                <span>Aktivitas Nomor Terbaru</span>
                                <span class="text-[9px] text-cyan-400 font-normal">Auto Refresh</span>
                            </p>
                            <div class="bg-slate-900/90 border border-white/10 rounded-lg p-2 flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <div class="w-7 h-7 rounded-md bg-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold text-[10px]">WA</div>
                                    <div>
                                        <p class="text-[10px] font-semibold text-slate-200">WhatsApp Indonesia (+62)</p>
                                        <p class="text-[9px] font-mono text-slate-400">+628381293XXXX</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="text-[10px] font-mono font-bold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 px-2 py-0.5 rounded animate-pulse">749-012</span>
                                    <p class="text-[8px] text-slate-400 mt-0.5">Baru saja</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-20 h-4 bg-gradient-to-b from-slate-700 to-slate-900 mx-auto -mt-0.5"></div>
                <div class="w-36 h-2 bg-slate-800 rounded-full shadow-xl mx-auto border-t border-white/10"></div>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- SISI KANAN: FORM RESET PASSWORD            -->
        <!-- ========================================== -->
        <div class="w-full lg:w-5/12 bg-card-gradient lg:bg-white flex flex-col justify-between relative min-h-screen">
            
            <div class="p-6 sm:p-10 lg:p-12 flex flex-col items-center z-10 flex-grow justify-center max-w-md w-full mx-auto">
                
                <!-- Logo Image -->
                <div class="logo mb-6 mt-2">
                    <img
                        src="{{ asset('public/assets/logo-nusaotp.webp') }}"
                        alt="NusaOTP Logo"
                        class="h-12 lg:h-14 w-auto object-contain drop-shadow-md"
                    >
                </div>

                <!-- Judul & Deskripsi Halaman -->
                <div class="text-center mb-6">
                    <h1 class="text-xl lg:text-2xl font-bold text-white mb-2">Reset Password</h1>
                    <p class="mt-2 text-xs lg:text-sm text-white/80 lg:text-white leading-relaxed">
                        Masukkan password baru untuk akun kamu. Pastikan menggunakan password yang kuat dan aman.
                    </p>
                </div>

                <!-- Form Reset Password -->
                <form method="POST" action="{{ route('password.store') }}" class="w-full space-y-4">
                    @csrf

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

                    <!-- Email Input -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                            </svg>
                        </div>
                        <input 
                            id="email" 
                            type="email" 
                            name="email" 
                            value="{{ old('email', $request->email) }}" 
                            required 
                            autofocus 
                            autocomplete="username"
                            placeholder="Masukkan Email" 
                            class="w-full h-[48px] pl-11 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300"
                        >
                    </div>
                    <x-input-error :messages="$errors->get('email')" class="mt-1 text-xs text-rose-300 lg:text-rose-600 font-medium px-2" />

                    <!-- Password Baru Input -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <input 
                            id="password" 
                            type="password" 
                            name="password" 
                            required 
                            autocomplete="new-password"
                            placeholder="Password Baru" 
                            class="w-full h-[48px] pl-11 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300"
                        >
                    </div>
                    <x-input-error :messages="$errors->get('password')" class="mt-1 text-xs text-rose-300 lg:text-rose-600 font-medium px-2" />

                    <!-- Konfirmasi Password Input -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <input 
                            id="password_confirmation" 
                            type="password" 
                            name="password_confirmation" 
                            required 
                            autocomplete="new-password"
                            placeholder="Konfirmasi Password" 
                            class="w-full h-[48px] pl-11 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300"
                        >
                    </div>
                    <x-input-error :messages="$errors->get('password_confirmation')" class="mt-1 text-xs text-rose-300 lg:text-rose-600 font-medium px-2" />

                    <!-- Submit Button -->
                    <button type="submit" class="w-full h-[48px] rounded-full bg-dz-navy hover:bg-dz-navy-dark text-white font-semibold text-xs shadow-cyan-glow lg:shadow-navy-glow hover:brightness-110 active:scale-95 transition-all duration-300">
                        Simpan Password Baru
                    </button>
                </form>

            </div>

            <!-- Wave SVG Curved Divider (Mobile Only) -->
            <div class="w-full -mb-1 z-10 lg:hidden">
                <svg viewBox="0 0 500 120" preserveAspectRatio="none" class="w-full h-10 text-white fill-current">
                    <path d="M0,32 C150,90 350,-10 500,40 L500,120 L0,120 Z"></path>
                </svg>
            </div>

            <!-- Bottom Footer Section -->
            <div class="bg-white px-6 pb-6 pt-2 flex flex-col items-center justify-center text-center z-10">
                <p class="text-xs text-gray-500">
                    Sudah ingat password? 
                    <a href="{{ route('login') }}" class="text-dz-navy font-semibold hover:underline">
                        Kembali Login
                    </a>
                </p>
            </div>

        </div>

    </div>

    <!-- SweetAlert2 Script -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Alert Sukses Reset Password
        @if (session('status') == 'passwords.reset')
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: 'Password berhasil direset. Silakan login kembali.',
                confirmButtonColor: '#1D2A78'
            }).then(() => {
                window.location.href = "{{ route('login') }}";
            });
        @endif

        // Alert Error Handling bawaan Laravel
        @if ($errors->any())
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                html: `{!! implode('<br>', $errors->all()) !!}`,
                confirmButtonColor: '#1D2A78'
            });
        @endif
    </script>
</body>
</html>