<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You</title>
    
    <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css"> <!-- Bootstrap CSS -->
    
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script> <!-- Include Bootstrap JS -->
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        

        /* Modal Content */
        .modal-content {
            position: relative;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 80%;
            
            animation: animatetop 0.4s; /* Animation */
        }
          /* Add Animation */
        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c; /* Green background */
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c; /* Green background */
            color: white;
        }
    </style>
</head>
<body>
    <!-- Modal Structure -->
    <div class="modal fade" id="thankYouModal" tabindex="-1" aria-labelledby="thankYouModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="thankYouModalLabel">Thank You!</h5>
                    <!-- <button type="button" class="btn-close"  data-dismiss="modal fade" aria-label="Close"> -->
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5>Your have submitted your data successfully!</h5>
                    <p>For more details contact system administrator.</p>
                </div>
                <div class="modal-footer justify-content-center">
                   <a href="index.php" class="btn btn-primary"> OK</a>
                    <a href="index.php" class="btn btn-primary">Back to Home</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Show the modal when the page loads
        $(document).ready(function() {
            $('#thankYouModal').modal('show'); // Use jQuery to show modal
        });

        // Handle the "OK" button click
        document.getElementById('btn-ok').addEventListener('click', function() {
            window.history.back(); // Go back to the previous page
        });
    </script>
</body>
</html>
