<%- include('../systemFinance/assets.ejs') %>
<%
  const statusTone = data.status === 'accept' ? 'success' : data.status === 'reject' ? 'danger' : 'warning';
  const hasPendingAction = data.status === 'pending' && Number(data.total || 0) > 0;
%>
<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.editSuccessful') %>"
  data-ops-action-error="<%= i18n.__('common.returnDeveloper') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('settlements.settlementDetails') + ' #' + data.settlementNumber,
      description: data.user?.name || data.statusText,
      icon: 'ti-receipt-2',
      count: 0,
      showCount: false,
      primaryUrl: null,
      backUrl: '/dashboard/settlementsProviders/all'
    }) %>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-cash-banknote"></i></span><div><h2><%= i18n.__('systemFinance.summary') %></h2><p><span class="kt-ops-status kt-ops-status--<%= statusTone %>"><%= data.statusText %></span></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-finance-summary">
          <div class="kt-finance-summary__item"><span><%= data.totalPriceTranslated %></span><strong><%= data.totalPriceText %></strong></div>
          <div class="kt-finance-summary__item"><span><%= data.totalAppCommissionTranslated %></span><strong><%= data.totalAppCommissionText %></strong></div>
          <div class="kt-finance-summary__item"><span><%= data.totalVatPriceTranslated %></span><strong><%= data.totalVatPriceText %></strong></div>
          <div class="kt-finance-summary__item"><span><%= data.totalTranslated %></span><strong><%= data.totalText %></strong></div>
          <div class="kt-finance-summary__item"><span><%= i18n.__('orders.paymentMethod') %></span><strong><%= data.paymentMethodText || data.paymentMethod || '-' %></strong></div>
          <div class="kt-finance-summary__item"><span><%= i18n.__('systemFinance.createdAt') %></span><strong><%= data.date %> · <%= data.time %></strong></div>
        </div>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-user-shield"></i></span><div><h2><%= i18n.__('settlements.userDetails') %></h2><p><%= data.userRef %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-details-grid">
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.name') %></span><strong class="kt-ops-detail__value"><%= data.user?.name || '-' %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.phone') %></span><strong class="kt-ops-detail__value" dir="ltr"><%= data.user?.phone || '-' %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.email') %></span><strong class="kt-ops-detail__value" dir="ltr"><%= data.user?.email || '-' %></strong></div>
          <% if (data.userRef !== 'Client') { %>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.bankName') %></span><strong class="kt-ops-detail__value"><%= data.user?.bankName || '-' %></strong></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.accountName') %></span><strong class="kt-ops-detail__value"><%= data.user?.accountName || '-' %></strong></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('common.accountNumber') %></span><strong class="kt-ops-detail__value" dir="ltr"><%= data.user?.accountNumber || '-' %></strong></div>
            <div class="kt-ops-detail kt-ops-detail--wide"><span class="kt-ops-detail__label"><%= i18n.__('common.iban') %></span><strong class="kt-ops-detail__value" dir="ltr"><%= data.user?.iban || '-' %></strong></div>
          <% } %>
        </div>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-list-details"></i></span><div><h2><%= i18n.__('settlements.financials') %></h2><p><%= (data.financials || []).length %></p></div></header>
      <div class="kt-ops-section__body">
        <% if (!(data.financials || []).length) { %>
          <div class="kt-ops-inline-empty"><i class="ti ti-receipt-off"></i><span><%= i18n.__('systemFinance.noData') %></span></div>
        <% } else { %>
          <div class="kt-ops-list">
            <% data.financials.forEach((financial) => { %>
              <article class="kt-ops-row kt-ops-row--simple">
                <div class="kt-ops-row__identity"><span class="kt-ops-avatar"><i class="ti ti-arrows-exchange"></i></span><div class="kt-ops-row__copy"><span class="kt-ops-row__eyebrow"><%= i18n.__('systemFinance.reference') %></span><h3 class="kt-ops-row__title"><%= financial.orderNumber || financial.auctionNumber || '-' %></h3><p class="kt-ops-row__subtitle"><%= financial.price %></p></div></div>
                <div class="kt-ops-meta"><span class="kt-ops-meta__label"><%= financial.appCommissionTextTranslated %></span><strong><%= financial.appCommissionText %></strong></div>
                <div class="kt-ops-meta"><span class="kt-ops-meta__label"><%= financial.totalTranslated %></span><strong class="kt-finance-money"><%= financial.totalText %></strong></div>
              </article>
            <% }) %>
          </div>
        <% } %>
      </div>
    </section>

    <% if (data.status === 'accept' && data.image) { %>
      <section class="kt-ops-section"><header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-photo-check"></i></span><div><h2><%= i18n.__('settlements.settlementImage') %></h2></div></header><div class="kt-ops-section__body"><div class="kt-ops-media" data-ops-media-wrap><img src="<%= data.image %>" alt="<%= i18n.__('settlements.settlementImage') %>" data-ops-media><div class="kt-ops-media__fallback" data-ops-media-fallback hidden><span class="kt-ops-media__fallback-icon"><i class="ti ti-photo-off"></i></span></div></div></div></section>
    <% } %>
    <% if (data.status === 'reject' && data.reason) { %>
      <section class="kt-ops-section"><header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-alert-triangle"></i></span><div><h2><%= i18n.__('settlements.reason') %></h2></div></header><div class="kt-ops-section__body"><div class="kt-ops-content-block kt-ops-content-block--danger"><%= data.reason %></div></div></section>
    <% } %>

    <% if (data.status === 'pending') { %>
      <section class="kt-ops-toolbar">
        <div class="kt-ops-toolbar__main"><span class="kt-ops-section-icon"><i class="ti ti-shield-check"></i></span><div><h2><%= i18n.__('settlements.actions') %></h2><p><%= hasPendingAction ? i18n.__('systemFinance.formReady') : i18n.__('settlements.dueAmountZero') %></p></div></div>
        <% if (hasPendingAction) { %><div class="kt-ops-toolbar__actions"><button class="kt-ops-btn kt-ops-btn--danger" type="button" data-ops-modal-target="#settlement-reject-modal"><i class="ti ti-x"></i><%= i18n.__('settlements.reject') %></button><button class="kt-ops-btn kt-ops-btn--success" type="button" data-ops-modal-target="#settlement-accept-modal"><i class="ti ti-check"></i><%= i18n.__('settlements.accept') %></button></div><% } %>
      </section>
    <% } %>

    <% if (hasPendingAction) { %>
      <div class="kt-ops-modal" id="settlement-accept-modal" data-ops-modal role="dialog" aria-modal="true" aria-labelledby="settlement-accept-title" aria-hidden="true" tabindex="-1" hidden>
        <section class="kt-ops-modal__dialog">
          <header class="kt-ops-modal__header"><div><span class="kt-ops-eyebrow"><%= i18n.__('settlements.accept') %></span><h2 id="settlement-accept-title"><%= i18n.__('settlements.settlementImage') %></h2><p><%= data.totalText %></p></div><button class="kt-ops-modal__close" type="button" data-ops-modal-close aria-label="<%= i18n.__('systemFinance.close') %>"><i class="ti ti-x"></i></button></header>
          <form action="/dashboard/settlementsProviders/actions/<%= data.id %>" method="post" enctype="multipart/form-data" data-ops-form novalidate>
            <input type="hidden" name="_csrf" value="<%= csrfToken %>"><input type="hidden" name="status" value="accept"><input type="hidden" name="total" value="<%= data.total %>">
            <div class="kt-ops-modal__body"><div class="kt-ops-field" data-ops-field><label for="settlement-image"><%= i18n.__('settlements.settlementImage') %></label><div class="kt-ops-file"><input class="kt-ops-file__input" id="settlement-image" name="image" type="file" accept="image/jpeg,image/png" required data-ops-file-input><label class="kt-ops-file__trigger" for="settlement-image"><span class="kt-ops-file__icon"><i class="ti ti-upload"></i></span><span data-ops-file-label><%= i18n.__('systemFinance.chooseFile') %></span></label></div><p class="kt-ops-field__error" data-ops-field-error></p></div></div>
            <footer class="kt-ops-modal__actions"><button class="kt-ops-btn" type="button" data-ops-modal-close><%= i18n.__('systemFinance.cancel') %></button><button class="kt-ops-btn kt-ops-btn--success" 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.__('settlements.accept') %></span></button></footer>
          </form>
        </section>
      </div>
      <div class="kt-ops-modal" id="settlement-reject-modal" data-ops-modal role="dialog" aria-modal="true" aria-labelledby="settlement-reject-title" aria-hidden="true" tabindex="-1" hidden>
        <section class="kt-ops-modal__dialog">
          <header class="kt-ops-modal__header"><div><span class="kt-ops-eyebrow"><%= i18n.__('settlements.reject') %></span><h2 id="settlement-reject-title"><%= i18n.__('settlements.reasonLabel') %></h2><p><%= data.totalText %></p></div><button class="kt-ops-modal__close" type="button" data-ops-modal-close aria-label="<%= i18n.__('systemFinance.close') %>"><i class="ti ti-x"></i></button></header>
          <form action="/dashboard/settlementsProviders/actions/<%= data.id %>" method="post" enctype="multipart/form-data" data-ops-form novalidate>
            <input type="hidden" name="_csrf" value="<%= csrfToken %>"><input type="hidden" name="status" value="reject"><input type="hidden" name="total" value="<%= data.total %>">
            <div class="kt-ops-modal__body"><div class="kt-ops-field" data-ops-field><label for="settlement-reason"><%= i18n.__('settlements.reasonLabel') %></label><textarea class="kt-ops-control" id="settlement-reason" name="reason" minlength="2" maxlength="500" required></textarea><p class="kt-ops-field__error" data-ops-field-error></p></div></div>
            <footer class="kt-ops-modal__actions"><button class="kt-ops-btn" type="button" data-ops-modal-close><%= i18n.__('systemFinance.cancel') %></button><button class="kt-ops-btn kt-ops-btn--danger" 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.__('settlements.reject') %></span></button></footer>
          </form>
        </section>
      </div>
    <% } %>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
