{% extends "Config/settings_menu.html.twig" %}
{% trans_default_domain 'config' %}

{% block activeTab %}

    <div class="pad tab-pane active" id="tab_1-2">
        <div class="row">
            <div class="col-md-12">

                {{ form_start(form, {'action': path('transporte_settings')}) }}
                <div class="row">

                    <div class="col-md-6 clearfix">
                        <div class="form-group">
                            {{ form_label(form.tipoTransportista) }}
                            <div class="input-group">
                                {{ form_widget(form.tipoTransportista) }}
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-3">
                        {{ form_row(form.ptoemisionsocio) }}
                    </div>
                    <div class="col-md-3">
                        {{ form_row(form.rucsocio) }}
                    </div>
                    <div class="col-md-3">
                        {{ form_row(form.tpcontribuyentesocio) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9">
                        {{ form_row(form.nombresocio) }}
                    </div>
                </div>
                <br>

                <table id="invoice-like-items" class="table table-condensed table-striped align-middle">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Placa</th>
                    </tr>
                    </thead>
                    <tbody data-prototype="{{ include('Config/placa.html.twig', { 'form': form.placas.vars.prototype })|e }}">
                    {% for item in form.placas %}
                        {{ include('Config/placa.html.twig', { 'form': item, 'entity': item.vars.value}) }}
                    {% endfor %}

                    {# TODO: Action buttons: add/remove items, taxes, sort... #}
                    </tbody>
                </table>

                <div class="row totals">
                    <div class="col-md-6">

                        <button type="button" id="invoice-like-add-item" class="btn-sm btn-primary"><span
                                    class="glyphicon glyphicon-plus glyphicon-white"></span>&nbsp;Agregar Placa
                        </button>

                        <script type="text/javascript">
                            $('#invoice-like-add-item').on('click', function (event) {
                                event.preventDefault();
                                var collectionHolder = $('#invoice-like-items tbody');
                                var prototype = collectionHolder.attr('data-prototype');
                                form = prototype.replace(/__name__/g, collectionHolder.children().length);
                                collectionHolder.append(form);

                            });

                        </script>


                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="form-actions col-md-12">
                        <button type="submit" class="btn btn-success">
                            <span class="fa fa-save"></span>&nbsp;
                            {% trans %}form.save{% endtrans %}
                        </button>
                    </div>
                </div>
            </div>

            {{ form_widget(form) }}

            {{ form_end(form) }}

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tipoSelect = document.getElementById('transporte_settings_tipoTransportista');
            const form = document.getElementById('transporte_settingssv');
            const addPlacaBtn = document.getElementById('invoice-like-add-item');
            const guardarBtn = form.querySelector('.btn-success');

            const requiredIds = [
                'transporte_settings_ptoemisionsocio',
                'transporte_settings_rucsocio',
                'transporte_settings_tpcontribuyentesocio',
                'transporte_settings_nombresocio',
                'transporte_settings_placas_0_name'
            ];

            let previousValue = tipoSelect.value;
            let initialized = false;

            function toggleCampos(isOperadora, mostrarConfirm = true, msgtipo) {
                const inputs = form.querySelectorAll('input, select, textarea, button');

                if (isOperadora) {
                    if (mostrarConfirm) {
                        const confirmed = confirm("Al seleccionar "+msgtipo+", todos los valores del formulario serán eliminados y los campos serán deshabilitados. ¿Desea continuar?");
                        if (!confirmed) {
                            tipoSelect.value = previousValue;
                            return;
                        }
                    }

                    inputs.forEach(input => {
                        // Siempre mantener habilitado el select principal y el botón Guardar
                        if (input.id === 'transporte_settings_tipoTransportista' || input === guardarBtn) return;

                        input.removeAttribute('required');
                        input.disabled = true;

                        if (mostrarConfirm) {
                            if (input.type === 'checkbox' || input.type === 'radio') {
                                input.checked = false;
                            } else if (input.tagName.toLowerCase() === 'select') {
                                input.selectedIndex = 0;
                            } else if (input.type !== 'hidden') {
                                input.value = '';
                            }
                        }
                    });

                    if (addPlacaBtn) addPlacaBtn.disabled = true;

                } else {
                    inputs.forEach(input => {
                        if (input.id === 'transporte_settings_tipoTransportista' || input === guardarBtn) return;
                        input.disabled = false;
                        if (requiredIds.includes(input.id)) {
                            input.setAttribute('required', 'required');
                        }
                    });

                    if (addPlacaBtn) addPlacaBtn.disabled = false;
                }

                previousValue = tipoSelect.value;
            }

            tipoSelect.addEventListener('change', function () {
                if (!initialized) {
                    initialized = true;
                }

                let isOperadora = false;
                let mostrarMsg = false;
                if(this.value === '1' || this.value === '3') {
                    isOperadora = true;
                    mostrarMsg = true;
                }
                else if(this.value === 'X') {
                    isOperadora = true;
                    mostrarMsg = false;
                }
                let msgTipo = this.options[this.selectedIndex].text;
                toggleCampos(isOperadora, mostrarMsg, msgTipo);
            });

            if (tipoSelect.value === '1' || tipoSelect.value === 'X' || tipoSelect.value === '3' ) {
                toggleCampos(true, false,'');
                initialized = true;
                previousValue = tipoSelect.value;
            }

            /*form.addEventListener('submit', function (e) {
                if (tipoSelect.value === 'X') {
                    e.preventDefault(); // Detener envío
                    alert("Debe seleccionar un tipo de transportista antes de guardar.");
                    tipoSelect.focus();
                }
            });*/
        });
    </script>


{% endblock %}