<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Change Password - {{ config('app.name') }}</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script> 
    
    <style>
        :root {
            --bg: #f8fafc; --panel: #ffffff; --muted: #6b7280; --accent: #0b5ed7;
            --accent-600: #0b63d6; --danger: #dc2626; --card-border: #e2e8f0; --soft: #f8fafc;
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }
        * { box-sizing: border-box }
        
        body { 
            margin: 0; font-family: var(--font-main); 
            background: var(--bg); color: #111827; 
            -webkit-font-smoothing: antialiased;
        }
        
        .app { display: flex; min-height: 100vh; }
        
        /* Content adjustments for sidebar layout */
        .content { 
            flex: 1; 
            padding: 32px; 
            width: 100%;
            transition: all 0.3s ease;
        }

        /* Responsive Styles */
        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 80px; }
        }
        
        @media (max-width: 640px) {
            .content { padding: 16px; padding-top: 80px; }
        }
    </style>
</head>
<body>
    <div class="app">
        {{-- 1. Memanggil sidebar dari partials --}}
        @include('partials.sidebar')

        {{-- 2. Konten Utama --}}
        <main class="content">
            
            {{-- Container Form (Max Width) --}}
            <div class="max-w-2xl mx-auto space-y-6" x-data="passwordForm()">
        
                {{-- Header & Back Button --}}
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Change Password</h1>
                        <p class="text-sm text-gray-500 mt-1">Perbarui kata sandi akun Anda demi keamanan.</p>
                    </div>
                    <a href="{{ route('profile.index') }}" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 shadow-sm transition-colors w-full md:w-auto">
                        <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                        Kembali
                    </a>
                </div>

                {{-- Success Message --}}
                @if (session('status') === 'password-updated')
                    <div class="p-4 rounded-lg bg-green-50 border border-green-200 flex items-start gap-3 shadow-sm">
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
                        <div class="text-sm text-green-800">
                            <p class="font-bold">Berhasil!</p>
                            <p>Password Anda telah diperbarui.</p>
                        </div>
                    </div>
                @endif

                {{-- Form Card --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 bg-gray-50/50">
                        <div class="flex items-center gap-2 mb-1">
                            <i data-lucide="shield-check" class="w-5 h-5 text-blue-600"></i>
                            <h2 class="text-lg font-bold text-gray-900">Pengaturan Keamanan</h2>
                        </div>
                        <p class="text-sm text-gray-500 ml-7">Pastikan password kuat dan unik untuk akun ini.</p>
                    </div>
                    
                    <div class="p-6 md:p-8">
                        <form action="{{ route('profile.password.update') }}" method="POST" class="space-y-6">
                            @csrf
                            @method('put')

                            {{-- Current Password --}}
                            <div class="space-y-1.5">
                                <label for="current_password" class="text-sm font-semibold text-gray-700">Password Saat Ini</label>
                                <div class="relative">
                                    <input :type="showCurrent ? 'text' : 'password'" name="current_password" id="current_password" 
                                           class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 pl-3 pr-10 transition-shadow"
                                           placeholder="Masukkan password lama Anda">
                                    <button type="button" @click="showCurrent = !showCurrent" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
                                        <i :class="showCurrent ? 'hidden' : 'block'" data-lucide="eye" class="w-5 h-5"></i>
                                        <i :class="showCurrent ? 'block' : 'hidden'" data-lucide="eye-off" class="w-5 h-5"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                    <p class="text-sm text-red-600 flex items-center gap-1 mt-1">
                                        <i data-lucide="alert-circle" class="w-3 h-3"></i> {{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- New Password --}}
                            <div class="space-y-1.5">
                                <label for="password" class="text-sm font-semibold text-gray-700">Password Baru</label>
                                <div class="relative">
                                    <input :type="showNew ? 'text' : 'password'" name="password" id="password" x-model="newPassword"
                                           class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 pl-3 pr-10 transition-shadow"
                                           placeholder="Buat password baru yang kuat">
                                    <button type="button" @click="showNew = !showNew" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
                                        <i :class="showNew ? 'hidden' : 'block'" data-lucide="eye" class="w-5 h-5"></i>
                                        <i :class="showNew ? 'block' : 'hidden'" data-lucide="eye-off" class="w-5 h-5"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <p class="text-sm text-red-600 flex items-center gap-1 mt-1">
                                        <i data-lucide="alert-circle" class="w-3 h-3"></i> {{ $message }}
                                    </p>
                                @enderror

                                {{-- Strength Indicator --}}
                                <div x-show="newPassword.length > 0" class="space-y-2 pt-2 transition-all duration-300" x-transition>
                                    <div class="flex items-center justify-between text-xs">
                                        <span class="text-gray-500 font-medium">Kekuatan Password: <span x-text="strengthLabel" :class="strengthColorText"></span></span>
                                    </div>
                                    <div class="flex gap-1 h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                                        <template x-for="i in 5">
                                            <div class="flex-1 transition-all duration-500 ease-out" 
                                                 :class="i <= strengthScore ? strengthColorBg : 'bg-transparent'"></div>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            {{-- Confirm Password --}}
                            <div class="space-y-1.5">
                                <label for="password_confirmation" class="text-sm font-semibold text-gray-700">Konfirmasi Password Baru</label>
                                <div class="relative">
                                    <input :type="showConfirm ? 'text' : 'password'" name="password_confirmation" id="password_confirmation"
                                           class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 pl-3 pr-10 transition-shadow"
                                           placeholder="Ulangi password baru Anda">
                                    <button type="button" @click="showConfirm = !showConfirm" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
                                        <i :class="showConfirm ? 'hidden' : 'block'" data-lucide="eye" class="w-5 h-5"></i>
                                        <i :class="showConfirm ? 'block' : 'hidden'" data-lucide="eye-off" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Info Alert --}}
                            <div class="p-4 rounded-lg bg-blue-50 border border-blue-100 flex items-start gap-3">
                                <i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                                <p class="text-sm text-blue-800 leading-relaxed">
                                    Setelah mengganti password, sesi login Anda tetap aktif. Mohon simpan password baru Anda dengan aman dan jangan bagikan kepada siapapun.
                                </p>
                            </div>

                            {{-- Buttons --}}
                            <div class="flex flex-col-reverse sm:flex-row gap-3 pt-4 border-t border-gray-100">
                                <a href="{{ route('profile.index') }}" class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">
                                    Batal
                                </a>
                                <button type="submit" class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-transparent shadow-sm text-sm font-bold rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                    <i data-lucide="save" class="w-4 h-4 mr-2"></i>
                                    Simpan Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Security Tips --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <i data-lucide="lightbulb" class="w-5 h-5 text-yellow-500"></i> Tips Keamanan
                    </h3>
                    <div class="space-y-3">
                        <div class="flex gap-3 items-start">
                            <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                            <p class="text-sm text-gray-600">Gunakan password unik yang tidak digunakan di situs lain.</p>
                        </div>
                        <div class="flex gap-3 items-start">
                            <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                            <p class="text-sm text-gray-600">Kombinasikan huruf besar, kecil, angka, dan simbol.</p>
                        </div>
                        <div class="flex gap-3 items-start">
                            <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                            <p class="text-sm text-gray-600">Hindari penggunaan tanggal lahir atau nama pribadi yang mudah ditebak.</p>
                        </div>
                    </div>
                </div>

            </div>
        </main>
    </div>

    {{-- Alpine JS Logic for Password Strength & Toggle --}}
    <script>
        lucide.createIcons();

        function passwordForm() {
            return {
                showCurrent: false,
                showNew: false,
                showConfirm: false,
                newPassword: '',
                get strengthScore() {
                    let score = 0;
                    if (this.newPassword.length > 0) score++;
                    if (this.newPassword.length >= 8) score++;
                    if (/[A-Z]/.test(this.newPassword) && /[0-9]/.test(this.newPassword)) score++;
                    if (/[^a-zA-Z0-9]/.test(this.newPassword)) score++; // Special char
                    if (this.newPassword.length >= 12) score++;
                    return Math.min(score, 5);
                },
                get strengthLabel() {
                    const s = this.strengthScore;
                    if (s <= 2) return 'Lemah';
                    if (s <= 4) return 'Sedang';
                    return 'Kuat';
                },
                get strengthColorText() {
                    const s = this.strengthScore;
                    if (s <= 2) return 'text-red-600 font-bold';
                    if (s <= 4) return 'text-yellow-600 font-bold';
                    return 'text-green-600 font-bold';
                },
                get strengthColorBg() {
                    const s = this.strengthScore;
                    if (s <= 2) return 'bg-red-500';
                    if (s <= 4) return 'bg-yellow-500';
                    return 'bg-green-500';
                }
            }
        }
    </script>
</body>
</html>