<%- include('../systemFinance/assets.ejs') %>
<main class="kt-ops kt-finance" data-ops-page data-finance-page
  data-ops-required-message="<%= i18n.__('systemFinance.required') %>"
  data-ops-action-success="<%= i18n.__('common.addSuccessful') %>"
  data-ops-action-error="<%= i18n.__('common.returnDeveloper') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('common.create {{module}}', { module: i18n.__('payments.payment') }),
      description: i18n.__('systemFinance.paymentsDescription'),
      icon: 'ti-credit-card-pay',
      count: 0,
      showCount: false,
      primaryUrl: null,
      backUrl: '/dashboard/payments'
    }) %>
    <form class="kt-ops-form-surface" action="/dashboard/payments/create" method="post"
      enctype="multipart/form-data" data-ops-form novalidate>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <header class="kt-ops-form-surface__header">
        <span class="kt-ops-section-icon" aria-hidden="true"><i class="ti ti-adjustments"></i></span>
        <div><h2><%= i18n.__('systemFinance.paymentIdentity') %></h2><p><%= i18n.__('systemFinance.formReady') %></p></div>
      </header>
      <div class="kt-ops-form__body">
        <div class="kt-ops-form-grid">
          <div class="kt-ops-field" data-ops-field>
            <label for="payment-type"><%= i18n.__('payments.paymentsType') %></label>
            <div data-ops-select>
              <select id="payment-type" name="payment" required data-ops-native-select>
                <option value="" disabled selected><%= i18n.__('payments.selectPaymentsType') %></option>
                <% if (!payments.includes('wallet')) { %><option value="wallet"><%= i18n.__('payments.wallet') %></option><% } %>
                <% if (!payments.includes('online')) { %><option value="online"><%= i18n.__('payments.online') %></option><% } %>
                <% if (!payments.includes('cash')) { %><option value="cash"><%= i18n.__('payments.cash') %></option><% } %>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
          </div>
          <div class="kt-ops-field" data-ops-field>
            <label for="payment-status"><%= i18n.__('payments.status') %></label>
            <div data-ops-select>
              <select id="payment-status" name="status" required data-ops-native-select>
                <option value="" disabled selected><%= i18n.__('payments.selectStatus') %></option>
                <option value="available"><%= i18n.__('payments.available') %></option>
                <option value="unavailable"><%= i18n.__('payments.unavailable') %></option>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
          </div>
          <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
            <label for="payment-image"><%= i18n.__('common.image') %> <small>(<%= i18n.__('common.optional') %>)</small></label>
            <div class="kt-ops-file">
              <input class="kt-ops-file__input" id="payment-image" type="file" name="image"
                accept="image/jpeg,image/png" data-ops-file-input>
              <label class="kt-ops-file__trigger" for="payment-image">
                <span class="kt-ops-file__icon"><i class="ti ti-upload"></i></span>
                <span data-ops-file-label data-empty-label="<%= i18n.__('systemFinance.chooseFile') %>"><%= i18n.__('systemFinance.chooseFile') %></span>
              </label>
            </div>
            <p class="kt-ops-field__hint">JPG / PNG · 5MB</p>
            <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
          </div>
        </div>
      </div>
      <footer class="kt-ops-form__footer">
        <a class="kt-ops-btn" href="/dashboard/payments"><%= i18n.__('systemFinance.back') %></a>
        <button class="kt-ops-btn kt-ops-btn--primary" type="submit"
          data-ops-loading-label="<%= i18n.__('systemFinance.saving') %>">
          <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
          <span data-ops-button-label><%= i18n.__('common.add') %></span>
        </button>
      </footer>
    </form>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
