<!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>
        <h1>Аргус</h1>
        <h2><span>/</span> Название организации</h2>
    </header>

    <section class="account-info">
      <div id="account-main">
          <img id="person" src="../img/person.svg">
          <span>Тестовое Имя</span>
          <img id="down" src="../img/down.svg">
          <img id="up" src="../img/up.svg">
      </div>
      <a href="/login"><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>
        <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}}
        <div class="name">
            <span>Устройства</span>
        </div>
        <nav>
            <a href="/devices">Список устройств</a>
            <a class="selected" href="/devices/drivers">Водители</a>
            <!-- <a href="/devices/newdevice">Добавить устройство</a>  -->
            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->

            <a class="update" href="/devices/update">Обновление ПО</a>
        </nav>
        <section class="bg">
            <section class="content">
              

                <section class="for-table">

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

                        <ul class="area">
                          <!-- <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
                            <ul class="area-devices" id="devices-1">
                              <li class="device"><img><input type="checkbox" id="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
                              <li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
                            </ul>
                          </li>
                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label>
                            <ul class="area-devices" id="devices-2">
                              <li class="device"><img><input type="checkbox" id="2-device-1" class="checkbox-input device-filter" value="2-device-1" hidden checked><label for="2-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
                              <li class="device"><img><input type="checkbox" id="2-device-2" class="checkbox-input device-filter" value="2-device-2" hidden checked><label for="2-device-2" class="checkbox-label"><div class="checkmark"></div>Электробусы</label></li>
                              <li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li>
                              <li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" class="checkbox-label"><div class="checkmark"></div>Старые ТС</label></li>
                            </ul>
                          </li>
                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
                            <ul class="area-devices" id="devices-3">
                              <li class="device"><img><input type="checkbox" id="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
                            </ul>
                          </li> -->
                        </ul>

                        <button class="addDriver" onclick="openNew()">Добавить водителя</button>
                          
                    </section>

                

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

                          
                          <table id="deviceTable">
                            <thead>
                              <tr>
                                <th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
                                <th>ID</th>
                                <th>Имя</th>
                                <th>Фамилия</th>
                                <th>Номер ТС</th>
                                <th>Номер телефона</th>
                                <th>Почта</th>
                                <th>Карта водителя</th>
                                <th><button id="delete-device-all" value="delete-device-all" class="trash"></button></th>
                              </tr>
                            </thead>
                            <tbody>
                              <!-- Сюда будут добавляться строки таблицы -->
                            </tbody>
                          </table>
                          
                          
                          
                          
                    </section>

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

                </section>

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

    <section id="form-bg" class="edit-container">

      <section id="editForm">
        <section class="for-new">

          <section class="stages">
              <input name="newStageEdit" type="radio" value="main" id="stage-main-edit" checked><label for="stage-main-edit">Основная информация</label>
              <div class="vertical-line"></div>
              <input name="newStageEdit" type="radio" value="details" id="stage-details-edit"><label for="stage-details-edit">Детали</label>
          </section>
        </section>
        <section id="add-new-container" class="add-new">
          <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">

          <form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedriver">
            <input type="text" id="driver-id-edit" name="driverID" hidden>

          <div id="main-edit" class="new-parameters drivers active">

              <h1>Основная информация</h1>
              <h2>Сперва самое необходимое</h2>

              <div class="horizontal-line"></div>

              <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <div id="upload-photo-edit" class="upload-input">
                  <!-- <img src="../img/upload.svg">
                  <span class="upload-text">Загрузить фотографию водителя</span>
                  <span class="upload-description">PNG, JPG (макс 20 мб)</span> -->
                  <img src="../img/warning.svg">
                  <span class="upload-text">Временно недоступно редактирование фотографии</span>
                  <span class="upload-description">Остальная информация изменяется</span>
              </div>
              <input id="input-upload-photo-edit" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">

              <div class="parameters-inputs">
                  <label for="driver-name-edit">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverName" type="text" id="driver-name-edit" placeholder="Имя водителя" required>

                  <label for="driver-surname-edit">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverSurname" type="text" id="driver-surname-edit" placeholder="Фамилия водителя" required>

                  <label for="driver-card-edit">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverCard" type="text" id="driver-card-edit" placeholder="Номер карты водителя" required>

              </div>

              <div class="horizontal-line"></div>

              <button id="continue-main-edit" type="button">Продолжить</button>

          </div>

          <div id="details-edit" class="new-parameters">

              <h1>Детальная информация</h1>
              <h2>Для удобства в идентификации</h2>

              <div class="horizontal-line"></div>

              <div class="parameters-inputs">

                  <div class="parameters-input">
                      <label for="driver-gender-edit">Пол</label>
                      <select name="driverGender" id="driver-gender-edit">
                          <option value="NS">Не указывать</option>
                          <option value="male">Мужской</option>
                          <option value="female">Женский</option>
                      </select>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-license-edit">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverLicense" type="text" id="driver-license-edit" placeholder="Номер водительского удостоверения" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-passport-edit">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverPassport" type="text" id="driver-passport-edit" placeholder="Номер удостоверения личности" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-phone-edit">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverPhone" type="text" id="driver-phone-edit" placeholder="Номер мобильного телефона" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-email-edit">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverEmail" type="text" id="driver-email-edit" placeholder="Электронная почта" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-transport-edit">Транспортное средство</label>
                      <select name="driverTransport" id="driver-transport-edit">
                        <option value="NS">Не указывать</option>
                        {{#each Registrars}}
                          <option value="{{this}}">{{this}}</option>
                        {{/each}}
                      </select>
                  </div>

                  <label for="driver-description-edit">Примечание</label>
                  <input name="driverDescription" type="text" id="driver-description-edit" placeholder="Примечание">

              </div>

              <div class="horizontal-line"></div>

              <button type="submit" id="send-edit">Сохранить</button>

          </div>

          </form>

        </section>



      </section>

      <section id="newForm">
        <section class="for-new">

          <section class="stages">
              <input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label>
              <div class="vertical-line"></div>
              <input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label>
          </section>
        </section>
        <section id="add-new-container" class="add-new">
          <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">

          <form id="new-form" enctype="multipart/form-data" method="post" action="/adddriver">

          <div id="main" class="new-parameters drivers active">

              <h1>Основная информация</h1>
              <h2>Сперва самое необходимое</h2>

              <div class="horizontal-line"></div>

              <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <div id="upload-photo" class="upload-input">
                  <img src="../img/upload.svg">
                  <span class="upload-text">Загрузить фотографию водителя</span>
                  <span class="upload-description">PNG, JPG (макс 20 мб)</span>
              </div>
              <div class="image-container" id="image-container" style="display: none;">
                <img id="image-preview" src="#" alt="Uploaded Image">
                <div class="upload-result">
                  <img id="file-icon" src="../img/file.svg" />
                  <span id="file-name"></span>
                  <span id="file-size"></span>
                  <img id="clear-button" src="../img/xmark.svg" />
                </div>
              </div>
              <input id="input-upload-photo" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">

              <div class="parameters-inputs">
                  <label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required>

                  <label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required>

                  <label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required>

              </div>

              <div class="horizontal-line"></div>

              <button id="continue-main" type="button">Продолжить</button>

          </div>

          <div id="details" class="new-parameters">

              <h1>Детальная информация</h1>
              <h2>Для удобства в идентификации</h2>

              <div class="horizontal-line"></div>

              <div class="parameters-inputs">

                  <div class="parameters-input">
                      <label for="driver-gender">Пол</label>
                      <select name="driverGender" id="driver-gender">
                          <option value="NS">Не указывать</option>
                          <option value="male">Мужской</option>
                          <option value="female">Женский</option>
                      </select>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverPassport" type="text" id="driver-passport" placeholder="Номер удостоверения личности" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-email">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                      <input name="driverEmail" type="text" id="driver-email" placeholder="Электронная почта" required>
                  </div>

                  <div class="parameters-input">
                      <label for="driver-transport">Транспортное средство</label>
                      <select name="driverTransport" id="driver-transport">
                        <option value="NS">Не указывать</option>
                        {{#each Registrars}}
                          <option value="{{this}}">{{this}}</option>
                        {{/each}}
                      </select>
                  </div>

                  <label for="driver-description">Примечание</label>
                  <input name="driverDescription" type="text" id="driver-description" placeholder="Примечание">

              </div>

              <div class="horizontal-line"></div>

              <button type="submit" id="send-form">Сохранить</button>

          </div>

          </form>

        </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="driverDeleteInfo"></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" onclick="deleteDriver()">Отменить</button>
            <button id="deleteDriver" style="display: inline-block;" type="button">Подтвердить</button>
          </div>
          </div>
        </section>

        <script>
          const devices = [
      {{#each Drivers}}
      {
        id: "{{this.id}}",
        name: "{{this.name}}",
        surname: "{{this.surname}}",
        numberTS: "{{this.transport}}",
        phone: "{{this.phone}}",
        mail: "{{this.email}}",
        sim: "{{this.sim}}",
        driverCard: "{{this.card}}",
      },
      {{/each}}
    ];
        </script>

    <script src="../scripts/table-drivers.js"></script>
    <script src="../scripts/jquery.min.js"></script>
    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
    <script src="../scripts/drivers-form.js"></script>

    <script>
      const uploadPhotoInput = document.getElementById('input-upload-photo');
      const uploadContainer = document.getElementById('upload-photo');
      const imageContainer = document.getElementById('image-container');
      const imagePreview = document.getElementById('image-preview');
      const fileNameElement = document.getElementById('file-name');
      const fileSizeElement = document.getElementById('file-size');
      const clearButton = document.getElementById('clear-button');
  
      uploadPhotoInput.addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function() {
            uploadContainer.style.display = 'none';
            imagePreview.src = reader.result;
            imageContainer.style.display = 'block';
            fileNameElement.textContent = file.name ;
            fileSizeElement.textContent = formatFileSize(file.size);
          };
          reader.readAsDataURL(file);
        }
      });

      function formatFileSize(bytes) {
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      if (bytes === 0) return '0 Byte';
      const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
      return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
    }
  
      clearButton.addEventListener('click', function() {
        uploadContainer.style.display = 'block';
        uploadPhotoInput.value = null;
        imageContainer.style.display = 'none';
        imagePreview.src = '#';
        fileNameElement.textContent = '';
        fileSizeElement.textContent = '';
      });
    </script>
    <script>
      var form = document.getElementById('new-form');
      const sendButton = document.getElementById('send-form');
  
      form.addEventListener('submit', function(event) {
        event.preventDefault();
  
        const formData = new FormData(form);
  
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/adddriver', true);
  
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log('Водитель успешно добавлен!');
            location.reload();
          } else {
            console.error('Ошибка отправки формы:', xhr.status);
          }
        };
  
        xhr.send(formData);
      });

      var form2 = document.getElementById('edit-form');
      const editSendButton = document.getElementById('send-edit');
  
      form2.addEventListener('submit', function(event) {
        event.preventDefault();
  
        const formData = new FormData(form2);
  
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/updatedriver', true);
  
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log('Информация о водителе успешно обновлена!');
            location.reload();
          } else {
            console.error('Ошибка отправки формы:', xhr.status);
          }
        };
  
        xhr.send(formData);
      });
    </script>
    <script>
      const fileSelect = document.getElementById("upload-photo");
        const fileElem = document.getElementById("input-upload-photo");

        fileSelect.addEventListener(
                "click",
                (e) => {
                        if (fileElem) {
                                fileElem.click();
                        }
                },
                false
        );
      $(document).ready(function(){

          $('#driver-phone').inputmask({"mask": "+7 (999) 999-9999"});
          $('#driver-phone-edit').inputmask({"mask": "+7 (999) 999-9999"});

      });

      // Открывает popup форму
      function openNew() {

      var formContainer = $("#form-bg");
      var newForm = $("#newForm");
      var editForm = $("#editForm");

      

        activeContent = content1
        switchContent(content1);

        content2.style.opacity = 0;
        content2.style.display = "none";
        content3.style.opacity = 0;
        content3.style.display = "none";
        content4.style.opacity = 0;
        content4.style.display = "none";

        document.getElementById("stage-main").checked = true;


        newForm.css("display", "flex");
        editForm.css("display", "none");
        // Открытие формы
        formContainer.addClass("active");
        newForm.addClass("form-animation");
        $("body").css("overflow", "hidden");
      }

      function openEdit(id) {

      var formContainer = $("#form-bg");
      var newForm = $("#newForm");
      var editForm = $("#editForm");

      $.ajax({
        url: "/driverdata", 
        method: "POST",
        contentType: "application/json",
        data: JSON.stringify({ id: id }),
        success: function(response) {
          // Установка значений полей формы
          $("#driver-name-edit").val(response.name);
          $("#driver-surname-edit").val(response.surname);
          $("#driver-card-edit").val(response.card);
          $("#driver-gender-edit").val(response.gender);
          $("#driver-license-edit").val(response.license);
          $("#driver-passport-edit").val(response.passport);
          $("#driver-phone-edit").val(response.phone);
          $("#driver-email-edit").val(response.email);
          $("#driver-transport-edit").val(response.transport);
          $("#driver-description-edit").val(response.description);
          $("#driver-id-edit").val(response.id);

          activeContent = content3
          switchContent(content3);

          content1.style.opacity = 0;
          content1.style.display = "none";
          content2.style.opacity = 0;
          content2.style.display = "none";
          content4.style.opacity = 0;
          content4.style.display = "none";

          document.getElementById("stage-main").checked = true;

          newForm.css("display", "none");
          editForm.css("display", "flex");
          // Открытие формы
          formContainer.addClass("active");
          editForm.addClass("form-animation");
          $("body").css("overflow", "hidden");
          },
          error: function() {
            // Обработка ошибки при запросе к серверу
            alert("Произошла ошибка при запросе к серверу.");
          }
      });
        
      }

      var formContainer = $("#form-bg");
      var newForm = $("#newForm");
      var editForm = $("#editForm");

      // Функция для закрытия формы
      function closeForm() {
        formContainer.removeClass("active");
        newForm.removeClass("form-animation");
        editForm.removeClass("form-animation");
        newForm.css("display", "none");
        editForm.css("display", "none");
        $("body").css("overflow", "auto");
      }
  </script>

  <script>
    function deleteDriver(id) {

    var deleteConfirmation = $("#deleteConfirmation");

    $.ajax({
      url: "/driverdata", 
      method: "POST",
      contentType: "application/json",
      data: JSON.stringify({ id: id }),
      success: function(response) {
        // Установка значений полей формы
        $("#driverDeleteInfo").html(response.name + " " + response.surname);
        document.getElementById('deleteDriver').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: "/deletedriver", 
      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>

      <script>

var table = document.querySelector('#deviceTable');
var tableCheckboxAll = table.querySelector('#device-all');
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');

tableCheckboxAll.addEventListener('click', function(event) {
    table = document.querySelector('#deviceTable');
    tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
    if (tableCheckboxAll.checked) {
    tableCheckboxes.forEach((tableCheckbox) => {
        tableCheckbox.checked = true;
      });
    } else {
        tableCheckboxes.forEach((tableCheckbox) => {
        tableCheckbox.checked = false;
      });
    }
});

$('#deviceTable').click( function(event) {
    table = document.querySelector('#deviceTable');
    tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');


for (var i = 0; i < tableCheckboxes.length; i++) {
    tableCheckboxes[i].addEventListener('click', function(event) {
    for (var j = 0; j < tableCheckboxes.length; j++) {
      if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
        tableCheckboxAll.checked = false;
        return;
      }
    }
    tableCheckboxAll.checked = true;
  });
}
});

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