<?php
/* ====================================================
SAFETY TALK SYSTEM - PT CITRA LAMPIA MANDIRI
File        : footer.php
Versi       : 1.2 (Logout Button Integration)
Fitur       : - User Info Display
              - Real-time Clock (Asia/Jakarta)
              - Quick Navigation Links + Admin Panel (role-based)
              - ✅ Logout Button with Confirmation
              - Version & System Info
              - Responsive & Print-Friendly
====================================================
*/

// Set timezone
date_default_timezone_set('Asia/Jakarta');

// Get user info from session (if exists)
if(session_status() === PHP_SESSION_NONE) session_start();
$userName = $_SESSION['user_name'] ?? 'Guest';
$userRole = $_SESSION['user_role'] ?? 'Pengguna';
$loginTime = $_SESSION['login_time'] ?? null;
$isAdmin = ($userRole === 'admin');
$isLoggedIn = isset($_SESSION['user_logged_in']) && $_SESSION['user_logged_in'] === true;
?>

<!-- ===== FOOTER COMPONENT ===== -->
<footer class="app-footer no-print" role="contentinfo">
    <div class="footer-container">
        
        <!-- Left: Branding & Info -->
        <div class="footer-brand">
            <div class="brand-logo">
                <i class="fas fa-shield-alt"></i>
                <span>PT CITRA LAMPIA MANDIRI</span>
            </div>
            <small class="brand-subtitle">QHSEF Department • Safety Talk System</small>
            <span class="version-badge">v<?= defined('APP_VERSION') ? APP_VERSION : '2.5.0' ?></span>
        </div>

        <!-- Center: Quick Links -->
        <div class="footer-links">
            <a href="index.php" class="footer-link" title="Dashboard">
                <i class="fas fa-home"></i> Dashboard
            </a>
            <a href="rekap.php" class="footer-link" title="Rekap Data">
                <i class="fas fa-table"></i> Rekap
            </a>
            <a href="formulir/input_safety_talk.php" class="footer-link" title="Input Baru">
                <i class="fas fa-plus"></i> Input
            </a>
            <a href="help.php" class="footer-link" title="Bantuan & Panduan">
                <i class="fas fa-circle-question"></i> Bantuan
            </a>
            <a href="#" onclick="window.print(); return false;" class="footer-link" title="Cetak Halaman">
                <i class="fas fa-print"></i> Cetak
            </a>
            <?php if($isAdmin): ?>
            <a href="admin_panel.php" class="footer-link footer-link-admin" title="Admin Panel">
                <i class="fas fa-user-shield"></i> Admin
            </a>
            <?php endif; ?>
            <?php if($isLoggedIn): ?>
            <a href="logout.php" class="footer-link footer-link-logout" title="Keluar dari sistem" onclick="return confirmLogout(event)">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
            <?php endif; ?>
        </div>

        <!-- Right: User & Time -->
        <div class="footer-meta">
            <div class="user-info">
                <div class="user-avatar">
                    <?= strtoupper(substr($userName, 0, 1)) ?>
                </div>
                <div class="user-details">
                    <span class="user-name"><?= htmlspecialchars($userName) ?></span>
                    <span class="user-role"><?= htmlspecialchars($userRole) ?></span>
                </div>
            </div>
            <div class="time-display">
                <i class="far fa-clock"></i>
                <span id="footerClock">--:--:--</span>
                <small id="footerDate">--/--/----</small>
            </div>
            <?php if($loginTime): ?>
            <small class="login-info" title="Waktu login">
                <i class="fas fa-sign-in-alt"></i> Login: <?= date('H:i', strtotime($loginTime)) ?>
            </small>
            <?php endif; ?>
        </div>
    </div>

    <!-- Bottom Bar: System Status -->
    <div class="footer-bottom">
        <div class="status-indicator">
            <span class="status-dot status-online"></span>
            <span>System Online</span>
        </div>
        <div class="footer-copyright">
            &copy; <?= date('Y') ?> Developed by AF for PT Citra Lampia Mandiri • All Rights Reserved
        </div>
        <button class="btn-scroll-top" onclick="scrollToTop()" title="Kembali ke atas">
            <i class="fas fa-arrow-up"></i>
        </button>
    </div>
</footer>

<!-- ===== FOOTER STYLES ===== -->
<style>
.app-footer {
    background: linear-gradient(135deg, var(--primary, #0f172a) 0%, var(--primary-dark, #1e3a8a) 100%);
    color: white;
    padding: 0;
    margin-top: 30px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Brand Section */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}
.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
}
.brand-logo i { color: #60a5fa; font-size: 14px; }
.brand-subtitle {
    font-size: 10px;
    opacity: 0.85;
    color: rgba(255,255,255,0.9);
}
.version-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    width: fit-content;
    margin-top: 2px;
}

/* Links Section */
.footer-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.footer-link i { font-size: 10px; opacity: 0.9; }
.footer-link:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
}
.footer-link:active { transform: translateY(0); }

/* Admin Link Special Style */
.footer-link-admin {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3));
    border-color: rgba(245, 158, 11, 0.6);
    color: #fef3c7;
}
.footer-link-admin:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.5), rgba(217, 119, 6, 0.5));
    border-color: #f59e0b;
    color: white;
}
.footer-link-admin i { color: #fbbf24; }

/* ✅ Logout Link Special Style */
.footer-link-logout {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.3));
    border-color: rgba(220, 38, 38, 0.6);
    color: #fecaca;
}
.footer-link-logout:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.5), rgba(185, 28, 28, 0.5));
    border-color: #dc2626;
    color: white;
    transform: translateY(-2px);
}
.footer-link-logout i { color: #f87171; }

/* Meta Section (User + Time) */
.footer-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
}
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: white;
}
.user-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.user-name {
    font-size: 12px;
    font-weight: 600;
}
.user-role {
    font-size: 9px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.time-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 80px;
}
.time-display i { font-size: 10px; opacity: 0.85; margin-bottom: 2px; }
#footerClock {
    font-weight: 700;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
#footerDate {
    font-size: 9px;
    opacity: 0.8;
}
.login-info {
    opacity: 0.75;
    font-size: 9px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.login-info i { font-size: 8px; }

/* Bottom Bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    font-size: 10px;
    opacity: 0.85;
}
.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2s infinite;
}
.status-dot.status-offline { background: #ef4444; animation: none; }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}
.footer-copyright { opacity: 0.7; }
.btn-scroll-top {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}
.btn-scroll-top:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-3px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 16px;
    }
    .footer-brand, .footer-meta {
        align-items: center;
    }
    .footer-links { justify-content: center; }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 12px 16px;
    }
    .time-display { align-items: center; text-align: center; }
}

/* ===== PRINT HIDE ===== */
@media print {
    .app-footer, .no-print { display: none !important; }
}

/* ===== ACCESSIBILITY ===== */
.footer-link:focus, .btn-scroll-top:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
.footer-link-logout:focus {
    outline-color: #f87171;
}
</style>

<!-- ===== FOOTER SCRIPTS ===== -->
<script>
// Real-time Clock Update (Asia/Jakarta)
function updateFooterClock() {
    const now = new Date();
    const timeStr = now.toLocaleTimeString('id-ID', {
        hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    });
    const dateStr = now.toLocaleDateString('id-ID', {
        day: '2-digit', month: '2-digit', year: 'numeric'
    });
    document.getElementById('footerClock').textContent = timeStr;
    document.getElementById('footerDate').textContent = dateStr;
}
setInterval(updateFooterClock, 1000);
updateFooterClock();

// Scroll to Top Function
function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}
window.addEventListener('scroll', function() {
    const btn = document.querySelector('.btn-scroll-top');
    if(btn) btn.style.opacity = window.scrollY > 300 ? '1' : '0.6';
});

// ===== LOGOUT CONFIRMATION =====
function confirmLogout(event) {
    // Allow bypass with Ctrl/Cmd key (for power users)
    if(event.ctrlKey || event.metaKey) {
        return true;
    }
    
    // Show confirmation dialog
    const confirmed = confirm('⚠️ Yakin ingin keluar dari sistem?\n\nSemua sesi akan diakhiri.');
    if(!confirmed) {
        event.preventDefault();
        return false;
    }
    return true;
}

// ===== KEYBOARD SHORTCUTS =====
document.addEventListener('keydown', function(e) {
    // Press "t" to go to top (only if not in input field)
    if(e.key === 't' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
        e.preventDefault();
        scrollToTop();
    }
    
    // Ctrl+A for Admin Panel (if admin)
    if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
        const adminLink = document.querySelector('.footer-link-admin');
        if(adminLink) {
            e.preventDefault();
            window.location.href = adminLink.href;
        }
    }
    
    // ✅ Ctrl+Q or Ctrl+L for Logout (if logged in)
    if((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === 'q' || e.key.toLowerCase() === 'l')) {
        const logoutLink = document.querySelector('.footer-link-logout');
        if(logoutLink) {
            e.preventDefault();
            // Skip confirmation for keyboard shortcut (power user feature)
            window.location.href = logoutLink.href;
        }
    }
});
</script>