<!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 class="selected" href="/devices">Список устройств</a>
            <!-- <a 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">
                          {{#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"><div class="checkmark"></div>{{this}}</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><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>Номер SIM-карты</th>
                                <th>IP-адрес</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="form">
    <section class="for-new">

      <section class="stages">
          <input name="newStage" type="radio" value="details" id="stage-details" checked><label for="stage-details">Детали</label>
          <div class="vertical-line"></div>
          <input name="newStage" type="radio" value="sim" id="stage-sim"><label for="stage-sim">SIM - Карта</label>
          <div class="vertical-line"></div>
          <input name="newStage" type="radio" value="ts" id="stage-ts"><label for="stage-ts">Транспортное средство</label>
          <div class="vertical-line"></div>
          <input name="newStage" type="radio" value="equipment" id="stage-equipment"><label for="stage-equipment">Оборудование</label>
          <br>
          <input name="newStage" type="radio" value="parameters" id="stage-parameters"><label style="margin-top: 115%;" for="stage-parameters">Системные настройки</label>
      </section>
    </section>
    <section id="add-new-container" class="add-new">


      <img src="../img/xmark.svg" id="close-form-btn">
      <form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedevice">

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

          <h1>Детали устройства</h1>
          <h2>Сперва самое необходимое</h2>

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

          <div class="parameters-inputs">
          <div class="parameters-input">
              <label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <select name="plateColor" id="parameters-plateColor">
                  <option value="white">Белый</option>
                  <option value="blue">Синий</option>
                  <option value="yellow">Жёлтый</option>
              </select>
          </div>
          <div class="parameters-input">
              <label for="parameters-serial">Серийный номер<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="serialNumber" type="text" id="parameters-serial" placeholder="Серийный номер устройства" required readonly>
          </div>
          <div class="parameters-input">
              <label for="parameters-channels">Количество каналов<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="channelsAmount" type="text" id="parameters-channels" placeholder="Кол-во каналов устройства" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-protocol">Протокол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <select name="connectionProtocol" id="parameters-protocol">
                  <option value="N9M">N9M</option>
              </select>
          </div>
          <div class="parameters-input">
              <label for="parameters-ip">IP-адрес<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="IPAddress" type="text" id="parameters-ip" placeholder="IP-адрес сервера" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="serverPort" type="text" id="parameters-port" placeholder="Порт сервера" required>
          </div>

          </div>

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

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

      </div>

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

          <h1>Настройки SIM-карты</h1>
          <h2>Для связи с устройством</h2>

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

          <div class="parameters-inputs">
          <div class="parameters-input">
              <label for="parameters-sim">Номер SIM-карты<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="sumNumber" type="text" id="parameters-sim" placeholder="Номер SIM-карты" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-sim-imei">IMEI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="simIMEI" type="text" id="parameters-sim-imei" placeholder="IMEI SIM-карты" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-sim-imsi">IMSI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="simIMSI" type="text" id="parameters-sim-imsi" placeholder="IMSI SIM-карты" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-sim-module">Тип сетевого модуля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <select name="simModule" id="parameters-sim-module">
                  <option value="GPRS">GPRS</option>
                  <option value="CDMA">CDMA</option>
                  <option value="EVDO">EVDO</option>
                  <option value="WCDMA">WCDMA</option>
                  <option value="EDGE">EDGE</option>
                  <option value="TDSCDMA">TDSCDMA</option>
                  <option value="LTE-TDD">LTE-TDD</option>
                  <option value="LTE-FDD">LTE-FDD</option>
              </select>
          </div>

          </div>

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

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

      </div>

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

          <h1>Детали транспортного средства</h1>
          <h2>Технические характеристики и не только</h2>

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

          <div class="parameters-inputs">
          <div class="parameters-input">
              <label for="parameters-trasnsport-type">Тип автомобиля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <select name="transportType" id="parameters-trasnsport-type" onchange="truncateText(this)">
                  <option value="1">Пассажирский подвижной состав</option>
                  <option value="2">Большой автобус</option>
                  <option value="3">Средний автобус</option>
                  <option value="4">Микроавтобус</option>
                  <option value="5">Лимузин</option>
                  <option value="6">Большой спальный автобус</option>
                  <option value="7">Спальный автобус среднего размера</option>
                  <option value="8">Обычный грузовик</option>
                  <option value="9">Большой обычный грузовик</option>
                  <option value="10">Среднегабаритный обычный грузовик</option>
                  <option value="11">Маленький обычный грузовик</option>
                  <option value="12">Специальная транспортировочная машина</option>
                  <option value="13">Контейнерная тележка</option>
                  <option value="14">Большой транспортировочный автомобиль</option>
                  <option value="15">Изометрический вагон</option>
                  <option value="16">Спецтехника для перевозки грузовых автомобилей</option>
                  <option value="17">Танкер</option>
                  <option value="18">Тягач</option>
                  <option value="19">Прицеп</option>
                  <option value="20">Транспортер</option>
                  <option value="21">Другая спецтехника</option>
                  <option value="22">Автомобиль для перевозки опасных грузов</option>
                  <option value="23">Сельскохозяйственная машина</option>
              </select>
          </div>
          <div class="parameters-input">
              <label for="parameters-trasnsport-factory">Номер завода<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportFactory" type="text" id="parameters-trasnsport-factory" placeholder="Номер завода ТС" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-strength">Несущая способность<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportStrength" type="text" id="parameters-transport-strength" placeholder="Несущая способность (тонны)" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-engine">Номер двигателя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportEngine" type="text" id="parameters-transport-engine" placeholder="Номер двигателя ТС" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-stanina">Номер станины<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportStanina" type="text" id="parameters-transport-stanina" placeholder="Номер станины ТС" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-trasnsport-fuel">Тип топливного масла<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <select name="transportFuel" id="parameters-trasnsport-fuel">
                  <option value="gasoline">Бензин</option>
                  <option value="diesel">Дизельное топливо</option>
                  <option value="naturalGas">Природный газ</option>
                  <option value="liquefiedGas">Сжиженный газ</option>
                  <option value="electric">Электрическое</option>
                  <option value="other">Прочие</option>
              </select>
          </div>
          <div class="parameters-input">
              <div class="parameters-transport-certificate">
                  <label for="parameters-transport-certificate">Свид-ство о дорожной перевозке<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <input name="transportCertificate" type="text" id="parameters-transport-certificate" placeholder="Номер свидетельства" required>
              </div>
          </div>
          <div class="parameters-input">
              <div class="pparameters-trasnsport-category">
                  <label for="parameters-trasnsport-category">Техническая категория<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                  <select name="transportCategory" id="parameters-trasnsport-category">
                      <option value="1">Категория 1</option>
                      <option value="2">Категория 2</option>
                      <option value="3">Категория 3</option>
                      <option value="other">Не достает стандарта</option>
                  </select>
              </div>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-expire">Срок действия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportExpire" type="date" id="parameters-transport-expire" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-consumption">Расход топлива на 100 км<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportConsumption" type="text" id="parameters-transport-consumption" placeholder="Расход топлива в литрах" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-province">Провинция<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportProvince" type="text" id="parameters-transport-province" placeholder="Провинция" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-transport-city">Город<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="transportCity" type="text" id="parameters-transport-city" placeholder="Город" required>
          </div>

          </div>

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

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

      </div>

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

          <h1>Информация о оборудовании</h1>
          <h2>Технические моменты</h2>

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

          <div class="parameters-inputs">
          <div class="parameters-input">
              <label for="parameters-equipment-name">Имя устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentName" type="text" id="parameters-equipment-name" placeholder="Имя пользовательского устройства" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-equipment-password">Пароль устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentPassword" type="text" id="parameters-equipment-password" placeholder="Пароль устройства" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-equipment-number">Номер партии<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentNumber" type="text" id="parameters-equipment-number" placeholder="Заводской номер партии" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-equipment-released">Дата выпуска<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentReleased" type="date" id="parameters-equipment-released" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-device-installer">Установщик<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentInstaller" type="text" id="parameters-device-installer" placeholder="ФИО установщика" required>
          </div>
          <div class="parameters-input">
              <label for="parameters-equipment-installed">Дата монтажа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
              <input name="equipmentInstalled" type="date" id="parameters-equipment-installed" required>
          </div>

              <label for="parameters-device-description">Внешнее описание</label>
              <input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание ">

          </div>

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

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

      </div>

      </form>

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

        <h1>Системные настройки</h1>
        <h2>Параметры регистраторов</h2>

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

        <div class="parameters-inputs">
        <div class="parameters-input">
            <label for="system-date">Формат даты</label>
            <select name="DATEMOD" id="system-date">
              <option value="0">ММ-ДД-ГГГГ</option>
              <option value="1">ГГГГ-ММ-ДД</option>
              <option value="2">ДД-ММ-ГГГГ</option>
          </select>
        </div>
        <div class="parameters-input">
            <label for="system-time">Формат времени</label>
            <select name="TIMEFORMAT" id="system-time">
              <option value="0">24 ч</option>
              <option value="1">12 ч</option>
          </select>
        </div>
        <div class="parameters-input">
            <label for="system-video">Формат видео</label>
            <select name="VIDEOFORMAT" id="system-video">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
          </select>
        </div>
        <div class="parameters-input">
          <label for="system-stream">Формат трансляции</label>
          <select name="SUBSTREAMMODE" id="system-stream">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="system-language">Язык системы</label>
        <select name="LANGUAGE" id="system-language">
          <option value="1">Английский</option>
          <option value="12">Русский</option>
      </select>
    </div>
        <div class="parameters-input">
            <label for="system-geo">Определение геопозиции</label>
            <select name="GEOMOD" id="system-geo">
                <option value="0">GPS</option>
                <option value="1">BEIDO</option>
                <option value="2">GALILEO</option>
                <option value="3">GLENAS</option>
                <option value="4">Смешанное</option>
            </select>
        </div>

        </div>

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

        <h2 style="margin-bottom: 5px;">Отметьте то, что должно отображаться на трансляции</h2>

        <input type="checkbox" id="TE" class="checkbox-input" hidden><label for="TE" class="checkbox-label"><div class="checkmark"></div>Время</label>
        <input type="checkbox" id="SE" class="checkbox-input" hidden><label for="SE" class="checkbox-label"><div class="checkmark"></div>Скорость</label>
        <input type="checkbox" id="VE" class="checkbox-input" hidden><label for="VE" class="checkbox-label"><div class="checkmark"></div>Номер ТС</label>
        <input type="checkbox" id="GE" class="checkbox-input" hidden><label for="GE" class="checkbox-label"><div class="checkmark"></div>Координаты</label>
        <input type="checkbox" id="NE" class="checkbox-input" hidden><label for="NE" class="checkbox-label"><div class="checkmark"></div>Названия камер</label>

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

        <button id="continue-parameters" onclick="sendPutRequest();" type="button">Сохранить</button>

    </div>

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

    <script>
      const devices = [
  {{#each Registrars}}
  {
    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}}
];
    </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>
    // Функция для отправки PUT запроса
    async function sendPutRequest() {
      const dateModSelect = document.getElementById('system-date');
      const timeFormatSelect = document.getElementById('system-time');
      const videoFormatSelect = document.getElementById('system-video');
      const streamFormatSelect = document.getElementById('system-stream');
      const languageSelect = document.getElementById('system-language');
      const geoModSelect = document.getElementById('system-geo');

      // Извлекаем значения выбранных опций
      const DATEMOD = dateModSelect.value;
      const TIMEFORMAT = timeFormatSelect.value;
      const VIDEOFORMAT = videoFormatSelect.value;
      const SUBSTREAMMODE = streamFormatSelect.value;
      const LANGUAGE = languageSelect.value;
      const GEOMOD = geoModSelect.value;

      // Извлекаем значения чекбоксов
      const NE = document.getElementById('NE').checked ? 1 : 0;
      const TE = document.getElementById('TE').checked ? 1 : 0;
      const VE = document.getElementById('VE').checked ? 1 : 0;
      const SE = document.getElementById('SE').checked ? 1 : 0;
      const GE = document.getElementById('GE').checked ? 1 : 0;


      const serial = $("#parameters-serial").val();

      // Создаем объект данных для PUT запроса
      const requestData = {
        DATEMOD,
        TIMEFORMAT,
        VIDEOFORMAT,
        SUBSTREAMMODE,
        LANGUAGE,
        GEOMOD,
        NE,
        TE,
        VE,
        SE,
        GE,
      };

      // console.log(requestData);

      try {
        // Отправляем PUT запрос
        const response = await fetch(`/device-parameters?serial=${serial}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(requestData),
        });

        if (response.ok) {
          // PUT запрос выполнен успешно
          var formContainer = $("#form-bg");
          var form = $("#form");
          formContainer.removeClass("active");
          form.removeClass("form-animation");
          $("body").css("overflow", "auto");
          console.log('PUT запрос выполнен успешно');
          // Здесь вы можете выполнить дополнительные действия, если необходимо
        } else {
          console.error('Ошибка при выполнении PUT запроса');
        }
      } catch (error) {
        console.error('Произошла ошибка при отправке PUT запроса:', error);
      }
    }
  </script>

    <script>
      const form = document.getElementById('edit-form');
      const sendButton = document.getElementById('send-form');

      sendButton.addEventListener('click', function(event) {
        event.preventDefault(); // Предотвращаем отправку формы по умолчанию

        const xhr = new XMLHttpRequest();
        
        xhr.open('POST', form.action, true);
        
        xhr.setRequestHeader('Content-Type', 'application/json');
        
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log('Данные устройства обновлены!');
            location.reload()
          } else {
            console.error('Ошибка отправки формы:', xhr.status);
          }
        };
        
        // Получаем данные формы для отправки
        const formData = new FormData(form);
        
        // Создаем объект с данными формы
        const data = {};
        for (const [key, value] of formData) {
          data[key] = value;
        }
        
        // Преобразуем данные в JSON
        const jsonData = JSON.stringify(data);
        
        // Отправляем данные формы
        xhr.send(jsonData);
      });
    </script>

    <script>
      // Преобразование даты в формат YYYY-MM-DD
      function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }

      

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

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

      $.ajax({
        url: "/devicedata", 
        method: "POST",
        contentType: "application/json",
        data: JSON.stringify({ id: id }),
        success: function(response) {
          // Установка значений полей формы
          $("#parameters-plate").val(response.plate);
          $("#parameters-plateColor").val(response.plate_color);
          $("#parameters-serial").val(response.serial);
          $("#parameters-channels").val(response.channels);
          $("#parameters-protocol").val(response.protocol);
          $("#parameters-ip").val(response.ip);
          $("#parameters-group").val(response.group);
          $("#parameters-port").val(response.port);
          $("#parameters-sim").val(response.sim);
          $("#parameters-sim-imei").val(response.imei);
          $("#parameters-sim-imsi").val(response.imsi);
          $("#parameters-sim-module").val(response.module);
          $("#parameters-trasnsport-type").val(response.auto);
          $("#parameters-trasnsport-factory").val(response.factory);
          $("#parameters-transport-strength").val(response.capacity);
          $("#parameters-transport-engine").val(response.engine);
          $("#parameters-transport-stanina").val(response.stanina);
          $("#parameters-trasnsport-fuel").val(response.fuel);
          $("#parameters-transport-certificate").val(response.certificate);
          $("#parameters-transport-category").val(response.category);
          $("#parameters-transport-expire").val(formatDate(new Date(response.certificate_exp)));
          $("#parameters-transport-consumption").val(response.consumption);
          $("#parameters-transport-province").val(response.region);
          $("#parameters-transport-city").val(response.city);
          $("#parameters-equipment-name").val(response.name);
          $("#parameters-equipment-password").val(response.password);
          $("#parameters-equipment-number").val(response.batch);
          $("#parameters-equipment-released").val(formatDate(new Date(response.release)));
          $("#parameters-device-installer").val(response.installer);
          $("#parameters-equipment-installed").val(formatDate(new Date(response.installation)));
          $("#parameters-device-description").val(response.description);

          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";
          content5.style.opacity = 0;
          content5.style.display = "none";

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

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

          const requestBody = {
            "serial": $("#parameters-serial").val(),
            "FIELDS": [
              "DATEMOD",
              "TIMEFORMAT",
              "LANGUAGE",
              "VIDEOFORMAT",
              "GEOMOD",
              "SUBSTREAMMODE",
              "DISPLAYMENU"
            ]
          };

          console.log(requestBody);

          // Отправляем POST-запрос
      fetch('/device-parameters', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)
          })
          .then(response => response.json())
          .then(data => {
            // Заполняем поля input данными из ответа
            document.getElementById('system-date').value = data.DATEMOD;
            document.getElementById('system-time').value = data.TIMEFORMAT;
            document.getElementById('system-language').value = data.LANGUAGE;
            document.getElementById('system-video').value = data.VIDEOFORMAT;
            document.getElementById('system-geo').value = data.GEOMOD;
            document.getElementById('system-stream').value = data.SUBSTREAMMODE;
            document.getElementById('NE').checked = data.DISPLAYMENU.NE === 1;
            document.getElementById('TE').checked = data.DISPLAYMENU.TE === 1;
            document.getElementById('VE').checked = data.DISPLAYMENU.VE === 1;
            document.getElementById('SE').checked = data.DISPLAYMENU.SE === 1;
            document.getElementById('GE').checked = data.DISPLAYMENU.GE === 1;
          })
          .catch(error => console.error('Ошибка:', error));
        },
        error: function() {
          // Обработка ошибки при запросе к серверу
          alert("Произошла ошибка при запросе к серверу.");
        }
      });

      }



      $(document).ready(function() {
      var formContainer = $("#form-bg");
      var form = $("#form");

      

      // Закрывает popup форму
      $("#close-form-btn").click(function() {
        closeForm();
      });

      // Закрывает popup форму при клике вне её области
      $(document).click(function(event) {
        if (
    !formContainer.is(event.target) &&
    formContainer.has(event.target).length === 0 &&
    formContainer.hasClass("active") &&
    !openButton.is(event.target)
  ) {
          closeForm();
        }
      });

      // Функция для закрытия формы
      function closeForm() {
        formContainer.removeClass("active");
        form.removeClass("form-animation");
        $("body").css("overflow", "auto");
      }
    });
    </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 src="../scripts/device-form.js"></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>