@extends('layouts.bk')
@section('title','Ubah Password')
@section('page-title','Ubah Password')
@section('page-sub','FR-BK-02 · Keamanan akun')

@section('content')
@if(Auth::user()->must_change_password)
<div class="alert alert-warning">⚠️ Anda wajib mengganti password sebelum mengakses fitur lain. (FR-BK-02)</div>
@endif

<style>
.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 46px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.toggle-password svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.toggle-password:hover {
    color: var(--primary-dark);
}
</style>

<div class="card" style="padding:24px;max-width:460px;">
    <div style="font-family:'Playfair Display',serif;font-size:15px;font-weight:800;color:var(--primary-dark);margin-bottom:20px;">🔒 Ubah Password</div>
    <form method="POST" action="{{ route('bk.password.update') }}">
        @csrf @method('PUT')

        <div class="form-group">
            <label class="form-label">Password Lama <span class="req">*</span></label>
            <div class="password-wrapper">
                <input id="current_password" type="password" name="current_password" class="form-control" required/>
                <button type="button" class="toggle-password" onclick="togglePassword('current_password', 'eyeIconCurrent', this)" aria-label="Tampilkan password lama">
                    <svg id="eyeIconCurrent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Password Baru <span class="req">*</span></label>
            <div class="password-wrapper">
                <input type="password" name="password" id="pwd_baru" class="form-control" required oninput="chkPwd(this.value)"/>
                <button type="button" class="toggle-password" onclick="togglePassword('pwd_baru', 'eyeIconNew', this)" aria-label="Tampilkan password baru">
                    <svg id="eyeIconNew" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                </button>
            </div>
            <div style="height:5px;background:var(--border);border-radius:100px;overflow:hidden;margin:8px 0 4px;">
                <div id="pwd-bar" style="height:100%;border-radius:100px;width:0;transition:all .4s;"></div>
            </div>
            <div id="pwd-hint" style="font-size:11px;color:var(--text-dim);">Masukkan password baru</div>
        </div>

        <div class="form-group">
            <label class="form-label">Konfirmasi Password <span class="req">*</span></label>
            <div class="password-wrapper">
                <input id="password_confirmation" type="password" name="password_confirmation" class="form-control" required oninput="chkMatch(this.value)"/>
                <button type="button" class="toggle-password" onclick="togglePassword('password_confirmation', 'eyeIconConfirm', this)" aria-label="Tampilkan konfirmasi password">
                    <svg id="eyeIconConfirm" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                </button>
            </div>
            <div id="match-hint" style="font-size:11px;margin-top:5px;"></div>
        </div>

        <div class="form-actions">
            <button class="btn btn-primary">🔒 Ubah Password</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function chkPwd(v){
    let s=0;
    if(v.length>=8)s++;
    if(/[A-Z]/.test(v))s++;
    if(/[0-9]/.test(v))s++;
    if(/[^A-Za-z0-9]/.test(v))s++;

    const l=[
        {w:'0%',c:'#e2e8f0',t:''},
        {w:'25%',c:'#dc2626',t:'⚠ Lemah'},
        {w:'50%',c:'#d97706',t:'☑ Cukup'},
        {w:'75%',c:'#1a3c6e',t:'✅ Kuat'},
        {w:'100%',c:'#16a34a',t:'💪 Sangat Kuat'}
    ];

    const i=v.length===0?0:s;
    document.getElementById('pwd-bar').style.cssText=`width:${l[i].w};background:${l[i].c};height:100%;border-radius:100px;transition:all .4s;`;
    document.getElementById('pwd-hint').textContent=l[i].t;
    document.getElementById('pwd-hint').style.color=l[i].c;
}

function chkMatch(v){
    const b=document.getElementById('pwd_baru').value;
    const h=document.getElementById('match-hint');

    if(!v){
        h.textContent='';
        return;
    }

    h.textContent=v===b?'✅ Password cocok':'❌ Tidak cocok';
    h.style.color=v===b?'#16a34a':'#dc2626';
}

function togglePassword(inputId, iconId, button) {
    const passwordInput = document.getElementById(inputId);
    const eyeIcon = document.getElementById(iconId);

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        button.setAttribute('aria-label', 'Sembunyikan password');

        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.58 10.58A2 2 0 0 0 12 14a2 2 0 0 0 1.42-.58" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.88 5.32A9.77 9.77 0 0 1 12 5.25c6 0 9.75 6.75 9.75 6.75a17.42 17.42 0 0 1-3.06 3.72" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M6.53 6.53C3.86 8.23 2.25 12 2.25 12S6 18.75 12 18.75c1.37 0 2.62-.35 3.74-.91" />
        `;
    } else {
        passwordInput.type = 'password';
        button.setAttribute('aria-label', 'Tampilkan password');

        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        `;
    }
}
</script>
@endpush