<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keamanan - Pustaka Nawasena</title>
    <link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-blue: #0d47a1;
            --soft-bg: #f4f7fa;
            --input-bg: #f8fafc;
        }

        /* Menyembunyikan scrollbar tapi tetap bisa scroll */
        html, body {
            scrollbar-width: none;
            -ms-overflow-style: none;
            overflow-x: hidden;
        }
        body::-webkit-scrollbar { display: none; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--soft-bg);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 40px 0;
        }

        .card {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(13, 71, 161, 0.08);
            width: 100%;
            max-width: 380px;
            padding: 25px 30px;
            border: 1px solid #f1f5f9;
        }

        h4 { font-weight: 800; color: var(--primary-blue); font-size: 1.1rem; margin-bottom: 2px; text-align: center; }
        .subtitle { color: #64748b; font-size: 0.75rem; margin-bottom: 20px; display: block; text-align: center; }

        .form-label { font-weight: 700; font-size: 0.68rem; color: #475569; text-transform: uppercase; margin-bottom: 5px; }

        .input-group-text {
            background: var(--input-bg);
            border: 1px solid #e2e8f0;
            border-radius: 10px 0 0 10px;
            color: #94a3b8;
        }

        .form-control {
            background: var(--input-bg);
            border: 1px solid #e2e8f0;
            border-radius: 0; /* Dinamis dengan toggle */
            padding: 7px 12px;
            font-size: 0.85rem;
        }

        .toggle-btn {
            background: var(--input-bg);
            border: 1px solid #e2e8f0;
            border-left: none;
            border-radius: 0 10px 10px 0;
            cursor: pointer;
            padding: 0 12px;
            color: #94a3b8;
            display: flex;
            align-items: center;
        }

        #passwordHelp {
            background: #fdfdfd;
            border-radius: 10px;
            padding: 10px;
            margin-top: 8px;
            border: 1px dashed #e2e8f0;
        }
        .check-item { font-size: 0.68rem; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
        .valid { color: #10b981; }
        .invalid { color: #94a3b8; }

        .btn-primary {
            background: var(--primary-blue);
            border: none;
            border-radius: 10px;
            padding: 10px;
            font-weight: 700;
            font-size: 0.85rem;
            width: 100%;
            margin-top: 10px;
        }

        .btn-back {
            display: flex; align-items: center; justify-content: center; gap: 5px;
            color: #64748b; font-weight: 600; font-size: 0.78rem; text-decoration: none; margin-top: 12px;
        }
    </style>
</head>
<body>

<div class="card">
    <div class="text-center">
        <img src="{{ asset('images/kartu.png') }}" alt="Logo" width="45" class="mb-2">
        <h4>Profil & Keamanan</h4>
        <span class="subtitle">Update informasi dan proteksi akun</span>
    </div>

    <form action="{{ route('user.updateProfile') }}" method="POST">
        @csrf

        <div class="mb-2">
            <label class="form-label">Nama</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person"></i></span>
                <input type="text" name="name" class="form-control" style="border-radius:0 10px 10px 0;" value="{{ $user->name }}" required>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Email</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                <input type="email" name="email" class="form-control" style="border-radius:0 10px 10px 0;" value="{{ $user->email }}" required>
            </div>
        </div>

        <hr class="my-3" style="opacity: 0.1;">

        <div class="mb-2">
            <label class="form-label">Sandi Lama</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
                <input type="password" name="current_password" id="current_password" class="form-control" placeholder="••••••••" required>
                <button type="button" class="toggle-btn" onclick="togglePassword('current_password', 'eye1')">
                    <i class="bi bi-eye" id="eye1"></i>
                </button>
            </div>
        </div>

        <div class="mb-2">
            <label class="form-label">Sandi Baru</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-key"></i></span>
                <input type="password" name="new_password" id="new_password" class="form-control" placeholder="••••••••">
                <button type="button" class="toggle-btn" onclick="togglePassword('new_password', 'eye2')">
                    <i class="bi bi-eye" id="eye2"></i>
                </button>
            </div>
            <div id="passwordHelp">
                <div id="length" class="check-item invalid"><i class="bi bi-check-circle"></i> Min. 8 Karakter</div>
                <div id="capital" class="check-item invalid"><i class="bi bi-check-circle"></i> Huruf Besar & Kecil</div>
                <div id="symbol" class="check-item invalid"><i class="bi bi-check-circle"></i> Tanda Baca (.,)</div>
                <div id="match" class="check-item invalid"><i class="bi bi-check-circle"></i> Konfirmasi Cocok</div>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Konfirmasi Sandi</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-patch-check"></i></span>
                <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" placeholder="••••••••">
                <button type="button" class="toggle-btn" onclick="togglePassword('new_password_confirmation', 'eye3')">
                    <i class="bi bi-eye" id="eye3"></i>
                </button>
            </div>
        </div>

        <button type="submit" class="btn btn-primary shadow-sm" id="submitBtn" disabled>Simpan Perubahan</button>

        <a href="{{ route('user.profile') }}" class="btn-back">
            <i class="bi bi-arrow-left-short fs-5"></i> Kembali
        </a>
    </form>
</div>

<script>
    function togglePassword(inputId, iconId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (input.type === "password") {
            input.type = "text";
            icon.classList.replace('bi-eye', 'bi-eye-slash');
        } else {
            input.type = "password";
            icon.classList.replace('bi-eye-slash', 'bi-eye');
        }
    }

    const newPass = document.getElementById('new_password');
    const confirmPass = document.getElementById('new_password_confirmation');
    const submitBtn = document.getElementById('submitBtn');

    function validate() {
        const val = newPass.value;
        const conf = confirmPass.value;

        const isLength = val.length >= 8;
        const isCapital = /[A-Z]/.test(val) && /[a-z]/.test(val);
        const isSymbol = /[.,]/.test(val);
        const isMatch = val === conf && val !== '';

        updateUI('length', isLength);
        updateUI('capital', isCapital);
        updateUI('symbol', isSymbol);
        updateUI('match', isMatch);

        submitBtn.disabled = !(isLength && isCapital && isSymbol && isMatch);
    }

    function updateUI(id, isValid) {
        const el = document.getElementById(id);
        if(isValid) {
            el.classList.replace('invalid', 'valid');
            el.querySelector('i').className = 'bi bi-check-circle-fill';
        } else {
            el.classList.replace('valid', 'invalid');
            el.querySelector('i').className = 'bi bi-check-circle';
        }
    }

    newPass.addEventListener('input', validate);
    confirmPass.addEventListener('input', validate);
</script>
</body>
</html>

