<!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>VAG - Dienstkleidung</title>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-payments.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-vendors.min.css?1684106062" rel="stylesheet"/>
    <style>
      @import url('https://rsms.me/inter/inter.css');
      :root {
      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
      }
      body {
      	font-feature-settings: "cv03", "cv04", "cv11";
      }
    </style>
  </head>
  <body >
    <script src="/appjs/format.js"></script>
    <div class="page">
      <!-- Navbar -->
      <header class="navbar navbar-expand-md d-print-none" >
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href="/index">
              <img src="<%= domain %>/dist/logo-transparent.png" width="110" height="32" alt="EBG" class="navbar-brand-image">
              <div data-translate="Dashboard.Header.Pagename">
            </a>
          </h1>
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item d-none d-md-flex me-3">
              <div class="btn-list">
                <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-coins"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z" /><path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4" /><path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z" /><path d="M3 6v10c0 .888 .772 1.45 2 2" /><path d="M3 11c0 .888 .772 1.45 2 2" /></svg>
                <div id="UserCreditamount"></div>
              </div>
            </div>
            <div class="d-none d-md-flex">
              <a onclick="toggleColor('dark')" class="nav-link px-0 hide-theme-dark" style="cursor: pointer;" data-translate-title="Dashboard.Header.Buttons.ToggleColor.Dark" title="" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
              </a>
              <a onclick="toggleColor('light')" class="nav-link px-0 hide-theme-light" style="cursor: pointer;" data-translate-title="Dashboard.Header.Buttons.ToggleColor.Light" title="" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
              </a>
              <div class="nav-item dropdown d-none d-md-flex me-3">
                <a data-translate-title="Dashboard.Header.Buttons.ShoppingCart" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-shopping-cart">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                    <path d="M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                    <path d="M17 17h-11v-14h-2"/>
                    <path d="M6 5l14 1l-1 7h-13"/>
                  </svg>
                  
                </a>
                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end" style="width: 400px;">
                  <div class="card">
                    <div class="card-header">
                      <h3 class="card-title" data-translate="Dashboard.Header.Buttons.ShoppingCart"></h3>
                    </div>
                    <div class="list-group list-group-flush list-group-hoverable">
                      <div class="list-group-item">
                        <div class="row align-items-center">
                          <a href="/cart" class="col text-truncate">
                            <span class="text-body d-block" id="CartHeaderElementAmount"></span>
                            <div class="d-block text-muted text-truncate mt-n1">
                              <span id="CartHeaderElementCost"></span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>              
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <span class="avatar avatar-sm" id="Dashboard.Profile.AvatarIcon" style="background-image: url()"></span>
                <div class="d-none d-xl-block ps-2">
                  <div id="Dashboard.Profile.Username"></div>
                  <div class="mt-1 small text-muted" id="Dashboard.Profile.User_Group"></div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" id="Dashboard.ProfileDropdown">
              </div>
            </div>
          </div>
        </div>
      </header>
      <header class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <div class="navbar">
            <div class="container-xl">
              <ul class="navbar-nav" id="Dashboard.Navbar.Elements">
              </ul>
            </div>
          </div>
        </div>
      </header>
      <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="Admin.Headlines.Inventory"></h2>
              </div>
              <!-- Page title actions -->
              <div class="col-auto ms-auto d-print-none">
                <div class="d-flex">
                  <div class="me-3">
                    <div class="input-icon">
                      <input type="text" value="" class="form-control" id="PageSearch" onkeypress="debounce()" onchange="loadTable()" data-translate-placeholder="Page.Search" placeholder="">
                      <span class="input-icon-addon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                      </span>
                    </div>
                  </div>
                  <a class="btn btn-primary" class="btn" data-bs-toggle="modal" data-bs-target="#newArticleMordal">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                  <div data-translate="Inventory.Body.Head.AddButton"></div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="card">
              <div class="card-body">
                <div id="table-default" class="table-responsive">
                  <table class="table">
                    <thead>
                      <tr>
                        <th><button class="table-sort" data-sort="sort-article" data-translate="Admin.Page.Inventory.Table.Article"></button></th>
                        <th><button class="table-sort" data-sort="sort-article_type" data-translate="Admin.Page.Inventory.Table.ArticleType"></button></th>
                        <th><button class="table-sort" data-sort="sort-article_number" data-translate="Admin.Page.Inventory.Table.ArticleNumber"></button></th>
                        <th><button class="table-sort" data-sort="sort-price" data-translate="Admin.Page.Inventory.Table.Price"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_xs" data-translate="Admin.Page.Inventory.Table.Stock_xs"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_s" data-translate="Admin.Page.Inventory.Table.Stock_s"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_m" data-translate="Admin.Page.Inventory.Table.Stock_m"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_l" data-translate="Admin.Page.Inventory.Table.Stock_l"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_xl" data-translate="Admin.Page.Inventory.Table.Stock_xl"></button></th>
                        <th><button class="table-sort" data-sort="sort-stock_xxl" data-translate="Admin.Page.Inventory.Table.Stock_xxl"></button></th>
                      </tr>
                    </thead>
                    <tbody class="table-tbody">
                    </tbody>
                  </table>
                </div>
                <div id="paginationContainer"></div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container-xl">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="<%= domain %>/legal/legal#imprint" data-translate="Dashboard.Footer.Links.Imprint" class="link-secondary" rel="noopener"></a></li>
                  <li class="list-inline-item"><a href="<%= domain %>/legal/legal#privacy" data-translate="Dashboard.Footer.Links.Privacy" class="link-secondary"></a></li>
                  <li class="list-inline-item"><a href="<%= domain %>/legal/guidelines" data-translate="Dashboard.Footer.Links.Guidelines" class="link-secondary" rel="noopener"></a></li>
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright &copy; <%= new Date().getFullYear() %>
                    <a href="https://ebg.pw" class="link-secondary">EBG</a>.
                    All rights reserved.
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- Modal(s) -->
    <div class="modal modal-blur fade" id="newArticleMordal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" data-translate="Events.Modal.NewEvent.Title"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            
            <div class="row mb-3 align-items-end">
              <div class="col-auto">
                <a class="avatar avatar-upload rounded">
                  <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                  <span class="avatar-upload-text" data-translate="Admin.Page.Inventory.Modal.AddNew.ProductImg"></span>
                </a>
              </div>
              <div class="col">
                <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Article"></label>
                <input type="text" id="AddNewArticle" data-translate-placeholder="Admin.Page.Inventory.Modal.AddNew.Placeholder.Article" class="form-control" />
              </div>
            </div>
            
            <div class="row">
              <div class="col-lg-3">
                <div class="mb-3">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType"></label>
                  <select type="form-select" id="AddNewArticleType" class="form-control">
                    <option value="TShirt" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_TShirt" selected></option>
                    <option value="Hoodie" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Hoodie"></option>
                    <option value="Polo" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Polo"></option>
                    <option value="Jacket" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Jacket"></option>
                    <option value="Pants" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Pants"></option>
                    <option value="Shorts" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Shorts"></option>
                    <option value="Cap" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Cap"></option>
                    <option value="Bag" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Bag"></option>
                    <option value="Shoes" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Shoes"></option>
                    <option value="Socks" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Socks"></option>
                    <option value="Accessoires" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleType_Accessoires"></option>
                  </select>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="mb-3">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Gender"></label>
                  <select type="form-select" id="AddNewGender" class="form-control">
                    <option value="Unisex" data-translate="Admin.Page.Inventory.Modal.AddNew.Gender_Unisex" selected></option>
                    <option value="Female" data-translate="Admin.Page.Inventory.Modal.AddNew.Gender_Female"></option>
                    <option value="Male" data-translate="Admin.Page.Inventory.Modal.AddNew.Gender_Male"></option>
                  </select>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="mb-4">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.ArticleNumber"></label>
                  <input type="text" data-translate-placeholder="Admin.Page.Inventory.Modal.AddNew.Placeholder.ArticleNumber" id="AddNewArticleNumber" class="form-control">
                </div>
              </div>
              <div class="col-lg-2">
                <div class="mb-2">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Price"></label>
                  <input type="number" data-translate-placeholder="Admin.Page.Inventory.Modal.AddNew.Placeholder.Price" id="AddNewPrice" class="form-control">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-4">
                <div class="mb-1">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_xs"></label>
                  <input type="text" id="AddNewStockXS" value="0" class="form-control">
                </div>
              </div>
              <div class="col-lg-4">
                <div class="mb-1">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_s"></label>
                  <input type="text" id="AddNewStockS" value="0" class="form-control">
                </div>
              </div>
              <div class="col-lg-4">
                <div class="mb-3">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_m"></label>
                  <input type="text" id="AddNewStockM" value="0" class="form-control">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-4">
                <div class="mb-1">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_l"></label>
                  <input type="text" id="AddNewStockL" value="0" class="form-control">
                </div>
              </div>
              <div class="col-lg-4">
                <div class="mb-1">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_xl"></label>
                  <input type="text" id="AddNewStockXL" value="0" class="form-control">
                </div>
              </div>
              <div class="col-lg-4">
                <div class="mb-3">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Stock_xxl"></label>
                  <input type="text" id="AddNewStockXXL" value="0" class="form-control">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-12">
                <div class="mb-4">
                  <label class="form-label" data-translate="Admin.Page.Inventory.Modal.AddNew.Description"></label>
                  <textarea class="form-control" id="AddNewDescription" data-translate-placeholder="Admin.Page.Inventory.Modal.AddNew.Placeholder.Description" rows="3"></textarea>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-12">
                <div id="AddNewErrorLine"></div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <a class="btn btn-link link-secondary" data-bs-dismiss="modal" data-translate="Admin.Page.Inventory.Modal.AddNew.CancelButton"></a>
            <a class="btn btn-primary ms-auto" id="AddNewSubmitBtn">
              <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M12 5l0 14" />
                  <path d="M5 12l14 0" />
              </svg>
              <span data-translate="Admin.Page.Inventory.Modal.AddNew.AddButton"></span>
            </a>          
          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js"></script>
    <script src="<%= domain %>/appjs/translate.js"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?1684106062" defer></script>
    <script src="<%= domain %>/dist/js/demo.min.js?1684106062" defer></script>
    <script src="<%= domain %>/dist/js/i18next.min.js?1684106062"></script>
    <script src="<%= domain %>/appjs/layout.js"></script>
    <script>
      const rowsPerPage = 10;
      let currentPage = 1;
      let sortColumn = 'article_number';
      let sortOrder = 'asc';

      const loadTable = async (in_currentPage) => {
        currentPage = in_currentPage ?? currentPage; // Update currentPage
        const search = document.getElementById("PageSearch").value;
        const response = await fetch(`/api/v1/inventory?page=${currentPage}&limit=${rowsPerPage}&sort=${sortColumn}&order=${sortOrder}&search=${search}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          }
        })

        if(response.status === 200) {
          const data = await response.json()
          const tbody = document.querySelector('.table-tbody')
          tbody.innerHTML = ''
          data.table.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="sort-article">${item.article}</td>
                <td class="sort-article_type">${item.article_type}</td>
                <td class="sort-article_number">${item.article_number}</td>
                <td class="sort-price"><input type="text" class="form-control editable" value="${item.price}" data-id="price/${item.id}"></td>
                <td class="sort-stock_xs"><input type="text" class="form-control editable" value="${item.stock_xs}" data-id="stock_xs/${item.id}"></td>
                <td class="sort-stock_s"><input type="text" class="form-control editable" value="${item.stock_s}" data-id="stock_s/${item.id}"></td>
                <td class="sort-stock_m"><input type="text" class="form-control editable" value="${item.stock_m}" data-id="stock_m/${item.id}"></td>
                <td class="sort-stock_l"><input type="text" class="form-control editable" value="${item.stock_l}" data-id="stock_l/${item.id}"></td>
                <td class="sort-stock_xl"><input type="text" class="form-control editable" value="${item.stock_xl}" data-id="stock_xl/${item.id}"></td>
                <td class="sort-stock_xxl"><input type="text" class="form-control editable" value="${item.stock_xxl}" data-id="stock_xxl/${item.id}"></td>
                <td><button class="btn btn-danger" onclick="deleteRow(${item.id})">${i18next.t('Admin.Page.Inventory.Modal.AddNew.DelButton')}</button></td>
            `;
            tbody.appendChild(tr);
        });

          const editable = document.querySelectorAll('.editable')

          // Add event listener to all editable fields
          document.querySelectorAll('.editable').forEach(input => {
            input.addEventListener('change', async (e) => {
                const id = e.target.getAttribute('data-id');
                const [column, itemId] = id.split('/');
                const value = e.target.value;

                try {
                    const response = await fetch(`/api/v1/inventory/${itemId}/${column}/set`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + localStorage.getItem('token')
                        },
                        body: JSON.stringify({
                            "new_val": value
                        })
                    });

                    if (response.status === 200) {
                        e.target.classList.add('is-valid');
                        setTimeout(() => {
                            e.target.classList.remove('is-valid');
                        }, 1000);
                    } else {
                        e.target.classList.add('is-invalid');
                        setTimeout(() => {
                            e.target.classList.remove('is-invalid');
                        }, 1000);
                    }
                } catch (error) {
                    e.target.classList.add('is-invalid');
                    setTimeout(() => {
                        e.target.classList.remove('is-invalid');
                    }, 1000);
                    console.error('Error:', error);
                }
            });
          });

          return data;
        } else {
          alert('Error fetching table data')
          return {};
        }
      }

      const deleteRow = async (id) => {
            const response = await fetch(`/api/v1/inventory/${id}`, {
              method: 'DELETE',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem('token')
              }
            });

            if(response.status === 200) {
              loadTable();
            } else {
              alert('Error deleting row');
            }
          }

      document.addEventListener('DOMContentLoaded', async () => {
        await generatePagination(currentPage, rowsPerPage, loadTable)

        document.querySelectorAll('.table-sort').forEach(header => {
              header.addEventListener('click', () => {
                  const newSortColumn = header.getAttribute('data-sort').replace('sort-', '');
                  if (sortColumn === newSortColumn) {
                      sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
                  } else {
                      sortColumn = newSortColumn;
                      sortOrder = 'asc';
                  }
                  loadTable();
              });
            });
      })

      // Add new article Mordal submit Code
      const keys = {
        "article": "AddNewArticle",
        "article_type": "AddNewArticleType",
        "article_number": "AddNewArticleNumber",
        "price": "AddNewPrice",
        "gender": "AddNewGender",
        "stock_xs": "AddNewStockXS",
        "stock_s": "AddNewStockS",
        "stock_m": "AddNewStockM",
        "stock_l": "AddNewStockL",
        "stock_xl": "AddNewStockXL",
        "stock_xxl": "AddNewStockXXL",
        "description": "AddNewDescription"
      }

      document.getElementById("AddNewSubmitBtn").addEventListener("click", function() {
        const data = {}
        for (const key in keys) {
          data[key] = document.getElementById(keys[key]).value
        }
        fetch('/api/v1/inventory', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          },
          body: JSON.stringify(data)
        }).then(async (response) => {
          const response_json = await response.json();
          if(response.status === 200) {
            for (const key in keys) {
              document.getElementById(keys[key]).classList.remove("is-invalid");
            }
            closeModal("newArticleMordal");
            loadTable();
          } else if(response.status === 400) {
            if(typeof response_json.reason === "string") {
              document.getElementById('AddNewErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.${response_json.message}`) + '</div>';
              return;
            }
            const input_name = response_json.reason[0].path[0];
            console.log(input_name)
            const input_type = response_json.reason[0].type;
            for (const key in keys) {
              document.getElementById(keys[key]).classList.remove("is-invalid");
            }
            
            document.getElementById('AddNewErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.Joi.${input_type}`, { field: i18next.t(`Admin.Page.Inventory.Modal.AddNew.${capitalizeFirstLetter(input_name)}`), limit: response_json.reason[0].context?.limit }) + '</div>';
            document.getElementById(keys[input_name]).classList.add("is-invalid");
          } else {
            if(Number(response_json.reason) === 23505) {
              const {columnName, columnValue} = extractUniqueConstraintError(response_json.info);
              document.getElementById('AddNewErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.Postgres.23505`, {columnName, columnValue}) + '</div>';
            } else {
              alert('Error adding new article');
            }
          }
        }).catch(error => {
          console.error('Error:', error);
        });
      });
    </script>
  </body>
</html>