vlan port configuration

async function showVlanPortConfig() {
    showContent('<p>Loading VLAN Port Configuration...</p>');

    try {
        const response = await fetch(`${BASE_URL}/get-vlan-information`);
        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
        const data = await response.json(); // not used for now

        const portOptions = Array.from({ length: 10 }, (_, i) => `<option value="${i + 1}">${i + 1}</option>`).join('');

        showContent(`
            <h2>VLAN Port Configuration</h2>
            <p>(p=default VLAN member, t=tagged member, u=untagged member)</p>

            <div id="vlan-config" style="display: flex; gap: 30px; align-items: flex-start;">
                <div class="column">
                    <strong>Port</strong><br/>
                    <select style="width:100px;" id="portSelect" size="10">
                        ${portOptions}
                    </select>
                </div>

                <!-- Mode -->
                <div class="column">
                    <strong>Mode</strong><br/>
                    <select style="width:100px;" id="modeSelect">
                        <option value="access">Access</option>
                         <option value="Hybrid">Hybrid</option>
                        <option value="trunk">Trunk</option>
                    </select>
                </div>

                <div class="column">
                    <label>Current VLAN</label><br />
                    <select style="width:100px;" size="10" id="vlanSelect" size="10" multiple></select>
                </div>

                <div>
                    <button id="btnDefault" onclick="applyAction('default')">Default VLAN =></button><br />
                    <button id="btnTagged" onclick="applyAction('tag')">Tagged =></button><br />
                    <button id="btnUntagged" onclick="applyAction('untag')">Untagged =></button><br />
                    <button id="btnUnmember" onclick="applyAction('unmember')">UnMember <=</button>
                </div>

                <div class="column">
                    <label>Port Members</label><br />
                    <select style="width:100px;" size="10" id="portMembers" size="10" multiple></select>
                    
                </div>
                
            </div>
            <button onclick="loadInitialData()">Refresh</button>
            <button onclick="alert('Help: Choose port, mode and VLAN. Then use buttons to apply.')">Help</button>
        `);

        await loadInitialData();
    } catch (error) {
        console.error("Error fetching VLAN members data:", error);
        alert("Failed to fetch VLAN members data from the backend.");
    }
}

async function loadInitialData() {
    // Fetch all VLANs
    const vlans = await fetch(`${BASE_URL}/vlans`).then(res => res.json());

    const vlanSelect = document.getElementById('vlanSelect');
    vlanSelect.innerHTML = '';

    // Optional: Add a default option if needed
    const defaultVlanOpt = document.createElement('option');
    vlanSelect.appendChild(defaultVlanOpt);

    // Populate VLAN options
    vlans.forEach(v => {
        const opt = document.createElement('option');
        opt.value = v.vid;
        opt.text = v.vid;
        vlanSelect.appendChild(opt);
    });

    // Set up port dropdown listener
    const portSelect = document.getElementById('portSelect');
    portSelect.addEventListener('change', async () => {
        currentPort = portSelect.value;

        if (currentPort) {
            await updatePortMembers();  // Only call when a port is selected
        }
    });

    // Set up mode change listener
    document.getElementById('modeSelect').addEventListener('change', updateButtonStates);

    // Initial load: Do NOT set currentPort or trigger update
    portSelect.value = ''; // Make sure nothing is pre-selected
}