<?php
session_start();
$activePage = 'configuration';
$activeSubPage = 'switch';
include("../elements/master.php");
include("./switch_delete.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/userstyle.css" type="text/css">
    <link rel="stylesheet" href="../css/connection_profile.css" type="text/css">
</head>
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class='popup-message'><?php echo $_SESSION['message']; unset($_SESSION['message']); ?></div>
<?php endif; ?>

<div id="div_userlist">
<div class="user_container">

  <!-- Main content -->
  <maincontent>
    <div class="usertable">
        <h3>Switches</h3>

        <!-- Search form -->
        <div>
            <form action="userlist.php" method="GET" class="search">
                <input type="text" name="search" id="search" placeholder="search here" />
                <button type="submit" name="submit" class="btn_search" id="search_btn"><img src="../images/search.png" alt="search" class="search_logo"></button>
                <button type="button" class="clear_btn" id="clear_btn">clear</button>
            </form>
        </div>

        <div class="connection_profile_btn">
            <button><a href="./new_switch.php">New Switch</a></button>
        </div>

        <div class="userdetails">
            <table id="user_table">
                <thead>
                    <tr>
                        <th class="check_box">
                            <input type="checkbox" id="select_all" title="Delete selected users"/>
                            <img id="bulk_delete_btn" style="display: none;" src="../images/trash-can.png" alt="img">
                        </th>
                        <th data-column="pid" data-order="asc" class="sortable"><img src="../images/arrow.png" alt="image" class="sort">IDENTIFIER</th>
                        <th data-column="firstname" data-order="asc" class="sortable"><img src="../images/arrow.png" alt="image" class="sort">DESCRIPTION</th>
                        <th data-column="lastname" data-order="asc" class="sortable"><img src="../images/arrow.png" alt="image" class="sort">TYPE</th>
                        <th>Modify</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <?php include("./switch_function.php"); ?>
                    <?php foreach($user_list as $user): ?>
                        <tr data-pid="<?php echo htmlspecialchars($user['id']); ?>">
                            <td><input type="checkbox" class="user_checkbox" data-pid="<?php echo htmlspecialchars($user['id']); ?>" /></td>
                            <td><?php echo htmlspecialchars($user['id']); ?></td>
                            <td><?php echo htmlspecialchars($user['description']); ?></td>
                            <td><?php echo htmlspecialchars($user['type']); ?></td>
                            <td><button type="submit" class="btn_modify" data-pid="<?php echo htmlspecialchars($user['id']); ?>">Modify</button></td>
                            <td>
                                <button type="button" class="btn_delete" data-pid="<?php echo htmlspecialchars($user['id']); ?>">Delete</button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <form id="deleteForm" action="./switch_delete.php" method="POST" style="display: none;">
        <input type="hidden" name="id" id="switch_id_input">
    </form>

    <div id="confirmation_popup" style="display: none;">
        <div class="popup_cont">
            <p>Do you really want to delete the switch with ID: <span id="confirm_switch_id"></span>?</p>
            <button id="confirm_yes">Yes</button>
            <button id="confirm_no">No</button>
        </div>
    </div>

  </maincontent>
  <!---main end-->
</div>
</div>

<script src="../js/sorting_popup.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const deleteButtons = document.querySelectorAll('.btn_delete');
    const confirmationPopup = document.getElementById('confirmation_popup');
    const switchIdInput = document.getElementById('switch_id_input');
    const confirmSwitchIdSpan = document.getElementById('confirm_switch_id');

    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const switchId = this.getAttribute('data-pid');
            switchIdInput.value = switchId; // Set the switch ID to the hidden input
            confirmSwitchIdSpan.textContent = switchId; // Display the switch ID in the confirmation popup
            confirmationPopup.style.display = 'block'; // Show the confirmation popup
        });
    });

    document.getElementById('confirm_yes').addEventListener('click', function() {
        document.getElementById('deleteForm').submit(); // Submit the form
    });

    document.getElementById('confirm_no').addEventListener('click', function() {
        confirmationPopup.style.display = 'none'; // Hide the confirmation popup
    });

    // Popup message handling
    const popupMessage = document.querySelector('.popup-message');
    if (popupMessage) {
        // Show the popup
        popupMessage.classList.add('show');

        // After 3 seconds, hide the popup
        setTimeout(() => {
            popupMessage.classList.remove('show');
        }, 3000);  // 3000 milliseconds = 3 seconds
    }
});
</script>

</body>
</html>
