{% extends "base.html" %}

{% block title %}Dashboard | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-medium uppercase tracking-[0.18em] text-blue-600">Resumen operativo</p>
      <h3 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Bienvenido a tu dashboard</h3>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <button type="button" onclick="openOrderModal('create')" class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8h-16" />
        </svg>
        Nuevo pedido
      </button>
      <button class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-600/20 transition hover:translate-y-[-1px] hover:shadow-xl hover:shadow-blue-600/25">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l5.5-5.5 3.5 3.5L20 7" />
        </svg>
        Ver reportes
      </button>
    </div>
  </section>

  <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-slate-500">Ventas del mes</span>
        <span class="rounded-full bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-700">+18.2%</span>
      </div>
      <div class="mt-4 flex items-end justify-between">
        <div>
          <p class="text-3xl font-bold tracking-tight text-slate-900">$42.8K</p>
          <p class="mt-1 text-sm text-slate-500">vs $36.2K</p>
        </div>
        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-blue-50 text-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 17l6-6 4 4 8-10" />
          </svg>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-slate-500">Pedidos activos</span>
        <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-700">+9.3%</span>
      </div>
      <div class="mt-4 flex items-end justify-between">
        <div>
          <p class="text-3xl font-bold tracking-tight text-slate-900">128</p>
          <p class="mt-1 text-sm text-slate-500">19 pendientes</p>
        </div>
        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-slate-500">Stock crítico</span>
        <span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-700">7 items</span>
      </div>
      <div class="mt-4 flex items-end justify-between">
        <div>
          <p class="text-3xl font-bold tracking-tight text-slate-900">14</p>
          <p class="mt-1 text-sm text-slate-500">faltantes hoy</p>
        </div>
        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-50 text-amber-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.75 0h19.5M10.5 17.25h3" />
          </svg>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-slate-500">Producción</span>
        <span class="rounded-full bg-violet-100 px-2 py-1 text-xs font-semibold text-violet-700">95%</span>
      </div>
      <div class="mt-4 flex items-end justify-between">
        <div>
          <p class="text-3xl font-bold tracking-tight text-slate-900">1,284</p>
          <p class="mt-1 text-sm text-slate-500">unidades listas</p>
        </div>
        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-violet-50 text-violet-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75H9l2.25-7 3.75 12 2.25-5.25h3" />
          </svg>
        </div>
      </div>
    </article>
  </section>

  <section class="grid gap-6 xl:grid-cols-[1.6fr_1fr]">
    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between pb-4">
        <div>
          <p class="text-sm font-medium uppercase tracking-[0.16em] text-slate-500">Rendimiento</p>
          <h4 class="mt-1 text-xl font-bold text-slate-900">Ventas por semana</h4>
        </div>
        <span class="rounded-full bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-600">Últimos 7 días</span>
      </div>

      <div class="mt-6 flex h-52 items-end gap-3">
        <div class="flex h-full w-full items-end gap-3">
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-500/80" style="height: 42%;"></div>
            <span class="text-xs text-slate-500">L</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-500/80" style="height: 58%;"></div>
            <span class="text-xs text-slate-500">M</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-500" style="height: 65%;"></div>
            <span class="text-xs text-slate-500">M</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-600" style="height: 75%;"></div>
            <span class="text-xs text-slate-500">J</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-500/80" style="height: 62%;"></div>
            <span class="text-xs text-slate-500">V</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-blue-500" style="height: 82%;"></div>
            <span class="text-xs text-slate-500">S</span>
          </div>
          <div class="flex flex-1 flex-col items-center justify-end gap-2">
            <div class="w-full rounded-t-2xl bg-indigo-500" style="height: 92%;"></div>
            <span class="text-xs text-slate-500">D</span>
          </div>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between pb-4">
        <div>
          <p class="text-sm font-medium uppercase tracking-[0.16em] text-slate-500">Pedidos</p>
          <h4 class="mt-1 text-xl font-bold text-slate-900">Activos</h4>
        </div>
        <button class="text-sm font-medium text-blue-600 hover:text-blue-700">Ver todo</button>
      </div>

      <div class="space-y-3">
        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-3">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="font-semibold text-slate-900">#1024 - Empresa Norte</p>
              <p class="text-xs text-slate-500">2 camisetas · 15/07</p>
            </div>
            <span class="rounded-full bg-amber-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-amber-700">En proceso</span>
          </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-3">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="font-semibold text-slate-900">#1018 - Café Estilo</p>
              <p class="text-xs text-slate-500">48 tazas · 13/07</p>
            </div>
            <span class="rounded-full bg-emerald-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">Listo</span>
          </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-3">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="font-semibold text-slate-900">#1009 - Grupo Sol</p>
              <p class="text-xs text-slate-500">120 llaveros · 12/07</p>
            </div>
            <span class="rounded-full bg-blue-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-blue-700">Programado</span>
          </div>
        </div>
      </div>
    </article>
  </section>

  <section class="grid gap-6 xl:grid-cols-[1.2fr_1.1fr_1.1fr]">
    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between pb-4">
        <div>
          <p class="text-sm font-medium uppercase tracking-[0.16em] text-slate-500">Clientes</p>
          <h4 class="mt-1 text-xl font-bold text-slate-900">Recientes</h4>
        </div>
        <button class="text-sm font-medium text-blue-600 hover:text-blue-700">Ver más</button>
      </div>

      <div class="space-y-3">
        <div class="flex items-center justify-between border-b border-slate-200 pb-3">
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-200 text-sm font-semibold text-slate-700">AR</div>
            <div>
              <p class="font-medium text-slate-900">Andrea Ruiz</p>
              <p class="text-xs text-slate-500">Primera compra</p>
            </div>
          </div>
          <span class="text-sm font-medium text-slate-600">$236</span>
        </div>

        <div class="flex items-center justify-between border-b border-slate-200 pb-3">
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-700">PM</div>
            <div>
              <p class="font-medium text-slate-900">Pablo Molina</p>
              <p class="text-xs text-slate-500">Pedido activo</p>
            </div>
          </div>
          <span class="text-sm font-medium text-slate-600">$540</span>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700">LG</div>
            <div>
              <p class="font-medium text-slate-900">Lina Gómez</p>
              <p class="text-xs text-slate-500">Factura pagada</p>
            </div>
          </div>
          <span class="text-sm font-medium text-slate-600">$780</span>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between pb-4">
        <div>
          <p class="text-sm font-medium uppercase tracking-[0.16em] text-slate-500">Inventario</p>
          <h4 class="mt-1 text-xl font-bold text-slate-900">Materiales</h4>
        </div>
        <button class="text-sm font-medium text-blue-600 hover:text-blue-700">Revisar</button>
      </div>

      <div class="space-y-4">
        <div>
          <div class="mb-1 flex items-center justify-between text-sm">
            <span class="font-medium text-slate-700">Vinilo textil</span>
            <span class="text-slate-500">78%</span>
          </div>
          <div class="h-2.5 rounded-full bg-slate-100">
            <div class="h-2.5 rounded-full bg-emerald-500" style="width: 78%;"></div>
          </div>
        </div>

        <div>
          <div class="mb-1 flex items-center justify-between text-sm">
            <span class="font-medium text-slate-700">Papel transfer</span>
            <span class="text-slate-500">52%</span>
          </div>
          <div class="h-2.5 rounded-full bg-slate-100">
            <div class="h-2.5 rounded-full bg-blue-500" style="width: 52%;"></div>
          </div>
        </div>

        <div>
          <div class="mb-1 flex items-center justify-between text-sm">
            <span class="font-medium text-slate-700">Tintas</span>
            <span class="text-slate-500">31%</span>
          </div>
          <div class="h-2.5 rounded-full bg-slate-100">
            <div class="h-2.5 rounded-full bg-amber-500" style="width: 31%;"></div>
          </div>
        </div>
      </div>
    </article>

    <article class="premium-card rounded-3xl border border-slate-200 p-5 shadow-soft">
      <div class="flex items-center justify-between pb-4">
        <div>
          <p class="text-sm font-medium uppercase tracking-[0.16em] text-slate-500">Lienzos</p>
          <h4 class="mt-1 text-xl font-bold text-slate-900">Medidas</h4>
        </div>
        <button class="text-sm font-medium text-blue-600 hover:text-blue-700">Abrir</button>
      </div>

      <div class="space-y-3">
        <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5">
          <div>
            <p class="font-medium text-slate-900">30x40 cm</p>
            <p class="text-xs text-slate-500">Standard</p>
          </div>
          <span class="rounded-full bg-blue-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-blue-700">84</span>
        </div>

        <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5">
          <div>
            <p class="font-medium text-slate-900">40x60 cm</p>
            <p class="text-xs text-slate-500">Premium</p>
          </div>
          <span class="rounded-full bg-emerald-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">52</span>
        </div>

        <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5">
          <div>
            <p class="font-medium text-slate-900">50x70 cm</p>
            <p class="text-xs text-slate-500">Especial</p>
          </div>
          <span class="rounded-full bg-violet-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-violet-700">21</span>
        </div>
      </div>
    </article>
  </section>
</div>

<div id="order-modal" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm">
  <div class="flex min-h-full items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-3xl bg-white p-6 shadow-2xl">
      <div class="flex items-center justify-between border-b border-slate-200 pb-4">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600">Nuevo pedido</p>
          <h4 class="mt-2 text-2xl font-bold text-slate-900">Registrar pedido</h4>
        </div>
        <button type="button" onclick="closeOrderModal()" class="rounded-full bg-slate-100 p-2 text-slate-600 hover:bg-slate-200">✕</button>
      </div>

      <form id="order-form" class="mt-6 space-y-4">
        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Número de pedido</label>
          <input name="order_number" required class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white" placeholder="Ej: PED-2026-001" />
        </div>

        <div class="grid gap-4 md:grid-cols-2">
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Cliente</label>
            <select name="client_id" required class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white">
              <option value="">Selecciona cliente</option>
              {% for client in clients %}
                <option value="{{ client.id }}">{{ client.full_name }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Estado</label>
            <select name="status" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white">
              <option value="pending">Pendiente</option>
              <option value="en_diseno">En diseño</option>
              <option value="sublimando">Sublimando</option>
              <option value="listo_para_entrega">Listo para entrega</option>
              <option value="cancelado">Cancelado</option>
            </select>
          </div>
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Total</label>
          <input name="total_amount" type="number" step="0.01" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white" placeholder="0.00" />
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Fecha de entrega</label>
          <input name="due_date" type="date" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white" />
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Notas</label>
          <textarea name="notes" rows="3" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-emerald-500 focus:bg-white" placeholder="Observaciones del pedido"></textarea>
        </div>

        <div class="flex justify-end gap-3 pt-2">
          <button type="button" onclick="closeOrderModal()" class="rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancelar</button>
          <button type="submit" class="rounded-2xl bg-gradient-to-r from-emerald-600 to-teal-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-emerald-600/20 hover:translate-y-[-1px]">Guardar pedido</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  const orderModal = document.getElementById('order-modal');
  const orderForm = document.getElementById('order-form');

  function closeOrderModal() {
    if (orderModal) orderModal.classList.add('hidden');
    if (orderForm) orderForm.reset();
  }

  function openOrderModal() {
    if (orderModal) orderModal.classList.remove('hidden');
  }

  if (orderForm) {
    orderForm.addEventListener('submit', async function (event) {
      event.preventDefault();

      const formData = new FormData(orderForm);
      const payload = Object.fromEntries(formData.entries());

      if (payload.total_amount !== '') payload.total_amount = Number(payload.total_amount);
      else delete payload.total_amount;

      if (payload.client_id === '') {
        alert('Debes seleccionar un cliente.');
        return;
      }

      payload.client_id = Number(payload.client_id);
      if (payload.due_date === '') delete payload.due_date;

      try {
        const response = await fetch('/orders/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });

        if (!response.ok) {
          const error = await response.json().catch(() => ({}));
          throw new Error(error.detail || 'No se pudo guardar el pedido.');
        }

        closeOrderModal();
        window.location.href = '/pedidos';
      } catch (error) {
        alert(error.message || 'Ocurrió un error al guardar el pedido.');
      }
    });
  }
</script>
{% endblock %}