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

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

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

  <!-- NAV‑TABS -->
  <ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pane-prod" type="button">
        Productos
      </button>
    </li>
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pane-cliente" type="button">
        Clientes
      </button>
    </li>
  </ul>

  <div class="tab-content">

    <!-- PANE PRODUCTOS -->
    <div class="tab-pane fade show active" id="pane-prod">
      <input id="filtroProductos" class="form-control mb-3" type="text" placeholder="Buscar producto…">

      <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>

    <!-- PANE CLIENTES -->
    <div class="tab-pane fade" id="pane-cliente">
      <input id="filtroClientes" class="form-control mb-3" type="text" placeholder="Buscar cliente…">

      <table id="tblClientes" class="table table-striped table-bordered w-100">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Teléfono</th>
            <th>Tipo</th>
            <th>Cliente en posmaster</th>
            <th class="text-end">Acciones</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

  </div>
</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>

<!-- Modal Clientes Básico -->
<div class="modal fade" id="modalClientesBasico" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">📋 Selecciona Cliente Básico</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input id="filtroBasico" class="form-control mb-2" type="text" placeholder="Filtrar clientes…">
        <div id="listaClientes" class="list-group" style="max-height:400px;overflow:auto;"></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  $.fn.dataTable.ext.errMode = 'throw';

  const csrftoken = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)')?.pop();
  const dbAlias   = 'defaultPM';
  const NEGOCIO_ID = {{ negocio_id }};

  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 () {
    /* ────────────────  PRODUCTOS  ────────────────────────────── */

    const dtProd = $('#tblProductos').DataTable({
      pageLength: 10,
      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', () => dtProd.search($('#filtroProductos').val()).draw());

    async function cargarProductos() {
      const urlProd = `{% url 'obtener_productos_por_negocio' %}?fk_negocio=${NEGOCIO_ID}`;
      const productos = await fetchWithAlias(urlProd);
      const presPorProd = await Promise.all(
        productos.map(p =>
          fetchWithAlias("{% url 'obtener_presentaciones_producto_negocio' %}", {
            method: 'POST',
            body: JSON.stringify({ pk_producto_negocio: p.pk_producto_negocio })
          })
        )
      );
      dtProd.clear();
      productos.forEach((p, i) => {
        const pres = presPorProd[i];
        const presTxt = pres.length
          ? pres.map(r => r.presentacion_descripcion +
              (r.presentacion_posmaster ? ` ⇒ ${r.presentacion_posmaster}` : ''))
            .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>`
          : '';
        dtProd.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>`
        ]);
      });
      dtProd.draw();
    }
    await cargarProductos();

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

    /* ───── POSMASTER ───── */
    let currentPN, posCache;

    $('#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('');
      new bootstrap.Modal('#modalPosmaster').show();
    });

    $('#filtroPos').on('input', () => renderListaPOS($('#filtroPos').val()));

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

    /* ───── Presentaciones ───── */
    $('#tblProductos').on('click', '.btn-presentaciones', async function () {
      currentPN = $(this).data('pk');
      const cArt = $(this).data('codigoart');
      const pedidos = await fetchWithAlias("{% url 'obtener_presentaciones_producto_negocio' %}", {
        method: 'POST', body: JSON.stringify({ pk_producto_negocio: currentPN })
      });
      const posm = await fetchWithAlias("{% url 'obtener_presentaciones_por_codigo_articulo' %}", {
        method: 'POST', body: JSON.stringify({ codigoArticulo: cArt })
      });
      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>
              ${posm.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 empty = $('#formPresentaciones .pres-select').filter(function () { return !this.value; }).length;
      if (empty) { Swal.fire('Aviso', 'Asigná todas las presentaciones', 'warning'); return; }
      const upd = $('#formPresentaciones .pres-row').map(function () {
        const row = $(this), 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(upd)
        });
        bootstrap.Modal.getInstance(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');
      }
    });

    /* ────────────────  CLIENTES  ────────────────────────────── */
    const dtClientes = $('#tblClientes').DataTable({
      pageLength: 10,
      dom: 'lrtip',
      language: { url: "//cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json" },
      columnDefs: [{ orderable:false, targets:[4,5] }]
    });
    $('#filtroClientes').on('input', () => dtClientes.search($('#filtroClientes').val()).draw());

    async function cargarClientes(){
      const urlCli   = `{% url 'obtener_clientes_by_negocio' %}?id_negocio=${NEGOCIO_ID}`;
      const clientes = await fetchWithAlias(urlCli);

      dtClientes.clear();
      clientes.forEach(c=>{
        /* 5ª columna: nombre del cliente POSMASTER o — */
        const posHtml = c.nombre_cliente_posmaster
          ? `<span class="badge bg-success">${c.nombre_cliente_posmaster}</span>`
          : `<span class="text-muted">—</span>`;

        /* 6ª columna: Asignar o Desasociar */
        const actionBtn = c.asociado
          ? `<button class="btn btn-sm btn-outline-danger btn-desasociar-cliente"
                     data-id-asociado="${c.id_cliente_asociado}">
               Desasociar
             </button>`
          : `<button class="btn btn-sm btn-outline-info btn-asociar-cliente"
                     data-id-negocio-cliente="${c.id_cliente_negocio}">
               Asignar
             </button>`;

        dtClientes.row.add([
          c.nombre_cliente,
          c.correo_cliente   || '—',
          c.telefono_cliente || '—',
          c.tipo_cliente     || '—',
          posHtml,
          `<div class="text-end">${actionBtn}</div>`
        ]);
      });
      dtClientes.draw();
    }

    /* cargar cuando se abre la pestaña */
    document.querySelector('[data-bs-target="#pane-cliente"]')
      .addEventListener('shown.bs.tab', cargarClientes);

    /* ---------- ASIGNAR ---------- */
    let clienteNegocioSeleccionado = null;

    $('#tblClientes').on('click','.btn-asociar-cliente',function(){
      clienteNegocioSeleccionado = $(this).data('id-negocio-cliente');
      cargarClientesBasico();
      new bootstrap.Modal('#modalClientesBasico').show();
    });

    async function cargarClientesBasico(){
      const basicos = await fetchWithAlias("{% url 'obtener_clientes_basico' %}");
      $('#listaClientes').html(
        basicos.map(b=>`
          <a href="#" class="list-group-item list-group-item-action cliente-item"
             data-idcliente="${b.PKCliente}" data-nombre="${b.NombreConocido}">
            <strong>${b.NombreConocido}</strong><br>
            <small>${b.Correo || '—'} | ${b.telefono_cliente || '—'}</small>
          </a>`).join('')
      );
      $('#filtroBasico').val('').trigger('input');
    }

    $('#filtroBasico').on('input',function(){
      const f=this.value.toLowerCase();
      $('#listaClientes .cliente-item').each(function(){
        $(this).toggle($(this).text().toLowerCase().includes(f));
      });
    });

    $('#listaClientes').on('click','.cliente-item',async function(e){
      e.preventDefault();
      const pkPos = $(this).data('idcliente');
      const nomPos= $(this).data('nombre');

      await fetchWithAlias("{% url 'asociar_cliente_producto_negocio' %}",{
        method:'POST',
        body:JSON.stringify({
          id_cliente_negocio : clienteNegocioSeleccionado,
          pk_cliente_posmaster : pkPos,
          codigo_posmaster : '',                 // opcional si tu SP lo llena
          nombre_cliente_posmaster : nomPos
        })
      });
      bootstrap.Modal.getInstance(
        document.getElementById('modalClientesBasico')
      ).hide();
      Swal.fire({ icon:'success', title:'Cliente asignado.', timer:1200, showConfirmButton:false });
      cargarClientes();
    });

    /* ---------- DESASOCIAR ---------- */
    $('#tblClientes').on('click','.btn-desasociar-cliente',function(){
      const idAsoc = $(this).data('id-asociado');
      Swal.fire({
        title:'¿Desasociar cliente?',
        icon:'warning',
        showCancelButton:true,
        confirmButtonText:'Sí, desasociar'
      }).then(async res=>{
        if(!res.isConfirmed) return;
        await fetchWithAlias("{% url 'desasociar_cliente_producto_negocio' %}",{
          method:'POST',
          body:JSON.stringify({ id_cliente_asociado : idAsoc })
        });
        Swal.fire('Hecho','Se desasoció el cliente.','success');
        cargarClientes();
      });
    });

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