basic-erp/apps/web/src/app/features/banking/payment-form.page.html

<sbo-toolbar bleed aria-label="Acciones del pago">
  <a class="tb" routerLink=".." title="Volver a la lista"><sbo-icon name="find" />Lista</a>
  <a class="tb" [routerLink]="isNew() ? '.' : '../nuevo'" title="Pago nuevo"><sbo-icon name="new" />Nuevo</a>
  <span class="tb-sep"></span>
  <button class="tb" type="button" aria-label="Primero" (click)="go('first')"><sbo-icon name="first" /></button>
  <button class="tb" type="button" aria-label="Anterior" (click)="go('prev')"><sbo-icon name="prev" /></button>
  <button class="tb" type="button" aria-label="Siguiente" (click)="go('next')"><sbo-icon name="next" /></button>
  <button class="tb" type="button" aria-label="Último" (click)="go('last')"><sbo-icon name="last" /></button>
</sbo-toolbar>

<sbo-window [title]="windowTitle()" [badge]="badge()" [status]="status()">
  <div class="sbo-hdr">
    <div class="sbo-col">
      <sbo-select-field label="Pago a" [options]="typeOptions" [value]="docType()" (valueChange)="onType($event)" [readonly]="saved()" />
      @if (!toAccounts()) {
        <sbo-lookup-field
          [label]="screen.partner.label"
          [lookup]="partnerLookup"
          [value]="cardCode()"
          [readonly]="saved()"
          required
          resolveOnLeave
          (valueChange)="onPartnerText($event)"
          (picked)="onPartner($event)"
        />
        <sbo-text-field label="Nombre" [value]="cardName()" readonly />
      }
    </div>
    <div class="sbo-col">
      @if (isNew()) {
        <sbo-select-field label="Serie" [options]="seriesOptions()" [value]="series()" (valueChange)="series.set($event === null ? null : +$event)" />
      } @else {
        <sbo-text-field label="Número" [value]="'' + (doc()?.['DocNum'] ?? '')" readonly />
      }
      <sbo-date-field label="Fecha de contabilización" [(value)]="docDate" [readonly]="saved()" required />
      <sbo-date-field label="Fecha del documento" [(value)]="taxDate" [readonly]="saved()" />
    </div>
  </div>

  @if (!toAccounts()) {
    <h3>Documentos pendientes</h3>
    @if (saved()) {
      <sbo-rows-table [columns]="appliedColumns" [rows]="docRows()" [readonly]="true" [removable]="false" emptyText="Pago a cuenta: sin documentos aplicados." />
    } @else {
      <sbo-rows-table
        [columns]="docColumns"
        [rows]="docRows()"
        (rowsChange)="setDocs($event)"
        [removable]="false"
        [emptyText]="loadingDocs() ? 'Cargando documentos…' : cardCode() ? 'Sin documentos pendientes.' : 'Elija el socio para ver sus documentos pendientes.'"
      />
      <p class="row">
        <button type="button" class="btn" (click)="payAll(true)">Pagar todo</button>
        <button type="button" class="btn" (click)="payAll(false)">Quitar</button>
        <button type="button" class="btn" (click)="useApplied()">Transferir lo aplicado</button>
      </p>
    }
  } @else {
    <h3>Cuentas contables</h3>
    <sbo-rows-table [columns]="accountColumns" [rows]="accounts()" (rowsChange)="setAccounts($event)" [readonly]="saved()" [removable]="!saved()" emptyText="Sin cuentas." />
    @if (!saved()) {
      <p class="row"><button type="button" class="btn" (click)="addAccount()">+ Añadir cuenta</button></p>
    }
  }

  <h3>Medios de pago</h3>
  <div class="sbo-hdr">
    <div class="sbo-col">
      <sbo-lookup-field label="Cuenta de efectivo" [lookup]="accountLookup" [value]="means().cashAccount" (valueChange)="setMeans({ cashAccount: $event })" [readonly]="saved()" />
      <sbo-number-field label="Efectivo" [decimals]="2" [value]="means().cashSum" (valueChange)="setMeans({ cashSum: $event })" [readonly]="saved()" />
      <sbo-lookup-field label="Cuenta de transferencia" [lookup]="accountLookup" [value]="means().transferAccount" (valueChange)="setMeans({ transferAccount: $event })" [readonly]="saved()" />
      <sbo-number-field label="Transferencia" [decimals]="2" [value]="means().transferSum" (valueChange)="setMeans({ transferSum: $event })" [readonly]="saved()" />
    </div>
    <div class="sbo-col">
      <sbo-date-field label="Fecha de transferencia" [value]="means().transferDate" (valueChange)="setMeans({ transferDate: $event })" [readonly]="saved()" />
      <sbo-text-field label="Referencia" [value]="means().transferReference" (valueChange)="setMeans({ transferReference: $event })" [readonly]="saved()" />
      <sbo-lookup-field label="Cuenta de cheques" [lookup]="accountLookup" [value]="means().checkAccount" (valueChange)="setMeans({ checkAccount: $event })" [readonly]="saved()" />
    </div>
  </div>

  <h3>Cheques</h3>
  <sbo-rows-table [columns]="checkColumns" [rows]="checks()" (rowsChange)="setChecks($event)" [readonly]="saved()" [removable]="!saved()" emptyText="Sin cheques." />
  @if (!saved()) {
    <p class="row"><button type="button" class="btn" (click)="addCheck()">+ Añadir cheque</button></p>
  }

  @if (screen.cards && (!saved() || cards().length)) {
    <h3>Tarjetas de crédito</h3>
    <sbo-rows-table [columns]="cardColumns" [rows]="cards()" (rowsChange)="setCards($event)" [readonly]="saved()" [removable]="!saved()" emptyText="Sin tarjetas." />
    @if (!saved()) {
      <p class="row"><button type="button" class="btn" (click)="addCard()">+ Añadir tarjeta</button></p>
    }
  }

  <div class="sbo-hdr" style="margin-top: 14px">
    <div class="sbo-col">
      <sbo-textarea-field label="Comentarios" [(value)]="remarks" [readonly]="saved()" />
      <sbo-text-field label="Comentarios del asiento" [(value)]="journalRemarks" [readonly]="saved()" />
    </div>
    <div class="sbo-col">
      <table class="totals">
        <tbody>
          @if (!toAccounts()) {
            <tr><td>Facturas</td><td>{{ fmt(totals().invoices) }}</td></tr>
            <tr><td>Notas de crédito</td><td>{{ fmt(totals().credits) }}</td></tr>
            <tr><td>Aplicado</td><td>{{ fmt(totals().applied) }}</td></tr>
          } @else {
            <tr><td>Cuentas</td><td>{{ fmt(totals().accounts) }}</td></tr>
          }
          <tr><td>Efectivo</td><td>{{ fmt(totals().cash) }}</td></tr>
          <tr><td>Transferencia</td><td>{{ fmt(totals().transfer) }}</td></tr>
          <tr><td>Cheques</td><td>{{ fmt(totals().checks) }}</td></tr>
          @if (screen.cards) {
            <tr><td>Tarjetas de crédito</td><td>{{ fmt(totals().cards) }}</td></tr>
          }
          <tr class="strong"><td>Total medios de pago</td><td>{{ fmt(totals().means) }}</td></tr>
          @if (!toAccounts()) {
            <tr><td>A cuenta del socio de negocio</td><td>{{ fmt(totals().onAccount) }}</td></tr>
          }
        </tbody>
      </table>
    </div>
  </div>

  @if (isNew()) {
    <button sboActions class="btn main" type="button" [disabled]="saving() || loading()" (click)="save()">Crear</button>
  } @else if (!cancelled() && doc()) {
    @if (confirmCancel()) {
      <span sboActions class="confirm">¿Anular el pago?</span>
      <button sboActions class="btn main" type="button" [disabled]="saving()" (click)="cancelPayment()">Sí, anular</button>
      <button sboActions class="btn" type="button" (click)="confirmCancel.set(false)">No</button>
    } @else {
      <button sboActions class="btn" type="button" [disabled]="saving()" (click)="confirmCancel.set(true)">Anular pago</button>
    }
  }
  <a sboActions class="btn" routerLink="..">{{ saved() ? 'Cerrar' : 'Cancelar' }}</a>
</sbo-window>