kelompok06-2048/Logout.js

(function() {
    'use strict';
    
    // CHECK LOGIN STATUS
    function checkLoginStatus() {
        const loggedInUser = sessionStorage.getItem("loggedInUser");
        const loginBtn = document.querySelector('.btn-login');
        
        if (loggedInUser && loginBtn) {
            // User is logged in - change to Logout button
            loginBtn.textContent = 'Logout';
            loginBtn.classList.remove('btn-login');
            loginBtn.classList.add('btn-logout');
            loginBtn.href = '#'; // Prevent navigation
            
            // Remove existing click listeners (untuk menghindari duplikat)
            loginBtn.replaceWith(loginBtn.cloneNode(true));
            
            // Get new reference dan add logout handler
            const newLogoutBtn = document.querySelector('.btn-logout');
            if (newLogoutBtn) {
                newLogoutBtn.addEventListener('click', handleLogoutClick);
            }
            
            console.log('✅ User logged in:', loggedInUser);
        } else {
            console.log('ℹ️ No user logged in');
        }
    }
    
    // ==================== LOGOUT CLICK HANDLER ====================
    function handleLogoutClick(e) {
        e.preventDefault();
        showLogoutModal();
    }
    
    // ==================== SHOW LOGOUT CONFIRMATION MODAL ====================
    function showLogoutModal() {
        const overlay = document.getElementById('logout-overlay');
        if (overlay) {
            overlay.style.display = 'flex';
            setTimeout(() => overlay.classList.add('active'), 10);
            
            // Setup modal buttons
            setupModalButtons();
        }
    }
    
    // ==================== SETUP MODAL BUTTONS ====================
    function setupModalButtons() {
        const cancelBtn = document.getElementById('btn-logout-cancel');
        const confirmBtn = document.getElementById('btn-logout-confirm');
        const overlay = document.getElementById('logout-overlay');
        
        // Remove previous listeners
        if (cancelBtn) {
            const newCancelBtn = cancelBtn.cloneNode(true);
            cancelBtn.replaceWith(newCancelBtn);
            newCancelBtn.onclick = closeLogoutModal;
        }
        
        if (confirmBtn) {
            const newConfirmBtn = confirmBtn.cloneNode(true);
            confirmBtn.replaceWith(newConfirmBtn);
            newConfirmBtn.onclick = confirmLogout;
        }
        
        // Close on overlay click
        if (overlay) {
            overlay.onclick = function(e) {
                if (e.target === overlay) {
                    closeLogoutModal();
                }
            };
        }
        
        // ESC key to close (gunakan named function agar bisa di-remove)
        document.addEventListener('keydown', handleEscapeKey);
    }
    
    // ==================== HANDLE ESCAPE KEY ====================
    function handleEscapeKey(e) {
        if (e.key === 'Escape') {
            const overlay = document.getElementById('logout-overlay');
            if (overlay && overlay.classList.contains('active')) {
                closeLogoutModal();
            }
        }
    }
    
    // ==================== CLOSE LOGOUT MODAL ====================
    function closeLogoutModal() {
        const overlay = document.getElementById('logout-overlay');
        if (overlay) {
            overlay.classList.remove('active');
            setTimeout(() => {
                overlay.style.display = 'none';
            }, 300);
        }
        
        // Remove escape key listener
        document.removeEventListener('keydown', handleEscapeKey);
    }
    
    // CONFIRM LOGOUT
    // GANTI fungsi confirmLogout() yang lama dengan ini:

    function confirmLogout() {
        console.log("Mencoba logout ke server..."); // Debugging

        // 1. Panggil PHP untuk hancurkan sesi server
        fetch('Logout.php') 
            .then(response => {
                console.log("Respon server:", response);
                return response.json(); // Ubah ke JSON biar bisa dicek
            })
            .then(data => {
                console.log("Status Logout:", data);
            
                // 2. Hapus data di browser (Session Storage)
                sessionStorage.removeItem("loggedInUser");
                sessionStorage.removeItem("authToken"); // Kalau ada
                sessionStorage.clear(); // Bersihkan semuanya biar aman
            
                // 3. Tutup Modal & Redirect
                closeLogoutModal();
                showSuccessModal();
            
                setTimeout(() => {
                    // Redirect ke Homepage
                    window.location.replace('Homepage.html'); 
                }, 1500);
            })
            .catch(error => {
                console.error('Logout error:', error);
                // Fallback: Kalau server error, tetap paksa keluar di tampilan
                sessionStorage.clear();
                window.location.replace('Homepage.html');
            });
    }
    
    // ==================== SHOW SUCCESS MODAL ====================
    function showSuccessModal() {
        const successOverlay = document.getElementById('logout-success-overlay');
        if (successOverlay) {
            successOverlay.style.display = 'flex';
            setTimeout(() => successOverlay.classList.add('active'), 10);
            
            // Auto close after 1.3 seconds
            setTimeout(() => {
                successOverlay.classList.remove('active');
                setTimeout(() => {
                    successOverlay.style.display = 'none';
                }, 300);
            }, 1300);
        }
    }
    
    
    // ==================== INITIALIZE ====================
    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', checkLoginStatus);
        } else {
            checkLoginStatus();
        }
    }
    

    // Start
    init();
    
})();