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

<div class="row align-items-center mb-4">
  <div class="col-md-8">
    <h2 class="fw-bold text-primary mb-1"><i class="bi bi-person-hearts me-2"></i>Patient Portal</h2>
    <p class="text-muted">Manage your health records, view your active appointments, and handle billing.</p>
  </div>
  <div class="col-md-4 text-md-end text-center mt-3 mt-md-0">
    <span class="badge bg-success-subtle text-success border border-success px-3 py-2 rounded-pill fs-6"><i class="bi bi-shield-check me-1"></i> Patient Access</span>
  </div>
</div>

<div class="card border-0 mb-5">
  <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-grid-fill text-warning me-2"></i>My Services</h4>
  </div>
  <div class="card-body py-4">
    <div class="row g-4 text-center justify-content-center">
      
      <div class="col-sm-6 col-lg-4">
        <a href="{{ url_for('add_appointment') }}" 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-calendar2-plus-fill"></i></div>
            <h5 class="fw-bold mb-1 text-dark">Book Appointment</h5>
            <p class="small text-muted mb-0">Schedule a visit with any available doctor.</p>
          </div>
        </a>
      </div>

      <div class="col-sm-6 col-lg-4">
        <a href="{{ url_for('appointments_list') }}" 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-card-checklist"></i></div>
            <h5 class="fw-bold mb-1 text-dark">My Schedule</h5>
            <p class="small text-muted mb-0">View your upcoming and past appointments.</p>
          </div>
        </a>
      </div>

      <div class="col-sm-6 col-lg-4">
        <a href="{{ url_for('billing') }}" 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-receipt-cutoff"></i></div>
            <h5 class="fw-bold mb-1 text-dark">My Bills</h5>
            <p class="small text-muted mb-0">Review your payment history and download invoices.</p>
          </div>
        </a>
      </div>

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

<div class="card border-0 mb-5 shadow-sm rounded-4">
  <div class="card-header bg-primary text-white rounded-top-4 py-3">
    <h5 class="fw-bold m-0"><i class="bi bi-clock-history me-2"></i>Doctors Availability</h5>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light text-muted small">
          <tr>
            <th class="ps-4 py-3">Doctor Name</th>
            <th class="py-3">Department / Specialization</th>
            <th class="py-3">Day</th>
            <th class="py-3">Time Slot</th>
          </tr>
        </thead>
        <tbody>
          {% for s in schedules %}
          <tr>
            <td class="ps-4 fw-semibold text-primary py-3">{{ s.doctor_name }}</td>
            <td class="py-3">
              <div class="fw-medium">{{ s.department if s.department else 'General' }}</div>
              <div class="text-muted small">{{ s.specialization }}</div>
            </td>
            <td class="py-3"><span class="badge bg-secondary">{{ s.day_of_week }}</span></td>
            <td class="py-3"><span class="text-success fw-medium"><i class="bi bi-clock me-1"></i>{{ s.start_time }} - {{ s.end_time }}</span></td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4" class="text-center text-muted py-4">No schedules available right now.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="row text-center mt-5">
  <div class="col-12">
    <img src="{{ url_for('static', filename='img/patient.jpg') }}" alt="Patient Health" class="img-fluid rounded-4 shadow-lg mb-3" style="max-height: 250px; object-fit: cover; width: 100%;">
  </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;
  background: linear-gradient(to top, rgba(2, 142, 155, 0.05), transparent);
}
.transition-all {
  transition: all 0.3s ease;
}
</style>

{% endblock %}