<?php
session_start();
$activePage = 'configuration';
$activeSubPage = 'connection_profile';
include("../elements/master.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/new_connection_profile.css" type="text/css">
    <link rel="stylesheet" href="../css/create_user.css" type="text/css">
</head>
<body>
<div class="user_container">
<maincontent>
<div class="usertable">

  <h3>Connection Profile <?php echo $value ?></h3>
  <div class="userdetails">
  <form action="" class="form" id="createUserForm" method="POST">
    <?php $value="hell"; ?>
    <div>
    <div class="col-10">
        <label>Profile Name</label>
    </div>
    <div class="col-40">
        <input type="text" name="pid" placeholder="Enter the profile name" required />
    </div>
    </div>

    <div>
    <div class="col-10">
        <label>Description</label>
      </div>
      <div class="col-40">
        <input type="text" name="description" placeholder="Enter the Description" required />
      </div>
    </div>

<!-------------SOURCES SECTION STARTED ---------------->

<div>
    <div class="col-10">
        <label>Sources</label>
    </div>
    <div class="col-40">
        <div class="multiselect">
            <div class="selectBox" onclick="toggleDropdown()">
                <select>
                    <option>Select Sources</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes" class="checkboxes">
                <label for="source1">
                    <input type="checkbox" id="source1" name="access[]" value="local" /> local
                </label>
                <label for="source2">
                    <input type="checkbox" id="source2" name="access[]" value="file1" /> file1
                </label>
                <label for="source3">
                    <input type="checkbox" id="source3" name="access[]" value="email" /> ldap
                </label>
                <label for="source4">
                    <input type="checkbox" id="source4" name="access[]" value="Node Manager" /> Active Directory
                </label>
            </div>
        </div>
        <br>
    </div>
</div>

<!-------------SOURCES SECTION ENDEDED ---------------->


<div class="second_sec">
<div class="options">
    <div class="check">
    <input type="checkbox" name="register_devices">
    <label for="">Automatically Register Devices</label>
    </div>
    <div class="check">
    <input type="checkbox" name="dot1x_recompute">
    <label for="">Dot 1X recompute role from portal</label>
    </div>
    <div class="check">
    <input type="checkbox" name="enable">
    <label for="">Enable Profile</label>
    </div>
</div>
</div>


<div class="filter_section">
    <div class="dynamic_dropdown">
        <label>Filter</label>
    </div>
    <div class="dynamic">
    <div class="filter">
        <select name="access" id="access">
            <option value="">Select Filter</option>
            <option value="Connectiontype">Connection type</option>
            <option value="Subtype">Connection Sub Type</option>
            <option value="Switch">Switch</option>
            <option value="Port">Port</option>
        </select>
    </div>
    <div class="filter hidden" id="portInputDiv">
        <input type="text" name="port" placeholder="Enter port number" />
    </div>

    <!-- Dynamic dropdown (shown for other selections) -->
    <div class="filter hidden" id="dynamicDropdownDiv">
        <select name="dynamicDropdown" id="dynamicDropdown">
            <!-- Options will be populated based on the selection -->
        </select>
    </div>
    <div class="image">
          <img src="../images/add_hover.png" class="plus" alt="Add Field">
          <img src="../images/minus_hover.png" class="minus" alt="Remove Field">
    </div>
    </div>
</div> 


<div class="button">
    <button type="submit">Submit</button>
</div>

<!--<div class="add_sec">
<div class="image">
          <img src="../images/add_hover.png" class="plus" alt="Add Field">
          <img src="../images/minus_hover.png" class="minus" alt="Remove Field">
</div>
</div> -->

</form>
</div>
</div>
    </maincontent>
</div>

<script src="../js/new_connection_profile.js"></script>
<!--<script src="../js/demo.js"></script>-->
<script src="../js/clones.js"></script>
<script>
     let expanded = false;

function toggleDropdown() {
    const checkboxes = document.getElementById('checkboxes');
    checkboxes.style.display = expanded ? 'none' : 'block';
    expanded = !expanded;
}

const checkboxElements = document.querySelectorAll('.checkboxes input[type="checkbox"]');
const selectBox = document.querySelector('.selectBox select');
const defaultOptionText = 'Select Sources';

function updateDropdownText() {
    // Get all selected checkboxes
    const selectedValues = Array.from(checkboxElements)
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.value);

    // Update the display in the select box based on selected checkboxes
    if (selectedValues.length === checkboxElements.length) {
        selectBox.options[0].textContent = "All selected"; // Update to "All selected" if all checkboxes are selected
    } else if (selectedValues.length > 3) {
        selectBox.options[0].textContent = `${selectedValues.length} of ${checkboxElements.length} selected`; // Show count of selected
    } else {
        selectBox.options[0].textContent = selectedValues.length
            ? selectedValues.join(', ') // Join the selected values for display
            : defaultOptionText; // Reset to default text if no selection
    }
}

// Add event listener to each checkbox
checkboxElements.forEach((checkbox) => {
    checkbox.addEventListener('change', updateDropdownText);
});
</script>
</body>
</html>













