<!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">
    <title>Устройства</title>
    <link rel="stylesheet" href="../styles/main.css" />
</head>
<body>

    <header>
        <img src="../img/argus.png">
        <h1>Аргус</h1>
        <h2><span>/</span> {{Organisation}}</h2>
    </header>

    <section class="account-info">
      <div id="account-main">
          <img id="person" src="../img/person.svg">
          <span>{{User}}</span>
          <img id="down" src="../img/down.svg">
          <img id="up" src="../img/up.svg">
      </div>
      <a href="/logout"><div id="account-additional" class="additional">Выйти</div></a>
  </section>

    


    <section class="navigation">
        <a href="/">
            <div><img src="../img/chart.svg">Главная</div>
        </a>
        <a href="/devices">
            <div class="selected"><img src="../img/cloud.svg">Устройства</div>
        </a>
        <a href="/reports">
            <div><img src="../img/bubble.svg">Отчёты</div>
        </a>
        <a href="/live">
            <div><img src="../img/waves.svg">Трансляция</div>
        </a>
        <a href="/videos">
            <div><img src="../img/play.svg">Записи</div>
        </a>
        {{#if isAdmin}}
        <a class="admin-panel" href="/admin">
            <div><img src="../img/keyboard.svg">Админка</div>
        </a>
        {{/if}}
        <a class="settings" href="/settings">
            <div><img src="../img/gear.svg">Настройки</div>
        </a>
    </section>

    <section class="main">
      {{#if ifDBError}}
      <section class="dberror">
        <div class="erorr-container">
          <img src="../img/warning.svg"> <br>
          <h1>Ошибка </h1> <br>
          <span>Не удалось получить данные из БД</span>
          <button type="button" onclick="location.reload();">Повторить попытку</button>
        </div>
      </section>
      {{/if}}
        <nav>
            <a class="selected" href="/devices">Список устройств</a>
            {{#if EditTransport}}
            <a href="/devices/groups">Группы</a>
            {{/if}}
            <!-- <a href="/devices/drivers">Водители</a> -->
            <!-- <a href="/devices/newdevice">Добавить устройство</a> -->
            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->

            {{#if Update}}
            <!-- <a class="update" href="/devices/update">Обновление ПО</a> -->
            {{/if}}
        </nav>
        <section class="bg">
            <section class="content">

                <section class="for-table">

                    <section class="organisation">
                        <h1>Организация</h1>

                        <ul class="area">
                          {{#each Groups}}
                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="{{name}}" class="checkbox-input" hidden checked><label for="{{name}}" class="checkbox-label">{{name}}</label>
                              <ul class="area-devices" id="devices-1">
                                  {{#each serials}}
                                  <li class="device"><img><input type="checkbox" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" hidden checked><label for="{{this}}" class="checkbox-label">
                                      {{#if ../numbers}}
                                          {{#if (lookup ../numbers @index)}}
                                              <div class="checkmark"></div>{{lookup ../numbers @index}}
                                          {{else}}
                                              <div class="checkmark"></div>{{this}}
                                          {{/if}}
                                      {{else}}
                                          <div class="checkmark"></div>{{this}}
                                      {{/if}}
                                  </label></li>
                                  {{/each}}
                              </ul>
                          </li>
                          {{/each}}


                          </ul>
                          
                    </section>

                

                    <section id="table-area" class="table">
                        <h1>Список устройств</h1>
                        <input id="table-search" class="search" type="text" placeholder="Поиск">

                          
                          <table id="deviceTable">
                            <thead>
                              <tr>
                                <th>Группа</th>
                                <th>Номерной знак</th>
                                <th>Серийный номер</th>
                                <th>Статус</th>
                                <th>Номер SIM-карты</th>
                                <th>IP-адрес</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <!-- Сюда будут добавляться строки таблицы -->
                            </tbody>
                          </table>
                          
                          
                          
                          
                    </section>

                    <div id="count">
                        <!-- Сюда добавится итоговое количество результатов -->
                    </div>
                    <div id="pagination">
                        <!-- Сюда будут добавляться ссылки для переключения между страницами -->
                      </div>
                      
                      

                </section>

            </section>
        </section>
    </section>

    

  <section style="display: none;" class="dberror" id="deleteConfirmation">
    <div class="erorr-container">
      <img src="../img/warning.svg"> <br>
      <h1>Удаление устройства </h1> <br>
      <span>Вы уверены что хотите удалить <span id="deviceDeleteInfo"></span>?</span>
      <div class="buttons">
      <button id="deleteCancel" onclick="closeDeletion();" style="display: inline-block; background-color: white; color: rgba(0, 0, 0, 0.7); margin-right: 5px;" type="button">Отменить</button>
      <button id="deleteDevice" style="display: inline-block;" type="button" onclick="deleteDevice()">Подтвердить</button>
    </div>
    </div>
  </section>

    <script>
      const devices = [
  {{#each Registrars}}
  {
    number: "{{this.number}}",
    id: "{{this.id}}",
    serial: "{{this.serial}}",
    status: "{{this.status}}",
    name: "{{this.name}}",
    group: "{{this.group}}",
    plate: "{{this.plate}}",
    sim: "{{this.sim}}",
    ip: "{{this.ip}}",
    port: "{{this.port}}",
  },
  {{/each}}
];

      let EditTransport = false;
      {{#if EditTransport}}
      EditTransport = true;
      {{/if}}
      let DeleteTransport = false;
      {{#if DeleteTransport}}
      DeleteTransport = true;
      {{/if}}
    </script>

    <script src="../scripts/table.js"></script>
    <script src="../scripts/jquery.min.js"></script>
    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
    <script>
      $(document).ready(function(){

          $('#parameters-sim').inputmask({"mask": "+7 (999) 999-9999"});

      });
  </script>

  

    <script>
      function deleteDevice(id) {

var deleteConfirmation = $("#deleteConfirmation");

$.ajax({
  url: "/devicedata", 
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({ id: id }),
  success: function(response) {
    // Установка значений полей формы
    $("#deviceDeleteInfo").html(response.serial);
    document.getElementById('deleteDevice').setAttribute("onclick", `confirmDelete(${response.id})`);


    document.getElementById('deleteConfirmation').style.display = "flex";

    $("body").css("overflow", "hidden");
    },
    error: function() {
      // Обработка ошибки при запросе к серверу
      alert("Произошла ошибка при запросе к серверу.");
    }
});
  
}

function closeDeletion() {
    document.getElementById('deleteConfirmation').style.display = "none";
  }

function confirmDelete(id) {
$.ajax({
  url: "/deletedevice", 
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({ id: id }),
  success: function(response) {
    location.reload();
    },
    error: function() {
      // Обработка ошибки при запросе к серверу
      alert("Произошла ошибка при запросе к серверу.");
    }
});
  
}
    </script>

    <script>
        // Скрытие/Показ дополнительных меню аккаунта
        const accountMain = document.getElementById('account-main');
        const accountAdditional = document.getElementById('account-additional');
        const accountUp = document.getElementById('up');
        const accountDown = document.getElementById('down');
        accountAdditional.style.display = 'none';
        accountUp.style.display = 'none';
        
        accountMain.addEventListener('click', () => {
          if (accountAdditional.style.display === 'none') {
            accountAdditional.style.display = 'flex';
            accountUp.style.display = 'unset';
            accountDown.style.display = 'none';
          } else {
            accountAdditional.style.display = 'none';
            accountUp.style.display = 'none';
            accountDown.style.display = 'unset';
          }
        });
      </script>


      <script>
        const checkboxes = document.querySelectorAll('.organisation .checkbox-input');

checkboxes.forEach((checkbox) => {
    applyFilterAndSearch();
  checkbox.addEventListener('change', function() {
    document.querySelector('#device-all').checked = false;
    applyFilterAndSearch();
    const devices = this.parentNode.querySelector('.area-devices');
    if (this.checked) {
      devices.style.display = 'block';

      // Активируем дочерние чекбоксы
      const childCheckboxes = devices.querySelectorAll('.device-filter');
      childCheckboxes.forEach((childCheckbox) => {
        childCheckbox.checked = true;
        applyFilterAndSearch();
      });
    } else {
      devices.style.display = 'none';
      applyFilterAndSearch();

      // Деактивируем дочерние чекбоксы
      const childCheckboxes = devices.querySelectorAll('.device-filter');
      childCheckboxes.forEach((childCheckbox) => {
        childCheckbox.checked = false;
        applyFilterAndSearch();
      });
    }

    // Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
    if (!this.checked) {
      const childCheckboxes = devices.querySelectorAll('.device-filter');
      childCheckboxes.forEach((childCheckbox) => {
        childCheckbox.checked = false;
        applyFilterAndSearch();
      });
      devices.style.display = 'none';
    }
  });
});

      </script>
      
    
</body>
</html>