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

{% block title %}Editar Lineas del Documento{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li>
        <a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
          </svg>
          <span class="sr-only">Inicio</span>
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="{{ path('documento_show', {id: documento.id}) }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Documento</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <span class="ml-4 text-sm font-medium text-secondary-500">Editar lineas</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">Editar Lineas</h2>
      <p class="mt-1 text-sm text-secondary-500">
        Documento {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}
      </p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4 gap-3">
      <a href="{{ path('documento_show', {id: documento.id}) }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">
        Cancelar
      </a>
      <button type="submit" form="lineas-documento-form" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
        Guardar cambios
      </button>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="mb-4 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900">
    <strong>Cliente actual:</strong> {{ tenantContextView.cliente ?? 'No seleccionado' }}
    <span class="mx-2">|</span>
    <strong>Sitio actual:</strong> {{ tenantContextView.sitio ?? 'No seleccionado' }}
  </div>

  <form id="lineas-documento-form" method="post" action="{{ path('documento_lineas_update', {id: documento.id}) }}" class="space-y-6">
    <input type="hidden" name="_token" value="{{ csrf_token('lineas_documento_' ~ documento.id) }}">

    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-secondary-200 bg-secondary-50">
        <h3 class="text-base font-semibold text-secondary-900">Datos del documento</h3>
      </div>
      <div class="px-6 py-5 grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
        <div>
          <p class="text-secondary-500">Proveedor</p>
          <p class="font-semibold text-secondary-900">{{ documento.proveedor.razonSocial }}</p>
        </div>
        <div>
          <p class="text-secondary-500">Tipo</p>
          <p class="font-semibold text-secondary-900">{{ documento.tipoDocumento.codigo }} - {{ documento.tipoDocumento.nombre }}</p>
        </div>
        <div>
          <p class="text-secondary-500">Documento</p>
          <p class="font-mono font-semibold text-secondary-900">{{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}</p>
        </div>
        <div>
          <p class="text-secondary-500">Moneda</p>
          <p class="font-semibold text-secondary-900">{{ documento.moneda.codigo }} - {{ documento.moneda.nombre }}</p>
        </div>
      </div>
    </div>

    <div class="table-card">
      <div class="px-6 py-4 border-b border-secondary-200 bg-secondary-50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <h3 class="text-base font-semibold text-secondary-900">Detalle de lineas</h3>
          <p id="lineas-count" class="mt-1 text-xs text-secondary-600">{{ lineas|length }} linea(s)</p>
        </div>
        <button type="button" id="btn-add-linea" class="inline-flex items-center justify-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
          </svg>
          Agregar linea
        </button>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-white">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Descripcion</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500 w-36">Cantidad</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500 w-44">Precio unit.</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500 w-36">Subtotal</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500 w-24">Accion</th>
            </tr>
          </thead>
          <tbody id="lineas-editor-body" class="divide-y divide-secondary-100"></tbody>
        </table>
      </div>

      <div class="px-6 py-4 border-t border-secondary-200 bg-secondary-50">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Lineas activas</p>
            <p id="summary-lines" class="text-xl font-semibold text-secondary-900">0</p>
          </div>
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Subtotal editable</p>
            <p id="summary-subtotal" class="text-xl font-semibold text-secondary-900">{{ documento.moneda.codigo }} 0.00</p>
          </div>
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Total actual</p>
            <p class="text-xl font-semibold text-secondary-900">{{ documento.moneda.codigo }} {{ documento.totalNeto|number_format(2, '.', ',') }}</p>
          </div>
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Saldo actual</p>
            <p class="text-xl font-semibold text-secondary-900">{{ documento.moneda.codigo }} {{ documento.saldoPendiente|number_format(2, '.', ',') }}</p>
          </div>
        </div>
      </div>
    </div>

    {% if centrosCosto is not empty %}
    <div class="bg-white shadow rounded-lg">
      <div class="px-6 py-6">
        <div class="flex items-center justify-between mb-3">
          <h4 class="text-sm font-semibold text-secondary-700">Centros de costo (opcional)</h4>
          <button type="button" id="btn-add-centro-costo" class="inline-flex items-center px-3 py-1.5 bg-secondary-100 hover:bg-secondary-200 text-secondary-700 text-sm font-medium rounded-md">+ Agregar</button>
        </div>
        <p id="centros-costo-total" class="mb-2 text-xs text-secondary-500">Sin centros de costo asignados.</p>
        <table class="min-w-full">
          <thead class="bg-secondary-50">
            <tr>
              <th class="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">Centro de costo</th>
              <th class="px-4 py-2 text-right text-xs font-medium text-secondary-500 uppercase w-32">Porcentaje</th>
              <th class="px-4 py-2 w-16"></th>
            </tr>
          </thead>
          <tbody id="centros-costo-editor-body" class="bg-white divide-y divide-secondary-200"></tbody>
        </table>
        <template id="tpl-centro-costo-option">{% for cc in centrosCosto %}<option value="{{ cc.id }}">{{ cc.nombre }}</option>{% endfor %}</template>
      </div>
    </div>
    {% endif %}

    <div class="flex justify-end gap-3">
      <a href="{{ path('documento_show', {id: documento.id}) }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">
        Cancelar
      </a>
      <button type="submit" id="btn-save-lineas" class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
        Guardar cambios
      </button>
    </div>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const body = document.getElementById('lineas-editor-body');
      const countEl = document.getElementById('lineas-count');
      const summaryLines = document.getElementById('summary-lines');
      const summarySubtotal = document.getElementById('summary-subtotal');
      const addButton = document.getElementById('btn-add-linea');
      const saveButton = document.getElementById('btn-save-lineas');
      const moneda = {{ documento.moneda.codigo|json_encode|raw }};
      let nextNewId = 0;
      const rows = [
        {% for linea in lineas %}
          {
            key: 'existing-{{ linea.id }}',
            id: {{ linea.id }},
            isNew: false,
            descripcion: {{ linea.descripcion|json_encode|raw }},
            cantidad: {{ linea.cantidad|number_format(2, '.', '') }},
            precio: {{ linea.precioUnitario|number_format(2, '.', '') }},
            deleted: false
          }{{ not loop.last ? ',' : '' }}
        {% endfor %}
      ];

      function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>"']/g, function (char) {
          return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'}[char] || char;
        });
      }

      function formatMoney(value) {
        return Number(value || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }

      function formatDecimal(value) {
        const number = Number(value || 0);
        if (!Number.isFinite(number)) {
          return '0';
        }

        return number.toFixed(2).replace(/\.?0+$/, '');
      }

      function inputName(row, field) {
        return row.isNew ? `nuevas[${row.id}][${field}]` : `lineas[${row.id}][${field}]`;
      }

      function render() {
        body.innerHTML = '';

        rows.forEach(function (row) {
          const subtotal = Math.max(Number(row.cantidad || 0) * Number(row.precio || 0), 0);
          const tr = document.createElement('tr');
          tr.className = row.deleted ? 'bg-red-50 opacity-70' : 'hover:bg-secondary-50';
          tr.dataset.key = row.key;
          tr.innerHTML = `
            <td class="px-4 py-3 align-top">
              <input type="text" name="${inputName(row, 'descripcion')}" value="${escapeHtml(row.descripcion)}" ${row.deleted ? 'readonly' : ''} class="linea-desc w-full min-w-72 px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Descripcion del producto o servicio">
              ${!row.isNew && row.deleted ? `<input type="hidden" name="${inputName(row, 'eliminar')}" value="1">` : ''}
            </td>
            <td class="px-4 py-3 align-top text-right">
              <input type="number" name="${inputName(row, 'cantidad')}" value="${formatDecimal(row.cantidad)}" min="0.01" step="0.01" ${row.deleted ? 'readonly' : ''} class="linea-cantidad w-32 px-3 py-2 border border-secondary-300 rounded-md text-right focus:ring-primary-500 focus:border-primary-500">
            </td>
            <td class="px-4 py-3 align-top text-right">
              <input type="number" name="${inputName(row, 'precio_unitario')}" value="${formatDecimal(row.precio)}" min="0" step="0.01" ${row.deleted ? 'readonly' : ''} class="linea-precio w-40 px-3 py-2 border border-secondary-300 rounded-md text-right focus:ring-primary-500 focus:border-primary-500">
            </td>
            <td class="line-subtotal px-4 py-3 align-top text-right text-sm font-semibold text-secondary-900">${moneda} ${formatMoney(row.deleted ? 0 : subtotal)}</td>
            <td class="px-4 py-3 align-top text-right">
              <button type="button" class="linea-delete inline-flex items-center px-3 py-2 border ${row.deleted ? 'border-secondary-300 text-secondary-700 hover:bg-secondary-50' : 'border-red-300 text-red-700 hover:bg-red-50'} text-xs font-medium rounded bg-white">
                ${row.deleted ? 'Restaurar' : 'Eliminar'}
              </button>
            </td>
          `;
          body.appendChild(tr);
        });

        updateSummary();
      }

      function updateSummary() {
        let active = 0;
        let subtotal = 0;

        rows.forEach(function (row) {
          if (row.deleted) {
            return;
          }
          const descripcion = String(row.descripcion || '').trim();
          const cantidad = Number(row.cantidad || 0);
          const precio = Number(row.precio || 0);
          if (descripcion !== '' && cantidad > 0 && precio >= 0) {
            active += 1;
            subtotal += cantidad * precio;
          }
        });

        countEl.textContent = `${active} ${active === 1 ? 'linea activa' : 'lineas activas'}`;
        summaryLines.textContent = String(active);
        summarySubtotal.textContent = `${moneda} ${formatMoney(subtotal)}`;
        saveButton.disabled = active === 0;
        saveButton.classList.toggle('opacity-60', saveButton.disabled);
        saveButton.classList.toggle('cursor-not-allowed', saveButton.disabled);
      }

      body.addEventListener('input', function (event) {
        const tr = event.target.closest('tr[data-key]');
        const row = rows.find((item) => item.key === tr?.dataset.key);
        if (!row) {
          return;
        }

        if (event.target.classList.contains('linea-desc')) {
          row.descripcion = event.target.value;
        } else if (event.target.classList.contains('linea-cantidad')) {
          row.cantidad = Number(event.target.value || 0);
        } else if (event.target.classList.contains('linea-precio')) {
          row.precio = Number(event.target.value || 0);
        }

        const subtotalCell = tr.querySelector('.line-subtotal');
        if (subtotalCell) {
          subtotalCell.textContent = `${moneda} ${formatMoney(row.deleted ? 0 : Number(row.cantidad || 0) * Number(row.precio || 0))}`;
        }
        updateSummary();
      });

      body.addEventListener('change', function (event) {
        if (!event.target.classList.contains('linea-cantidad') && !event.target.classList.contains('linea-precio')) {
          return;
        }

        const tr = event.target.closest('tr[data-key]');
        const row = rows.find((item) => item.key === tr?.dataset.key);
        if (!row) {
          return;
        }

        if (event.target.classList.contains('linea-cantidad')) {
          row.cantidad = Math.round(Number(event.target.value || 0) * 100) / 100;
          event.target.value = formatDecimal(row.cantidad);
        } else {
          row.precio = Math.round(Number(event.target.value || 0) * 100) / 100;
          event.target.value = formatDecimal(row.precio);
        }

        const subtotalCell = tr.querySelector('.line-subtotal');
        if (subtotalCell) {
          subtotalCell.textContent = `${moneda} ${formatMoney(row.deleted ? 0 : Number(row.cantidad || 0) * Number(row.precio || 0))}`;
        }
        updateSummary();
      });

      body.addEventListener('click', function (event) {
        if (!event.target.classList.contains('linea-delete')) {
          return;
        }

        const tr = event.target.closest('tr[data-key]');
        const rowIndex = rows.findIndex((item) => item.key === tr?.dataset.key);
        if (rowIndex < 0) {
          return;
        }

        if (rows[rowIndex].isNew) {
          rows.splice(rowIndex, 1);
        } else {
          rows[rowIndex].deleted = !rows[rowIndex].deleted;
        }

        render();
      });

      addButton.addEventListener('click', function () {
        nextNewId += 1;
        rows.push({
          key: `new-${nextNewId}`,
          id: nextNewId,
          isNew: true,
          descripcion: '',
          cantidad: 1,
          precio: 0,
          deleted: false
        });
        render();
      });

      render();

      const centroCostoBody = document.getElementById('centros-costo-editor-body');
      const centroCostoAddButton = document.getElementById('btn-add-centro-costo');
      const centroCostoTotalEl = document.getElementById('centros-costo-total');
      if (centroCostoBody && centroCostoAddButton) {
        const centroCostoOptionsTemplate = document.getElementById('tpl-centro-costo-option');
        const centroCostoOptionsMarkup = centroCostoOptionsTemplate ? centroCostoOptionsTemplate.innerHTML : '';
        const centroCostoRows = [
          {% for fila in centrosCostoActuales %}
            { centroCostoId: {{ fila.centroCostoId }}, porcentaje: {{ fila.porcentaje|number_format(2, '.', '') }} }{{ not loop.last ? ',' : '' }}
          {% endfor %}
        ];

        function renderCentrosCosto() {
          centroCostoBody.innerHTML = '';
          centroCostoRows.forEach(function (fila, index) {
            const tr = document.createElement('tr');
            tr.dataset.index = String(index);
            tr.innerHTML = `
              <td class="px-4 py-2"><select name="centros_costo[${index}][centro_costo_id]" class="w-full border border-secondary-300 rounded-md px-2 py-1 centro-costo-select"><option value="">Selecciona...</option>${centroCostoOptionsMarkup}</select></td>
              <td class="px-4 py-2"><input type="number" name="centros_costo[${index}][porcentaje]" min="0.01" max="100" step="0.01" value="${formatDecimal(fila.porcentaje)}" class="w-full border border-secondary-300 rounded-md px-2 py-1 text-right centro-costo-porcentaje"></td>
              <td class="px-4 py-2 text-right"><button type="button" class="text-red-600 hover:text-red-800 btn-eliminar-centro-costo">Quitar</button></td>
            `;
            tr.querySelector('.centro-costo-select').value = String(fila.centroCostoId || '');
            centroCostoBody.appendChild(tr);
          });
          updateCentroCostoTotal();
        }

        function updateCentroCostoTotal() {
          if (!centroCostoTotalEl) {
            return;
          }
          if (centroCostoRows.length === 0) {
            centroCostoTotalEl.textContent = 'Sin centros de costo asignados.';
            centroCostoTotalEl.className = 'mb-2 text-xs text-secondary-500';
            return;
          }
          const suma = centroCostoRows.reduce((acc, fila) => acc + (parseFloat(fila.porcentaje) || 0), 0);
          const cuadra = Math.abs(suma - 100) < 0.01;
          centroCostoTotalEl.textContent = cuadra ? `${suma.toFixed(2)}% asignado ✓` : `${suma.toFixed(2)}% asignado — debe sumar 100%`;
          centroCostoTotalEl.className = cuadra ? 'mb-2 text-xs text-green-600' : 'mb-2 text-xs text-red-600';
        }

        centroCostoBody.addEventListener('input', function (event) {
          const tr = event.target.closest('tr[data-index]');
          const fila = centroCostoRows[Number(tr?.dataset.index)];
          if (!fila) {
            return;
          }
          if (event.target.classList.contains('centro-costo-select')) {
            fila.centroCostoId = event.target.value;
          } else if (event.target.classList.contains('centro-costo-porcentaje')) {
            fila.porcentaje = event.target.value;
          }
          updateCentroCostoTotal();
        });

        centroCostoBody.addEventListener('click', function (event) {
          if (!event.target.classList.contains('btn-eliminar-centro-costo')) {
            return;
          }
          const tr = event.target.closest('tr[data-index]');
          const index = Number(tr?.dataset.index);
          if (Number.isInteger(index)) {
            centroCostoRows.splice(index, 1);
            renderCentrosCosto();
          }
        });

        centroCostoAddButton.addEventListener('click', function () {
          centroCostoRows.push({ centroCostoId: '', porcentaje: '' });
          renderCentrosCosto();
        });

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