<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../styles/main.css">
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/helpPopup.js"></script>
    <title>Управление пользователями</title>
    <script>
      const API_SERVER = "{{API_SERVER}}";
      let users = [
              {{#each People}}
              {
              id: {{this.id}},
              name: "{{this.Имя}}",
              surname: "{{this.Фамилия}}",
              secondname: "{{this.Отчество}}",
              role: "{{this.Должность}}",
              sub: "{{this.Субподряд}}",
              department: "{{this.Цех}}",
              email: "{{this.Email}}",
              phone: "{{this.Телефон}}",
              isblocked: "{{this.Черный_список}}",
              },
              {{/each}}
          ];
      let legals = [
              {{#each Legals}}
              {
              id: {{this.id}},
              name: "{{this.Наименование}}",
              inn: "{{this.ИНН}}",
              ogrn: "{{this.ОГРН}}",
              address: "{{this.Юридический_адрес}}",
              realaddress: "{{this.Фактический_адрес}}",
              email: "{{this.Email}}",
              },
              {{/each}}
          ];
    </script>
    <script src="../scripts/users-table.js"></script>
</head>
<body>
    <header>
      <a href="/account"><h1>Система управления пользователями</h1></a>
      <nav>
            <div class="dropdown">
                <a class="help-button" onclick="toggleDropdown('dropdownHelp-1')">Техническая поддержка</a>               
                <div id="dropdownHelp-1" class="dropdown-help">
                    <a href="tel:83477527706">8 (34775) 2-77-06</a>
                    <a href="tel:89174023516">8 (917) 402-35-16</a>
                </div>
              </div>
            <div class="dropdown">
                <a class="help-button" onclick="toggleDropdown('dropdownHelp-2')">Инструкции</a>               
                <div id="dropdownHelp-2" class="dropdown-help dropdown-manual">
                    <a href="/docs/manual.pdf" target="_blank">Текст</a>
                    <a href="https://drive.google.com/file/d/1CxrAgr2brQclZqtbbreSUU9tN-jsNTwf/view?usp=sharing" target="_blank">Видео</a>
                </div>
              </div>
            <a href="/account">Профиль</a>
            {{#if (eq Role 'legal')}}
            <span>{{User.Наименование}}</span>
            {{else}}
            <span>{{User.Фамилия}} {{User.Имя}} {{User.Отчество}}</span>
            {{/if}}
            <a class="exit-button" href="/logout"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none" viewBox="0 0 20 16">
                <path fill="#6B7A99" d="m4.016 7.13 2.608-2.606-1.226-1.226L.696 8l4.702 4.702 1.226-1.226L4.016 8.87h4.858V7.131H4.016ZM8.874.179v6.953h5.215V8.87H8.874v6.953h10.43V.178H8.873Z"/>
              </svg>
              </a>
        </nav>
    </header>

    <nav class="underheader-buttons">
        <button id="addUser" class="blue">Создать пользователя</button>
        <button id="switchButton" onclick="switchTables();">Юридические лица</button>
        <input id="table-search" type="text" placeholder="Поиск...">
        <button onclick="requestUpdate();">Найти</button>
        <button onclick="requestUpdate();"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" viewBox="0 0 16 20">
          <path fill="#6B7A99" d="M8 4V0L3 5l5 5V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H0c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8Z"/>
        </svg>        
        </button>
    </nav>

    <div id="usersWrapper" class="table-wrapper">
      <table id="usersTable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Фамилия</th>
            <th>Имя</th>
            <th>Отчество</th>
            <th>Должность</th>
            <th>Номер телефона</th>
            <th>Email</th>
            <th>Субподряд</th>
            <th>Цех</th>
          </tr>
        </thead>
        <tbody>
          <!-- Сюда будут добавляться строки таблицы -->
        </tbody>
      </table>
    </div>

    <div style="display: none;" id="legalsWrapper" class="table-wrapper">
      <table id="legalsTable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Наименование</th>
            <th>ИНН</th>
            <th>ОГРН</th>
            <th>Юридический адрес</th>
            <th>Фактический адрес</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <!-- Сюда будут добавляться строки таблицы -->
        </tbody>
      </table>
    </div>

    <div id="pagination">
      <div id="left-slider" onclick="decrementPage()">
        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19">
          <path fill="#000" fill-opacity=".75" d="M0 9.495c0 .273.101.514.315.722l8.92 8.477a.981.981 0 0 0 .73.295c.585 0 1.035-.427 1.035-.995 0-.285-.124-.525-.304-.711L2.508 9.495l8.188-7.789c.18-.186.304-.437.304-.71C11 .425 10.55 0 9.965 0c-.292 0-.54.098-.73.284L.314 8.773A.955.955 0 0 0 0 9.495Z"/>
        </svg>
      </div>
      <div id="page-number">1</div>
      <div id="right-slider" onclick="incrementPage()">
        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19">
          <path fill="#000" fill-opacity=".75" d="M11 9.495a.967.967 0 0 0-.326-.722L1.766.284A1.062 1.062 0 0 0 1.024 0C.45 0 0 .427 0 .995c0 .274.112.525.292.711l8.189 7.789-8.189 7.788c-.18.186-.292.426-.292.71 0 .57.45.996 1.024.996.292 0 .54-.098.742-.295l8.908-8.477c.213-.208.326-.449.326-.722Z"/>
        </svg>
      </div>
      </div>

      <form id="newUserForm">
        <div id="adduser-form-popup-bg" class="form-popup-bg not-main" >
          <div class="form-container">
              <div id="btnCloseForm" class="close-button"><svg onclick="closeForm();" id="btnCloseFormSvg" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
                <path fill="#0050CF" fill-rule="evenodd" d="M14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41Z" clip-rule="evenodd"/>
              </svg>
              </div>
              <h1>Новый пользователь</h1>
              <br>

              <div class="input-area">
                <select name="user-type" id="newUserType">
                  <option value="guest">Физическое лицо</option>
                  <option value="legal">Юридическое лицо</option>
                </select>
              </div>
    
              <div class="inputs" id="person-inputs">
                <div class="input-area">
                    <label for="surname-input">Фамилия*</label>
                    <input type="text" id="surname-input">
                </div>
                <div class="input-area">
                    <label for="firstname-input">Имя*</label>
                    <input type="text" id="firstname-input">
                </div>
                <div class="input-area">
                    <label for="secondname-input">Отчество (при наличии)</label>
                    <input type="text" id="secondname-input">
                </div>
                <div class="input-area">
                    <label for="born-input">Дата рождения*</label>
                    <input type="date" id="born-input">
                </div>
                <div class="input-area">
                    <label for="phone-input">Номер телефона</label>
                    <input type="text" id="phone-input">
                </div>
            </div>
    
            <div style="display: none;" class="inputs" id="legal-inputs">
                <div class="input-area">
                    <label for="name-input">Наименование организации*</label>
                    <input type="text" id="name-input">
                </div>
                <div class="input-area">
                    <label for="inn-input">ИНН*</label>
                    <input maxlength="10" type="text" id="inn-input">
                </div>
                <div class="input-area">
                    <label for="ogrn-input">ОГРН*</label>
                    <input maxlength="13" type="text" id="ogrn-input">
                </div>
                <div class="input-area">
                    <label for="legaladdress-input">Юридический адрес*</label>
                    <input type="text" id="legaladdress-input">
                </div>
                <div class="input-area">
                    <label for="address-input">Фактический адрес*</label>
                    <input type="text" id="address-input">
                </div>
                <div class="input-area">
                    <label for="contact-input">Имя контактного лица</label>
                    <input type="text" id="contact-input">
                </div>
                <div class="input-area">
                    <label for="contactphone-input">Номер телефона контактного лица</label>
                    <input type="text" id="contactphone-input">
                </div>
            </div>
            <div class="input-area">
                <label for="email-input">Email*</label>
                <input type="text" id="email-input" required>
            </div>
            <div class="input-area">
                <label for="password-input">Пароль*</label>
                <input type="text" id="password-input" new-password required>
            </div>
            <div class="form-info">
                <p>Длина пароля должна быть не менее 8 символов.
                    Пароль должен состоять из букв латинского алфавита (A-z),
                    арабских цифр (0-9) и специальных символов ((пробел)!"#$%&amp;()*+,-./:;&lt;=&gt;?@[\]^`{|}~)</p>
            </div>
    
              <button type="submit" id="addUser-button">Добавить пользователя</button>
          </div>
      </div>
      </form>

      <form id="editUserForm">
        <input type="text" id="edituserid-input" hidden>
        <div id="edituser-form-popup-bg" class="form-popup-bg not-main" >
          <div class="blocked-alarm" style="display: none;" id="alarmBlocked">
            <svg xmlns="http://www.w3.org/2000/svg" width="55" height="50" fill="none" viewBox="0 0 55 50">
              <path fill="red" fill-opacity=".85" d="M7.143 49.712h40.554c4.448 0 7.143-3.087 7.143-7.09 0-1.23-.366-2.512-1.02-3.663L33.516 3.585C32.156 1.204 29.827 0 27.42 0s-4.762 1.204-6.096 3.585L1.02 38.959A7.065 7.065 0 0 0 0 42.622c0 4.003 2.695 7.09 7.143 7.09Zm.026-4.108c-1.831 0-2.93-1.413-2.93-3.008 0-.498.104-1.126.392-1.675L24.908 5.573c.55-.968 1.544-1.387 2.512-1.387s1.936.419 2.486 1.387l20.277 35.374c.288.55.419 1.151.419 1.648 0 1.596-1.151 3.01-2.957 3.01H7.17Z"/>
              <path fill="red" fill-opacity=".85" d="M27.42 32.077c1.256 0 1.989-.732 2.015-2.093l.366-13.788c.026-1.335-1.02-2.329-2.407-2.329-1.413 0-2.407.968-2.381 2.302l.34 13.815c.026 1.335.759 2.093 2.067 2.093Zm0 8.504c1.518 0 2.826-1.204 2.826-2.721 0-1.544-1.282-2.721-2.826-2.721s-2.826 1.203-2.826 2.72c0 1.492 1.309 2.722 2.826 2.722Z"/>
            </svg>
            <h1>Внимание! Пользователь в черном списке.</h1>          
          </div>
          <div class="form-container">
              <div id="btnCloseForm" class="close-button"><svg onclick="closeForm();" id="btnCloseFormSvg" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
                <path fill="#0050CF" fill-rule="evenodd" d="M14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41Z" clip-rule="evenodd"/>
              </svg>
              </div>
              <h1>Пользователь <span id="editFIO"></span></h1>
              <br>
    
              <h2>ФИО</h2>
                <div class="three-inputs">
                      <input type="text" id="editsurname-input" placeholder="Фамилия">
                      <input type="text" id="editfirstname-input" placeholder="Имя">
                      <input type="text" id="editsecondname-input" placeholder="Отчество">
              </div>

              <div class="input-area">
                <label for="editoldsurname-input">Старая фамилия</label>
                <input type="text" id="editoldsurname-input">
            </div>
            
              <div class="input-area">
                <label for="editborn-input">Дата рождения*</label>
                <input type="date" id="editborn-input">
            </div>
            <div class="input-area">
                <label for="editphone-input">Номер телефона</label>
                <input type="text" id="editphone-input" >
            </div>
            <div class="input-area">
                <label for="editbornplace-input">Место рождения</label>
                <input type="text" id="editbornplace-input" >
            </div>
            <div class="input-area">
                <label for="editpassport-input">Серия и номер паспорта</label>
                <input type="text" id="editpassport-input" >
            </div>
            <div class="input-area">
                <label for="editcitizenship-input">Гражданство</label>
                <input type="text" id="editcitizenship-input" >
            </div>
            <div class="input-area">
                <label for="editregaddress-input">Место регистрации</label>
                <input type="text" id="editregaddress-input" >
            </div>
            <div class="input-area">
                <label for="editrealaddress-input">Место жительства</label>
                <input type="text" id="editrealaddress-input" >
            </div>
            <div class="input-area">
                <label for="editdms-input">Полис ДМС</label>
                <input type="text" id="editdms-input" >
            </div>
            <div class="input-area">
              <label for="edittabel-input">Табельный номер</label>
              <input type="text" id="edittabel-input" >
          </div>
            <div class="input-area">
              <label for="user-blocked">Чёрный список</label>
              <select name="user-blocked" id="isUserBlocked">
                <option value="false">Нет</option>
                <option value="true">Да</option>
              </select>
            </div>
            <div class="input-area">
                <label for="editpassword-input">Новый пароль (Опционально)</label>
                <input type="password" id="editpassword-input" new-password>
            </div>

            <div class="worker-inputs" id="workersInputs">

              <h2>Информация о работнике</h2>
              <div class="two-inputs">
                <input type="text" id="editsub-input" placeholder="Субподряд">
                <input type="text" id="editdepartment-input" placeholder="Цех">
                <select id="editrole-input">
                  <option value="Работник">Работник</option>
                  <option value="Дирекция">Дирекция по безопасности</option>
                  <option value="КПП">Работник КПП</option>
                  <option value="Пропуска">Управление пропусками</option>
                </select>
                <select id="editfire-input">
                  <option value="false">Не уволен</option>
                  <option value="true">Уволен</option>
                </select>
              </div>

            <div class="input-area">
                <label for="editmigration-input">Миграционная карта</label>
                <input type="text" id="editmigration-input">
            </div>
            <div class="input-area">
                <label for="editpermit-input">Разрешение на работу до</label>
                <input type="date" id="editpermit-input">
            </div>
            <div class="input-area">
                <label for="editcontract-input">Трудовой договор</label>
                <input type="text" id="editcontract-input">
            </div>
            <div class="input-area">
                <label for="editcontractdate-input">Дата договора</label>
                <input type="date" id="editcontractdate-input">
            </div>
            <div class="input-area">
                <label for="editlastjob-input">Последнее место работы</label>
                <select id="editlastjob-input">
                  <option value="true">Да</option>
                  <option value="false">Нет</option>
                </select>
            </div>
            <div class="input-area">
              <label for="editfirereason-input">Причина увольнения</label>
              <textarea id="editfirereason-input"></textarea>
            </div>
            </div>
    
            <button type="button" style="display: none;" class="bright" id="makeWorker-button">Сделать работником</button>
            <div class="user-buttons" style="display: flex; justify-content: space-between;">
              <button style="width: 49.5%;" type="submit" id="editUser-button">Сохранить изменения</button>
              <button style="width: 49.5%;" type="button" id="deleteUser-button" class="delete">Удалить пользователя</button>
            </div>
          </div>
      </div>
      </form>

      <form id="editLegalForm">
        <input type="text" id="editlegalid-input" hidden>
        <div id="editlegal-form-popup-bg" class="form-popup-bg not-main" >
          <div class="form-container">
              <div id="btnCloseForm" class="close-button"><svg onclick="closeForm();" id="btnCloseFormSvg" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
                <path fill="#0050CF" fill-rule="evenodd" d="M14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41Z" clip-rule="evenodd"/>
              </svg>
              </div>
              <h1>Юр лицо <span id="editLegal"></span></h1>
              <br>

              <div class="input-area">
                <label for="editname-input">Наименование*</label>
                <input type="text" id="editname-input" required>
            </div>
            
              <div class="input-area">
                <label for="editinn-input">ИНН*</label>
                <input type="text" id="editinn-input" required>
            </div>
            <div class="input-area">
                <label for="editogrn-input">ОГРН*</label>
                <input type="text" id="editogrn-input" required>
            </div>
            <div class="input-area">
                <label for="editlegaladdress-input">Юридический адрес*</label>
                <input type="text" id="editlegaladdress-input" required>
            </div>
            <div class="input-area">
                <label for="editaddress-input">Фактический адрес*</label>
                <input type="text" id="editaddress-input" required>
            </div>
            <div class="input-area">
                <label for="editcontactphone-input">Номер телефона контактного лица</label>
                <input type="text" id="editcontactphone-input">
            </div>
            <div class="input-area">
                <label for="editcontact-input">Контактное лицо</label>
                <input type="text" id="editcontact-input">
            </div>
            
            <div class="input-area">
              <label for="editadditional-input">Дополнительно</label>
              <textarea id="editadditional-input"></textarea>
            </div>
    
            <div class="user-buttons" style="display: flex; justify-content: space-between;">
              <button style="width: 49.5%;" type="submit" id="editLegal-button">Сохранить изменения</button>
              <button style="width: 49.5%;" type="button" id="deleteLegal-button" class="delete">Удалить пользователя</button>
            </div>
          </div>
        </div>
      </form>
    

      <script>

        var tableType = "People";

      function switchTables() {
          var usersTable = document.getElementById('usersWrapper');
          var legalsTable = document.getElementById('legalsWrapper');
          var usersButton = document.getElementById('switchButton')
          
          if (tableType === "People") {
              usersTable.style.display = 'none';
              legalsTable.style.display = 'block';
              usersButton.textContent = 'Физические лица';
              tableType = "Legals";
          } else {
              legalsTable.style.display = 'none';
              usersTable.style.display = 'block';
              usersButton.textContent = 'Юридические лица';
              tableType = "People";
          }
      }

        var pageNumberInput = document.getElementById('page-number');
        var peopleMax = Math.ceil({{PeopleCount}} / 15); 
        var legalsMax = Math.ceil({{LegalsCount}} / 15); 
    
        function decrementPage() {
            var currentPage = parseInt(pageNumberInput.textContent, 10);
            if (currentPage > 1) {
                pageNumberInput.textContent = currentPage - 1;
                requestUpdate();
            } else {
              requestUpdate();
            }
        }
    
        function incrementPage() {
            var currentPage = parseInt(pageNumberInput.textContent, 10);

            if (tableType === "People") {
              if (currentPage === peopleMax || currentPage > peopleMax) {
                  pageNumberInput.textContent = peopleMax;
                  requestUpdate();
              }
              if (currentPage < peopleMax) {
                  pageNumberInput.textContent = currentPage + 1;
                  requestUpdate();
              }
            } else {
              if (currentPage === legalsMax || currentPage > legalsMax) {
                  pageNumberInput.textContent = legalsMax;
                  requestUpdate();
              }
              if (currentPage < legalsMax) {
                  pageNumberInput.textContent = currentPage + 1;
                  requestUpdate();
              }
            }
        }

    </script>

    <script>
          function closeForm() {
            $('.form-popup-bg').removeClass('is-visible');
          }

          $(document).ready(function($) {
            
            $('#addUser').on('click', function(event) {
                event.preventDefault();

                $('#adduser-form-popup-bg').addClass('is-visible');
            });
            
            $('#adduser-form-popup-bg').on('click', function(event) {
                if ($(event.target).is('#adduser-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
                event.preventDefault();
                $(this).removeClass('is-visible');
                }
            });
            $('#edituser-form-popup-bg').on('click', function(event) {
                if ($(event.target).is('#edituser-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
                event.preventDefault();
                $(this).removeClass('is-visible');
                }
            });
            $('#editlegal-form-popup-bg').on('click', function(event) {
                if ($(event.target).is('#editlegal-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
                event.preventDefault();
                $(this).removeClass('is-visible');
                }
            });

          });

          const typeSelect = document.getElementById('newUserType');
          const personInputs = document.getElementById('person-inputs');
          const legalInputs = document.getElementById('legal-inputs');
      
            typeSelect.addEventListener('change', function() {
                      if (this.value === "guest") {
                          personInputs.style.display = 'flex';
                          legalInputs.style.display = 'none';
                      } else if (this.value === "legal") {
                          personInputs.style.display = 'none';
                          legalInputs.style.display = 'flex';
                      }
          });

          document.addEventListener("DOMContentLoaded", function() {
            const newUserForm = document.getElementById("newUserForm");

            newUserForm.addEventListener("submit", async function(event) {
                event.preventDefault();
                $('#addUser-button').addClass('inactive');

                if (document.getElementById('newUserType').value === "guest") {
                    const formrole = "guest";
                    const firstname = $('#firstname-input').val();
                    const surname = $('#surname-input').val();
                    const secondname = $('#secondname-input').val();
                    const born = $('#born-input').val();
                    const phone = $('#phone-input').val();
                    if (!$('#firstname-input').val() || !$('#surname-input').val() || !$('#born-input').val()) {
                        alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
                        $('#addUser-button').removeClass('inactive');
                        return;
                    }

                    const email = $('#email-input').val();
                    const password = $('#password-input').val();

                    if (password.length < 8) {
                        alert('Длина пароля должна быть не менее 8 символов')
                        $('#addUser-button').removeClass('inactive');
                        return;
                    }

                        // Отправляем запрос на сервер для авторизации
                        const response = await fetch("{{API_SERVER}}/signup", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify({ firstname, surname, secondname, born, phone, email, password, formrole })
                        });
                        if (response.status === 201) {
                            location.reload();
                            $('#addUser-button').removeClass('inactive');
                        } else {
                            alert("Ошибка авторизации");
                            $('#addUser-button').removeClass('inactive');
                        }
                } else if (document.getElementById('newUserType').value === "legal") {
                    const formrole = "legal";
                    const name = $('#name-input').val();
                    const inn = $('#inn-input').val();
                    const ogrn = $('#ogrn-input').val();
                    const legaladdress = $('#legaladdress-input').val();
                    const address = $('#address-input').val();
                    const phone = $('#contactphone-input').val();
                    const contact = $('#contact-input').val();
                    if (!$('#name-input').val() || !$('#inn-input').val() || !$('#ogrn-input').val() || !$('#legaladdress-input').val()) {
                        alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
                        $('#addUser-button').removeClass('inactive');
                        return;
                    }

                    const email = $('#email-input').val();
                    const password = $('#password-input').val();

                    if (password.length < 8) {
                        alert('Длина пароля должна быть не менее 8 символов')
                        $('#addUser-button').removeClass('inactive');
                        return;
                    }

                    // Отправляем запрос на сервер для авторизации
                    const response = await fetch("{{API_SERVER}}/signup", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({ name, inn, ogrn, legaladdress, address, phone, email, contact, password, formrole })
                    });

                    if (response.status === 201) {
                        location.reload();
                        $('#addUser-button').removeClass('inactive');
                    } else {
                        alert("Ошибка авторизации");
                        $('#addUser-button').removeClass('inactive');
                    }
                }
            });

            const editUserForm = document.getElementById("editUserForm");

            editUserForm.addEventListener("submit", async function(event) {
                event.preventDefault();
                $('#editUser-button').addClass('inactive');

                    const id = $('#edituserid-input').val();

                    const firstname = $('#editfirstname-input').val();
                    const surname = $('#editsurname-input').val();
                    const secondname = $('#editsecondname-input').val();
                    const oldsurname = $('#editoldsurname-input').val();
                    const born = $('#editborn-input').val();
                    const phone = $('#editphone-input').val();
                    const bornplace = $('#editbornplace-input').val();
                    const passport = $('#editpassport-input').val();
                    const citizenship = $('#editcitizenship-input').val();
                    const regaddress = $('#editregaddress-input').val();
                    const realaddress = $('#editrealaddress-input').val();
                    const dms = $('#editdms-input').val();
                    const tabel = $('#edittabel-input').val();
                    const block = $('#isUserBlocked').val();

                    const sub = $('#editsub-input').val();
                    const department = $('#editdepartment-input').val();
                    const role = $('#editrole-input').val();
                    const fire = $('#editfire-input').val();
                    const migration = $('#editmigration-input').val();
                    const permit = $('#editpermit-input').val();
                    const contract = $('#editcontract-input').val();
                    const contractdate = $('#editcontractdate-input').val();
                    const lastjob = $('#editlastjob-input').val();
                    const reason = $('#editfirereason-input').val();

                    const formrole = role;

                        // Отправляем запрос на сервер для авторизации
                        const response = await fetch("{{API_SERVER}}/users/update", {
                            method: "PUT",
                            headers: {
                                "Content-Type": "application/json",
                                Authorization: getCookie("token"),
                            },
                            body: JSON.stringify({ firstname, surname, secondname, oldsurname, born, phone, bornplace, passport, citizenship, regaddress, realaddress, dms, tabel,
                            block, sub, department, role, fire, migration, permit, contract, contractdate, lastjob, reason, id, formrole })
                        });
                        if (response.status === 201) {
                            location.reload();
                            $('#editUser-button').removeClass('inactive');
                        } else {
                            alert("Ошибка авторизации");
                            $('#editUser-button').removeClass('inactive');
                        }

            });

            const editLegalForm = document.getElementById("editLegalForm");

            editLegalForm.addEventListener("submit", async function(event) {
                event.preventDefault();
                $('#editLegal-button').addClass('inactive');

                    const id = $('#editlegalid-input').val();

                    const name = $('#editname-input').val();
                    const inn = $('#editinn-input').val();
                    const ogrn = $('#editogrn-input').val();
                    const legaladdress = $('#editlegaladdress-input').val();
                    const address = $('#editaddress-input').val();
                    const contactphone = $('#editcontactphone-input').val();
                    const contact = $('#editcontact-input').val();
                    const additional = $('#editadditional-input').val();

                    const formrole = "legal";

                        // Отправляем запрос на сервер для авторизации
                        const response = await fetch("{{API_SERVER}}/users/update", {
                            method: "PUT",
                            headers: {
                                "Content-Type": "application/json",
                                Authorization: getCookie("token"),
                            },
                            body: JSON.stringify({ name, inn, ogrn, legaladdress, address, contactphone, contact, additional, id, formrole })
                        });
                        if (response.status === 201) {
                            location.reload();
                            $('#editLegal-button').removeClass('inactive');
                        } else {
                            alert("Ошибка авторизации");
                            $('#editLegal-button').removeClass('inactive');
                        }

            });
        });

        function openUser(id) {
    const requestOptions = {
      method: "GET",
      headers: {
        Authorization: getCookie("token"),
      },
    };

    fetch(API_SERVER + "/users/getuser?id=" + id, requestOptions)
      .then((response) => {
        if (response.ok) {
          $("#edituser-form-popup-bg").addClass("is-visible");
          return response.json();
        } else {
          console.error("Ошибка при отправке POST запроса.");
          return "Ошибка при отправке запроса.";
        }
      })
      .then((data) => {

        $("#edituserid-input").val(id);

        $("#editFIO").html(`${data.data.Фамилия} ${data.data.Имя} ${data.data.Отчество}`);

        if (data.data.emp_id !== null) {
          $("#workersInputs").css("display", "flex");
          $("#makeWorker-button").css("display", "none");
        } else {
          $("#workersInputs").css("display", "none");
          $("#makeWorker-button").attr("onclick", `makeWorker(${id})`);
          $("#makeWorker-button").css("display", "block");
        }

        $("#deleteUser-button").attr("onclick", `deleteUser(${id})`);

        $("#editsurname-input").val(data.data.Фамилия);
        $("#editfirstname-input").val(data.data.Имя);
        $("#editsecondname-input").val(data.data.Отчество);
        $("#editoldsurname-input").val(data.data.Фамилия_старая);
        $("#editphone-input").val(data.data.Телефон);
        $("#editbornplace-input").val(data.data.Место_рождения);
        $("#editpassport-input").val(data.data.Паспорт);
        $("#editcitizenship-input").val(data.data.Гражданство);
        $("#editregaddress-input").val(data.data.Место_регистрации);
        $("#editrealaddress-input").val(data.data.Место_жительства);
        $("#edittabel-input").val(data.data.Табельный_номер);
        $("#editdms-input").val(data.data.Полис_ДМС);

        if (data.data.Черный_список) {
          $("#alarmBlocked").show();
          $("#isUserBlocked").val("true");
        } else {
          $("#alarmBlocked").hide();
          $("#isUserBlocked").val("false");
        }

        $("#editsub-input").val(data.data.Субподряд);
        $("#editdepartment-input").val(data.data.Цех);
        $("#editrole-input").val(data.data.Должность);
        if (data.data.Увольнение) {
          $("#editfire-input").val("true");
        } else {
          $("#editfire-input").val("false");
        }
        $("#editmigration-input").val(data.data.Миграционная_карта);
        $("#editcontract-input").val(data.data.Трудовой_договор);
        if (data.data.Последнее_место_работы) {
          $("#editlastjob-input").val("true");
        } else {
          $("#editlastjob-input").val("false");
        }
        $("#editfirereason-input").val(data.data.Причина_увольнения);

        function formatDateForDateInput(dateString, inputId) {
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const formattedDate = `${year}-${month}-${day}`;

                document.getElementById(inputId).value = formattedDate;
            }

        formatDateForDateInput(data.data.Дата_рождения, "editborn-input");
        formatDateForDateInput(data.data.Разрешение_на_работу_до, "editpermit-input");
        formatDateForDateInput(data.data.Дата_договора, "editcontractdate-input");


      })
      .catch((error) => {
        console.error("Ошибка при отправке запроса:", error);
      });
  }


  function makeWorker(id) {
    const requestOptions = {
      method: "POST",
      headers: {
        Authorization: getCookie("token"),
      },
    };

    fetch(API_SERVER + "/users/makeworker?id=" + id, requestOptions)
      .then((response) => {
        if (response.ok) {
          $("#edituser-form-popup-bg").removeClass("is-visible");
          location.reload();
          return response.json();
        } else {
          console.error("Ошибка при отправке POST запроса.");
          return "Ошибка при отправке запроса.";
        }
      })
      .catch((error) => {
        console.error("Ошибка при отправке запроса:", error);
      });
  }

  function deleteUser(id) {
    const requestOptions = {
      method: "DELETE",
      headers: {
        Authorization: getCookie("token"),
      },
    };

    fetch(API_SERVER + "/user/delete?id=" + id, requestOptions)
      .then((response) => {
        if (response.ok) {
          $("#edituser-form-popup-bg").removeClass("is-visible");
          location.reload();
          return response.json();
        } else {
          console.error("Ошибка при отправке POST запроса.");
          return "Ошибка при отправке запроса.";
        }
      })
      .catch((error) => {
        console.error("Ошибка при отправке запроса:", error);
      });
  }

  function deleteLegal(id) {
    const requestOptions = {
      method: "DELETE",
      headers: {
        Authorization: getCookie("token"),
      },
    };

    fetch(API_SERVER + "/legal/delete?id=" + id, requestOptions)
      .then((response) => {
        if (response.ok) {
          $("#editlegal-form-popup-bg").removeClass("is-visible");
          location.reload();
          return response.json();
        } else {
          console.error("Ошибка при отправке POST запроса.");
          return "Ошибка при отправке запроса.";
        }
      })
      .catch((error) => {
        console.error("Ошибка при отправке запроса:", error);
      });
  }

  function openLegal(id) {
    const requestOptions = {
      method: "GET",
      headers: {
        Authorization: getCookie("token"),
      },
    };

    fetch(API_SERVER + "/legals/getlegal?id=" + id, requestOptions)
      .then((response) => {
        if (response.ok) {
          $("#editlegal-form-popup-bg").addClass("is-visible");
          return response.json();
        } else {
          console.error("Ошибка при отправке POST запроса.");
          return "Ошибка при отправке запроса.";
        }
      })
      .then((data) => {

        $("#editlegalid-input").val(id);

        $("#editLegal").html(`${data.data.Наименование}`);

        $("#deleteLegal-button").attr("onclick", `deleteLegal(${id})`);

        $("#editname-input").val(data.data.Наименование);
        $("#editinn-input").val(data.data.ИНН);
        $("#editogrn-input").val(data.data.ОГРН);
        $("#editlegaladdress-input").val(data.data.Юридический_адрес);
        $("#editaddress-input").val(data.data.Фактический_адрес);
        $("#editcontactphone-input").val(data.data.Телефон);
        $("#editcontact-input").val(data.data.Контактное_лицо);
        $("#editadditional-input").val(data.data.Дополнительно);

      })
      .catch((error) => {
        console.error("Ошибка при отправке запроса:", error);
      });
  }
    </script>

    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
    <script>
      $(document).ready(function(){
    
          $('#phone-input').inputmask({"mask": "+7 (999) 999-9999"});
          $('#contactphone-input').inputmask({"mask": "+7 (999) 999-9999"});
          $('#editphone-input').inputmask({"mask": "+7 (999) 999-9999"});
          $('#editcontactphone-input').inputmask({"mask": "+7 (999) 999-9999"});

    
      });
    </script>

  
</body>
</html>