<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.CLOSE_SESSION' | translate" [style]="{width: '520px'}" [modal]="true">

  @if (loadingSession()) {
    <div class="loading-state">
      <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
    </div>
  } @else {
    <!-- Session Info -->
    <div class="session-summary">
      <div class="summary-row">
        <span class="label">{{ 'POS.SESSION_ID' | translate }}</span>
        <span class="value">#{{ session().id }}</span>
      </div>
      <div class="summary-row">
        <span class="label">{{ 'POS.TERMINAL' | translate }}</span>
        <span class="value">{{ session().terminal?.name }}</span>
      </div>
      <div class="summary-row">
        <span class="label">{{ 'POS.OPENING_BALANCE' | translate }}</span>
        <span class="value">{{ openingBalance() | number:'1.2-2' }}</span>
      </div>
    </div>

    <!-- Sales Summary -->
    <div class="sales-summary">
      <h4>{{ 'POS.SALES_SUMMARY' | translate }}</h4>
      <div class="summary-row">
        <span class="label">{{ 'POS.TOTAL_SALES' | translate }}</span>
        <span class="value highlight">{{ totalSales() | number:'1.2-2' }}</span>
      </div>
      <div class="summary-row">
        <span class="label">{{ 'POS.INVOICES_COUNT' | translate }}</span>
        <span class="value">{{ invoicesCount() }}</span>
      </div>
      @for (m of salesByMethod(); track m.method) {
        <div class="summary-row sub">
          <span class="label">{{ m.label }}</span>
          <span class="value">{{ m.total | number:'1.2-2' }}</span>
        </div>
      }
    </div>

    <!-- Payment Counting -->
    <div class="payments-section">
      <h4>{{ 'POS.PAYMENT_COUNTING' | translate }}</h4>
      @for (payment of payments(); track $index) {
        <div class="payment-row">
          <span class="method-label">{{ getMethodLabel(payment.method) }}</span>
          <div class="amounts">
            <div class="amount-field">
              <label>{{ 'POS.EXPECTED' | translate }}</label>
              <span class="expected-val">{{ payment.expected_amount | number:'1.2-2' }}</span>
            </div>
            <div class="amount-field">
              <label>{{ 'POS.ACTUAL_AMOUNT' | translate }}</label>
              <p-inputNumber [ngModel]="payment.actual_amount" (ngModelChange)="updateActualAmount($index, $event)" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{width: '100%'}" />
            </div>
          </div>
        </div>
      }

      <!-- Totals -->
      <div class="counting-totals">
        <div class="summary-row">
          <span class="label">{{ 'POS.EXPECTED_TOTAL' | translate }}</span>
          <span class="value">{{ openingBalance() + totalSales() | number:'1.2-2' }}</span>
        </div>
        <div class="summary-row">
          <span class="label">{{ 'POS.ACTUAL_TOTAL' | translate }}</span>
          <span class="value">{{ openingBalance() + totalActual() | number:'1.2-2' }}</span>
        </div>
        @if (difference() !== 0) {
          <div class="summary-row" [class.over]="difference() > 0" [class.short]="difference() < 0">
            <span class="label">{{ 'POS.DIFFERENCE' | translate }}</span>
            <span class="value">{{ difference() | number:'1.2-2' }}</span>
          </div>
        }
      </div>
    </div>

    <!-- Session Transactions -->
    <div class="transactions-section">
      <button pButton
        [label]="(showTransactions() ? 'POS.HIDE' : 'POS.VIEW_TRANSACTIONS') | translate"
        [icon]="showTransactions() ? 'pi pi-chevron-up' : 'pi pi-list'"
        severity="secondary"
        size="small"
        [outlined]="true"
        (click)="showTransactions.set(!showTransactions())"
        [style]="{width: '100%'}"
      ></button>

      @if (showTransactions()) {
        <div class="transactions-list">
          @if (sessionTransactions().length === 0) {
            <div class="no-transactions">
              <i class="pi pi-inbox"></i>
              <span>{{ 'POS.NO_TRANSACTIONS' | translate }}</span>
            </div>
          } @else {
            <table class="transactions-table">
              <thead>
                <tr>
                  <th>{{ 'POS.INVOICE_NUMBER' | translate }}</th>
                  <th>{{ 'POS.PAYMENT_METHOD' | translate }}</th>
                  <th>{{ 'POS.AMOUNT' | translate }}</th>
                  <th>{{ 'POS.TIME' | translate }}</th>
                </tr>
              </thead>
              <tbody>
                @for (tx of sessionTransactions(); track tx.id) {
                  <tr>
                    <td class="tx-invoice">{{ tx.invoice_number }}</td>
                    <td>{{ tx.method_label }}</td>
                    <td class="tx-amount">{{ tx.amount | number:'1.2-2' }}</td>
                    <td class="tx-time">{{ tx.created_at | date:'shortTime' }}</td>
                  </tr>
                }
              </tbody>
            </table>
          }
        </div>
      }
    </div>

    <!-- Notes -->
    <div class="notes-section">
      <label>{{ 'POS.CLOSING_NOTES' | translate }}</label>
      <textarea pTextarea [ngModel]="closingNotes()" (ngModelChange)="closingNotes.set($event)" rows="3" [style]="{width: '100%'}"></textarea>
    </div>
  }

  <ng-template pTemplate="footer">
    <button pButton [label]="'POS.CLOSE_SESSION' | translate" icon="pi pi-lock" severity="danger" [loading]="loading()" [disabled]="loadingSession()" (click)="close()"></button>
  </ng-template>
</p-dialog>
