<?php
// LOGOUT.PHP - Keep all your existing PHP logout logic
session_start();

if (isset($_SESSION['user_id'])) {
    include 'layouts/dbconn.php';
    
    $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 {
        // Keep your existing logout logging logic
        $log_sql = "INSERT INTO activity_log (user_id, action, module, record_id, old_values, new_values, ip_address, user_agent, logged_at) 
                   VALUES (?, 'LOGOUT', 'users', ?, NULL, ?, ?, ?, NOW())";
        $log_stmt = $conn->prepare($log_sql);
        $session_id = session_id();
        $logout_data = json_encode(array(
            'logout_time' => date('Y-m-d H:i:s'),
            'session_duration' => isset($_SESSION['login_time']) ? (time() - $_SESSION['login_time']) : 0,
            'ip_address' => $ip_address
        ));
        $log_stmt->bind_param("issss", $_SESSION['user_id'], $_SESSION['user_id'], $logout_data, $ip_address, substr($user_agent, 0, 255));
        $log_stmt->execute();
        $log_stmt->close();
        
        $conn->close();
    } catch (Exception $e) {
        error_log("Logout logging error: " . $e->getMessage());
    }
}

$user_name = $_SESSION['full_name'] ?? 'User';

session_unset();
session_destroy();

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 - Myne Travel Agency')); ?>
    <?php include 'layouts/head-css.php'; ?>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-green: #2B8B3C;
            --light-green: #f8fdf9;
            --subtle-green: #f3f9f4;
            --accent-green: #4CAF50;
            --text-dark: #2C3E50;
            --text-light: #6C757D;
            --white: #FFFFFF;
            --border-light: #e8f5ea;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, var(--light-green) 0%, var(--white) 50%, #f8fafc 100%);
            min-height: 100vh;
        }

        .auth-page-wrapper {
            background: linear-gradient(135deg, var(--light-green) 0%, var(--white) 100%);
            min-height: 100vh;
        }
        
        .logout-card {
            border: none;
            border-radius: 24px;
            box-shadow: 
                0 20px 40px rgba(43, 139, 60, 0.06),
                0 10px 20px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            border: 1px solid var(--border-light);
        }
        
        .logout-left-panel {
            background: linear-gradient(135deg, var(--white) 0%, var(--subtle-green) 100%);
            position: relative;
            border-right: 1px solid var(--border-light);
        }
        
        .logout-left-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232B8B3C' fill-opacity='0.03'%3E%3Cpath d='M30 0l15 26H15zM0 30l26-15v30zM30 60l-15-26h30zM60 30l-26 15V15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }
        
        .logout-content {
            position: relative;
            z-index: 2;
        }
        
        .logo-container {
            margin-bottom: 2rem;
        }

        .logo-bg {
            width: 120px;
            height: 120px;
            background: var(--white);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            box-shadow: 
                0 10px 25px rgba(43, 139, 60, 0.08),
                0 5px 15px rgba(0, 0, 0, 0.04);
            border: 2px solid var(--border-light);
        }

        .company-logo {
            max-width: 90px;
            max-height: 90px;
            object-fit: contain;
        }
        
        .feature-item {
            background: var(--white);
            border: 1px solid var(--border-light);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(43, 139, 60, 0.04);
        }
        
        .feature-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(43, 139, 60, 0.1);
            border-color: var(--primary-green);
        }

        .feature-item i {
            color: var(--primary-green);
        }

        .feature-item small {
            color: var(--text-dark);
            font-weight: 600;
        }

        .feature-item .small {
            color: var(--text-light);
        }
        
        .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-green) 0%, var(--accent-green) 100%);
            border: none;
            border-radius: 12px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(43, 139, 60, 0.25);
        }
        
        .btn-secondary-custom {
            border: 2px solid var(--primary-green);
            background: transparent;
            color: var(--primary-green);
            border-radius: 12px;
            padding: 10px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-secondary-custom:hover {
            background: var(--primary-green);
            color: white;
            transform: translateY(-2px);
        }
        
        .security-info {
            background: var(--subtle-green);
            border: 1px solid var(--border-light);
            border-radius: 15px;
            padding: 20px;
        }
        
        .time-display {
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--text-light);
            background: var(--white);
            border: 1px solid var(--border-light);
            padding: 12px 16px;
            border-radius: 12px;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(43, 139, 60, 0.04);
        }

        .logout-icon-container {
            width: 100px;
            height: 100px;
            background: var(--subtle-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            border: 2px solid var(--border-light);
            box-shadow: 0 8px 20px rgba(43, 139, 60, 0.08);
        }

        .logout-icon {
            font-size: 2.5rem;
            color: var(--primary-green);
        }

        .welcome-title, .logout-title {
            color: var(--text-dark);
        }

        .welcome-subtitle, .logout-subtitle {
            color: var(--text-light);
        }
    </style>
</head>

<body>
    <!-- auth-page wrapper -->
    <div class="auth-page-wrapper py-5 d-flex justify-content-center align-items-center min-vh-100">
        
        <!-- auth-page content -->
        <div class="auth-page-content overflow-hidden pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card logout-card">
                            <div class="row g-0">
                                <div class="col-lg-6">
                                    <div class="logout-left-panel p-lg-5 p-4 h-100 d-flex flex-column justify-content-center">
                                        <div class="logout-content text-center">
                                            <div class="mb-4">
                                                <div class="logo-container">
                                                    <div class="logo-bg">
                                                        <img src="assets/images/polakis.png" alt="Myne Travel Agency" class="company-logo">
                                                    </div>
                                                </div>
                                                <h4 class="welcome-title mb-3">Session Ended Securely</h4>
                                                <p class="welcome-subtitle mb-4">Your session has been safely terminated. Thank you for using Myne Travel Agency.</p>
                                            </div>
                                            
                                            <!-- Security features -->
                                            <div class="row text-center">
                                                <div class="col-12 mb-3">
                                                    <div class="feature-item">
                                                        <i class="ri-shield-check-line h4 mb-2 d-block"></i>
                                                        <small>Secure Logout</small>
                                                        <div class="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 h4 mb-2 d-block"></i>
                                                        <small>Data Protected</small>
                                                        <div class="small mt-1">Your information is safe</div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="feature-item">
                                                        <i class="ri-time-line h4 mb-2 d-block"></i>
                                                        <small>Activity Logged</small>
                                                        <div class="small mt-1">Session recorded securely</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end col -->

                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 d-flex flex-column justify-content-center h-100" style="background: var(--white);">
                                        <div class="text-center logout-animation">
                                            <!-- Logout Icon -->
                                            <div class="logout-icon-container">
                                                <i class="ri-logout-circle-line logout-icon"></i>
                                            </div>
                                            
                                            <div class="mt-4">
                                                <h4 class="logout-title mb-2">Successfully Logged Out</h4>
                                                <p class="text-muted mb-1">
                                                    Goodbye, <strong><?php echo htmlspecialchars($user_name); ?></strong>!
                                                </p>
                                                <p class="logout-subtitle mb-4">
                                                    Thank you for using <span class="fw-semibold" style="color: var(--primary-green);">Myne Travel Agency</span>
                                                </p>
                                                
                                                <!-- Current time display -->
                                                <div class="mb-4">
                                                    <div class="time-display">
                                                        <i class="ri-time-line me-2" style="color: var(--primary-green);"></i>
                                                        Logged out at: <?php echo date('F j, Y \a\t g:i A T'); ?>
                                                    </div>
                                                </div>
                                                
                                                <!-- Action buttons -->
                                                <div class="d-grid gap-2 d-md-block">
                                                    <a href="login.php" 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>
                                        
                                        <!-- Security information -->
                                        <div class="mt-5">
                                            <div class="security-info">
                                                <h6 class="mb-3" style="color: var(--primary-green);">
                                                    <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>
                                        
                                        <!-- Quick access links -->
                                        <div class="mt-4 text-center">
                                            <div class="row text-center">
                                                <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" style="color: var(--primary-green);"></i>
                                                        Reset Password
                                                    </a>
                                                </div>
                                                <div class="col-4">
                                                    <a href="mailto:support@Mynetravel.com" class="text-decoration-none small text-muted">
                                                        <i class="ri-customer-service-line d-block mb-1" style="color: var(--primary-green);"></i>
                                                        Get Support
                                                    </a>
                                                </div>
                                                <div class="col-4">
                                                    <a href="tel:+254700123456" class="text-decoration-none small text-muted">
                                                        <i class="ri-phone-line d-block mb-1" style="color: var(--primary-green);"></i>
                                                        Call Us
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end col -->
                            </div>
                            <!-- end row -->
                        </div>
                        <!-- end card -->
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end auth page content -->

        <!-- footer -->
        <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="fw-semibold" style="color: var(--primary-green);">Myne Travel Agency Ltd</span> - 
                                Leading travel and cargo solutions in East Africa
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->
    </div>
    <!-- end auth-page-wrapper -->

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

    <script>
    // Prevent back button after logout
    window.history.pushState(null, null, window.location.href);
    window.onpopstate = function(event) {
        window.history.pushState(null, null, window.location.href);
    };

    // Clear any cached data
    if ('caches' in window) {
        caches.keys().then(function(names) {
            names.forEach(function(name) {
                caches.delete(name);
            });
        });
    }

    // Display success notification
    document.addEventListener('DOMContentLoaded', function() {
        // Entrance animation for elements
        const elements = document.querySelectorAll('.logout-content, .logout-animation');
        elements.forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(20px)';
            setTimeout(() => {
                el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                el.style.opacity = '1';
                el.style.transform = 'translateY(0)';
            }, index * 200);
        });

        // Add hover effects to feature items
        const featureItems = document.querySelectorAll('.feature-item');
        featureItems.forEach((item, index) => {
            item.style.animation = `float 3s ease-in-out infinite ${index * 0.5}s`;
        });
    });

    // Floating animation keyframes
    const style = document.createElement('style');
    style.textContent = `
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }
    `;
    document.head.appendChild(style);

    // Optional: Auto-redirect after 60 seconds
    setTimeout(function() {
        // Uncomment if you want auto-redirect to login
        // window.location.href = 'login.php';
    }, 60000);
    </script>
</body>
</html>