<?php
session_start();

// Log the logout activity before destroying session
if (isset($_SESSION['user_id'])) {
    include 'layouts/dbconn.php';

    // Get client information for logging
    $ip_address = $_SERVER['REMOTE_ADDR'];
    if (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        $ip_address = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    $user_agent = $_SERVER['HTTP_USER_AGENT'] ?? '';

    try {
        // Log logout activity using audit_logs table
        $log_sql = "INSERT INTO audit_logs (event_type, event_category, event_description, performed_by, ip_address, created_at) 
                   VALUES (?, ?, ?, ?, ?, CURRENT_TIMESTAMP)";
        $log_stmt = $conn->prepare($log_sql);
        $event_type = 'USER_LOGOUT';
        $event_category = 'SYSTEM';
        $logout_data = json_encode([
            'logout_time' => date('Y-m-d H:i:s'),
            'session_duration' => isset($_SESSION['login_time']) ? (time() - $_SESSION['login_time']) : 0,
            'ip_address' => $ip_address,
            'role' => $_SESSION['role_name'] ?? 'UNKNOWN',
            'session_id' => session_id()
        ]);
        $performed_by = $_SESSION['username'] ?? 'UNKNOWN';
        $log_stmt->bind_param("sssss", $event_type, $event_category, $logout_data, $performed_by, $ip_address);
        $log_stmt->execute();
        $log_stmt->close();

        $conn->close();
    } catch (Exception $e) {
        error_log("Logout logging error: " . $e->getMessage());
    }
}

// Store user name for display before destroying session
$user_name = $_SESSION['full_name'] ?? $_SESSION['username'] ?? 'User';

session_unset();
session_destroy();

// Clear session cookie
if (ini_get("session.use_cookies")) {
    $params = session_get_cookie_params();
    setcookie(
        session_name(),
        '',
        time() - 42000,
        $params["path"],
        $params["domain"],
        $params["secure"],
        $params["httponly"]
    );
}

?>
<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Logged Out - Kenyan Pension & Life Insurance System')); ?>
    <?php include 'layouts/head-css.php'; ?>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.lordicon.com/lordicon.js"></script>

    <style>
        :root {
            --primary-care: #2563eb;
            --primary-care-light: #3b82f6;
            --primary-care-dark: #1e40af;
            --accent-care: #60a5fa;
            --success-care: #10b981;
            --light-blue: #eff6ff;
            --very-light-blue: #f0f9ff;
            --medical-purple: #8b5cf6;
            --medical-purple-light: #a78bfa;
            --text-dark: #1f2937;
            --text-muted: #6b7280;
            --white: #ffffff;
            --light-gray: #f9fafb;
            --border-color: #e5e7eb;
        }

        body {
            background: linear-gradient(135deg, var(--very-light-blue) 0%, var(--light-blue) 100%);
            min-height: 100vh;
        }

        .auth-page-wrapper {
            background: linear-gradient(135deg, var(--very-light-blue) 0%, var(--light-blue) 100%);
        }

        .card {
            border: none;
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
            border-radius: 16px;
            overflow: hidden;
        }

        .bg-primary {
            background: linear-gradient(135deg, #ffffff 0%, #f8faff 30%, #eff6ff 100%) !important;
            border-right: 4px solid var(--primary-care);
        }

        .logo-accent {
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(135deg, var(--light-blue), var(--very-light-blue));
            border-radius: 50%;
            z-index: -1;
            opacity: 0.3;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-care) 0%, var(--medical-purple) 100%);
            z-index: 1;
        }

        .feature-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
            border-color: var(--primary-care-light);
        }

        .feature-icon {
            color: var(--primary-care);
        }

        .logout-animation {
            animation: bounceIn 1s ease-out;
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }

            50% {
                opacity: 1;
                transform: scale(1.05);
            }

            70% {
                transform: scale(0.9);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, var(--primary-care) 0%, var(--primary-care-light) 100%);
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-primary-custom:hover {
            background: linear-gradient(135deg, var(--primary-care-dark) 0%, var(--primary-care) 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
            color: white;
        }

        .btn-secondary-custom {
            background: transparent;
            border: 2px solid var(--border-color);
            color: var(--text-dark);
            border-radius: 8px;
            padding: 10px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-secondary-custom:hover {
            background: var(--light-blue);
            border-color: var(--primary-care);
            color: var(--primary-care);
            transform: translateY(-2px);
        }

        .security-info {
            background: var(--very-light-blue);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
        }

        .time-display {
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--text-muted);
            background: var(--light-gray);
            padding: 8px 12px;
            border-radius: 8px;
            display: inline-block;
            border: 1px solid var(--border-color);
        }

        .text-primary {
            color: var(--primary-care) !important;
        }

        .text-muted {
            color: var(--text-muted) !important;
        }
    </style>
</head>

<body>
    <div class="auth-page-wrapper py-5 d-flex justify-content-center align-items-center min-vh-100">
        <div class="auth-page-content overflow-hidden pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card overflow-hidden border-0 shadow-lg">
                            <div class="row g-0">
                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 h-100 bg-primary bg-gradient">
                                        <div
                                            class="position-relative h-100 d-flex flex-column align-items-center justify-content-center text-center">
                                            <div class="mb-4">
                                                <a href="index.php" class="d-block position-relative">
                                                    <div class="logo-accent"></div>
                                                    <img src="assets/images/logo/CWUA.png" alt="Kenyan Pension & Life Insurance System"
                                                        height="80" class="mb-3 position-relative">
                                                </a>
                                                <h4 class="text-dark mb-3">Session Ended Securely</h4>
                                                <p class="text-muted mb-4">Your session has been safely terminated.
                                                    Thank you for using Kenyan Pension & Life Insurance Management System.</p>
                                            </div>

                                            <div class="row text-center w-100">
                                                <div class="col-12 mb-3">
                                                    <div class="feature-item">
                                                        <i
                                                            class="ri-shield-check-line feature-icon h4 mb-2 d-block"></i>
                                                        <small class="text-dark fw-semibold">Secure Logout</small>
                                                        <div class="text-muted small mt-1">All session data cleared
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <div class="feature-item">
                                                        <i class="ri-lock-line feature-icon h4 mb-2 d-block"></i>
                                                        <small class="text-dark fw-semibold">Data Protected</small>
                                                        <div class="text-muted small mt-1">RBA compliant security
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="feature-item">
                                                        <i class="ri-time-line feature-icon h4 mb-2 d-block"></i>
                                                        <small class="text-dark fw-semibold">Activity Logged</small>
                                                        <div class="text-muted small mt-1">Session recorded securely
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 d-flex flex-column justify-content-center h-100">
                                        <div class="text-center logout-animation">
                                            <lord-icon src="https://cdn.lordicon.com/hzomhqxz.json" trigger="loop"
                                                colors="primary:#2563eb,secondary:#1e40af"
                                                style="width:120px;height:120px">
                                            </lord-icon>

                                            <div class="mt-4">
                                                <h4 class="text-primary mb-2">Successfully Logged Out</h4>
                                                <p class="text-muted mb-1">
                                                    Goodbye,
                                                    <strong><?php echo htmlspecialchars($user_name); ?></strong>!
                                                </p>
                                                <p class="text-muted mb-4">
                                                    Thank you for using <span class="fw-semibold text-primary">Pension & Life Insurance System</span>
                                                </p>

                                                <div class="mb-4">
                                                    <div class="time-display">
                                                        <i class="ri-time-line me-2"></i>
                                                        Logged out at: <?php echo date('F j, Y \a\t g:i A T'); ?>
                                                    </div>
                                                </div>

                                                <div class="d-grid gap-2 d-md-block">
                                                    <a href="login.php?logout=success" class="btn btn-primary-custom me-md-2">
                                                        <i class="ri-login-circle-line me-2"></i>Sign In Again
                                                    </a>
                                                    <a href="index.php" class="btn btn-secondary-custom">
                                                        <i class="ri-home-line me-2"></i>Go Home
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-5">
                                            <div class="security-info">
                                                <h6 class="text-primary mb-3">
                                                    <i class="ri-information-line me-2"></i>Security Notice
                                                </h6>
                                                <ul class="text-muted small mb-0 ps-3">
                                                    <li>Your session has been completely terminated</li>
                                                    <li>All temporary data has been cleared</li>
                                                    <li>For your security, close all browser windows</li>
                                                    <li>Use a private/incognito window on shared computers</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="mt-4 text-center">
                                            <div class="row text-center">
                                                <div class="col-4">
                                                    <a href="register.php"
                                                        class="text-decoration-none small text-muted">
                                                        <i class="ri-user-add-line d-block mb-1"></i>
                                                        Register
                                                    </a>
                                                </div>
                                                <div class="col-4">
                                                    <a href="forgot_password.php"
                                                        class="text-decoration-none small text-muted">
                                                        <i class="ri-lock-unlock-line d-block mb-1"></i>
                                                        Reset
                                                    </a>
                                                </div>
                                                <div class="col-4">
                                                    <a href="mailto:support@pensionlife.co.ke"
                                                        class="text-decoration-none small text-muted">
                                                        <i class="ri-customer-service-line d-block mb-1"></i>
                                                        Support
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0 text-muted">
                                &copy;
                                <script>document.write(new Date().getFullYear())</script>
                                <span class="text-primary fw-semibold">Kenyan Pension & Life Insurance Management System</span> -
                                RBA Compliant Platform
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>

    <script>
        window.history.pushState(null, null, window.location.href);
        window.onpopstate = function (event) {
            window.history.pushState(null, null, window.location.href);
        };

        if ('caches' in window) {
            caches.keys().then(function (names) {
                names.forEach(function (name) {
                    caches.delete(name);
                });
            });
        }

        // Auto redirect to login after 30 seconds
        setTimeout(function () {
            window.location.href = 'login.php';
        }, 30000);
    </script>
</body>

</html>
