<!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="/">
            <div><img src="../img/play.svg">Записи</div>
        </a>
        <a class="settings" href="/">
            <div><img src="../img/gear.svg">Настройки</div>
        </a>
    </section>

    <section class="main">
        <div class="name">
            <span>Устройства</span>
        </div>
        <nav>
            <a href="/devices">Список устройств</a>
            <a href="/devices/drivers">Водители</a>
            <a class="selected" 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-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>
                </section>
              </section>
              <section id="add-new-container" class="add-new">

                <form>

                <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="blue">Синий</option>
                            <option value="yellow">Жёлтый</option>
                            <option value="white">Белый</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>
                    </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">Внешнее описание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                        <input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание " required>

                    </div>

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

                    <button>Сохранить</button>

                </div>

                </form>

              </section>



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

    <script src="../scripts/jquery.min.js"></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>

        $("#continue-details").click(function () {
            document.getElementById("stage-sim").checked = true;
        });
        $("#continue-sim").click(function () {
            document.getElementById("stage-ts").checked = true;
        });
        $("#continue-ts").click(function () {
            document.getElementById("stage-equipment").checked = true;
        });
        
      </script>

      <script>
        const container = document.getElementById('new-parameters');
        const content1 = document.getElementById('details');
        const content2 = document.getElementById('sim');
        const content3 = document.getElementById('ts');
        const content4 = document.getElementById('equipment');
        const btn1 = document.getElementById('continue-details');
        const btn2 = document.getElementById('continue-sim');
        const btn3 = document.getElementById('continue-ts');
        const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
        const duration = 100;

        let activeContent = content1;

        function switchContent(newContent) {
        fadeOut(activeContent, () => {
            fadeIn(newContent);
            activeContent = newContent;
        });
        }

        function fadeIn(element) {
        element.style.opacity = 0;
        element.style.display = 'block';
        let start = performance.now();

        function animate(time) {
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) {
            element.style.opacity = 1;
            } else {
            element.style.opacity = timeFraction;
            requestAnimationFrame(animate);
            }
        }

        requestAnimationFrame(animate);
        }

        function fadeOut(element, callback) {
        element.style.opacity = 1;
        let start = performance.now();

        function animate(time) {
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) {
            element.style.opacity = 0;
            element.style.display = 'none';
            if (callback) {
                callback();
            }
            } else {
            element.style.opacity = 1 - timeFraction;
            requestAnimationFrame(animate);
            }
        }

        requestAnimationFrame(animate);
        }

        btn1.addEventListener('click', () => {
        if (activeContent === content1) {
            switchContent(content2);
        } else {
            switchContent(content1);
        }
        });

        btn2.addEventListener('click', () => {
        if (activeContent === content2) {
            switchContent(content3);
        } else {
            switchContent(content2);
        }
        });

        btn3.addEventListener('click', () => {
        if (activeContent === content3) {
            switchContent(content4);
        } else {
            switchContent(content3);
        }
        });

        for (let radioButton of radioButtons) {
        radioButton.addEventListener('change', () => {
            if (radioButton.value === 'details') {
            switchContent(content1);
            } else if (radioButton.value === 'sim') {
            switchContent(content2);
            } else if (radioButton.value === 'ts') {
            switchContent(content3);
            } else if (radioButton.value === 'equipment') {
            switchContent(content4);
            }
        });
        }

      </script>

<script>
    function truncateText(select) {
  var maxLength = 30;
  var option = select.options[select.selectedIndex];
  if (option.text.length > maxLength) {
    option.text = option.text.substring(0, maxLength) + '...';
  }
}

    </script>

    

    
</body>
</html>