74 lines
3.4 KiB
HTML
74 lines
3.4 KiB
HTML
{% 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 %}
|