{% extends 'base.html.twig' %}
{% set isEdit = mode == 'edit' %}
{% set pageTitle = isEdit ? 'Editar proveedor' : 'Nuevo proveedor' %}

{% block title %}{{ pageTitle }}{% endblock %}
{% block page_title %}{{ pageTitle }}{% endblock %}

{% block breadcrumb %}
  <nav class="breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="{{ path('home') }}">Inicio</a></li>
      <li class="breadcrumb-item"><a href="{{ path('proveedor_index') }}">Proveedores</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ pageTitle }}</li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-heading flex-col items-stretch gap-4 sm:flex-row sm:items-end">
    <div class="min-w-0">
      <p class="page-subtitle mb-1">{{ isEdit ? 'Actualiza los datos principales.' : 'Completa los campos para registrar un proveedor.' }}</p>
      <h1 class="page-title">{{ pageTitle }}</h1>
    </div>
    <div class="flex w-full gap-2 sm:w-auto sm:flex-none">
      <a class="btn btn-outline-secondary flex-1 sm:flex-none" href="{{ path('proveedor_index') }}">
        <i class="bi bi-arrow-left" aria-hidden="true"></i>
        Volver
      </a>
      <button form="proveedorForm" class="btn btn-primary flex-1 sm:flex-none">
        <i class="bi bi-save" aria-hidden="true"></i>
        <span>{{ isEdit ? 'Guardar cambios' : 'Registrar' }}</span>
      </button>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="mb-4 grid gap-2 rounded-card border border-info-200 bg-info-50 px-4 py-3 text-sm text-info-900 sm:grid-cols-2 sm:gap-4" role="status">
    <div class="min-w-0 truncate" title="{{ tenantContextView.cliente ?? 'No seleccionado' }}">
      <strong>Cliente actual:</strong> {{ tenantContextView.cliente ?? 'No seleccionado' }}
    </div>
    <div class="min-w-0 truncate sm:text-right" title="{{ tenantContextView.sitio ?? 'No seleccionado' }}">
      <strong>Sitio actual:</strong> {{ tenantContextView.sitio ?? 'No seleccionado' }}
    </div>
  </div>

  <section class="section-card mb-4" aria-label="Resumen del proveedor">
    <div class="section-card-body flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
      <div class="min-w-0">
        <div class="text-metadata font-semibold uppercase text-neutral-500">Proveedor</div>
        <h2 class="mt-1 break-words text-lg font-semibold text-neutral-950">{{ provider.razonSocial ?: 'Nuevo proveedor' }}</h2>
        <p class="mt-1 text-sm text-neutral-500">{{ provider.clasificacion ?: 'Sin clasificar' }}</p>
      </div>
      <dl class="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3 lg:flex lg:flex-none lg:gap-8 lg:text-right">
        <div class="min-w-0">
          <dt class="text-metadata font-medium uppercase text-neutral-500">NIT</dt>
          <dd class="mt-1 truncate text-sm font-semibold text-neutral-950" title="{{ provider.nit ?: 'Por definir' }}">{{ provider.nit ?: 'Por definir' }}</dd>
        </div>
        {% if provider.codigo %}
        <div class="min-w-0">
          <dt class="text-metadata font-medium uppercase text-neutral-500">Codigo</dt>
          <dd class="mt-1 truncate text-sm font-semibold text-neutral-950" title="{{ provider.codigo }}">{{ provider.codigo }}</dd>
        </div>
        {% endif %}
        <div>
          <dt class="text-metadata font-medium uppercase text-neutral-500">Estado</dt>
          <dd class="mt-1">
            <span class="badge {{ provider.activo ? 'badge-success' : 'badge-neutral' }}">{{ provider.activo ? 'Activo' : 'Inactivo' }}</span>
          </dd>
        </div>
      </dl>
    </div>
  </section>

  <form id="proveedorForm" method="post" action="{{ path('proveedor_store') }}" class="section-card">
    {% if provider.id %}
      <input type="hidden" name="id" value="{{ provider.id }}">
    {% endif %}
    {% if provider.codigo %}
      <input type="hidden" name="codigo" value="{{ provider.codigo }}">
    {% endif %}

    <section class="p-5 sm:p-6" aria-labelledby="provider-general-heading">
      <div class="mb-4 flex items-center justify-between gap-4">
        <div>
          <h2 id="provider-general-heading" class="section-card-title">Datos generales</h2>
          <p class="section-card-subtitle">Identificacion y datos de contacto del proveedor.</p>
        </div>
        <span class="badge badge-neutral flex-none">Obligatorio</span>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        <div class="min-w-0">
          <label class="form-label" for="proveedor-nit">NIT <span class="text-danger-600" aria-hidden="true">*</span></label>
          <input id="proveedor-nit" class="form-control" name="nit" required aria-required="true" autocomplete="off" value="{{ provider.nit }}">
          <span id="proveedor-nit-status" class="mt-1 block text-xs text-secondary-500"></span>
        </div>
        <div class="min-w-0">
          <label class="form-label" for="proveedor-telefono">Telefono</label>
          <input id="proveedor-telefono" class="form-control" name="telefono" inputmode="tel" autocomplete="tel" value="{{ provider.telefono }}">
        </div>
        <div class="min-w-0">
          <label class="form-label" for="proveedor-email">Correo electronico</label>
          <input id="proveedor-email" class="form-control" type="email" name="email" autocomplete="email" value="{{ provider.email }}">
        </div>
        <div class="min-w-0 md:col-span-2 xl:col-span-2">
          <label class="form-label" for="proveedor-razon-social">Razon social <span class="text-danger-600" aria-hidden="true">*</span></label>
          <input id="proveedor-razon-social" class="form-control" name="razon_social" required aria-required="true" autocomplete="organization" value="{{ provider.razonSocial }}">
        </div>
        <div class="min-w-0">
          <label class="form-label" for="proveedor-comercial">Nombre comercial</label>
          <input id="proveedor-comercial" class="form-control" name="comercial" value="{{ provider.comercial }}">
        </div>
        <div class="min-w-0 md:col-span-2 xl:col-span-1">
          <label class="form-label" for="proveedor-contacto">Persona contacto</label>
          <input id="proveedor-contacto" class="form-control" name="contacto" autocomplete="name" value="{{ provider.contacto }}">
        </div>
        <div class="min-w-0 md:col-span-2 xl:col-span-2">
          <label class="form-label" for="proveedor-direccion">Direccion</label>
          <textarea id="proveedor-direccion" class="form-control h-auto min-h-20 resize-y" rows="2" name="direccion" autocomplete="street-address">{{ provider.direccion }}</textarea>
        </div>
      </div>
    </section>

    <section class="border-t border-ui-border p-5 sm:p-6" aria-labelledby="provider-location-heading">
      <div class="mb-4">
        <h2 id="provider-location-heading" class="section-card-title">Ubicacion y clasificacion</h2>
        <p class="section-card-subtitle">Parametros operativos usados al registrar documentos.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        <div class="min-w-0">
          <label class="form-label" for="paisSelect">Pais</label>
          <select class="form-select" name="pais_iso2" id="paisSelect">
            {% for code, label in catalogs.paises %}
              <option value="{{ code }}" {% if provider.paisIso2 == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="min-w-0">
          <label class="form-label" for="clasificacionSelect">Clasificacion</label>
          <select class="form-select" name="clasificacion_id" id="clasificacionSelect">
            <option value="">Sin clasificar</option>
            {% for clasif in catalogs.clasificaciones %}
              <option value="{{ clasif.id }}"
                      data-extranjero="{{ clasif.esExtranjero ? '1' : '0' }}"
                      data-retiene-isr="{{ clasif.sujetoRetencionIsr ? '1' : '0' }}"
                      {% if provider.clasificacionId == clasif.id %}selected{% endif %}>
                {{ clasif.nombre }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="min-w-0 md:col-span-2 xl:col-span-1">
          <label class="form-label" for="proveedor-condicion-pago">Condicion de pago</label>
          <select class="form-select" name="condicion_pago_id" id="proveedor-condicion-pago">
            <option value="">Contado</option>
            {% for cond in catalogs.condicionesPago %}
              <option value="{{ cond.id }}" {% if provider.condicionPagoId == cond.id %}selected{% endif %}>
                {{ cond.nombre }} ({{ cond.dias }} dias)
              </option>
            {% endfor %}
          </select>
        </div>
      </div>
    </section>

    <section class="border-t border-ui-border p-5 sm:p-6" aria-labelledby="provider-tax-heading">
      <div class="mb-4">
        <h2 id="provider-tax-heading" class="section-card-title">Configuracion fiscal</h2>
        <p class="section-card-subtitle">El sistema aplicara los impuestos definidos en el regimen seleccionado.</p>
      </div>
      <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(16rem,0.8fr)_minmax(0,1.2fr)] lg:items-start">
        <div class="min-w-0">
          <label class="form-label" for="regimenFiscalSelect">Regimen fiscal</label>
          <select class="form-select" name="regimen_fiscal_id" id="regimenFiscalSelect" aria-describedby="regimen-fiscal-help">
            <option value="">Seleccione...</option>
            {% for reg in catalogs.regimenesFiscales %}
              <option value="{{ reg.id }}" data-codigo="{{ reg.codigo }}" {% if provider.regimenFiscalId == reg.id %}selected{% endif %}>{{ reg.nombre }}</option>
            {% endfor %}
          </select>
          <p id="regimen-fiscal-help" class="mt-2 text-helper leading-5 text-neutral-500">La configuracion fiscal se toma del regimen. Para cambiar impuestos o retenciones, revisa Catalogos &gt; Regimenes fiscales.</p>
        </div>
        <div class="fiscal-summary-card min-w-0" id="regimen-summary" aria-live="polite">
          <div class="text-sm text-neutral-500">Selecciona un regimen para ver sus impuestos y retenciones.</div>
        </div>
      </div>
    </section>

    <section class="border-t border-ui-border p-5 sm:p-6" aria-labelledby="provider-financial-heading">
      <div class="mb-4">
        <h2 id="provider-financial-heading" class="section-card-title">Informacion financiera</h2>
        <p class="section-card-subtitle">Valores iniciales y disponibilidad del proveedor.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:items-end">
        <div class="min-w-0">
          <label class="form-label" for="proveedor-saldo-inicial">Saldo inicial (moneda base)</label>
          <input id="proveedor-saldo-inicial" class="form-control tabular-nums" type="number" min="0" step="0.01" name="saldo_inicial" value="{{ provider.saldoInicial }}">
        </div>
        <div class="min-w-0">
          <label class="form-label" for="proveedor-limite-credito">Limite de credito</label>
          <input id="proveedor-limite-credito" class="form-control tabular-nums" type="number" min="0" step="0.01" name="limite_credito" value="{{ provider.limiteCredito }}">
        </div>
        <div class="md:col-span-2 xl:col-span-1">
          <div class="flex min-h-10 items-center rounded-control border border-ui-border bg-neutral-50 px-4 py-3">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" role="switch" id="activoSwitch" name="activo" value="1" {% if provider.activo %}checked{% endif %}>
              <label class="form-check-label" for="activoSwitch">Proveedor activo en el catalogo</label>
            </div>
          </div>
        </div>
      </div>
    </section>
  </form>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const nitInput = document.getElementById('proveedor-nit');
    const nitStatus = document.getElementById('proveedor-nit-status');
    const razonSocialInput = document.getElementById('proveedor-razon-social');
    if (nitInput && nitStatus && razonSocialInput) {
      nitInput.addEventListener('blur', function() {
        const nit = nitInput.value.trim();
        if (nit === '') {
          nitStatus.textContent = '';
          return;
        }
        nitStatus.textContent = 'Buscando razon social...';
        fetch('{{ path('proveedor_api_nit') }}?nit=' + encodeURIComponent(nit))
          .then((response) => response.json())
          .then((data) => {
            if (data.encontrado) {
              nitStatus.textContent = data.mensaje || 'NIT encontrado.';
              if (razonSocialInput.value.trim() === '') {
                razonSocialInput.value = data.nombre;
              }
            } else {
              nitStatus.textContent = data.mensaje || 'NIT/CUI no encontrado.';
            }
          })
          .catch(() => {
            nitStatus.textContent = '';
          });
      });
    }

    const regimenCatalog = {{ catalogs.regimenesFiscales|json_encode|raw }};
    const regimenSelect = document.getElementById('regimenFiscalSelect');
    const resumenEl = document.getElementById('regimen-summary');
    const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    }[char]));

    const renderResumen = () => {
      if (!resumenEl) return;
      const id = parseInt(regimenSelect?.value || '0', 10);
      const reg = regimenCatalog.find(r => r.id === id);
      if (!reg) {
        resumenEl.innerHTML = '<div class="text-muted">Selecciona un regimen para ver su configuracion fiscal.</div>';
        return;
      }
      const cfg = reg.config || {};
      const hasIsr = !!cfg.aplicaRetIsr && !!cfg.retencionIsrNombre;
      const hasIva = !!cfg.aplicaRetIva && !!cfg.retencionIvaNombre;
      const ivaText = cfg.impuestoNombre
        ? `${cfg.impuestoNombre}${cfg.impuestoPorcentaje ? ' (' + cfg.impuestoPorcentaje + '%)' : ''}`
        : 'Sin IVA / Exento';

      resumenEl.innerHTML = `
        <div class="fiscal-summary-grid">
          <div class="fiscal-summary-panel">
              <div class="fiscal-summary-kicker">Impuestos</div>
              <div class="fiscal-summary-row">
                <strong>${escapeHtml(ivaText)}</strong>
                ${cfg.impuestoPorcentaje ? `<span class="badge badge-primary">${escapeHtml(cfg.impuestoPorcentaje)}%</span>` : ''}
              </div>
          </div>
          <div class="fiscal-summary-panel">
              <div class="fiscal-summary-kicker">Retenciones</div>
              <div class="fiscal-summary-row">
                <span>ISR</span>
                <span class="fiscal-summary-value">${escapeHtml(hasIsr ? cfg.retencionIsrNombre : 'No aplica')}</span>
              </div>
              <div class="fiscal-summary-row">
                <span>IVA</span>
                <span class="fiscal-summary-value">${escapeHtml(hasIva ? cfg.retencionIvaNombre : 'No aplica')}</span>
              </div>
              <div class="fiscal-summary-row">
                <span>IDP</span>
                <span class="fiscal-summary-value">${escapeHtml(cfg.aplicaIdp ? (cfg.idpTasaNombre || 'Aplica') : 'No aplica')}</span>
              </div>
          </div>
        </div>`;
    };

    regimenSelect?.addEventListener('change', renderResumen);
    renderResumen();
  });
  </script>

{% endblock %}