<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Patient | DripDental Hospital</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root {
  --accent-dark:#023e8a;
  --accent-mid:#0077b6;
  --border:#d0d8e4;
  --bg:#f9fafb;
  --text-dark:#1e293b;
  --muted:#64748b;
  --green:#16a34a;
  --danger:#e11d48;
}

body {
  font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
  background:var(--bg);
  margin:0;
  padding:20px;
  color:var(--text-dark);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Responsive Close Bar */
.close-bar {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:12px;
  width:100%;
}

.close-btn {
  background:var(--danger);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 3px 8px rgba(0,0,0,0.1);
  transition:all 0.3s ease-in-out;
}
.close-btn:hover {
  background:#be123c;
  transform:translateY(-2px);
}
.close-btn i {
  font-size:16px;
}

/* Responsive Design */
@media(max-width:768px){
  body{padding:12px;}
  .close-btn{
    font-size:14px;
    padding:8px 14px;
  }
  .search-fields input{
    font-size:13px;
  }
}

/* Search Bar Container */
.search-box {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:20px 25px;
  margin-bottom:25px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.search-box h2 {
  font-size:18px;
  color:var(--accent-dark);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.search-fields {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.search-fields input {
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:14px;
  background:#f8fafc;
}
.search-btn {
  background:var(--accent-mid);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:all 0.2s ease-in-out;
}
.search-btn:hover {background:var(--green);}

/* Table */
.table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
}
.table th, .table td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  text-align:left;
}
.table th {
  background:#e0f2fe;
  color:var(--accent-dark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.table tr:hover {background:#f1f5f9;}
.select-btn {
  background:var(--green);
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}
.select-btn:hover {opacity:0.9;}

/* No Results Message */
.no-results {
  text-align:center;
  padding:20px;
  color:var(--muted);
  font-style:italic;
}
</style>
</head>
<body>

<!-- Top Close Button -->
<div class="close-bar">
  <button class="close-btn" onclick="closeModal()">
    <i class="fa-solid fa-xmark"></i> Close
  </button>
</div>

<!-- Search Box -->
<div class="search-box">
  <h2><i class="fa-solid fa-magnifying-glass"></i> Search Patient Record</h2>
  <div class="search-fields">
    <input type="text" id="hospitalID" placeholder="Hospital ID">
    <input type="text" id="patientName" placeholder="Full Name">
    <input type="text" id="phone" placeholder="Phone Number">
    <input type="text" id="nhisNo" placeholder="NHIS Number">
    <input type="text" id="privateInsNo" placeholder="Private Insurance No.">
    <button class="search-btn" onclick="searchPatient()">
      <i class="fa-solid fa-search"></i> Search
    </button>
  </div>
</div>

<!-- Results Table -->
<table class="table" id="patientTable">
  <thead>
    <tr>
      <th>Hospital ID</th>
      <th>Patient Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Phone</th>
      <th>NHIS No.</th>
      <th>Private Ins. No.</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="patientResults"></tbody>
</table>

<script>
// Simulated Patient Data
const samplePatients = [
  {id:'GH-A20-0058', name:'Prince Agozi', age:29, gender:'Male', phone:'0541234567', nhis:'NHIS-8899123', insurance:'AXA-554233', address:'Adenta, Accra'},
  {id:'GH-A18-0121', name:'Akua Boateng', age:34, gender:'Female', phone:'0249988776', nhis:'NHIS-7721002', insurance:'Enterprise-22012', address:'Madina, Accra'},
  {id:'GH-A21-0333', name:'Nana Yeboah', age:45, gender:'Male', phone:'0556677889', nhis:'NHIS-6623001', insurance:'—', address:'Kasoa'}
];

function searchPatient() {
  const id = document.getElementById('hospitalID').value.toLowerCase();
  const name = document.getElementById('patientName').value.toLowerCase();
  const phone = document.getElementById('phone').value.toLowerCase();
  const nhis = document.getElementById('nhisNo').value.toLowerCase();
  const privateIns = document.getElementById('privateInsNo').value.toLowerCase();

  const results = samplePatients.filter(p =>
    (!id || p.id.toLowerCase().includes(id)) &&
    (!name || p.name.toLowerCase().includes(name)) &&
    (!phone || p.phone.toLowerCase().includes(phone)) &&
    (!nhis || p.nhis.toLowerCase().includes(nhis)) &&
    (!privateIns || p.insurance.toLowerCase().includes(privateIns))
  );

  const tbody = document.getElementById('patientResults');
  tbody.innerHTML = '';

  if (results.length === 0) {
    tbody.innerHTML = `<tr><td colspan="9" class="no-results">No patient records found</td></tr>`;
    return;
  }

  results.forEach(p => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${p.id}</td>
      <td>${p.name}</td>
      <td>${p.age}</td>
      <td>${p.gender}</td>
      <td>${p.phone}</td>
      <td>${p.nhis}</td>
      <td>${p.insurance}</td>
      <td>${p.address}</td>
      <td><button class="select-btn" onclick="selectPatient('${p.id}')">Select</button></td>
    `;
    tbody.appendChild(tr);
  });
}

function selectPatient(hospitalID) {
  window.top.location.href = 'add_lab_request.php?hospital_id=' + hospitalID;
}

function closeModal() {
  if (window.parent && window.parent !== window) {
    window.parent.postMessage({action:'closeModal'}, '*');
  } else {
    window.close();
  }
}
</script>

</body>
</html>
