{% extends "base.html" %}

{% block title %}Agendamento Confirmado! · {{ shop.name }}{% endblock %}

{% block content %}
<div class="max-w-md mx-auto w-full min-h-screen flex flex-col justify-between p-5 pb-10">
  
  <div class="pt-8 text-center space-y-4">
    <!-- Ícone de Sucesso -->
    <div class="w-20 h-20 mx-auto rounded-full bg-emerald-500/10 border-2 border-emerald-500/30 flex items-center justify-center text-emerald-400 shadow-xl shadow-emerald-500/10">
      <i data-lucide="check" class="w-10 h-10 stroke-[2.5]"></i>
    </div>

    <div>
      <span class="inline-block px-3 py-1 rounded-full bg-stone-800 text-stone-300 text-xs font-semibold uppercase tracking-wider mb-2 border border-stone-700">
        Agendamento Realizado!
      </span>
      <h1 class="text-2xl font-bold text-white">Horário Reservado</h1>
      <p class="text-sm text-stone-400 mt-1">
        Tudo certo, <b class="text-white">{{ appt.client_name }}</b>! Seu horário já está salvo na nossa agenda.
      </p>
    </div>

    <!-- Ticket / Comprovante Visual -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border text-left space-y-3.5 relative overflow-hidden shadow-2xl">
      <div class="absolute -right-8 -top-8 w-24 h-24 bg-brand/5 rounded-full blur-xl pointer-events-none"></div>

      <div class="flex items-center justify-between pb-3 border-b border-dark-border">
        <div>
          <span class="text-[11px] text-stone-500 uppercase tracking-wider font-semibold">Barbearia</span>
          <h2 class="text-base font-bold text-white">{{ shop.name }}</h2>
        </div>
        <span class="text-xs px-2.5 py-1 rounded bg-brand/10 border border-brand/30 text-brand font-semibold">
          #{{ appt.id }}
        </span>
      </div>

      <div class="grid grid-cols-2 gap-3 text-xs">
        <div>
          <span class="text-stone-500 block text-[11px]">Serviço</span>
          <span class="font-semibold text-stone-200 text-sm">{{ appt.service_name }}</span>
        </div>
        <div>
          <span class="text-stone-500 block text-[11px]">Profissional</span>
          <span class="font-semibold text-stone-200 text-sm">{{ appt.barber_name }}</span>
        </div>
        <div>
          <span class="text-stone-500 block text-[11px]">Data</span>
          <span class="font-semibold text-stone-200 text-sm">{{ appt.formatted_date }}</span>
        </div>
        <div>
          <span class="text-stone-500 block text-[11px]">Horário</span>
          <span class="font-semibold text-brand text-sm">{{ appt.start_time }}h</span>
        </div>
      </div>

      <div class="pt-3 border-t border-dark-border flex items-center justify-between">
        <span class="text-xs text-stone-400">Total a pagar no local:</span>
        <span class="text-base font-bold text-white">R$ {{ "%.2f"|format(appt.total_amount)|replace(".", ",") }}</span>
      </div>
    </div>

    <!-- Aviso do WhatsApp (Redução de No-Show) -->
    <div class="p-4 rounded-xl bg-emerald-950/20 border border-emerald-500/20 text-left flex items-start gap-3">
      <div class="w-8 h-8 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center flex-shrink-0 mt-0.5">
        <i data-lucide="message-circle" class="w-4 h-4"></i>
      </div>
      <div>
        <h4 class="text-xs font-bold text-emerald-300">Lembrete Automático no WhatsApp</h4>
        <p class="text-[11px] text-stone-400 mt-0.5 leading-relaxed">
          Você receberá uma mensagem antes do seu corte para confirmar seu horário. Basta responder 1 para confirmar!
        </p>
      </div>
    </div>

  </div>

  <!-- Botões de Ação -->
  <div class="space-y-2.5 pt-6">
    <!-- Botão WhatsApp Direto com a Barbearia -->
    <a href="https://wa.me/55{{ shop.phone }}?text={{ zap_text|urlencode }}" target="_blank"
       class="w-full py-3.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-emerald-900/30 transition-all">
      <i data-lucide="message-square" class="w-4 h-4"></i>
      Avisar Barbearia no WhatsApp
    </a>

    <!-- Botão Voltar ao Início -->
    <a href="/b/{{ shop.slug }}"
       class="w-full py-3 px-4 rounded-xl border border-dark-border hover:border-stone-600 text-stone-400 hover:text-white font-medium text-xs flex items-center justify-center gap-2 transition-all">
      <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
      Fazer outro agendamento
    </a>
  </div>

</div>
{% endblock %}