{#
/**
 * This file is part of FacturaScripts
 * Copyright (C) 2017-2025 Carlos Garcia Gomez <carlos@facturascripts.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 */
#}
{% extends "Master/PanelController.html.twig" %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                {# -- First tab -- #}
                {% set firstView = fsc.views | first %}
                {% set firstViewName = firstView.getViewName() %}
                {% do fsc.setCurrentView(firstViewName) %}
                {{ include(firstView.template) }}
            </div>
        </div>
        {% if fsc.views | length == 2 %}
            {# -- Second tab -- #}
            {% set secondView = fsc.views | slice(1, 1) | first %}
            {% if secondView.settings.active %}
                <div class="row">
                    <div class="col">
                        <h3 class="h4 mb-2">
                            <i class="{{ secondView.icon }} me-2" aria-hidden="true"></i> {{ secondView.title }}
                            {% if secondView.count > 0 %}
                                <span class="badge bg-secondary">{{ number(secondView.count, 0) }}</span>
                            {% endif %}
                        </h3>
                    </div>
                </div>
            {% endif %}
        {% elseif fsc.views | length > 2 %}
            {# -- More than two tabs: show pills -- #}
            <div class="row">
                <div class="col">
                    <div class="nav-pills-wrapper d-print-none">
                        <ul class="nav nav-pills nav-pills-scroll mb-3" id="mainTabs" role="tablist">
                            {% set contActiveTab = 0 %}
                            {% for viewName, view in fsc.views | slice(1, fsc.views | length) %}
                                {% if view.settings.active %}
                                    {% set contActiveTab = contActiveTab + 1 %}
                                    <li class="nav-item">
                                        {% set active = (viewName == fsc.active) or (fsc.active == firstViewName and contActiveTab == 1) ? ' active' : '' %}
                                        <a href="#{{ viewName }}" class="nav-link{{ active }}{{ disable }}"
                                           data-bs-toggle="tab" role="tab" aria-controls="{{ viewName }}">
                                            <i class="{{ view.icon }} fa-fw me-1 d-none d-sm-inline"
                                               aria-hidden="true"></i>
                                            <span>{{ view.title }}</span>
                                            {% if view.count > 0 %}
                                                <span class="badge bg-secondary">{{ number(view.count, 0) }}</span>
                                            {% endif %}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="tab-content" id="mainTabsContent">
            {% set contActiveTab = 0 %}
            {% for viewName, view in fsc.views | slice(1, fsc.views | length) %}
                {% if view.settings.active %}
                    {% set contActiveTab = contActiveTab + 1 %}
                    {% set active = (viewName == fsc.active) or (fsc.active == firstViewName and contActiveTab == 1) ? ' show active' : '' %}
                    <div class="tab-pane{{ active }}" id="{{ viewName }}" role="tabpanel">
                        {% do fsc.setCurrentView(viewName) %}
                        {{ include(view.template) }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block css %}
    {{ parent() }}
    <style>
        /* Scroll horizontal para pestañas pills en móviles */
        @media (max-width: 767px) {
            .nav-pills-wrapper {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .nav-pills-scroll {
                flex-wrap: nowrap;
                white-space: nowrap;
                min-width: min-content;
            }

            .nav-pills-scroll .nav-item {
                flex-shrink: 0;
            }

            .nav-pills-scroll .nav-link {
                white-space: nowrap;
            }

            /* Indicador visual de scroll */
            .nav-pills-wrapper::-webkit-scrollbar {
                height: 4px;
            }

            .nav-pills-wrapper::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            .nav-pills-wrapper::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: 2px;
            }

            .nav-pills-wrapper::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
        }

        /* En pantallas grandes, comportamiento normal */
        @media (min-width: 768px) {
            .nav-pills-wrapper {
                overflow: visible;
            }

            .nav-pills-scroll {
                flex-wrap: wrap;
            }
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            // Función para desplazar la pestaña activa a la vista
            function scrollActivePillIntoView() {
                if (window.innerWidth <= 767) {
                    var activePill = $('.nav-pills-scroll .nav-link.active');
                    var wrapper = $('.nav-pills-wrapper');
                    if (activePill.length && wrapper.length) {
                        var pillLeft = activePill.parent().position().left;
                        var pillWidth = activePill.parent().outerWidth();
                        var wrapperWidth = wrapper.width();
                        var scrollLeft = wrapper.scrollLeft();

                        // Centrar la pestaña activa si es posible
                        var targetScroll = pillLeft + scrollLeft - (wrapperWidth / 2) + (pillWidth / 2);
                        wrapper.animate({scrollLeft: targetScroll}, 300);
                    }
                }
            }

            // Desplazar la pestaña activa al cargar la página
            scrollActivePillIntoView();

            // Desplazar cuando se cambia de pestaña
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                scrollActivePillIntoView();
            });
        });
    </script>
{% endblock %}
