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

{% block admin_title %}Comissões & Vales{% endblock %}

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

  <!-- Header -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
      <span class="text-xs font-semibold uppercase tracking-wider text-brand">Transparência da Equipe</span>
      <h1 class="text-2xl font-bold text-white tracking-tight mt-0.5">Comissões & Vales</h1>
      <p class="text-xs text-stone-400 mt-1">Cálculo exato de repasses por barbeiro com desconto automático de vales.</p>
    </div>

    <button onclick="openAdvanceModal()" class="px-4 py-2 rounded-xl bg-brand text-black font-bold text-xs flex items-center gap-1.5 hover:bg-brand-400 transition-colors shadow-md shadow-brand/10">
      <i data-lucide="minus-circle" class="w-4 h-4"></i>
      Lançar Vale / Adiantamento
    </button>
  </div>

{% if is_locked %}
  {% set feature_name = "Divisão de Comissões & Vales de Equipe" %}
  {% set feature_desc = "O cálculo automático de comissões por barbeiro e controle de adiantamentos faz parte dos Planos Intermediário e Profissional. No plano Básico, o sistema opera no modo Barbeiro Solo." %}
  {% include "admin/upgrade_card.html" %}
{% else %}
  <!-- Cards de Cada Barbeiro -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    {% for b in barber_commissions %}
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border space-y-4 relative overflow-hidden">
      <div class="flex items-center justify-between">
        <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-bold text-base text-white">{{ b.name }}</h3>
            <span class="text-xs text-stone-400 font-medium">Taxa: {{ (b.commission_rate * 100)|int }}%</span>
          </div>
        </div>
      </div>

      <!-- Resumo Financeiro do Barbeiro -->
      <div class="p-4 rounded-xl bg-dark-bg border border-dark-border space-y-2 text-xs">
        <div class="flex justify-between text-stone-400">
          <span>Produção Bruta (Serviços):</span>
          <span class="text-stone-200 font-semibold font-mono">R$ {{ "%.2f"|format(b.total_produced)|replace(".", ",") }}</span>
        </div>
        <div class="flex justify-between text-stone-400">
          <span>Comissão Bruta Gerada:</span>
          <span class="text-brand font-semibold font-mono">R$ {{ "%.2f"|format(b.gross_commission)|replace(".", ",") }}</span>
        </div>
        <div class="flex justify-between text-red-400">
          <span>Vales & Adiantamentos:</span>
          <span class="font-semibold font-mono">- R$ {{ "%.2f"|format(b.total_advances)|replace(".", ",") }}</span>
        </div>
        <div class="pt-2 border-t border-stone-800 flex justify-between items-center">
          <span class="font-bold text-white text-sm">Líquido a Pagar:</span>
          <span class="text-lg font-bold text-emerald-400 font-mono">R$ {{ "%.2f"|format(b.net_to_pay)|replace(".", ",") }}</span>
        </div>
      </div>

      <!-- Vales Registrados -->
      <div>
        <span class="text-[11px] font-semibold text-stone-400 uppercase tracking-wider block mb-2">Vales Recentes</span>
        {% if b.advances %}
        <div class="space-y-1.5 text-xs">
          {% for adv in b.advances %}
          <div class="p-2 rounded-lg bg-stone-900 border border-stone-800/80 flex items-center justify-between">
            <div>
              <span class="text-stone-300 font-medium">{{ adv.description }}</span>
              <span class="text-[10px] text-stone-500 block">{{ adv.date }}</span>
            </div>
            <span class="text-red-400 font-mono font-bold text-xs">- R$ {{ "%.2f"|format(adv.amount)|replace(".", ",") }}</span>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-[11px] text-stone-500 italic">Nenhum adiantamento no período.</p>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

</div>

<!-- Modal de Lançar Vale -->
<div id="advance-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-dark-card border border-dark-border rounded-2xl max-w-md w-full p-6 space-y-4 shadow-2xl">
    <div class="flex items-center justify-between pb-3 border-b border-dark-border">
      <h3 class="text-base font-bold text-white flex items-center gap-2">
        <i data-lucide="minus-circle" class="w-5 h-5 text-red-400"></i>
        Lançar Vale / Adiantamento
      </h3>
      <button onclick="closeAdvanceModal()" class="text-stone-400 hover:text-white">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <form onsubmit="event.preventDefault(); submitAdvance();" class="space-y-3.5">
      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Barbeiro *</label>
        <select id="adv_barber_id" required 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">
          {% for b in barber_commissions %}
          <option value="{{ b.id }}">{{ b.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Valor do Vale (R$) *</label>
        <input type="number" step="0.5" id="adv_amount" required placeholder="Ex: 50.00"
               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">
      </div>

      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Motivo / Descrição *</label>
        <input type="text" id="adv_description" required placeholder="Ex: Vale almoço, adiantamento combustível..."
               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">
      </div>

      <div class="pt-3 border-t border-dark-border flex items-center justify-end gap-2">
        <button type="button" onclick="closeAdvanceModal()" class="px-4 py-2 rounded-xl border border-dark-border text-xs text-stone-400 hover:text-white">
          Cancelar
        </button>
        <button type="submit" class="px-4 py-2 rounded-xl bg-brand text-black font-bold text-xs hover:bg-brand-400 transition-colors">
          Registrar Vale
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script>
  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 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_description').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.");
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao enviar dados.");
    }
  }
</script>
{% endblock %}