<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atur Ulang Password - Agen Elpiji</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
    </style>
</head>
<body class="bg-white antialiased text-slate-900">
    <div class="flex min-h-screen">
        <!-- Let Side: Form -->
        <div class="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
            <div class="w-full max-w-sm mx-auto lg:w-96">
                <!-- Branding -->
                <div class="flex items-center gap-3 mb-10 group transition-transform hover:scale-105 duration-300">
                    <div class="w-12 h-12 bg-gas3kg flex items-center justify-center rounded-2xl shadow-lg shadow-gas3kg/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                        <i data-lucide="flame" class="w-7 h-7 text-white stroke-[2.5] relative z-10"></i>
                    </div>
                    <div>
                        <span class="text-2xl font-black tracking-tighter text-slate-900">Gas<span class="text-gas12kg">Ku</span></span>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none mt-0.5">LPG Management</p>
                    </div>
                </div>
                
                <h2 class="mt-8 text-3xl font-bold tracking-tight text-slate-900">Atur Ulang Password</h2>
                <p class="mt-2 text-sm text-slate-500">Silakan masukkan password baru Anda.</p>

                <div class="mt-8">
                    @if ($errors->any())
                        <div class="bg-red-50 text-red-600 p-4 rounded-2xl text-sm mb-6 border border-red-100 flex items-start">
                            <i data-lucide="alert-circle" class="w-5 h-5 mr-3 shrink-0 mt-0.5"></i>
                            <div>
                                <ul class="space-y-1 font-semibold list-none pl-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ rtrim($error, '.') }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('password.update') }}" method="POST" class="space-y-5">
                        @csrf
                        <input type="hidden" name="token" value="{{ $token }}">
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-slate-700">Alamat Email</label>
                            <div class="mt-1.5 relative">
                                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                    <i data-lucide="mail" class="h-5 w-5 text-slate-400"></i>
                                </div>
                                <input id="email" name="email" type="email" autocomplete="email" value="{{ $email ?? old('email') }}" required readonly class="block w-full pl-10 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-slate-100 text-slate-500 outline-none cursor-not-allowed">
                            </div>
                        </div>

                        <div>
                            <label for="password" class="block text-sm font-medium text-slate-700">Password Baru</label>
                            <div class="mt-1.5 relative">
                                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                    <i data-lucide="lock" class="h-5 w-5 text-slate-400"></i>
                                </div>
                                <input id="password" name="password" type="password" required class="block w-full pl-10 pr-12 py-2.5 border border-slate-200 rounded-xl text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 transition-all bg-white hover:bg-slate-50 focus:bg-white" placeholder="••••••••">
                                <button type="button" onclick="togglePassword('password', this)" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-blue-600 focus:outline-none transition-colors">
                                    <i data-lucide="eye" class="h-5 w-5 icon-show"></i>
                                    <i data-lucide="eye-off" class="h-5 w-5 icon-hide hidden"></i>
                                </button>
                            </div>
                        </div>

                        <div>
                            <label for="password_confirmation" class="block text-sm font-medium text-slate-700">Konfirmasi Password Baru</label>
                            <div class="mt-1.5 relative">
                                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                    <i data-lucide="lock" class="h-5 w-5 text-slate-400"></i>
                                </div>
                                <input id="password_confirmation" name="password_confirmation" type="password" required class="block w-full pl-10 pr-12 py-2.5 border border-slate-200 rounded-xl text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 transition-all bg-white hover:bg-slate-50 focus:bg-white" placeholder="••••••••">
                                <button type="button" onclick="togglePassword('password_confirmation', this)" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-blue-600 focus:outline-none transition-colors">
                                    <i data-lucide="eye" class="h-5 w-5 icon-show"></i>
                                    <i data-lucide="eye-off" class="h-5 w-5 icon-hide hidden"></i>
                                </button>
                            </div>
                        </div>

                        <div class="pt-2">
                            <button type="submit" class="group flex w-full justify-center items-center py-3.5 px-4 border border-transparent rounded-2xl shadow-xl shadow-gas3kg/20 text-sm font-bold text-white bg-gas3kg hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-gas3kg/30 transition-all active:scale-[0.98]">
                                Simpan Password Baru
                                <i data-lucide="save" class="ml-2 w-5 h-5 group-hover:-translate-y-1 transition-transform"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Right Side: Decorative/Image (Hidden on Mobile) -->
        <div class="relative hidden w-0 flex-1 lg:block bg-gas3kg overflow-hidden">
            <!-- Background effects -->
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
            <div class="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-black/10"></div>
            
            <div class="absolute inset-0 flex items-center justify-center p-12">
                <div class="max-w-xl text-center z-10 w-full flex flex-col items-center">
                    <div class="inline-flex items-center justify-center w-24 h-24 bg-white/20 rounded-[2.5rem] shadow-2xl mb-10 border border-white/30 backdrop-blur-xl transition-all duration-500">
                        <i data-lucide="key-round" class="w-12 h-12 text-white"></i>
                    </div>
                    <h2 class="text-5xl font-black text-white mb-6 tracking-tight leading-tight">Buat Kombinasi <br/><span class="text-yellow-300 drop-shadow-sm">Terbaik Anda</span></h2>
                    <p class="text-xl text-green-50 mb-12 leading-relaxed max-w-lg mx-auto font-medium">Pastikan password baru Anda kuat dan unik untuk melindungi akses akun Anda.</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        lucide.createIcons();

        function togglePassword(inputId, button) {
            const input = document.getElementById(inputId);
            const iconShow = button.querySelector('.icon-show');
            const iconHide = button.querySelector('.icon-hide');
            
            if (input.type === 'password') {
                input.type = 'text';
                iconShow.classList.add('hidden');
                iconHide.classList.remove('hidden');
            } else {
                input.type = 'password';
                iconShow.classList.remove('hidden');
                iconHide.classList.add('hidden');
            }
        }
    </script>
</body>
</html>
