<p-toast></p-toast>

<app-page-header [title]="'HR.REPORTS.TITLE' | translate" [subtitle]="'HR.REPORTS.SUBTITLE' | translate" icon="pi pi-chart-bar"></app-page-header>

<!-- Date Filters -->
<div class="flex align-items-center gap-3 mb-3">
  <div class="flex flex-column gap-1">
    <label class="text-sm">{{ 'HR.REPORTS.DATE_FROM' | translate }}</label>
    <p-datePicker [(ngModel)]="dateFrom" dateFormat="yy-mm-dd" [showIcon]="true" [placeholder]="'HR.REPORTS.DATE_FROM' | translate"></p-datePicker>
  </div>
  <div class="flex flex-column gap-1">
    <label class="text-sm">{{ 'HR.REPORTS.DATE_TO' | translate }}</label>
    <p-datePicker [(ngModel)]="dateTo" dateFormat="yy-mm-dd" [showIcon]="true" [placeholder]="'HR.REPORTS.DATE_TO' | translate"></p-datePicker>
  </div>
  <div class="flex align-items-end" style="padding-top: 1.25rem">
    <button pButton [label]="'HR.REPORTS.GENERATE' | translate" icon="pi pi-search" (click)="generateReport()"></button>
  </div>
</div>

<p-tabs [value]="activeTab()" (valueChange)="onTabChange($event)">
  <p-tablist>
    <p-tab [value]="0">{{ 'HR.REPORTS.WORKFORCE' | translate }}</p-tab>
    <p-tab [value]="1">{{ 'HR.REPORTS.ATTENDANCE_REPORT' | translate }}</p-tab>
    <p-tab [value]="2">{{ 'HR.REPORTS.LEAVE_REPORT' | translate }}</p-tab>
    <p-tab [value]="3">{{ 'HR.REPORTS.PAYROLL_SUMMARY' | translate }}</p-tab>
    <p-tab [value]="4">{{ 'HR.REPORTS.LOANS_REPORT' | translate }}</p-tab>
    <p-tab [value]="5">{{ 'HR.REPORTS.TURNOVER' | translate }}</p-tab>
  </p-tablist>

  <p-tabpanels>
    <!-- Workforce -->
    <p-tabpanel [value]="0">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (workforceData()) {
        <div class="grid mt-2">
          <div class="col-12">
            <p-card>
              <pre class="text-sm" style="white-space: pre-wrap">{{ workforceData() | json }}</pre>
            </p-card>
          </div>
        </div>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>

    <!-- Attendance -->
    <p-tabpanel [value]="1">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (attendanceData()) {
        <p-card>
          <pre class="text-sm" style="white-space: pre-wrap">{{ attendanceData() | json }}</pre>
        </p-card>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>

    <!-- Leave -->
    <p-tabpanel [value]="2">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (leaveData()) {
        <p-card>
          <pre class="text-sm" style="white-space: pre-wrap">{{ leaveData() | json }}</pre>
        </p-card>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>

    <!-- Payroll Summary -->
    <p-tabpanel [value]="3">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (payrollData()) {
        <p-card>
          <pre class="text-sm" style="white-space: pre-wrap">{{ payrollData() | json }}</pre>
        </p-card>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>

    <!-- Loans -->
    <p-tabpanel [value]="4">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (loansData()) {
        <p-card>
          <pre class="text-sm" style="white-space: pre-wrap">{{ loansData() | json }}</pre>
        </p-card>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>

    <!-- Turnover -->
    <p-tabpanel [value]="5">
      @if (loading()) {
        <div class="flex justify-content-center p-5"><p-progressSpinner></p-progressSpinner></div>
      } @else if (turnoverData()) {
        <p-card>
          <pre class="text-sm" style="white-space: pre-wrap">{{ turnoverData() | json }}</pre>
        </p-card>
      } @else {
        <div class="text-center p-4 text-500">{{ 'HR.REPORTS.NO_DATA' | translate }}</div>
      }
    </p-tabpanel>
  </p-tabpanels>
</p-tabs>
