<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>EBG - Dashboard</title>
    <!-- Essential JS -->
    <script>
      const lang = <%- JSON.stringify(language) %>
    </script>
    <script src="<%= domain %>/appjs/i18next.js?<%= curentUnixTime %>"></script>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?<%= curentUnixTime %>" rel="stylesheet" />
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?<%= curentUnixTime %>" rel="stylesheet" />
  </head>
  <body>
    <script src="/appjs/format.js"></script>
    <div class="page">
      <!-- Navbar -->
      <%- html_content.navbar %>
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <h2 class="page-title" data-translate="Settings.Misc.SettingsName"></h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="card">
              <!-- Sidebar Toggle Button for Small Screens -->
              <div class="card-body d-md-none">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              </div>
              <div class="row g-0">
                <div class="col-12 col-md-3 collapse d-md-block border-end" id="sidebar-menu">
                  <div class="card-body">
                    <div class="list-group list-group-transparent">
                      <a href="/profile-dropdown/settings-account" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Account"></a>
                      <a href="/profile-dropdown/settings-misc" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Misc"></a>
                      <a href="/profile-dropdown/settings-links" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Links"></a>
                      <a href="/profile-dropdown/settings-integrations" class="list-group-item list-group-item-action d-flex align-items-center active" data-translate="Settings.Side.Integrations"></a>
                    </div>
                  </div>
                </div>
                <div class="col d-flex flex-column">
                  <div class="card-body">
                    <h2 class="mb-4" data-translate="Settings.Integrations.IntegrationsHeadline"></h2>
                    <h3 class="card-title" data-translate="Settings.Integrations.Integrations"></h3>
                    <div class="row g-3">
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Integrations.Telegram"></div>
                        <input type="text" class="form-control" value="" onchange="handleInputChange(this.id)" id="SettingsIntegrationTelegram" />
                      </div>
                    </div>
                    <p class="text-muted" data-translate="Settings.Integrations.EditDescription"></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%- html_content.footer %>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/translate.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/layout.js?<%= curentUnixTime %>"></script>
    <script>
      // Handle changes to all imput fields (VanillaJS)
      const handleInputChange = async (id) => {
        const inputElement = document.getElementById(id);
        const response = await fetch("/api/v1/integrations", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          body: JSON.stringify({
            id: id,
            value: document.getElementById(id).value,
          }),
        });

        if (response.ok) {
          inputElement.classList.remove("is-invalid");
          inputElement.classList.add("is-valid");

          await loadTable();

          setTimeout(() => {
            inputElement.classList.remove("is-valid");
          }, 3000);
        } else {
          inputElement.classList.add("is-invalid");
        }
      };

      // Auto-fill user data (VanillaJS)
      document.addEventListener("DOMContentLoaded", async () => {
        const response = await fetch("/api/v1/integrations", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",

            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });

        if (response.status == 200) {
          const data = await response.json();

          data.forEach((element) => {
            document.getElementById(element.id).value = element.unique_remote_id;
          });
        }
      });
    </script>
  </body>
</html>
