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

<div class="d-flex justify-content-between align-items-center mb-4">
  <h2 class="fw-bold text-primary mb-0"><i class="bi bi-calendar-check me-2"></i>Appointments Desk</h2>
  {% if role in ['admin', 'patient'] %}
  <a href="{{ url_for('add_appointment') }}" class="btn btn-primary shadow-sm fw-bold rounded-pill px-4">
    <i class="bi bi-plus-circle me-1"></i> Book Appointment
  </a>
  {% endif %}
</div>

<!-- Upcoming Appointments -->
<div class="card stat-card shadow-lg border-0 rounded-4 mb-5">
  <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
    <h5 class="fw-bold text-warning mb-0"><i class="bi bi-clock-history me-2"></i>Upcoming Sessions</h5>
  </div>
  <div class="card-body px-4">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="text-muted small text-uppercase">
          <tr>
            <th>Date & Time</th>
            <th>Patient</th>
            <th>Doctor</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for a in upcoming %}
          <tr>
            <td class="fw-bold text-dark">
              <i class="bi bi-calendar-event text-primary me-2"></i>{{ a.appointment_date }}
              <br><small class="text-muted ms-4"><i class="bi bi-clock me-1"></i>{{ a.time_slot }}</small>
            </td>
            <td class="fw-semibold"><i class="bi bi-person me-1"></i> {{ a.patient_name }}</td>
            <td class="fw-semibold"><i class="bi bi-stethoscope me-1 text-info"></i> Dr. {{ a.doctor_name }}</td>
            <td><span class="badge bg-warning text-dark px-3 rounded-pill shadow-sm">Upcoming</span></td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4" class="text-center py-4 text-muted border-0">
              <i class="bi bi-calendar2-x fs-2 d-block mb-2"></i>
              No upcoming appointments scheduled.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Completed Appointments -->
<div class="card stat-card shadow-lg border-0 rounded-4">
  <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
    <h5 class="fw-bold text-success mb-0"><i class="bi bi-check2-all me-2"></i>Past Records</h5>
  </div>
  <div class="card-body px-4">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="text-muted small text-uppercase">
          <tr>
            <th>Date & Time</th>
            <th>Patient</th>
            <th>Doctor</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for a in completed %}
          <tr class="opacity-75">
            <td class="fw-bold text-muted">
              <i class="bi bi-calendar-event me-2"></i>{{ a.appointment_date }}
              <br><small class="ms-4"><i class="bi bi-clock me-1"></i>{{ a.time_slot }}</small>
            </td>
            <td><i class="bi bi-person me-1"></i> {{ a.patient_name }}</td>
            <td><i class="bi bi-stethoscope me-1"></i> Dr. {{ a.doctor_name }}</td>
            <td><span class="badge bg-secondary px-3 rounded-pill">Completed</span></td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4" class="text-center py-4 text-muted border-0">
              <i class="bi bi-archive fs-2 d-block mb-2"></i>
              No historical data available.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}