{% extends "base.html" %}

{% block title %}Pedidos | 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-emerald-600">Pedidos</p>
      <h3 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Seguimiento operativo</h3>
    </div>
    <button type="button" onclick="openOrderModal('create')" class="inline-flex items-center gap-2 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 transition hover:translate-y-[-1px]">
      <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>
  </section>

  <section class="grid gap-4 md:grid-cols-3">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Total pedidos</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ orders|length }}</p>
      <p class="mt-2 text-sm text-emerald-600">Registrados en sistema</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">En proceso</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ orders | selectattr('status') | list | length }}</p>
      <p class="mt-2 text-sm text-blue-600">Activos</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Clientes</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ clients|length }}</p>
      <p class="mt-2 text-sm text-violet-600">Disponibles</p>
    </article>
  </section>

  <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between border-b border-slate-200 pb-4">
      <h4 class="text-xl font-bold text-slate-900">Todos los pedidos</h4>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">{{ orders|length }} registros</span>
    </div>

    <div class="mt-4 flex items-center gap-3">
      <input id="search_order_number" type="text" placeholder="Buscar por número de pedido" class="rounded-2xl border border-slate-200 px-3 py-2" />
      <button id="btn_search_order_number" class="rounded-2xl bg-slate-100 px-3 py-2 text-sm">Buscar</button>
      <input id="search_cedula" type="text" placeholder="Buscar por cédula" class="rounded-2xl border border-slate-200 px-3 py-2" />
      <button id="btn_search_cedula" class="rounded-2xl bg-slate-100 px-3 py-2 text-sm">Buscar</button>
      <button id="btn_clear_search" class="ml-auto rounded-2xl bg-white border border-slate-200 px-3 py-2 text-sm">Limpiar búsqueda</button>
    </div>

    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200">
      <div class="overflow-x-auto">
        <table class="min-w-full text-left text-sm text-slate-700">
          <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
            <tr>
              <th class="px-4 py-3 font-semibold">Pedido</th>
              <th class="px-4 py-3 font-semibold">Cliente</th>
              <th class="px-4 py-3 font-semibold">Total</th>
              <th class="px-4 py-3 font-semibold">Fecha</th>
              <th class="px-4 py-3 font-semibold">Estado</th>
              <th class="px-4 py-3 text-right font-semibold">Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% if orders %}
              {% for order in orders %}
              <tr class="border-t border-slate-200 bg-white hover:bg-slate-50">
                <td class="px-4 py-3 font-semibold text-slate-900">{{ order.order_number }}</td>
                <td class="px-4 py-3">{{ order.client.full_name if order.client else 'Cliente sin nombre' }}</td>
                <td class="px-4 py-3">{{ order.total_amount if order.total_amount is not none else '$0' }}</td>
                <td class="px-4 py-3">{{ order.due_date.strftime('%d/%m/%Y') if order.due_date else 'Sin fecha' }}</td>
                <td class="px-4 py-3">
                  <span class="rounded-full bg-amber-100 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
                    {{ order.status.value if order.status else 'pending' }}
                  </span>
                </td>
                <td class="px-4 py-3">
                  <div class="flex items-center justify-end gap-2">
                    <button type="button" data-order-action="view" data-order-id="{{ order.id }}" class="rounded-lg bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-200">Ver</button>
                    <button type="button" data-order-action="edit" data-order-id="{{ order.id }}" class="rounded-lg bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-200">Editar</button>
                    <button type="button" data-order-action="delete" data-order-id="{{ order.id }}" class="rounded-lg bg-rose-100 px-2 py-1 text-xs font-medium text-rose-700 hover:bg-rose-200">Eliminar</button>
                  </div>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">No hay pedidos registrados aún.</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </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 id="order-modal-kicker" class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600">Nuevo pedido</p>
          <h4 id="order-modal-title" 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">
        <input type="hidden" name="order_id" id="order_id" />

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Número de pedido</label>
          <input id="order_number" name="order_number" readonly 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="Se generará automáticamente" />
        </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>
            <div class="flex gap-2">
              <input id="search_client_cedula" placeholder="Cédula cliente" class="w-1/2 rounded-2xl border border-slate-200 px-3 py-2" />
              <button type="button" id="btn_search_client_cedula" class="rounded-2xl bg-slate-100 px-3 py-2">Buscar</button>
            </div>
            <select id="client_id" name="client_id" required class="mt-2 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 }} — {{ client.cedula }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="md:col-span-2">
            <label class="mb-1 block text-sm font-medium text-slate-700">Productos (items)</label>
            <div class="grid grid-cols-3 gap-2 mb-2">
              <select id="variant_select" class="col-span-2 rounded-2xl border border-slate-200 px-3 py-2">
                <option value="">Selecciona producto/variante</option>
                {% for product in products %}
                  {% for v in product.variants %}
                    <option value="{{ v.id }}" data-price="{{ product.base_price or 0 }}">{{ product.name }} — {{ v.name or 'Var' }}</option>
                  {% endfor %}
                {% endfor %}
              </select>
              <input id="variant_qty" type="number" value="1" min="1" class="rounded-2xl border border-slate-200 px-3 py-2" />
              <button id="btn_add_item" type="button" class="col-span-3 mt-2 rounded-2xl bg-slate-100 px-3 py-2">Agregar item</button>
            </div>
            <div class="overflow-auto max-h-40 border rounded-lg p-2 bg-white">
              <table id="items_table" class="min-w-full text-sm text-slate-700">
                <thead class="text-xs text-slate-500">
                  <tr><th class="px-2">Producto</th><th class="px-2">Cantidad</th><th class="px-2">Precio unit.</th><th class="px-2">Subtotal</th><th class="px-2">Acción</th></tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Estado</label>
            <select id="status" 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 id="total_amount" 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 id="due_date" 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 id="notes" 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 id="order-submit-btn" 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>

<!-- Toast container -->
<div id="toast-container" class="fixed right-4 top-6 z-50 flex flex-col gap-3"></div>

<script>
  const orderModal = document.getElementById('order-modal');
  const orderForm = document.getElementById('order-form');
  const orderModalTitle = document.getElementById('order-modal-title');
  const orderModalKicker = document.getElementById('order-modal-kicker');
  const orderSubmitBtn = document.getElementById('order-submit-btn');
  const fieldsToDisable = ['order_number', 'client_id', 'status', 'total_amount', 'due_date', 'notes'];

  function setOrderFormMode(readOnly) {
    fieldsToDisable.forEach((fieldId) => {
      const field = document.getElementById(fieldId);
      if (field) field.disabled = readOnly;
    });
    if (orderSubmitBtn) {
      orderSubmitBtn.style.display = readOnly ? 'none' : 'inline-flex';
    }
  }

  function closeOrderModal() {
    if (orderModal) orderModal.classList.add('hidden');
    if (orderForm) orderForm.reset();
    document.getElementById('order_id').value = '';
    setOrderFormMode(false);
  }

  function openOrderModal(mode = 'create', order = null) {
    if (!orderModal || !orderForm) return;

    if (mode === 'view' && order) {
      orderModalKicker.textContent = 'Ver pedido';
      orderModalTitle.textContent = 'Detalle del pedido';
      document.getElementById('order_id').value = order.id;
      document.getElementById('order_number').value = order.order_number || '';
      document.getElementById('client_id').value = order.client_id || '';
      document.getElementById('status').value = order.status || 'pending';
      document.getElementById('total_amount').value = order.total_amount ?? '';
      document.getElementById('due_date').value = order.due_date ? order.due_date.split('T')[0] : '';
      document.getElementById('notes').value = order.notes || '';
      setOrderFormMode(true);
    } else if (mode === 'edit' && order) {
      orderModalKicker.textContent = 'Editar pedido';
      orderModalTitle.textContent = 'Actualizar pedido';
      document.getElementById('order_id').value = order.id;
      document.getElementById('order_number').value = order.order_number || '';
      document.getElementById('client_id').value = order.client_id || '';
      document.getElementById('status').value = order.status || 'pending';
      document.getElementById('total_amount').value = order.total_amount ?? '';
      document.getElementById('due_date').value = order.due_date ? order.due_date.split('T')[0] : '';
      document.getElementById('notes').value = order.notes || '';
      setOrderFormMode(false);
    } else {
      orderModalKicker.textContent = 'Nuevo pedido';
      orderModalTitle.textContent = 'Registrar pedido';
      orderForm.reset();
      document.getElementById('order_id').value = '';
      setOrderFormMode(false);
    }

    // if creating, request a generated order number to show to the user
    if (mode === 'create') {
      try {
        const g = await fetch('/orders/generate_number');
        if (g.ok) {
          const body = await g.json();
          document.getElementById('order_number').value = body.order_number || '';
        }
      } catch (e) {
        // ignore and leave field placeholder
      }
    }

    orderModal.classList.remove('hidden');
  }

  document.querySelectorAll('[data-order-action="view"]').forEach((button) => {
    button.addEventListener('click', async () => {
      const orderId = button.dataset.orderId;
      try {
        const response = await fetch(`/orders/${orderId}`);
        if (!response.ok) throw new Error('No se pudo cargar el pedido.');
        const order = await response.json();
        openOrderModal('view', order);
      } catch (error) {
        showToast('error', error.message || 'No se pudo abrir el pedido.');
      }
    });
  });

  document.querySelectorAll('[data-order-action="edit"]').forEach((button) => {
    button.addEventListener('click', async () => {
      const orderId = button.dataset.orderId;
      try {
        const response = await fetch(`/orders/${orderId}`);
        if (!response.ok) throw new Error('No se pudo cargar el pedido.');
        const order = await response.json();
        openOrderModal('edit', order);
      } catch (error) {
        showToast('error', error.message || 'No se pudo abrir la edición del pedido.');
      }
    });
  });

  document.querySelectorAll('[data-order-action="delete"]').forEach((button) => {
    button.addEventListener('click', async () => {
      const orderId = button.dataset.orderId;
      const confirmed = window.confirm('¿Deseas eliminar este pedido?');
      if (!confirmed) return;

      try {
        const response = await fetch(`/orders/${orderId}`, { method: 'DELETE' });
        if (!response.ok) {
          const error = await response.json().catch(() => ({}));
          throw new Error(error.detail || 'No se pudo eliminar el pedido.');
        }
        showToast('success', 'Pedido eliminado');
        setTimeout(() => window.location.reload(), 700);
      } catch (error) {
        showToast('error', error.message || 'Ocurrió un error al eliminar el pedido.');
      }
    });
  });

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

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

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

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

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

      // attach items if any
      if (items.length > 0) payload.items = items.map(i => ({ product_variant_id: i.product_variant_id, quantity: i.quantity }));
      const isEdit = Boolean(orderId);
      const url = isEdit ? `/orders/${orderId}` : '/orders/';
      const method = isEdit ? 'PUT' : 'POST';

      try {
        const response = await fetch(url, {
          method,
          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.');
        }

        const created = await response.json().catch(() => ({}));
        closeOrderModal();
        const num = created.order_number ? ` N° ${created.order_number}` : '';
        showToast('success', `Pedido guardado correctamente${num}`);
        setTimeout(() => window.location.reload(), 900);
      } catch (error) {
        showToast('error', error.message || 'Ocurrió un error al guardar el pedido.');
      }
    });
  }

    // Client cedula search (autoselect)
    const btnSearchClientCedula = document.getElementById('btn_search_client_cedula');
    if (btnSearchClientCedula) {
      btnSearchClientCedula.addEventListener('click', async () => {
        const ced = document.getElementById('search_client_cedula').value.trim();
        if (!ced) return showToast('info', 'Ingresa cédula para buscar.');
        try {
          const res = await fetch(`/clients/search/${encodeURIComponent(ced)}`);
          if (!res.ok) throw new Error('Cliente no encontrado');
          const client = await res.json();
          const select = document.getElementById('client_id');
          if (select) select.value = client.id;
          showToast('success', `Cliente seleccionado: ${client.full_name}`);
        } catch (err) {
          showToast('info', err.message || 'Cliente no encontrado');
        }
      });
    }

    // Items handling
    const btnAddItem = document.getElementById('btn_add_item');
    const itemsTableBody = document.querySelector('#items_table tbody');
    const items = [];

    function renderItems() {
      itemsTableBody.innerHTML = '';
      items.forEach((it, idx) => {
        const tr = document.createElement('tr');
        const subtotal = (Number(it.unit_price || 0) * Number(it.quantity || 0)).toFixed(2);
        tr.innerHTML = `
          <td class="px-2">${it.label}</td>
          <td class="px-2"><input data-idx="${idx}" class="item-qty w-16 rounded border px-2" type="number" value="${it.quantity}" min="1" /></td>
          <td class="px-2"><input data-idx="${idx}" class="item-unit w-24 rounded border px-2" type="number" step="0.01" value="${it.unit_price ?? 0}" /></td>
          <td class="px-2"><span class="item-subtotal">${subtotal}</span></td>
          <td class="px-2"><button data-idx="${idx}" class="remove-item text-rose-600">Eliminar</button></td>
        `;
        itemsTableBody.appendChild(tr);
      });
      // attach remove handlers
      document.querySelectorAll('.remove-item').forEach(b => b.addEventListener('click', (e) => {
        const i = Number(e.currentTarget.dataset.idx);
        items.splice(i,1);
        renderItems();
        computeTotal();
      }));

      // attach qty/unit listeners
      document.querySelectorAll('.item-qty').forEach(input => input.addEventListener('input', (e) => {
        const i = Number(e.currentTarget.dataset.idx);
        const val = Number(e.currentTarget.value || 1);
        items[i].quantity = val;
        const row = e.currentTarget.closest('tr');
        const subtotalSpan = row.querySelector('.item-subtotal');
        subtotalSpan.textContent = (Number(items[i].unit_price || 0) * val).toFixed(2);
        computeTotal();
      }));

      document.querySelectorAll('.item-unit').forEach(input => input.addEventListener('input', (e) => {
        const i = Number(e.currentTarget.dataset.idx);
        const val = Number(e.currentTarget.value || 0);
        items[i].unit_price = val;
        const row = e.currentTarget.closest('tr');
        const subtotalSpan = row.querySelector('.item-subtotal');
        subtotalSpan.textContent = (val * Number(items[i].quantity || 0)).toFixed(2);
        computeTotal();
      }));
    }

    function computeTotal() {
      const total = items.reduce((s, it) => s + (Number(it.unit_price || 0) * Number(it.quantity || 0)), 0);
      const totalInput = document.getElementById('total_amount');
      if (totalInput) totalInput.value = total.toFixed(2);
      return total;
    }

    if (btnAddItem) {
      btnAddItem.addEventListener('click', () => {
        const variantId = document.getElementById('variant_select').value;
        const qty = Number(document.getElementById('variant_qty').value || 1);
        if (!variantId) return showToast('info','Selecciona una variante.');
        // find label from option
        const opt = document.querySelector(`#variant_select option[value='${variantId}']`);
        const label = opt ? opt.textContent : `Var ${variantId}`;
        const unit_price = opt && opt.dataset && opt.dataset.price ? Number(opt.dataset.price) : 0;
        items.push({ product_variant_id: Number(variantId), quantity: qty, label, unit_price });
        renderItems();
        computeTotal();
      });
    }

    // Search handlers
    const btnSearchOrderNumber = document.getElementById('btn_search_order_number');
    const btnSearchCedula = document.getElementById('btn_search_cedula');
    const btnClearSearch = document.getElementById('btn_clear_search');

    if (btnSearchOrderNumber) {
      btnSearchOrderNumber.addEventListener('click', async () => {
        const q = document.getElementById('search_order_number').value.trim();
        if (!q) return showToast('info', 'Ingresa un número de pedido para buscar.');
        try {
          const res = await fetch(`/orders/search/${encodeURIComponent(q)}`);
          if (!res.ok) throw new Error('Pedido no encontrado');
          const order = await res.json();
          openOrderModal('view', order);
        } catch (err) {
          showToast('info', err.message || 'No se encontró el pedido.');
        }
      });
    }

    if (btnSearchCedula) {
      btnSearchCedula.addEventListener('click', async () => {
        const q = document.getElementById('search_cedula').value.trim();
        if (!q) return showToast('info', 'Ingresa una cédula para buscar.');
        try {
          const res = await fetch(`/orders/search/cedula/${encodeURIComponent(q)}`);
          if (!res.ok) {
            const err = await res.json().catch(() => ({}));
            throw new Error(err.detail || 'No se encontraron pedidos para esa cédula.');
          }
          const orders = await res.json();
          // replace table body with results
          const tbody = document.querySelector('table tbody');
          if (!tbody) return;
          tbody.innerHTML = '';
          orders.forEach((order) => {
            const tr = document.createElement('tr');
            tr.className = 'border-t border-slate-200 bg-white hover:bg-slate-50';
            tr.innerHTML = `
              <td class="px-4 py-3 font-semibold text-slate-900">${order.order_number}</td>
              <td class="px-4 py-3">${order.client?.full_name ?? 'Cliente sin nombre'}</td>
              <td class="px-4 py-3">${order.total_amount ?? '$0'}</td>
              <td class="px-4 py-3">${order.due_date ? order.due_date.split('T')[0] : 'Sin fecha'}</td>
              <td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-amber-700">${order.status ?? 'pending'}</span></td>
              <td class="px-4 py-3"><div class="flex items-center justify-end gap-2"><button data-order-action="view" data-order-id="${order.id}" class="rounded-lg bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-200">Ver</button> <button data-order-action="edit" data-order-id="${order.id}" class="rounded-lg bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-200">Editar</button> <button data-order-action="delete" data-order-id="${order.id}" class="rounded-lg bg-rose-100 px-2 py-1 text-xs font-medium text-rose-700 hover:bg-rose-200">Eliminar</button></div></td>
            `;
            tbody.appendChild(tr);
          });
          // reattach action handlers
          attachRowActionHandlers();
        } catch (err) {
        showToast('info', err.message || 'No se encontraron pedidos.');
      }
      });
    }

    if (btnClearSearch) {
      btnClearSearch.addEventListener('click', () => location.reload());
    }

    function attachRowActionHandlers() {
      document.querySelectorAll('[data-order-action="view"]').forEach((b) => b.addEventListener('click', async (e) => {
        const id = e.currentTarget.dataset.orderId;
        const res = await fetch(`/orders/${id}`);
        if (!res.ok) return showToast('error','No se pudo cargar el pedido.');
        const order = await res.json();
        openOrderModal('view', order);
      }));
      document.querySelectorAll('[data-order-action="edit"]').forEach((b) => b.addEventListener('click', async (e) => {
        const id = e.currentTarget.dataset.orderId;
        const res = await fetch(`/orders/${id}`);
        if (!res.ok) return showToast('error','No se pudo cargar el pedido.');
        const order = await res.json();
        openOrderModal('edit', order);
      }));
      document.querySelectorAll('[data-order-action="delete"]').forEach((b) => b.addEventListener('click', async (e) => {
        const id = e.currentTarget.dataset.orderId;
        if (!confirm('¿Deseas eliminar este pedido?')) return;
        const res = await fetch(`/orders/${id}`, { method: 'DELETE' });
        if (!res.ok) return showToast('error','No se pudo eliminar el pedido.');
        location.reload();
      }));
    }

    // Toast helper
    function showToast(type, message, duration = 4000) {
      const container = document.getElementById('toast-container');
      if (!container) return alert(message);
      const toast = document.createElement('div');
      toast.className = 'max-w-sm rounded-lg px-4 py-3 text-sm shadow-lg flex items-start gap-3';
      toast.style.opacity = '0';
      toast.style.transition = 'transform 0.12s ease, opacity 0.12s ease';
      toast.style.transform = 'translateY(-6px)';
      const colorMap = {
        success: 'bg-emerald-50 text-emerald-700',
        error: 'bg-rose-50 text-rose-700',
        info: 'bg-slate-50 text-slate-700'
      };
      toast.classList.add(...colorMap[type].split(' '));
      toast.innerHTML = `<div class="flex-1">${message}</div>`;
      container.appendChild(toast);
      requestAnimationFrame(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
      });
      setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(-6px)';
        setTimeout(() => container.removeChild(toast), 160);
      }, duration);
    }
</script>
{% endblock %}