{% extends "admin/layout.html" %}

{% block admin_title %}Agenda dos Barbeiros{% endblock %}

{% block admin_content %}
<div class="space-y-6">

  <!-- Topo da Agenda com Controles de Data e Ações -->
  <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
    <div>
      <div class="flex items-center gap-2">
        <span class="text-xs font-semibold uppercase tracking-wider text-brand">Grade Diária & Encaixes</span>
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
        <span class="text-[11px] text-stone-400">Tempo real</span>
      </div>
      <h1 class="text-2xl font-black text-white tracking-tight mt-0.5">Agenda dos Barbeiros</h1>
      <p class="text-xs text-stone-400 mt-0.5">Gerencie atendimentos, envie lembretes por WhatsApp e abra comandas no caixa.</p>
    </div>

    <div class="flex flex-wrap items-center gap-2.5">
      <!-- Seletor de Data e Botão Hoje -->
      <div class="flex items-center rounded-xl bg-dark-card border border-dark-border p-1 shadow-sm">
        <a href="/admin/agenda?date={{ prev_date }}&barber_id={{ selected_barber_id }}" 
           title="Dia Anterior"
           class="p-1.5 rounded-lg text-stone-400 hover:text-white hover:bg-stone-800 transition-colors">
          <i data-lucide="chevron-left" class="w-4 h-4"></i>
        </a>
        
        <input type="date" value="{{ current_date }}" onchange="window.location.href='/admin/agenda?date=' + this.value + '&barber_id={{ selected_barber_id }}'"
               class="bg-transparent text-xs font-semibold text-white px-2 py-1 outline-none cursor-pointer">
        
        <a href="/admin/agenda?date={{ next_date }}&barber_id={{ selected_barber_id }}" 
           title="Próximo Dia"
           class="p-1.5 rounded-lg text-stone-400 hover:text-white hover:bg-stone-800 transition-colors">
          <i data-lucide="chevron-right" class="w-4 h-4"></i>
        </a>

        {% if current_date != today_date %}
        <a href="/admin/agenda?date={{ today_date }}&barber_id={{ selected_barber_id }}"
           class="ml-1 px-2.5 py-1 rounded-lg bg-brand/10 text-brand hover:bg-brand hover:text-black font-bold text-[11px] transition-all">
          Hoje
        </a>
        {% endif %}
      </div>

      <!-- Alternador de Visualização: Grade vs Lista -->
      <div class="flex items-center rounded-xl bg-dark-card border border-dark-border p-1 shadow-sm">
        <button type="button" onclick="switchView('grid')" id="btn-view-grid"
                class="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all bg-brand text-black shadow-sm">
          <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
          <span>Grade por Barbeiro</span>
        </button>
        <button type="button" onclick="switchView('list')" id="btn-view-list"
                class="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all text-stone-400 hover:text-white">
          <i data-lucide="list" class="w-3.5 h-3.5"></i>
          <span>Lista Detalhada</span>
        </button>
      </div>

      <!-- Botão Novo Encaixe -->
      <button type="button" onclick="openNewApptModal()"
              class="px-4 py-2 rounded-xl bg-brand text-black font-extrabold text-xs flex items-center gap-1.5 hover:bg-brand-400 transition-all shadow-md shadow-brand/15 active:scale-95">
        <i data-lucide="plus" class="w-4 h-4"></i>
        <span>Novo Encaixe</span>
      </button>
    </div>
  </div>

  <!-- Barra de Resumo / Mini KPIs do Dia -->
  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
    
    <div class="p-3.5 rounded-2xl bg-dark-card border border-dark-border flex items-center justify-between">
      <div>
        <span class="text-[11px] text-stone-400 block font-medium">Total de Horários</span>
        <span class="text-xl font-black text-white mt-0.5 block">{{ agenda_stats.total }}</span>
      </div>
      <div class="w-8 h-8 rounded-xl bg-stone-800 text-stone-300 flex items-center justify-center">
        <i data-lucide="calendar" class="w-4 h-4"></i>
      </div>
    </div>

    <div class="p-3.5 rounded-2xl bg-dark-card border border-dark-border flex items-center justify-between">
      <div>
        <span class="text-[11px] text-stone-400 block font-medium">Confirmados</span>
        <span class="text-xl font-black text-emerald-400 mt-0.5 block">{{ agenda_stats.confirmados }}</span>
      </div>
      <div class="w-8 h-8 rounded-xl bg-emerald-950/60 text-emerald-400 flex items-center justify-center">
        <i data-lucide="check-circle" class="w-4 h-4"></i>
      </div>
    </div>

    <div class="p-3.5 rounded-2xl bg-dark-card border border-dark-border flex items-center justify-between">
      <div>
        <span class="text-[11px] text-stone-400 block font-medium">Em Atendimento</span>
        <span class="text-xl font-black text-purple-400 mt-0.5 block">{{ agenda_stats.em_atendimento }}</span>
      </div>
      <div class="w-8 h-8 rounded-xl bg-purple-950/60 text-purple-400 flex items-center justify-center">
        <i data-lucide="scissors" class="w-4 h-4"></i>
      </div>
    </div>

    <div class="p-3.5 rounded-2xl bg-dark-card border border-dark-border flex items-center justify-between">
      <div>
        <span class="text-[11px] text-stone-400 block font-medium">Concluídos</span>
        <span class="text-xl font-black text-stone-200 mt-0.5 block">{{ agenda_stats.concluidos }}</span>
      </div>
      <div class="w-8 h-8 rounded-xl bg-stone-800 text-stone-400 flex items-center justify-center">
        <i data-lucide="check" class="w-4 h-4"></i>
      </div>
    </div>

    <div class="p-3.5 rounded-2xl bg-dark-card border border-dark-border flex items-center justify-between col-span-2 sm:col-span-1">
      <div>
        <span class="text-[11px] text-stone-400 block font-medium">Receita Estimada</span>
        <span class="text-xl font-black text-brand mt-0.5 block">R$ {{ "%.2f"|format(agenda_stats.receita_prevista)|replace(".", ",") }}</span>
      </div>
      <div class="w-8 h-8 rounded-xl bg-amber-950/60 text-brand flex items-center justify-center">
        <i data-lucide="dollar-sign" class="w-4 h-4"></i>
      </div>
    </div>

  </div>

  <!-- ======================================================== -->
  <!-- VISÃO 1: GRADE MULTI-BARBEIRO (Colunas Lado a Lado)      -->
  <!-- ======================================================== -->
  <div id="view-mode-grid" class="block">
    <div class="bg-dark-card border border-dark-border rounded-2xl overflow-hidden shadow-xl">
      
      <!-- Cabeçalho das Colunas: Horário + Cada Barbeiro -->
      <div class="overflow-x-auto scrollbar-thin">
        <div class="min-w-[800px]">
          
          <!-- Linha de Cabeçalho dos Barbeiros -->
          <div class="grid border-b border-dark-border bg-stone-900/90 sticky top-0 z-10"
               style="grid-template-columns: 80px repeat({{ barbers|length }}, minmax(220px, 1fr));">
            
            <div class="p-3.5 text-center text-xs font-bold text-stone-400 border-r border-dark-border flex items-center justify-center">
              <i data-lucide="clock" class="w-3.5 h-3.5 text-stone-500 mr-1"></i>
              Horário
            </div>

            {% for b in barbers %}
            <div class="p-3.5 border-r border-dark-border last:border-r-0 flex items-center justify-between gap-2">
              <div class="flex items-center gap-2.5">
                <span class="w-3.5 h-3.5 rounded-full flex-shrink-0 ring-2 ring-stone-800" style="background-color: {{ b.avatar_color or '#d97706' }}"></span>
                <div>
                  <span class="font-bold text-white text-xs block leading-tight">{{ b.name }}</span>
                  <span class="text-[10px] text-stone-400">{{ (b.commission_rate * 100)|int }}% comissão</span>
                </div>
              </div>
              <button type="button" onclick="openNewApptModal({{ b.id }}, '')"
                      title="Encaixar cliente com {{ b.name }}"
                      class="p-1 rounded-lg bg-stone-800 hover:bg-brand hover:text-black text-stone-400 text-[11px] transition-colors">
                <i data-lucide="plus" class="w-3 h-3"></i>
              </button>
            </div>
            {% endfor %}

          </div>

          <!-- Linhas de Horários da Grade -->
          <div class="divide-y divide-dark-border/50">
            {% for row in grid_rows %}
            <div class="grid hover:bg-stone-900/30 transition-colors"
                 style="grid-template-columns: 80px repeat({{ barbers|length }}, minmax(220px, 1fr));">
              
              <!-- Célula do Horário (Esquerda) -->
              <div class="p-3 text-center text-xs font-mono font-bold text-stone-400 border-r border-dark-border bg-stone-950/30 flex items-center justify-center">
                {{ row.time }}
              </div>

              <!-- Células dos Barbeiros -->
              {% for b in barbers %}
              <div class="p-2 border-r border-dark-border last:border-r-0 min-h-[72px] relative group flex flex-col justify-center">
                
                {% set b_appts = row.barbers.get(b.id, []) %}
                {% if b_appts %}
                  {% for a in b_appts %}
                  <div class="rounded-xl p-2.5 transition-all text-xs border shadow-md relative
                              {% if a.status == 'confirmado' %}bg-emerald-950/40 border-emerald-500/40 text-emerald-200
                              {% elif a.status == 'em_atendimento' %}bg-purple-950/50 border-purple-500/50 text-purple-200 ring-1 ring-purple-500/30
                              {% elif a.status == 'concluido' %}bg-stone-900 border-stone-700/60 text-stone-400
                              {% elif a.status == 'falta' %}bg-red-950/40 border-red-500/40 text-red-300
                              {% elif a.status == 'cancelado' %}bg-stone-950 border-stone-800 text-stone-600 line-through
                              {% else %}bg-amber-950/40 border-amber-500/40 text-amber-200{% endif %}">
                    
                    <div class="flex items-start justify-between gap-1 mb-1">
                      <div class="font-bold text-white text-xs truncate max-w-[130px] flex items-center gap-1">
                        {% if a.status == 'em_atendimento' %}
                        <span class="w-1.5 h-1.5 rounded-full bg-purple-400 animate-ping"></span>
                        {% endif %}
                        {{ a.client_name }}
                      </div>
                      
                      <!-- Badge de Status Compacto -->
                      <span class="text-[9px] font-mono px-1.5 py-0.5 rounded font-bold uppercase
                                  {% if a.status == 'confirmado' %}bg-emerald-500/20 text-emerald-300
                                  {% elif a.status == 'em_atendimento' %}bg-purple-500/20 text-purple-300
                                  {% elif a.status == 'concluido' %}bg-stone-800 text-stone-400
                                  {% elif a.status == 'falta' %}bg-red-500/20 text-red-300
                                  {% elif a.status == 'cancelado' %}bg-stone-900 text-stone-600
                                  {% else %}bg-amber-500/20 text-amber-300{% endif %}">
                        {{ a.status|replace('_', ' ') }}
                      </span>
                    </div>

                    <div class="text-[11px] text-stone-300 truncate">
                      {{ a.service_name }}
                    </div>

                    <div class="flex items-center justify-between text-[10px] text-stone-400 mt-1.5 pt-1.5 border-t border-white/5">
                      <span class="font-mono text-stone-300">{{ a.start_time }} - {{ a.end_time }}</span>
                      <span class="font-bold text-brand">R$ {{ "%.2f"|format(a.total_amount)|replace(".", ",") }}</span>
                    </div>

                    <!-- Botões de Ação Rápida no Card -->
                    <div class="flex items-center justify-between gap-1 mt-2 pt-1.5 border-t border-white/10">
                      
                      <!-- Dropdown Rápido de Status -->
                      <select onchange="updateApptStatus({{ a.id }}, this.value)"
                              class="text-[10px] bg-dark-bg/80 border border-dark-border rounded px-1.5 py-0.5 text-stone-300 outline-none cursor-pointer">
                        <option value="agendado" {% if a.status == 'agendado' %}selected{% endif %}>🟡 Agendado</option>
                        <option value="confirmado" {% if a.status == 'confirmado' %}selected{% endif %}>🟢 Confirmado</option>
                        <option value="em_atendimento" {% if a.status == 'em_atendimento' %}selected{% endif %}>🟣 Em Atend.</option>
                        <option value="concluido" {% if a.status == 'concluido' %}selected{% endif %}>⚪ Concluído</option>
                        <option value="falta" {% if a.status == 'falta' %}selected{% endif %}>🔴 Falta</option>
                        <option value="cancelado" {% if a.status == 'cancelado' %}selected{% endif %}>❌ Cancelar</option>
                      </select>

                      <div class="flex items-center gap-1">
                        <!-- WhatsApp -->
                        <a href="https://wa.me/55{{ a.client_phone }}?text={{ a.zap_reminder_text|urlencode }}" target="_blank"
                           title="Lembrete WhatsApp"
                           class="p-1 rounded bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 transition-colors">
                          <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
                        </a>

                        <!-- Cobrar no Caixa -->
                        <a href="/admin/caixa?appt_id={{ a.id }}"
                           title="Cobrar Comanda no Caixa"
                           class="p-1 rounded bg-brand/10 hover:bg-brand text-stone-300 hover:text-black transition-colors font-bold">
                          <i data-lucide="dollar-sign" class="w-3.5 h-3.5"></i>
                        </a>
                      </div>

                    </div>

                  </div>
                  {% endfor %}
                {% else %}
                  <!-- Horário Livre: Botão de Encaixe sutil no hover -->
                  <div class="w-full h-full min-h-[50px] flex items-center justify-center">
                    <button type="button" onclick="openNewApptModal({{ b.id }}, '{{ row.time }}')"
                            class="opacity-0 group-hover:opacity-100 transition-opacity w-full py-2 rounded-lg border border-dashed border-stone-700 hover:border-brand hover:bg-brand/5 text-[11px] text-stone-400 hover:text-brand flex items-center justify-center gap-1">
                      <i data-lucide="plus" class="w-3 h-3"></i>
                      <span>Encaixar</span>
                    </button>
                  </div>
                {% endif %}

              </div>
              {% endfor %}

            </div>
            {% endfor %}
          </div>

        </div>
      </div>

    </div>
  </div>


  <!-- ======================================================== -->
  <!-- VISÃO 2: LISTA DETALHADA CRONOLÓGICA                     -->
  <!-- ======================================================== -->
  <div id="view-mode-list" class="hidden space-y-4">
    
    <!-- Filtro por Barbeiro -->
    <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
      <a href="/admin/agenda?date={{ current_date }}&barber_id=0"
         class="px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition-all {% if selected_barber_id == 0 %}bg-stone-100 text-black shadow-sm{% else %}bg-dark-card border border-dark-border text-stone-400 hover:text-white{% endif %}">
        Todos os Barbeiros ({{ appointments|length }})
      </a>
      {% for b in barbers %}
      <a href="/admin/agenda?date={{ current_date }}&barber_id={{ b.id }}"
         class="px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1.5 {% if selected_barber_id == b.id %}bg-brand text-black font-bold shadow-sm{% else %}bg-dark-card border border-dark-border text-stone-400 hover:text-white{% endif %}">
        <span class="w-2 h-2 rounded-full" style="background-color: {{ b.avatar_color or '#d97706' }}"></span>
        {{ b.name }}
      </a>
      {% endfor %}
    </div>

    <!-- Lista dos Agendamentos -->
    <div class="space-y-3">
      {% if appointments %}
        {% for a in appointments %}
        <div class="p-4 rounded-2xl bg-dark-card border border-dark-border hover:border-stone-700 transition-all flex flex-col md:flex-row md:items-center justify-between gap-4" id="appt-row-{{ a.id }}">
          
          <!-- Esquerda: Horário, Cliente, Barbeiro e Serviço -->
          <div class="flex items-start gap-4">
            <div class="text-center px-3 py-2 rounded-xl bg-stone-900 border border-stone-800 flex-shrink-0">
              <span class="text-base font-bold text-white font-mono block leading-none">{{ a.start_time }}</span>
              <span class="text-[10px] text-stone-500 font-mono mt-1 block">até {{ a.end_time }}</span>
            </div>

            <div>
              <div class="flex items-center gap-2 flex-wrap">
                <h3 class="text-base font-bold text-white">{{ a.client_name }}</h3>
                <a href="https://wa.me/55{{ a.client_phone }}" target="_blank" class="text-xs text-stone-400 hover:text-emerald-400 flex items-center gap-1">
                  <i data-lucide="phone" class="w-3 h-3 text-emerald-500"></i>
                  {{ a.client_phone }}
                </a>
              </div>

              <div class="flex items-center gap-3 text-xs text-stone-400 mt-1 flex-wrap">
                <span class="font-medium text-stone-200">{{ a.service_name }}</span>
                <span>•</span>
                <span class="text-stone-300 font-semibold">R$ {{ "%.2f"|format(a.total_amount)|replace(".", ",") }}</span>
                <span>•</span>
                <span class="flex items-center gap-1.5">
                  <span class="w-2 h-2 rounded-full" style="background-color: {{ a.avatar_color or '#d97706' }}"></span>
                  Barbeiro: <strong class="text-stone-200">{{ a.barber_name }}</strong>
                </span>
              </div>

              {% if a.notes %}
              <p class="text-[11px] text-stone-500 italic mt-1">Obs: "{{ a.notes }}"</p>
              {% endif %}
            </div>
          </div>

          <!-- Direita: Status Seletor e Ações Rápidas -->
          <div class="flex items-center gap-2.5 flex-wrap self-end md:self-center">
            
            <!-- Seletor de Status Direto -->
            <select onchange="updateApptStatus({{ a.id }}, this.value)"
                    class="px-3 py-2 rounded-xl text-xs font-semibold outline-none border cursor-pointer transition-all
                    {% if a.status == 'concluido' %}bg-stone-800 text-stone-300 border-stone-700
                    {% elif a.status == 'em_atendimento' %}bg-purple-950/60 text-purple-300 border-purple-500/40
                    {% elif a.status == 'confirmado' %}bg-emerald-950/60 text-emerald-300 border-emerald-500/40
                    {% elif a.status == 'falta' %}bg-red-950/60 text-red-300 border-red-500/40
                    {% elif a.status == 'cancelado' %}bg-stone-900 text-stone-500 border-stone-800
                    {% else %}bg-amber-950/60 text-amber-300 border-amber-500/40{% endif %}">
              <option value="agendado" {% if a.status == 'agendado' %}selected{% endif %}>🟡 Agendado</option>
              <option value="confirmado" {% if a.status == 'confirmado' %}selected{% endif %}>🟢 Confirmado</option>
              <option value="em_atendimento" {% if a.status == 'em_atendimento' %}selected{% endif %}>🟣 Em Atendimento</option>
              <option value="concluido" {% if a.status == 'concluido' %}selected{% endif %}>⚪ Concluído</option>
              <option value="falta" {% if a.status == 'falta' %}selected{% endif %}>🔴 Falta (Não veio)</option>
              <option value="cancelado" {% if a.status == 'cancelado' %}selected{% endif %}>❌ Cancelado</option>
            </select>

            <!-- Ação WhatsApp Direto -->
            <a href="https://wa.me/55{{ a.client_phone }}?text={{ a.zap_reminder_text|urlencode }}" target="_blank"
               title="Enviar lembrete pelo WhatsApp"
               class="px-3 py-2 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 text-xs font-semibold flex items-center gap-1.5 transition-colors">
              <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
              WhatsApp
            </a>

            <!-- Ação Abrir Caixa -->
            <a href="/admin/caixa?appt_id={{ a.id }}"
               title="Cobrar no Caixa"
               class="px-3 py-2 rounded-xl bg-brand text-black hover:bg-brand-400 text-xs font-bold flex items-center gap-1.5 transition-colors shadow-sm">
              <i data-lucide="receipt" class="w-3.5 h-3.5"></i>
              Cobrar
            </a>

          </div>

        </div>
        {% endfor %}
      {% else %}
        <div class="p-12 text-center rounded-2xl bg-dark-card border border-dark-border text-stone-500 space-y-2">
          <i data-lucide="calendar-x" class="w-8 h-8 mx-auto text-stone-600"></i>
          <p class="text-sm font-medium">Nenhum agendamento para este dia com os filtros selecionados.</p>
          <button type="button" onclick="openNewApptModal()" class="text-xs text-brand hover:underline font-bold mt-2">
            + Realizar um novo encaixe agora
          </button>
        </div>
      {% endif %}
    </div>

  </div>

</div>


<!-- ======================================================== -->
<!-- MODAL: NOVO ENCAIXE / AGENDAMENTO MANUAL                 -->
<!-- ======================================================== -->
<div id="new-appt-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center p-4">
  <div class="w-full max-w-lg bg-dark-card border border-dark-border rounded-3xl p-6 shadow-2xl space-y-4">
    
    <div class="flex items-center justify-between pb-3 border-b border-dark-border">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 rounded-xl bg-brand/10 text-brand flex items-center justify-center font-bold">
          <i data-lucide="calendar-plus" class="w-4 h-4"></i>
        </div>
        <div>
          <h3 class="text-base font-bold text-white">Novo Encaixe na Agenda</h3>
          <p class="text-[11px] text-stone-400">Insira um cliente manualmente na grade</p>
        </div>
      </div>
      <button type="button" onclick="closeNewApptModal()" class="text-stone-400 hover:text-white p-1 rounded-lg">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <form onsubmit="event.preventDefault(); submitManualAppt();" class="space-y-3.5 text-xs" id="manual-appt-form">
      
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div>
          <label class="block font-medium text-stone-300 mb-1">Barbeiro *</label>
          <select id="manual_barber_id" required class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
            {% for b in barbers %}
            <option value="{{ b.id }}">{{ b.name }}</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label class="block font-medium text-stone-300 mb-1">Serviço *</label>
          <select id="manual_service_id" required class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
            {% for s in services %}
            <option value="{{ s.id }}">{{ s.name }} - R$ {{ "%.2f"|format(s.price)|replace(".", ",") }} ({{ s.duration_minutes }}m)</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div>
          <label class="block font-medium text-stone-300 mb-1">Nome do Cliente *</label>
          <input type="text" id="manual_client_name" required placeholder="Ex: Lucas Gabriel"
                 class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
        </div>

        <div>
          <label class="block font-medium text-stone-300 mb-1">WhatsApp do Cliente *</label>
          <input type="tel" id="manual_client_phone" required placeholder="Ex: 11988887777"
                 class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div>
          <label class="block font-medium text-stone-300 mb-1">Data *</label>
          <input type="date" id="manual_date" value="{{ current_date }}" required
                 class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
        </div>

        <div>
          <label class="block font-medium text-stone-300 mb-1">Horário de Início *</label>
          <input type="time" id="manual_time" value="10:00" required
                 class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs font-mono">
        </div>
      </div>

      <div>
        <label class="block font-medium text-stone-300 mb-1">Observações Internas (Opcional)</label>
        <input type="text" id="manual_notes" placeholder="Ex: Cliente prefere máquina 1 na lateral"
               class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
      </div>

      <div class="pt-3 border-t border-dark-border flex items-center justify-end gap-2.5">
        <button type="button" onclick="closeNewApptModal()" class="px-4 py-2.5 rounded-xl border border-dark-border text-xs text-stone-400 hover:text-white transition-colors">
          Cancelar
        </button>
        <button type="submit" id="btn-save-appt" class="px-5 py-2.5 rounded-xl bg-brand text-black font-extrabold text-xs hover:bg-brand-400 transition-all shadow-md shadow-brand/15 flex items-center gap-1.5">
          <i data-lucide="check" class="w-4 h-4"></i>
          <span>Confirmar Encaixe</span>
        </button>
      </div>
    </form>

  </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script>
  function switchView(mode) {
    const gridEl = document.getElementById('view-mode-grid');
    const listEl = document.getElementById('view-mode-list');
    const btnGrid = document.getElementById('btn-view-grid');
    const btnList = document.getElementById('btn-view-list');

    if (mode === 'grid') {
      gridEl.classList.remove('hidden');
      listEl.classList.add('hidden');
      btnGrid.className = "px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all bg-brand text-black shadow-sm";
      btnList.className = "px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all text-stone-400 hover:text-white";
      localStorage.setItem('agenda_view_mode', 'grid');
    } else {
      gridEl.classList.add('hidden');
      listEl.classList.remove('hidden');
      btnList.className = "px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all bg-brand text-black shadow-sm";
      btnGrid.className = "px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all text-stone-400 hover:text-white";
      localStorage.setItem('agenda_view_mode', 'list');
    }
  }

  // Restaurar modo preferido
  const savedMode = localStorage.getItem('agenda_view_mode');
  if (savedMode === 'list') {
    switchView('list');
  }

  async function updateApptStatus(apptId, newStatus) {
    try {
      const res = await fetch(`/api/appointments/${apptId}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
      });
      if (res.ok) {
        window.location.reload();
      } else {
        alert("Não foi possível atualizar o status.");
      }
    } catch (e) {
      console.error(e);
      alert("Erro de conexão ao atualizar status.");
    }
  }

  function openNewApptModal(barberId = null, slotTime = '') {
    if (barberId) {
      document.getElementById('manual_barber_id').value = barberId;
    }
    if (slotTime) {
      document.getElementById('manual_time').value = slotTime;
    }
    document.getElementById('new-appt-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }

  function closeNewApptModal() {
    document.getElementById('new-appt-modal').classList.add('hidden');
  }

  async function submitManualAppt() {
    const btn = document.getElementById('btn-save-appt');
    btn.disabled = true;
    btn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Salvando...';
    if (window.lucide) lucide.createIcons();

    const payload = {
      barbershop_id: {{ shop.id }},
      barber_id: parseInt(document.getElementById('manual_barber_id').value),
      service_id: parseInt(document.getElementById('manual_service_id').value),
      appointment_date: document.getElementById('manual_date').value,
      start_time: document.getElementById('manual_time').value,
      client_name: document.getElementById('manual_client_name').value.trim(),
      client_phone: document.getElementById('manual_client_phone').value.trim(),
      notes: document.getElementById('manual_notes').value.trim() || "Encaixe manual pelo painel"
    };

    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.reload();
      } else {
        alert(data.detail || "Erro ao salvar agendamento.");
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Confirmar Encaixe</span>';
        if (window.lucide) lucide.createIcons();
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao enviar dados.");
      btn.disabled = false;
      btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Confirmar Encaixe</span>';
      if (window.lucide) lucide.createIcons();
    }
  }
</script>
{% endblock %}