<?php
include('session_validator.php'); // Include this only once at the top

// Include the database connection file
include('includes/db.php');
?>
<!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">
    <title>SRMS</title>
    <!-- Include necessary stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
    <link rel="stylesheet" href="css/animate-css/animate.min.css" media="screen">
    <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen">
    <link rel="stylesheet" href="css/prism/prism.css" media="screen">
    <link rel="stylesheet" href="css/select2/select2.min.css">
    <link rel="stylesheet" href="css/main.css" media="screen">
    <link rel="stylesheet" href="public/css/tablestyle.css" media="screen">

<!-- Bootstrap CSS -->


    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f7fc;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h2 {
            color: #2c3e50;
        }

        .toggle-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .toggle-btn {
            width: 150px;
        }

        .status {
            font-weight: bold;
            font-size: 1rem;
        }

        .visible {
            color: green;
        }

        .hidden {
            color: red;
        }

        .back-btn {
            margin-top: 20px;
        }
    </style>
</head>


<body class="top-navbar-fixed">
    <div class="main-wrapper">
        <!-- ========== TOP NAVBAR ========== -->
        <?php include('includes/topbar.php'); ?>
        <!-- ========== WRAPPER FOR BOTH SIDEBARS & MAIN CONTENT ========== -->
        <div class="content-wrapper">
            <div class="content-container">
                <?php include('includes/leftbar.php'); ?>
                <div class="main-page">
                    <div class="container-fluid">
                        <div class="row page-title-div">
                            <div class="col-md-6">
                                <h2 class="title">Button Setting</h2>
                            </div>
                        </div>
                        <div class="row breadcrumb-div">
                            <div class="col-md-6">
                                <ul class="breadcrumb">
                                    <li><a href="dashboard.php"><i class="fa fa-home"></i> Home</a></li>
                                    <li> Setting</li>
                                    <li class="">Button Setting</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <section class="section">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="panel">
                                        <div class="panel-heading">
                                            <div class="panel-title">
                                                <h5>Button Setting</h5>
                                            </div>
                                        </div>
                                        <div class="panel-body">
    
    <p>Toggle the visibility of buttons on the dashboard.</p>

    <div class="toggle-container">
        <button class="btn btn-primary toggle-btn" onclick="toggleButton('btnMarksTh')">Toggle Marks [Th]</button>
        <span id="status_btnMarksTh" class="status"></span>
    </div>

    <div class="toggle-container">
        <button class="btn btn-primary toggle-btn" onclick="toggleButton('btnMarksPr')">Toggle Marks [Pr]</button>
        <span id="status_btnMarksPr" class="status"></span>
    </div>

    <div class="toggle-container">
        <button class="btn btn-primary toggle-btn" onclick="toggleButton('btnAdmin')">Toggle Admin</button>
        <span id="status_btnAdmin" class="status"></span>
    </div>

    <div class="toggle-container">
        <button class="btn btn-danger toggle-btn" onclick="toggleButton('btnMissingMarks')">Toggle Missing Marks</button>
        <span id="status_btnMissingMarks" class="status"></span>
    </div>

    <a href="index.php" class="btn btn-secondary back-btn">Back to Dashboard</a>
</div>
 </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                                           
                                            

                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.0/dist/sweetalert2.min.js"></script>
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/pace/pace.min.js"></script>
    <script src="js/lobipanel/lobipanel.min.js"></script>
    <script src="js/iscroll/iscroll.js"></script>
    <script src="js/prism/prism.js"></script>
    <script src="js/main.js"></script>
    <script src="js/modernizr/modernizr.min.js"></script>
    <script src="js/select2/select2.min.js"></script>
<script>
    function updateButtonStatus() {
        let buttonIds = ["btnMarksTh", "btnMarksPr", "btnAdmin", "btnMissingMarks"];

        buttonIds.forEach(id => {
            let state = localStorage.getItem(id);
            let statusElement = document.getElementById("status_" + id);

            if (state === "hidden") {
                statusElement.innerHTML = "Hidden ❌";
                statusElement.className = "status hidden";
            } else {
                statusElement.innerHTML = "Visible ✅";
                statusElement.className = "status visible";
            }
        });
    }

    function toggleButton(buttonId) {
        let currentState = localStorage.getItem(buttonId);

        if (currentState === "hidden") {
            localStorage.setItem(buttonId, "visible");
        } else {
            localStorage.setItem(buttonId, "hidden");
        }

        updateButtonStatus();
    }

    window.onload = updateButtonStatus;
</script>

</body>
</html>
