{% extends 'base.html' %}
{% block content %}
<div class="row g-4">
  <div class="col-lg-5">
    <div class="card shadow-sm">
      <div class="card-body">
        <h2 class="h4">Gestionar turno</h2>
        <p class="small mb-1"><strong>Cliente:</strong> {{ appointment.client_name }}</p>
        <p class="small mb-1"><strong>Servicio:</strong> {{ appointment.service.name }}</p>
        <p class="small mb-1"><strong>Profesional:</strong> {{ appointment.professional.display_name }}</p>
        <p class="small mb-1"><strong>Fecha actual:</strong> {{ appointment.appointment_date.strftime('%d/%m/%Y') }}</p>
        <p class="small mb-3"><strong>Hora actual:</strong> {{ appointment.start_time.strftime('%H:%M') }}</p>
        <hr>
        <form method="post" class="d-grid">
          <input type="hidden" name="action" value="cancel">
          <button class="btn btn-outline-danger" {% if appointment.status == 'cancelled' %}disabled{% endif %}>Cancelar turno</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-lg-7">
    <div class="card shadow-sm">
      <div class="card-body">
        <h3 class="h5">Reprogramar</h3>
        <form method="get" class="row g-3 mb-4">
          <div class="col-md-8">
            <label class="form-label">Nueva fecha</label>
            <input type="date" class="form-control" name="selected_date" value="{{ selected_date.isoformat() }}">
          </div>
          <div class="col-md-4 d-grid align-items-end">
            <button class="btn btn-primary mt-md-4">Consultar</button>
          </div>
        </form>
        <form method="post">
          <input type="hidden" name="action" value="reschedule">
          <input type="hidden" name="selected_date" value="{{ selected_date.isoformat() }}">
          <div class="slot-grid mb-3">
            {% for slot in slots %}
              <div>
                <input class="btn-check" type="radio" name="selected_slot" id="re_slot_{{ loop.index }}" value="{{ slot.label }}" required>
                <label class="btn btn-outline-primary w-100" for="re_slot_{{ loop.index }}">{{ slot.label }}</label>
              </div>
            {% else %}
              <div class="text-muted">No hay horarios disponibles para esa fecha.</div>
            {% endfor %}
          </div>
          <button class="btn btn-success" {% if not slots %}disabled{% endif %}>Guardar nueva fecha</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}