{% extends "menu/menu.html" %}
{% load static %}

{% block title %}Asignación de Productos y Presentaciones{% endblock %}

{% block body %}
<div class="container my-4">

  <!-- Buscador personalizado -->
  <input id="filtroProductos" class="form-control mb-3" type="text" placeholder="Buscar producto…">

  <!-- Tabla -->
  <table id="tblProductos" class="table table-striped table-bordered w-100">
    <thead>
      <tr>
        <th>Imagen</th>
        <th>Producto</th>
        <th>Presentaciones</th>
        <th>POSMASTER</th>
        <th class="text-end">Acciones</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

</div>

<!-- Modal Presentaciones -->
<div class="modal fade" id="modalPresentaciones" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">🎯 Asignar Presentaciones</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="formPresentaciones"></form>
      </div>
      <div class="modal-footer">
        <button id="btnGuardarAsignaciones" class="btn btn-primary" type="button">
          Guardar Asignaciones
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal POSMASTER -->
<div class="modal fade" id="modalPosmaster" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="posModalTitle" class="modal-title">🔗 Asignar POSMASTER</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input id="filtroPos" class="form-control mb-2" type="text" placeholder="Filtrar…">
        <div id="listaPos" class="list-group" style="max-height:420px;overflow:auto;"></div>
      </div>
    </div>
  </div>
</div>

<!-- Modal imagen -->
<div class="modal fade" id="modalImgPreview" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-transparent border-0">
      <img id="imgPreview" class="img-fluid rounded shadow">
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  $.fn.dataTable.ext.errMode = 'throw';
  const csrftoken = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)')?.pop();
  const dbAlias = 'defaultPM';

  function fetchWithAlias(url, opts = {}) {
    opts.headers = {
      'X-DB-Alias': dbAlias,
      'X-CSRFToken': csrftoken,
      'Content-Type': 'application/json',
      ...(opts.headers || {})
    };
    return fetch(url, opts)
      .then(r => r.ok ? r.json()
        : r.json().then(e => Promise.reject(e)));
  }

  $(async function () {
    const dt = $('#tblProductos').DataTable({
      pageLength: 10,
      lengthChange: true,
      ordering: true,
      searching: true,
      autoWidth: false,
      dom: 'lrtip',
      language: {
        url: "//cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json"
      },
      columnDefs: [
        { orderable: false, targets: [0, 4] }
      ]
    });

    $('#filtroProductos').on('input', function () {
      dt.search(this.value).draw();
    });

    let currentPN = null;

    async function cargarProductos() {
      const productos = await fetchWithAlias(
        "{% url 'obtener_productos_por_negocio' %}?fk_negocio=22");

      const presentacionesPorProd = await Promise.all(
        productos.map(p =>
          fetchWithAlias("{% url 'obtener_presentaciones_producto_negocio' %}", {
            method: 'POST',
            body: JSON.stringify({ pk_producto_negocio: p.pk_producto_negocio })
          })
        )
      );

      dt.clear();
      productos.forEach((p, i) => {
        const presentaciones = presentacionesPorProd[i];
        const presTxt = presentaciones.length
          ? presentaciones.map(pr => {
            const asign = pr.presentacion_posmaster
              ? ` ⇒ ${pr.presentacion_posmaster}` : '';
            return `${pr.presentacion_descripcion}${asign}`;
          }).join('<br>')
          : '—';

        const img = p.imagen
          ? `<img src="${p.imagen}" class="img-thumbnail img-thumb"
                  style="width:55px;cursor:pointer">`
          : '';

        const pos = p.codigo_posmaster
          ? `<div class="small"><strong>${p.codigo_posmaster}</strong><br>
               <span class="text-muted">${p.nombre_posmaster}</span></div>`
          : '—';

        const btnPos = `<button class="btn btn-${p.codigo_posmaster
          ? 'outline-success' : 'outline-primary'} btn-sm btn-asignar"
                               data-pk="${p.pk_producto_negocio}"
                               data-nombre="${p.nombre_pedido}">
                          ${p.codigo_posmaster ? '🔁 Cambiar POS' : '🔗 Asignar POS'}
                        </button>`;
        const btnPres = p.codigo_posmaster
          ? `<button class="btn btn-outline-success btn-sm btn-presentaciones ms-2"
                     data-pk="${p.pk_producto_negocio}"
                     data-codigoart="${p.codigo_posmaster}">
               🎯 Presentaciones
             </button>` : '';

        dt.row.add([
          img,
          `<div class="fw-semibold">${p.nombre_pedido}</div>
           <small class="text-muted">ID #${p.pk_producto_negocio}</small>`,
          presTxt,
          pos,
          `<div class="text-end">${btnPos}${btnPres}</div>`
        ]);
      });
      dt.draw();
    }
    await cargarProductos();

    $('#tblProductos').on('click', '.img-thumb', function () {
      $('#imgPreview').attr('src', this.src);
      new bootstrap.Modal('#modalImgPreview').show();
    });

    let posCache = null;
    $('#tblProductos').on('click', '.btn-asignar', async function () {
      currentPN = $(this).data('pk');
      $('#posModalTitle').text(`🔗 Asignar POS a: ${$(this).data('nombre')}`);
      if (!posCache) {
        posCache = await fetchWithAlias("{% url 'obtener_articulos_postmaster' %}");
      }
      renderListaPOS('');
      $('#modalPosmaster').modal('show');
    });

    $('#filtroPos').on('input', function () { renderListaPOS(this.value); });

    function renderListaPOS(filtro) {
      $('#listaPos').html(
        posCache
          .filter(it => it.Descripcion.toLowerCase().includes(filtro.toLowerCase()))
          .map(it => `
            <a href="#" class="list-group-item list-group-item-action pos-item"
               data-codigo="${it.CodigoArticulo.trim()}"
               data-nombre="${it.Descripcion.trim()}">
              <strong>${it.CodigoArticulo.trim()}</strong> — ${it.Descripcion.trim()}
            </a>`).join('')
      );
    }

    $('#listaPos').on('click', '.pos-item', async function (e) {
      e.preventDefault();
      await fetchWithAlias("{% url 'asignar_pos_a_asignacion' %}", {
        method: 'POST',
        body: JSON.stringify({
          pk_producto_negocio: currentPN,
          codigo_articulo_posmater: $(this).data('codigo'),
          nombre_articulo_posmater: $(this).data('nombre')
        })
      });
      $('#modalPosmaster').modal('hide');
      await cargarProductos();
      Swal.fire({
        icon: 'success', title: '¡POS asignado!',
        timer: 1400, showConfirmButton: false
      });
    });

    $('#tblProductos').on('click', '.btn-presentaciones', async function () {
      currentPN = $(this).data('pk');
      const codigoArt = $(this).data('codigoart');

      const pedidos = await fetchWithAlias(
        "{% url 'obtener_presentaciones_producto_negocio' %}", {
        method: 'POST', body: JSON.stringify({ pk_producto_negocio: currentPN })
      });

      const posmaster = await fetchWithAlias(
        "{% url 'obtener_presentaciones_por_codigo_articulo' %}", {
        method: 'POST', body: JSON.stringify({ codigoArticulo: codigoArt })
      });

      const html = pedidos.map(p => `
        <div class="row mb-3 pres-row"
             data-assign-pk="${p.pk_presentacion_asignacion}">
          <label class="col-sm-4 col-form-label">${p.presentacion_descripcion}</label>
          <div class="col-sm-8">
            <select class="form-select pres-select" required>
              <option value="">-- Asignar con --</option>
              ${posmaster.map(pm => `
                <option value="${pm.PKpresentacion}"
                  ${(p.fk_presentacion_posmaster && pm.PKpresentacion === p.fk_presentacion_posmaster) ||
          (!p.fk_presentacion_posmaster && p.presentacion_posmaster === pm.Presentacion)
          ? 'selected' : ''}>
                  ${pm.Presentacion}
                </option>`).join('')}
            </select>
          </div>
        </div>`).join('');

      $('#formPresentaciones').html(html);
      new bootstrap.Modal('#modalPresentaciones').show();
    });

    $('#btnGuardarAsignaciones').click(async () => {
      const vacio = $('#formPresentaciones .pres-select').filter(function () {
        return !this.value;
      }).length;
      if (vacio) {
        Swal.fire('Aviso', 'Hay presentaciones sin asignar.', 'warning');
        return;
      }

      const updates = $('#formPresentaciones .pres-row').map(function () {
        const row = $(this);
        const sel = row.find('select.pres-select');
        return {
          pk_presentacion_producto_negocio: row.data('assignPk'),
          fk_presentacion_posmaster: parseInt(sel.val(), 10),
          presentacion_posmaster: sel.find('option:selected').text().trim()
        };
      }).get();

      try {
        const res = await fetchWithAlias("{% url 'asignar_presentacion_producto_negocio' %}", {
          method: 'POST',
          body: JSON.stringify(updates)
        });
        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalPresentaciones')).hide();
        Swal.fire({
          icon: 'success',
          title: res.message,
          timer: 1200,
          showConfirmButton: false
        });
        await cargarProductos();
      } catch (e) {
        Swal.fire('Error', e.error || e.message || JSON.stringify(e), 'error');
      }
    });

  });
</script>
{% endblock %}