                <footer style="margin-top: auto; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid rgba(0,0,0,0.05); text-align: center; color: var(--text-muted); font-size: 0.875rem; width: 100%;">
                    &copy; <?php echo date('Y'); ?> Nexova. All rights reserved. | Powered by Nexova
                </footer>
            </div>
        </main>
    </div>
    <!-- Global Confirmation Modal -->
    <div id="confirmModal" class="modal-overlay">
        <div class="modal-content" style="max-width: 400px; text-align: center; padding: 2rem;">
            <div style="width: 60px; height: 60px; background: rgba(239, 68, 68, 0.1); color: var(--danger); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.5rem;">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h2 id="confirmTitle" style="margin-bottom: 0.5rem;">Confirm Action</h2>
            <p id="confirmMessage" style="color: var(--text-muted); margin-bottom: 2rem;">Are you sure you want to proceed? This action cannot be undone.</p>
            <div style="display: flex; gap: 1rem; justify-content: center;">
                <button class="btn" style="background: rgba(0,0,0,0.05); min-width: 100px;" onclick="closeModal('confirmModal')">Cancel</button>
                <button id="confirmBtn" class="btn" style="background: var(--danger); color: white; min-width: 100px;">Delete</button>
            </div>
        </div>
    </div>

    <!-- Change Password Modal -->
    <div id="changePasswordModal" class="modal-overlay">
        <div class="modal-content" style="max-width: 400px;">
            <div class="modal-header">
                <h2 style="font-size: 1.25rem; margin: 0;">Change Password</h2>
                <button type="button" class="btn-icon btn-sm" onclick="document.getElementById('changePasswordModal').classList.remove('active')"><i class="fas fa-times"></i></button>
            </div>
            <form id="changePasswordForm" onsubmit="event.preventDefault(); submitChangePassword();" data-no-busy="true">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Current Password</label>
                        <div style="position: relative;">
                            <input type="password" name="current_password" id="cpCurrent" required class="form-control" style="padding-right: 2.5rem;">
                            <i class="fas fa-eye" style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted);" onclick="toggleCPVisibility('cpCurrent', this)"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">New Password</label>
                        <div style="position: relative;">
                            <input type="password" name="new_password" id="cpNew" required class="form-control" minlength="6" style="padding-right: 2.5rem;">
                            <i class="fas fa-eye" style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted);" onclick="toggleCPVisibility('cpNew', this)"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Confirm New Password</label>
                        <div style="position: relative;">
                            <input type="password" name="confirm_password" id="cpConfirm" required class="form-control" minlength="6" style="padding-right: 2.5rem;">
                            <i class="fas fa-eye" style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted);" onclick="toggleCPVisibility('cpConfirm', this)"></i>
                        </div>
                    </div>
                    <div id="cpError" style="color: var(--danger); font-size: 0.85rem; display: none;"></div>
                    <div id="cpSuccess" style="color: var(--success); font-size: 0.85rem; display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" style="background: rgba(0,0,0,0.05);" onclick="document.getElementById('changePasswordModal').classList.remove('active')">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="cpSubmitBtn">Update Password</button>
                </div>
            </form>
        </div>
    </div>
    <script>
    function toggleCPVisibility(inputId, icon) {
        const input = document.getElementById(inputId);
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    async function submitChangePassword() {
        const form = document.getElementById('changePasswordForm');
        const fd = new FormData(form);
        
        if (fd.get('new_password') !== fd.get('confirm_password')) {
            document.getElementById('cpError').innerText = 'New passwords do not match.';
            document.getElementById('cpError').style.display = 'block';
            return;
        }
        
        const btn = document.getElementById('cpSubmitBtn');
        const origText = btn.innerText;
        btn.innerText = 'Updating...';
        btn.classList.add('btn-loading');
        btn.disabled = true;
        document.getElementById('cpError').style.display = 'none';
        document.getElementById('cpSuccess').style.display = 'none';

        try {
            const basePath = window.APP_CONFIG ? window.APP_CONFIG.BASE_PATH : '/';
            // append action to FormData
            fd.append('action', 'change_password');
            const res = await fetch(`${basePath}api/profile.php`, {
                method: 'POST',
                body: fd
            });
            const json = await res.json();
            if (json.success) {
                document.getElementById('cpSuccess').innerText = 'Password updated successfully.';
                document.getElementById('cpSuccess').style.display = 'block';
                form.reset();
                setTimeout(() => {
                    document.getElementById('changePasswordModal').classList.remove('active');
                    document.getElementById('cpSuccess').style.display = 'none';
                }, 2000);
            } else {
                document.getElementById('cpError').innerText = json.message || 'Error updating password.';
                document.getElementById('cpError').style.display = 'block';
            }
        } catch (e) {
            document.getElementById('cpError').innerText = 'Network error. Please try again.';
            document.getElementById('cpError').style.display = 'block';
        } finally {
            btn.innerText = origText;
            btn.classList.remove('btn-loading');
            btn.disabled = false;
        }
    }
    </script>

    <script src="<?php echo url('assets/js/app.js'); ?>?v=1.0.1"></script>
</body>
</html>
