<?php 
include('../../../dripend/statpages/sidebar.php'); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pending Lab Tests</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root {
  --sidebar-width:230px;
  --sidebar-gap:10px;
  --bg:#f1f6fb;
  --accent-dark:#023e8a;
  --accent-mid:#0077b6;
  --accent-light:#e3f2fd;
  --green:#16a34a;
  --red:#dc2626;
  --border:#d0d8e4;
  --text-dark:#1a1a1a;
  --muted:#6b7280;
  --card-bg:#ffffff;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:"Segoe UI",Tahoma,Verdana,sans-serif;background:var(--bg);color:var(--text-dark);}

/* Layout */
.sidebar{width:var(--sidebar-width);position:fixed;top:0;left:0;height:100%;z-index:1000;}
.page-wrapper{flex:1;margin-left:calc(var(--sidebar-width) + var(--sidebar-gap));padding:24px;background:var(--bg);min-height:100vh;}

/* Container */
.container{max-width:1300px;margin:auto;background:#fff;padding:24px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.05);}

/* Header */
.page-header{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--accent-dark),var(--accent-mid));color:#fff;padding:14px 20px;border-radius:10px;}
.page-header h1{font-size:20px;font-weight:700;}

/* Filter Card */
.filter-card{background:#fff;border:1px solid var(--border);padding:16px;border-radius:10px;margin:20px 0;}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;}
.filter-row select,.filter-row input[type="date"]{
  padding:8px 10px;border-radius:6px;border:1px solid var(--border);outline:none;font-size:14px;
}
.filter-row button{
  background:var(--accent-mid);color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;
  font-weight:700;transition:0.3s;
}
.filter-row button:hover{background:var(--green);}

/* Patient Group Card */
.patient-card{
  background:#f9fafb;border:1px solid var(--border);border-radius:10px;margin-bottom:18px;overflow:hidden;
}
.patient-header{
  background:var(--accent-light);color:var(--accent-dark);padding:12px 16px;display:flex;
  justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;
}
.patient-header:hover{background:#dbeafe;}
.patient-header span{font-size:14px;}
.patient-details{padding:0 18px 14px 18px;display:none;animation:fadeIn 0.3s ease;}
.patient-details table{width:100%;border-collapse:collapse;margin-top:12px;}
.patient-details th,.patient-details td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;}
.patient-details th{background:var(--accent-light);color:var(--accent-dark);}
.action-btns{display:flex;gap:8px;}
.enter-btn,.cancel-btn{
  border:none;padding:6px 12px;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;
}
.enter-btn{background:var(--green);}
.cancel-btn{background:var(--red);}
.enter-btn:hover,.cancel-btn:hover{opacity:0.9;}

/* Modal */
.modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.5);justify-content:center;align-items:center;z-index:2000;
}
.modal-content{
  background:#fff;padding:24px;border-radius:10px;width:90%;max-width:400px;text-align:center;
  animation:fadeIn 0.3s ease;
}
.modal-content h3{margin-bottom:10px;color:var(--accent-dark);}
.modal-actions{display:flex;justify-content:center;gap:14px;margin-top:18px;}
.modal-actions button{padding:8px 14px;border:none;border-radius:6px;cursor:pointer;font-weight:700;color:#fff;}
.modal-actions .confirm{background:var(--green);}
.modal-actions .cancel{background:var(--red);}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

/* Responsive */
@media(max-width:900px){
  .page-wrapper{margin-left:0;}
  .filter-row{flex-direction:column;align-items:flex-start;}
  .filter-row button{width:100%;}
}
</style>
</head>
<body>

<div class="sidebar">
  <?php include('../../../dripend/statpages/sidebar.php'); ?>
</div>

<div class="page-wrapper">
  <div class="container">
    <div class="page-header">
      <h1><i class="fa-solid fa-flask-vial"></i> Pending Laboratory Tests</h1>
      <div>
        <i class="fa-solid fa-user-circle" style="margin-right:14px;"></i>
        <i class="fa-solid fa-right-from-bracket"></i>
      </div>
    </div>

    <!-- Filter -->
    <div class="filter-card">
      <div class="filter-row">
        <div>
          <label>Filter Type:</label>
          <select id="filterType">
            <option value="request">Request Date</option>
            <option value="collection">Sample Collection Date</option>
          </select>
        </div>
        <div>
          <label>Date Range:</label>
          <input type="date" id="dateRangeStart">
          <input type="date" id="dateRangeEnd">
        </div>
        <button onclick="applyFilter()"><i class="fa-solid fa-filter"></i> Apply Filter</button>
      </div>
    </div>

    <!-- Patient Group 1 -->
    <div class="patient-card">
      <div class="patient-header" onclick="toggleDetails(this)">
        <span>Hospital ID: GH-A20-0058 | Patient: Prince Agozi | Age: 29</span>
        <i class="fa-solid fa-chevron-down"></i>
      </div>
      <div class="patient-details">
        <table>
          <thead>
            <tr>
              <th>Request Date</th>
              <th>Time</th>
              <th>Sample ID</th>
              <th>Test Name</th>
              <th>Accepted By</th>
              <th>Collected By</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2025-10-14</td>
              <td>09:30 AM</td>
              <td>LABS-20251014-01</td>
              <td>Full Blood Count</td>
              <td>Dr. Kwame Mensah</td>
              <td>LabTech Mary Owusu</td>
              <td class="action-btns">
                <button class="enter-btn" onclick="openModal()">Enter Result</button>
                <button class="cancel-btn">Cancel</button>
              </td>
            </tr>
            <tr>
              <td>2025-10-14</td>
              <td>09:45 AM</td>
              <td>LABS-20251014-02</td>
              <td>Routine Urine Examination</td>
              <td>Dr. Kwame Mensah</td>
              <td>LabTech Mary Owusu</td>
              <td class="action-btns">
                <button class="enter-btn" onclick="openModal()">Enter Result</button>
                <button class="cancel-btn">Cancel</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Patient Group 2 -->
    <div class="patient-card">
      <div class="patient-header" onclick="toggleDetails(this)">
        <span>Hospital ID: GH-A18-0121 | Patient: Akua Boateng | Age: 34</span>
        <i class="fa-solid fa-chevron-down"></i>
      </div>
      <div class="patient-details">
        <table>
          <thead>
            <tr>
              <th>Request Date</th>
              <th>Time</th>
              <th>Sample ID</th>
              <th>Test Name</th>
              <th>Accepted By</th>
              <th>Collected By</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2025-10-13</td>
              <td>01:10 PM</td>
              <td>LABS-20251013-03</td>
              <td>Routine Stool Examination</td>
              <td>Dr. Ama Ofori</td>
              <td>LabTech Kojo Addae</td>
              <td class="action-btns">
                <button class="enter-btn" onclick="openModal()">Enter Result</button>
                <button class="cancel-btn">Cancel</button>
              </td>
            </tr>
            <tr>
              <td>2025-10-13</td>
              <td>01:40 PM</td>
              <td>LABS-20251013-04</td>
              <td>Renal Function Test</td>
              <td>Dr. Ama Ofori</td>
              <td>LabTech Kojo Addae</td>
              <td class="action-btns">
                <button class="enter-btn" onclick="openModal()">Enter Result</button>
                <button class="cancel-btn">Cancel</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>

<!-- Confirmation Modal -->
<div class="modal" id="confirmModal">
  <div class="modal-content">
    <h3>Confirm Action</h3>
    <p>Do you want to proceed to enter the results for this laboratory test?</p>
    <div class="modal-actions">
      <button class="confirm" onclick="proceedToResult()">Yes, Proceed</button>
      <button class="cancel" onclick="closeModal()">Cancel</button>
    </div>
  </div>
</div>

<script>
function toggleDetails(element){
  const details = element.nextElementSibling;
  const icon = element.querySelector("i");
  if(details.style.display === "block"){
    details.style.display = "none";
    icon.classList.replace("fa-chevron-up","fa-chevron-down");
  } else {
    details.style.display = "block";
    icon.classList.replace("fa-chevron-down","fa-chevron-up");
  }
}

function openModal(){
  document.getElementById("confirmModal").style.display="flex";
}
function closeModal(){
  document.getElementById("confirmModal").style.display="none";
}
function proceedToResult(){
  closeModal();
  window.location.href="add_lab_result.php";
}

function applyFilter(){
  alert("Filter logic will be implemented with backend date range query (Request Date or Sample Collection Date).");
}
</script>
</body>
</html>
