<!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>{{Name}} {{Surname}}</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><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>
        <a class="admin-panel" href="/admin">
          <div class="selected"><img src="../../img/keyboard.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}}

      <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>{{Name}} {{Surname}} <span class="user-id">ID {{Id}}</span></span>
        </div>
        <nav>
          <a class="return-name" href="/admin">
            <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>
        </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 checkbox-name"><span class="text">{{name}}</span></label>
                            <ul class="area-devices" id="devices-1">
                              {{#each serials}}
                              {{#if this.checked}}
                              <li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden checked><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>
                                {{#if (lookup ../numbers @index)}}
                                              {{lookup ../numbers @index}}
                                          {{else}}
                                              {{this.serial}}
                                          {{/if}}
                              </label></li>
                              {{else}}
                              <li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>
                                {{#if (lookup ../numbers @index)}}
                                              {{lookup ../numbers @index}}
                                          {{else}}
                                              {{this.serial}}
                                          {{/if}}
                              </label></li>
                              {{/if}}
                                  {{/each}}
                            </ul>
                          </li>
                          {{/each}}
                          </ul>
                          
                    </section>

                    <section class="whole-width">
                      <h1>Данные пользователя</h1>
                      <h3>Кнопка "Обновить" также распространяется на доступ к устройствам.</h3>
                      <form id="edit-user-form">
                        <div class="parameters-input">
                          <label for="user-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                          <input name="name" type="text" id="user-name" placeholder="Имя пользователя" value="{{Name}}" required>
                        </div>
                        <div class="parameters-input">
                          <label for="user-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                          <input name="surname" type="text" id="user-surname" placeholder="Фамилия пользователя" value="{{Surname}}" required>
                        </div>
                        <div class="parameters-input">
                          <label for="user-email">Email<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                          <input name="email" type="text" id="user-email" placeholder="Email пользователя" value="{{Email}}" required>
                        </div>
                        <div class="parameters-input">
                          <label for="user-phone">Номер телефона<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                          <input name="phone" type="text" id="user-phone" placeholder="Номер телефона пользователя" value="{{Phone}}" required>
                        </div>
                        <div class="parameters-input">
                          <label for="user-password">Новый пароль (необязательно)</label>
                          <input name="password" type="text" id="user-password" placeholder="Новый пароль пользователя" required>
                        </div>

                      </form>

                        <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>

                        <h1>Права пользователя</h1>

                        <section class="permissions">

                        <div class="permission-group">
                          <h2>Устройства</h2>
                          {{#if EditTransport}}
                          <img><input name="EditTransport" type="checkbox" id="device-edit" class="checkbox-input device-filter" hidden checked><label for="device-edit" class="checkbox-label"><div class="checkmark"></div>Изменять</label>
                          {{else}}
                          <img><input name="EditTransport" type="checkbox" id="device-edit" class="checkbox-input device-filter" hidden><label for="device-edit" class="checkbox-label"><div class="checkmark"></div>Изменять</label>
                          {{/if}}
                          {{#if DeleteTransport}}
                          <img><input name="DeleteTransport" type="checkbox" id="device-delete" class="checkbox-input device-filter" hidden checked><label for="device-delete" class="checkbox-label"><div class="checkmark"></div>Удалять</label>
                          {{else}}
                          <img><input name="DeleteTransport" type="checkbox" id="device-delete" class="checkbox-input device-filter" hidden><label for="device-delete" class="checkbox-label"><div class="checkmark"></div>Удалять</label>
                          {{/if}}
                        </div>

                        <div class="permission-group">
                          <h2>Обновление ПО</h2>
                          {{#if Update}}
                          <img><input name="Update" type="checkbox" id="update-do" class="checkbox-input device-filter" hidden checked><label for="update-do" class="checkbox-label"><div class="checkmark"></div>Обновлять</label>
                          {{else}}
                          <img><input name="Update" type="checkbox" id="update-do" class="checkbox-input device-filter" hidden><label for="update-do" class="checkbox-label"><div class="checkmark"></div>Обновлять</label>
                          {{/if}}
                        </div>

                      </section>

                        <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>
                
                        <button style="margin-top: 15px;" id="user-edit" class="button-purple" type="button">Обновить</button>
                      
                      
                      
                    </section>

                

                    
                      
                      

                </section>

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

    <style>
      .whole-width {
        display: inline-block;
        width: calc(100% - 275px);
        float: right;
      }
    </style>

    <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(){

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

      });
  </script>

<script>

  document.addEventListener('DOMContentLoaded', function () {
          var containers = document.querySelectorAll('.checkbox-name');
  
          containers.forEach(function (container) {
              var text = container.querySelector('.text');
  
              if (text.clientWidth > container.clientWidth) {
                  text.classList.add('animated');
              }
          });
      });
  
    </script>

    <script>
      document.getElementById('user-edit').addEventListener('click', function() {

        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 deviceInputs = document.querySelectorAll('.device-serial:checked');
            const devices = Array.from(deviceInputs).map(input => input.value);

            const formData = {
                name: document.getElementById('user-name').value,
                surname: document.getElementById('user-surname').value,
                email: document.getElementById('user-email').value,
                phone: document.getElementById('user-phone').value,
                password: document.getElementById('user-password').value,
                EditTransport: document.getElementById('device-edit').checked,
                DeleteTransport: document.getElementById('device-delete').checked,
                Update: document.getElementById('update-do').checked,
            };

            // Объединяем все данные в один объект
            const jsonData = {
                devices,
                formData
            };
            

            fetch('/updateuser/{{Id}}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(jsonData)
            })
            .then(response => {
                if (response.ok) {
                    showMessage("Данные успешно обновлены", true);
                } else {
                    showMessage("Не удалось обновить данные", false);
                    console.error("Ошибка:", error);
                }
            })
            .catch(error => {
                console.error('Произошла ошибка:', error);
            });
        });

        function hideMessage() {
      location.reload();
        const deleteConfirmation = document.getElementById("addInformation");
        deleteConfirmation.style.display = "none";
    }

    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>

      <script>
        const checkboxes = document.querySelectorAll('.organisation .checkbox-input');

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', function() {
    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;
      });
    } else {
      devices.style.display = 'none';

      // Деактивируем дочерние чекбоксы
      const childCheckboxes = devices.querySelectorAll('.device-filter');
      childCheckboxes.forEach((childCheckbox) => {
        childCheckbox.checked = false;
      });
    }

    // Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
    if (!this.checked) {
      const childCheckboxes = devices.querySelectorAll('.device-filter');
      childCheckboxes.forEach((childCheckbox) => {
        childCheckbox.checked = false;
      });
      devices.style.display = 'none';
    }
  });
});

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