From 5eaa8cc2901953b17ce6baefa6a05471af5b359e Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 23 Mar 2026 09:51:49 +0000
Subject: [PATCH] update disblay

---
 queue_display.php | 96 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 67 insertions(+), 29 deletions(-)

diff --git a/queue_display.php b/queue_display.php
index b873733..4aa503e 100644
--- a/queue_display.php
+++ b/queue_display.php
@@ -25,11 +25,16 @@ try {
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
+        html, body {
+            height: 100%;
+            margin: 0;
+            overflow: hidden; /* Hide scrollbars for TV feel */
+        }
         body {
             background-color: #f0f2f5;
             font-family: 'Tajawal', sans-serif;
-            overflow: hidden; /* Hide scrollbars for TV feel */
-            padding-bottom: 60px; /* Space for marquee */
+            display: flex;
+            flex-direction: column;
         }
         .header {
             background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
@@ -39,6 +44,8 @@ try {
             justify-content: space-between;
             align-items: center;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            flex-shrink: 0;
+            height: 80px;
         }
         .header h1 {
             margin: 0;
@@ -47,6 +54,29 @@ try {
             align-items: center;
             gap: 10px;
         }
+        .main-content {
+            flex-grow: 1;
+            padding: 20px;
+            overflow: hidden; /* Container handles overflow */
+            display: flex;
+            flex-direction: column;
+        }
+        #departmentsContainer {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            height: 100%;
+            justify-content: center;
+            align-content: center; /* Center content vertically if space permits */
+            overflow-y: auto;
+        }
+        .dept-wrapper {
+            flex: 1 1 300px; /* Grow, shrink, base width */
+            max-width: 450px;
+            min-width: 250px;
+            display: flex;
+            flex-direction: column;
+        }
         .dept-card {
             background: white;
             border-radius: 15px;
@@ -60,7 +90,7 @@ try {
         .dept-header {
             background: #f8f9fa;
             padding: 15px;
-            font-size: 1.3rem; /* Slightly smaller to fit two lines */
+            font-size: 1.3rem; 
             font-weight: bold;
             text-align: center;
             border-bottom: 2px solid #e9ecef;
@@ -68,27 +98,28 @@ try {
             line-height: 1.3;
         }
         .serving-section {
-            padding: 15px;
+            padding: 10px;
             text-align: center;
             flex-grow: 1;
             background: #e3f2fd;
             display: flex;
             flex-direction: column;
-            justify-content: center; /* Center vertically */
+            justify-content: center; 
         }
         .serving-label {
-            font-size: 1.1rem;
+            font-size: 1.0rem;
             color: #1976d2;
-            margin-bottom: 10px;
+            margin-bottom: 5px;
             text-transform: uppercase;
             font-weight: 600;
         }
         .serving-list {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
             width: 100%;
-            align-items: center; /* Center items vertically in grid */
+            align-items: center; 
+            justify-content: center;
         }
         .serving-item {
             background: rgba(255, 255, 255, 0.6);
@@ -98,25 +129,27 @@ try {
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: 100px;
+            width: 100%;
         }
         .serving-number {
-            font-size: 3.5rem; /* Adjusted for grid */
+            font-size: 3rem; 
             font-weight: 800;
             color: #0d47a1;
             line-height: 1;
             animation: pulse 2s infinite;
         }
         .waiting-section {
-            padding: 15px;
+            padding: 10px;
             background: #fff;
             border-top: 1px dashed #dee2e6;
+            min-height: 60px;
         }
         .waiting-label {
             font-size: 0.9rem;
             color: #6c757d;
             margin-bottom: 5px;
             font-weight: bold;
+            text-align: center;
         }
         .waiting-list {
             display: flex;
@@ -149,9 +182,6 @@ try {
         }
         /* Marquee Footer Styles */
         .footer-marquee {
-            position: fixed;
-            bottom: 0;
-            left: 0;
             width: 100%;
             background: #002D62;
             color: white;
@@ -162,6 +192,8 @@ try {
             z-index: 1000;
             box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
             border-top: 3px solid #fbbc04; /* Accent color */
+            flex-shrink: 0;
+            height: 60px;
         }
         .marquee-content {
             display: inline-block;
@@ -186,8 +218,8 @@ try {
     </div>
 </div>
 
-<div class="container-fluid p-4">
-    <div class="row g-4" id="departmentsContainer">
+<div class="main-content">
+    <div id="departmentsContainer">
         <!-- Javascript will inject cards here -->
     </div>
 </div>
@@ -326,7 +358,6 @@ try {
             
             // Augment item with doctor names from API if available
             item.doctor_name_en = item.doctor_name_en || item.doctor_name; // Fallback
-            item.doctor_name_ar = item.doctor_name_ar || item.doctor_name; // Fallback
             
             if (item.status === 'serving') {
                 depts[item.department_id].serving.push(item);
@@ -340,27 +371,34 @@ try {
 
         Object.values(depts).forEach(dept => {
             
-            let servingHtml = '<div class="text-muted small text-center w-100" style="grid-column: span 2;">No active patient<br>لا يوجد مريض</div>';
+            let servingHtml = '<div class="text-muted small text-center w-100">No active patient<br>لا يوجد مريض</div>';
             
             if (dept.serving.length > 0) {
                 servingHtml = dept.serving.map(s => {
                     let docName = '';
-                    if (s.doctor_name_en && s.doctor_name_ar) {
-                        docName = `${s.doctor_name_en}<br>${s.doctor_name_ar}`;
-                    } else {
-                        docName = s.doctor_name || '';
+                    // Doctor Name: Prefix with Dr. and show only English name
+                    if (s.doctor_name_en) {
+                        docName = `Dr. ${s.doctor_name_en}`;
+                    } else if (s.doctor_name) {
+                        docName = `Dr. ${s.doctor_name}`;
+                    }
+
+                    // Wrap doctor name in a colored badge (e.g., bg-info)
+                    let docInfo = '';
+                    if (docName) {
+                        docInfo = `<div class="mb-1 fw-bold badge bg-info text-white" style="font-size:0.9rem;">${docName}</div>`;
                     }
 
                     let roomInfo = '';
                     if (s.room_number) {
-                        roomInfo = `<div class="mt-1 fw-bold text-dark badge bg-warning text-dark" style="font-size:0.85rem;">Room/غرفة: ${s.room_number}</div>`;
+                        roomInfo = `<div class="fw-bold badge bg-warning text-dark" style="font-size:0.9rem;">Room/غرفة: ${s.room_number}</div>`;
                     }
                     
                     return `
                     <div class="serving-item">
                         <div class="serving-number">${s.token_number}</div>
-                        <div class="small text-muted text-center mt-1" style="line-height:1.2; font-size:0.85rem;">
-                            ${docName}
+                        <div class="small text-center mt-2 d-flex flex-column align-items-center">
+                            ${docInfo}
                             ${roomInfo}
                         </div>
                     </div>`;
@@ -373,7 +411,7 @@ try {
             }
 
             const card = `
-                <div class="col-md-4 col-lg-3">
+                <div class="dept-wrapper">
                     <div class="dept-card">
                         <div class="dept-header">
                             ${dept.name_en}