<?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>Sample Management | 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;
  --red:#dc2626;
  --gold:#ffd700;
  --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;margin-top:10px;}
.collect-btn{
  border:none;padding:10px 20px;border-radius:6px;color:#fff;font-weight:700;cursor:pointer;background:var(--green);
}
.collect-btn:hover{opacity:0.9;}
.collected-row{background:var(--gold) !important;}

/* Bottom Navigation Button */
.bottom-btn{
  background:var(--gold);
  color:#000;
  padding:12px 24px;
  border:none;
  border-radius:8px;
  font-weight:700;
  margin-top:28px;
  cursor:pointer;
  display:block;
  width:fit-content;
  transition:0.3s;
}
.bottom-btn:hover{background:#f1c40f;}

/* 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:420px;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-vials"></i> Laboratory Sample Management</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="recommendation">Recommendation 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 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>Test Name</th>
              <th>Requested By</th>
              <th>Recommendation</th>
              <th>Department</th>
              <th>Select</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2025-10-14</td>
              <td>09:45 AM</td>
              <td>Full Blood Count</td>
              <td>Dr. Kwame Mensah</td>
              <td>Urgent due to suspected anemia</td>
              <td>General OPD</td>
              <td><input type="checkbox" class="collect-check"></td>
            </tr>
            <tr>
              <td>2025-10-14</td>
              <td>10:10 AM</td>
              <td>Urinalysis</td>
              <td>Dr. Kwame Mensah</td>
              <td>Check for infection</td>
              <td>General OPD</td>
              <td><input type="checkbox" class="collect-check"></td>
            </tr>
          </tbody>
        </table>
        <div class="action-btns">
          <button class="collect-btn" onclick="markCollected(this)">Collect</button>
        </div>
      </div>
    </div>

    <!-- PATIENT 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>Test Name</th>
              <th>Requested By</th>
              <th>Recommendation</th>
              <th>Department</th>
              <th>Select</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2025-10-13</td>
              <td>02:30 PM</td>
              <td>Renal Function Test</td>
              <td>Dr. Ama Ofori</td>
              <td>Monitor kidney function</td>
              <td>Internal Medicine</td>
              <td><input type="checkbox" class="collect-check"></td>
            </tr>
            <tr>
              <td>2025-10-13</td>
              <td>02:50 PM</td>
              <td>Blood Glucose (Fasting)</td>
              <td>Dr. Ama Ofori</td>
              <td>Diabetic patient follow-up</td>
              <td>Internal Medicine</td>
              <td><input type="checkbox" class="collect-check"></td>
            </tr>
          </tbody>
        </table>
        <div class="action-btns">
          <button class="collect-btn" onclick="markCollected(this)">Collect</button>
        </div>
      </div>
    </div>

    <!-- Go to Requests Button -->
    <button class="bottom-btn" onclick="window.location.href='lab_request_and_recommendations.php'">
      <i class="fa-solid fa-folder-open"></i> Go to Requests
    </button>

  </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 markCollected(button){
  const rows = button.closest('.patient-details').querySelectorAll('.collect-check:checked');
  if(rows.length === 0){
    alert("Please select at least one lab test to mark as collected.");
    return;
  }
  rows.forEach(chk => {
    chk.closest('tr').classList.add('collected-row');
  });
  alert(rows.length + " sample(s) marked as collected.");
}

function applyFilter(){
  alert("Filter logic integrates with backend query by request and recommendation date.");
}
</script>
</body>
</html>
