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

{% block admin_title %}Frente de Caixa & Financeiro{% endblock %}

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

  <!-- Cabeçalho Financeiro -->
  <div class="flex flex-col sm:flex-row sm: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">Gestão Financeira & PDV</span>
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
        <span class="text-[11px] text-stone-400">Caixa Aberto</span>
      </div>
      <h1 class="text-2xl font-black text-white tracking-tight mt-0.5">Caixa & Fechamento do Dia</h1>
      <p class="text-xs text-stone-400 mt-0.5">Frente de caixa, controle de comissões, vendas de produtos e conciliação de gaveta.</p>
    </div>

    <div class="flex items-center gap-2">
      <!-- Botão Lançar Vale / Adiantamento -->
      <button type="button" onclick="openAdvanceModal()"
              class="px-3.5 py-2 rounded-xl bg-dark-card hover:bg-stone-800 border border-dark-border text-stone-300 hover:text-white font-semibold text-xs flex items-center gap-1.5 transition-all shadow-sm">
        <i data-lucide="minus-circle" class="w-4 h-4 text-red-400"></i>
        <span>Lançar Vale / Saída</span>
      </button>

      <!-- Data de Hoje -->
      <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-stone-900 border border-stone-800 text-xs font-semibold text-stone-300">
        <i data-lucide="calendar" class="w-3.5 h-3.5 text-brand"></i>
        Hoje: {{ today_formatted }}
      </span>
    </div>
  </div>

  <!-- Cards de Indicadores Financeiros do Dia -->
  <div class="grid grid-cols-2 md:grid-cols-5 gap-3.5">
    
    <!-- Faturamento Bruto -->
    <div class="p-4 rounded-2xl bg-dark-card border border-dark-border shadow-md">
      <span class="text-xs text-stone-400 block font-medium">Faturamento Bruto</span>
      <span class="text-2xl font-black text-white block mt-1 tracking-tight">R$ {{ "%.2f"|format(caixa_summary.total)|replace(".", ",") }}</span>
      <span class="text-[11px] text-emerald-400 font-semibold mt-1 block flex items-center gap-1">
        <i data-lucide="check-circle" class="w-3 h-3"></i>
        {{ caixa_summary.orders_count }} comanda(s)
      </span>
    </div>

    <!-- Líquido da Barbearia -->
    <div class="p-4 rounded-2xl bg-dark-card border border-dark-border shadow-md">
      <span class="text-xs text-stone-400 block font-medium">Líquido da Barbearia</span>
      <span class="text-2xl font-black text-emerald-400 block mt-1 tracking-tight">R$ {{ "%.2f"|format(caixa_summary.house_net)|replace(".", ",") }}</span>
      <span class="text-[11px] text-stone-500 mt-1 block">Margem após comissões</span>
    </div>

    <!-- Comissões da Equipe -->
    <div class="p-4 rounded-2xl bg-dark-card border border-dark-border shadow-md">
      <span class="text-xs text-stone-400 block font-medium">Comissões da Equipe</span>
      <span class="text-2xl font-black text-brand block mt-1 tracking-tight">R$ {{ "%.2f"|format(caixa_summary.commissions)|replace(".", ",") }}</span>
      <span class="text-[11px] text-stone-500 mt-1 block">A repassar aos barbeiros</span>
    </div>

    <!-- Ticket Médio -->
    <div class="p-4 rounded-2xl bg-dark-card border border-dark-border shadow-md">
      <span class="text-xs text-stone-400 block font-medium">Ticket Médio</span>
      <span class="text-2xl font-black text-white block mt-1 tracking-tight">R$ {{ "%.2f"|format(caixa_summary.ticket_medio)|replace(".", ",") }}</span>
      <span class="text-[11px] text-stone-400 mt-1 block">Gasto médio por cliente</span>
    </div>

    <!-- Gaveta (Dinheiro Líquido) -->
    <div class="p-4 rounded-2xl bg-dark-card border border-dark-border shadow-md col-span-2 md:col-span-1">
      <span class="text-xs text-stone-400 block font-medium">Saldo Gaveta (Espécie)</span>
      <span class="text-2xl font-black text-amber-400 block mt-1 tracking-tight">R$ {{ "%.2f"|format(caixa_summary.saldo_liquido_gaveta)|replace(".", ",") }}</span>
      <span class="text-[11px] text-stone-400 mt-1 block">R$ {{ "%.2f"|format(caixa_summary.cash)|replace(".", ",") }} ent. - R$ {{ "%.2f"|format(caixa_summary.total_advances)|replace(".", ",") }} vales</span>
    </div>

  </div>

  <!-- Barra Visual de Distribuição de Formas de Pagamento -->
  <div class="p-4 rounded-2xl bg-dark-card border border-dark-border space-y-3">
    <div class="flex items-center justify-between">
      <span class="text-xs font-bold text-white flex items-center gap-1.5">
        <i data-lucide="pie-chart" class="w-4 h-4 text-brand"></i>
        Distribuição das Formas de Pagamento
      </span>
      <span class="text-[11px] text-stone-400">Total: R$ {{ "%.2f"|format(caixa_summary.total)|replace(".", ",") }}</span>
    </div>

    <!-- Multi-bar progress -->
    {% if caixa_summary.total > 0 %}
    <div class="w-full h-3 rounded-full bg-stone-900 overflow-hidden flex shadow-inner">
      {% if caixa_summary.pix > 0 %}
      <div style="width: {{ caixa_summary.pix_pct }}%;" class="bg-emerald-500 h-full" title="Pix: R$ {{ caixa_summary.pix }} ({{ caixa_summary.pix_pct }}%)"></div>
      {% endif %}
      {% if caixa_summary.credit_card > 0 %}
      <div style="width: {{ caixa_summary.credit_card_pct }}%;" class="bg-blue-500 h-full" title="Crédito: R$ {{ caixa_summary.credit_card }} ({{ caixa_summary.credit_card_pct }}%)"></div>
      {% endif %}
      {% if caixa_summary.debit_card > 0 %}
      <div style="width: {{ caixa_summary.debit_card_pct }}%;" class="bg-purple-500 h-full" title="Débito: R$ {{ caixa_summary.debit_card }} ({{ caixa_summary.debit_card_pct }}%)"></div>
      {% endif %}
      {% if caixa_summary.cash > 0 %}
      <div style="width: {{ caixa_summary.cash_pct }}%;" class="bg-amber-500 h-full" title="Dinheiro: R$ {{ caixa_summary.cash }} ({{ caixa_summary.cash_pct }}%)"></div>
      {% endif %}
      {% if caixa_summary.fiado > 0 %}
      <div style="width: {{ caixa_summary.fiado_pct }}%;" class="bg-red-500 h-full" title="Fiado: R$ {{ caixa_summary.fiado }} ({{ caixa_summary.fiado_pct }}%)"></div>
      {% endif %}
    </div>

    <!-- Legenda dos Pagamentos -->
    <div class="flex flex-wrap items-center gap-4 text-xs font-medium pt-1">
      <div class="flex items-center gap-1.5 text-stone-300">
        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
        <span>Pix: <strong class="text-white">R$ {{ "%.2f"|format(caixa_summary.pix)|replace(".", ",") }}</strong> ({{ caixa_summary.pix_pct }}%)</span>
      </div>
      <div class="flex items-center gap-1.5 text-stone-300">
        <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
        <span>Crédito: <strong class="text-white">R$ {{ "%.2f"|format(caixa_summary.credit_card)|replace(".", ",") }}</strong></span>
      </div>
      <div class="flex items-center gap-1.5 text-stone-300">
        <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
        <span>Débito: <strong class="text-white">R$ {{ "%.2f"|format(caixa_summary.debit_card)|replace(".", ",") }}</strong></span>
      </div>
      <div class="flex items-center gap-1.5 text-stone-300">
        <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
        <span>Dinheiro: <strong class="text-white">R$ {{ "%.2f"|format(caixa_summary.cash)|replace(".", ",") }}</strong> ({{ caixa_summary.cash_pct }}%)</span>
      </div>
      {% if caixa_summary.fiado > 0 %}
      <div class="flex items-center gap-1.5 text-stone-300">
        <span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
        <span>Fiado: <strong class="text-red-400">R$ {{ "%.2f"|format(caixa_summary.fiado)|replace(".", ",") }}</strong> ({{ caixa_summary.fiado_pct }}%)</span>
      </div>
      {% endif %}
    </div>
    {% else %}
    <p class="text-xs text-stone-500 py-1">Nenhum pagamento registrado hoje ainda.</p>
    {% endif %}
  </div>


  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Formulário Nova Comanda / PDV (Esquerda - 1 Coluna) -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border space-y-4 shadow-xl">
      <div class="flex items-center justify-between pb-3 border-b border-dark-border">
        <h2 class="text-sm font-bold text-white flex items-center gap-2">
          <i data-lucide="shopping-bag" class="w-4 h-4 text-brand"></i>
          Frente de Caixa (PDV)
        </h2>
        <span class="text-[10px] uppercase font-mono px-2 py-0.5 rounded bg-brand/10 text-brand font-bold">Comanda</span>
      </div>

      <form onsubmit="event.preventDefault(); submitOrder();" class="space-y-3.5" id="pos-form">
        <!-- Vínculo com Agendamento ou Balcão -->
        <div>
          <label class="block text-xs font-semibold text-stone-300 mb-1">Puxar do Agendamento (Opcional)</label>
          <select id="pos_appt_id" onchange="autoFillFromAppt(this.value)" class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
            <option value="0">⚡ Venda Rápida / Balcão Avulso</option>
            {% for a in pending_appts %}
            <option value="{{ a.id }}" data-client="{{ a.client_name }}" data-barber="{{ a.barber_id }}" data-service="{{ a.service_id }}" data-price="{{ a.total_amount }}" {% if selected_appt_id == a.id %}selected{% endif %}>
              {{ a.start_time }}h - {{ a.client_name }} ({{ a.service_name }})
            </option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label class="block text-xs font-semibold text-stone-300 mb-1">Nome do Cliente *</label>
          <input type="text" id="pos_client_name" required placeholder="Ex: Rodrigo Silveira" value="{{ initial_client_name }}"
                 class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
        </div>

        <div>
          <label class="block text-xs font-semibold text-stone-300 mb-1">Barbeiro Responsável *</label>
          <select id="pos_barber_id" required onchange="recalculateTotal()" class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
            {% for b in barbers %}
            <option value="{{ b.id }}" data-comm="{{ b.commission_rate }}" {% if selected_barber_id == b.id %}selected{% endif %}>
              {{ b.name }} ({{ (b.commission_rate * 100)|int }}% comissão)
            </option>
            {% endfor %}
          </select>
        </div>

        <!-- Serviço Principal -->
        <div>
          <label class="block text-xs font-semibold text-stone-300 mb-1">Serviço Realizado *</label>
          <select id="pos_service_id" onchange="recalculateTotal()" class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
            <option value="0" data-price="0">Nenhum serviço (Apenas produtos)</option>
            {% for s in services %}
            <option value="{{ s.id }}" data-price="{{ s.price }}" {% if selected_service_id == s.id %}selected{% endif %}>
              {{ s.name }} - R$ {{ "%.2f"|format(s.price)|replace(".", ",") }}
            </option>
            {% endfor %}
          </select>
        </div>

        <!-- Produtos Adicionais de Bancada (Upsell) -->
        <div>
          <label class="block text-xs font-semibold text-stone-300 mb-1">Produto Adicional (Bancada)</label>
          <select id="pos_product_id" onchange="recalculateTotal()" class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
            <option value="0" data-price="0">Nenhum produto adicional</option>
            {% for p in products %}
            <option value="{{ p.id }}" data-price="{{ p.price }}">
              {{ p.name }} - R$ {{ "%.2f"|format(p.price)|replace(".", ",") }} (Estoque: {{ p.stock_quantity }})
            </option>
            {% endfor %}
          </select>
        </div>

        <!-- Desconto e Forma de Pagamento -->
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-semibold text-stone-300 mb-1">Desconto (R$)</label>
            <input type="number" step="0.5" id="pos_discount" value="0" oninput="recalculateTotal()"
                   class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
          </div>
          <div>
            <label class="block text-xs font-semibold text-stone-300 mb-1">Forma de Pgto *</label>
            <select id="pos_payment_method" class="w-full px-3 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white font-medium">
              <option value="pix">⚡ Pix</option>
              <option value="cartao_credito">💳 Cartão Crédito</option>
              <option value="cartao_debito">💳 Cartão Débito</option>
              <option value="dinheiro">💵 Dinheiro</option>
              <option value="fiado">📝 Fiado (Conta)</option>
            </select>
          </div>
        </div>

        <!-- Resumo do Cálculo da Comanda em Tempo Real -->
        <div class="p-4 rounded-xl bg-stone-900 border border-stone-800 space-y-2 text-xs">
          <div class="flex justify-between items-center text-stone-300">
            <span class="font-medium">Total a Pagar:</span>
            <span class="font-black text-white text-lg" id="pos_calc_total">R$ 0,00</span>
          </div>
          <div class="flex justify-between text-stone-400 text-[11px] pt-1.5 border-t border-stone-800">
            <span>Comissão do Barbeiro:</span>
            <span class="text-brand font-bold" id="pos_calc_comm">R$ 0,00</span>
          </div>
          <div class="flex justify-between text-stone-400 text-[11px]">
            <span>Líquido da Barbearia:</span>
            <span class="text-emerald-400 font-bold" id="pos_calc_house">R$ 0,00</span>
          </div>
        </div>

        <button type="submit" id="btn-submit-order" class="w-full py-3 px-4 rounded-xl bg-brand text-black font-extrabold text-xs flex items-center justify-center gap-2 hover:bg-brand-400 transition-all shadow-lg shadow-brand/15 active:scale-95">
          <i data-lucide="check" class="w-4 h-4"></i>
          <span>Fechar Comanda & Receber</span>
        </button>
      </form>
    </div>

    <!-- Direita: Extrato das Comandas e Vales do Dia (2 Colunas) -->
    <div class="lg:col-span-2 space-y-5">
      
      <!-- Extrato das Comandas Fechadas Hoje -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border shadow-xl">
        <div class="flex items-center justify-between pb-3 border-b border-dark-border">
          <h2 class="text-sm font-bold text-white flex items-center gap-2">
            <i data-lucide="receipt" class="w-4 h-4 text-emerald-400"></i>
            Comandas Fechadas Hoje
          </h2>
          <span class="text-xs text-stone-400 font-medium">{{ orders|length }} venda(s) registrada(s)</span>
        </div>

        <div class="divide-y divide-dark-border">
          {% if orders %}
            {% for o in orders %}
            <div class="py-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3 hover:bg-stone-900/30 px-2 rounded-xl transition-colors">
              <div>
                <div class="flex items-center gap-2 flex-wrap">
                  <span class="text-xs font-bold text-white">#{{ o.id }} - {{ o.client_name }}</span>
                  <span class="text-[10px] font-mono px-2 py-0.5 rounded font-bold uppercase
                              {% if o.payment_method == 'pix' %}bg-emerald-950/60 text-emerald-300 border border-emerald-500/30
                              {% elif o.payment_method == 'cartao_credito' %}bg-blue-950/60 text-blue-300 border border-blue-500/30
                              {% elif o.payment_method == 'cartao_debito' %}bg-purple-950/60 text-purple-300 border border-purple-500/30
                              {% elif o.payment_method == 'dinheiro' %}bg-amber-950/60 text-amber-300 border border-amber-500/30
                              {% else %}bg-red-950/60 text-red-300 border border-red-500/30{% endif %}">
                    {{ o.payment_method|replace('_', ' ') }}
                  </span>
                </div>
                <div class="text-xs text-stone-400 mt-1 flex items-center gap-2 flex-wrap">
                  <span>Barbeiro: <strong class="text-stone-200">{{ o.barber_name }}</strong></span>
                  <span>•</span>
                  <span>Horário: {{ o.created_time }}</span>
                </div>
                {% if o.items_summary %}
                <p class="text-[11px] text-stone-400 mt-1 flex items-center gap-1 font-mono">
                  <i data-lucide="tag" class="w-3 h-3 text-brand"></i>
                  {{ o.items_summary }}
                </p>
                {% endif %}
              </div>

              <div class="text-right flex-shrink-0">
                <span class="text-base font-black text-white block">R$ {{ "%.2f"|format(o.final_amount)|replace(".", ",") }}</span>
                <div class="text-[11px] text-stone-400 space-x-1 mt-0.5">
                  <span class="text-brand font-medium">Comissão: R$ {{ "%.2f"|format(o.barber_commission_amount)|replace(".", ",") }}</span>
                  <span>|</span>
                  <span class="text-emerald-400 font-medium">Casa: R$ {{ "%.2f"|format(o.house_net_amount)|replace(".", ",") }}</span>
                </div>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="py-12 text-center text-stone-500 text-xs">
              <i data-lucide="inbox" class="w-8 h-8 mx-auto mb-2 opacity-40"></i>
              Nenhuma comanda fechada hoje ainda.
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Vales e Saídas de Caixa do Dia -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border shadow-xl">
        <div class="flex items-center justify-between pb-3 border-b border-dark-border">
          <h2 class="text-sm font-bold text-white flex items-center gap-2">
            <i data-lucide="minus-circle" class="w-4 h-4 text-red-400"></i>
            Vales & Saídas da Gaveta Hoje
          </h2>
          <button type="button" onclick="openAdvanceModal()" class="text-xs text-brand hover:underline font-bold flex items-center gap-1">
            <i data-lucide="plus" class="w-3 h-3"></i>
            Lançar Vale
          </button>
        </div>

        <div class="divide-y divide-dark-border">
          {% if today_advances %}
            {% for adv in today_advances %}
            <div class="py-3 flex items-center justify-between text-xs">
              <div class="flex items-center gap-3">
                <div class="w-7 h-7 rounded-lg bg-red-950/50 text-red-400 flex items-center justify-center font-bold">
                  <i data-lucide="arrow-down-right" class="w-3.5 h-3.5"></i>
                </div>
                <div>
                  <span class="font-bold text-white block">{{ adv.barber_name }}</span>
                  <span class="text-stone-400 text-[11px]">{{ adv.description }}</span>
                </div>
              </div>
              <div class="text-right">
                <span class="text-red-400 font-bold block font-mono">- R$ {{ "%.2f"|format(adv.amount)|replace(".", ",") }}</span>
                <span class="text-[10px] text-stone-500">Abatimento na comissão</span>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <p class="py-4 text-xs text-stone-500 text-center">Nenhum vale lançado hoje. Caixa sem sangrias.</p>
          {% endif %}
        </div>
      </div>

    </div>

  </div>

</div>

<!-- ======================================================== -->
<!-- MODAL: LANÇAR VALE / SAÍDA DE CAIXA                      -->
<!-- ======================================================== -->
<div id="advance-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-md 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-red-950/60 text-red-400 flex items-center justify-center font-bold">
          <i data-lucide="minus-circle" class="w-4 h-4"></i>
        </div>
        <div>
          <h3 class="text-base font-bold text-white">Lançar Vale / Saída</h3>
          <p class="text-[11px] text-stone-400">Abatido automaticamente do fechamento de comissão</p>
        </div>
      </div>
      <button type="button" onclick="closeAdvanceModal()" 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(); submitAdvance();" class="space-y-3.5 text-xs" id="advance-form">
      <div>
        <label class="block font-semibold text-stone-300 mb-1">Barbeiro Beneficiário *</label>
        <select id="adv_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-semibold text-stone-300 mb-1">Valor do Vale (R$) *</label>
        <input type="number" step="0.5" id="adv_amount" required placeholder="Ex: 25.00"
               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>
        <label class="block font-semibold text-stone-300 mb-1">Motivo / Descrição *</label>
        <input type="text" id="adv_desc" required placeholder="Ex: Vale Almoço, Combustível, Adiantamento"
               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 class="pt-3 border-t border-dark-border flex items-center justify-end gap-2.5">
        <button type="button" onclick="closeAdvanceModal()" 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-adv" class="px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-500 text-white font-extrabold text-xs transition-all shadow-md shadow-red-600/20 flex items-center gap-1.5">
          <i data-lucide="check" class="w-4 h-4"></i>
          <span>Confirmar Saída</span>
        </button>
      </div>
    </form>

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

{% block admin_scripts %}
<script>
  function autoFillFromAppt(apptId) {
    if (apptId === "0") return;
    const select = document.getElementById('pos_appt_id');
    const opt = select.options[select.selectedIndex];
    
    document.getElementById('pos_client_name').value = opt.getAttribute('data-client') || '';
    
    const barberId = opt.getAttribute('data-barber');
    if (barberId) document.getElementById('pos_barber_id').value = barberId;
    
    const serviceId = opt.getAttribute('data-service');
    if (serviceId) document.getElementById('pos_service_id').value = serviceId;
    
    recalculateTotal();
  }

  function recalculateTotal() {
    const sSelect = document.getElementById('pos_service_id');
    const sOption = sSelect.options[sSelect.selectedIndex];
    const sPrice = parseFloat(sOption ? sOption.getAttribute('data-price') || 0 : 0);

    const pSelect = document.getElementById('pos_product_id');
    const pOption = pSelect.options[pSelect.selectedIndex];
    const pPrice = parseFloat(pOption ? pOption.getAttribute('data-price') || 0 : 0);

    const discount = parseFloat(document.getElementById('pos_discount').value || 0);

    const total = Math.max(0, (sPrice + pPrice) - discount);

    // Comissão do Barbeiro: tipicamente % sobre serviço + 10% sobre produto
    const bSelect = document.getElementById('pos_barber_id');
    const bOption = bSelect.options[bSelect.selectedIndex];
    const commRate = parseFloat(bOption ? bOption.getAttribute('data-comm') || 0.5 : 0.5);

    const commServico = sPrice * commRate;
    const commProduto = pPrice * 0.10; // 10% comissão sobre venda de produtos
    const barberComm = commServico + commProduto;
    const houseNet = total - barberComm;

    document.getElementById('pos_calc_total').innerText = `R$ ${total.toFixed(2).replace('.', ',')}`;
    document.getElementById('pos_calc_comm').innerText = `R$ ${barberComm.toFixed(2).replace('.', ',')}`;
    document.getElementById('pos_calc_house').innerText = `R$ ${houseNet.toFixed(2).replace('.', ',')}`;
  }

  async function submitOrder() {
    const clientName = document.getElementById('pos_client_name').value.trim();
    if (!clientName) {
      alert("Informe o nome do cliente.");
      return;
    }

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

    const payload = {
      barbershop_id: {{ shop.id }},
      appointment_id: parseInt(document.getElementById('pos_appt_id').value) || null,
      barber_id: parseInt(document.getElementById('pos_barber_id').value),
      client_name: clientName,
      service_id: parseInt(document.getElementById('pos_service_id').value) || null,
      product_id: parseInt(document.getElementById('pos_product_id').value) || null,
      discount: parseFloat(document.getElementById('pos_discount').value || 0),
      payment_method: document.getElementById('pos_payment_method').value
    };

    try {
      const res = await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        window.location.href = '/admin/caixa';
      } else {
        alert(data.detail || "Erro ao fechar comanda.");
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Fechar Comanda & Receber</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>Fechar Comanda & Receber</span>';
      if (window.lucide) lucide.createIcons();
    }
  }

  function openAdvanceModal() {
    document.getElementById('advance-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }

  function closeAdvanceModal() {
    document.getElementById('advance-modal').classList.add('hidden');
  }

  async function submitAdvance() {
    const btn = document.getElementById('btn-save-adv');
    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('adv_barber_id').value),
      amount: parseFloat(document.getElementById('adv_amount').value),
      description: document.getElementById('adv_desc').value.trim()
    };

    try {
      const res = await fetch('/api/advances', {
        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 registrar vale.");
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Confirmar Saída</span>';
        if (window.lucide) lucide.createIcons();
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao conectar com servidor.");
      btn.disabled = false;
      btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Confirmar Saída</span>';
      if (window.lucide) lucide.createIcons();
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    recalculateTotal();
  });
</script>
{% endblock %}