<!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">
        <div class="name">
            <span>Устройства</span>
        </div>
        <nav>
            <a href="/devices">Список устройств</a>
            <!-- <a href="/devices/drivers">Водители</a> -->
            <!-- <a href="/devices/newdevice">Добавить устройство</a> -->
            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->

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

                <section class="for-table">

                    <section class="organisation update">
                      <div class="update-org">
                        <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="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
                              <li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</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="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li>
                              <li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li>
                              <li class="device"><img><input type="checkbox" id="0005" class="checkbox-input device-filter" value="0005" hidden checked><label for="0005" class="checkbox-label"><div class="checkmark"></div>0005</label></li>
                              <li class="device"><img><input type="checkbox" id="0006" class="checkbox-input device-filter" value="0006" hidden checked><label for="0006" class="checkbox-label"><div class="checkmark"></div>0006</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="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                          
                    

                    <section class="update-info">
                      <h1>Новое обновление</h1>

                      <div class="update-info-area">

                        <div id="upload-file" class="upload-input">
                          <img src="../img/upload.svg">
                          <span class="upload-text">Загрузить файл обновления</span>
                          <span class="upload-description">ZIP, RAR, TAR (макс 100 мб)</span>
                        </div>
                        <input id="input-upload-file" type="file" name="updateFile" style="display: none;">

                        <label for="update-name">Название<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                        <input name="updateName" type="text" id="update-name" placeholder="Название обновления" required>

                        <span class="input-name">Время обновления</span>
                        <ul id="time-picker">
                          <li><input type="radio" name="updateTimeRadio" id="update-time-now" value="now" checked><label class="input-radio" for="update-time-now">Сейчас</label></li>
                          <li><input type="radio" name="updateTimeRadio" id="update-time-later" value="later"><label class="input-radio" for="update-time-later">Ко времени</label></li>
                        </ul>

                        <input name="updateTime" type="datetime-local" id="update-time">

                        <button>Отправить</button>

                      </div>
                    </section>

                  </section>

                

                    <section id="table-area" class="table update">
                        <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>Группа</th>
                                <th>Номер ТС</th>
                                <th>Статус</th>
                                <th>Время</th>
                                <th>Файл</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <!-- Сюда будут добавляться строки таблицы -->
                            </tbody>
                          </table>
                          
                          
                          
                          
                    </section>

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

                </section>


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

    <script src="../scripts/table-updates.js"></script>
    <script src="../scripts/jquery.min.js"></script>

    <script>
      const fileSelect = document.getElementById("upload-file");
      const fileElem = document.getElementById("input-upload-file");

      fileSelect.addEventListener(
              "click",
              (e) => {
                      if (fileElem) {
                              fileElem.click();
                      }
              },
              false
      );
  </script>

  <script>

      $("#update-time").hide();
      $("#time-picker").click(function () {
        if ($("#update-time-later").is(":checked")) {
          $("#update-time").show(50);
        } else {
          $("#update-time").hide(50);
        }
      });

  </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>