{% extends 'base.html' %}
{% block content %}
<section class="booking-success-page py-4 py-lg-5">
  <div class="container booking-success-container">
    <div class="booking-success-card">
      <div class="booking-success-header">
        <div class="booking-success-icon" aria-hidden="true"><i class="bi bi-check2-circle"></i></div>
        <div>
          <span class="badge rounded-pill text-bg-success-subtle text-success border border-success-subtle mb-2">Reserva registrada</span>
          <h1 class="h2 mb-1">Turno confirmado</h1>
          <p class="text-muted mb-0">La reserva fue creada correctamente. Guardá el enlace de gestión para consultar o cancelar el turno si lo necesitás.</p>
        </div>
      </div>

      <div class="booking-success-divider"></div>

      <div class="booking-success-grid" aria-label="Resumen del turno confirmado">
        <div class="booking-success-item">
          <span>Cliente</span>
          <strong>{{ appointment.client_name or '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Servicio</span>
          <strong>{{ appointment.service.name if appointment.service else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Profesional</span>
          <strong>{{ appointment.professional.display_name if appointment.professional else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Institución</span>
          <strong>{{ appointment.institution.name if appointment.institution else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Sede</span>
          <strong>{{ appointment.branch.display_name if appointment.branch else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Fecha</span>
          <strong>{{ appointment.appointment_date.strftime('%d/%m/%Y') if appointment.appointment_date else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Hora</span>
          <strong>{{ appointment.start_time.strftime('%H:%M') if appointment.start_time else '—' }}</strong>
        </div>
        <div class="booking-success-item">
          <span>Gestión pública</span>
          <strong><a href="{{ manage_url }}" target="_top" rel="noopener">Abrir enlace</a></strong>
        </div>
      </div>

      <div class="booking-success-actions">
        <a class="btn btn-primary" href="{{ manage_url }}" target="_top" rel="noopener"><i class="bi bi-link-45deg"></i> Gestionar turno</a>
        <a class="btn btn-outline-primary" href="{{ url_for('booking') }}"><i class="bi bi-calendar-plus"></i> Solicitar otro turno</a>
        <a class="btn btn-light" href="{{ url_for('index') }}#appointment" target="_top"><i class="bi bi-house"></i> Volver al sitio</a>
      </div>
    </div>
  </div>
</section>
{% endblock %}