<h3><i class="blue exchange icon"></i> Port Forward</h3>
<p>Port forward using UPnP protocol</p>
<div class="ui divider"></div>
<div class="ui message">
    <h4 id="upnpstatus"><i class="ui loading spinner icon"></i> Checking Upnp State</h4> 
    <p><i class="ui info circle icon"></i> If you are hosting this server under a home router which you have no access to, you can try port forward your services port and expose them to the internet via Upnp protocol.
        Note that not all router support this function, sometime this might be disabled by your ISP or administrator.</p>
</div>
<div class="ui form">
    <div class="field">
      <div class="ui toggle checkbox" id="currentUpnpState" >
        <input type="checkbox" name="upnp">
        <label>Enable UPnP</label>
      </div>
    </div>
    <div class="field">
      <label>Port to Forward</label>
      <div class="ui input">
        <input type="number" min="1" max="65535" name="forwardPort" placeholder="Forward Port">
      </div>
    </div>
    <div class="field">
      <label>Rule Name</label>
      <div class="ui input">
        <input type="text" name="ruleName" placeholder="Rule Name">
      </div>
    </div>
    <div class="field">
      <button id="addForwardRuleButton" class="ui teal button" type="button" name="addRule" onclick="addForwardRule();"><i class="ui add icon"></i> Add Rule</button>
    </div>
</div>
  
  <div class="ui basic segment">
    <p>Forwarded Ports</p>
    <table class="ui basic table">
      <thead>
        <tr>
          <th>Port Forwarded</th>
          <th>Name of Rule</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="forwardPortTable">
        <tr>
          <td>80</td>
          <td>HTTP</td>
          <td><button class="ui button negative" type="button" name="deleteRule">Delete</button></td>
        </tr>

      </tbody>
    </table>
  </div>
  
  <script>
    let UpnpRouterFound = false;

    function addForwardRule() {
      // Get the values of the form inputs
      var forwardPort = $('input[name="forwardPort"]').val();
      var ruleName = $('input[name="ruleName"]').val();

      // Make an AJAX request
      $.ajax({
        type: 'POST',
        url: '/api/upnp/add',
        data: {port: forwardPort, name: ruleName},
        success: function(data) {
          if (data.error !== undefined){
            alert(data.error);
          }else{
            $('input[name="forwardPort"]').val("");
            $('input[name="ruleName"]').val("");
            initUPnPStatus();
          }
        }
      });
    }

    function removeForwardRule(portno){
      $.ajax({
        url: "/api/upnp/remove",
        method: "POST",
        data: {port: portno},
        success: function(data){
          if (data.error != undefined){
            alert(data.error);
          }else{
            updateFordwardTable();
          }
        }
      })
    }


    function initUpnpToggleState(){
      $.get("/api/upnp/toggle", function(data){
        if (data == true){
          //Set the current UPnP state to true
          $("#currentUpnpState").checkbox("set checked");
        }else{
          $("#currentUpnpState").checkbox("set unchecked");
        }
      });

      $("#currentUpnpState").on("change", function(){
        let isChecked = $("#currentUpnpState").checkbox("is checked");
        if (isChecked){
          $("#addForwardRuleButton").removeClass("disabled");
        }else{
          $("#addForwardRuleButton").addClass("disabled");
        }
        $.ajax({
          url: "/api/upnp/toggle",
          method: "POST",
          data: {mode: isChecked},
          success: function(data){
            console.log(data);
          }
        });
      })
    }
    initUpnpToggleState();

    function initUPnPStatus(){
      $.get("/api/upnp/discover", function(data){
        if (data.error != undefined){
          $("#upnpstatus").html(`<i class="red remove icon"></i> UPnP Router Not Found`);
          $("#currentUpnpState").addClass("disabled");
        }else{
          $("#upnpstatus").html(`<i class="green check icon"></i> Router WAN IP: ${data.ExternalIp}`);
          UpnpRouterFound = true;
          updateFordwardTable();
        }
      });
    }
    initUPnPStatus();

    function updateFordwardTable(){
      $.get("/api/upnp/list", function(data){
        renderForwardTable(data);
        console.log(data);
      })
    }

    function renderForwardTable(data){
      // Assuming the JSON data is stored in a variable called 'data'

      // Get the table body element
      var tableBody = $("#forwardPortTable")[0];

      // Clear any existing rows from the table
      tableBody.innerHTML = '';

      // Loop through the required ports and add a row for each
      for (const [port, name] of Object.entries(data)) {
        // Create a new row element
        var row = document.createElement('tr');

        // Create a cell for the port number
        var portCell = document.createElement('td');
        portCell.textContent = port;
        row.appendChild(portCell);

        // Create a cell for the name of the rule (you can customize this based on your needs)
        var nameCell = document.createElement('td');
        nameCell.textContent = name;
        row.appendChild(nameCell);

        // Create a cell for the delete button
        var deleteCell = document.createElement('td');
        var deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.className = 'ui button negative';
        deleteButton.setAttribute('type', 'button');
        deleteButton.setAttribute('name', 'deleteRule');
        deleteButton.onclick = function() {
          removeForwardRule(port);
        };
        deleteCell.appendChild(deleteButton);
        row.appendChild(deleteCell);

        // Add the row to the table body
        tableBody.appendChild(row);
      }

      if (Object.keys(data).length == 0){
        $("#forwardPortTable").append(`<tr>
          <td colspan="3"><i class="check icon"></i> No Forwarded Port</td>
        </tr>`);
      }
    }
  </script>