<?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>Insurance Claims Dashboard | 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: #f6f9fc;
  --accent-dark: #003566;
  --accent-mid: #0077b6;
  --accent-light: #e3f2fd;
  --card-bg: #ffffff;
  --green: #16a34a;
  --gold: #ffd60a;
  --red: #e63946;
  --border: #cfd9e3;
  --muted: #65728a;
  --text-dark: #1a1a1a;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  display: flex;
  flex-direction: row;
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
}

/* Sidebar Fix */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 999;
}

/* Page Wrapper */
.page-wrapper {
  flex: 1;
  margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
  padding: 24px;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
}

/* Container */
.container {
  width: 100%;
  max-width: 1250px;
  background: var(--card-bg);
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

/* Header */
.page-header {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-mid));
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 700;
}
.user-menu {
  display: flex;
  gap: 14px;
}
.user-menu i {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s;
}
.user-menu i:hover {
  color: var(--gold);
}

/* Insurance Cards */
.insurance-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.insurance-card {
  background: linear-gradient(145deg, var(--accent-light), #ffffff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--text-dark);
}
.insurance-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.insurance-card i {
  font-size: 38px;
  color: var(--accent-mid);
  margin-bottom: 10px;
}
.insurance-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--accent-dark);
}
.insurance-card p {
  font-size: 14px;
  color: var(--muted);
}

/* Stats Section */
.stats-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.stat-card {
  background: var(--accent-light);
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-card .meta {
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 18px;
}
.stat-card .label {
  font-size: 13px;
  color: var(--muted);
}
.stat-card i {
  font-size: 24px;
  color: var(--accent-mid);
}

/* Footer Button */
.footer-action {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.footer-action a {
  background: var(--green);
  color: #fff;
  padding: 14px 24px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-action a:hover {
  background: #128438;
  transform: translateY(-3px);
}

@media (max-width: 880px) {
  .page-wrapper { margin-left: 0; padding: 14px; }
}
</style>
</head>

<body>
<div class="page-wrapper">
  <div class="container">

    <!-- Header -->
    <div class="page-header">
      <h1><i class="fa-solid fa-hand-holding-medical"></i> Insurance Claims Dashboard</h1>
      <div class="user-menu">
        <i class="fa-solid fa-user-circle" title="Profile"></i>
        <i class="fa-solid fa-right-from-bracket" title="Logout"></i>
      </div>
    </div>

    <!-- Stats -->
    <div class="stats-grid">
      <div class="stat-card">
        <div>
          <div class="meta">145</div>
          <div class="label">Total Claims Submitted Today</div>
        </div>
        <i class="fa-solid fa-file-medical"></i>
      </div>
      <div class="stat-card">
        <div>
          <div class="meta">56</div>
          <div class="label">Pending Review Claims</div>
        </div>
        <i class="fa-solid fa-spinner"></i>
      </div>
      <div class="stat-card">
        <div>
          <div class="meta">21</div>
          <div class="label">Approved Claims</div>
        </div>
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div class="stat-card">
        <div>
          <div class="meta">9</div>
          <div class="label">Rejected Claims</div>
        </div>
        <i class="fa-solid fa-ban"></i>
      </div>
    </div>

    <!-- Insurance Options -->
    <div class="insurance-grid">
      <a href="nhisClaims/nhisClaimsListing.php" class="insurance-card">
        <i class="fa-solid fa-id-card"></i>
        <h3>NHIS Claims</h3>
        <p>Manage and submit National Health Insurance Scheme claims efficiently</p>
      </a>

      <a href="glico_insurance.php" class="insurance-card">
        <i class="fa-solid fa-briefcase-medical"></i>
        <h3>GLICO Insurance</h3>
        <p>Track GLICO medical claim submissions and payment verifications</p>
      </a>

      <a href="mutual_insurance.php" class="insurance-card">
        <i class="fa-solid fa-people-group"></i>
        <h3>Mutual Health Insurance</h3>
        <p>Handle claims related to community-based mutual health insurance programs</p>
      </a>

      <a href="premier_health.php" class="insurance-card">
        <i class="fa-solid fa-shield-heart"></i>
        <h3>Premier Health Insurance</h3>
        <p>View claim status and settlement timelines for Premier Health plans</p>
      </a>
    </div>

    <!-- Footer -->
    <div class="footer-action">
      <a href="../../dashboard.php"><i class="fa-solid fa-house"></i> Go to Main Dashboard</a>
    </div>

  </div>
</div>
</body>
</html>
