{% 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="card mb-3">
    <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
      <div>
        <div class="text-uppercase small text-muted">Proveedor</div>
        <h3 class="mb-1">{{ provider.razonSocial ?: 'Nuevo proveedor' }}</h3>
        <p class="mb-0 text-muted">{{ provider.clasificacion ?: 'Sin clasificar' }}</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">Codigo</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 %}
        {% if provider.codigo %}
          <input type="hidden" name="codigo" value="{{ provider.codigo }}">
        {% endif %}
                <section class="form-section">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="form-section__title mb-0">Datos generales</h6>
            <span class="badge bg-light text-secondary">Obligatorio</span>
          </div>
          <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">Telefono</label>
              <input class="form-control" name="telefono" value="{{ provider.telefono }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Correo electronico</label>
              <input class="form-control" type="email" name="email" value="{{ provider.email }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Razon 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-12">
              <label class="form-label">Direccion</label>
              <textarea class="form-control" rows="2" name="direccion">{{ provider.direccion }}</textarea>
            </div>
          </div>
        </section>

        <section class="form-section">
          <h6 class="form-section__title">Ubicacion y clasificacion</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">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="col-md-4">
              <label class="form-label">Clasificacion</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">Condicion 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 }} dias)
                  </option>
                {% endfor %}
              </select>
            </div>
          </div>
        </section>

        <section class="form-section">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <h6 class="form-section__title mb-1"><i class="bi bi-receipt me-2"></i>Configuracion fiscal</h6>
              <p class="text-muted small mb-0">Elige el regimen fiscal y el sistema aplicara los impuestos desde ese catalogo.</p>
            </div>
          </div>
          <div class="row g-3 align-items-start">
            <div class="col-lg-4">
              <label class="form-label">Regimen fiscal</label>
              <select class="form-select" name="regimen_fiscal_id" id="regimenFiscalSelect">
                <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>
              <div class="form-text">Los presets se definen en Catalogos / Regimenes fiscales.</div>
            </div>
            <div class="col-lg-8">
                            <div class="card shadow-sm border-0" id="regimen-summary">
                <div class="card-body py-3">
                  <div class="text-muted">Selecciona un regimen para ver sus impuestos y retenciones.</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="form-section">
          <h6 class="form-section__title">Informacion financiera</h6>
          <div class="row g-3 align-items-center">
            <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">Limite de credito</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 catalogo</label>
              </div>
            </div>
          </div>
        </section>
      </form>
    </div>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const regimenCatalog = {{ catalogs.regimenesFiscales|json_encode|raw }};
    const regimenSelect = document.getElementById('regimenFiscalSelect');
    const resumenEl = document.getElementById('regimen-summary');

    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 presets.</div>';
        return;
      }
      const cfg = reg.config || {};
      const hasIsr = !!cfg.retencionIsrNombre;
      const hasIva = !!cfg.retencionIvaNombre;
      const ivaText = cfg.impuestoNombre
        ? `${cfg.impuestoNombre}${cfg.impuestoPorcentaje ? ' (' + cfg.impuestoPorcentaje + '%)' : ''}`
        : 'Sin IVA / Exento';

      resumenEl.innerHTML = `
        <div class=\"row g-3\">
          <div class=\"col-md-6\">
            <div class=\"border rounded-3 p-3 h-100 bg-light\">
              <div class=\"text-muted small mb-2\">Impuestos</div>
              <div class=\"d-flex justify-content-between align-items-center\">
                <span class=\"fw-semibold\">${ivaText}</span>
                ${cfg.impuestoPorcentaje ? `<span class=\"badge bg-primary-subtle text-primary-700\">${cfg.impuestoPorcentaje}%</span>` : ''}
              </div>
            </div>
          </div>
          <div class=\"col-md-6\">
            <div class=\"border rounded-3 p-3 h-100 bg-light\">
              <div class=\"text-muted small mb-2\">Retenciones</div>
              <div class=\"d-flex justify-content-between align-items-center mb-1\">
                <span>ISR</span>
                <span class=\"fw-semibold\">${hasIsr ? cfg.retencionIsrNombre : 'No aplica'}</span>
              </div>
              <div class=\"d-flex justify-content-between align-items-center mb-1\">
                <span>IVA</span>
                <span class=\"fw-semibold\">${hasIva ? cfg.retencionIvaNombre : 'No aplica'}</span>
              </div>
              <div class=\"d-flex justify-content-between align-items-center\">
                <span>IDP</span>
                <span class=\"fw-semibold\">${cfg.aplicaIdp ? (cfg.idpTasaNombre || 'Aplica') : 'No aplica'}</span>
              </div>
            </div>
          </div>
        </div>`;
    };

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

{% endblock %}