
<style>
  

    .item {
        /* background-color: aqua; */
        border-bottom: 1px solid;
        border-right: 1px solid;
        overflow: hidden;
        line-height: 30px;
        min-height: 30px;
    }

        .item > input {
            outline: none;
            height: 100%;
            border: none;
        }    

    .boxContainer {
        width: 100%;
        display: grid;
        margin: auto;
        border-top: 1px solid;
        border-left: 1px solid;
        overflow: auto;
    }
   /* .modal-header > */
    th, td {
        padding: 0px 0px !important;
    }
</style>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <!--editMode.Discharged-->
                        <div class="page-title-right">
                            <button *ngIf="record.gatePassId" class="btn btn-primary btn-sm ml-1" (click)="onEdit()"><i class="fe-edit-2 mr-2"></i> Edit</button>
                            <button type="button" class="btn btn-primary btn-sm ml-2" (click)="onOpenModel(view)">
                                <span><i class="fe-eye mr-1"></i>Gate Pass Report</span>
                            </button>
                            <button class="btn btn-secondary btn-sm ml-1" (click)="onBack()"><i class="fe-arrow-left ml-1"></i> Back</button>
                        </div>
                    </div>
                    <h4 class="page-title">Provisional Gate Pass</h4>
                </div>
            </div>
           

        </div>
        <div class="row" *ngIf="loading">
            <div class="col-12">
                <div class="d-flex align-items-center">
                    <span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
                    <span class="ml-2">Please wait while loading Provisional Gate-pass</span>
                </div>
            </div>
        </div>
    </div>
    <!--&& finalBillBasics.isFinalBillGenerated && finalBillBasics.pendingAmount === 0"-->
    <div class="row" *ngIf="!loading">
        <div class="col-lg-12 px-2" *ngIf="mode === editMode.New">
            <form [formGroup]="gatePassForm" (submit)="onSubmit()">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="card-box m-0">
                            <ng-container >
                                <h4 class="box-title"><i class="mdi mdi-human mr-1"></i>Gate Pass Information</h4>
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>Valid Upto <code>*</code></label>
                                            <input type="datetime-local" class="form-control" [min]="today | date: 'yyyy-MM-ddTHH:mm'" [ngClass]="{ 'is-invalid': (submitted && form.validUpto.errors) }" formControlName="validUpto" />
                                            <div *ngIf="submitted && form.validUpto.errors" class="invalid-feedback show-must">
                                                <div *ngIf="form.validUpto.errors.required">Valid Date  is required</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Remark</label>
                                            <input type="text" class="form-control" [ngClass]="{ 'is-invalid': (submitted && form.remark.errors) }" formControlName="remark" placeholder="Enter the remark" />                                          
                                        </div>
                                    </div>
                                </div>
                            </ng-container>                          
                        </div>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="text-right">
                            <button *ngIf="!record.gatePassId" type="reset" class="btn btn-warning btn-sm mr-2">
                                <i class="fe-refresh-cw"></i>
                                <span class="ml-1">Reset</span>
                            </button>
                            <button *ngIf="record.gatePassId" type="button" (click)="onCancel()" class="btn btn-danger btn-sm mr-2">
                                <i class="fe-x"></i>
                                <span class="ml-1">Cancel</span>
                            </button>
                            <button type="submit" class="btn btn-sm btn-success">
                                <!--<span>
                                    <span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
                                    Please wait..
                                </span>-->
                                <span>
                                    <i class="fe-check"></i>
                                    <span class="ml-1">
                                        <span *ngIf="record.gatePassId">Update</span>
                                        <span *ngIf="!record.gatePassId">Create</span>
                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-12 px-2" *ngIf="mode === editMode.Discharged">
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-10">
                    <div class="card mt-2">
                        <div class="card-body p-0">
                            <div class="table-responsive" *ngIf="record">
                                <table class="table table-centered table-bordered table-sm mb-0">
                                    <tbody>
                                        <ng-container>
                                            <tr class="table-primary">
                                                <th colspan="4">
                                                    Patient Information
                                                </th>
                                            </tr>
                                            <tr>
                                                <th class="table-active">
                                                    Patient Name
                                                </th>
                                                <td>
                                                    <span>
                                                        <span [textContent]="admission.fullName + ', '"></span>
                                                        <span [textContent]="(admission.gender === 'F' ? 'Female' : 'Male') + ', '"></span>
                                                        <span [textContent]="admission.age + 'yrs'"></span>
                                                    </span>
                                                </td>
                                                <th class="table-active">
                                                    Relation
                                                </th>
                                                <td [textContent]="admission.fatherOrHusband"></td>
                                            </tr>
                                            <tr>
                                                <th class="table-active">
                                                    Address
                                                </th>
                                                <td [textContent]="admission.fullAddress"> </td>
                                                <th class="table-active">
                                                    Bed Number
                                                </th>
                                                <td [textContent]="admission.bedNumber"></td>
                                            </tr>
                                        </ng-container>
                                        <ng-container>
                                            <tr class="table-primary">
                                                <th colspan="4">
                                                    Gate-Pass Information
                                                </th>
                                            </tr>
                                            <tr>
                                                <th class="table-active">
                                                    Valid Date & Time
                                                </th>
                                                <td [textContent]="record.validUpto | date:'dd-MM-yyyy, h:mm:ss a'">
                                                </td>
                                                <th class="table-active">
                                                    Remark
                                                </th>
                                                <td [textContent]="record.remark"></td>
                                            </tr>
                                            <tr>
                                                <th class="table-active">
                                                    Issued Date
                                                </th>
                                                <td [textContent]="record.createdDate | date:'dd-MM-yyyy, h:mm:ss a'">
                                                </td>
                                                <th class="table-active">
                                                    Issued By
                                                </th>
                                                <td [textContent]="record.createdByName"></td>
                                            </tr>
                                        </ng-container>
                                    </tbody>                                   
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template #view>
    <div class="modal-header">
        <h4  class="modal-title text-center">Gate -pass</h4>
        <div>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onCloseModal();"><i class="fe-x"></i></button>
            <button [useExistingCss]="true"
                    printSectionId="print-section"
                    ngxPrint
                    class="btn btn-light btn-xs mr-1 d-print-none">
                <i class="fe-printer mr-1"></i>Print
            </button>
        </div>
    </div>
    <div class="modal-body" id="print-section">
        <div class="card">
            <div class="card-body p-0">
                <div class="card-box m-0">
                    <div class="row mb-2">                                              
                        <div class="col-lg-12 text-center" >
                            <h4><u>Checklist For Discharge</u></h4>
                        </div>                       
                    </div>
                    <div class="row" style="border:outset">
                        <div class="col-lg-12 font-18 mt-2">
                            <!--<div class="table-responsive">
                                <table class="table-borderless table-centered">
                                    <tbody>
                                        <tr>
                                            <th>IP No</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="admission.admissionNo"></span>
                                            </td>
                                            <th>C R No</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]=" "></span>
                                            </td>
                                            <th>Bill No</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]=" "></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Patient Name</th>
                                            <td colspan="3">
                                                <span class="mr-1">:</span>
                                                <span>
                                                    <span [textContent]="admission.fullName"></span>
                                                </span>
                                            </td>
                                            <th>Bed No.</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="admission.bedNumber"></span>
                                            </td>

                                        </tr>
                                        <tr>
                                            <th>Age</th>
                                            <td [textContent]="admission.age +'Y'"></td>

                                            <th>Sex</th>
                                            <td [textContent]="(admission.gender === 'F' ? 'Female' : 'Male') "></td>

                                            <th>Floor</th>
                                            <td [textContent]="admission.floorName + ' / ' + admission.locationName "></td>
                                        </tr>
                                        <tr>
                                            <th>Father/Husband Name</th>
                                            <td colspan="3">
                                                <span class="mr-1">:</span>
                                                <span [textContent]="admission.fatherOrHusband"></span>
                                            </td>
                                            <th>Category</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="admission.bedNumber"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th rowspan="3" style="vertical-align: top !important;">Address</th>
                                            <td colspan="3" rowspan="3" style="vertical-align: top !important;">
                                                <span class="mr-1">:</span>
                                                <span class="pr-2" [textContent]="admission.fullAddress"></span>
                                            </td>
                                            <th>DOA</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="admission.admissionDate"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Issue Date</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="record.createdDate | date: 'dd-MM-yyyy'"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Issue Time</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="record.createdDate | date: 'h:mm:ss a'"></span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th>Phone</th>
                                            <td colspan="3">
                                                <span class="mr-1">:</span>
                                                <span [textContent]="(admission.mobile)"></span>
                                            </td>
                                            <th>Valid Upto</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="(record.validUpto | date: 'dd-MM-yyyy')"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Ref By</th>
                                            <td colspan="3">
                                                <span class="mr-1">:</span>
                                                <span [textContent]=" "></span>
                                            </td>
                                            <th>Valid Time</th>
                                            <td>
                                                <span class="mr-1">:</span>
                                                <span [textContent]="(record.validUpto | date: 'h:mm:ss a')"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                        </tr>
                                    </tbody>
                                </table>


                            </div>-->
                            <div class="table-responsive">
                                <table class="table table-borderless table-centered">
                                    <tbody>
                                        <tr>
                                            <th>IP No</th>
                                            <td>{{ admission.admissionNo }}</td>
                                            <th>C R No</th>
                                            <td></td>
                                            <th>Bill No</th>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <th>Patient Name</th>
                                            <td colspan="3">{{ admission.fullName }}</td>
                                            <th>Bed No.</th>
                                            <td>{{ admission.bedNumber }}</td>
                                        </tr>
                                        <tr>
                                            <th>Age</th>
                                            <td>{{ admission.age }}Y</td>
                                            <th>Sex</th>
                                            <td>{{ admission.gender === 'F' ? 'Female' : 'Male' }}</td>
                                            <th>Floor</th>
                                            <td>{{ admission.floorName }} / {{ admission.locationName }}</td>
                                        </tr>
                                        <tr>
                                            <th>Father/Husband Name</th>
                                            <td colspan="3">{{ admission.fatherOrHusband }}</td>
                                            <th>Category</th>
                                            <td>{{admission.bedNumber }}</td>
                                        </tr>
                                        <tr>
                                            <th rowspan="3" style="vertical-align: top !important;">Address</th>
                                            <td colspan="3" rowspan="3">{{ admission.fullAddress }}</td>
                                            <th>DOA</th>
                                            <td>{{ admission.admissionDate }}</td>
                                        </tr>
                                        <tr>
                                            <th>Issue Date</th>
                                            <td>{{ record.createdDate | date: 'dd-MM-yyyy' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Issue Time</th>
                                            <td>{{ record.createdDate | date: 'h:mm:ss a' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Phone</th>
                                            <td colspan="3">{{ admission.mobile }}</td>
                                            <th>Valid Upto</th>
                                            <td>{{ record.validUpto | date: 'dd-MM-yyyy' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Ref By</th>
                                            <td colspan="3"></td>
                                            <th>Valid Time</th>
                                            <td>{{ record.validUpto | date: 'h:mm:ss a' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="boxContainer" style="border-bottom: 1px solid; margin: 2px 0;">

                                <div class="item" style="text-align: center; grid-column: 1/2; min-width: 100px;"></div>
                                <div class="item" style="text-align: center; grid-column: 2/3; min-width: 100px;">Checked By</div>
                                <div class="item" style="text-align: center; grid-column: 3/4; min-width: 100px;">Authorized By</div>

                                <div class="item" style="text-align: left; grid-row: 2; min-width: 100px;">Payment Made</div>
                                <div class="item" style="text-align: left; grid-row: 2; min-width: 100px;"></div>
                                <div class="item" style="text-align: left; grid-row: 2; min-width: 100px;"></div>

                                <div class="item" style="text-align: left; grid-row: 3; min-width: 100px;">Room Linen</div>
                                <div class="item" style="text-align: left; grid-row: 3; min-width: 100px;"></div>
                                <div class="item" style="text-align: left; grid-row: 3; min-width: 100px;"></div>

                                <div class="item" style="text-align: left; grid-row: 4; min-width: 100px;">Room Inventory</div>
                                <div class="item" style="text-align: left; grid-row: 4; min-width: 100px;"></div>
                                <div class="item" style="text-align: left; grid-row: 4; min-width: 100px;"></div>

                            </div>
                            <div>
                                NOTE     To be retained by staff nurse.
                            </div>
                            <div>
                                <span>Issued</span>&nbsp;
                                <span><b>{{page.userAccount.fullName}}</b></span>
                            </div>
                        </div>
                    </div>
                                    
                </div>
            </div>
        </div>
    </div>
</ng-template>
