<div class="patient-container">
  <div class="patient-card">
    <!-- Patient Image -->
    <div class="patient-image">
      <img [src]="patientImageUrl || 'assets/default-profile.png'" alt="Patient Image">
    </div>

    <!-- Patient Information -->
    <div class="patient-info">
      <h2 class="patient-name">{{ patientdto?.name }}</h2>
      <div class="patient-details">
        <div class="info-item">
          <strong>Age:</strong> {{ patientdto?.age }}
        </div>
        <div class="info-item">
          <strong>Gender:</strong> {{ gender[patientdto?.gender] }}
        </div>
        <div class="info-item">
          <strong>Mobile:</strong> {{ patientdto?.mobile }}
        </div>
        <div class="info-item">
          <strong>Email:</strong> {{ patientdto?.email }}
        </div>
        <div class="info-item">
          <strong>Blood Group:</strong> {{ patientdto?.bloodGroup }}
        </div>
        <div class="info-item">
          <strong>Doctor:</strong> {{ patientdto?.doctorAssigned || 'N/A' }}
        </div>
        <div class="info-item">
          <strong>Admission:</strong> {{ patientdto?.admissionDate | date }}
        </div>
        <div class="info-item">
          <strong>Discharge:</strong> {{ patientdto?.dischargeDate | date }}
        </div>
        <div class="info-item">
          <strong>Treatment:</strong> {{ patientdto?.treatment || 'N/A' }}
        </div>
        <div class="info-item">
          <strong>Status:</strong>
          <span class="status">
            {{ status[patientdto?.status] }}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <button class="btn btn-sm btn-primary mb-2" (click)="backtopatient()">
    <i class="pi pi-arrow-left"></i> Back
  </button>
</div>

<div>
  <p-table #dt2 dataKey="id" [value]="patientrecords" [paginator]="true" [rows]="10" [totalRecords]="totalRecords"
    [lazy]="true" (onLazyLoad)="loadPatient($event,patientId)" [rowsPerPageOptions]="[10, 20, 50]"
    [responsiveLayout]="'scroll'" [globalFilterFields]="['id', 'name', 'diagnosis']"
    [filters]="{ global: { value: '', matchMode: 'contains' } }" class="table table-striped">

    <ng-template pTemplate="caption">
      <div class="flex">
        <h2 class="mr-auto">{{'::PatientHeader' | abpLocalization}}</h2>
        <div>
          <button *ngIf="createpermission" pButton class="p-button-rounded p-button-success ml-2"
            (click)="openNewPatientDialog()">
            <i class="pi pi-plus-circle"></i>
          </button>
          <button pButton class="p-button-rounded p-button-warning ml-2" (click)="exportPatient()">
            <i class="pi pi-download"></i>
          </button>
          <p-iconField iconPosition="right" class="ml-2">
            <p-inputIcon>
              <i class="pi pi-search"></i>
            </p-inputIcon>
            <input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')"
              [(ngModel)]="globalFilter" placeholder="Search keyword" />
          </p-iconField>
        </div>
      </div>
    </ng-template>

    <ng-template pTemplate="header">
      <tr>
        <th class="hidden" pSortableColumn="id">Patient ID <p-sortIcon field="id" /></th>
        <th pSortableColumn="fullName">Full Name <p-sortIcon field="fullName" /></th>
        <th pSortableColumn="gender">Gender <p-sortIcon field="fullName" /></th>
        <th pSortableColumn="dateOfAdmission">Date of Admission <p-sortIcon field="dateOfAdmission" /></th>
        <th pSortableColumn="diagnosis">Diagnosis <p-sortIcon field="diagnosis" /></th>
        <th>Lab Reports</th>
        <th>Medications</th>
        <th pSortableColumn="nextFollowUp">Next Follow-Up <p-sortIcon field="nextFollowUp" /></th>
        <th pSortableColumn="status">Status <p-sortIcon field="status" /></th>
        <th>Actions</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-patientrecord>
      <tr>
        <td class="hidden">{{ patientrecord.id }}</td>
        <td>{{ patientrecord.patients.name }}</td>
        <td>
          <span class="badge" [ngClass]="patientrecord.patients.gender === 1 ? 'male' : 'female'">
            {{ gender[patientrecord.patients.gender] }}
          </span>
        </td>
        <td>{{ patientrecord.dateOfAdmission | date }}</td>
        <td>{{ patientrecord.diagnosis }}</td>
        <td><i class="pi pi-file-pdf pdf-icon"></i></td>
        <td><i class="pi pi-file-pdf pdf-icon"></i></td>
        <td>{{ patientrecord.nextFollowUp | date }}</td>
        <td>{{ status[patientrecord.patients.status] }}</td>
        <td class="d-flex">
          <button *ngIf="editpermission" class="btn btn-warning btn-sm" (click)="editPatient(patientrecord)"><i
              class="pi pi-pencil"></i></button>
          <button *ngIf="deletepermission" class="btn btn-danger btn-sm ml-1"
            (click)="deletePatient(patientrecord.id)"><i class="pi pi-trash"></i></button>
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="11">No Patients found.</td>
      </tr>
    </ng-template>
  </p-table>
  <span>Total Records: {{totalRecords}}</span>
</div>
<div>
  <p-dialog *ngIf="patientDialog" header="{{patientDialogTitle}}" [(visible)]="patientDialog" [modal]="true"
    [closable]="true" [style]="{width: '85%', height: '100%'}">
    <form #patientrecord="ngForm" (ngSubmit)="savePatient(patientrecord)" novalidate>
      <div class="p-fluid">
        <div class="p-grid">
          <!-- <div class="p-col-6">
            <div class="field">
              <label for="fullname">Full Name</label>
              <input id="fullname" name="fullname" type="text" autocomplete="off" pInputText
                [(ngModel)]="selectedPatient.fullName" placeholder="Enter full patient name" required
                #fullname="ngModel" />
              <small *ngIf="fullname.invalid && fullname.touched" class="p-error">
                Full Name is required.
              </small>
            </div>
          </div> -->
          <!-- <div class="p-col-6">
            <div class="field">
              <label for="mobile">Mobile</label>
              <input id="mobile" name="mobile" type="text" autocomplete="off" pInputText
                [(ngModel)]="selectedPatient.mobile" maxlength="10" pattern="^[0-9]{10}$"
                placeholder="Enter mobile number" required #mobile="ngModel" />
              <small *ngIf="mobile.invalid && mobile.touched" class="p-error">
                Mobile number is required and must be 10 digits.
              </small>
            </div>
          </div> -->
        </div>

        <div class="p-grid">
          <div class="p-col-6">
            <!-- <div class="field">
              <label for="gender">Gender</label>
              <div>
                <label class="mx-1">
                  <input style="background-color: #fff;" id="male" type="radio" name="gender"
                    [(ngModel)]="selectedgender" [value]="1" required #gender="ngModel" />
                  Male
                </label>
                <label>
                  <input style="background-color: #fff;" id="female" type="radio" name="gender"
                    [(ngModel)]="selectedgender" [value]="2" required />
                  Female
                </label>
                <small *ngIf="!selectedgender" class="p-error">
                  Please select a gender.
                </small>
              </div>
            </div> -->
          </div>
          <div class="p-col-6">
            <div class="field">
              <label for="admissionDate">Admission Date</label>
              <p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectdateOfAdmission" showIcon required
                #admissionDate="ngModel"></p-calendar>
              <small *ngIf="admissionDate.invalid && admissionDate.touched" class="p-error">
                Admission Date is required.
              </small>
            </div>
          </div>
        </div>

        <div class="p-grid">
          <div class="p-col-6">
            <div class="field">
              <label for="labReport">Lab Report</label>
              <input type="file" id="labReport" name="labReport" accept=".pdf,.doc,.docx"
                (change)="handleLabReportUpload($event)" />
            </div>
            <small *ngIf="labReportUrlpath !==''">{{labReportUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
          </div>
          <div class="p-col-6">
            <div class="field">
              <label for="medications">Medications</label>
              <input type="file" id="medications" name="medications" accept=".pdf,.doc,.docx"
                (change)="handleMedicationsUpload($event)" />
            </div>
            <small *ngIf="medicationUrlpath !==''">{{medicationUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
          </div>
        </div>

        <div class="p-grid">
          <div class="p-col-6">
            <div class="field">
              <label for="medicationHistory">Medication History</label>
              <input type="file" id="medicationHistory" name="medicationHistory" accept=".pdf,.doc,.docx"
                (change)="handleMedicationHistoryUpload($event)" />
            </div>
            <small *ngIf="medicationHistoryUrlpath !==''">{{medicationHistoryUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
          </div>
          <div class="p-col-6">
            <div class="field">
              <label for="nextFollowUp">Next FollowUp Date</label>
              <p-calendar id="nextFollowUp" name="nextFollowUp" [(ngModel)]="selectnextFollowUp" showIcon required
                #nextFollowUp="ngModel"></p-calendar>
              <small *ngIf="nextFollowUp.invalid && nextFollowUp.touched" class="p-error">
                Next Follow-Up Date is required.
              </small>
            </div>
          </div>
        </div>

        <div class="p-grid">
          <div class="p-col-12">
            <div class="field">
              <div>
                <label for="diagnosis">Diagnosis</label>
              </div>
              <textarea style="width: 100%; background-color: #fff; color: black;" id="diagnosis" name="diagnosis"
                pInputTextarea rows="5" cols="30" [(ngModel)]="selectedPatient.diagnosis" required
                #diagnosis="ngModel"></textarea>
              <small *ngIf="diagnosis.invalid && diagnosis.touched" class="p-error">
                Diagnosis is required.
              </small>
            </div>
          </div>
        </div>

        <div class="p-grid">
          <div class="p-col-6">
            <div class="field">
              <label for="insuranceProvider">Insurance Provider</label>
              <input id="insuranceProvider" name="insuranceProvider" type="text" autocomplete="off" pInputText
                [(ngModel)]="selectedPatient.insuranceProvider" required placeholder="Enter insurance provider"
                #insurance="ngModel" />
              <small *ngIf="insurance.invalid && insurance.touched" class="p-error">
                Insurance is required.
              </small>
            </div>
          </div>
          <div class="p-col-6">
            <!-- <div class="field">
              <label for="status">Status</label>
              <p-dropdown name="status" id="status" [options]="statuslist" [(ngModel)]="selectedstatus"
                optionLabel="label" optionValue="value" placeholder="Select status" required
                #status="ngModel"></p-dropdown>
              <small *ngIf="selectedstatus === 0" class="p-error">
                Status is required.
              </small>
            </div> -->
          </div>
        </div>
      </div>
      <div>
        <button type="submit" pButton class="btn btn-primary" [disabled]="patientrecord.invalid">Save</button>
        <button pButton class="btn btn-secondary ml-1" (click)="closeDialog()">Close</button>
      </div>
    </form>
  </p-dialog>
</div>