<?php 
// SERVER-SIDE: We traverse up two directories to reach the 'dripend' folder
require_once __DIR__ . '/../../dripend/includes/db.php';

// CLIENT-SIDE: Bulletproof absolute URLs
$domain = 'https://dripdental.kqmucpub.com';
$iconPath = $domain . '/dripend/assets/icons/dashboard';
$cssPath = $domain . '/dripend/assets/css/style.css';
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Health Information Unit - DripDental</title>
  
  <link rel="stylesheet" href="<?php echo $cssPath; ?>">

  <style>
    :root {
      --accent-green: #006400;
      --light-green: #e8f5e9;
      --gold: #ffd700;
      --blue: #1976d2;
      --light-blue: #e3f2fd;
      --text-dark: #2c3e50;
      --text-muted: #7f8c8d;
      --bg-gray: #f8f9fa;
      --white: #ffffff;
      --border-color: #ecf0f1;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: var(--bg-gray);
      color: var(--text-dark);
    }

    .page-container {
      display: flex;
      flex-direction: row;
      min-height: 100vh;
    }

    main {
      flex: 1;
      padding: 30px;
      overflow-y: auto;
    }

    /* Page Header */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      flex-wrap: wrap;
      gap: 15px;
    }

    .page-header h1 {
      font-size: 24px;
      color: var(--accent-green);
      margin: 0;
      font-weight: 700;
    }

    .header-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .btn-primary {
      background: var(--accent-green);
      color: var(--white);
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.3s ease;
      text-decoration: none;
    }

    .btn-primary:hover { background: #004d00; }

    .btn-blue {
      background: var(--blue);
      color: var(--white);
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.3s ease;
    }

    .btn-blue:hover { background: #115293; }

    .btn-secondary {
      background: var(--white);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-secondary:hover {
      border-color: var(--accent-green);
      color: var(--accent-green);
    }

    /* KPI Cards (Summary Stats) */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .kpi-card {
      background: var(--white);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
      border-left: 5px solid var(--accent-green);
      display: flex;
      flex-direction: column;
    }

    .kpi-card.gold-accent { border-left-color: var(--gold); }
    .kpi-card.blue-accent { border-left-color: var(--blue); }

    .kpi-title {
      font-size: 13px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .kpi-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 10px;
    }

    .kpi-sub-stats {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
      font-size: 12px;
      color: var(--text-muted);
    }

    .stat-group {
      display: flex;
      gap: 10px;
    }

    .stat-group span {
      font-weight: 700;
      color: var(--text-dark);
    }

    /* Content Layout */
    .content-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }

    .card {
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
      padding: 20px;
      border: 1px solid var(--border-color);
      margin-bottom: 20px;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .card-header h2 {
      font-size: 18px;
      margin: 0;
      color: var(--accent-green);
    }

    /* Form Controls for Search & Reports */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      margin-bottom: 15px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .form-control {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      color: var(--text-dark);
      outline: none;
      transition: border-color 0.3s;
      background-color: #fff;
    }

    .form-control:focus {
      border-color: var(--accent-green);
    }

    /* Distinct styling for the Reports Card */
    .report-card {
      background: linear-gradient(145deg, #ffffff 0%, #f0f7f0 100%);
      border-left: 5px solid var(--accent-green);
    }

    /* Modern Table */
    .table-responsive { overflow-x: auto; }
    
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    th {
      text-align: left;
      padding: 12px 15px;
      background: var(--bg-gray);
      color: var(--text-muted);
      font-weight: 600;
      border-bottom: 2px solid var(--border-color);
    }

    td {
      padding: 15px;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-dark);
      vertical-align: middle;
    }

    tr:hover { background: var(--light-green); }

    .folder-no {
      font-weight: 700;
      color: var(--accent-green);
      font-size: 15px;
    }

    /* Badges */
    .badge {
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
    }

    .badge-nhis { background: var(--light-blue); color: var(--blue); }
    .badge-cash { background: var(--light-green); color: var(--accent-green); }
    .badge-corporate { background: #fff3e0; color: #e65100; }
    
    .status-badge {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #ddd;
      background: #fafafa;
    }
    .status-badge.active { border-color: var(--accent-green); color: var(--accent-green); background: var(--light-green); }

    /* Action Buttons inside Table */
    .action-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .btn-sm {
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background: var(--white);
      cursor: pointer;
      color: var(--text-dark);
      transition: all 0.2s;
      font-weight: 600;
    }

    .btn-sm:hover {
      background: var(--accent-green);
      color: var(--white);
      border-color: var(--accent-green);
    }

    .btn-sm.btn-blue:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: var(--white);
    }

    /* Quick Actions List */
    .quick-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .quick-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px dashed var(--border-color);
      font-size: 14px;
    }

    .quick-list li:last-child { border-bottom: none; }

    @media(max-width: 1024px) {
      .content-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>

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

    <main>
      <div class="page-header">
        <h1>Health Information Unit</h1>
        <div class="header-actions">
        <button class="btn-blue" onclick="window.location.href='search_patient.php'">
            + Book Appointment
        </button>
    
        <button class="btn-primary" onclick="window.location.href='addNewPatient.php'">
            + Register New Patient
        </button>
    </div>
      </div>

      <!-- Health Info Specific KPIs with Demographics Segregation -->
      <div class="kpi-grid">
        <div class="kpi-card">
          <div class="kpi-title">Master Patient Index</div>
          <div class="kpi-value">14,248</div>
          <div class="kpi-sub-stats">
            <div class="stat-group">M: <span>6.1k</span> | F: <span>8.1k</span></div>
            <div class="stat-group">Ad: <span>11k</span> | Ch: <span>3.2k</span></div>
          </div>
        </div>
        
        <div class="kpi-card blue-accent">
          <div class="kpi-title">Registrations Today</div>
          <div class="kpi-value">18</div>
          <div class="kpi-sub-stats">
            <div class="stat-group">M: <span>8</span> | F: <span>10</span></div>
            <div class="stat-group">Ad: <span>14</span> | Ch: <span>4</span></div>
          </div>
        </div>
        
        <div class="kpi-card gold-accent">
          <div class="kpi-title">Appointments Today</div>
          <div class="kpi-value">42</div>
          <div class="kpi-sub-stats">
            <div class="stat-group">M: <span>18</span> | F: <span>24</span></div>
            <div class="stat-group">Ad: <span>35</span> | Ch: <span>7</span></div>
          </div>
        </div>
        
        <div class="kpi-card">
          <div class="kpi-title">Folders Retrieved</div>
          <div class="kpi-value">67</div>
          <div class="kpi-sub-stats">
            <div class="stat-group" style="width: 100%; justify-content: center;">Tracking Active Files</div>
          </div>
        </div>
      </div>

      <div class="content-grid">
        <!-- Main Left Column Area -->
        <div>
          <!-- Advanced Search Card -->
          <div class="card">
            <div class="card-header">
              <h2>Advanced Patient Search</h2>
            </div>
            <div class="form-grid">
              <div class="form-group">
                <label>Folder No / Patient ID</label>
                <input type="text" class="form-control" placeholder="e.g. DD-26-0412">
              </div>
              <div class="form-group">
                <label>Phone Number</label>
                <input type="text" class="form-control" placeholder="e.g. 024...">
              </div>
              <div class="form-group">
                <label>Gender</label>
                <select class="form-control">
                  <option value="">All Genders</option>
                  <option value="Male">Male</option>
                  <option value="Female">Female</option>
                </select>
              </div>
              <div class="form-group">
                <label>Payment / Insurance</label>
                <select class="form-control">
                  <option value="">All Types</option>
                  <option value="Cash">Cash</option>
                  <option value="NHIS">NHIS</option>
                  <option value="Corporate">Corporate / Private</option>
                </select>
              </div>
            </div>
            <div style="display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border-color); padding-top: 15px;">
              <button class="btn-secondary">Clear Fields</button>
              <button class="btn-primary">Apply Filters</button>
            </div>
          </div>

          <!-- Patient Records Directory Table -->
          <div class="card">
            <div class="card-header">
              <h2>Patient Records Directory</h2>
            </div>
            
            <div class="table-responsive">
              <table>
                <thead>
                  <tr>
                    <th>Folder No.</th>
                    <th>Patient Demographics</th>
                    <th>Insurance/Type</th>
                    <th>Folder Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="folder-no">DD-26-0412</td>
                    <td>
                      <strong>Kwame Mensah</strong><br>
                      <small style="color: #666;">Male, 34 yrs (Adult) | 024 123 4567</small>
                    </td>
                    <td><span class="badge badge-cash">Cash</span></td>
                    <td><span class="status-badge active">With Dr. Osei (Rm 2)</span></td>
                    <td>
                      <div class="action-btns">
                        <button class="btn-sm">View Profile</button>
                        <button class="btn-sm btn-blue">Book Appt</button>
                        <button class="btn-sm">History</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="folder-no">DD-26-0411</td>
                    <td>
                      <strong>Akosua Serwaa Osei</strong><br>
                      <small style="color: #666;">Female, 28 yrs (Adult) | 050 987 6543</small>
                    </td>
                    <td><span class="badge badge-nhis">NHIS Active</span></td>
                    <td><span class="status-badge">In Rack (A-04)</span></td>
                    <td>
                      <div class="action-btns">
                        <button class="btn-sm">View Profile</button>
                        <button class="btn-sm btn-blue">Book Appt</button>
                        <button class="btn-sm">History</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="folder-no">DD-25-1108</td>
                    <td>
                      <strong>Abdul Rahman Ibrahim</strong><br>
                      <small style="color: #666;">Male, 8 yrs (Child) | 055 456 7890</small>
                    </td>
                    <td><span class="badge badge-corporate">GLICO</span></td>
                    <td><span class="status-badge">At Pharmacy</span></td>
                    <td>
                      <div class="action-btns">
                        <button class="btn-sm">View Profile</button>
                        <button class="btn-sm btn-blue">Book Appt</button>
                        <button class="btn-sm">History</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="folder-no">DD-26-0390</td>
                    <td>
                      <strong>Esi Amoah</strong><br>
                      <small style="color: #666;">Female, 12 yrs (Child) | 020 111 2222</small>
                    </td>
                    <td><span class="badge badge-nhis">NHIS Expired</span></td>
                    <td><span class="status-badge">In Rack (E-12)</span></td>
                    <td>
                      <div class="action-btns">
                        <button class="btn-sm">View Profile</button>
                        <button class="btn-sm btn-blue">Book Appt</button>
                        <button class="btn-sm">History</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Right Side Panel -->
        <div>
          <!-- Upcoming Appointments -->
          <div class="card">
            <div class="card-header">
              <h2>Upcoming Appointments</h2>
              <button class="btn-sm btn-blue">+ Book</button>
            </div>
            <ul class="quick-list">
              <li>
                <div>
                  <strong>Dr. Yawson (Dental)</strong><br>
                  <small style="color: #666;">10:30 AM - Review</small>
                </div>
                <span class="badge badge-cash">John Doe</span>
              </li>
              <li>
                <div>
                  <strong>Dr. Osei (General)</strong><br>
                  <small style="color: #666;">11:00 AM - Consultation</small>
                </div>
                <span class="badge badge-nhis">Mary Koomson</span>
              </li>
              <li>
                <div>
                  <strong>Dr. Appiah (Surgery)</strong><br>
                  <small style="color: #666;">01:15 PM - Post-Op</small>
                </div>
                <span class="badge badge-corporate">Peter Ofori</span>
              </li>
            </ul>
          </div>

          <!-- Report Generation Card -->
          <div class="card report-card">
            <div class="card-header">
              <h2>Generate Reports</h2>
            </div>
            <div class="form-group" style="margin-bottom: 12px;">
              <label>Report Type</label>
              <select class="form-control">
                <option>Daily OPD Attendance</option>
                <option>NHIS Claims Summary</option>
                <option>Demographics Breakdown</option>
                <option>Folder Tracking Log</option>
              </select>
            </div>
            <div style="display: flex; gap: 10px; margin-bottom: 15px;">
              <div class="form-group" style="flex: 1;">
                <label>From</label>
                <input type="date" class="form-control">
              </div>
              <div class="form-group" style="flex: 1;">
                <label>To</label>
                <input type="date" class="form-control">
              </div>
            </div>
            <div style="display: flex; gap: 10px; flex-direction: column;">
              <button class="btn-primary" style="justify-content: center;">📄 Export as PDF</button>
              <button class="btn-secondary" style="justify-content: center; background: #e8f5e9; border-color: #2e7d32; color: #2e7d32;">📊 Export to Excel</button>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>

  <script src="<?php echo $domain; ?>/dripend/assets/js/js.js"></script>
  <?php include('../../dripend/statpages/footer.php'); ?>
</body>
</html>