<!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.0">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://code.responsivevoice.org https://app.responsivevoice.org https://cdn.jsdelivr.net">

        <title><%=networkName%></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js" integrity="sha512-iZIBSs+gDyTH0ZhUem9eQ1t4DcEn2B9lHxfRMeGQhyNdSUz+rb+5A3ummX6DQTOIs1XK0gOteOg/LPtSo9VJ+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <body class="bg-dark text-light">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand text-lg" href="#"><%=networkName%></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/sys_view">System Monitor</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/sysWatch">Sys Watch</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/affiliations">Affiliations List</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/console">Console</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/g5">Unication</a>
                        </li>
                        <% if (user.level == "admin"){ %>
                            <li class="nav-item">
                                <a class="nav-link" href="/users">Users</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/sys_view/admin">Admin System Monitor</a>
                            </li>
                        <%}%>
                    </ul>
                </div>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <%= user.username %>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="/edit/<%= user.id %>">Edit Profile</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container py-5 text-center">
            <h1><%=networkName%></h1>
            <form method="GET" action="/radio">
                <div class="mb-3">
                    <label for="channel" class="form-label">Choose a channel:</label>
                    <select name="channel" id="channel" class="form-select">
                        <% for (const zone of zoneData) { %>
                            <optgroup label="<%= zone.zone %>">
                                <% for (const content of zone.content) { %>
                                    <option value="<%= content[0] %>" data-zone="<%= zone.zone %>" data-mode="<%= content[1] %>"><%= content[0] %></option>
                                <% } %>
                            </optgroup>
                        <% } %>
                    </select>
                </div>

                <div class="mb-3">
                    <label for="radioModel" class="form-label">Radio Model:</label>
                    <select name="radioModel" id="radioModel" class="form-select">
                        <option value="apx6000_non_xe_black">APX6000 Black</option>
                        <option value="apxmobile_o2_green">APX Mobile O2 Green</option>
                    <!--    <option value="apx8000_xe_green">APX8000 XE Green</option> -->
                    </select>
                </div>
                <div class="mb-3">
                    <label for="rid" class="form-label">RID:</label>
                    <input type="text" name="rid" value="<%= user.mainRid %>" placeholder="<%= user.mainRid %>"  class="form-control" readonly>
                </div>
                <input type="hidden" name="mode" id="hidden-mode">
                <input type="hidden" name="zone" id="hidden-zone">
                <button onclick="updateHiddenFields()" type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>

        <script>
            const channelDropdown = document.getElementById('channel');
            const hiddenZoneInput = document.getElementById('hidden-zone');
            const hiddenModeInput = document.getElementById('hidden-mode');
            const ridInput = document.querySelector('input[name="rid"]');

            channelDropdown.addEventListener('change', updateHiddenFields);
            ridInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    updateHiddenFields();
                }
            });

            function updateHiddenFields() {
                const selectedOption = channelDropdown.options[channelDropdown.selectedIndex];
                const zoneValue = selectedOption.getAttribute('data-zone');
                const modeValue = selectedOption.getAttribute('data-mode');
                hiddenZoneInput.value = zoneValue || "";
                hiddenModeInput.value = modeValue || "";
            }
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
