{% extends "base.html" %}
{% block content %}

<div class="row align-items-center mb-4">
  <div class="col-8">
    <h2 class="fw-bold text-primary mb-0"><i class="bi bi-graph-up-arrow me-2"></i>Hospital Analytics</h2>
    <p class="text-muted mb-0">Overview of staff performance, stock levels, and revenue streams.</p>
  </div>
  <div class="col-4 text-end">
    <button class="btn btn-outline-primary fw-bold" onclick="window.print()">
      <i class="bi bi-printer me-1"></i> Print Summary
    </button>
  </div>
</div>

<div class="row g-4 mb-4">
  <!-- Revenue Report -->
  <div class="col-lg-6">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-transparent border-0 pt-4 pb-2 px-4">
        <h5 class="fw-bold text-success mb-0"><i class="bi bi-cash-stack me-2"></i>Revenue by Department</h5>
      </div>
      <div class="card-body px-4">
        <div class="table-responsive">
          <table class="table table-hover align-middle">
            <thead class="text-muted small text-uppercase">
              <tr>
                <th>Department</th>
                <th class="text-end">Revenue (₹)</th>
              </tr>
            </thead>
            <tbody>
              {% for row in revenue_by_dept %}
              <tr>
                <td class="fw-semibold">{{ row.dept_name }}</td>
                <td class="text-end fw-bold text-success">+ ₹{{ row.revenue or 0 }}</td>
              </tr>
              {% else %}
              <tr><td colspan="2" class="text-center text-muted">No revenue data available.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Low Stock Alert -->
  <div class="col-lg-6">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-transparent border-0 pt-4 pb-2 px-4">
        <h5 class="fw-bold text-danger mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>Low Stock Alert</h5>
      </div>
      <div class="card-body px-4">
        <div class="table-responsive">
          <table class="table table-hover align-middle">
            <thead class="text-muted small text-uppercase">
              <tr>
                <th>Medicine Name</th>
                <th>Manufacturer</th>
                <th class="text-center">Stock</th>
              </tr>
            </thead>
            <tbody>
              {% for m in low_stock %}
              <tr>
                <td class="fw-bold text-dark">{{ m.medicine_name }}</td>
                <td class="small text-muted">{{ m.manufacturer }}</td>
                <td class="text-center">
                  <span class="badge bg-danger rounded-pill px-3 py-2"><i class="bi bi-arrow-down-circle me-1"></i> {{ m.stock }} Units</span>
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="3" class="text-center py-4 text-muted border-0">
                  <i class="bi bi-check-circle-fill text-success fs-3 d-block mb-2"></i>
                  Inventory is optimal.
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4">
  <!-- Room Analytics -->
  <div class="col-lg-7">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-transparent border-0 pt-4 pb-2 px-4">
        <h5 class="fw-bold text-warning mb-0"><i class="bi bi-door-closed-fill me-2"></i>Room Directory & Rates</h5>
      </div>
      <div class="card-body px-4">
        <div class="table-responsive">
          <table class="table table-hover align-middle">
            <thead class="text-muted small text-uppercase">
              <tr>
                <th>Room ID</th>
                <th>Classification</th>
                <th class="text-end">Base Rate</th>
              </tr>
            </thead>
            <tbody>
              {% for r in available_rooms %}
              <tr>
                <td class="fw-bold text-muted">RM-{{ "%03d" | format(r.room_id) }}</td>
                <td class="fw-semibold"><i class="bi bi-hospital me-1 text-info"></i> {{ r.room_type }}</td>
                <td class="text-end fw-bold">₹{{ r.charges_per_day }}</td>
              </tr>
              {% else %}
              <tr><td colspan="3" class="text-center text-muted">No room data configured.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Doctor Appointments -->
  <div class="col-lg-5">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-transparent border-0 pt-4 pb-2 px-4">
        <h5 class="fw-bold text-primary mb-0"><i class="bi bi-person-lines-fill me-2"></i>Doctor Bookings</h5>
      </div>
      <div class="card-body px-4">
        <ul class="list-group list-group-flush border-0">
          {% for doc in appt_by_doc %}
          <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-3 border-bottom">
            <div>
              <i class="bi bi-person-fill text-muted me-2"></i>
              <span class="fw-semibold text-dark">Dr. {{ doc.doctor }}</span>
            </div>
            <span class="badge bg-primary rounded-pill px-3">{{ doc.total_appointments }} Sessions</span>
          </li>
          {% else %}
          <li class="list-group-item text-center text-muted border-0 py-4">No doctor data collected yet.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
@media print {
  .btn, nav, footer { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { background: white !important; }
}
</style>

{% endblock %}