<!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 applications = [
              {{#each Applications}}
              {
              id: {{this.id}},
              status: "{{this.Статус}}",
              type: "{{this.Вид_заявки}}",
              worker: "{{this.Работник}}",
              date: "{{this.Дата_заявки}}",
              finaldate: "{{this.Дата_решения}}",
              legal: "{{this.Организация}}",
              car: "{{this.Авто_гос_номер}}",
              },
              {{/each}}
          ];
    </script>
    <script src="../scripts/myapplications-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>

    <div id="applicationsWrapper" class="table-wrapper">
      <table id="applicationsTable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Статус</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="editApplicationForm">
        <input type="text" id="editapplicationid-input" hidden>
        <input type="text" id="editapplicationtype-input" hidden>
        <div id="editapplication-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="editApplication"></span> пропуск</h1>
              <br>

              <div class="input-area">
                <label for="editauthor-input">Автор</label>
                <input type="text" id="editauthor-input" readonly>
            </div>

              <div class="input-area">
                <label for="editstatus-input">Статус</label>
                <input type="text" id="editstatus-input" readonly>
            </div>

              <div class="input-area">
                <label for="editname-input">ФИО*</label>
                <input type="text" id="editname-input" required readonly>
            </div>
            <div class="input-area">
              <label for="editlegal-input">Организация</label>
              <input type="text" id="editlegal-input" readonly>
            </div>
            
            <div class="input-area">
                <label for="editdate-input">Дата выдачи</label>
                <input type="date" id="editdate-input" required readonly>
            </div>
            <div class="input-area">
              <label for="editdate-input">Действие до</label>
              <input type="date" id="edittodate-input" required readonly>
          </div>
            <div class="input-area">
                <label for="editfinaldate-input">Дата решения</label>
                <input type="date" id="editfinaldate-input" readonly>
            </div>
            <div class="input-area">
                <label for="editdecision-input">Решение</label>
                <input type="text" id="editdecision-input" readonly>
            </div>

            <div style="display: none;" class="inputs" id="car-inputs">
              <ul id="carlist"></ul>
              <input type="text" id="editcarnumber-input" hidden readonly>
              <input type="text" id="editcarbrand-input" hidden readonly>
              <input type="text" id="editcarmodel-input" hidden readonly>
              <input type="text" id="editcarcolor-input" hidden readonly>
          </div>

          <div style="display: none;" class="inputs" id="tmc-inputs">
            <ul id="tmclist"></ul>
            <input type="text" id="edittmcname-input" hidden readonly>
            <input type="text" id="edittmcunit-input" hidden readonly>
            <input type="text" id="edittmcquantity-input" hidden readonly>
        </div>

            
            <div class="input-area">
              <label for="editadditional-input">Дополнительно</label>
              <textarea id="editadditional-input" readonly></textarea>
            </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($) {
          
          $('#addUser').on('click', function(event) {
              event.preventDefault();

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

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

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

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

      $("#editApplication").html(data.data.Вид_заявки);

      if (data.data.Вид_заявки === "Временный" || data.data.Вид_заявки === "Разовый") {
        $("#car-inputs").css("display", "none");
        $("#tmc-inputs").css("display", "none");
      } else if (data.data.Вид_заявки === "Автомобильный") {
        $("#car-inputs").css("display", "flex");
        $("#tmc-inputs").css("display", "none");
      } else if (data.data.Вид_заявки === "ТМЦ") {
        $("#car-inputs").css("display", "none");
        $("#tmc-inputs").css("display", "flex");
      }

      $("#editauthor-input").val(data.data.Автор);

      $("#editname-input").val(data.data.Работник);
      $("#editlegal-input").val(data.data.Организация);
      $("#editstatus-input").val(data.data.Статус);
      $("#editdecision-input").val(data.data.Решение);

      $("#editcarnumber-input").val(data.data.Авто_гос_номер);
      $("#editcarbrand-input").val(data.data.Авто_марка);
      $("#editcarmodel-input").val(data.data.Авто_модель);
      $("#editcarcolor-input").val(data.data.Авто_цвет);

      $("#edittmcname-input").val(data.data.Наименование);
      $("#edittmcunit-input").val(data.data.Единица_измерения);
      $("#edittmcquantity-input").val(data.data.Количество);

      if (data.data.Вид_заявки === "ТМЦ") {
        var tmcnames = JSON.parse(data.data.Наименование);
        var tmcunits = JSON.parse(data.data.Единица_измерения);
        var tmcquantitys = JSON.parse(data.data.Количество);

        var tmclist = "";

        for (var i = 0; i < tmcnames.length; i++) {
          tmclist += "<li><span style='font-weight: 600;'>Позиция " + (i + 1) + ":</span> <br>" +
                        "Наименование ТМЦ - " + tmcnames[i] + "<br>" +
                        "Единица измерения - " + tmcunits[i] + "<br>" +
                        "Количество - " + tmcquantitys[i] + 
                        "</li>";
        }

        $("#tmclist").html(tmclist);
      }


      if (data.data.Вид_заявки === "Автомобильный") {
        var carnumbers = JSON.parse(data.data.Авто_гос_номер);
        var carbrands = JSON.parse(data.data.Авто_марка);
        var carmodels = JSON.parse(data.data.Авто_модель);
        var carcolors = JSON.parse(data.data.Авто_цвет);

        var carlist = "";

        for (var i = 0; i < carnumbers.length; i++) {
          carlist += "<li><span style='font-weight: 600;'>Авто " + (i + 1) + ":</span> <br>" +
                        "Номер - " + carnumbers[i] + "<br>" +
                        "Марка - " + carbrands[i] + "<br>" +
                        "Модель - " + carmodels[i] + "<br>" +
                        "Цвет - " + carcolors[i] + 
                        "</li>";
        }

        $("#carlist").html(carlist);
      }



      $("#editadditional-input").val(data.data.Дополнение);
      $("#editapplicationtype-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.Дата_заявки, "editdate-input");
      if (data.data.Дата_решения) {
        formatDateForDateInput(data.data.Дата_решения, "editfinaldate-input");
      } else {
        $("#editfinaldate-input").val("");
      }
      if (data.data.Действие_до) {
          formatDateForDateInput(data.data.Действие_до, "edittodate-input");
        } else {
          $("#edittodate-input").val("");
        }



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

  
</body>
</html>