<!DOCTYPE html>
<html lang="en">
<head>

  <%- include('../../partials/head.ejs') %>

</head>
<body>

  <%- include('../../partials/client/scripts.ejs') %>

  <%- include('../../partials/client/navbar.ejs') %>

  <link href="./assets/css/jquery.dataTables.min.css" rel="stylesheet"></link>
  <script src="./assets/js/jquery.dataTables.min.js"></script>
  <script src="./assets/js/fontawesome.js"></script>

  <div class="container-fluid">
      <div class="row flex-nowrap">
          <%- include('../../partials/client/sidebar.ejs') %>
          <div class="col py-3">
            <div class="row">
              <div class="col-sm-6 mb-3 mb-sm-0">
                <div class="content-header">
                  <h5>Devices with access</h5>
                </div>
                <div class="card overflow-auto">
                  <!--<h5 class="card-title">Special title treatment</h5>-->
                  <table id="devices" class="display" style="width:100%">
                    <thead>
                      <tr>
                        <th></th>
                        <th>uid</th>
                        <th>project</th>
                        <th>status</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
              <div class="col-sm-6 mb-2 mb-sm-0">
                <div class="card">
                  <div class="card-header">
                    <p>Associate Device</p>
                  </div>
                  <div class="card-body">
                    <div class="input-group mb-3">
                      <label class="input-group-text" for="inputGroupSelect01">device</label>
                      <input class="form-control" list="datalistOptions" id="_deviceID_" placeholder="Type to search...">
                      <datalist id="datalistOptions">
                      </datalist>
                    </div>
                    <div class="input-group mb-3">
                      <label class="input-group-text" for="inputGroupSelect01">permission</label>
                      <select class="form-select" id="_permissionID_">
                        <option value="1">READ</option>
                        <option value="2">WRITE</option>
                        <option value="3">READ/WRITE</option>
                      </select>
                    </div>
                    <button id="submit" type="button" class="btn btn-primary btn-sm">submit</button>
                    <br>
                    <br>
                    <div id="privelleges">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>

  <script src="./assets/js/ace.js"></script>
  <script type="module" src="./app.mjs"></script>

  <%- include('../../partials/modal/confirmation.ejs') %>
  <%- include('../../partials/modal/error.ejs') %>

  <script src="lib/marked.js"></script>

  <script>
    var t;
    var clientID = "";
    var deviceId;

    privelleges.innerHTML = marked.parse(
    `#### Clients Privelleges

    Use this tab to associate a device to a client and set it's permission

    If read is selected, client can only subscribe on the device topic
    If write is selected, client can only publish on the device topic
    if read/write is selected, client can subscribe and publish on the device.

    Only clients with read/write permission can use this platform to manage the device

    `);

    $(document).ready(()=>{
      clientID = api.getClientID();

      api.getDevices((err,res)=>{
        if(err) console.log(err)
        else{
          var datalist = document.getElementById('datalistOptions');
          res.forEach((item,i)=>{
            var option = document.createElement('option');
            option.id = item.id;
            option.value = item.uid;
            datalist.appendChild(option);
          })
        }
      });

      t = $('#devices').DataTable();

      api.getDevicesOfClient(clientID,(err,res)=>{
        if(err) console.log("err:",err)
        else{
          res.forEach((item, i) => {
            console.log(item);
            addRow(item.id,item.uid,item.project,item.status);
          });
        }
      });

    });

    function addRow(id,uid,model,fwV,appV,status){

      t.row.add([`
        <button id="`+id+`" onclick="removePermission('`+id+`');" type="button" class="delete btn btn-secondary btn-sm">
          <i class="fa-solid fa-user-xmark"></i>
        </button>`,
        `<a href="../../device/`+id+`">`+uid+`</a>`,
        model,fwV,appV,status]).draw(true);

    }

    function removePermission(id){
      deviceId = id;
      $('#modalConfirmation').modal('show');
    }

    $("#modalProceed").click(()=>{

      api.removePermission(clientID,deviceId,(err,res)=>{
        if(err){
          //$('#modalErrorBody').text(err);
          $('#error').text("Your request cannot be executed");
          $('#suggestion').text("Check if there aren't mqtt clients associated to this user");
          $('#modalError').modal('show');
        }else location.reload();
      });
    })

    $("#submit").click(()=>{

      let device = $("#_deviceID_").val();

      $('#datalistOptions option').each(function() {
        if(this.value === device) {
          deviceId = this.id;
          return;
        }
      })

      let level = $("#_permissionID_").val();

      api.addPermission(clientID,deviceId,level,(err,res)=>{
        if(err) console.log(err);
        else location.reload();
      });

    });

  </script>

</body>
</html>
