<!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 passes = [
              {{#each Passes}}
              {
              id: {{this.id}},
              status: "{{this.Состояние}}",
              object: "{{this.Объект}}",
              fabula: "{{this.Фабула}}",
              type: "{{this.Вид_неисправности}}",
              date: "{{this.Дата_подачи}}",
              editdate: "{{this.Дата_изменения}}",
              who: "{{this.Кто_подал}}",
              executor: "{{this.Исполнитель}}",
              events: "{{this.Мероприятия}}",
              },
              {{/each}}
          ];
    </script>
    <script src="../scripts/tso-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 onclick="location.href='/account/newtso'" class="blue">Создать заявку</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="passesWrapper" class="table-wrapper">
      <table id="passesTable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Состояние</th>
            <th>Дата подачи</th>
            <th>Вид неисправности</th>
            <th>Объект</th>
            <th>Дата изменения</th>
            <th>Исполнитель</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="editPassForm">
        <input type="text" id="editpassid-input" hidden>
        <div id="editpass-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="editPass"></span></h1>
              <br>

              <div class="input-area">
                <label for="passStatus">Состояние*</label>
                <select name="pass-type" id="passStatus">
                  <option value="Новая">Новая</option>
                  <option value="Принята в работу">Принята в работу</option>
                  <option value="Выполнена">Выполнена</option>
                  <option value="Отложена">Отложен</option>
                </select>
              </div>
              
              <div class="input-area">
                <label for="edittype-input">Вид неисправности*</label>
                <textarea id="edittype-input" cols="30" rows="10"></textarea>
              </div>

              <div class="input-area">
                <label for="editobject-input">Объект*</label>
                <input type="text" id="editobject-input">
              </div>

              <div class="input-area">
                <label for="editfabula-input">Фабула</label>
                <input type="text" id="editfabula-input">
              </div>

              <div class="input-area">
                <label for="editexecutor-input">Исполнитель</label>
                <input type="text" id="editexecutor-input">
              </div>

              <div class="input-area">
                <label for="editevents-input">Мероприятия</label>
                <input type="text" id="editevents-input">
              </div>

    
            <div class="user-buttons" style="display: flex; justify-content: space-between;">
              <button style="width: 49.5%;" type="submit" id="editPass-button">Сохранить изменения</button>
              <button style="width: 49.5%;" type="button" id="deletePass-button" class="delete">Удалить заявку</button>
            </div>
          </div>
        </div>
      </form>
    

      <script>

        var pageNumberInput = document.getElementById('page-number');
        var totalMax = Math.ceil({{Total}} / 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 (currentPage === totalMax || currentPage > totalMax) {
                  pageNumberInput.textContent = totalMax;
                  requestUpdate();
              }
              if (currentPage < totalMax) {
                  pageNumberInput.textContent = currentPage + 1;
                  requestUpdate();
              }
        }

    </script>

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

          $(document).ready(function($) {
            
            $('#editpass-form-popup-bg').on('click', function(event) {
                if ($(event.target).is('#editpass-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
                event.preventDefault();
                $(this).removeClass('is-visible');
                }
            });

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

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

                const id = parseInt($('#editpassid-input').val());
                const type = $('#edittype-input').val();
                const status = $('#passStatus').val();
                const object = $('#editobject-input').val();
                const fabula = $('#editfabula-input').val();
                const executor = $('#editexecutor-input').val();
                const events = $('#editevents-input').val();



                    // Отправляем запрос на сервер для авторизации
                    const response = await fetch("{{API_SERVER}}/passes/tso/update", {
                        method: "PUT",
                        headers: {
                            "Content-Type": "application/json",
                            Authorization: getCookie("token"),
                        },
                        body: JSON.stringify({ id, type, status, object, fabula, executor, events })
                    });
                    if (response.status === 200) {
                        const data = await response.json();

                        location.reload();
                        $('#send-button').removeClass('inactive');
                    } else {
                        alert("Произошла ошибка при попытке отправить заявку");
                        $('#send-button').removeClass('inactive');
                    }
                
            });
        });

           

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

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

        $("#editpassid-input").val(id);
        $("#edittype-input").val(data.data.Вид_неисправности);

        $("#editPass").html(id);

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

        $("#passStatus").val(data.data.Состояние);
        $("#editobject-input").val(data.data.Объект);
        $("#editfabula-input").val(data.data.Фабула);
        $("#editexecutor-input").val(data.data.Исполнитель);
        $("#editevents-input").val(data.data.Мероприятия);

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


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

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