

<?php $__env->startSection('title', 'My Profile'); ?>

<?php $__env->startSection('breadcrumbs'); ?>
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">My Profile</span>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .modal-enter { animation: zoomIn 0.3s ease-out forwards; }
    @keyframes zoomIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }

    /* Side panels */
    #editPanel, #passwordPanel {
        position: fixed; top: 80px; right: 0;
        height: calc(100vh - 80px); width: 0; overflow: hidden;
        z-index: 200; transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
        padding: 0; pointer-events: none;
    }
    #editPanel.panel-open, #passwordPanel.panel-open {
        width: 380px; padding: 12px; pointer-events: all;
    }
    .panel-inner {
        width: 356px; display: flex; flex-direction: column; height: 100%;
        background: #fff; border-radius: 1.75rem;
        border: 1px solid #e2e8f0; box-shadow: -4px 0 40px rgba(0,0,0,0.10); overflow: hidden;
    }

    #contentArea { transition: margin-right 0.35s cubic-bezier(0.4,0,0.2,1); }
    .panel-open-state #contentArea { margin-right: 380px; }

    .panel-field {
        width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0;
        border-radius: 12px; padding: 11px 14px; font-size: 12px; color: #1e293b;
        outline: none; transition: all 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .panel-field:focus { border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.08); }
    .panel-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 5px; }

    .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; }
    .badge-teal   { background:#e6f7f6; color:#007d79; }
    .badge-green  { background:#f0fdf4; color:#16a34a; }
    .badge-slate  { background:#f1f5f9; color:#475569; }
    .badge-red    { background:#fef2f2; color:#b91c1c; }

    .info-row { display: flex; align-items: center; padding: 14px 24px; border-bottom: 1px solid #f8fafc; }
    .info-row:last-child { border-bottom: none; }
    .info-label { flex-shrink: 0; width: 120px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; }
    .info-value { font-size: 13px; font-weight: 600; color: #1e293b; }

    /* Mobile wrap for prefix + number */
    #prof-mobile-wrap {
        display: flex; align-items: stretch;
        background: #f8fafc; border: 1.5px solid #e2e8f0;
        border-radius: 12px; overflow: visible; transition: all 0.2s;
    }
    #prof-mobile-wrap:focus-within {
        border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.08);
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<?php
    $initials = strtoupper(substr($user->name, 0, 2));
    $mobileDisplay = trim(($user->mobile_prefix ?? '') . ' ' . ($user->mobile ?? ''));
?>

<div class="workspace-console min-h-full shadow-sm flex flex-col mt-2 overflow-hidden">

    
    <div class="flex-shrink-0 px-8 pt-8 pb-6"
         style="background: radial-gradient(circle at top left, #062a27 43%, #61d7d4 112%); border-radius: 1.5rem 1.5rem 0 0;">

        <div class="flex items-center gap-5">
            
            <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-xl font-extrabold text-white flex-shrink-0"
                 style="background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.25);backdrop-filter:blur(8px)">
                <?php echo e($initials); ?>

            </div>

            
            <div class="flex-1 min-w-0">
                <h2 class="text-lg font-extrabold text-white leading-tight"><?php echo e($user->name); ?></h2>
                <p class="text-white/60 text-xs mt-0.5"><?php echo e($user->email); ?></p>
                <div class="flex flex-wrap gap-2 mt-2.5">
                    <?php if($user->role): ?>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-widest"
                              style="background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.2)">
                            <i class="fa-solid fa-user-shield text-[8px]"></i> <?php echo e($user->role->name); ?>

                        </span>
                    <?php endif; ?>
                    
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-widest"
                          style="<?php echo e($user->is_active ? 'background:rgba(52,211,153,0.25);color:#6ee7b7;border:1px solid rgba(52,211,153,0.3)' : 'background:rgba(239,68,68,0.2);color:#fca5a5;border:1px solid rgba(239,68,68,0.25)'); ?>">
                        <span class="w-1.5 h-1.5 rounded-full <?php echo e($user->is_active ? 'bg-green-400' : 'bg-red-400'); ?>"></span>
                        <?php echo e($user->is_active ? 'Active' : 'Inactive'); ?>

                    </span>
                </div>
            </div>

            
            <div class="flex flex-col gap-2 flex-shrink-0">
                <button onclick="openEditPanel()"
                    class="flex items-center gap-2 px-5 py-2.5 rounded-xl text-[11px] font-extrabold uppercase tracking-widest transition-all hover:opacity-90"
                    style="background:#fff;color:#062a27;box-shadow:0 4px 12px rgba(0,0,0,0.15)">
                    <i class="fa-solid fa-pen-to-square"></i> Edit Profile
                </button>
                <button onclick="openPasswordPanel()"
                    class="flex items-center gap-2 px-5 py-2.5 rounded-xl text-[11px] font-extrabold uppercase tracking-widest transition-all hover:opacity-90"
                    style="background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.25)">
                    <i class="fa-solid fa-lock"></i> Change Password
                </button>
            </div>
        </div>
    </div>

    
    <div class="flex-1 p-8">
        <div class="grid grid-cols-1 gap-6">

            
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background:#e6f7f6">
                            <i class="fa-solid fa-circle-user text-xs" style="color:#00ada8"></i>
                        </div>
                        <div>
                            <p class="text-sm font-extrabold text-slate-800">Profile Information</p>
                            <p class="text-[10px] text-slate-400 font-medium">Your personal details</p>
                        </div>
                    </div>
                    <button onclick="openEditPanel()"
                        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all hover:opacity-80"
                        style="background:#e6f7f6;color:#00ada8">
                        <i class="fa-solid fa-pen text-[9px]"></i> Edit
                    </button>
                </div>

                <div>
                    <div class="info-row">
                        <span class="info-label">Full Name</span>
                        <span id="dispName" class="info-value"><?php echo e($user->name); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Email</span>
                        <span id="dispEmail" class="info-value break-all"><?php echo e($user->email); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Mobile</span>
                        <span id="dispMobile" class="info-value"><?php echo e($mobileDisplay ?: '—'); ?></span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Role</span>
                        <span class="info-value"><?php echo e(optional($user->role)->name ?? '—'); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Last Login</span>
                        <span class="info-value"><?php echo e($user->lastlogin ? $user->lastlogin->format('d M Y, h:i A') : '—'); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status</span>
                        <span class="badge <?php echo e($user->is_active ? 'badge-green' : 'badge-red'); ?>">
                            <?php echo e($user->is_active ? 'Active' : 'Inactive'); ?>

                        </span>
                    </div>
                </div>
            </div>


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


<div id="editPanel">
    <div class="panel-inner">
        <div class="flex items-center justify-between px-7 py-5 border-b border-slate-100 flex-shrink-0">
            <div>
                <h3 class="text-base font-extrabold text-slate-900 tracking-tight">Edit Profile</h3>
                <p class="text-[10px] text-slate-400 font-medium mt-0.5">Update your personal information.</p>
            </div>
            <button onclick="closeAllPanels()" class="w-8 h-8 flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-xl transition-all">
                <i class="fa-solid fa-xmark text-base"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-7 py-6 space-y-4 scroll-custom">

            <div>
                <label class="panel-label">Full Name *</label>
                <input id="edit-name" type="text" value="<?php echo e($user->name); ?>" class="panel-field" placeholder="Enter full name">
            </div>

            <div>
                <label class="panel-label">Email Address *</label>
                <input id="edit-email" type="email" value="<?php echo e($user->email); ?>" class="panel-field" placeholder="Enter email address">
            </div>

            <div>
                <label class="panel-label">Mobile No *</label>
                <div id="prof-mobile-wrap">
                    
                    <select id="edit-mobile-prefix" class="hidden">
                        <?php $__currentLoopData = $phoneCodes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($pc->dial_code); ?>"
                                data-label="<?php echo e($pc->flag_emoji); ?> <?php echo e($pc->dial_code); ?>"
                                <?php echo e(($user->mobile_prefix ?? '+968') === $pc->dial_code ? 'selected' : ''); ?>>
                                <?php echo e($pc->flag_emoji); ?> <?php echo e($pc->dial_code); ?> — <?php echo e($pc->country_name); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                    
                    <div id="prefix-trigger"
                         style="width:110px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:11px 10px 11px 14px;cursor:pointer;border-right:1.5px solid #e2e8f0;user-select:none;">
                        <span id="prefix-label" style="font-size:12px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">—</span>
                        <i class="fa-solid fa-chevron-down" style="color:#94a3b8;font-size:9px;flex-shrink:0;margin-left:4px;"></i>
                    </div>
                    
                    <input id="edit-mobile" type="text" value="<?php echo e($user->mobile ?? ''); ?>"
                        inputmode="numeric"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                        placeholder="Mobile number"
                        style="flex:1;background:transparent;border:none;outline:none;padding:11px 14px;font-size:12px;font-weight:600;color:#1e293b;font-family:'Plus Jakarta Sans',sans-serif;">
                </div>
            </div>

        </div>

        <div class="flex gap-3 px-7 py-5 border-t border-slate-100 flex-shrink-0">
            <button onclick="closeAllPanels()"
                class="flex-1 py-3 rounded-xl border border-slate-200 text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-slate-50 transition-all">
                Cancel
            </button>
            <button onclick="saveProfile()"
                class="flex-1 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-white shadow-lg transition-all hover:opacity-90"
                style="background:#00ada8;box-shadow:0 4px 14px rgba(0,173,168,0.3)">
                Save Changes
            </button>
        </div>
    </div>
</div>


<div id="passwordPanel">
    <div class="panel-inner">
        <div class="flex items-center justify-between px-7 py-5 border-b border-slate-100 flex-shrink-0">
            <div>
                <h3 class="text-base font-extrabold text-slate-900 tracking-tight">Change Password</h3>
                <p class="text-[10px] text-slate-400 font-medium mt-0.5">Update your account password.</p>
            </div>
            <button onclick="closeAllPanels()" class="w-8 h-8 flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-xl transition-all">
                <i class="fa-solid fa-xmark text-base"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-7 py-6 space-y-4 scroll-custom">

            <div class="flex items-start gap-3 rounded-xl px-4 py-3" style="background:#eff6ff;border:1px solid #bfdbfe">
                <i class="fa-solid fa-circle-info text-blue-400 text-sm mt-0.5 flex-shrink-0"></i>
                <p class="text-[11px] font-medium" style="color:#1d4ed8">Minimum 8 characters with uppercase, numbers and symbols recommended.</p>
            </div>

            <div>
                <label class="panel-label">Current Password *</label>
                <div style="position:relative">
                    <input id="pw-current" type="password" class="panel-field" placeholder="Enter current password" style="padding-right:40px">
                    <button type="button" onclick="togglePw('pw-current',this)"
                        style="position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;background:none;border:none;cursor:pointer;padding:0">
                        <i class="fa-solid fa-eye text-xs"></i>
                    </button>
                </div>
            </div>

            <div>
                <label class="panel-label">New Password *</label>
                <div style="position:relative">
                    <input id="pw-new" type="password" class="panel-field" placeholder="Enter new password" style="padding-right:40px" oninput="checkPwStrength()">
                    <button type="button" onclick="togglePw('pw-new',this)"
                        style="position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;background:none;border:none;cursor:pointer;padding:0">
                        <i class="fa-solid fa-eye text-xs"></i>
                    </button>
                </div>
                <div style="display:flex;gap:6px;margin-top:8px">
                    <div id="pwBar1" style="height:4px;flex:1;border-radius:99px;background:#e2e8f0;transition:background 0.2s"></div>
                    <div id="pwBar2" style="height:4px;flex:1;border-radius:99px;background:#e2e8f0;transition:background 0.2s"></div>
                    <div id="pwBar3" style="height:4px;flex:1;border-radius:99px;background:#e2e8f0;transition:background 0.2s"></div>
                    <div id="pwBar4" style="height:4px;flex:1;border-radius:99px;background:#e2e8f0;transition:background 0.2s"></div>
                </div>
                <p id="pwStrengthLabel" style="font-size:10px;font-weight:700;margin-top:4px;color:#94a3b8"></p>
            </div>

            <div>
                <label class="panel-label">Confirm New Password *</label>
                <div style="position:relative">
                    <input id="pw-confirm" type="password" class="panel-field" placeholder="Confirm new password" style="padding-right:40px">
                    <button type="button" onclick="togglePw('pw-confirm',this)"
                        style="position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;background:none;border:none;cursor:pointer;padding:0">
                        <i class="fa-solid fa-eye text-xs"></i>
                    </button>
                </div>
            </div>

        </div>

        <div class="flex gap-3 px-7 py-5 border-t border-slate-100 flex-shrink-0">
            <button onclick="closeAllPanels()"
                class="flex-1 py-3 rounded-xl border border-slate-200 text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-slate-50 transition-all">
                Cancel
            </button>
            <button onclick="savePassword()"
                class="flex-1 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-white shadow-lg transition-all hover:opacity-90"
                style="background:#1e293b;box-shadow:0 4px 14px rgba(0,0,0,0.2)">
                Update Password
            </button>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('modals'); ?>

<div id="alertModal" class="fixed inset-0 z-[500] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeAlert()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div id="alertIconWrap" class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i id="alertIconInner" class="text-2xl"></i>
        </div>
        <h3 id="alertTitle" class="font-extrabold text-slate-800 text-base"></h3>
        <p id="alertMsg" class="text-xs text-slate-500 mt-2 leading-relaxed"></p>
        <div class="mt-8">
            <button onclick="closeAlert()" class="w-full py-3 rounded-xl text-[10px] font-black uppercase tracking-widest hover:opacity-90 transition-all"
                style="background:#00ada8;color:#fff">OK</button>
        </div>
    </div>
</div>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
const CSRF_TOKEN    = '<?php echo e(csrf_token()); ?>';
const UPDATE_URL    = '<?php echo e(route('admin.profile.update')); ?>';
const CHANGE_PW_URL = '<?php echo e(route('admin.profile.change-password')); ?>';

// ── Alert ─────────────────────────────────────────────────────────────────────
let alertTimer = null;
function showAlert(msg, type = 'info') {
    const cfg = {
        success: { bg:'#f0fdf4', icon:'fa-circle-check',        iconBg:'#dcfce7', iconColor:'#16a34a', title:'Success'  },
        error:   { bg:'#fef2f2', icon:'fa-circle-xmark',        iconBg:'#fee2e2', iconColor:'#dc2626', title:'Error'    },
        warning: { bg:'#fffbeb', icon:'fa-triangle-exclamation', iconBg:'#fef3c7', iconColor:'#d97706', title:'Warning'  },
        info:    { bg:'#eff6ff', icon:'fa-circle-info',          iconBg:'#dbeafe', iconColor:'#2563eb', title:'Info'     },
    };
    const c = cfg[type] || cfg.info;
    const modal = document.getElementById('alertModal');
    document.getElementById('alertModal').querySelector('.relative').style.background = c.bg;
    const wrap = document.getElementById('alertIconWrap');
    wrap.style.background = c.iconBg;
    document.getElementById('alertIconInner').className = `fa-solid ${c.icon} text-2xl`;
    document.getElementById('alertIconInner').style.color = c.iconColor;
    document.getElementById('alertTitle').textContent = c.title;
    document.getElementById('alertMsg').textContent   = msg;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    clearTimeout(alertTimer);
    alertTimer = setTimeout(closeAlert, 4000);
}
function closeAlert() {
    const m = document.getElementById('alertModal');
    m.classList.add('hidden');
    m.classList.remove('flex');
}

// ── Panels ────────────────────────────────────────────────────────────────────
function openEditPanel() {
    document.body.classList.add('panel-open-state');
    document.getElementById('editPanel').classList.add('panel-open');
    document.getElementById('passwordPanel').classList.remove('panel-open');
}
function openPasswordPanel() {
    document.body.classList.add('panel-open-state');
    document.getElementById('passwordPanel').classList.add('panel-open');
    document.getElementById('editPanel').classList.remove('panel-open');
}
function closeAllPanels() {
    document.body.classList.remove('panel-open-state');
    document.getElementById('editPanel').classList.remove('panel-open');
    document.getElementById('passwordPanel').classList.remove('panel-open');
    ['pw-current','pw-new','pw-confirm'].forEach(id => document.getElementById(id).value = '');
    resetPwStrength();
}

if (new URLSearchParams(window.location.search).get('openSecurity') === '1') {
    window.addEventListener('load', () => {
        openPasswordPanel();
        history.replaceState(null, '', window.location.pathname);
    });
}

// ── Mobile Prefix Searchable Select ──────────────────────────────────────────
(function () {
    const trigger = document.getElementById('prefix-trigger');
    const label   = document.getElementById('prefix-label');
    const select  = document.getElementById('edit-mobile-prefix');
    if (!trigger || !select) return;

    const options = Array.from(select.options).map(o => ({
        value: o.value,
        label: o.getAttribute('data-label') || o.value,
        text:  o.textContent.trim(),
    }));

    const current = options.find(o => o.value === select.value) || options[0];
    if (current) { label.textContent = current.label; select.value = current.value; }

    let dd = null;
    function closeDD() { if (dd) { dd.remove(); dd = null; } }

    trigger.addEventListener('click', e => {
        e.stopPropagation();
        if (dd) { closeDD(); return; }
        const rect = trigger.getBoundingClientRect();
        dd = document.createElement('div');
        dd.style.cssText = `position:fixed;top:${rect.bottom+3}px;left:${rect.left}px;width:240px;max-height:220px;background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,0.12);z-index:600;overflow:hidden;display:flex;flex-direction:column`;

        const srch = document.createElement('input');
        srch.placeholder = 'Search country…';
        srch.style.cssText = 'padding:10px 14px;font-size:11px;border:none;border-bottom:1px solid #f1f5f9;outline:none;font-family:inherit;flex-shrink:0';
        dd.appendChild(srch);

        const list = document.createElement('div');
        list.style.cssText = 'overflow-y:auto;flex:1';
        list.className = 'scroll-custom';

        function render(q) {
            list.innerHTML = '';
            (q ? options.filter(o => o.text.toLowerCase().includes(q.toLowerCase())) : options).forEach(opt => {
                const item = document.createElement('div');
                item.style.cssText = `padding:9px 14px;font-size:11px;font-weight:700;cursor:pointer;color:${opt.value===select.value?'#00ada8':'#334155'};background:${opt.value===select.value?'#e6f7f6':'transparent'}`;
                item.textContent = opt.text;
                item.onmouseover = () => { if (opt.value !== select.value) item.style.background = '#f8fffe'; item.style.color = '#00ada8'; };
                item.onmouseout  = () => { item.style.background = opt.value===select.value?'#e6f7f6':'transparent'; item.style.color = opt.value===select.value?'#00ada8':'#334155'; };
                item.addEventListener('click', () => {
                    select.value    = opt.value;
                    label.textContent = opt.label;
                    closeDD();
                });
                list.appendChild(item);
            });
        }
        render('');
        srch.addEventListener('input', () => render(srch.value));
        dd.appendChild(list);
        document.body.appendChild(dd);
        srch.focus();
    });

    document.addEventListener('click', () => closeDD());
})();

// ── Save Profile ──────────────────────────────────────────────────────────────
async function saveProfile() {
    const name   = document.getElementById('edit-name').value.trim();
    const email  = document.getElementById('edit-email').value.trim();
    const prefix = document.getElementById('edit-mobile-prefix').value;
    const mobile = document.getElementById('edit-mobile').value.trim();

    if (!name)   { showAlert('Full name is required.', 'warning'); return; }
    if (!email)  { showAlert('Email address is required.', 'warning'); return; }
    if (!mobile) { showAlert('Mobile number is required.', 'warning'); return; }

    const fd = new FormData();
    fd.append('_token', CSRF_TOKEN); fd.append('_method', 'PUT');
    fd.append('name', name); fd.append('email', email);
    fd.append('mobile_prefix', prefix); fd.append('mobile', mobile);

    try {
        const res  = await fetch(UPDATE_URL, { method:'POST', body:fd, headers:{Accept:'application/json'} });
        const data = await res.json();
        if (data.success) {
            document.getElementById('dispName').textContent   = name;
            document.getElementById('dispEmail').textContent  = email;
            document.getElementById('dispMobile').textContent = (prefix + ' ' + mobile).trim() || '—';
            closeAllPanels();
            showAlert('Profile updated successfully.', 'success');
        } else {
            const errs = data.errors ? Object.values(data.errors).flat().join(' ') : (data.message || 'Failed to update profile.');
            showAlert(errs, 'error');
        }
    } catch { showAlert('An error occurred. Please try again.', 'error'); }
}

// ── Save Password ─────────────────────────────────────────────────────────────
async function savePassword() {
    const current = document.getElementById('pw-current').value;
    const newPw   = document.getElementById('pw-new').value;
    const confirm = document.getElementById('pw-confirm').value;

    if (!current)         { showAlert('Current password is required.', 'warning'); return; }
    if (newPw.length < 8) { showAlert('New password must be at least 8 characters.', 'warning'); return; }
    if (newPw !== confirm) { showAlert('Passwords do not match.', 'warning'); return; }

    const fd = new FormData();
    fd.append('_token', CSRF_TOKEN); fd.append('_method', 'PUT');
    fd.append('current_password', current);
    fd.append('new_password', newPw);
    fd.append('new_password_confirmation', confirm);

    try {
        const res  = await fetch(CHANGE_PW_URL, { method:'POST', body:fd, headers:{Accept:'application/json'} });
        const data = await res.json();
        if (data.success) {
            closeAllPanels();
            showAlert('Password changed successfully.', 'success');
        } else {
            showAlert(data.message || 'Failed to change password.', 'error');
        }
    } catch { showAlert('An error occurred. Please try again.', 'error'); }
}

// ── Password strength ─────────────────────────────────────────────────────────
function checkPwStrength() {
    const pw = document.getElementById('pw-new').value;
    let score = 0;
    if (pw.length >= 8)          score++;
    if (/[A-Z]/.test(pw))        score++;
    if (/[0-9]/.test(pw))        score++;
    if (/[^A-Za-z0-9]/.test(pw)) score++;
    const colors = ['#f87171','#fbbf24','#facc15','#22c55e'];
    const labels = ['Weak','Fair','Good','Strong'];
    const lColors = ['#dc2626','#d97706','#ca8a04','#16a34a'];
    ['pwBar1','pwBar2','pwBar3','pwBar4'].forEach((id,i) => {
        document.getElementById(id).style.background = i < score ? colors[score-1] : '#e2e8f0';
    });
    const lbl = document.getElementById('pwStrengthLabel');
    lbl.textContent = score > 0 ? labels[score-1] : '';
    lbl.style.color = score > 0 ? lColors[score-1] : '#94a3b8';
}
function resetPwStrength() {
    ['pwBar1','pwBar2','pwBar3','pwBar4'].forEach(id => document.getElementById(id).style.background = '#e2e8f0');
    document.getElementById('pwStrengthLabel').textContent = '';
}

// ── Toggle password visibility ────────────────────────────────────────────────
function togglePw(inputId, btn) {
    const inp = document.getElementById(inputId);
    const ico = btn.querySelector('i');
    if (inp.type === 'password') { inp.type = 'text';     ico.className = 'fa-solid fa-eye-slash text-xs'; }
    else                         { inp.type = 'password'; ico.className = 'fa-solid fa-eye text-xs'; }
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\laragon\app\laraveladmin\resources\views/admin/profile/index.blade.php ENDPATH**/ ?>