line-gestao-frontend/src/app/components/page-modals/vigencia-modals/vigencia-modals.html

<app-modal-layer
  [open]="detailsOpen || editOpen || deleteOpen || createOpen"
  [showBackdrop]="false"
  overlayClass="lg-modal"
  (close)="closeDetails(); closeEdit(); cancelDelete(); closeCreate()"
>
  <div *ngIf="detailsOpen" class="lg-modal-card modal-lg" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg primary-soft"><i class="bi bi-card-list"></i></span>
        Detalhes da Vigência
      </div>
      <button class="btn-icon" (click)="closeDetails()"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="modal-body bg-light-gray">
      <div class="details-dashboard">
        <div class="detail-box">
          <div class="box-header justify-content-center">
            <span><i class="bi bi-card-text me-2"></i> Informações da Linha</span>
          </div>
          <div class="box-body">
            <div class="info-grid">
              <div class="info-item span-2">
                <span class="lbl">Cliente</span>
                <span class="val">{{ selectedRow?.cliente || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="lbl">Linha</span>
                <span class="val fw-black text-blue">{{ selectedRow?.linha || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="lbl">Conta</span>
                <span class="val">{{ selectedRow?.conta || '-' }}</span>
              </div>
              <div class="info-item span-2">
                <span class="lbl">Usuário</span>
                <span class="val">{{ selectedRow?.usuario || '-' }}</span>
              </div>
              <div class="info-item span-2">
                <span class="lbl">Plano</span>
                <span class="val">{{ selectedRow?.planoContrato || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="lbl">Efetivação</span>
                <span class="val">{{ selectedRow?.dtEfetivacaoServico ? (selectedRow?.dtEfetivacaoServico | date:'dd/MM/yyyy') : '-' }}</span>
              </div>
              <div class="info-item">
                <span class="lbl">Término</span>
                <span class="val" [class.text-danger]="isVencido(selectedRow?.dtTerminoFidelizacao)">
                  {{ selectedRow?.dtTerminoFidelizacao ? (selectedRow?.dtTerminoFidelizacao | date:'dd/MM/yyyy') : '-' }}
                </span>
              </div>
              <div class="info-item">
                <span class="lbl">Situação</span>
                <span class="status-pill" [class.is-danger]="isVencido(selectedRow?.dtTerminoFidelizacao)">
                  {{ isVencido(selectedRow?.dtTerminoFidelizacao) ? 'Vencido' : 'Ativo' }}
                </span>
              </div>
              <div class="info-item">
                <span class="lbl">Renovação</span>
                <span class="val">
                  {{ selectedRow?.autoRenewYears ? ('Auto +' + selectedRow?.autoRenewYears + ' ano(s)') : 'Não programada' }}
                </span>
              </div>
              <div class="info-item">
                <span class="lbl">Valor Total</span>
                <span class="val text-brand">{{ (selectedRow?.total || 0) | currency:'BRL' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-footer p-3 text-end border-top">
      <button class="btn btn-glass btn-sm" (click)="closeDetails()">Fechar</button>
    </div>
  </div>

<!-- CREATE MODAL -->
  <div *ngIf="createOpen" class="lg-modal-card modal-xl create-modal" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg primary-soft"><i class="bi bi-plus-circle"></i></span>
        Nova Vigência
      </div>
      <button class="btn-icon" (click)="closeCreate()"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="modal-body bg-light-gray">
      <div class="edit-sections">
        <details open class="detail-box">
          <summary class="box-header">
            <span><i class="bi bi-link-45deg me-2"></i> Vínculo com GERAL</span>
            <i class="bi bi-chevron-down ms-auto transition-icon"></i>
          </summary>
          <div class="box-body">
            <div class="form-grid">
              <div class="form-field span-2">
                <label>Cliente (GERAL)</label>
                <app-select
                  class="form-select"
                  size="sm"
                  [options]="clientsFromGeral"
                  [(ngModel)]="createModel.selectedClient"
                  (ngModelChange)="onCreateClientChange()"
                  [disabled]="createClientsLoading"
                ></app-select>
              </div>
              <div class="form-field span-2">
                <label>Linha (GERAL)</label>
                <app-select
                  class="form-select"
                  size="sm"
                  [options]="lineOptionsCreate"
                  labelKey="label"
                  valueKey="id"
                  [(ngModel)]="createModel.mobileLineId"
                  (ngModelChange)="onCreateLineChange()"
                  [disabled]="createLinesLoading || !createModel.selectedClient"
                ></app-select>
              </div>
            </div>
          </div>
        </details>

        <details open class="detail-box">
          <summary class="box-header">
            <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
            <i class="bi bi-chevron-down ms-auto transition-icon"></i>
          </summary>
          <div class="box-body">
            <div class="form-grid">
              <div class="form-field"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="createModel.cliente" /></div>
              <div class="form-field field-line"><label>Linha</label><input class="form-control form-control-sm" inputmode="numeric" [(ngModel)]="createModel.linha" /></div>
              <div class="form-field"><label>Conta</label><input class="form-control form-control-sm" [(ngModel)]="createModel.conta" /></div>
              <div class="form-field"><label>Usuário</label><input class="form-control form-control-sm" [(ngModel)]="createModel.usuario" /></div>
              <div class="form-field span-2">
                <label>Plano</label>
                <app-select
                  *ngIf="planOptions.length > 0"
                  class="form-select"
                  size="sm"
                  [options]="planOptions"
                  [(ngModel)]="createModel.planoContrato"
                  (ngModelChange)="onCreatePlanChange()"
                ></app-select>
                <input
                  *ngIf="planOptions.length === 0"
                  class="form-control form-control-sm"
                  [(ngModel)]="createModel.planoContrato"
                  (ngModelChange)="onCreatePlanChange()"
                />
              </div>
              <div class="form-field field-item field-auto">
                <label>Item (Automático)</label>
                <input class="form-control form-control-sm bg-light" type="number" [(ngModel)]="createModel.item" readonly title="Gerado automaticamente pelo sistema" />
                <small class="field-hint">Gerado automaticamente pelo sistema</small>
              </div>
            </div>
          </div>
        </details>

        <details open class="detail-box">
          <summary class="box-header">
            <span><i class="bi bi-calendar-event me-2"></i> Vigência e Valor</span>
            <i class="bi bi-chevron-down ms-auto transition-icon"></i>
          </summary>
          <div class="box-body">
            <div class="form-grid">
              <div class="form-field"><label>Efetivação</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createEfetivacao" /></div>
              <div class="form-field"><label>Término</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createTermino" /></div>
              <div class="form-field span-2"><label>Total</label><input class="form-control form-control-sm" type="number" [(ngModel)]="createModel.total" /></div>
            </div>
          </div>
        </details>
      </div>
    </div>

    <div class="modal-footer p-3 text-end border-top">
      <button class="btn btn-glass btn-sm me-2" (click)="closeCreate()">Cancelar</button>
      <button class="btn btn-brand btn-sm" [disabled]="createSaving" (click)="saveCreate()">
        {{ createSaving ? 'Salvando...' : 'Salvar' }}
      </button>
    </div>
  </div>

<!-- EDIT MODAL -->
  <div *ngIf="editOpen" class="lg-modal-card modal-xl" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span>
        Editar Vigência
      </div>
      <button class="btn-icon" (click)="closeEdit()"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="modal-body bg-light-gray" *ngIf="editModel">
      <div class="edit-sections">
        <details open class="detail-box">
          <summary class="box-header">
            <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
            <i class="bi bi-chevron-down ms-auto transition-icon"></i>
          </summary>
          <div class="box-body">
            <div class="form-grid">
              <div class="form-field"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cliente" /></div>
              <div class="form-field field-line"><label>Linha</label><input class="form-control form-control-sm" inputmode="numeric" [(ngModel)]="editModel.linha" /></div>
              <div class="form-field"><label>Conta</label><input class="form-control form-control-sm" [(ngModel)]="editModel.conta" /></div>
              <div class="form-field"><label>Usuário</label><input class="form-control form-control-sm" [(ngModel)]="editModel.usuario" /></div>
              <div class="form-field span-2"><label>Plano</label><input class="form-control form-control-sm" [(ngModel)]="editModel.planoContrato" (ngModelChange)="onEditPlanChange()" /></div>
            </div>
          </div>
        </details>

        <details open class="detail-box">
          <summary class="box-header">
            <span><i class="bi bi-calendar-event me-2"></i> Vigência e Valor</span>
            <i class="bi bi-chevron-down ms-auto transition-icon"></i>
          </summary>
          <div class="box-body">
            <div class="form-grid">
              <div class="form-field"><label>Efetivação</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editEfetivacao" /></div>
              <div class="form-field"><label>Término</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editTermino" /></div>
              <div class="form-field span-2"><label>Total</label><input class="form-control form-control-sm" type="number" [(ngModel)]="editModel.total" /></div>
            </div>
          </div>
        </details>
      </div>
    </div>

    <div class="modal-footer p-3 text-end border-top">
      <button class="btn btn-glass btn-sm me-2" (click)="closeEdit()">Cancelar</button>
      <button class="btn btn-primary btn-sm" [disabled]="editSaving" (click)="saveEdit()">
        {{ editSaving ? 'Salvando...' : 'Salvar' }}
      </button>
    </div>
  </div>

<!-- DELETE MODAL -->
  <div *ngIf="deleteOpen" class="lg-modal-card modal-lg" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
        Remover Vigência
      </div>
      <button class="btn-icon" (click)="cancelDelete()"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="modal-body bg-light-gray">
      <div class="confirm-delete">
        <div class="confirm-icon"><i class="bi bi-trash"></i></div>
        <p class="mb-0">Confirma remover o registro <strong>{{ deleteTarget?.linha }}</strong>?</p>
      </div>
    </div>
    <div class="modal-footer p-3 text-end border-top">
      <button class="btn btn-glass btn-sm me-2" (click)="cancelDelete()">Cancelar</button>
      <button class="btn btn-danger btn-sm" (click)="confirmDelete()">Excluir</button>
    </div>
  </div>
</app-modal-layer>