{{ form_start(form, {'attr': {'class': 'row g-3 needs-validation', 'id': 'formsavevalue'}, 'action': path('app_catalogos_esh_tabla_valores_new', {'id_determinante': id_determinante}) }) }}
    <div class="col-md-12">
    </div>
    <div class="col-md-2" id="posicion-container">
        <label for="posicion" class="custom-label-class required">Posición</label>
        {{ form_widget(form.posicion, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.posicion) }}
    </div>
    <div class="col-md-8" id="descripcion-container">
        <label for="descripcion" class="custom-label-class required">Descripción</label>
        {{ form_widget(form.descripcion, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.descripcion) }}
    </div>
    <div class="col-md-2" id="valor-container">
        <label for="valor" class="custom-label-class required">Valor</label>
        {{ form_widget(form.valor, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.valor) }}
    </div>
    <div class="col-md-2" id="ingresos-container">
        <label for="ingresos" class="custom-label-class required">Ingresos</label>
        {{ form_widget(form.ingresos, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.ingresos) }}
    </div>
    <div class="col-md-2" id="gastos-container">
        <label for="gastos" class="custom-label-class required">Gastos</label>
        {{ form_widget(form.gastos, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.gastos) }}
    </div>
    <div class="col-md-2" id="registro-container">
        <label for="registro" class="custom-label-class required">Registro</label>
        {{ form_widget(form.registro, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.registro) }}
    </div>
    <div class="col-md-4" id="volumen_ventas-container">
        <label for="volumen_ventas" class="custom-label-class required">% Volumen de ventas</label>
        {{ form_widget(form.volumen_ventas, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
        {{ form_errors(form.volumen_ventas) }}
    </div>
    <div class="mb-3">
        <button class="btn btn-primary btn-sm" type="submit" id="btnguardar">{{ button_label|default('Guardar') }}</button>
        <button class="btn btn-danger btn-sm" type="submit" id="btncancelar" style="display:none">{{ button_label|default('Cancelar') }}</button>
    </div>
{{ form_end(form) }}
<script>
    const posicionContainer = document.getElementById('posicion-container');
        const valorContainer = document.getElementById('valor-container');
        const ingresosContainer = document.getElementById('ingresos-container');
        const gastosContainer = document.getElementById('gastos-container');
        const registroContainer = document.getElementById('registro-container');
        const volumen_ventasContainer = document.getElementById('volumen_ventas-container');
        const idDeterminante = {{ id_determinante }};
        
        if (idDeterminante == 4) {
            valorContainer.style.display = 'none';
            valorContainer.querySelector('input').value = '0';
        } else if (idDeterminante == 5) {
            posicionContainer.style.display = 'none';
            posicionContainer.querySelector('input').value = 'N/A';
            ingresosContainer.style.display = 'none';
            ingresosContainer.querySelector('input').value = '0';
            gastosContainer.style.display = 'none';
            gastosContainer.querySelector('input').value = '0';
            registroContainer.style.display = 'none';
            registroContainer.querySelector('input').value = '0';
            volumen_ventasContainer.style.display = 'none';
            volumen_ventasContainer.querySelector('input').value = '0';
        } else {
            ingresosContainer.style.display = 'none';
            ingresosContainer.querySelector('input').value = '0';
            gastosContainer.style.display = 'none';
            gastosContainer.querySelector('input').value = '0';
            registroContainer.style.display = 'none';
            registroContainer.querySelector('input').value = '0';
            volumen_ventasContainer.style.display = 'none';
            volumen_ventasContainer.querySelector('input').value = '0';    
        }


    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('formsavevalue').addEventListener('submit', function(event) {
            event.preventDefault(); // Evitar el envío del formulario por defecto

            var form = event.target;
            var formData = new FormData(form);
            // Mostrar el overlay de cargando
            document.getElementById('loading-overlay').style.display = 'block';
        
            fetch(form.action, {
                method: form.method,
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Ocultar el overlay de cargando
                document.getElementById('loading-overlay').style.display = 'none';
                if (data.success) {
                    Swal.fire(
                        '¡Registro Guardado!',
                        'El registro ha guardado exitosamente.',
                        'success'
                    ).then(function() {
                        // Recargar la página

                        
                        location.reload();
                    });
                } else {
                    Swal.fire(
                        'Error',
                        'Error al guardar el formulario: ' + data.errors.join(', '),
                        'error'
                    );
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al guardar el formulario.');
            });
        });
    });
</script>