<?php
session_start();
$activePage = 'configuration';
$activeSubPage = 'switch';
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_switch.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>New Switch</h3>
  <div class="userdetails">
  <form action="./new_switch_function.php" class="form" id="createUserForm" method="POST">
    
    <!-- IP Address -->
    <div>
        <div class="col-10">
            <label>Ip Address</label>
        </div>
        <div class="col-40">
            <input type="text" name="ip_address" placeholder="Enter the ip address" required />
        </div>
    </div>

    <!-- Description -->
    <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>

    <!-- Switch Type Dropdown -->
    <div>
        <div class="col-10">
            <label>Type</label>
        </div>
        <div class="col-40">
            <select name="access" id="sources">
                <option>Select Switch</option>
                <option value="Alcatel">Alcatel</option>
                <option value="Cisco">Cisco</option>
                <option value="Dlink">Dlink</option>
            </select>
        </div>
    </div>

    <!-- Nested Dropdowns -->
    <div id="nested_dropdownContainer">
        <!-- Alcatel Dropdown -->
        <div id="alcatelDropdown" class="nested_dropdown hidden">
            <label>Select Alcatel Option</label>
            <select name="alcatel_option">
                <option value="#">-----------------</option>
                <option value="Alcatel">Alcatel Switch</option>
            </select>
        </div>

        <!-- Cisco Dropdown -->
        <div id="ciscoDropdown" class="nested_dropdown hidden">
            <label>Select Cisco Option</label>
            <select name="cisco_option">
                <option value="#">-------------</option>
                <option value="Cisco_ASA">Cisco ASA</option>
                <option value="Cisco::Catalyst_2970">Cisco catalyst 2970</option>
                <option value="Cisco::Catalyst_3550">Cisco catalyst 3550</option>
            </select>
        </div>

        <!-- Hp Dropdown -->
    <!-------    <div id="hpDropdown" class="nested_dropdown hidden">
            <label>Select Hp Option</label>
            <select name="hp_option">
                <option value="#">--------------</option>
                <option value="option1">Hp Option 1</option>
                <option value="option2">Hp Option 2</option>
                <option value="option3">Hp Option 3</option>
            </select>
        </div> ----->

        <!-- Dlink Dropdown -->
        <div id="dlinkDropdown" class="nested_dropdown hidden">
            <label>Select Dlink Option</label>
            <select name="dlink_option">
                <option value="#">---------------</option>
                <option value="Dlink::DWL">Dlink DWL</option>
            </select>
        </div>
    </div>

    <!-- Role/VLAN Mapping Section -->
    <div class="role_sec">
      <label>Role Mapping</label>
      <select name="mapping" id="mapping">
          <option value="">Role Mapping</option>
          <option value="User Manager">Vlan Id</option>
          <option value="Node Manager">Role</option>
      </select>
    </div>

    <div class="vlan_sec hidden">
        <div class="map_one">
            <div>
                <div class="col-10"><label>Registration</label></div>
                <div class="col-40"><input type="text" placeholder="Registration" /></div>
                <div class="col-10"><label>Default</label></div>
                <div class="col-40"><input type="text" placeholder="Default" /></div>
            </div>
            <div>
                <div class="col-10"><label>Gaming</label></div>
                <div class="col-40"><input type="text" placeholder="Gaming" /></div>
                <div class="col-10"><label>Isolation</label></div>
                <div class="col-40"><input type="text" placeholder="Isolation" /></div>
            </div>
            <div>
                <div class="col-10"><label>Guest</label></div>
                <div class="col-40"><input type="text" placeholder="Guest" /></div>
            </div>
        </div>
        <div class="check_box_vlan">
          <input type="checkbox" id="role_by_checkbox">
          <label for="role_by_checkbox"></label>
        </div>
    </div>

    <!-- Submit Button -->
    <button type="submit">Submit</button>

</form>

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

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const mainDropdown = document.getElementById('sources');
        const nested_dropdowns = document.querySelectorAll('.nested_dropdown');
        const alcatelDropdown = document.getElementById('alcatelDropdown');
        const ciscoDropdown = document.getElementById('ciscoDropdown');
        const hpDropdown = document.getElementById('hpDropdown');
        const dlinkDropdown = document.getElementById('dlinkDropdown');
        const roleMappingDropdown = document.getElementById('mapping');
        const roleSec = document.querySelector('.vlan_sec'); 
        const inputs = document.querySelectorAll('.vlan_sec input[type="text"]');
        const checkboxLabel = document.querySelector('.check_box_vlan label');
        const checkbox = document.getElementById('role_by_checkbox');

        const vlanPlaceholders = ["Registration", "Default", "Gaming", "Isolation", "Guest"];
        const vlanNames = ["registration_vlan", "default_vlan", "gaming_vlan", "isolation_vlan", "guest_vlan"];
        const rolePlaceholders = ["Admin", "Editor", "Viewer", "Moderator", "Guest"];
        const roleNames = ["registration_role", "default_role", "gaming_role", "isolation_role", "guest_role"];

        mainDropdown.addEventListener('change', function () {
            nested_dropdowns.forEach(dropdown => dropdown.classList.add('hidden'));
            if (mainDropdown.value === 'Alcatel') {
                alcatelDropdown.classList.remove('hidden');
            } else if (mainDropdown.value === 'Cisco') {
                ciscoDropdown.classList.remove('hidden');
          //  } else if (mainDropdown.value === 'Hp') {
           //     hpDropdown.classList.remove('hidden');
            } else if (mainDropdown.value === 'Dlink') {
                dlinkDropdown.classList.remove('hidden');
            }
        });

        roleMappingDropdown.addEventListener('change', function () {
            if (roleMappingDropdown.value === 'User Manager') {
                roleSec.classList.remove('hidden');
                updatePlaceholdersAndNames(vlanPlaceholders, vlanNames);
                checkboxLabel.textContent = "Role by Vlan Id";
                checkbox.value = "vlan";
            } else if (roleMappingDropdown.value === 'Node Manager') {
                roleSec.classList.remove('hidden');
                updatePlaceholdersAndNames(rolePlaceholders, roleNames);
                checkboxLabel.textContent = "Role by Role";
                checkbox.value = "role";
            } else {
                roleSec.classList.add('hidden');
            }
        });

        function updatePlaceholdersAndNames(placeholders, names) {
            inputs.forEach((input, index) => {
                input.placeholder = placeholders[index];
                input.name = names[index];
            });
        }
    });
</script>

<script src="../js/new_connection_profile.js"></script>
</body>
</html>
