<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="/img/favicon.ico" rel="icon">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="/css/style.css" rel="stylesheet">
    <style>

        /* Modal styling */
        .error-modal {
            position: fixed;
            bottom: 20%; /* Set the modal near the bottom of the screen */
            left: 50%; /* Center the modal horizontally */
            transform: translateX(-50%); /* Horizontally center the modal */
            background-color: white;
            padding: 20px;
            border: 1px solid red;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1000; /* Ensure the modal is above the background */
            width: 300px; /* Optional: Set a fixed width for the modal */
            text-align: center;
        }

        /* Modal overlay */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .modal-overlay.active {
            display: block;
        }

        /* Purple button styling */
        .btn-purple {
            background-color: purple;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-purple:hover {
            background-color: darkviolet; /* Darker purple on hover */
        }
    </style>
</head>
<body>

<div class="jumbotron jumbotron-fluid mb-5">
    <div class="container text-center py-5">
        <h1 class="text-primary mb-4">Oops looks like you are lost</h1>
        <h1 class="text-white display-3 mb-5">You took a wrong turn</h1>
        <div class="mx-auto" style="width: 100%; max-width: 600px;">

        </div>
    </div>
</div>

<div>
    <!-- Modal overlay -->
    <div id="modalOverlay" class="modal-overlay"></div>

    <!-- Error modal -->
    <div id="errorModal" class="error-modal">
        <h5><p>Unexpected error</p></h5>
        <p>Something went wrong</p>
        <button class="btn-purple" onclick="goBack()">Go Back to Previous Page</button>
    </div>
</div>



<script>
    // Function to redirect back to the previous page
    function goBack() {
        if (window.history.length > 1) {
            window.history.back();  // Only go back if there's history
        } else {
            window.location.href = '/';  // Fallback to homepage if no history exists
        }
    }

    // Show the modal if there is an error message
    window.onload = function() {
        if (document.getElementById('errorModal')) {
            document.getElementById('errorModal').classList.add('active');
            document.getElementById('modalOverlay').classList.add('active');
        }
    }
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="/lib/easing/easing.min.js"></script>
<script src="/lib/waypoints/waypoints.min.js"></script>
<script src="/lib/counterup/counterup.min.js"></script>
<script src="/lib/owlcarousel/owl.carousel.min.js"></script>
<script src="/mail/jqBootstrapValidation.min.js"></script>
</body>
</html>
