{% extends 'base.html.twig' %}

{% block title %}{{ 'menu.dashboard_tarjetas'|trans }}{% endblock %}
{% block page_title %}{{ 'menu.dashboard_tarjetas'|trans }}{% endblock %}

{% block body %}
  {% set temaNombres = {slate: 'Gris oscuro', amber: 'Naranja', emerald: 'Verde', rose: 'Rosa', blue: 'Azul', violet: 'Violeta'} %}
  <div
    class="mx-auto max-w-5xl min-w-0 space-y-6"
    x-data="{
      max: {{ maxTarjetas }},
      cards: {{ tarjetas|json_encode|e('html_attr') }},
      meta: {{ metricas|json_encode|e('html_attr') }},
      soporta(card, campo) { const m = this.meta.find(x => x.clave === card.metrica); return m ? m[campo] : false; },
      add() { if (this.cards.length < this.max) this.cards.push({titulo: '', metrica: 'personalizada', proveedor_id: '', rango_dias: '7', tema: 'blue', estado: 'todos', calculo: 'cantidad', moneda_id: '', tipo_documento_id: '', fecha_campo: 'emision', periodo: 'todos'}); },
      remove(i) { this.cards.splice(i, 1); },
      move(i, d) { const j = i + d; if (j < 0 || j >= this.cards.length) return; const c = this.cards.splice(i, 1)[0]; this.cards.splice(j, 0, c); }
    }"
  >
    <section class="section-card">
      <div class="section-card-header">
        <div>
          <h3 class="section-card-title">Tarjetas del dashboard</h3>
          <p class="section-card-subtitle">
            Se aplican solo al sitio <strong>{{ sitio.nombre }}</strong>. Puedes tener de 0 a {{ maxTarjetas }} tarjetas
            (hasta 2 filas de 4). Elige un indicador predefinido o crea una tarjeta personalizada combinando estado, cálculo,
            proveedor, moneda, tipo de documento y período, por ejemplo el total pagado del mes en dólares.
          </p>
        </div>
        <span class="status-pill status-pill-muted" x-text="cards.length + ' de ' + max"></span>
      </div>

      <form method="post" action="{{ path('dashboard_tarjetas_save') }}" class="section-card-body space-y-4">
        <input type="hidden" name="_token" value="{{ csrf_token('dashboard_tarjetas_save') }}">

        <p class="text-sm text-secondary-500" x-show="cards.length === 0" x-cloak>
          No hay tarjetas: el dashboard se mostrara sin tarjetas. Usa "Agregar tarjeta" para crear una.
        </p>

        <template x-for="(card, i) in cards" :key="i">
          <div class="rounded-lg border border-secondary-200 bg-secondary-50 p-4">
            <div class="grid grid-cols-1 gap-3 md:grid-cols-6">
              <div class="md:col-span-2">
                <label class="form-label" :for="'titulo-' + i">Titulo (opcional)</label>
                <input type="text" class="form-control" maxlength="60" placeholder="Por defecto segun el indicador" :id="'titulo-' + i" :name="'tarjetas[' + i + '][titulo]'" x-model="card.titulo">
              </div>
              <div class="md:col-span-2">
                <label class="form-label" :for="'metrica-' + i">Indicador</label>
                <select class="form-control" :id="'metrica-' + i" :name="'tarjetas[' + i + '][metrica]'" x-model="card.metrica">
                  <option value="documentos_pendientes">{{ 'dashboard.card.documentos_pendientes'|trans }}</option>
                  <option value="saldo_pendiente">{{ 'dashboard.card.saldo_pendiente'|trans }}</option>
                  <option value="por_vencer">{{ 'dashboard.card.por_vencer'|trans }}</option>
                  <option value="vencidos">{{ 'dashboard.card.vencidos'|trans }}</option>
                  <option value="retenciones_sat">{{ 'dashboard.card.retenciones_sat'|trans }}</option>
                  <option value="personalizada">{{ 'dashboard.card.personalizada'|trans }}</option>
                </select>
              </div>
              <div>
                <label class="form-label" :for="'tema-' + i">Color</label>
                <select class="form-control" :id="'tema-' + i" :name="'tarjetas[' + i + '][tema]'" x-model="card.tema">
                  {% for tema in temas %}<option value="{{ tema }}">{{ temaNombres[tema] }}</option>{% endfor %}
                </select>
              </div>
              <div x-show="soporta(card, 'rango')" x-cloak>
                <label class="form-label" :for="'rango-' + i">Dias</label>
                <select class="form-control" :id="'rango-' + i" :name="'tarjetas[' + i + '][rango_dias]'" x-model="card.rango_dias" :disabled="!soporta(card, 'rango')">
                  {% for rango in rangos %}<option value="{{ rango }}">{{ rango }} dias</option>{% endfor %}
                </select>
              </div>
              <template x-if="card.metrica === 'personalizada'">
                <div class="grid grid-cols-1 gap-3 md:col-span-6 md:grid-cols-6">
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'calculo-' + i">Qué calcular</label>
                    <select class="form-control" :id="'calculo-' + i" :name="'tarjetas[' + i + '][calculo]'" x-model="card.calculo">
                      {% for calculo in calculos %}<option value="{{ calculo }}">{{ ('dashboard.calculo.' ~ calculo)|trans }}</option>{% endfor %}
                    </select>
                  </div>
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'estado-' + i">Estado del documento</label>
                    <select class="form-control" :id="'estado-' + i" :name="'tarjetas[' + i + '][estado]'" x-model="card.estado">
                      {% for estado in estados %}<option value="{{ estado }}">{{ ('dashboard.estado.' ~ estado)|trans }}</option>{% endfor %}
                    </select>
                  </div>
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'moneda-' + i">Moneda</label>
                    <select class="form-control" :id="'moneda-' + i" :name="'tarjetas[' + i + '][moneda_id]'" x-model="card.moneda_id">
                      <option value="">Todas (en moneda base)</option>
                      {% for moneda in monedas %}<option value="{{ moneda.id }}">{{ moneda.codigo }} - {{ moneda.nombre }}</option>{% endfor %}
                    </select>
                  </div>
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'tipo-' + i">Tipo de documento</label>
                    <select class="form-control" :id="'tipo-' + i" :name="'tarjetas[' + i + '][tipo_documento_id]'" x-model="card.tipo_documento_id">
                      <option value="">Todos los tipos</option>
                      {% for tipo in tiposDocumento %}<option value="{{ tipo.id }}">{{ tipo.codigo }} - {{ tipo.nombre }}</option>{% endfor %}
                    </select>
                  </div>
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'campo-' + i">Fecha a filtrar</label>
                    <select class="form-control" :id="'campo-' + i" :name="'tarjetas[' + i + '][fecha_campo]'" x-model="card.fecha_campo">
                      {% for campo in camposFecha %}<option value="{{ campo }}">{{ ('dashboard.campo_fecha.' ~ campo)|trans }}</option>{% endfor %}
                    </select>
                  </div>
                  <div class="md:col-span-2">
                    <label class="form-label" :for="'periodo-' + i">Período</label>
                    <select class="form-control" :id="'periodo-' + i" :name="'tarjetas[' + i + '][periodo]'" x-model="card.periodo">
                      {% for periodo in periodos %}<option value="{{ periodo }}">{{ ('dashboard.periodo.' ~ periodo)|trans }}</option>{% endfor %}
                    </select>
                  </div>
                </div>
              </template>
              <div class="md:col-span-4" x-show="soporta(card, 'proveedor')" x-cloak>
                <label class="form-label" :for="'prov-' + i">Proveedor (opcional)</label>
                <select class="form-control" :id="'prov-' + i" :name="'tarjetas[' + i + '][proveedor_id]'" x-model="card.proveedor_id" :disabled="!soporta(card, 'proveedor')">
                  <option value="">Todos los proveedores</option>
                  {% for proveedor in proveedores %}<option value="{{ proveedor.id }}">{{ proveedor.nombre }}</option>{% endfor %}
                </select>
              </div>
            </div>
            <div class="mt-3 flex flex-wrap justify-end gap-2">
              <button type="button" class="btn btn-ghost btn-sm" @click="move(i, -1)" :disabled="i === 0" aria-label="Subir">&uarr;</button>
              <button type="button" class="btn btn-ghost btn-sm" @click="move(i, 1)" :disabled="i === cards.length - 1" aria-label="Bajar">&darr;</button>
              <button type="button" class="btn btn-outline btn-sm text-danger-700" @click="remove(i)">Quitar</button>
            </div>
          </div>
        </template>

        <div class="flex flex-wrap items-center justify-between gap-3">
          <button type="button" class="btn btn-outline" @click="add()" :disabled="cards.length >= max">Agregar tarjeta</button>
          <div class="flex gap-2">
            <a href="{{ path('home') }}" class="btn btn-ghost">Cancelar</a>
            <button type="submit" class="btn btn-primary">Guardar tarjetas</button>
          </div>
        </div>
      </form>
    </section>

    <section class="section-card">
      <div class="section-card-body flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-sm text-secondary-600">Volver a las 4 tarjetas que vienen por defecto (documentos pendientes, por vencer, retenciones SAT y saldo por pagar).</p>
        <form method="post" action="{{ path('dashboard_tarjetas_reset') }}" onsubmit="return confirm('Se reemplazaran las tarjetas actuales de este sitio por las 4 por defecto. Continuar?');">
          <input type="hidden" name="_token" value="{{ csrf_token('dashboard_tarjetas_reset') }}">
          <button type="submit" class="btn btn-outline">Restablecer por defecto</button>
        </form>
      </div>
    </section>
  </div>
{% endblock %}