<?php 
// Include sidebar correctly
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>View Appointment | DripDental</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: #0096c7;
  --accent-light: #48cae4;
  --green: #2a9d8f;
  --muted:#6b7280;
  --chip-bg:#e6f7fb;
  --drg-color: #f0f4ff;
  --icd-color: #fff4e6;
}

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

/* Sidebar Layout */
.sidebar{
  width:var(--sidebar-width);
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  overflow-y:auto;
  z-index:1000;
}

.page-wrapper{
  margin-left:calc(var(--sidebar-width) + var(--sidebar-gap));
  padding:20px 24px;
  min-height:100vh;
  display:flex;
  justify-content:center;
}

/* Appointment Container */
.appointment-container{
  width:100%;
  max-width:980px;
  background:#fff;
  border-radius:10px;
  padding:26px;
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
}

/* Page Title */
.page-title{
  font-size:24px;
  font-weight:700;
  color:var(--accent-dark);
  text-align:center;
  margin-bottom:20px;
}













/* Tabs */
.patient-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent-mid));
  padding:8px;
  border-radius:8px;
}
.patient-tab{
  padding:8px 18px;
  border-radius:20px;
  background:#fff;
  color:var(--accent-dark);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  border:1px solid var(--border);
  transition:all .22s ease;
}
.patient-tab:hover,
.patient-tab.active{
  background:var(--green);
  color:#fff;
  transform:scale(1.04);
}

/* Patient Header */
.patient-header{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:18px 16px;
  background:linear-gradient(90deg,var(--cream),var(--yellow));
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:16px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

/* left column: photo + balance */
.header-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:110px;
}

/* photo */
.patient-photo{
  width:88px;
  height:88px;
  border-radius:12px;
  background:var(--accent-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:var(--accent-dark);
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* account balance */
.patient-balance{
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  margin-left:2px;
  margin-top:2px;
}

/* main info group */
.header-main{
  flex:1;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px 12px;
  align-items:start;
}

/* name block */
.name-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.patient-name{
  font-size:20px;
  font-weight:800;
  color:var(--accent-dark);
  line-height:1.05;
}

/* hospital id styled */
.hospital-id{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent-mid),var(--accent-dark));
  color:#fff;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* small details */
.small-details{
  display:grid;
  grid-template-columns:repeat(2, minmax(120px,1fr));
  gap:6px 12px;
  font-size:13px;
  margin-top:6px;
}
.small-details div strong{color:var(--accent-dark); font-weight:700}

/* right icons */
.header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.icon-bar{
  display:flex;
  gap:10px;
}
.icon-bar i{
  font-size:18px;
  color:var(--accent-dark);
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.icon-bar i:hover{
  color:var(--accent-mid);
  transform:scale(1.1);
}

/* Form Layout */
form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:6px;
}
.form-group{
  display:flex;
  flex-direction:column;
}
.form-group label{
  font-weight:600;
  font-size:13px;
  margin-bottom:6px;
  color:var(--accent-dark);
}
input[type=text],
input[type=date],
input[type=time],
select,
textarea{
  border:1px solid var(--border);
  border-radius:6px;
  padding:9px;
  font-size:14px;
  outline:none;
  background:#fff;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-mid);
  box-shadow:0 2px 8px rgba(0,119,182,0.15);
}
input[readonly]{background:#eef4fb}

/* Section header */
.section-header{
  grid-column:1/-1;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent-mid));
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:8px 10px;
  border-radius:6px;
  margin-top:12px;
  margin-bottom:8px;
}
.header-spacer{grid-column:1/-1;height:8px;}

.btn-add{
  background:var(--accent-mid);
  color:#fff;
  padding:8px 14px;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:all .22s ease;
}
.btn-add:hover{transform:scale(1.03);opacity:0.95;}
.actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.btn{
  padding:10px 16px;
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:#e63946;color:#fff}


.timestamp{
  margin-top:14px;
  color:var(--accent-dark);
  font-weight:600;
  font-size:14px;
}
f
/* Collapsible Sections */
.section{
  background:#fff;
  border-radius:8px;
  margin-top:18px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(8,20,34,0.04);
}
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent-mid));
  color:#fff;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
}
.section-body{
  display:none;
  padding:16px;
  color:#222;
  font-size:14px;
}
.section-body.active{display:block}

/* === Vital signs: compact & colorful === */
.vitals-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  align-items:end;
}
.vital-item{
  background:linear-gradient(180deg,#ffffff,var(--chip-bg));
  border:1px solid rgba(2,62,138,0.06);
  padding:8px;
  border-radius:8px;
}
.vital-label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.vital-last{font-size:12px;color:#666;margin-bottom:6px}
.vital-inputs{display:flex;gap:6px;align-items:center}
.vital-inputs input[type="text"]{
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #d6e9f4;
  width:72px;
  font-size:13px;
  background:#fff;
}
.vital-unit{font-size:12px;color:var(--accent-dark);font-weight:700}

/* smaller special BP inputs */
.bp-wrap{display:flex;gap:6px;align-items:center}
.bp-wrap input{width:56px;padding:6px;border-radius:6px;border:1px solid #d6e9f4}

/* toggle button */
.toggle-icon{
  background:var(--green);
  border:none;
  color:#fff;
  border-radius:50%;
  width:26px;
  height:26px;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.toggle-icon:hover{background:#21867b}

/* Doctor Notes & Treatment Plan: large textareas */
.big-text{
  width:100%;
  min-height:140px;
  padding:10px;
  border-radius:8px;
  border:1px solid #dceefb;
  resize:vertical;
  font-size:14px;
}

/* Diagnosis area */
.diagnosis-section{display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:start}
.drg-area, .icd-area{background:#fbfcff;padding:12px;border-radius:8px;border:1px solid #e6f0fb}
.field-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.autocomplete-input{
  width:100%;
  padding:8px 10px;border-radius:6px;border:1px solid #d6e9f4;font-size:14px;background:#fff;
}
.small-select{padding:8px;border-radius:6px;border:1px solid #d6e9f4;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{
  background:var(--chip-bg);
  padding:6px 10px;border-radius:999px;border:1px solid rgba(2,62,138,0.06);
  font-weight:700;color:var(--accent-dark);display:flex;gap:8px;align-items:center;
}
.chip .remove{cursor:pointer;color:#b23a3a;font-weight:800}

/* history button */
.btn-small{background:var(--accent-mid);color:#fff;padding:8px 10px;border:none;border-radius:6px;cursor:pointer}



.pres-row, .pres-row-2 {
  display: grid;
  margin-bottom: 10px;
}

.prescription-block {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.pres-row {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.pres-row-2 {
  grid-template-columns: 1fr 3fr 1fr;
  gap: 8px;
  align-items: center;
}

.pres-row input, .pres-row select,
.pres-row-2 input, .pres-row-2 select,
.small-select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.btn-blue {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-blue:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}




/* Lab request styling */
.lab-requests{display:flex;flex-direction:column;gap:10px}
.lab-request-row{display:grid;grid-template-columns:1fr 1fr 60px;gap:8px;align-items:center;padding:8px;border:1px solid #eef7fb;border-radius:8px;background:#fbfeff}
.lab-request-row input, .lab-request-row select{padding:8px;border-radius:6px;border:1px solid #d6e9f4;background:#fff;font-size:14px}




















/* Admission recommendation */
.admission-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* follow-up */
.followup-row{display:flex;gap:12px;align-items:center}

/* attachments */
.attachments input[type="file"]{display:block}

/* clinical outcome */
.outcome-select{padding:8px;border-radius:6px;border:1px solid #d6e9f4;background:#fff;width:100%}

/* bottom actions */
.bottom-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}
.btn{
  border:none;padding:9px 15px;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;
}
.btn-blue{background:var(--accent-mid)}
.btn-green{background:var(--green)}
.btn-red{background:#e63946}

/* modal for diagnosis history & billing etc */
.modal-overlay{
  position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:3000;
}
.modal{
  background:#fff;border-radius:10px;padding:18px;width:90%;max-width:760px;box-shadow:0 10px 30px rgba(0,0,0,0.2);
}
.modal h3{margin:0 0 10px 0;color:var(--accent-dark)}
.modal table{width:100%;border-collapse:collapse;margin-top:10px}
.modal th, .modal td{padding:8px;border-bottom:1px solid #eef6fb}
.modal .close-btn{position:absolute;right:18px;top:18px;background:none;border:none;font-size:20px;cursor:pointer;color:#666}
</style>
</head>
<body>
   
<div class="page-wrapper">
  <div class="appointment-container">
    <h1 class="page-title">View Appointment</h1>


 <div class="patient-tabs">
      <div class="patient-tab active">Basic Info</div>
      <div class="patient-tab">Contact</div>
      <div class="patient-tab">Plan</div>
      <div class="patient-tab">Actions</div>
    </div>

    <!-- Patient Header -->
    <div class="patient-header">
      <div class="header-left">
        <div class="patient-photo"><i class="fa-solid fa-user"></i></div>
        <div class="patient-balance">GHS 0.00 Due</div>
      </div>

      <div class="header-main">
        <div class="name-block">
          <div class="patient-name">Prince Agozi</div>
          <div class="small-details">
            <div><strong>Hospital ID:</strong> <span class="hospital-id">GA-A18-0034</span></div>
            <div><strong>Gender:</strong> Male</div>
            <div><strong>NHIS No.:</strong> NHIS-00284711</div>
            <div><strong>Insurance:</strong> Premier Health</div>
            <div><strong>Private Ins. No.:</strong> PH-54891</div>
            <div><strong>DOB:</strong> 10-07-2005</div>
            <div><strong>Age:</strong> 20 yrs</div>
            <div><strong>Is Patient Staff?:</strong> 
              <label><input type="checkbox" name="staff_yes"> Yes</label> 
              <label><input type="checkbox" name="staff_no"> No</label>
            </div>
          </div>
        </div>

        <div class="header-right">
          <div class="icon-bar">
            <i class="fa-solid fa-eye" title="View Medical History"></i>
            <i class="fa-solid fa-paperclip" title="View Attachments"></i>
            <i class="fa-solid fa-stethoscope" title="Visits"></i>
          </div>
        </div>
      </div>
    </div>


    

    <div class="timestamp">Time: 09:30 AM | Appointment Date: 09 Oct 2025</div>

    <!-- Vital Signs Section -->
    <div class="section">
      <div class="section-header">
        <span>Vital Signs</span>
        <button class="toggle-icon" aria-expanded="false">+</button>
      </div>
      <div class="section-body">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
          <div style="font-weight:600;color:var(--accent-dark)">Add new vital reading</div>
          <div style="font-size:13px;color:var(--muted)">Last captured: 10-Oct-2025 12:04</div>
        </div>

        <div class="vitals-grid">
          <div class="vital-item">
            <div class="vital-label">Temperature</div>
            <div class="vital-last">37.2 °C</div>
            <div class="vital-inputs"><input type="text" id="v_temp" placeholder="37.0"><span class="vital-unit">°C</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Pulse</div>
            <div class="vital-last">77 /min</div>
            <div class="vital-inputs"><input type="text" id="v_pulse" placeholder="80"><span class="vital-unit">/min</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Blood Pressure</div>
            <div class="vital-last">127 / 71 mmHg</div>
            <div class="vital-inputs bp-wrap"><input type="text" id="v_bp_sys" placeholder="120"> / <input type="text" id="v_bp_dia" placeholder="80"><span class="vital-unit">mmHg</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Respiration</div>
            <div class="vital-last">15 /min</div>
            <div class="vital-inputs"><input type="text" id="v_resp" placeholder="16"><span class="vital-unit">/min</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">SpO₂</div>
            <div class="vital-last">98%</div>
            <div class="vital-inputs"><input type="text" id="v_spo2" placeholder="98"><span class="vital-unit">%</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Weight</div>
            <div class="vital-last">66 kg</div>
            <div class="vital-inputs"><input type="text" id="v_weight" placeholder="66"><span class="vital-unit">kg</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Height</div>
            <div class="vital-last">170 cm</div>
            <div class="vital-inputs"><input type="text" id="v_height" placeholder="170"><span class="vital-unit">cm</span></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">BMI</div>
            <div class="vital-last">22.8</div>
            <div class="vital-inputs"><input type="text" id="v_bmi" placeholder="22.8"></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Fasting Blood Sugar</div>
            <div class="vital-last">—</div>
            <div class="vital-inputs"><input type="text" id="v_fbs" placeholder="mmol/L"></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Random Blood Sugar</div>
            <div class="vital-last">—</div>
            <div class="vital-inputs"><input type="text" id="v_rbs" placeholder="mmol/L"></div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Urine Pregnancy Test</div>
            <div class="vital-last">—</div>
            <div class="vital-inputs">
              <select id="v_upreg" class="small-select">
                <option value="">--Select--</option>
                <option>Positive</option>
                <option>Negative</option>
              </select>
            </div>
          </div>

          <div class="vital-item">
            <div class="vital-label">Rapid Diagnostic Test</div>
            <div class="vital-last">—</div>
            <div class="vital-inputs">
              <select id="v_rdt" class="small-select">
                <option value="">--Select--</option>
                <option>Positive</option>
                <option>Negative</option>
              </select>
            </div>
          </div>
          
           <div class="vital-item">
            <div class="vital-label">Urine</div>
            <div class="vital-last">—</div>
            <div class="vital-inputs"><input type="text" id="v_rdt" placeholder=""></div>
          </div>
        </div>

        <div style="margin-top:12px;display:flex;gap:8px;justify-content:flex-end">
          <button class="btn btn-blue" onclick="saveVitals()">Save Vitals</button>
        </div>
      </div>
    </div>

    <!-- Doctor Note -->
    <div class="section">
      <div class="section-header">
        <span>Doctor Note</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <textarea class="big-text" id="doctor_note" placeholder="Write doctor's note..."></textarea>
      </div>
    </div>

    <!-- Diagnosis -->
    <div class="section">
      <div class="section-header">
        <span>Diagnosis</span>
        <div>
          <button class="btn-small" onclick="openDiagHistory()">History</button>
          <button class="toggle-icon">+</button>
        </div>
      </div>
      <div class="section-body">
        <div class="diagnosis-section">
          <!-- DRG side -->
          <div class="drg-area">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
              <strong>DRG / Procedure</strong>
              <div style="display:flex;gap:8px;align-items:center">
                <label style="font-size:13px;color:var(--muted)"><input type="checkbox" id="drg_principal"> Principal</label>
              </div>
            </div>

            <div class="field-row">
              <input id="drg_input" class="autocomplete-input" list="drg_list" placeholder="Type procedure or GDRG code...">
              <button class="btn-small" onclick="addDRG()">Add</button>
            </div>

            <datalist id="drg_list">
              <!-- example options; replace with server-driven options if available -->
              <option value="GDRG-001 - Tooth Extraction"></option>
              <option value="GDRG-002 - Root Canal"></option>
              <option value="GDRG-010 - Filling"></option>
            </datalist>

            <div class="chips" id="drg_chips"></div>
          </div>

          <!-- ICD-10 side -->
          <div class="icd-area">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
              <strong>ICD-10</strong>
              <div style="display:flex;gap:8px;align-items:center">
                <label style="font-size:13px;color:var(--muted)"><input type="checkbox" id="icd_principal"> Principal</label>
                <select id="icd_type" class="small-select" title="New/Review">
                  <option value="new">New</option>
                  <option value="review">Review</option>
                </select>
              </div>
            </div>

            <div class="field-row">
              <input id="icd_input" class="autocomplete-input" list="icd_list" placeholder="Type ICD-10 code or diagnosis...">
              <button class="btn-small" onclick="addICD()">Add</button>
            </div>

            <datalist id="icd_list">
              <option value="A00 - Cholera"></option>
              <option value="K02 - Dental caries"></option>
              <option value="K04 - Pulpitis"></option>
              <option value="J02 - Acute pharyngitis"></option>
            </datalist>

            <div class="chips" id="icd_chips"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Treatment Plan -->
    <div class="section">
      <div class="section-header">
        <span>Treatment Plan</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <textarea class="big-text" id="treatment_plan" placeholder="Describe treatment plan..."></textarea>
      </div>
    </div>

  
<!-- Prescription Section -->
<div class="section">
  <div class="section-header">
    <span>Prescription</span>
    <button class="toggle-icon">+</button>
  </div>

  <div class="section-body">
    <!-- Pharmacy Selector -->
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px">
      <label style="font-weight:600">Dispensing Pharmacy:</label>
      <select id="dispensing_pharmacy" class="small-select">
        <option value="">Select Pharmacy</option>
        <option value="main">Main Pharmacy</option>
        <option value="cash">Cash & Carry</option>
        <option value="satellite">Satellite Pharmacy</option>
      </select>
    </div>

    <!-- Prescription Container -->
    <div id="prescriptions_container">
      <div class="prescription-block" data-index="0">
        <div class="pres-row">
          <input name="drug_name[]" placeholder="Drug Name" />
          <select name="formulation[]">
            <option>Form</option>
            <option>Tablet</option>
            <option>Capsule</option>
            <option>Syrup</option>
            <option>Injection</option>
          </select>
          <input name="strength[]" placeholder="Strength" />
          <select name="dose[]">
            <option>Dose</option>
            <option>1 tab</option>
            <option>2 tabs</option>
            <option>5 ml</option>
          </select>
          <input name="frequency[]" placeholder="Frequency (e.g. bd, tds)" />
          <input name="duration[]" placeholder="Days" />
        </div>

        <div class="pres-row-2">
          <label style="font-size:13px;color:#64748b;font-weight:600">Qty</label>
          <input name="quantity[]" placeholder="Total quantity" />
          <input name="remarks[]" placeholder="Remarks (optional)" />
        </div>
      </div>
    </div>

    <!-- Add Another Prescription Button -->
    <div style="margin-top:10px;display:flex;justify-content:flex-end;gap:8px">
      <button type="button" class="btn-blue" onclick="addPrescription()">+ Add Prescription</button>
    </div>
  </div>
</div>

<script>
function addPrescription() {
  const container = document.getElementById('prescriptions_container');
  const firstBlock = container.querySelector('.prescription-block');

  // Clone the existing block (deep clone to include all child inputs)
  const newBlock = firstBlock.cloneNode(true);
  const index = container.children.length;

  // Clear input values for the new block
  newBlock.dataset.index = index;
  newBlock.querySelectorAll('input').forEach(input => input.value = '');
  newBlock.querySelectorAll('select').forEach(select => select.selectedIndex = 0);

  container.appendChild(newBlock);
}
</script>


    <!-- Lab Request -->
 <!--   <div class="section">
      <div class="section-header">
        <span>Lab Request</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <textarea class="big-text" id="lab_request" placeholder="Enter lab tests required..."></textarea>
      </div>
    </div> -->
    
  <!-- Lab Request -->
    <div class="section">
      <div class="section-header">
        <span>Lab Request</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <div style="display:flex;gap:10px;align-items:center;margin-bottom:12px">
          <label style="font-weight:700">Department:</label>
          <select id="lab_department" class="small-select">
            <option value="">Select Department</option>
            <option value="hematology">Hematology</option>
            <option value="microbiology">Microbiology</option>
            <option value="biochemistry">Biochemistry</option>
            <option value="radiology">Radiology</option>
          </select>
          <button class="btn btn-blue" onclick="addLabRequest()">+ Add Lab Request</button>
        </div>

        <div class="lab-requests" id="labRequestsContainer">
          <!-- appended lab request rows will appear here -->
        </div>
      </div>
    </div>  
    
    
    
    
    
    
 <script>   
   /* --- Lab Requests: add/remove dynamic rows --- */
let labIndex = 0;
function addLabRequest(){
  const dept = document.getElementById('lab_department').value;
  if(!dept) return alert('Please select a department first');
  const container = document.getElementById('labRequestsContainer');
  const row = document.createElement('div');
  row.className = 'lab-request-row';
  row.dataset.index = labIndex++;
  row.innerHTML = `
    <select name="lab_department[]" class="lab-dept">
      <option value="${dept}">${dept.charAt(0).toUpperCase()+dept.slice(1)}</option>
    </select>
    <input name="lab_test[]" placeholder="Enter lab test / investigation" />
    <button type="button" class="btn btn-red" onclick="this.closest('.lab-request-row').remove()">Remove</button>
  `;
  container.appendChild(row);
}
</script>



    <!-- Admission Recommendation -->
    <div class="section">
      <div class="section-header">
        <span>Admission Recommendation</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <div class="admission-row">
          <div>
            <label style="font-weight:700">Ward</label>
            <select class="small-select" id="admit_ward">
              <option value="">Select Ward</option>
              <option>General Ward</option>
              <option>High Dependency Unit</option>
              <option>Special Care</option>
            </select>
          </div>
          <div>
            <label style="font-weight:700">Diagnosis for Admission</label>
            <input type="text" id="admit_diagnosis" class="autocomplete-input" placeholder="Type diagnosis..." />
          </div>
        </div>

        <div style="margin-top:10px">
          <label style="font-weight:700">Treatment Plan for Admission</label>
          <textarea class="big-text" id="admit_treatment"></textarea>
        </div>
      </div>
    </div>

    <!-- Follow-up / Next Review -->
    <div class="section">
      <div class="section-header">
        <span>Follow-up / Next Review</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <div class="followup-row">
          <label style="font-weight:700">Next Review Date:</label>
          <input type="date" id="next_review" />
        </div>
      </div>
    </div>

    <!-- Attachments and Files -->
    <div class="section">
      <div class="section-header">
        <span>Attachments and Files</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body attachments">
        <input type="file" id="attachments" multiple />
        <small style="color:var(--muted)">Allowed: pdf, jpg, png, docx. Multiple files can be selected.</small>
      </div>
    </div>

    <!-- Clinical Outcome -->
    <div class="section">
      <div class="section-header">
        <span>Clinical Outcome</span>
        <button class="toggle-icon">+</button>
      </div>
      <div class="section-body">
        <label style="font-weight:700">Outcome</label>
        <select id="clinical_outcome" class="outcome-select">
          <option value="">Select Outcome</option>
          <option value="discharged_ok">Discharged - Satisfactory</option>
          <option value="dama">Discharge Against Medical Advice</option>
          <option value="admit_recommended">Recommended for Admission</option>
        </select>
      </div>
    </div>

    <!-- Bottom Buttons -->
    <div class="bottom-actions">
      <button class="btn btn-blue" onclick="saveDraft()">Pending Review</button>
      <button class="btn btn-green" onclick="sendToDoctor()">Save Consultation</button>
      <button class="btn btn-red" onclick="window.location.href='appointment_calendar.php'">Go to Appointment Calendar</button>
      <!--<button class="btn btn-red" onclick="window.location.href='../../dashboard.php'">Go to Appointment Calendar</button>-->
    </div>

  </div>
</div>

<!-- Diagnosis history modal -->
<div class="modal-overlay" id="diagHistoryModal">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="diagHistoryTitle">
    <button class="modal-close close-btn" onclick="closeDiagHistory()">&times;</button>
    <h3 id="diagHistoryTitle">Diagnosis History</h3>
    <table>
      <thead><tr><th>#</th><th>Date</th><th>Diagnosis</th><th>Type</th></tr></thead>
      <tbody id="diagHistoryBody">
        <!-- populated via JS -->
      </tbody>
    </table>
    <div style="margin-top:12px;text-align:right">
      <button class="btn btn-blue" onclick="closeDiagHistory()">Close</button>
    </div>
  </div>
</div>

<script>
/* Section toggles */
document.querySelectorAll('.section-header').forEach(header=>{
  const btn = header.querySelector('.toggle-icon');
  const body = header.nextElementSibling;
  header.addEventListener('click', (e)=>{
    if(e.target === btn) return;
    const active = body.classList.toggle('active');
    btn.textContent = active ? '-' : '+';
  });
  if(btn){
    btn.addEventListener('click', (e)=>{ e.stopPropagation();
      const active = body.classList.toggle('active');
      btn.textContent = active ? '-' : '+';
    });
  }
});

/* --- Vitals save stub --- */
function saveVitals(){
  // gather vitals, simple stub for demo (send via fetch to server in real app)
  const vitals = {
    temp: document.getElementById('v_temp').value,
    pulse: document.getElementById('v_pulse').value,
    bp_sys: document.getElementById('v_bp_sys').value,
    bp_dia: document.getElementById('v_bp_dia').value,
    resp: document.getElementById('v_resp').value,
    spo2: document.getElementById('v_spo2').value,
    weight: document.getElementById('v_weight').value,
    height: document.getElementById('v_height').value
  };
  console.log('Saving vitals', vitals);
  alert('Vitals saved (demo)');
}

/* --- Diagnosis: add/remove DRG and ICD chips --- */
let drgList = []; // {text, principal}
let icdList = []; // {text, type, principal}

function renderChips(){
  const drgContainer = document.getElementById('drg_chips');
  const icdContainer = document.getElementById('icd_chips');
  drgContainer.innerHTML = '';
  icdContainer.innerHTML = '';

  drgList.forEach((d,i)=>{
    const el = document.createElement('div');
    el.className='chip';
    el.innerHTML = `<span>${d.text}${d.principal? ' • Principal':''}</span><span class="remove" title="Remove" onclick="removeDRG(${i})">&times;</span>`;
    drgContainer.appendChild(el);
  });

  icdList.forEach((d,i)=>{
    const el = document.createElement('div');
    el.className='chip';
    el.innerHTML = `<span>${d.text}${d.principal? ' • Principal':''} ${d.type? '('+d.type+')':''}</span><span class="remove" title="Remove" onclick="removeICD(${i})">&times;</span>`;
    icdContainer.appendChild(el);
  });
}

function addDRG(){
  const val = document.getElementById('drg_input').value.trim();
  if(!val) return alert('Enter DRG or procedure');
  const principal = !!document.getElementById('drg_principal').checked;
  drgList.push({text:val, principal});
  document.getElementById('drg_input').value='';
  document.getElementById('drg_principal').checked=false;
  renderChips();
}

function removeDRG(index){
  drgList.splice(index,1);
  renderChips();
}

function addICD(){
  const val = document.getElementById('icd_input').value.trim();
  if(!val) return alert('Enter ICD-10 code or diagnosis');
  const principal = !!document.getElementById('icd_principal').checked;
  const type = document.getElementById('icd_type').value;
  icdList.push({text:val, principal, type});
  document.getElementById('icd_input').value='';
  document.getElementById('icd_principal').checked=false;
  renderChips();
}

function removeICD(index){
  icdList.splice(index,1);
  renderChips();
}

/* Diagnosis history modal (demo) */
function openDiagHistory(){
  // example history entries; in real app fetch from server
  const history = [
    {date:'2025-08-10', diag:'K02 - Dental caries'},
    {date:'2024-12-01', diag:'K04 - Pulpitis'},
    {date:'2023-06-22', diag:'J02 - Acute pharyngitis'}
  ];
  const tbody = document.getElementById('diagHistoryBody');
  tbody.innerHTML='';
  history.forEach((h,i)=>{
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${i+1}</td><td>${h.date}</td><td>${h.diag}</td><td>${h.diag.includes('K')? 'ICD-10':'DRG'}</td>`;
    tbody.appendChild(tr);
  });
  document.getElementById('diagHistoryModal').style.display='flex';
}

function closeDiagHistory(){ document.getElementById('diagHistoryModal').style.display='none'; }

/* --- Prescriptions: add block --- */
let presIndex = 1;
function addPrescription(){
  const container = document.getElementById('prescriptions_container');
  const block = document.createElement('div');
  block.className='prescription-block';
  block.dataset.index = presIndex++;
  block.innerHTML = `
    <div class="pres-row">
      <input name="drug_name[]" placeholder="Drug name (start typing)" />
      <select name="formulation[]">
        <option>Formulation</option>
        <option>Tablet</option>
        <option>Capsule</option>
        <option>Syrup</option>
      </select>
      <input name="strength[]" placeholder="Strength" />
    </div>
    <div class="pres-row-2">
      <select name="dose[]">
        <option>Dose</option>
        <option>1 tablet</option>
        <option>2 tablets</option>
        <option>5 ml</option>
      </select>
      <input name="frequency[]" placeholder="Frequency (e.g. tds, bd)" />
      <input name="quantity[]" placeholder="Qty" />
    </div>
    <div style="display:flex;justify-content:flex-end;margin-top:6px">
      <button type="button" class="btn btn-red" onclick="this.closest('.prescription-block').remove()">Remove</button>
    </div>
  `;
  container.appendChild(block);
}

/* Stubs for Save/Send actions */
function saveDraft(){
  alert('Draft saved (demo)');
}
function sendToDoctor(){
  alert('Sent to doctor (demo)');
}

/* Initialize some defaults */
window.addEventListener('DOMContentLoaded', ()=>{
  // ensure first sections collapsed initially (toggle icons show +)
  document.querySelectorAll('.section-body').forEach(b=>{ /* collapsed by default */ });
});
</script>

</body>
</html>
