@php $inputClass = 'w-full px-4 py-2.5 rounded-xl border border-stone-200 bg-stone-50 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:border-transparent transition'; @endphp

<form method="post" action="{{ route('password.update') }}" class="space-y-4">
    @csrf
    @method('put')

    {{-- Success alert --}}
    @if(session('status') === 'password-updated')
    <div class="flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm">
        <i class="fas fa-check-circle text-emerald-500"></i>
        <span>Password berhasil diperbarui!</span>
    </div>
    @endif

    <div>
        <label for="update_password_current_password" class="block text-xs font-semibold text-stone-600 mb-1.5">
            Password Saat Ini <span class="text-rose-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                <i class="fas fa-lock"></i>
            </span>
            <input id="update_password_current_password" name="current_password" type="password"
                   class="{{ $inputClass }} pl-10 pr-10"
                   autocomplete="current-password"
                   placeholder="Masukkan password saat ini">
            <button type="button" onclick="togglePwd('update_password_current_password', 'eye1')"
                    class="absolute right-3.5 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-600 transition">
                <i id="eye1" class="fas fa-eye text-sm"></i>
            </button>
        </div>
        @error('current_password', 'updatePassword')
        <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="update_password_password" class="block text-xs font-semibold text-stone-600 mb-1.5">
            Password Baru <span class="text-rose-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                <i class="fas fa-key"></i>
            </span>
            <input id="update_password_password" name="password" type="password"
                   class="{{ $inputClass }} pl-10 pr-10"
                   autocomplete="new-password"
                   placeholder="Masukkan password baru"
                   oninput="checkPasswordStrength(this.value)">
            <button type="button" onclick="togglePwd('update_password_password', 'eye2')"
                    class="absolute right-3.5 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-600 transition">
                <i id="eye2" class="fas fa-eye text-sm"></i>
            </button>
        </div>
        {{-- Password strength --}}
        <div class="mt-1.5 flex gap-1">
            <div id="str-1" class="h-1 flex-1 rounded-full bg-stone-200 transition-colors duration-300"></div>
            <div id="str-2" class="h-1 flex-1 rounded-full bg-stone-200 transition-colors duration-300"></div>
            <div id="str-3" class="h-1 flex-1 rounded-full bg-stone-200 transition-colors duration-300"></div>
            <div id="str-4" class="h-1 flex-1 rounded-full bg-stone-200 transition-colors duration-300"></div>
        </div>
        <p id="str-label" class="text-[10px] text-stone-400 mt-0.5"></p>
        @error('password', 'updatePassword')
        <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="update_password_password_confirmation" class="block text-xs font-semibold text-stone-600 mb-1.5">
            Konfirmasi Password Baru <span class="text-rose-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                <i class="fas fa-check-double"></i>
            </span>
            <input id="update_password_password_confirmation" name="password_confirmation" type="password"
                   class="{{ $inputClass }} pl-10 pr-10"
                   autocomplete="new-password"
                   placeholder="Ulangi password baru">
            <button type="button" onclick="togglePwd('update_password_password_confirmation', 'eye3')"
                    class="absolute right-3.5 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-600 transition">
                <i id="eye3" class="fas fa-eye text-sm"></i>
            </button>
        </div>
        @error('password_confirmation', 'updatePassword')
        <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
        @enderror
    </div>

    <div class="pt-1">
        <button type="submit"
                class="inline-flex items-center gap-2 px-5 py-2.5 bg-sky-500 hover:bg-sky-600 text-white text-sm font-bold rounded-xl shadow-sm transition">
            <i class="fas fa-shield-halved"></i> Perbarui Password
        </button>
    </div>
</form>

<script>
function togglePwd(inputId, eyeId) {
    const input = document.getElementById(inputId);
    const eye   = document.getElementById(eyeId);
    if (input.type === 'password') {
        input.type = 'text';
        eye.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        eye.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

function checkPasswordStrength(val) {
    const bars   = [1,2,3,4].map(i => document.getElementById('str-' + i));
    const label  = document.getElementById('str-label');
    let score = 0;
    if (val.length >= 8)                       score++;
    if (/[A-Z]/.test(val))                     score++;
    if (/[0-9]/.test(val))                     score++;
    if (/[^A-Za-z0-9]/.test(val))              score++;

    const colors = ['bg-rose-400','bg-orange-400','bg-amber-400','bg-emerald-400'];
    const labels = ['Sangat Lemah','Lemah','Cukup Kuat','Kuat 🔒'];

    bars.forEach((bar, i) => {
        bar.className = 'h-1 flex-1 rounded-full transition-colors duration-300 ' +
            (i < score ? colors[score - 1] : 'bg-stone-200');
    });
    label.textContent = val.length > 0 ? labels[score - 1] || '' : '';
}
</script>
