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

<div class="row mb-4 align-items-center">
  <div class="col-md-8">
    <h2 class="fw-bold text-primary mb-1"><i class="bi bi-speedometer2 me-2"></i>Admin Dashboard</h2>
    <p class="text-muted">Overview of hospital operations and statistics.</p>
  </div>
  <div class="col-md-4 text-md-end text-center mt-3 mt-md-0">
    <span class="badge bg-primary-subtle text-primary border border-primary px-3 py-2 rounded-pill fs-6"><i class="bi bi-person-fill-lock me-1"></i> Admin Access</span>
  </div>
</div>

<!-- Dashboard Summary Cards -->
<div class="row g-4 mb-5">
  <div class="col-lg-4 col-md-6">
    <div class="card stat-card h-100">
      <div class="card-body">
        <i class="bi bi-person-badge-fill stat-icon text-primary"></i>
        <h2 class="stat-number">{{ doctor_count }}</h2>
        <h5 class="fw-semibold mt-2">Registered Doctors</h5>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6">
    <div class="card stat-card h-100">
      <div class="card-body">
        <i class="bi bi-people-fill stat-icon text-success"></i>
        <h2 class="stat-number text-success" style="background:none; -webkit-text-fill-color: var(--success);">{{ patient_count }}</h2>
        <h5 class="fw-semibold mt-2">Active Patients</h5>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6">
    <div class="card stat-card h-100">
      <div class="card-body">
        <i class="bi bi-door-closed-fill stat-icon text-warning"></i>
        <h2 class="stat-number text-warning" style="background:none; -webkit-text-fill-color: var(--warning);">{{ room_count }}</h2>
        <h5 class="fw-semibold mt-2">Hospital Rooms</h5>
      </div>
    </div>
  </div>
</div>

<!-- Quick Actions -->
<div class="card border-0">
  <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-0 pb-0">
    <h4 class="fw-bold text-primary m-0"><i class="bi bi-lightning-charge-fill text-warning me-2"></i>Quick Actions</h4>
  </div>
  <div class="card-body py-4">
    <div class="row g-3 text-center">
      
      <div class="col-sm-6 col-lg-3">
        <a href="{{ url_for('add_doctor') }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-primary mb-2"><i class="bi bi-person-plus-fill"></i></div>
            <h6 class="fw-bold mb-0 text-dark">Add Doctor</h6>
          </div>
        </a>
      </div>

      <div class="col-sm-6 col-lg-3">
        <a href="{{ url_for('manage_admissions') }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-success mb-2"><i class="bi bi-bed"></i></div>
            <h6 class="fw-bold mb-0 text-dark">Admissions</h6>
          </div>
        </a>
      </div>

      <div class="col-sm-6 col-lg-3">
        <a href="{{ url_for('discharge_patient') }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-danger mb-2"><i class="bi bi-box-arrow-right"></i></div>
            <h6 class="fw-bold mb-0 text-dark">Discharge</h6>
          </div>
        </a>
      </div>

      <div class="col-sm-6 col-lg-3">
        <a href="{{ url_for('patient_room_chart') }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-info mb-2"><i class="bi bi-grid-3x3-gap-fill"></i></div>
            <h6 class="fw-bold mb-0 text-dark">Room Chart</h6>
          </div>
        </a>
      </div>

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

<style>
.hover-elevate:hover {
  transform: translateY(-5px);
  border-color: var(--primary-light) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
.transition-all {
  transition: all 0.3s ease;
}
</style>

{% endblock %}