<div class="content">
    <button class="btn btn-lg btn-outline-primary" (click)="openAdd(addContact)">เพิ่มรายการ</button>

    <div class="card">
        <div class="row text-center">
            <div class="col-sm-12">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">ชื่อหัวข้อ</th>
                                <th scope="col">หน้าต่างที่มี Bug</th>
                                <th scope="col">ชื่อผู้แจ้ง</th>
                                <th scope="col">วันที่แจ้ง</th>
                                <th scope="col">สถานะ</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of listContact">
                                <th scope="row">{{ item.id }}</th>
                                <td>{{ item.ctHead }}</td>
                                <td>{{ item.ctTab }}</td>
                                <td>{{ item.ctName }}</td>
                                <td>{{ item.sDate | date : 'dd/MM/yyyy' }}</td>
                                <td *ngIf="item.ctStatus==0">รอดำเนินการ</td>
                                <td *ngIf="item.ctStatus==1">สำเร็จแล้ว</td>
                                <td *ngIf="item.ctStatus==2">ยกเลิก</td>
                                <div class="col-auto align-self-sm-center">
                                    <button type="button" class="btn btn-info btn-sm btn-circle "
                                        style="line-height: 0px" (click)="openContact(allList,item)"><i
                                            class="fa fa-search"></i> </button>
                                </div>
                            </tr>
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-between p-2">
                        <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                            [pageSize]="pageSizeListRoom">
                            <ng-template ngbPaginationPrevious>Previous</ng-template>
                            <ng-template ngbPaginationNext>Next</ng-template>
                        </ngb-pagination>

                        <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                            (ngModelChange)="pageListRoom=1">
                            <option [ngValue]="10">10 items per page</option>
                            <option [ngValue]="50">50 items per page</option>
                            <option [ngValue]="100">100 items per page</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template #allList let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">รายละเอียดทั้งหมด</h5>
            </div>
            <div class=" card-body">
                <form [formGroup]="myFormContact">
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อหัวข้อ </label>
                                <input readonly class=" form-control" placeholder="" type="text"
                                    formControlName="ctHead" />
                                    
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> หน้าต่างที่มี BUG </label>
                                <input readonly class=" form-control" placeholder="" type="text"
                                    formControlName="ctTab" />
                                    
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อผู้แจ้ง </label>
                                <input readonly class=" form-control" placeholder="" type="text"
                                    formControlName="ctName" />
                                   
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 mb-1">
                            <label for="exampleFormControlSelect1">วันที่แจ้ง</label>
                            <input readonly type="date" class="form-control" [(ngModel)]="modelContact.sDate"
                                formControlName="sDate" />
                                
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> หมายเหตุ </label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                    placeholder="......" formControlName="ctDesc"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <label> สถานะ </label>
                            <select class="custom-select form-control" aria-label="Default select example"
                                formControlName="ctStatus">
                                <option value="0" selected style="color: black;">รอดำเนินการ</option>
                                <option value="1" style="color: black;">สำเร็จแล้ว</option>
                                <option value="2" style="color: black;">ยกเลิก</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div class=" card-footer">
                    <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusContact()">บันทึก</button>
                    <button class=" btn btn-fill btn-danger" type="cancel"
                        (click)="modal.dismiss('Cross click')">ยกเลิก</button>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #addContact let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class="card-body">
                <form [formGroup]="myFormContact">
                    <div class="row">
                        <div class="col-6 md-1">
                            <label>ชื่อผู้แจ้ง Bug:</label>
                            <input input class=" form-control" placeholder="" type="text" formControlName="ctName"
                                [(ngModel)]="modelContact.ctName" />
                                <div style="color: red;" *ngIf="myFormContact.controls.ctName.status=='INVALID'">
                                    กรุณากรอกชื่อผู้แจ้ง.</div>
                        </div>
                        <div class="col-6 md-1">
                            <label for="typeahead-focus">หัวข้อการแจ้ง Bug:</label>
                            <input input class=" form-control" placeholder="" type="text" formControlName="ctHead"
                                [(ngModel)]="modelContact.ctHead" />
                                <div style="color: red;" *ngIf="myFormContact.controls.ctHead.status=='INVALID'">
                                    กรุณากรอกหัวข้อการแจ้ง.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 md-1">
                            <label for="typeahead-focus">หน้าต่างที่ต้องการแจ้ง Bug:</label>
                            <input id="typeahead-focus" type="text" class="form-control"
                                [(ngModel)]="modelContact.ctTab" [ngbTypeahead]="search"
                                (focus)="focus$.next($any($event).target.value)"
                                (click)="click$.next($any($event).target.value)" #instance="ngbTypeahead"
                                formControlName="ctTab" />
                                <div style="color: red;" *ngIf="myFormContact.controls.ctTab.status=='INVALID'">
                                    กรุณากรอกหน้าต่างที่ต้องการแจ้ง.</div>
                        </div>
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
                            <input type="date" class="form-control" value="" formControlName="sDate"
                                [(ngModel)]="modelContact.sDate" >
                                <div style="color: red;" *ngIf="myFormContact.controls.sDate.status=='INVALID'">
                                    กรุณากรอกวันที่แจ้ง.</div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> หมายเหตุ </label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                    placeholder="......" formControlName="ctDesc"
                                    [(ngModel)]="modelContact.ctDesc"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="card-footer">
                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                        <button class="btn btn-primary btn-sm" [disabled]="myFormContact.invalid" type="submit"
                            (click)="saveContact()">บันทึก</button>
                        <button class="btn btn-primary btn-sm" type="cancel"
                            (click)="model.dismiss('Cross click')">ยกเลิก</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>