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

<!-- ✅ Welcome Header -->
<div class="row justify-content-center mt-3">
  <div class="col-lg-10">
    <div class="card border-0 shadow-lg mb-5 overflow-hidden text-center position-relative" style="min-height: 250px; background: url('{{ url_for('static', filename='img/hospital_banner.jpg') }}') center/cover no-repeat;">
      <!-- Dark Overlay -->
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50"></div>
      
      <div class="card-body position-relative z-1 d-flex flex-column justify-content-center text-white p-5">
        <h1 class="display-4 fw-bold mb-3 text-white"><i class="bi bi-heart-pulse-fill text-danger me-2"></i>SRG Hospital</h1>
        {% if session.get('role') %}
          <p class="lead fw-medium text-light">
            Welcome back, <span class="fw-bold">{{ session['username'] }}</span>!  
            <br><span class="badge bg-primary text-capitalize mt-2 px-3 py-2 fs-6">{{ session['role'] }}</span>
          </p>
        {% else %}
          <p class="lead text-light mb-4 text-white-50">
            Advanced Healthcare Management System
          </p>
          <div>
            <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg shadow">Sign In</a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- ✅ Role-based Quick Links -->
{% if session.get('role') %}
<div class="row g-4 justify-content-center mb-5">

  {% if session['role'] == 'admin' %}
    <!-- Admin Cards -->
    <div class="col-lg-3 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-person-badge-fill stat-icon text-success"></i>
          <h4 class="card-title fw-bold">Doctors</h4>
          <p class="text-muted small">Manage doctor profiles, shifts, and schedules.</p>
          <a href="{{ url_for('doctor_list') }}" class="btn btn-primary btn-sm w-100 stretched-link">Manage</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-people-fill stat-icon text-primary"></i>
          <h4 class="card-title fw-bold">Patients</h4>
          <p class="text-muted small">View patient records and active treatments.</p>
          <a href="{{ url_for('appointments_list') }}" class="btn btn-primary btn-sm w-100 stretched-link">View</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-receipt-cutoff stat-icon text-danger"></i>
          <h4 class="card-title fw-bold">Billing</h4>
          <p class="text-muted small">Process payments and manage invoices safely.</p>
          <a href="{{ url_for('billing') }}" class="btn btn-primary btn-sm w-100 stretched-link">Billing</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-graph-up-arrow stat-icon text-warning"></i>
          <h4 class="card-title fw-bold">Reports</h4>
          <p class="text-muted small">Analytics, revenue, and hospital performance.</p>
          <a href="{{ url_for('reports') }}" class="btn btn-primary btn-sm w-100 stretched-link">Analytics</a>
        </div>
      </div>
    </div>

  {% elif session['role'] == 'doctor' %}
    <!-- Doctor Cards -->
    <div class="col-lg-4 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-calendar2-check-fill stat-icon text-success"></i>
          <h4 class="card-title fw-bold">My Appointments</h4>
          <p class="text-muted small">View your active patient schedule and bookings.</p>
          <a href="{{ url_for('appointments_list') }}" class="btn btn-primary btn-sm w-100 stretched-link">View Schedule</a>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-clock-history stat-icon text-primary"></i>
          <h4 class="card-title fw-bold">My Dashboard</h4>
          <p class="text-muted small">Manage your shifts and hospital interactions.</p>
          <a href="{{ url_for('doctor_dashboard') }}" class="btn btn-primary btn-sm w-100 stretched-link">Go to Dashboard</a>
        </div>
      </div>
    </div>

  {% elif session['role'] == 'patient' %}
    <!-- Patient Cards -->
    <div class="col-lg-4 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-calendar-check-fill stat-icon text-success"></i>
          <h4 class="card-title fw-bold">Appointments</h4>
          <p class="text-muted small">Book, reschedule or view current medical sessions.</p>
          <a href="{{ url_for('appointments_list') }}" class="btn btn-primary btn-sm w-100 stretched-link">Appointments</a>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-6">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <i class="bi bi-file-earmark-medical-fill stat-icon text-danger"></i>
          <h4 class="card-title fw-bold">My Billing</h4>
          <p class="text-muted small">View detailed invoices and payment history.</p>
          <a href="{{ url_for('billing') }}" class="btn btn-primary btn-sm w-100 stretched-link">My Bills</a>
        </div>
      </div>
    </div>
  {% endif %}

</div>
{% endif %}

{% endblock %}