<div class="flex flex-col gap-6">
  <app-card-data
    [cardTitle]="`اطلاعات مشتری (${customer() ? (customer()?.type === 'LEGAL' ? 'حقوقی' : 'حقیقی') : ''})`"
    [editable]="true"
    [(editMode)]="editMode"
  >
    <div class="flex flex-col gap-4">
      @if (customer()?.type === "LEGAL") {
        <div class="listKeyValue">
          <app-key-value label="عنوان" [value]="customer()?.legal?.company_name" />
          <app-key-value label="کد اقتصادی" [value]="customer()?.legal?.economic_code" />
          <app-key-value label="شماره ثبت" [value]="customer()?.legal?.registration_number" />
          <app-key-value label="کد پستی" [value]="customer()?.legal?.postal_code" />
        </div>
      } @else if (customer()?.type === "INDIVIDUAL") {
        <div class="listKeyValue">
          <app-key-value label="نام" [value]="customer()?.individual?.first_name" />
          <app-key-value label="نام خانوادگی" [value]="customer()?.individual?.last_name" />
          <app-key-value label="عنوان" [value]="customer()?.individual?.national_id" />
          <app-key-value label="کد اقتصادی" [value]="customer()?.individual?.economic_code" />
          <app-key-value label="کد پستی" [value]="customer()?.individual?.postal_code" />
        </div>
      }
    </div>
  </app-card-data>

  <consumer-customer-saleInvoice-list [customerId]="customerId()" />

  @if (customer()) {
    <consumer-customer-form-dialog [(visible)]="editMode" [customer]="customer()!" (onSubmit)="getData()" />
  }
</div>
