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

<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold text-primary mb-0"><i class="bi bi-calendar2-plus me-2"></i>Book an Appointment</h2>
      <a href="{{ url_for('appointments_list') }}" class="btn btn-outline-secondary fw-semibold rounded-pill px-4">
        <i class="bi bi-arrow-left me-1"></i> My Appointments
      </a>
    </div>

    <div class="card stat-card shadow-lg border-0 rounded-4">
      <div class="card-body p-5">

        <form method="POST">
          
          <!-- Doctor Selection -->
          <div class="mb-4">
            <label class="form-label text-muted fw-bold small"><i class="bi bi-person-badge me-1"></i> Medical Professional</label>
            <select name="doctor_id" class="form-select border-0 bg-light py-2" required>
              <option value="" disabled selected>-- Choose a Doctor --</option>
              {% set current_dept = None %}
              {% for d in doctors %}
                {% if d.dept_name != current_dept %}
                  {% if not loop.first %}</optgroup>{% endif %}
                  <optgroup label="🏥 Department: {{ d.dept_name }}">
                  {% set current_dept = d.dept_name %}
                {% endif %}
                <option value="{{ d.doctor_id }}">
                  Dr. {{ d.name }} — {{ d.specialization or 'General Medicine' }} (₹{{ d.fees }})
                </option>
                {% if loop.last %}</optgroup>{% endif %}
              {% endfor %}
            </select>
            <div class="form-text"><i class="bi bi-info-circle me-1"></i>Only available doctors for the given date/time will be accepted by the system.</div>
          </div>

          <!-- Patient Selection -->
          {% if session['role'] == 'admin' %}
          <div class="mb-4">
            <label class="form-label text-muted fw-bold small"><i class="bi bi-person-heart me-1"></i> Patient Record</label>
            <select name="patient_id" class="form-select border-0 bg-light py-2" required>
              <option value="" disabled selected>-- Choose a Patient --</option>
              {% for p in patients %}
              <option value="{{ p.patient_id }}">{{ p.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% else %}
          <input type="hidden" name="patient_id" value="{{ patient_id }}">
          {% endif %}

          <hr class="opacity-10 my-4">

          <!-- Appointment Date & Time -->
          <div class="row g-4 mb-4">
            <div class="col-md-6">
              <div class="form-floating">
                <input type="date" name="appointment_date" class="form-control bg-light border-0" id="appDate" min="{{ current_date }}" required>
                <label for="appDate"><i class="bi bi-calendar-event me-1"></i> Scheduled Date</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating">
                <input type="time" name="appointment_time" class="form-control bg-light border-0" id="appTime" required>
                <label for="appTime"><i class="bi bi-clock-history me-1"></i> Time Slot</label>
              </div>
            </div>
          </div>

          <div class="text-end mt-2">
            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 fw-bold shadow">
              <i class="bi bi-check2-circle me-1"></i> Confirm Booking
            </button>
          </div>
        </form>

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

{% endblock %}