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

        <ng-template pTemplate="caption">
            <div class="flex">
                <h2 class="mr-auto">Patient List</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="name">Full Name <p-sortIcon field="name" /></th>
                <th pSortableColumn="gender">Gender <p-sortIcon field="gender" /></th>
                <th pSortableColumn="admissionDate">Date of Admission <p-sortIcon field="admissionDate" /></th>
                <th pSortableColumn="bloodGroup">Blood Group <p-sortIcon field="bloodGroup" /></th>
                <th>Mobile</th>
                <th>Email</th>
                <th pSortableColumn="status">Status <p-sortIcon field="status" /></th>
                <th>Actions</th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-patient>
            <tr>
                <td class="hidden">{{ patient.id }}</td>
                <td>{{ patient.name }}</td>
                <td>
                    <span class="badge" [ngClass]="patient.gender === 1 ? 'male' : 'female'">
                        {{ gender[patient.gender] }}
                    </span>
                </td>
                <td>{{ patient.admissionDate | date }}</td>
                <td>{{ patient.bloodGroup }}</td>
                <td>{{ patient.mobile }}</td>
                <td>{{ patient.email }}</td>
                <td>{{ status[patient.status] }}</td>
                <td class="d-flex">
                    <button *ngIf="createpermission" pButton class="btn btn-success btn-sm"
                        (click)="addnewrecord(patient.id)">
                        <i class="pi pi-plus-circle"></i>
                    </button>
                    <button *ngIf="editpermission" class="btn btn-warning btn-sm ml-1" (click)="editPatient(patient)"><i
                            class="pi pi-pencil"></i></button>
                    <button *ngIf="deletepermission" class="btn btn-danger btn-sm ml-1"
                        (click)="deletePatient(patient.id)"><i class="pi pi-trash"></i></button>
                </td>
            </tr>
        </ng-template>

        <ng-template pTemplate="emptymessage">
            <tr>
                <td colspan="10">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)">
            <div class="p-fluid">
                <div class="p-grid">
                    <!-- Full Name -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="name">Full Name</label>
                            <input id="name" name="name" type="text" pInputText [(ngModel)]="selectedPatient.name"
                                placeholder="Enter full patient name" required #name="ngModel" />
                            <small *ngIf="name.invalid && name.touched" class="p-error">Full Name is required</small>
                        </div>
                    </div>

                    <!-- Mobile -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="mobile">Mobile</label>
                            <input id="mobile" name="mobile" type="text" pInputText [(ngModel)]="selectedPatient.mobile"
                                placeholder="Enter mobile number" maxlength="10" required pattern="[0-9]{10}"
                                #mobile="ngModel" />
                            <small *ngIf="mobile.invalid && mobile.touched" class="p-error">
                                Mobile is required and must be 10 digits
                            </small>
                        </div>
                    </div>

                    <!-- Address -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="address">Address</label>
                            <input id="address" name="address" type="text" pInputText
                                [(ngModel)]="selectedPatient.address" placeholder="Enter address" required
                                #address="ngModel" />
                            <small *ngIf="address.invalid && address.touched" class="p-error">Address is
                                required</small>
                        </div>
                    </div>
                </div>

                <div class="p-grid">
                    <!-- Gender -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="gender">Gender</label>
                            <div>
                                <label class="mx-1">
                                    <input id="male" type="radio" name="gender" [(ngModel)]="selectedgender" [value]="1"
                                        required />
                                    Male
                                </label>
                                <label>
                                    <input id="female" type="radio" name="gender" [(ngModel)]="selectedgender"
                                        [value]="2" />
                                    Female
                                </label>
                            </div>
                            <small *ngIf="!selectedgender" class="p-error">Gender is required</small>
                        </div>
                    </div>

                    <!-- Admission Date -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="admissionDate">Admission Date</label>
                            <p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectadmissionDate"
                                showIcon styleClass="small-calendar" 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">
                    <!-- Blood Group -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="bloodGroup">Blood Group</label>
                            <input id="bloodGroup" name="bloodGroup" type="text" pInputText
                                [(ngModel)]="selectedPatient.bloodGroup" placeholder="Enter blood group" required
                                #bloodGroup="ngModel" />
                            <small *ngIf="bloodGroup.invalid && bloodGroup.touched" class="p-error">Blood Group is
                                required</small>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="email">Email</label>
                            <input id="email" name="email" type="email" pInputText [(ngModel)]="selectedPatient.email"
                                placeholder="Enter email address" required email #email="ngModel" />
                            <small *ngIf="email.invalid && email.touched" class="p-error">Enter a valid email
                                address</small>
                        </div>
                    </div>
                </div>

                <div class="p-grid">
                    <!-- Age -->
                    <div class="p-col-6">
                        <div class="field">
                            <label for="age">Age</label>
                            <input id="age" name="age" type="number" pInputText [(ngModel)]="selectedPatient.age"
                                placeholder="Enter age" required min="1" max="120" #age="ngModel" />
                            <small *ngIf="age.invalid && age.touched" class="p-error">
                                Age is required and must be between 1 and 90
                            </small>
                        </div>
                    </div>

                    <!-- Status -->
                    <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></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 || selectedstatus === 0 || !selectedgender)">Save</button>
                <button pButton class="btn btn-secondary ml-1" (click)="closeDialog()">Close</button>
            </div>
        </form>
    </p-dialog>
</div>