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

{% block 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">
    <div>
      <p class="text-muted mb-1">{{ isEdit ? 'Actualiza los datos principales.' : 'Completa los campos para registrar un proveedor.' }}</p>
      <h1 class="h3 mb-0">{{ pageTitle }}</h1>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{{ path('proveedor_index') }}"><i class="bi bi-arrow-left me-1"></i>Volver</a>
      <button form="proveedorForm" class="btn btn-primary">
        <i class="bi bi-save me-1"></i>{{ isEdit ? 'Guardar cambios' : 'Registrar' }}
      </button>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="hero-banner mb-4">
    <div class="d-flex flex-wrap gap-3 align-items-center justify-content-between">
      <div>
        <div class="text-uppercase small">Proveedor</div>
        <h3 class="mb-0">{{ provider.razonSocial ?: 'Nuevo proveedor' }}</h3>
        <p class="mb-0 text-muted">{{ provider.clasificacion }}</p>
      </div>
      <div class="d-flex gap-4 text-end">
        <div>
          <div class="text-uppercase small text-muted">NIT</div>
          <strong>{{ provider.nit ?: 'Por definir' }}</strong>
        </div>
        {% if provider.codigo %}
        <div>
          <div class="text-uppercase small text-muted">Código</div>
          <strong>{{ provider.codigo }}</strong>
        </div>
        {% endif %}
        <div>
          <div class="text-uppercase small text-muted">Estado</div>
          <strong>{{ provider.activo ? 'Activo' : 'Inactivo' }}</strong>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <form id="proveedorForm" method="post" action="{{ path('proveedor_store') }}" class="d-flex flex-column gap-4">
        {% if provider.id %}
          <input type="hidden" name="id" value="{{ provider.id }}">
        {% endif %}
        {# El código se genera automáticamente #}
        {% if provider.codigo %}
          <input type="hidden" name="codigo" value="{{ provider.codigo }}">
        {% endif %}

        <section class="form-section">
          <h6 class="form-section__title">Datos generales</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">NIT <span class="text-danger">*</span></label>
              <input class="form-control" name="nit" required value="{{ provider.nit }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Teléfono</label>
              <input class="form-control" name="telefono" value="{{ provider.telefono }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Correo electrónico</label>
              <input class="form-control" type="email" name="email" value="{{ provider.email }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Razón social <span class="text-danger">*</span></label>
              <input class="form-control" name="razon_social" required value="{{ provider.razonSocial }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Nombre Comercial</label>
              <input class="form-control" name="comercial" value="{{ provider.comercial }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Persona contacto</label>
              <input class="form-control" name="contacto" value="{{ provider.contacto }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Régimen fiscal</label>
              <select class="form-select" name="regimen_fiscal_id">
                <option value="">Seleccione...</option>
                {% for reg in catalogs.regimenesFiscales %}
                  <option value="{{ reg.id }}" {% if provider.regimenFiscalId == reg.id %}selected{% endif %}>
                    {{ reg.nombre }}
                  </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <label class="form-label">Dirección</label>
              <textarea class="form-control" rows="2" name="direccion">{{ provider.direccion }}</textarea>
            </div>
          </div>
        </section>

        <section class="form-section">
          <h6 class="form-section__title">Ubicación y clasificación</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">País</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="col-md-4">
              <label class="form-label">Clasificación</label>
              <select class="form-select" name="clasificacion_id" id="clasificacionSelect">
                {% 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="col-md-4">
              <label class="form-label">Condición de pago</label>
              <select class="form-select" name="condicion_pago_id">
                <option value="">Contado</option>
                {% for cond in catalogs.condicionesPago %}
                  <option value="{{ cond.id }}" {% if provider.condicionPagoId == cond.id %}selected{% endif %}>
                    {{ cond.nombre }} ({{ cond.dias }} días)
                  </option>
                {% endfor %}
              </select>
            </div>
          </div>
        </section>

        {# =============== NUEVA SECCIÓN: CONFIGURACIÓN FISCAL =============== #}
        <section class="form-section">
          <h6 class="form-section__title">
            <i class="bi bi-receipt me-2"></i>Configuración Fiscal
          </h6>
          <p class="text-muted small mb-3">
            Configure los impuestos y retenciones que se aplicarán automáticamente al crear documentos de este proveedor.
          </p>
          <div class="row g-3">
            {# Impuesto (IVA) por defecto #}
            <div class="col-md-4">
              <label class="form-label">Impuesto (IVA)</label>
              <select class="form-select" name="impuesto_id">
                <option value="">Sin IVA / Exento</option>
                {% for imp in catalogs.impuestos %}
                  <option value="{{ imp.id }}" {% if provider.impuestoId == imp.id %}selected{% endif %}>
                    {{ imp.nombre }} ({{ imp.porcentaje }}%)
                  </option>
                {% endfor %}
              </select>
              <div class="form-text">IVA que se aplicará a los documentos de este proveedor</div>
            </div>

            {# Retención ISR #}
            <div class="col-md-4">
              <label class="form-label">Retención ISR</label>
              <select class="form-select" name="retencion_isr_id">
                <option value="">No aplica</option>
                {% for ret in catalogs.retencionesIsr %}
                  <option value="{{ ret.id }}" {% if provider.retencionIsrId == ret.id %}selected{% endif %}>
                    {{ ret.nombre }} ({{ ret.porcentaje }}%)
                  </option>
                {% endfor %}
              </select>
              <div class="form-text">Retención de Impuesto Sobre la Renta</div>
            </div>

            {# Retención IVA #}
            <div class="col-md-4">
              <label class="form-label">Retención IVA</label>
              <select class="form-select" name="retencion_iva_id">
                <option value="">No aplica</option>
                {% for ret in catalogs.retencionesIva %}
                  <option value="{{ ret.id }}" {% if provider.retencionIvaId == ret.id %}selected{% endif %}>
                    {{ ret.nombre }} ({{ ret.porcentaje }}%)
                  </option>
                {% endfor %}
              </select>
              <div class="form-text">Retención de IVA (para agentes retenedores)</div>
            </div>

            {# Checkboxes de aplica #}
            <div class="col-md-4">
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="aplica_ret_isr" id="aplica_ret_isr"
                       {% if provider.flags.retencionIsr %}checked{% endif %}>
                <label class="form-check-label" for="aplica_ret_isr">
                  <strong>Aplica retención ISR</strong>
                </label>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="aplica_ret_iva" id="aplica_ret_iva"
                       {% if provider.flags.retencionIva %}checked{% endif %}>
                <label class="form-check-label" for="aplica_ret_iva">
                  <strong>Aplica retención IVA</strong>
                </label>
              </div>
            </div>

            {# IDP para combustibles #}
            <div class="col-md-4">
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="aplica_idp" id="aplica_idp"
                       {% if provider.aplicaIdp %}checked{% endif %}>
                <label class="form-check-label" for="aplica_idp">
                  <strong>Aplica IDP</strong>
                  <span class="badge bg-info ms-1">Combustibles</span>
                </label>
              </div>
              <div class="form-text">Impuesto de Distribución de Petróleo</div>
            </div>
          </div>
        </section>

        <section class="form-section">
          <h6 class="form-section__title">Información financiera</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Saldo inicial (moneda base)</label>
              <input class="form-control" type="number" min="0" step="0.01" name="saldo_inicial" value="{{ provider.saldoInicial }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Límite de crédito</label>
              <input class="form-control" type="number" min="0" step="0.01" name="limite_credito" value="{{ provider.limiteCredito }}">
            </div>
            <div class="col-md-4">
              <div class="form-check form-switch mt-4">
                <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 catálogo</label>
              </div>
            </div>
          </div>
        </section>
      </form>
    </div>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const clasificacionSelect = document.getElementById('clasificacionSelect');
    const paisSelect = document.getElementById('paisSelect');
    const aplicaRetIsrCheck = document.getElementById('aplica_ret_isr');

    // Cuando cambia la clasificación, actualizar campos relacionados
    clasificacionSelect?.addEventListener('change', function() {
      const selected = this.options[this.selectedIndex];
      const esExtranjero = selected.dataset.extranjero === '1';
      const retieneIsr = selected.dataset.retieneIsr === '1';

      // Si es extranjero y retiene ISR, marcar el checkbox
      if (esExtranjero && retieneIsr) {
        aplicaRetIsrCheck.checked = true;
      }
    });
  });
  </script>
{% endblock %}