{% extends 'base.html.twig' %}

{% block title %}Edit EshDeterminantes{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card mb-4">
                <div class="card-header py-3">
                    <h5 class="mb-0">Editar Determinante {{ tipo == 'A' ? 'Administrativo' : 'O' ? 'Operativo' }}</h5>
                </div>
                <div class="card-body">
                    <!-- Tabs navs -->
                    <ul class="nav nav-tabs" id="TabEditar" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="tab-editar" onclick="localstoragetab('TabEditar')" data-bs-toggle="tab" href="#form" role="tab" aria-controls="form" aria-selected="true">Editar</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="tab-valores" onclick="localstoragetab('TabValores')" data-bs-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">Valores</a>
                        </li>
                    </ul>
                    <!-- Tabs content -->
                    <div class="tab-content" id="TabValores" >
                        <div class="tab-pane fade show active" id="form" role="tabpanel" aria-labelledby="tab-editar">
                            {{ include('catalogos/sh_value/estandar/_form.html.twig', {'id_determinante': id}, {'button_label': 'Guardar', 'class_button': 'btn-success'}) }}
                        </div>
                        <div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="tab-valores">
                            {{ render(path('app_catalogos_esh_tabla_valores_index', {'id_determinante': id})) }}
                        </div>
                    </div>
                    <a href="{{ path('app_catalogos_sh_value_estandar_index', {'tipo': tipo}) }}" class="btn btn-secondary btn-sm">Regresar</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        if(localStorage.getItem('activeTab') == 'TabValores'){
            document.getElementById('tab-valores').click();
        }
        
        
        function localstoragetab(nametab){
            localStorage.setItem('activeTab', nametab);
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar los tabs de Bootstrap
            var triggerTabList = [].slice.call(document.querySelectorAll('#TabEditar a'))
            triggerTabList.forEach(function (triggerEl) {
                var tabTrigger = new bootstrap.Tab(triggerEl)

                triggerEl.addEventListener('click', function (event) {
                    event.preventDefault()
                    tabTrigger.show()
                })
            })
        });
    </script>
{% endblock %}