<div class="lg-backdrop" *ngIf="open" (click)="close.emit()"></div>
<div class="lg-modal" *ngIf="open">
  <div class="lg-modal-card" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg"><i class="bi bi-plus-circle"></i></span>
        <span>{{ title }}</span>
      </div>
      <button class="btn-icon" type="button" (click)="close.emit()" aria-label="Fechar modal">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>

    <div class="modal-body">
      <section class="form-section">
        <div class="section-head">
          <h4>Dados do parcelamento</h4>
          <small>Preencha os campos obrigatorios para salvar o cadastro.</small>
        </div>

        <div class="form-grid">
          <div class="form-field">
            <label>Ano Ref *</label>
            <input type="number" [(ngModel)]="model.anoRef" />
            <small *ngIf="touched && !model.anoRef" class="error">Campo obrigatorio.</small>
          </div>

          <div class="form-field">
            <label>Item *</label>
            <input type="number" [(ngModel)]="model.item" />
            <small *ngIf="touched && !model.item" class="error">Campo obrigatorio.</small>
          </div>

          <div class="form-field">
            <label>Linha *</label>
            <input type="text" [(ngModel)]="model.linha" />
            <small *ngIf="touched && !model.linha" class="error">Campo obrigatorio.</small>
          </div>

          <div class="form-field">
            <label>Cliente *</label>
            <input type="text" [(ngModel)]="model.cliente" />
            <small *ngIf="touched && !model.cliente" class="error">Campo obrigatorio.</small>
          </div>

          <div class="form-field">
            <label>Qt Parcelas</label>
            <input type="text" placeholder="1/12" [(ngModel)]="model.qtParcelas" (ngModelChange)="onQtParcelasChange()" />
          </div>

          <div class="form-field">
            <label>Parcela atual</label>
            <input type="number" min="0" [(ngModel)]="model.parcelaAtual" (ngModelChange)="onParcelaChange()" />
          </div>

          <div class="form-field">
            <label>Total de parcelas *</label>
            <input type="number" min="1" [(ngModel)]="model.totalParcelas" (ngModelChange)="onParcelaChange(); onValueChange()" />
            <small *ngIf="touched && (!model.totalParcelas || model.totalParcelas <= 0)" class="error">Informe a quantidade.</small>
          </div>

          <div class="form-field">
            <label>Valor cheio *</label>
            <input type="text" placeholder="0,00" [(ngModel)]="model.valorCheio" (ngModelChange)="onValueChange()" />
            <small *ngIf="touched && !model.valorCheio" class="error">Informe o valor.</small>
          </div>

          <div class="form-field">
            <label>Desconto</label>
            <input type="text" placeholder="0,00" [(ngModel)]="model.desconto" (ngModelChange)="onValueChange()" />
          </div>

          <div class="form-field">
            <label>Valor com desconto</label>
            <input type="text" [(ngModel)]="model.valorComDesconto" (ngModelChange)="onValorComDescontoChange()" />
          </div>

          <div class="form-field">
            <label>Competencia inicial *</label>
            <div class="competencia-row">
              <input type="number" placeholder="Ano" [(ngModel)]="model.competenciaAno" (ngModelChange)="onCompetenciaChange()" />
              <app-select
                class="select-glass"
                size="sm"
                [options]="monthOptions"
                labelKey="label"
                valueKey="value"
                placeholder="Mes"
                [(ngModel)]="model.competenciaMes"
                (ngModelChange)="onCompetenciaChange()">
              </app-select>
            </div>
            <small *ngIf="touched && (!model.competenciaAno || !model.competenciaMes)" class="error">Informe ano e mes.</small>
          </div>

          <div class="form-field final">
            <label>Competencia final</label>
            <div class="final-box">{{ competenciaFinalLabel }}</div>
          </div>
        </div>
      </section>

      <section class="preview-card">
        <div class="preview-head">
          <div>
            <h4>Parcelas por competencia</h4>
            <small>Edite os valores por mes (max 36 exibidas)</small>
          </div>
        </div>

        <div class="preview-table">
          <table>
            <thead>
              <tr>
                <th>Mes/Ano</th>
                <th>Parcela</th>
                <th class="text-end">Valor</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="previewRows.length === 0">
                <td colspan="3" class="empty">Preencha as informacoes para gerar a previa.</td>
              </tr>
              <tr *ngFor="let row of previewRows; trackBy: trackByPreview">
                <td>{{ row.label }}</td>
                <td>{{ row.parcela }}</td>
                <td class="text-end">
                  <input
                    type="text"
                    class="inline-input"
                    [ngModel]="row.valor"
                    (ngModelChange)="onPreviewValueChange(row.competencia, $event)"
                    placeholder="0,00" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <p class="todo-note" *ngIf="errorMessage">{{ errorMessage }}</p>
      </section>
    </div>

    <div class="modal-footer">
      <button class="btn-ghost" type="button" (click)="close.emit()">Cancelar</button>
      <button class="btn-primary" type="button" [disabled]="loading" (click)="onSave()">
        {{ loading ? 'Salvando...' : submitLabel }}
      </button>
    </div>
  </div>
</div>
