{% extends "base.html" %}

{% block title %}Agendar Horário · {{ shop.name }}{% endblock %}

{% block content %}
<div class="max-w-md mx-auto w-full min-h-screen flex flex-col pb-24">
  
  <!-- Header da Barbearia (Estilo Navalhe) -->
  <header class="relative px-5 pt-8 pb-6 border-b border-dark-border bg-gradient-to-b from-stone-900/60 to-dark-bg">
    <div class="flex items-center justify-between mb-4">
      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium">
        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
        Agenda Aberta
      </div>
      <a href="https://wa.me/55{{ shop.phone }}" target="_blank" class="text-xs text-stone-400 hover:text-stone-200 flex items-center gap-1">
        <i data-lucide="phone" class="w-3.5 h-3.5 text-brand"></i>
        WhatsApp da Barbearia
      </a>
    </div>

    <div class="flex items-start gap-4">
      <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800 flex items-center justify-center shadow-lg shadow-brand-500/10 flex-shrink-0 border border-brand-500/30">
        <i data-lucide="scissors" class="w-8 h-8 text-black"></i>
      </div>
      <div>
        <h1 class="text-xl font-bold tracking-tight text-white">{{ shop.name }}</h1>
        <p class="text-xs text-stone-400 mt-1 flex items-center gap-1">
          <i data-lucide="calendar-check" class="w-3.5 h-3.5 text-brand"></i>
          Horário marcado · Sem filas ou espera
        </p>
        <p class="text-[11px] text-stone-500 font-medium mt-0.5">
          Atendimento hoje: {{ shop.opening_time }} às {{ shop.closing_time }}
        </p>
      </div>
    </div>
  </header>

  <!-- Indicador de Passos -->
  <div class="px-5 py-3.5 border-b border-dark-border bg-dark-card/50 flex items-center justify-between text-xs">
    <div class="flex items-center gap-2 font-medium" id="step-indicator">
      <span class="w-5 h-5 rounded-full bg-brand text-black flex items-center justify-center font-bold text-[11px]" id="step-number">1</span>
      <span id="step-title" class="text-stone-200">Escolha o serviço</span>
    </div>
    <span class="text-stone-500 text-[11px]" id="step-count">Passo 1 de 4</span>
  </div>

  <!-- Formulário Dinâmico em Etapas -->
  <form id="booking-form" class="flex-1 p-5 flex flex-col justify-between" onsubmit="event.preventDefault(); submitBooking();">
    <input type="hidden" name="barbershop_id" value="{{ shop.id }}">
    <input type="hidden" id="selected_service_id" name="service_id" value="">
    <input type="hidden" id="selected_service_price" value="0">
    <input type="hidden" id="selected_service_name" value="">
    <input type="hidden" id="selected_barber_id" name="barber_id" value="0">
    <input type="hidden" id="selected_barber_name" value="Qualquer profissional">
    <input type="hidden" id="selected_date" name="appointment_date" value="">
    <input type="hidden" id="selected_time" name="start_time" value="">

    <!-- ETAPA 1: SERVIÇOS -->
    <div id="step-1" class="step-content space-y-3">
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-sm font-semibold text-stone-300">Selecione o corte ou procedimento:</h2>
      </div>

      <div class="space-y-2.5">
        {% for s in services %}
        <div onclick="selectService({{ s.id }}, '{{ s.name }}', {{ s.price }})" 
             class="service-card p-4 rounded-xl border border-dark-border bg-dark-card hover:border-brand-500/50 hover:bg-dark-cardHover transition-all cursor-pointer relative group"
             id="service-card-{{ s.id }}">
          <div class="flex justify-between items-start gap-3">
            <div class="flex-1">
              <div class="flex items-center gap-2">
                <h3 class="font-semibold text-sm text-stone-100 group-hover:text-brand-300 transition-colors">{{ s.name }}</h3>
                <span class="text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded bg-stone-800 text-stone-400 border border-stone-700/50">
                  {{ s.duration_minutes }} min
                </span>
              </div>
              {% if s.description %}
              <p class="text-xs text-stone-400 mt-1 line-clamp-2 leading-relaxed">{{ s.description }}</p>
              {% endif %}
            </div>
            <div class="text-right flex-shrink-0">
              <span class="text-base font-bold text-white block">R$ {{ "%.2f"|format(s.price)|replace(".", ",") }}</span>
              <span class="text-[11px] text-brand-400 font-medium selection-indicator opacity-0 group-hover:opacity-100 transition-opacity">Escolher</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- ETAPA 2: BARBEIROS -->
    <div id="step-2" class="step-content hidden space-y-3">
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-sm font-semibold text-stone-300">Com quem você deseja cortar?</h2>
        <button type="button" onclick="goToStep(1)" class="text-xs text-brand hover:underline flex items-center gap-1">
          <i data-lucide="arrow-left" class="w-3 h-3"></i> Alterar serviço
        </button>
      </div>

      <!-- Opção: Qualquer profissional -->
      <div onclick="selectBarber(0, 'Qualquer profissional disponível')" 
           class="barber-card p-4 rounded-xl border border-brand-500/40 bg-brand-500/5 hover:border-brand-500 transition-all cursor-pointer flex items-center justify-between"
           id="barber-card-0">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-full bg-stone-800 border border-stone-700 flex items-center justify-center text-brand">
            <i data-lucide="sparkles" class="w-5 h-5"></i>
          </div>
          <div>
            <h3 class="font-semibold text-sm text-white">Sem preferência</h3>
            <p class="text-xs text-stone-400">Primeiro barbeiro com horário livre</p>
          </div>
        </div>
        <div class="w-5 h-5 rounded-full border border-stone-600 flex items-center justify-center barber-radio">
          <div class="w-2.5 h-2.5 rounded-full bg-brand hidden"></div>
        </div>
      </div>

      <div class="space-y-2.5 pt-2">
        {% for b in barbers %}
        <div onclick="selectBarber({{ b.id }}, '{{ b.name }}')" 
             class="barber-card p-4 rounded-xl border border-dark-border bg-dark-card hover:border-brand-500/50 hover:bg-dark-cardHover transition-all cursor-pointer flex items-center justify-between"
             id="barber-card-{{ b.id }}">
          <div class="flex items-center gap-3">
            <div class="w-11 h-11 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-inner" style="background-color: {{ b.avatar_color or '#d97706' }}">
              {{ b.name[:2]|upper }}
            </div>
            <div>
              <h3 class="font-semibold text-sm text-stone-100">{{ b.name }}</h3>
              <p class="text-xs text-stone-400">Atende hoje das {{ b.start_time }} às {{ b.end_time }}</p>
            </div>
          </div>
          <div class="w-5 h-5 rounded-full border border-stone-600 flex items-center justify-center barber-radio">
            <div class="w-2.5 h-2.5 rounded-full bg-brand hidden"></div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- ETAPA 3: DATA E HORÁRIO -->
    <div id="step-3" class="step-content hidden space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-semibold text-stone-300">Escolha o melhor dia e horário:</h2>
        <button type="button" onclick="goToStep(2)" class="text-xs text-brand hover:underline flex items-center gap-1">
          <i data-lucide="arrow-left" class="w-3 h-3"></i> Voltar
        </button>
      </div>

      <!-- Carrossel de Dias -->
      <div class="overflow-x-auto pb-2 -mx-1 px-1 flex gap-2 scrollbar-none" id="dates-carousel">
        <!-- Renderizado dinamicamente via JS -->
      </div>

      <!-- Grade de Horários -->
      <div>
        <h3 class="text-xs font-medium text-stone-400 mb-2.5 flex items-center justify-between">
          <span>Horários disponíveis:</span>
          <span id="slots-loading" class="text-brand text-[11px] hidden items-center gap-1">
            <i data-lucide="loader" class="w-3 h-3 animate-spin"></i> Atualizando...
          </span>
        </h3>
        <div id="slots-container" class="grid grid-cols-3 gap-2">
          <!-- Slots renderizados dinamicamente -->
        </div>
        <div id="no-slots-msg" class="hidden p-6 rounded-xl border border-dashed border-dark-border text-center text-stone-500 text-xs">
          Nenhum horário livre nesta data com este profissional. Tente outro dia!
        </div>
      </div>
    </div>

    <!-- ETAPA 4: DADOS DO CLIENTE & CONFIRMAÇÃO -->
    <div id="step-4" class="step-content hidden space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-semibold text-stone-300">Seus dados para confirmar:</h2>
        <button type="button" onclick="goToStep(3)" class="text-xs text-brand hover:underline flex items-center gap-1">
          <i data-lucide="arrow-left" class="w-3 h-3"></i> Alterar horário
        </button>
      </div>

      <!-- Card Resumo do Agendamento -->
      <div class="p-4 rounded-xl border border-brand-500/30 bg-gradient-to-br from-brand-950/40 to-dark-card space-y-2.5">
        <div class="flex items-center justify-between pb-2 border-b border-stone-800">
          <span class="text-xs text-stone-400">Resumo</span>
          <span class="text-sm font-bold text-brand" id="summary-price">R$ 0,00</span>
        </div>
        <div class="grid grid-cols-2 gap-2 text-xs">
          <div>
            <span class="text-stone-500 block text-[11px]">Serviço:</span>
            <span class="font-medium text-stone-200" id="summary-service">-</span>
          </div>
          <div>
            <span class="text-stone-500 block text-[11px]">Barbeiro:</span>
            <span class="font-medium text-stone-200" id="summary-barber">-</span>
          </div>
          <div>
            <span class="text-stone-500 block text-[11px]">Data:</span>
            <span class="font-medium text-stone-200" id="summary-date">-</span>
          </div>
          <div>
            <span class="text-stone-500 block text-[11px]">Horário:</span>
            <span class="font-medium text-stone-200" id="summary-time">-</span>
          </div>
        </div>
      </div>

      <!-- Inputs Sem Senha (Zero Atrito) -->
      <div class="space-y-3">
        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Seu Nome Completo *</label>
          <input type="text" id="client_name" name="client_name" required placeholder="Como o barbeiro deve te chamar?"
                 class="w-full px-3.5 py-2.5 rounded-xl bg-dark-card border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm text-white placeholder-stone-600">
        </div>

        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Seu WhatsApp com DDD *</label>
          <input type="tel" id="client_phone" name="client_phone" required placeholder="(11) 99999-9999"
                 oninput="maskPhone(this)"
                 class="w-full px-3.5 py-2.5 rounded-xl bg-dark-card border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm text-white placeholder-stone-600">
          <p class="text-[11px] text-stone-500 mt-1 flex items-center gap-1">
            <i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-400"></i>
            Você receberá a confirmação e lembrete direto no WhatsApp.
          </p>
        </div>

        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Observação / Preferência (Opcional)</label>
          <input type="text" id="notes" name="notes" placeholder="Ex: Cabelo na zero, disfarçado alto..."
                 class="w-full px-3.5 py-2.5 rounded-xl bg-dark-card border border-dark-border focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm text-white placeholder-stone-600">
        </div>
      </div>

      <!-- Informação de Pagamento -->
      <div class="p-3 rounded-lg bg-stone-900 border border-stone-800 text-xs text-stone-400 flex items-start gap-2.5">
        <i data-lucide="credit-card" class="w-4 h-4 text-brand-400 mt-0.5 flex-shrink-0"></i>
        <div>
          <span class="font-medium text-stone-300">Pagamento no local</span>
          <p class="text-[11px] text-stone-500">Pague na barbearia ao finalizar: Pix, Dinheiro ou Cartão.</p>
        </div>
      </div>
    </div>

    <!-- Barra Inferior Fixa com Botão de Ação -->
    <div class="fixed bottom-0 left-0 right-0 p-4 bg-dark-bg/95 backdrop-blur-md border-t border-dark-border z-30">
      <div class="max-w-md mx-auto">
        <button type="button" id="main-btn" onclick="nextAction()" disabled
                class="w-full py-3.5 px-4 rounded-xl bg-brand text-black font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-brand/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all active:scale-[0.98]">
          <span id="btn-text">Selecione um serviço</span>
          <i data-lucide="arrow-right" class="w-4 h-4" id="btn-icon"></i>
        </button>
      </div>
    </div>
  </form>

</div>
{% endblock %}

{% block scripts %}
<script>
  let currentStep = 1;
  const shopSlug = "{{ shop.slug }}";

  function goToStep(step) {
    currentStep = step;
    document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));
    document.getElementById(`step-${step}`).classList.remove('hidden');

    const stepNumber = document.getElementById('step-number');
    const stepTitle = document.getElementById('step-title');
    const stepCount = document.getElementById('step-count');
    const mainBtn = document.getElementById('main-btn');
    const btnText = document.getElementById('btn-text');
    const btnIcon = document.getElementById('btn-icon');

    stepNumber.innerText = step;
    stepCount.innerText = `Passo ${step} de 4`;

    if (step === 1) {
      stepTitle.innerText = "Escolha o serviço";
      const hasService = document.getElementById('selected_service_id').value;
      mainBtn.disabled = !hasService;
      btnText.innerText = hasService ? "Continuar para profissional" : "Selecione um serviço";
    } else if (step === 2) {
      stepTitle.innerText = "Escolha o profissional";
      mainBtn.disabled = false;
      btnText.innerText = "Continuar para dia e horário";
    } else if (step === 3) {
      stepTitle.innerText = "Escolha dia e horário";
      const hasTime = document.getElementById('selected_time').value;
      mainBtn.disabled = !hasTime;
      btnText.innerText = hasTime ? "Preencher meus dados" : "Selecione um horário";
      if (!document.getElementById('selected_date').value) {
        initDatesCarousel();
      }
    } else if (step === 4) {
      stepTitle.innerText = "Confirmar agendamento";
      updateSummary();
      mainBtn.disabled = false;
      btnText.innerText = "Agendar Horário Agora";
      btnIcon.setAttribute('data-lucide', 'check-circle');
    }

    if (window.lucide) lucide.createIcons();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function selectService(id, name, price) {
    document.getElementById('selected_service_id').value = id;
    document.getElementById('selected_service_name').value = name;
    document.getElementById('selected_service_price').value = price;

    document.querySelectorAll('.service-card').forEach(el => {
      el.classList.remove('border-brand', 'bg-brand/10');
      el.classList.add('border-dark-border', 'bg-dark-card');
      const ind = el.querySelector('.selection-indicator');
      if (ind) ind.classList.remove('opacity-100');
    });

    const card = document.getElementById(`service-card-${id}`);
    card.classList.remove('border-dark-border', 'bg-dark-card');
    card.classList.add('border-brand', 'bg-brand/10');
    const ind = card.querySelector('.selection-indicator');
    if (ind) ind.classList.add('opacity-100');

    // Vai direto para o passo 2
    goToStep(2);
  }

  function selectBarber(id, name) {
    document.getElementById('selected_barber_id').value = id;
    document.getElementById('selected_barber_name').value = name;

    document.querySelectorAll('.barber-card').forEach(el => {
      el.classList.remove('border-brand', 'bg-brand/10');
      el.classList.add('border-dark-border');
      const dot = el.querySelector('.barber-radio div');
      if (dot) dot.classList.add('hidden');
    });

    const card = document.getElementById(`barber-card-${id}`);
    if (card) {
      card.classList.remove('border-dark-border');
      card.classList.add('border-brand', 'bg-brand/10');
      const dot = card.querySelector('.barber-radio div');
      if (dot) dot.classList.remove('hidden');
    }

    // Carrega horários e vai para passo 3
    initDatesCarousel();
    goToStep(3);
  }

  function initDatesCarousel() {
    const carousel = document.getElementById('dates-carousel');
    carousel.innerHTML = '';
    const days = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
    const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];

    const today = new Date();
    for (let i = 0; i < 7; i++) {
      const d = new Date();
      d.setDate(today.getDate() + i);
      const isoDate = d.toISOString().split('T')[0];

      let dayLabel = days[d.getDay()];
      if (i === 0) dayLabel = 'Hoje';
      else if (i === 1) dayLabel = 'Amanhã';

      const isFirst = (i === 0);
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = `date-btn flex-shrink-0 flex flex-col items-center justify-center w-16 py-2.5 rounded-xl border text-xs font-medium transition-all ${
        isFirst ? 'border-brand bg-brand text-black font-bold shadow-md shadow-brand/20' : 'border-dark-border bg-dark-card text-stone-300 hover:border-stone-500'
      }`;
      btn.id = `date-btn-${isoDate}`;
      btn.innerHTML = `
        <span class="text-[10px] uppercase">${dayLabel}</span>
        <span class="text-base font-bold my-0.5">${d.getDate()}</span>
        <span class="text-[10px] opacity-75">${months[d.getMonth()]}</span>
      `;
      btn.onclick = () => selectDate(isoDate);
      carousel.appendChild(btn);

      if (isFirst) {
        document.getElementById('selected_date').value = isoDate;
        loadAvailableSlots(isoDate);
      }
    }
  }

  function selectDate(isoDate) {
    document.getElementById('selected_date').value = isoDate;
    document.querySelectorAll('.date-btn').forEach(btn => {
      btn.className = 'date-btn flex-shrink-0 flex flex-col items-center justify-center w-16 py-2.5 rounded-xl border text-xs font-medium transition-all border-dark-border bg-dark-card text-stone-300 hover:border-stone-500';
    });
    const sel = document.getElementById(`date-btn-${isoDate}`);
    if (sel) {
      sel.className = 'date-btn flex-shrink-0 flex flex-col items-center justify-center w-16 py-2.5 rounded-xl border text-xs font-medium transition-all border-brand bg-brand text-black font-bold shadow-md shadow-brand/20';
    }
    loadAvailableSlots(isoDate);
  }

  async function loadAvailableSlots(date) {
    const barberId = document.getElementById('selected_barber_id').value;
    const serviceId = document.getElementById('selected_service_id').value;
    const slotsContainer = document.getElementById('slots-container');
    const loading = document.getElementById('slots-loading');
    const noSlots = document.getElementById('no-slots-msg');

    loading.classList.remove('hidden');
    loading.classList.add('flex');
    slotsContainer.innerHTML = '';
    noSlots.classList.add('hidden');

    try {
      const res = await fetch(`/api/slots?shop_id={{ shop.id }}&date=${date}&barber_id=${barberId}&service_id=${serviceId}`);
      const data = await res.json();
      
      loading.classList.add('hidden');
      loading.classList.remove('flex');

      if (!data.slots || data.slots.length === 0) {
        noSlots.classList.remove('hidden');
        document.getElementById('main-btn').disabled = true;
        return;
      }

      data.slots.forEach(slot => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'slot-btn py-2.5 px-3 rounded-xl border border-dark-border bg-dark-card hover:border-brand-400 text-stone-200 text-sm font-semibold transition-all text-center';
        btn.innerText = slot;
        btn.onclick = () => selectSlot(slot, btn);
        slotsContainer.appendChild(btn);
      });
    } catch (err) {
      console.error(err);
      loading.classList.add('hidden');
      noSlots.classList.remove('hidden');
    }
  }

  function selectSlot(time, element) {
    document.getElementById('selected_time').value = time;
    document.querySelectorAll('.slot-btn').forEach(b => {
      b.classList.remove('border-brand', 'bg-brand', 'text-black');
      b.classList.add('border-dark-border', 'bg-dark-card', 'text-stone-200');
    });
    element.classList.remove('border-dark-border', 'bg-dark-card', 'text-stone-200');
    element.classList.add('border-brand', 'bg-brand', 'text-black');

    // Libera botão e avança
    goToStep(4);
  }

  function updateSummary() {
    const sName = document.getElementById('selected_service_name').value;
    const sPrice = parseFloat(document.getElementById('selected_service_price').value || 0);
    const bName = document.getElementById('selected_barber_name').value;
    const sDate = document.getElementById('selected_date').value;
    const sTime = document.getElementById('selected_time').value;

    document.getElementById('summary-service').innerText = sName;
    document.getElementById('summary-barber').innerText = bName;
    document.getElementById('summary-price').innerText = `R$ ${sPrice.toFixed(2).replace('.', ',')}`;

    if (sDate) {
      const parts = sDate.split('-');
      document.getElementById('summary-date').innerText = `${parts[2]}/${parts[1]}/${parts[0]}`;
    }
    document.getElementById('summary-time').innerText = `${sTime}h`;
  }

  function nextAction() {
    if (currentStep < 4) {
      goToStep(currentStep + 1);
    } else {
      submitBooking();
    }
  }

  function maskPhone(input) {
    let v = input.value.replace(/\D/g, "");
    if (v.length > 11) v = v.substring(0, 11);
    if (v.length > 10) {
      input.value = `(${v.substring(0, 2)}) ${v.substring(2, 7)}-${v.substring(7)}`;
    } else if (v.length > 6) {
      input.value = `(${v.substring(0, 2)}) ${v.substring(2, 6)}-${v.substring(6)}`;
    } else if (v.length > 2) {
      input.value = `(${v.substring(0, 2)}) ${v.substring(2)}`;
    } else {
      input.value = v;
    }
  }

  async function submitBooking() {
    const clientName = document.getElementById('client_name').value.trim();
    const clientPhone = document.getElementById('client_phone').value.trim();
    
    if (!clientName) {
      alert("Por favor, digite seu nome.");
      document.getElementById('client_name').focus();
      return;
    }
    if (!clientPhone || clientPhone.length < 14) {
      alert("Por favor, digite seu WhatsApp com DDD.");
      document.getElementById('client_phone').focus();
      return;
    }

    const payload = {
      barbershop_id: {{ shop.id }},
      service_id: parseInt(document.getElementById('selected_service_id').value),
      barber_id: parseInt(document.getElementById('selected_barber_id').value),
      appointment_date: document.getElementById('selected_date').value,
      start_time: document.getElementById('selected_time').value,
      client_name: clientName,
      client_phone: clientPhone,
      notes: document.getElementById('notes').value.trim()
    };

    const mainBtn = document.getElementById('main-btn');
    mainBtn.disabled = true;
    mainBtn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Confirmando agendamento...';
    if (window.lucide) lucide.createIcons();

    try {
      const res = await fetch('/api/appointments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        window.location.href = `/b/${shopSlug}/sucesso/${data.appointment_id}`;
      } else {
        alert(data.detail || "Erro ao agendar horário. Tente novamente.");
        mainBtn.disabled = false;
        mainBtn.innerHTML = 'Agendar Horário Agora';
      }
    } catch (e) {
      console.error(e);
      alert("Falha de conexão. Tente novamente.");
      mainBtn.disabled = false;
      mainBtn.innerHTML = 'Agendar Horário Agora';
    }
  }

  // Iniciar na etapa 1
  document.addEventListener("DOMContentLoaded", () => {
    goToStep(1);
  });
</script>
{% endblock %}