{% extends 'base.html' %}
{% block content %}
<section class="booking-wizard-page py-4 py-lg-5">
  <div class="container">
    <div class="booking-tenant-hero mb-4">
      <div>
        <span class="badge rounded-pill text-bg-primary mb-2">Turnos online</span>
        <h1 class="h3 mb-1">Solicitud de turno asistida</h1>
        <p class="text-muted mb-0">Te guiamos paso a paso: ubicación, institución o profesional, sede, servicio, fecha, datos y confirmación.</p>
      </div>
    </div>

    <div class="booking-wizard-shell" id="bookingWizardRoot">
      <aside class="booking-progress-card">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="booking-progress-icon"><i class="bi bi-calendar2-check"></i></div>
          <div>
            <div class="small text-muted">Progreso</div>
            <strong id="bwProgressLabel">Paso 1 de 8</strong>
          </div>
        </div>
        <div class="booking-progress-bar"><span id="bwProgressFill" style="width:12%"></span></div>
        <ol class="booking-step-list" id="bwStepList"></ol>
      </aside>

      <main class="booking-wizard-card">
        <div class="booking-wizard-header">
          <div>
            <span class="badge rounded-pill text-bg-light border" id="bwStepBadge">Paso 1</span>
            <h2 class="h4 mb-1" id="bwTitle">¿Cómo querés buscar tu turno?</h2>
            <p class="text-muted mb-0" id="bwSubtitle">Elegí si ya conocés la institución o si preferís que el sistema te sugiera opciones.</p>
          </div>
        </div>
        <div id="bwContent" class="booking-wizard-content"></div>
        <div class="booking-wizard-actions">
          <button type="button" class="btn btn-outline-secondary" id="bwPrev"><i class="bi bi-arrow-left"></i> Anterior</button>
          <button type="button" class="btn btn-primary" id="bwNext">Siguiente <i class="bi bi-arrow-right"></i></button>
        </div>
      </main>

      <aside class="booking-summary-panel">
        <div class="card border-0 shadow-sm rounded-4 sticky-summary">
          <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <h3 class="h6 mb-0">Tu selección</h3>
              <i class="bi bi-list-check text-primary"></i>
            </div>
            <div id="bwSummary" class="booking-wizard-summary"></div>
            {% if linked_patient %}
            <div class="alert alert-info small mt-3 mb-0">Ingresaste como cliente. El turno se asociará a <strong>{{ linked_patient.nombre_completo }}</strong>.</div>
            {% endif %}
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>
  window.BOOKING_WIZARD_CONFIG = {
    csrfToken: {{ csrf_token|tojson }},
    optionsUrl: {{ url_for('api_booking_wizard_options')|tojson }},
    slotsUrl: {{ url_for('api_booking_wizard_slots')|tojson }},
    createUrl: {{ url_for('api_booking_wizard_create')|tojson }},
    successBaseUrl: {{ url_for('booking')|tojson }},
    initialInstitutionId: {{ initial_institution_id|tojson }},
    initialServiceId: {{ initial_service_id|tojson }},
    linkedPatient: {% if linked_patient %}{ name: {{ linked_patient.nombre_completo|tojson }}, email: {{ (linked_patient.email or '')|tojson }}, phone: {{ (linked_patient.telefono or '')|tojson }} }{% else %}null{% endif %}
  };
</script>
<script src="{{ url_for('static', filename='js/booking_wizard.js') }}"></script>
{% endblock %}