<p-toast />
<p-confirmDialog />

<div class="branches-page">
  <app-page-header title="BRANCHES.TITLE" subtitle="BRANCHES.SUBTITLE" (refresh)="retry()">
    <p-button
      [label]="'BRANCHES.NEW_BRANCH' | translate"
      icon="pi pi-plus"
      (onClick)="openNew()"
    />
  </app-page-header>

  <ng-template #bodyTpl let-branch>
    <tr>
      <td>{{ branch.name_ar }}</td>
      <td>{{ branch.name_en }}</td>
      <td>{{ branch.code }}</td>
      <td>{{ branch.city }}</td>
      <td>{{ getCountryName(branch.country) }}</td>
      <td>
        <p-tag
          [value]="branch.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
          [severity]="branch.is_active ? 'success' : 'danger'"
        />
      </td>
      <td>
        <div class="action-buttons">
          <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="editBranch(branch)" />
          <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="deleteBranch(branch)" />
        </div>
      </td>
    </tr>
  </ng-template>
  <app-data-table [data]="(branches$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editingBranch() ? ('BRANCHES.EDIT_BRANCH' | translate) : ('BRANCHES.NEW_BRANCH' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="branchForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'BRANCHES.NAME_AR' | translate }} *</label>
      <input pInputText formControlName="name_ar" />
      @if (branchForm.get('name_ar')?.touched && branchForm.get('name_ar')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
    </div>
    <div class="form-field">
      <label>{{ 'BRANCHES.NAME_EN' | translate }}</label>
      <input pInputText formControlName="name_en" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'BRANCHES.CODE' | translate }}</label>
        <input pInputText formControlName="code" />
      </div>
      <div class="form-field">
        <label>{{ 'BRANCHES.PHONE' | translate }}</label>
        <input pInputText formControlName="phone" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'BRANCHES.EMAIL' | translate }}</label>
      <input pInputText formControlName="email" type="email" />
      @if (branchForm.get('email')?.touched && branchForm.get('email')?.hasError('email')) {
        <small class="p-error">{{ 'BRANCHES.INVALID_EMAIL' | translate }}</small>
      }
    </div>
    <div class="form-field">
      <label>{{ 'BRANCHES.ADDRESS' | translate }}</label>
      <input pInputText formControlName="address" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'BRANCHES.CITY' | translate }}</label>
        <input pInputText formControlName="city" />
      </div>
      <div class="form-field">
        <label>{{ 'BRANCHES.COUNTRY' | translate }}</label>
        <p-select
          formControlName="country"
          [options]="countries"
          optionLabel="name"
          optionValue="code"
          [filter]="true"
          filterBy="name,name_ar,code"
          [showClear]="true"
          [placeholder]="'BRANCHES.SELECT_COUNTRY' | translate"
        />
      </div>
    </div>
    <div class="form-field switch-field">
      <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      <p-toggleSwitch formControlName="is_active" />
    </div>
  </form>
</app-form-dialog>
