<!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>{{Serial}}</title>
    <link rel="stylesheet" href="../../../styles/main.css" />
</head>
<body>

  <style>
    .main {
      margin-top: 92px !important;
    }

    .main .bg {
      min-height: calc(100vh - 162px - 92px);
    }
  </style>

    <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>
        <a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank">
          <div><img src="../../../img/bug.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}}

      <section style="display: none;" class="dberror" id="addInformation" >
        <div class="erorr-container">
          <div id="loader" class="loader">
            <div class="square" id="sq1"></div>
            <div class="square" id="sq2"></div>
            <div class="square" id="sq3"></div>
            <div class="square" id="sq4"></div>
            <div class="square" id="sq5"></div>
            <div class="square" id="sq6"></div>
            <div class="square" id="sq7"></div>
            <div class="square" id="sq8"></div>
            <div class="square" id="sq9"></div>
          </div>
          <svg id="success-mark" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="108" height="108" fill="none" viewBox="0 0 108 108">
            <g clip-path="url(#a)">
              <path fill="#8086F9" fill-opacity=".85" d="M54 107.947c29.541 0 54-24.5 54-53.973C108 24.447 83.488 0 53.947 0 24.459 0 0 24.447 0 53.974c0 29.474 24.512 53.973 54 53.973Zm0-8.995c-24.988 0-44.947-20.002-44.947-44.978 0-24.976 19.906-44.978 44.894-44.978S99 28.998 99 53.974c0 24.976-20.012 44.978-45 44.978Zm-5.824-19.844c1.747 0 3.23-.846 4.289-2.487l24.194-38.046c.582-1.058 1.27-2.222 1.27-3.386 0-2.382-2.117-3.916-4.341-3.916-1.323 0-2.647.847-3.653 2.381l-21.97 35.241-10.43-13.493c-1.27-1.693-2.435-2.116-3.917-2.116-2.277 0-4.077 1.852-4.077 4.18 0 1.164.477 2.276 1.218 3.28l12.917 15.875c1.324 1.747 2.753 2.487 4.5 2.487Z"/>
            </g>
            <defs>
              <clipPath id="a">
                <path fill="#fff" d="M0 0h108v108H0z"/>
              </clipPath>
            </defs>
          </svg>
          
                <h1>Обновление устройства</h1> <br>
                <span id="status">Пожалуйста, подождите</span>
                <button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button>
        </div>
    </section>

    
  
    <div class="name">
      <span>{{Serial}}</span>
  </div>
  <nav>
    <a class="return-name" href="/devices">
      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="17" fill="none" viewBox="0 0 10 17">
      <g clip-path="url(#a)">
        <path fill="#8086F9" d="M0 8.477a.88.88 0 0 0 .273.644l7.745 7.568a.84.84 0 0 0 .634.264c.508 0 .899-.38.899-.889a.917.917 0 0 0-.264-.634l-7.11-6.953 7.11-6.954A.936.936 0 0 0 9.551.89.876.876 0 0 0 8.652 0a.869.869 0 0 0-.634.254L.273 7.832A.864.864 0 0 0 0 8.477Z"/>
      </g>
      <defs>
        <clipPath id="a">
          <path fill="#fff" d="M0 0h9.551v16.963H0z"/>
        </clipPath>
      </defs>
    </svg>
     Вернуться</a>
     <a href="/devices/device/{{Serial}}">Основные настройки</a>
     <a class="selected" href="/devices/device/system/{{Serial}}">Системные настройки</a>
  </nav>
        <section class="bg">
            <section class="content">

              <section class="for-new">

                <section class="stages">
                    <input autocomplete="off" name="newStage" type="radio" value="parameters" id="stage-parameters" checked><label for="stage-parameters">Системные настройки</label>
                    <div class="vertical-line" style="background: transparent;"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="ethernet" id="stage-ethernet"><label for="stage-ethernet">Сеть</label>
                    <div class="vertical-line"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="wifi" id="stage-wifi"><label for="stage-wifi">Wi-Fi</label>
                    <div class="vertical-line"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="communication" id="stage-communication"><label for="stage-communication">Коммуникации</label>
                    <div class="vertical-line" style="background: transparent;"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="install" id="stage-install"><label for="stage-install">Установка сервера</label>
                    <div class="vertical-line" style="background: transparent;"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="ai" id="stage-ai"><label for="stage-ai">Тревоги</label>
                    <div class="vertical-line" style="background: transparent;"></div>
                    <input autocomplete="off" name="newStage" type="radio" value="cameras" id="stage-cameras"><label for="stage-cameras">Камеры</label>
                </section>
              </section>
              <section id="add-new-container" class="add-new">

                <section style="display: flex; width: 100%; height:100%; top: 0; left: 0;" class="dberror" id="parameters-bg" >
                  <div class="loader-container">
                    <div class="loader">
                      <div class="square" id="sq11"></div>
                      <div class="square" id="sq12"></div>
                      <div class="square" id="sq13"></div>
                      <div class="square" id="sq14"></div>
                      <div class="square" id="sq15"></div>
                      <div class="square" id="sq16"></div>
                      <div class="square" id="sq17"></div>
                      <div class="square" id="sq18"></div>
                      <div class="square" id="sq19"></div>
                    </div>
                  </div>
              </section>
          
          
          
                <div id="parameters" class="new-parameters active">
          
                  <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-timezone">Часовой пояс</label>
                      <select name="TIMEZ" id="system-timezone">
                        <option value="120A">(МСК-1) Калининград</option>
                        <option value="180C">(МСК) Москва</option>
                        <option value="240A">(МСК+1) Самара</option>
                        <option value="300A">(МСК+2) Екатеринбург</option>
                        <option value="360A">(МСК+3) Омск</option>
                        <option value="420A">(МСК+4) Красноярск</option>
                        <option value="480A">(МСК+5) Иркутск</option>
                        <option value="540A">(МСК+6) Якутск</option>
                        <option value="600A">(МСК+7) Владивосток</option>
                        <option value="660A">(МСК+8) Магадан</option>
                        <option value="720A">(МСК+9) Камчатка</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">ГЛОНАСС</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>
                  <input type="checkbox" id="DE" class="checkbox-input" hidden><label for="DE" class="checkbox-label"><div class="checkmark"></div>ID регистратора</label>
          
                  <div class="horizontal-line"></div>

                  <h2 style="margin-bottom: 15px;">Расположение элементов на трансляции</h2>

                  <div class="container">
                    <div class="box" style="width: 175px;" id="boxTime">Дата и время</div>
                    <div class="box" id="boxSpeed">Скорость</div>
                    <div class="box" id="boxNumber">Номер ТС</div>
                    <div class="box" style="width: 175px;" id="boxGPS">Координаты</div>
                    <div class="box" id="boxName">Название</div>
                    <div class="box" id="boxID">ID</div>
                  </div>

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

                  <div class="box-inputs">

                    <input type="number" id="posXboxTime" hidden>
                    <input type="number" id="posYboxTime" hidden>
                    <input type="number" id="posXboxSpeed" hidden>
                    <input type="number" id="posYboxSpeed" hidden>
                    <input type="number" id="posXboxNumber" hidden>
                    <input type="number" id="posYboxNumber" hidden>
                    <input type="number" id="posXboxGPS" hidden>
                    <input type="number" id="posYboxGPS" hidden>
                    <input type="number" id="posXboxName" hidden>
                    <input type="number" id="posYboxName" hidden>
                    <input type="number" id="posXboxID" hidden>
                    <input type="number" id="posYboxID" hidden>

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

              <div id="ethernet" class="new-parameters">
          
                <h1>Параметры сети</h1>
        
                <div class="horizontal-line"></div>
        
                <div class="parameters-inputs">
                    <label for="system-ipmode">Способ получения IP</label>
                    <select style="width: 100%;" name="IPMODE" id="system-ipmode">
                      <option value="1">Получить IP через DHCP</option>
                      <option value="0">Статический IP</option>
                  </select>
                  <div id="ipaddr" class="parameters-input">
                    <label for="system-ipaddr">IP-адрес</label>
                    <input name="IPADDR" type="text" id="system-ipaddr" placeholder="IP-адрес" required>
                  </div>
                  <div id="submask" class="parameters-input">
                    <label for="system-submask">Маска сети</label>
                    <input name="SUBMASK" type="text" id="system-submask" placeholder="Маска сети" required>
                  </div>
                <div id="gateway" class="parameters-input">
                    <label for="system-gateway">Шлюз сети</label>
                    <input name="GATEWAY" type="text" id="system-gateway" placeholder="Шлюз сети" required>
                </div>
                    <label for="system-dnsmode">Способ получения DNS</label>
                    <select style="width: 100%;" name="DNSMODE" id="system-dnsmode">
                      <option value="1">Автоматическое получение DNS</option>
                      <option value="0">Ручной выбор DNS</option>
                    </select>
                    <div id="pdns" class="parameters-input">
                      <label for="system-pdns">Предпочтительный DNS</label>
                      <input name="PDNS" type="text" id="system-pdns" placeholder="Предпочтительный DNS" required>
                    </div>
                    <div id="adns" class="parameters-input">
                      <label for="system-adns">Альтернативный DNS</label>
                      <input name="ADNS" type="text" id="system-adns" placeholder="Альтернативный DNS" required>
                    </div>
                      <label for="system-mac">MAC-адрес</label>
                      <input name="MAC" type="text" id="system-mac" placeholder="MAC-адрес" required>

        
                </div>
        
                
                <div class="horizontal-line"></div>
        
                <button onclick="sendPutRequest('ethernet');" type="button">Сохранить</button>
        
            </div>

            <div id="wifi" class="new-parameters">
          
              <h1>Параметры Wi-Fi</h1>
      
              <div class="horizontal-line"></div>
      
              <div class="parameters-inputs">
                  <select style="width: 100%;" name="WIFI" id="system-wifi">
                    <option value="1">Включен</option>
                    <option value="0">Выключен</option>
                </select>
                <div class="parameters-input">
                  <label for="system-wifi-essid">Название точки доступа</label>
                  <input name="WIFI-ESSID" type="text" id="system-wifi-essid" placeholder="Название точки доступа" required>
                </div>
                <div class="parameters-input">
                  <label for="system-wifi-ecrypttype">Шифрование сети</label>
                  <select style="width: 100%;" name="WIFI-ECRYPTTYPE" id="system-wifi-ecrypttype">
                  <option value="0">Нет</option>
                    <option value="1">WEP</option>
                    <option value="2">WPA / WPA2-PSK</option>
                    <option value="3">WPA2_Enterprise</option>
                  </select>
                </div>
              <div class="parameters-input">
                  <label for="system-wifi-pwd">Пароль сети</label>
                  <input name="WIFI-PWD" type="text" id="system-wifi-pwd" placeholder="Пароль сети" required>
              </div>
                  <label for="system-wifi-ipmode">Тип IP адреса</label>
                  <select style="width: 100%;" name="WIFI-IPMODE" id="system-wifi-ipmode">
                    <option value="1">Получение IP через DHCP</option>
                    <option value="0">Статический IP</option>
                  </select>
                  <div id="wifi-ipaddr" class="parameters-input">
                    <label for="system-wifi-ipaddr">IP адрес</label>
                    <input name="WIFI-IPADDR" type="text" id="system-wifi-ipaddr" placeholder="IP адрес" required>
                  </div>
                  <div id="wifi-submask" class="parameters-input">
                    <label for="system-wifi-submask">Маска сети</label>
                    <input name="WIFI-SUBMASK" type="text" id="system-wifi-submask" placeholder="Маска сети" required>
                  </div>
                  <div id="wifi-gateway" class="parameters-input">
                    <label for="system-wifi-gateway">Шлюз сети</label>
                    <input name="WIFI-GATEWAY" type="text" id="system-wifi-gateway" placeholder="Шлюз сети" required>
                  </div>

      
              </div>
      
              
              <div class="horizontal-line"></div>
      
              <button onclick="sendPutRequest('wifi');" type="button">Сохранить</button>
      
          </div>

          <div id="communication" class="new-parameters">
          
            <h1>Коммуникационный модуль</h1>
            <h2>Модуль 1</h2>
    
            <div class="horizontal-line"></div>
    
            <div class="parameters-inputs">
              <div class="parameters-input">
                <label for="system-nm1">Тип сети</label>
                  <select style="width: 100%;" name="NM1" id="system-nm1">
                    <option value="0">3G / 4G</option>
                    <option value="1">2G</option>
                    <option value="2">3G</option>
                    <option value="3">4G</option>
                  </select>
              </div>
              <div class="parameters-input">
                <label for="system-apn1">APN</label>
                <input name="APN1" type="text" id="system-apn1" placeholder="APN" required>
              </div>
            <div class="parameters-input">
                <label for="system-un1">Логин</label>
                <input name="UN1" type="text" id="system-un1" placeholder="Логин" required>
            </div>
            <div class="parameters-input">
              <label for="system-pw1">Пароль</label>
              <input name="PW1" type="text" id="system-pw1" placeholder="Пароль" required>
          </div>
        </div>

          <h2>Модуль 2</h2>

          <div class="parameters-inputs">
    
            <div class="horizontal-line"></div>
    
            <div class="parameters-inputs">
              <div class="parameters-input">
                <label for="system-nm2">Тип сети</label>
                  <select style="width: 100%;" name="NM2" id="system-nm2">
                    <option value="0">3G / 4G</option>
                    <option value="1">2G</option>
                    <option value="2">3G</option>
                    <option value="3">4G</option>
                  </select>
              </div>
              <div class="parameters-input">
                <label for="system-apn2">APN</label>
                <input name="APN2" type="text" id="system-apn2" placeholder="APN" required>
              </div>
            <div class="parameters-input">
                <label for="system-un2">Логин</label>
                <input name="UN2" type="text" id="system-un2" placeholder="Логин" required>
            </div>
            <div class="parameters-input">
              <label for="system-pw2">Пароль</label>
              <input name="PW2" type="text" id="system-pw2" placeholder="Пароль" required>
          </div>

        </div>

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

        <div class="parameters-inputs">

          <div class="parameters-input">
            <label for="system-at">Режим работы</label>
            <select name="AT" id="system-at">
                <option value="0">Без выключения</option>
                <option value="1">Включать по звонку/СМС</option>
                <option value="2">Включать по срабатыванию датчиков</option>
            </select>
        </div>
        <div class="parameters-input">
          <label for="system-tn1">Номер активации 1</label>
          <input name="TN1" type="text" id="system-tn1" placeholder="Номер активации 1" required>
      </div>
      <div class="parameters-input">
        <label for="system-tn2">Номер активации 2</label>
        <input name="TN2" type="text" id="system-tn2" placeholder="Номер активации 2" required>
    </div>
    <div class="parameters-input">
      <label for="system-tn3">Номер активации 3</label>
      <input name="TN3" type="text" id="system-tn3" placeholder="Номер активации 3" required>
  </div>

        </div>
          </div>

            
            <div class="horizontal-line"></div>
    
            <button onclick="sendPutRequest('communication');" type="button">Сохранить</button>
    
        </div>

        <div style="padding-bottom: 50%;" id="install" class="new-parameters">
          
          <h1>Подключенные серверы</h1>
  
          <div class="horizontal-line"></div>

          <div class="parameters-inputs" id="server-container">
  
          </div>

          <button onclick="sendPutRequest('install');" type="button">Сохранить</button>

          <button style="margin-right: 25px;" onclick="addServer()" type="button">Добавить сервер</button>
  
      </div>

      <div id="ai" class="new-parameters">
          
        <h1>Управления тревогами</h1>

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

        <div class="parameters-inputs">
          <label for="system-ai">Статус</label>
            <select autocomplete="off" style="width: 100%;" name="AI" id="system-ai">
              <option value="0">Физиологическая усталость</option>
              <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="9">Расстояние до машины слишком близко</option>
              <option value="10">Зевание</option>
              <option value="11">Столкновение с пешеходом</option>
          </select>
          <div class="parameters-input">
            <label for="system-ai-en1">Статус</label>
            <select name="AI-EN1" id="system-ai-en1">
              <option value="0">Выключено</option>
              <option value="1">Включено</option>
          </select>
        </div>
        <div class="parameters-input">
          <label for="system-ai-as1">Тип угрозы</label>
          <select name="AI-AS1" id="system-ai-as1">
            <option value="0">Событие</option>
            <option value="1">Предупреждение</option>
            <option value="2">Тревога</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="system-ai-ensp1">ENSP</label>
        <select name="AI-ENSP1" id="system-ai-ensp1">
          <option value="0">Выключено</option>
          <option value="1">Включено</option>
      </select>
    </div>
          <div class="parameters-input">
            <label for="system-ai-fgms1">Нижний диапозон скорости</label>
            <input name="AI-FGMS1" type="text" id="system-ai-fgms1" placeholder="0 - 50 км/ч" required>
          </div>
          <div class="parameters-input">
            <label for="system-ai-sgms1">Верхний диапозон скорости</label>
            <input name="AI-SGMS1" type="text" id="system-ai-sgms1" placeholder="0 - 50 км/ч" required>
          </div>
          <div class="parameters-input">
            <label for="system-ai-esst1">Чувствительность</label>
            <select name="AI-ESST1" id="system-ai-esst1">
              <option value="1">Низкая</option>
              <option value="2">Средняя</option>
              <option value="3">Высокая</option>
              <option value="4">Пользовательская</option>
          </select>
        </div>
        <div class="parameters-input">
            <label for="system-ai-udt1">Длительность распознования</label>
            <input name="AI-UDT1" type="text" id="system-ai-udt1" placeholder="0 - 60 секунд" required>
        </div>
        <div class="parameters-input">
          <label for="system-ai-vt1">Длительность</label>
          <input name="AI-VT1" type="text" id="system-ai-vt1" placeholder="0 - 600 секунд" required>
      </div>
      <div class="parameters-input">
        <label for="system-ai-sdt1">Эффективное время</label>
        <input name="AI-SDT1" type="text" id="system-ai-sdt1" placeholder="0 - 10 секунд" required>
      </div>
      <div class="parameters-input">
        <label for="system-ai-et1">Длительность тревоги</label>
        <input name="AI-ET1" type="text" id="system-ai-et1" placeholder="0 - 60 секунд" required>
      </div>
      <div class="parameters-input">
        <label for="system-ai-ss-en1">Снимки сразу после тревог</label>
        <select name="AI-SS-EN1" id="system-ai-ss-en1">
          <option value="0">Выключено</option>
          <option value="1">Включено</option>
      </select>
    </div>
    <div class="parameters-input">
      <label for="system-ai-ar-d1">Запись после тревоги</label>
      <input name="AI-ar-d1" type="text" id="system-ai-ar-d1" placeholder="0 - 60 секунд" required>
    </div>
        </div>

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

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

        <div class="parameters-inputs">
          <div class="parameters-input">
            <label for="system-ai-dsmfe">AI BOX</label>
            <select name="DSMFE" id="system-ai-dsmfe">
              <option value="0">Выключено</option>
              <option value="1">Включено</option>
          </select>
        </div>
        <div style="float: right;" class="parameters-input">
          <label for="system-ai-rwfe">R-Watch</label>
          <select name="RWFE" id="system-ai-rwfe">
            <option value="0">Выключено</option>
            <option value="1">Включено</option>
        </select>
      </div>
        </div>

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


        <button onclick="sendPutRequest('ai');" type="button">Сохранить</button>

    </div>

    <div id="cameras" class="new-parameters">
          
      <h1>Настройки камер</h1>
      <h2>Выберите нужную камеру и выставьте параметры</h2>

      <div class="horizontal-line"></div>
      <label autocomplete="off" style="width: 100%;" for="cameras-id">Номер камеры</label>
        <select style="width: 100%;" name="cameras-id" id="cameras-id">
          <option value="0">Камера 1</option>
          <option value="1">Камера 2</option>
          <option value="2">Камера 3</option>
          <option value="3">Камера 4</option>
          <option value="4">Камера 5</option>
          <option value="5">Камера 6</option>
          <option value="6">Камера 7</option>
          <option value="7">Камера 8</option>
          <option value="8">Камера 9</option>
          <option value="9">Камера 10</option>
          <option value="10">Камера 11</option>
          <option value="11">Камера 12</option>
          <option value="12">Камера 13</option>
          <option value="13">Камера 14</option>
          <option value="14">Камера 15</option>
          <option value="15">Камера 16</option>
        </select>

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


      <div class="parameters-inputs">


      <div class="parameters-input">
          <label for="cameras-quality">Качество видео</label>
          <select name="QLT" id="cameras-quality">
            <option value="1">1 (Наилучшее)</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="cameras-bitrate">Битрейт</label>
        <select name="BRM" id="cameras-bitrate">
            <option value="0">CBR</option>
            <option value="1">VBR</option>
        </select>
      </div>
      <div class="parameters-input">
          <label for="cameras-video">Разрешение видео</label>
          <select name="RST" id="cameras-video">
            <option value="0">CIF</option>
            <option value="1">HD1</option>
            <option value="2">D1</option>
            <option value="6">720P</option>
            <option value="7">1080P</option>
            <option value="11">WCIF</option>
            <option value="12">WHD1</option>
            <option value="13">WD1</option>
            <option value="14">960P</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="cameras-alert">Качество видео при предупреждении</label>
        <select name="ALT" id="cameras-alert">
          <option value="1">1 (Наилучшее)</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
      </select>
    </div>
      <div class="parameters-input">
        <label for="cameras-ven">Нужно ли видео</label>
        <select name="VEN" id="cameras-ven">
            <option value="0">Нет</option>
            <option value="1">Да</option>
        </select>
    </div>
    <div class="parameters-input">
      <label for="cameras-aen">Нужно ли аудио</label>
      <select name="AEN" id="cameras-aen">
          <option value="0">Нет</option>
          <option value="1">Да</option>
      </select>
  </div>

  <div class="parameters-input">
    <label for="cameras-framerate">Фреймрейт</label>
    <input name="FR" type="text" id="cameras-framerate" placeholder="От 1 до 25">
  </div>

  <div class="parameters-input">
    <label for="cameras-encode">Кодировка</label>
    <select name="ECT" id="cameras-encode">
      <option value="0">H264</option>
      <option value="1">H265</option>
  </select>
  </div>


      </div>

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


      <button onclick="sendPutRequest('cameras');" type="button">Сохранить</button>

  </div>

  <script>
    var bitrateField = document.getElementById('cameras-framerate');

    bitrateField.addEventListener('blur', function() {
    var currentValue = parseInt(bitrateField.value);

    if (isNaN(currentValue) || currentValue < 1) {
        bitrateField.value = 1;
    } else if (currentValue > 25) {
        bitrateField.value = 25;
    }
});

var minSpeedField = document.getElementById('system-ai-fgms1');

minSpeedField.addEventListener('blur', function() {
    var currentValue = parseInt(minSpeedField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      minSpeedField.value = 0;
    } else if (currentValue > 50) {
      minSpeedField.value = 50;
    }
});

var maxSpeedField = document.getElementById('system-ai-sgms1');

maxSpeedField.addEventListener('blur', function() {
    var currentValue = parseInt(maxSpeedField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      maxSpeedField.value = 0;
    } else if (currentValue > 50) {
      maxSpeedField.value = 50;
    }
});

var recogniseDurationField = document.getElementById('system-ai-udt1');

recogniseDurationField.addEventListener('blur', function() {
    var currentValue = parseInt(recogniseDurationField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      recogniseDurationField.value = 0;
    } else if (currentValue > 60) {
      recogniseDurationField.value = 60;
    }
});

var durationField = document.getElementById('system-ai-vt1');

durationField.addEventListener('blur', function() {
    var currentValue = parseInt(durationField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      durationField.value = 0;
    } else if (currentValue > 600) {
      durationField.value = 600;
    }
});

var effectiveTimeField = document.getElementById('system-ai-sdt1');

effectiveTimeField.addEventListener('blur', function() {
    var currentValue = parseInt(effectiveTimeField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      effectiveTimeField.value = 0;
    } else if (currentValue > 10) {
      effectiveTimeField.value = 10;
    }
});

var alarmDurationField = document.getElementById('system-ai-et1');

alarmDurationField.addEventListener('blur', function() {
    var currentValue = parseInt(alarmDurationField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      alarmDurationField.value = 0;
    } else if (currentValue > 60) {
      alarmDurationField.value = 60;
    }
});

var afterAlarmDurationField = document.getElementById('system-ai-ar-d1');

afterAlarmDurationField.addEventListener('blur', function() {
    var currentValue = parseInt(afterAlarmDurationField.value);

    if (isNaN(currentValue) || currentValue < 0) {
      afterAlarmDurationField.value = 0;
    } else if (currentValue > 60) {
      afterAlarmDurationField.value = 60;
    }
});
  </script>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
    const checkboxContainer = document.getElementById('checkboxContainer');
    const resultSpan = document.getElementById('result');

    for (let i = 1; i <= 16; i++) {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.className = 'checkbox-input';
        checkbox.hidden = true;
        checkbox.id = `camera${i}`;

        const label = document.createElement('label');
        label.htmlFor = `camera${i}`;
        label.className = 'checkbox-label';
        label.innerHTML = `<div class="checkmark"></div>${i} Камера`;


        checkboxContainer.appendChild(checkbox);
        checkboxContainer.appendChild(label);
    }
});

    </script>
          
          
                
          
              
          
              </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="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 src="../../../scripts/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
    <script src="../../../scripts/draggable.js"></script>

    <script>
      function addServer(data) {
    const serverCount = document.querySelectorAll('.server').length + 1;

    // Создаем блок полей ввода для нового сервера
    const serverContainer = document.getElementById('server-container');
    const serverDiv = document.createElement('div');
    serverDiv.classList.add('server');

    serverDiv.innerHTML = `
    <label for="system-EN${serverCount}">Статус</label>
      <select style="width: 100%;" name="EN${serverCount}" id="system-EN${serverCount}">
        <option value="0">Выключен</option>
        <option value="1">Включен</option>
      </select>
      <div class="parameters-input">
        <label for="system-CP${serverCount}">Протокол подключения</label>
        <select name="CP${serverCount}" id="system-CP${serverCount}">
          <option value="0">N9M</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="system-NWT${serverCount}">Используемая сеть</label>
        <select name="NWT${serverCount}" id="system-NWT${serverCount}">
          <option value="0">Локальная</option>
          <option value="1">Wi-Fi</option>
          <option value="2">Модуль 1</option>
          <option value="3">Модуль 2</option>
          <option value="4">Адаптивно</option>
        </select>
      </div>
      <div class="parameters-input">
        <label for="system-CS${serverCount}">Адрес сервера</label>
        <input name="CS${serverCount}" type="text" id="system-CS${serverCount}" placeholder="Адрес сервера" required>
      </div>
      <div class="parameters-input">
        <label for="system-MS${serverCount}">Адрес для медиасервиса</label>
        <input name="MS${serverCount}" type="text" id="system-MS${serverCount}" placeholder="Адрес для медиасервиса" required>
      </div>
      <div class="parameters-input">
        <label for="system-CPORT${serverCount}">TCP порт сервера</label>
        <input name="CPORT${serverCount}" type="text" id="system-CPORT${serverCount}" placeholder="TCP порт сервера" required>
      </div>
      <div class="parameters-input">
        <label for="system-MPORT${serverCount}">TCP порт медиасервиса</label>
        <input name="MPORT${serverCount}" type="text" id="system-MPORT${serverCount}" placeholder="TCP порт медиасервиса" required>
      </div>
      <div class="parameters-input">
        <label for="system-CUPORT${serverCount}">UDP порт сервера</label>
        <input name="CUPORT${serverCount}" type="text" id="system-CUPORT${serverCount}" placeholder="UDP порт сервера" required>
      </div>
      <div class="parameters-input">
        <label for="system-MUPORT${serverCount}">UDP порт медиасервиса</label>
        <input name="MUPORT${serverCount}" type="text" id="system-MUPORT${serverCount}" placeholder="UDP порт медиасервиса" required>
      </div>
      <div class="horizontal-line"></div>
      <button style="background: rgb(255, 69, 58); float: left;" onclick="removeServer(${serverCount})" type="button">Удалить</button>

    `;

    serverContainer.appendChild(serverDiv);

    if (data) {
      document.getElementById(`system-CP${serverCount}`).value = data.CP;
      document.getElementById(`system-CPORT${serverCount}`).value = data.CPORT;
      document.getElementById(`system-CS${serverCount}`).value = data.CS;
      document.getElementById(`system-CUPORT${serverCount}`).value = data.CUPORT;
      document.getElementById(`system-EN${serverCount}`).value = data.EN;
      document.getElementById(`system-MPORT${serverCount}`).value = data.MPORT;
      document.getElementById(`system-MS${serverCount}`).value = data.MS;
      document.getElementById(`system-MUPORT${serverCount}`).value = data.MUPORT;
      document.getElementById(`system-NWT${serverCount}`).value = data.NWT;
    }

    const csInput = document.getElementById(`system-CS${serverCount}`);
    const msInput = document.getElementById(`system-MS${serverCount}`);
    csInput.addEventListener('blur', () => {
      if (csInput.value && !msInput.value) {
        msInput.value = csInput.value;
      }
    });
  }

  function removeServer(serverCount) {
    const serverToRemove = document.getElementById(`system-EN${serverCount}`).closest('.server');
    serverToRemove.remove();
  }

  function clearServerContainer() {
    const serverContainer = document.getElementById('server-container');
    while (serverContainer.firstChild) {
      serverContainer.firstChild.remove();
    }
  }

  let serverData;

  function saveData() {
    const servers = document.querySelectorAll('.server');
    serverData = [];

    servers.forEach((server, index) => {
  const serverObj = {
    "CP": parseInt(document.getElementById(`system-CP${index + 1}`).value, 10),
    "CPORT": parseInt(document.getElementById(`system-CPORT${index + 1}`).value, 10),
    "CS": document.getElementById(`system-CS${index + 1}`).value,
    "CUPORT": parseInt(document.getElementById(`system-CUPORT${index + 1}`).value, 10),
    "EN": parseInt(document.getElementById(`system-EN${index + 1}`).value, 10),
    "LGK": 0,
    "MPORT": parseInt(document.getElementById(`system-MPORT${index + 1}`).value, 10),
    "MS": document.getElementById(`system-MS${index + 1}`).value,
    "MUPORT": parseInt(document.getElementById(`system-MUPORT${index + 1}`).value, 10),
    "NWT": parseInt(document.getElementById(`system-NWT${index + 1}`).value, 10),
  };

  serverData.push(serverObj);
});


  }
    </script>
    <script src="../../../scripts/parameters-form.js"></script> 
    <script>
      $(document).ready(function(){

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

      });
  </script>

  <script>
    function formatDate(date) {
  if (date === "") {
    date = new Date(); 
  } else {
    date = new Date(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}`;
}

function draggItems(item) {
  $('#posXboxID').val(item.DX);
  $('#posYboxID').val(item.DY);

  $('#posXboxGPS').val(item.GX);
  $('#posYboxGPS').val(item.GY);

  $('#posXboxName').val(item.NX);
  $('#posYboxName').val(item.NY);

  $('#posXboxSpeed').val(item.SX);
  $('#posYboxSpeed').val(item.SY);

  $('#posXboxTime').val(item.TX);
  $('#posYboxTime').val(item.TY);

  $('#posXboxNumber').val(item.VX);
  $('#posYboxNumber').val(item.VY);


  $("#boxTime").css({
    left: item.TX / 3,
    top: item.TY / 3
  });

  $("#boxSpeed").css({
    left: item.SX / 3,
    top: item.SY / 3 - 22
  });

  $("#boxNumber").css({
    left: item.VX / 3,
    top: item.VY / 3 - 44
  });

  $("#boxGPS").css({
    left: item.GX / 3,
    top: item.GY / 3 - 66
  });

  $("#boxName").css({
    left: item.NX / 3,
    top: item.NY / 3 - 88
  });

  $("#boxID").css({
    left: item.DX / 3,
    top: item.DY / 3 - 110
  });
}

const serial = "{{Serial}}";
const requestBody = {
            "serial": serial
          };



          document.getElementById('parameters-bg').style.display = 'flex';

          fetch('/device-parameters', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)
          })
          .then(response => response.json())
          .then(data => {

            document.getElementById('parameters-bg').style.display = 'none';

            camerasData = data;

            console.log(data.DATA);

            draggItems(data.DATA.EOSD[1])

            document.getElementById('system-date').value = data.DATA.TIMEP.DATEM;
            document.getElementById('system-time').value = data.DATA.TIMEP.TIMEM;
            document.getElementById('system-language').value = data.DATA.GSP.LANT;
            document.getElementById('system-timezone').value = data.DATA.TIMEP.TIMEZ;
            document.getElementById('system-geo').value = data.DATA.GSP.GM;
            document.getElementById('NE').checked = data.DATA.EOSD[0].NE === 1;
            document.getElementById('TE').checked = data.DATA.EOSD[0].TE === 1;
            document.getElementById('VE').checked = data.DATA.EOSD[0].VE === 1;
            document.getElementById('SE').checked = data.DATA.EOSD[0].SE === 1;
            document.getElementById('GE').checked = data.DATA.EOSD[0].GE === 1;
            document.getElementById('DE').checked = data.DATA.EOSD[0].DE === 1;
          })
          .catch(error => console.error('Ошибка:', error));

  </script>

  <script>
    async function sendPutRequest(type) {
      console.log(type);
      if (type === 'parameters') {

        const deleteConfirmation = document.getElementById("addInformation");
        const loader = document.getElementById("loader");
        const status = document.getElementById("status");
        const closeButton = document.getElementById("closeButton");
        const mark = document.getElementById("success-mark");

        loader.style.display = "block";
        closeButton.style.display = "none";
        deleteConfirmation.style.display = "flex";
        mark.style.display = "none";
      
      const DATEMOD = document.getElementById('system-date').value;
      const TIMEFORMAT = document.getElementById('system-time').value;
      const LANGUAGE = document.getElementById('system-language').value;
      const GEOMOD = document.getElementById('system-geo').value;
      const TIMEZ = document.getElementById('system-timezone').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 DE = document.getElementById('DE').checked ? 1 : 0;

      const TX = parseInt(document.getElementById('posXboxTime').value);
      const TY = parseInt(document.getElementById('posYboxTime').value);
      const SX = parseInt(document.getElementById('posXboxSpeed').value);
      const SY = parseInt(document.getElementById('posYboxSpeed').value);
      const VX = parseInt(document.getElementById('posXboxNumber').value);
      const VY = parseInt(document.getElementById('posYboxNumber').value);
      const GX = parseInt(document.getElementById('posXboxGPS').value);
      const GY = parseInt(document.getElementById('posYboxGPS').value);
      const NX = parseInt(document.getElementById('posXboxName').value);
      const NY = parseInt(document.getElementById('posYboxName').value);
      const DX = parseInt(document.getElementById('posXboxID').value);
      const DY = parseInt(document.getElementById('posYboxID').value);



      const requestData = {
        DATEMOD,
        TIMEFORMAT,
        LANGUAGE,
        GEOMOD,
        TIMEZ,
        NE,
        TE,
        VE,
        SE,
        GE,
        DE,
        TX,
        TY,
        SX,
        SY,
        VX,
        VY,
        GX,
        GY,
        NX,
        NY,
        DX,
        DY,
      };

      console.log(requestData);

      try {
        const response = await fetch(`/device-parameters?serial=${serial}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(requestData),
        });

        if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
      } catch (error) {
        showMessage("Не удалось обновить данные", false);
        console.error('Произошла ошибка при отправке PUT запроса:', error);
      }
    }

    if (type === 'ethernet') {

      const deleteConfirmation = document.getElementById("addInformation");
        const loader = document.getElementById("loader");
        const status = document.getElementById("status");
        const closeButton = document.getElementById("closeButton");
        const mark = document.getElementById("success-mark");

        loader.style.display = "block";
        closeButton.style.display = "none";
        deleteConfirmation.style.display = "flex";
        mark.style.display = "none";
      
      const IPMODE = document.getElementById('system-ipmode').value;
      const IPADDR = document.getElementById('system-ipaddr').value;
      const SUBMASK = document.getElementById('system-submask').value;
      const GATEWAY = document.getElementById('system-gateway').value;
      const DNSMODE = document.getElementById('system-dnsmode').value;
      const PDNS = document.getElementById('system-pdns').value;
      const ADNS = document.getElementById('system-adns').value;
      const MAC = document.getElementById('system-mac').value;


      const requestData = {
        IPMODE,
        IPADDR,
        SUBMASK,
        GATEWAY,
        DNSMODE,
        PDNS,
        ADNS,
        MAC,
      };

      try {
        const response = await fetch(`/ethernet-parameters?serial=${serial}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(requestData),
        });

        if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
      } catch (error) {
        showMessage("Не удалось обновить данные", false);
        console.error('Произошла ошибка при отправке PUT запроса:', error);
      }
    }

    if (type === 'wifi') {

    const deleteConfirmation = document.getElementById("addInformation");
    const loader = document.getElementById("loader");
    const status = document.getElementById("status");
    const closeButton = document.getElementById("closeButton");
    const mark = document.getElementById("success-mark");

    loader.style.display = "block";
    closeButton.style.display = "none";
    deleteConfirmation.style.display = "flex";
    mark.style.display = "none";

  const WIFI = document.getElementById('system-wifi').value;
  const ESSID = document.getElementById('system-wifi-essid').value;
  const ECRYPTTYPE = document.getElementById('system-wifi-ecrypttype').value;
  const PWD = document.getElementById('system-wifi-pwd').value;
  const IPMODE = document.getElementById('system-wifi-ipmode').value;
  const IPADDR = document.getElementById('system-wifi-ipaddr').value;
  const SUBMASK = document.getElementById('system-wifi-submask').value;
  const GATEWAY = document.getElementById('system-wifi-gateway').value;


  const requestData = {
    WIFI,
    ESSID,
    ECRYPTTYPE,
    PWD,
    IPMODE,
    IPADDR,
    SUBMASK,
    GATEWAY,
  };

  try {
    const response = await fetch(`/wifi-parameters?serial=${serial}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestData),
    });

if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
  } catch (error) {
    showMessage("Не удалось обновить данные", false);
    console.error('Произошла ошибка при отправке PUT запроса:', error);
  }
  }

  if (type === 'communication') {

  const deleteConfirmation = document.getElementById("addInformation");
  const loader = document.getElementById("loader");
  const status = document.getElementById("status");
  const closeButton = document.getElementById("closeButton");
  const mark = document.getElementById("success-mark");

  loader.style.display = "block";
  closeButton.style.display = "none";
  deleteConfirmation.style.display = "flex";
  mark.style.display = "none";

  const NM1 = document.getElementById('system-nm1').value;
  const APN1 = document.getElementById('system-apn1').value;
  const UN1 = document.getElementById('system-un1').value;
  const PW1 = document.getElementById('system-pw1').value;
  const NM2 = document.getElementById('system-nm2').value;
  const APN2 = document.getElementById('system-apn2').value;
  const UN2 = document.getElementById('system-un2').value;
  const PW2 = document.getElementById('system-pw2').value;

  const AT = document.getElementById('system-at').value;
  const TN1 = document.getElementById('system-tn1').value;
  const TN2 = document.getElementById('system-tn2').value;
  const TN3 = document.getElementById('system-tn3').value;


  const requestData = {
  NM1,
  APN1,
  UN1,
  PW1,
  NM2,
  APN2,
  UN2,
  PW2,
  AT,
  TN1,
  TN2,
  TN3,
  };

  try {
  const response = await fetch(`/communication-parameters?serial=${serial}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestData),
  });

  if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
  } catch (error) {
  showMessage("Не удалось обновить данные", false);
  console.error('Произошла ошибка при отправке PUT запроса:', error);
  }
  }

  if (type === 'install') {

      var serverContainer = document.getElementById('server-container');

      var servers = serverContainer.getElementsByClassName('server');

      var serverNumbersArray = Array.from({ length: servers.length }, (_, index) => index + 1);

      const M = encodeCHValue(serverNumbersArray);

  const deleteConfirmation = document.getElementById("addInformation");
  const loader = document.getElementById("loader");
  const status = document.getElementById("status");
  const closeButton = document.getElementById("closeButton");
  const mark = document.getElementById("success-mark");

  loader.style.display = "block";
  closeButton.style.display = "none";
  deleteConfirmation.style.display = "flex";
  mark.style.display = "none";

  saveData();

  const SP = serverData;

  const requestData = {
    SP,
    M
  };

  console.log(requestData);

  try {
  const response = await fetch(`/install-parameters?serial=${serial}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestData),
  });

  if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
  } catch (error) {
  showMessage("Не удалось обновить данные", false);
  console.error('Произошла ошибка при отправке PUT запроса:', error);
  }
} 
if (type === 'ai') {

const deleteConfirmation = document.getElementById("addInformation");
const loader = document.getElementById("loader");
const status = document.getElementById("status");
const closeButton = document.getElementById("closeButton");
const mark = document.getElementById("success-mark");

loader.style.display = "block";
closeButton.style.display = "none";
deleteConfirmation.style.display = "flex";
mark.style.display = "none";

updateDataInArray();

const DSMA = givenData;
console.log(DSMA);

const DSMFE = parseInt(document.getElementById('system-ai-dsmfe').value);
const RWFE = parseInt(document.getElementById('system-ai-rwfe').value);



const requestData = {
  DSMA,
  DSMFE,
  RWFE
};

try {
const response = await fetch(`/ai-parameters?serial=${serial}`, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestData),
});

if (response.ok) {
  var formContainer = $("#form-bg");
  var form = $("#form");
  formContainer.removeClass("active");
  form.removeClass("form-animation");
  $("body").css("overflow", "auto");
  showMessage("Данные успешно обновлены", true);
  console.log('PUT запрос выполнен успешно');
} else if (response.status === 400) {
  showMessage("Устройство выключено.", false);
  console.error('Устройство выключено');
} else {
  showMessage("Не удалось обновить данные", false);
  console.error('Ошибка при выполнении PUT запроса');
}
} catch (error) {
showMessage("Не удалось обновить данные", false);
console.error('Произошла ошибка при отправке PUT запроса:', error);
}
}

if (type === 'cameras') {

const deleteConfirmation = document.getElementById("addInformation");
const loader = document.getElementById("loader");
const status = document.getElementById("status");
const closeButton = document.getElementById("closeButton");
const mark = document.getElementById("success-mark");

loader.style.display = "block";
closeButton.style.display = "none";
deleteConfirmation.style.display = "flex";
mark.style.display = "none";

updateCamerasInArray();

const MAIN = camerasData;
console.log(MAIN);

const requestData = {
  MAIN
};

try {
const response = await fetch(`/cameras-parameters?serial=${serial}`, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestData),
});

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


<script>

$(document).ready(function() {
      if ($('#system-ipmode').val() === "1") {
        $('#ipaddr').hide();
        $('#submask').hide();
        $('#gateway').hide();
      } else {
        $('#ipaddr').show();
        $('#submask').show();
        $('#gateway').show();
      }

      if ($('#system-dnsmode').val() === "1") {
        $('#pdns').hide();
        $('#adns').hide();
      } else {
        $('#pdns').show();
        $('#adns').show();
      }

      if ($('#system-wifi-ipmode').val() === "1") {
        $('#wifi-ipaddr').hide();
        $('#wifi-submask').hide();
        $('#wifi-gateway').hide();
      } else {
        $('#wifi-ipaddr').show();
        $('#wifi-submask').show();
        $('#wifi-gateway').show();
      }
    });

    $(document).on("input", "select", async function () {
    if ($('#system-ipmode').val() === "1") {
        $('#ipaddr').hide();
        $('#submask').hide();
        $('#gateway').hide();
      } else {
        $('#ipaddr').show();
        $('#submask').show();
        $('#gateway').show();
      }

      if ($('#system-dnsmode').val() === "1") {
        $('#pdns').hide();
        $('#adns').hide();
      } else {
        $('#pdns').show();
        $('#adns').show();
      }

      if ($('#system-wifi-ipmode').val() === "1") {
        $('#wifi-ipaddr').hide();
        $('#wifi-submask').hide();
        $('#wifi-gateway').hide();
      } else {
        $('#wifi-ipaddr').show();
        $('#wifi-submask').show();
        $('#wifi-gateway').show();
      }
  });
  
</script>

  

    <script>
        function hideMessage() {
          setTimeout(function() {
              location.reload();
              const deleteConfirmation = document.getElementById("addInformation");
              deleteConfirmation.style.display = "none";
          }, 500);
        
    }

    function showMessage(messageText, isSuccess) {
        const loader = document.getElementById("loader");
        const status = document.getElementById("status");
        const closeButton = document.getElementById("closeButton");
        const mark = document.getElementById("success-mark");

        loader.style.display = "none";
        status.textContent = messageText;
        if (isSuccess) {
            mark.style.display = "block";
            status.style.color = "green"; 
        } else {
            status.style.color = "red"; 
        }
        closeButton.style.display = "block";
    }
    </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>

      
    
</body>
</html>