<?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" />
<title>Verified Laboratory Results | DripDental Hospital</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;
  --gold:#ffd700;
  --border:#d0d8e4;
  --text-dark:#1a1a1a;
  --muted:#6b7280;
  --card-bg:#ffffff;
}

/* Reset & layout */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:"Segoe UI",Tahoma,Verdana,sans-serif;background:var(--bg);color:var(--text-dark);}
.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:20px 24px;min-height:100vh}

/* Container & header */
.container{max-width:1350px;margin:0 auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.05);}
.page-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:8px;background:linear-gradient(90deg,var(--accent-dark),var(--accent-mid));color:#fff;margin-bottom:14px}
.page-header h1{font-size:18px;font-weight:700}

/* Filter card */
.filter-card{border:1px solid var(--border);border-radius:10px;background:var(--card-bg);overflow:hidden;margin-bottom:10px;}
.filter-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--accent-light);cursor:pointer}
.filter-top h3{font-size:15px;color:var(--accent-dark);font-weight:700}
.filter-toggle{background:none;border:0;color:var(--accent-dark);font-size:16px;cursor:pointer}
.filter-body{padding:16px;display:block}
.filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filter-row .flex-1{flex:1;min-width:220px}
.filter-row input[type="text"], .filter-row input[type="date"], .filter-row select{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:14px;outline:none;background:#fff;
}
.filter-row button{background:var(--accent-mid);color:#fff;padding:10px 14px;border-radius:8px;border:0;font-weight:700;cursor:pointer}
.filter-row button:hover{background:var(--green)}

/* Total section */
.total-card{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  margin-bottom:15px;
}
.total-box{
  background:linear-gradient(120deg,var(--green),#22c55e);
  color:#fff;
  padding:16px 24px;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.total-box i{margin-right:8px;font-size:18px;}

/* Table */
.table-container{overflow-x:auto}
.lab-table{width:100%;border-collapse:collapse;font-size:14px}
.lab-table th, .lab-table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.lab-table th{background:var(--accent-mid);color:#fff;font-weight:700}
.lab-table tr.verified-row{background:rgba(22,163,74,0.08)}
.lab-table tr:hover{background:#e6ffe6}
.status-badge{background:var(--green);color:#fff;padding:6px 10px;border-radius:18px;font-weight:700;font-size:13px}

/* View button */
.view-btn{background:none;border:0;color:var(--accent-dark);font-size:18px;cursor:pointer}
.view-btn:hover{color:var(--accent-mid)}

/* Modal */
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:2000;justify-content:center;align-items:center}
.modal-content{background:#fff;border-radius:12px;padding:22px;width:95%;max-width:760px;animation:fadeIn .25s ease}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.modal-header h2{color:var(--accent-dark);font-size:18px}
.close-modal{cursor:pointer;color:var(--muted);font-size:20px}
.modal-body table{width:100%;border-collapse:collapse}
.modal-body th,.modal-body td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.modal-body th{background:var(--accent-light);color:var(--accent-dark)}
.modal-footer{text-align:right;margin-top:12px;color:var(--muted)}

.high{color:#d32f2f;font-weight:700}
.low{color:#f57c00;font-weight:700}
.normal{color:#388e3c;font-weight:700}

.back-btn{background:var(--gold);color:#000;border:0;padding:10px 18px;border-radius:8px;font-weight:700;margin-top:14px;cursor:pointer}
.back-btn:hover{background:#f1c40f}

/* Responsive */
@media(max-width:900px){
  .filter-row{flex-direction:column;align-items:stretch}
  .filter-top{gap:8px}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
</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"></i> Verified Laboratory Results</h1>
      <div style="display:flex;gap:12px;align-items:center">
        <i class="fa-solid fa-user-circle" style="opacity:.95"></i>
        <i class="fa-solid fa-right-from-bracket" style="opacity:.95"></i>
      </div>
    </div>

    <!-- Filter Card -->
    <div class="filter-card" id="filterCard">
      <div class="filter-top" onclick="toggleFilter()">
        <h3>Search & Filters</h3>
        <button class="filter-toggle" id="filterToggleBtn" title="Collapse / Expand"><i class="fa-solid fa-chevron-up"></i></button>
      </div>

      <div class="filter-body" id="filterBody">
        <div class="filter-row">
          <div class="flex-1">
            <input type="text" id="unifiedSearch" placeholder="Search by Hospital ID, Patient Name, NHIS No. or Phone No.">
          </div>

          <div style="min-width:180px">
            <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600">Verified Date From</label>
            <input type="date" id="verifiedFrom">
          </div>
          <div style="min-width:180px">
            <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600">Verified Date To</label>
            <input type="date" id="verifiedTo">
          </div>

          <div style="min-width:220px">
            <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600">Verified By</label>
            <input type="text" id="verifiedByFilter" placeholder="Search by staff name (e.g. Mary)">
          </div>

          <div>
            <label style="display:block;visibility:hidden">apply</label>
            <button onclick="applyFilters()"><i class="fa-solid fa-filter"></i> Apply</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Total Summary Section -->
    <div class="total-card">
      <div class="total-box">
        <i class="fa-solid fa-list-check"></i> Total Verified Results: <span id="totalCount">0</span>
      </div>
    </div>

    <!-- Table -->
    <div class="table-container">
      <table class="lab-table" id="labTable">
        <thead>
          <tr>
            <th>#</th>
            <th>Verified Date & Time</th>
            <th>Hospital ID</th>
            <th>Patient Name</th>
            <th>Age</th>
            <th>Test Name</th>
            <th>Result Entered By</th>
            <th>Status</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody>
          <tr class="verified-row"
              data-verified-date="2025-10-14"
              data-hospital="GH-A20-0058"
              data-name="Prince Agozi"
              data-nhis="NHIS-8899123"
              data-phone="+233241234567"
              data-verifiedby="LabTech Mary Addae">
            <td>1</td>
            <td>2025-10-14 | 10:30 AM</td>
            <td>GH-A20-0058</td>
            <td>Prince Agozi</td>
            <td>29</td>
            <td>Full Blood Count (Automation)</td>
            <td>LabTech Mary Addae</td>
            <td><span class="status-badge">Verified</span></td>
            <td><button class="view-btn" onclick="openResultModal('fbc')"><i class="fa-solid fa-eye"></i></button></td>
          </tr>

          <tr class="verified-row"
              data-verified-date="2025-10-14"
              data-hospital="GH-A20-0065"
              data-name="Akua Boateng"
              data-nhis="NHIS-7721002"
              data-phone="+233249988776"
              data-verifiedby="LabTech Kojo Addai">
            <td>2</td>
            <td>2025-10-14 | 11:10 AM</td>
            <td>GH-A20-0065</td>
            <td>Akua Boateng</td>
            <td>34</td>
            <td>Urine Routine Examination</td>
            <td>LabTech Kojo Addai</td>
            <td><span class="status-badge">Verified</span></td>
            <td><button class="view-btn" onclick="openResultModal('urine')"><i class="fa-solid fa-eye"></i></button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <button class="back-btn" onclick="window.location.href='verify_lab_results.php'"><i class="fa-solid fa-arrow-left"></i> Go to Pending Verifications</button>

  </div>
</div>

<!-- Modal -->
<div class="modal" id="resultModal" aria-hidden="true">
  <div class="modal-content" role="dialog" aria-modal="true">
    <div class="modal-header">
      <h2 id="resultTitle">Lab Result Details</h2>
      <span class="close-modal" onclick="closeModal()" title="Close"><i class="fa-solid fa-xmark"></i></span>
    </div>
    <div class="modal-body" id="modalBodyContent"></div>
    <div class="modal-footer" id="modalFooter"></div>
  </div>
</div>

<script>
const filterBody=document.getElementById('filterBody');
const filterToggleBtn=document.getElementById('filterToggleBtn');
let filterExpanded=true;
function toggleFilter(){
  filterExpanded=!filterExpanded;
  filterBody.style.display=filterExpanded?'block':'none';
  filterToggleBtn.innerHTML=filterExpanded?'<i class="fa-solid fa-chevron-up"></i>':'<i class="fa-solid fa-chevron-down"></i>';
}

function applyFilters(){
  const search=(document.getElementById('unifiedSearch').value||'').trim().toLowerCase();
  const vFrom=document.getElementById('verifiedFrom').value;
  const vTo=document.getElementById('verifiedTo').value;
  const verifiedByFilter=(document.getElementById('verifiedByFilter').value||'').trim().toLowerCase();

  const rows=document.querySelectorAll('#labTable tbody tr');
  let visibleCount=0;

  rows.forEach(row=>{
    const rHospital=(row.dataset.hospital||'').toLowerCase();
    const rName=(row.dataset.name||'').toLowerCase();
    const rNhis=(row.dataset.nhis||'').toLowerCase();
    const rPhone=(row.dataset.phone||'').toLowerCase();
    const rVerifiedBy=(row.dataset.verifiedby||'').toLowerCase();
    const rVerifiedDate=row.dataset.verifiedDate||'';

    const unifiedMatch=!search||rHospital.includes(search)||rName.includes(search)||rNhis.includes(search)||rPhone.includes(search);
    const verifiedByMatch=!verifiedByFilter||rVerifiedBy.includes(verifiedByFilter);

    let dateMatch=true;
    if(vFrom){dateMatch=dateMatch&&(rVerifiedDate>=vFrom);}
    if(vTo){dateMatch=dateMatch&&(rVerifiedDate<=vTo);}

    const show=unifiedMatch&&verifiedByMatch&&dateMatch;
    row.style.display=show?'':'none';
    if(show) visibleCount++;
  });

  document.getElementById('totalCount').textContent=visibleCount;
}

// count on load
document.addEventListener('DOMContentLoaded',()=>{
  const total=document.querySelectorAll('#labTable tbody tr').length;
  document.getElementById('totalCount').textContent=total;
});

// Enter triggers filter
document.getElementById('unifiedSearch').addEventListener('keydown',e=>{
  if(e.key==='Enter') applyFilters();
});

// Modal logic remains unchanged
function openResultModal(type){
  const modal=document.getElementById('resultModal');
  const body=document.getElementById('modalBodyContent');
  const title=document.getElementById('resultTitle');
  const footer=document.getElementById('modalFooter');
  footer.innerHTML='';

  if(type==='fbc'){
    title.textContent='Full Blood Count (Automation) - Results';
    footer.textContent='Verified by: LabTech Mary Addae | 2025-10-14, 10:30 AM';
    body.innerHTML=`
      <table>
        <thead><tr><th>Parameter</th><th>Result</th><th>Reference Range</th><th>Interpretation</th></tr></thead>
        <tbody>
          <tr><td>Hemoglobin (Hb)</td><td>10.5 g/dL</td><td>12.0 - 16.0 g/dL</td><td class="low">Low</td></tr>
          <tr><td>White Blood Cells (WBC)</td><td>8.0 ×10⁹/L</td><td>4.0 - 10.0 ×10⁹/L</td><td class="normal">Normal</td></tr>
          <tr><td>Platelet Count</td><td>210 ×10⁹/L</td><td>150 - 400 ×10⁹/L</td><td class="normal">Normal</td></tr>
          <tr><td>Hematocrit (HCT)</td><td>34%</td><td>36 - 46%</td><td class="low">Low</td></tr>
          <tr><td>Mean Corpuscular Volume (MCV)</td><td>88 fL</td><td>80 - 96 fL</td><td class="normal">Normal</td></tr>
        </tbody>
      </table>`;
  } else if(type==='urine'){
    title.textContent='Urine Routine Examination - Results';
    footer.textContent='Verified by: LabTech Kojo Addai | 2025-10-14, 11:10 AM';
    body.innerHTML=`
      <table>
        <thead><tr><th>Parameter</th><th>Result</th><th>Reference</th><th>Interpretation</th></tr></thead>
        <tbody>
          <tr><td>Color</td><td>Straw Yellow</td><td>Normal</td><td class="normal">Normal</td></tr>
          <tr><td>pH</td><td>6.0</td><td>4.5 - 8.0</td><td class="normal">Normal</td></tr>
          <tr><td>Protein</td><td>Trace</td><td>Negative</td><td class="high">High</td></tr>
          <tr><td>Glucose</td><td>Negative</td><td>Negative</td><td class="normal">Normal</td></tr>
          <tr><td>Ketones</td><td>Negative</td><td>Negative</td><td class="normal">Normal</td></tr>
          <tr><td>Leukocytes</td><td>Few</td><td>Absent</td><td class="high">High</td></tr>
        </tbody>
      </table>`;
  } else {
    title.textContent='Result Details';
    body.innerHTML='<p>No details available</p>';
  }
  modal.style.display='flex';
  modal.setAttribute('aria-hidden','false');
}
function closeModal(){
  const modal=document.getElementById('resultModal');
  modal.style.display='none';
  modal.setAttribute('aria-hidden','true');
}
document.getElementById('resultModal').addEventListener('click',e=>{
  if(e.target===e.currentTarget)closeModal();
});
document.addEventListener('keydown',e=>{
  if(e.key==='Escape'){
    const modal=document.getElementById('resultModal');
    if(modal.style.display==='flex')closeModal();
  }
});
</script>
</body>
</html>
