{# {{ form_start(form) }}
    {{ form_widget(form) }}
    <button class="btn">{{ button_label|default('Save') }}</button>
{{ form_end(form) }} #}


{{ form_start(form) }}
    <div class="row">
        <div class="form-group col-md-12">
            <div class="mb-3">
                <label for="id_mercado_comparador_fk" class="custom-label-class required">Mercado Comparador</label>
                {{ form_widget(form.id_mercado_comparador_fk, {'attr': {'class': 'form-select', 'required': 'required'}}) }}
                {{ form_errors(form.id_mercado_comparador_fk) }}
            </div>
            <div class="mb-3">
                <label for="id_grupo_percepciones_fk" class="custom-label-class required">Grupo Percepciones</label>
                {{ form_widget(form.id_grupo_percepciones_fk, {'attr': {'class': 'form-select', 'required': 'required'}}) }}
                {{ form_errors(form.id_grupo_percepciones_fk) }}
            </div>
            <div class="mb-3">
                <label for="tipo_comprador" class="custom-label-class required">Tipo de Comprador</label>
                <div class="radio-group">
                    {{ form_widget(form.tipo_comprador, {'attr': {'required': 'required'}}) }}
                </div>
                {{ form_errors(form.tipo_comprador) }}
            </div>
            <div class="mb-3">
                <label for="comentarios" class="custom-label-class required">Comentarios</label>
                {{ form_widget(form.comentarios, {'attr': {'class': 'form-control', 'placeholder': 'Comentarios', 'required': 'required'}}) }}
                {{ form_errors(form.comentarios) }}
            </div>
            {% if form.vars.value.id is not null %}
            <!--Solo se muestra al Editar-->
            <div class="mb-3">
                <input type="hidden" id="removed-formulas" name="removed_formulas" value="">
                <label class="custom-label-class">Formulas</label>
                <table class="table" id="formulas-table">
                    <thead>
                        <tr>
                            <th>De</th>
                            <th>Hasta</th>
                            <th>Constante A</th>
                            {% if form.vars.value.tipoComprador ==2 or form.vars.value.tipoComprador ==3 %}
                                <th>Constante B</th>
                                {% if form.vars.value.tipoComprador ==3 %}
                                    <th>Constante C</th>
                                {% endif %}
                            {% endif %}
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="formulas-container">
                        {% for formula in formulas %}
                            <tr id="formula-{{ loop.index }}">
                                <td>
                                    <input type="text" id="formula-{{ loop.index }}-inputde" name="formulas[{{ loop.index }}][inputde]" class="form-control formula-input" value="{{ formula.de }}" required>
                                </td>
                                <td>
                                    <input type="text" id="formula-{{ loop.index }}-inputhasta" name="formulas[{{ loop.index }}][inputhasta]" class="form-control formula-input" value="{{ formula.hasta }}" required>
                                </td>
                                <td>
                                    <input type="text" id="formula-{{ loop.index }}-inputconstantea" name="formulas[{{ loop.index }}][inputconstantea]" class="form-control formula-input" value="{{ formula.constante_a }}" required>
                                </td>
                                {%  if form.vars.value.tipoComprador ==2 or form.vars.value.tipoComprador ==3 %}
                                    <td>
                                        <input type="text" id="formula-{{ loop.index }}-inputconstanteb" name="formulas[{{ loop.index }}][inputconstanteb]" class="form-control formula-input" value="{{ formula.constante_b }}" required>
                                    </td>
                                    {%  if form.vars.value.tipoComprador ==3 %}
                                        <td>
                                            <input type="text" id="formula-{{ loop.index }}-inputconstantec" name="formulas[{{ loop.index }}][inputconstantec]" class="form-control formula-input" value="{{ formula.constante_c }}" required>
                                        </td>
                                    {% endif %}
                                {% endif %}    
                                <td>
                                    <input type="hidden" id="formula-{{ loop.index }}-inputid" value="{{ formula.id_mercado_grupo_formula }}" name="formulas[{{ loop.index }}][inputid]">
                                    <button type="button" class="btn btn-danger btn-sm remove-formula" data-index="{{ loop.index }}" onclick="eliminarformula({{ loop.index }})">Eliminar</button>
                                </td>
                            </tr>
                        {% endfor %}
                        <!-- Aquí se agregarán los formularios dinámicos -->
                    </tbody>
                </table>
                <button type="button" class="btn btn-success btn-sm" id="add-formula">Agregar Fórmula</button>
            </div>
            {% endif %}
            <br>
            <div class="mb-3">
                <button class="btn btn-primary btn-sm" type="submit">{{ button_label|default('Guardar') }}</button>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            //Valida que el objeto formulas exista y tenga al menos un elemento sino asigna un 0
            let formulaIndex = {{ formulas is defined and formulas|length > 0 ? formulas|length : 0 }};
            let removedFormulas = [];
            $('#add-formula').click(function() {
                formulaIndex++;
                const formulaHtml = `
                    <tr id="formula-${formulaIndex}">
                        <td>
                            <input type="text" id="formula-${formulaIndex}-inputde" name="formulas[${formulaIndex}][inputde]" class="form-control formula-input-numeric" value="0" required>
                        </td>
                        <td>
                            <input type="text" id="formula-${formulaIndex}-inputhasta" name="formulas[${formulaIndex}][inputhasta]" class="form-control formula-input-numeric" value="0" required>
                        </td>
                        <td>
                            <input type="text" id="formula-${formulaIndex}-inputconstantea" name="formulas[${formulaIndex}][inputconstantea]" class="form-control formula-input" value="0.000000" required>
                        </td>
                        {% if form.vars.value.tipoComprador ==2 or form.vars.value.tipoComprador ==3 %}
                            <td>
                                <input type="text" id="formula-${formulaIndex}-inputconstanteb" name="formulas[${formulaIndex}][inputconstanteb]" class="form-control formula-input" value="0.000000" required>
                            </td>
                            {% if form.vars.value.tipoComprador ==3 %}
                                <td>
                                    <input type="text" id="formula-${formulaIndex}-inputconstantec" name="formulas[${formulaIndex}][inputconstantec]" class="form-control formula-input" value="0.000000" required>
                                </td>
                            {% endif %}    
                        {% endif %}    
                        <td>
                            <input type="hidden" id="formula-${formulaIndex}-inputid" name="formulas[${formulaIndex}][inputid]">
                            <button type="button" class="btn btn-danger btn-sm remove-formula" data-index="${formulaIndex}" onclick="eliminarformula(${formulaIndex})">Eliminar</button>
                        </td>
                    </tr>
                `;
                $('#formulas-container').append(formulaHtml);
            });
            
            $(document).on('input', '.formula-input-numeric', function() {
                this.value = this.value.replace(/[^0-9]/g,"");
            });

            $(document).on('input', '.formula-input', function() {
                this.value = this.value.replace(/[^0-9\-\.,]/g, '');
            });

            eliminarformula=function(index){
                const inputidValue = $(`#formula-${index}-inputid`).val();
                if(inputidValue !== '' && inputidValue !== null && inputidValue !== undefined){
                    removedFormulas.push(inputidValue);
                }
                $(`#formula-${index}`).remove();
                console.log(removedFormulas);
            }

            //Envia los eliminados
            $('form').submit(function() {
                $('#removed-formulas').val(JSON.stringify(removedFormulas));
            });
        });
    </script>


{{ form_end(form) }}