<?php
/**
 * RUHONDO BEACH RESORT HMS + POS System
 * 404 Not Found Page
 * Developer: JOACHIM'S INNOTECH
 */

// Initialize system
require_once dirname(__DIR__) . '/config/config.php';
require_once dirname(__DIR__) . '/config/constants.php';
require_once dirname(__DIR__) . '/config/database.php';
require_once dirname(__DIR__) . '/config/helpers.php';
require_once dirname(__DIR__) . '/config/auth.php';

// Set page title
$page_title = '404 - Page Not Found';

// Don't require authentication for 404 page
// But check if user is logged in for navigation
$is_logged_in = is_logged_in();

// Include header
if ($is_logged_in) {
    require_once dirname(__DIR__) . '/views/partials/header.php';
} else {
    // Simple header for non-logged in users
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>404 - Page Not Found | <?php echo APP_NAME; ?></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <link rel="stylesheet" href="<?php echo assets_url('css/style.css'); ?>?v=<?php echo APP_VERSION; ?>">
        <style>
            body {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            }
            .error-container {
                text-align: center;
                color: white;
                padding: 2rem;
            }
            .error-code {
                font-size: 10rem;
                font-weight: 700;
                text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
                line-height: 1;
                margin-bottom: 1rem;
            }
            .error-message {
                font-size: 2rem;
                margin-bottom: 2rem;
                opacity: 0.9;
            }
            .error-description {
                font-size: 1.2rem;
                margin-bottom: 3rem;
                opacity: 0.8;
                max-width: 600px;
            }
            .btn-home {
                background: white;
                color: #667eea;
                padding: 1rem 3rem;
                border-radius: 50px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
                transition: all 0.3s ease;
                border: none;
                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            }
            .btn-home:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(0,0,0,0.3);
                color: #667eea;
            }
            .search-box {
                max-width: 400px;
                margin: 2rem auto;
            }
            .search-box .input-group {
                background: rgba(255,255,255,0.2);
                border-radius: 50px;
                overflow: hidden;
            }
            .search-box input {
                background: transparent;
                border: none;
                color: white;
                padding: 1rem 1.5rem;
            }
            .search-box input::placeholder {
                color: rgba(255,255,255,0.7);
            }
            .search-box button {
                background: white;
                border: none;
                color: #667eea;
                padding: 0 2rem;
            }
            .search-box button:hover {
                background: #f8f9fa;
            }
            .links {
                margin-top: 3rem;
            }
            .links a {
                color: white;
                text-decoration: none;
                margin: 0 1rem;
                opacity: 0.8;
                transition: opacity 0.3s ease;
            }
            .links a:hover {
                opacity: 1;
                text-decoration: underline;
            }
            @media (max-width: 768px) {
                .error-code {
                    font-size: 6rem;
                }
                .error-message {
                    font-size: 1.5rem;
                }
                .error-description {
                    font-size: 1rem;
                }
                .btn-home {
                    padding: 0.8rem 2rem;
                }
            }
        </style>
    </head>
    <body>
        <div class="error-container">
            <div class="error-code">404</div>
            <div class="error-message">Page Not Found</div>
            <div class="error-description">
                The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
            </div>
            
            <a href="<?php echo base_url('login.php'); ?>" class="btn btn-home">
                <i class="fas fa-sign-in-alt mr-2"></i> Go to Login
            </a>
            
            <div class="links">
                <a href="<?php echo base_url('login.php'); ?>">Login</a>
                <a href="<?php echo base_url('forgot-password.php'); ?>">Forgot Password</a>
                <a href="#" onclick="window.history.back(); return false;">Go Back</a>
            </div>
        </div>
    </body>
    </html>
    <?php
    exit;
}
?>

<!-- Content Start (for logged in users) -->
<div class="error-page min-vh-100 d-flex align-items-center justify-content-center">
    <div class="text-center">
        <div class="error-code" style="font-size: 8rem; font-weight: 700; color: #667eea;">404</div>
        <h2 class="error-message mb-4">Page Not Found</h2>
        <p class="error-description text-muted mb-4" style="max-width: 500px;">
            The page you are looking for might have been removed, had its name changed, 
            or is temporarily unavailable.
        </p>
        
        <div class="search-box mb-4">
            <form action="<?php echo base_url('search.php'); ?>" method="GET" class="input-group">
                <input type="text" class="form-control" name="q" placeholder="Search for something else...">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
        
        <div class="action-buttons">
            <a href="<?php echo base_url('dashboard.php'); ?>" class="btn btn-primary btn-lg mr-2">
                <i class="fas fa-tachometer-alt mr-2"></i> Go to Dashboard
            </a>
            <a href="#" onclick="window.history.back(); return false;" class="btn btn-outline-secondary btn-lg">
                <i class="fas fa-arrow-left mr-2"></i> Go Back
            </a>
        </div>
        
        <hr class="my-5" style="max-width: 400px; margin-left: auto; margin-right: auto;">
        
        <div class="help-links">
            <p class="text-muted mb-2">You might find help here:</p>
            <div class="d-flex justify-content-center flex-wrap">
                <a href="<?php echo base_url('help/user-guide.php'); ?>" class="text-muted mr-3">
                    <i class="fas fa-book mr-1"></i> User Guide
                </a>
                <a href="<?php echo base_url('help/faq.php'); ?>" class="text-muted mr-3">
                    <i class="fas fa-question-circle mr-1"></i> FAQ
                </a>
                <a href="<?php echo base_url('help/contact.php'); ?>" class="text-muted">
                    <i class="fas fa-envelope mr-1"></i> Contact Support
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Additional CSS for logged in view -->
<style>
    .error-page {
        padding: 2rem;
    }
    
    .error-code {
        font-size: 8rem;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }
    
    .search-box .input-group {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .search-box input:focus {
        box-shadow: none;
        border-color: #667eea;
    }
    
    .search-box button {
        background: #667eea;
        border-color: #667eea;
    }
    
    .search-box button:hover {
        background: #5a67d8;
        border-color: #5a67d8;
    }
    
    .action-buttons {
        margin-top: 2rem;
    }
    
    .action-buttons .btn {
        margin: 0.5rem;
    }
    
    .help-links a {
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .help-links a:hover {
        color: #667eea !important;
        text-decoration: underline;
    }
    
    @media (max-width: 768px) {
        .error-code {
            font-size: 6rem;
        }
        
        .action-buttons .btn {
            display: block;
            width: 100%;
            margin: 0.5rem 0;
        }
    }
</style>

<!-- Logged in footer -->
<?php
$extra_js = ['404.js'];
require_once dirname(__DIR__) . '/views/partials/footer.php';
?>