(F) Add delete button to waiting list item

Clinics.Frontend/src/app/components/receptionist/waiting-list-item/waiting-list-item.component.css

@@ -31,6 +31,37 @@
     margin-right: 0.5em;
 }
 
+.custom-delete-button button{
+    background-color: white;
+    border-color: red;
+    color: red;
+}
+
+.custom-delete-button button:hover{
+    background-color: red;
+    border-color: red;
+    color: white;
+}
+
+.custom-delete-button button i {
+    margin: auto;
+}
+
+.custom-undo-button button{
+    width: 100%;
+    background-color: var(--accent-color);
+    border: var(--accent-color);
+    color:white;
+    font-weight: 900;
+}
+
+.custom-undo-button button:hover{
+    border: 1px solid;
+    background-color: white;
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
 /* #endregion */
 
 /* #region collection item */

Clinics.Frontend/src/app/components/receptionist/waiting-list-item/waiting-list-item.component.html

@@ -28,14 +28,54 @@
     <!-- #region buttons-->
 
 
-    <a class="d-grid gap-3 custom-edit-button">
-        <button class="btn btn-outline-secondary">
+    <div class="d-grid gap-3 custom-edit-button">
+        <a>
+            <button class="btn btn-outline-secondary" style="width: 100%;">
                 إرسال إلى طبيب<i class="fas fa-arrow-left"></i>
             </button>
         </a>
 
+        <div class="custom-delete-button">
+            <button class="btn btn-outline-secondary"
+            (click)="onClickDelete(confirmDeleteModal)">
+                <i class="fa fa-trash-alt"></i>
+            </button>
+        </div>
+
+    </div>
+
 
-    <!-- #endregion -->
 
 
+
+    <!-- #endregion -->
 </div>
+
+
+<ng-template #confirmDeleteModal let-modal>
+    <div class="modal-body">
+        <div class="custom-child" dir="rtl">
+            <p style="font-weight: 800;">هل أنت متأكد من رغبتك في حذف هذا المريض من قائمة الانتظار ؟</p>
+
+            <div class="d-grid gap-3 custom-undo-button mb-3">
+                <a>
+                    <button class="btn btn-outline-secondary" style="width: 100%;"
+                    (click)="modal.dismiss()">
+                        إلغاء
+                    </button>
+                </a>
+            </div>
+
+                <a>
+                    <div class="custom-edit-button">
+                        <button class="btn btn-outline-secondary" style="width:100%;"
+                        (click)="modal.dismiss(); onDelete()">
+                            تأكيد
+                        </button>
+                    </div>
+                </a>
+                
+
+        </div>
+    </div>
+</ng-template>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/waiting-list-item/waiting-list-item.component.ts

 import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-waiting-list-item',
@@ -7,4 +8,19 @@ import { Component } from '@angular/core';
 })
 export class WaitingListItemComponent {
 
+  constructor(private modalService: NgbModal
+
+
+  ) {}
+
+  onClickDelete(modal: any): void {
+    this.modalService.open(modal, {
+      centered: true,
+      size: 'md'
+    });
+  }
+
+  onDelete(): void {
+
+  }
 }