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

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

</head>
<body>

  <%- include('../../partials/device/scripts.ejs') %>
  <%- include('../../partials/device/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/device/sidebar.ejs') %>
          <div class="col py-3">
            <div class="row">
              <div class="col-sm-7 mb-3 mb-sm-0">
                <div class="content-header">
                  <h5>Clients with access to <%= device?.name != null ? device?.name : device?.uid %></h5>
                </div>
                <div class="card overflow-auto">
                  <!--<h5 class="card-title">Special title treatment</h5>-->
                  <table id="clients" class="display" style="width:100%">
                    <thead>
                        <tr>
                          <th></th>
                          <th>nick</th>
                          <th>level</th>
                        </tr>
                    </thead>
                  </table>
                </div>
              </div>
              <div class="col-sm-5 mb-2 mb-sm-0">
                <div class="card">
                  <div class="card-header">
                    <p>Associate Client</p>
                  </div>
                  <div class="card-body">
                    <div class="input-group mb-3">
                      <label class="input-group-text" for="inputGroupSelect01">client</label>
                      <input class="form-control" list="datalistOptions" id="_clientID_" 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>
                        <option value="4">OWNER</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>


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

  <script>
    var t;
    var deviceId = api.getDeviceID();
    $(document).ready(()=>{

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

      api.getClientsWithAccessToDevice(deviceId,(err,res)=>{
        if(err) console.log("err:",err)
        else{
          res.forEach((item, i) => {
            addRow(item.id,item.nick,item.level);
          });
        }
      });

      api.getClients((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.nick;
            datalist.appendChild(option);
          })
        }
      })

    });

    function addRow(clientID,nick,level){

      t.row.add([`
        <div class="btn-group">
          <button onclick="deletePermission('`+clientID+`');" type="button" class="delete btn btn-secondary btn-sm">
            <i class="fa-solid fa-user-xmark"></i>
          </button>
        </div>`,
        `<a href="../../client/`+clientID+`">`+nick+`</a>`,
        level]).draw(true);
    }

    function deletePermission(clientID){
      id = clientID;
      $('#modalConfirmation').modal('show');
    }

    $("#modalProceed").click(()=>{
      api.removePermission(id,deviceId,(err,res)=>{
        if(err){
          $('#error').text("Your request cannot be executed");
          $('#suggestion').text(err);
          $('#modalError').modal('show');
        }else location.reload();
      });
    })

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

      let clientID = -1;
      let client = $("#_clientID_").val();
      $('#datalistOptions option').each(function() {
        if(this.value === client) {
          clientID = 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>
