<%- include('../systemFinance/assets.ejs') %>
<%
  const currentStatus = type || 'all';
  const currentOwner = providerType || 'all';
  const settlementPath = (status) => currentOwner !== 'all'
    ? '/dashboard/settlementsProviders/' + currentOwner + '/' + status
    : '/dashboard/settlementsProviders/' + status;
%>
<main class="kt-ops kt-finance" data-ops-page data-finance-page
  data-ops-loading="<%= i18n.__('systemFinance.loading') %>"
  data-ops-refreshing="<%= i18n.__('systemFinance.refreshing') %>"
  data-ops-load-error="<%= i18n.__('systemFinance.loadError') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('settlements.financials'),
      description: i18n.__('systemFinance.settlementsDescription'),
      icon: 'ti-wallet',
      count: currentTotal,
      showCount: false,
      primaryUrl: null,
      backUrl: null
    }) %>

    <nav class="kt-ops-status-nav" aria-label="<%= i18n.__('systemFinance.status') %>">
      <a class="<%= currentStatus === 'all' ? 'is-active' : '' %>" href="<%= settlementPath('all') %>"><%= i18n.__('settlements.allRequests') %><span class="kt-ops-status-nav__count"><%= counts[0].value %></span></a>
      <a class="<%= currentStatus === 'pending' ? 'is-active' : '' %>" href="<%= settlementPath('pending') %>"><%= i18n.__('settlements.pendingRequest') %><span class="kt-ops-status-nav__count"><%= counts[1].value %></span></a>
      <a class="<%= currentStatus === 'accept' ? 'is-active' : '' %>" href="<%= settlementPath('accept') %>"><%= i18n.__('settlements.approved') %><span class="kt-ops-status-nav__count"><%= counts[2].value %></span></a>
      <a class="<%= currentStatus === 'reject' ? 'is-active' : '' %>" href="<%= settlementPath('reject') %>"><%= i18n.__('settlements.rejected') %><span class="kt-ops-status-nav__count"><%= counts[3].value %></span></a>
    </nav>

    <section class="kt-ops-toolbar" aria-label="<%= i18n.__('systemFinance.commandCenter') %>">
      <div class="kt-ops-toolbar__main"><span class="kt-ops-section-icon"><i class="ti ti-arrows-exchange"></i></span><div><h2><%= i18n.__('systemFinance.commandCenter') %></h2><p><%= i18n.__('systemFinance.commandHint') %></p></div></div>
      <div class="kt-ops-toolbar__actions">
        <button class="kt-ops-btn" type="button" data-ops-refresh><i class="ti ti-refresh"></i><%= i18n.__('systemFinance.refresh') %></button>
        <button class="kt-ops-btn" type="button" data-ops-filter-toggle aria-expanded="false" aria-controls="settlements-filter"><i class="ti ti-filter"></i><%= i18n.__('systemFinance.filter') %></button>
      </div>
    </section>

    <section class="kt-ops-filter" id="settlements-filter" data-ops-filter hidden>
      <header class="kt-ops-filter__header">
        <div class="kt-ops-filter__heading"><span class="kt-ops-section-icon"><i class="ti ti-filter"></i></span><div><h2><%= i18n.__('systemFinance.filter') %></h2><p><%= i18n.__('systemFinance.filterHint') %></p></div></div>
        <button class="kt-ops-btn kt-ops-btn--icon" type="button" data-ops-filter-close aria-label="<%= i18n.__('systemFinance.close') %>"><i class="ti ti-x"></i></button>
      </header>
      <form action="/dashboard/settlementsProviders/filter" method="get" data-ops-filter-form
        data-ops-history-url="<%= settlementPath(currentStatus) %>">
        <div class="kt-ops-filter__body" data-ops-filter-body>
          <div class="kt-ops-filter__grid">
            <div class="kt-ops-field" data-ops-field>
              <label for="settlement-owner"><%= i18n.__('systemFinance.owner') %></label>
              <div data-ops-select><select id="settlement-owner" name="providerType" data-ops-native-select>
                <option value="all" <%= currentOwner === 'all' ? 'selected' : '' %>><%= i18n.__('systemFinance.allOwners') %></option>
                <option value="store" <%= currentOwner === 'store' ? 'selected' : '' %>><%= i18n.__('systemFinance.storeSettlements') %></option>
                <option value="haraj" <%= currentOwner === 'haraj' ? 'selected' : '' %>>Haraj</option>
                <option value="client" <%= currentOwner === 'client' ? 'selected' : '' %>><%= i18n.__('systemFinance.clientSettlements') %></option>
              </select></div>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="settlement-status"><%= i18n.__('systemFinance.status') %></label>
              <div data-ops-select><select id="settlement-status" name="statusType" data-ops-native-select>
                <option value="all" <%= currentStatus === 'all' ? 'selected' : '' %>><%= i18n.__('systemFinance.allStatuses') %></option>
                <option value="pending" <%= currentStatus === 'pending' ? 'selected' : '' %>><%= i18n.__('settlements.pendingRequest') %></option>
                <option value="accept" <%= currentStatus === 'accept' ? 'selected' : '' %>><%= i18n.__('settlements.approved') %></option>
                <option value="reject" <%= currentStatus === 'reject' ? 'selected' : '' %>><%= i18n.__('settlements.rejected') %></option>
              </select></div>
            </div>
            <div class="kt-ops-field" data-ops-field><label for="settlement-number"><%= i18n.__('settlements.requestNumber') %></label><input class="kt-ops-control" id="settlement-number" name="settlementNumber" type="text" inputmode="numeric" maxlength="20" dir="ltr"><p class="kt-ops-field__error" data-ops-field-error></p></div>
            <div class="kt-ops-field" data-ops-field><label for="settlement-name"><%= i18n.__('settlements.providerName') %></label><input class="kt-ops-control" id="settlement-name" name="providerName" type="search" maxlength="100"><p class="kt-ops-field__error" data-ops-field-error></p></div>
            <div class="kt-ops-field" data-ops-field><label for="settlement-start"><%= i18n.__('common.startDate') %></label><input class="kt-ops-control" id="settlement-start" name="startDate" type="date" dir="ltr"><p class="kt-ops-field__error" data-ops-field-error></p></div>
            <div class="kt-ops-field" data-ops-field><label for="settlement-end"><%= i18n.__('common.endDate') %></label><input class="kt-ops-control" id="settlement-end" name="endDate" type="date" dir="ltr"><p class="kt-ops-field__error" data-ops-field-error></p></div>
            <div class="kt-ops-field" data-ops-field><label for="settlement-order"><%= i18n.__('common.order') %></label><div data-ops-select><select id="settlement-order" name="order" data-ops-native-select><option value="DESC"><%= i18n.__('systemFinance.newest') %></option><option value="ASC"><%= i18n.__('systemFinance.oldest') %></option></select></div></div>
          </div>
        </div>
        <footer class="kt-ops-filter__footer">
          <button class="kt-ops-btn" type="button" data-ops-filter-reset><i class="ti ti-filter-off"></i><%= i18n.__('systemFinance.reset') %></button>
          <button class="kt-ops-btn kt-ops-btn--primary" type="submit"><i class="ti ti-check"></i><%= i18n.__('systemFinance.apply') %></button>
        </footer>
      </form>
    </section>

    <section class="kt-ops-resource" data-ops-resource aria-live="polite">
      <div class="kt-ops-loading" data-ops-loading hidden><span class="kt-ops-loading__pill"><i class="kt-ops-loading__spinner"></i><span data-ops-loading-label><%= i18n.__('systemFinance.loading') %></span></span></div>
      <%- include('./dataTable.ejs', { settlements, paginationHtml }) %>
    </section>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
