{#
/**
 * 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/MenuBghTemplate.html.twig" %}

{% block bodyHeaderOptions %}
    {{ parent() }}
    {% set pageData = fsc.getPageData() %}
    {% set firstView = fsc.views | first %}
    <div class="container-fluid mb-3 d-print-none">
        <div class="row">
            <div class="col-md-7">
                {# -- Page data for small devices -- #}
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb d-md-none">
                        <li class="breadcrumb-item">
                            <a href="#">{{ trans(pageData.menu) }}</a>
                        </li>
                        {% if pageData.submenu %}
                            <li class="breadcrumb-item">
                                <a href="#">{{ trans(pageData.submenu) }}</a>
                            </li>
                        {% endif %}
                        <li class="breadcrumb-item active" aria-current="page">{{ fsc.title }}</li>
                    </ol>
                </nav>
                <div class="btn-group">
                    <a class="btn btn-sm btn-secondary" href="{{ fsc.url() }}"
                       title="{{ trans('refresh') }}">
                        <i class="fa-solid fa-redo" aria-hidden="true"></i>
                    </a>
                    {% if pageData.name == fsc.user.homepage %}
                        <a class="btn btn-sm btn-secondary active" href="{{ fsc.url() }}?defaultPage=FALSE"
                           title="{{ trans('marked-as-homepage') }}">
                            <i class="fa-solid fa-bookmark" aria-hidden="true"></i>
                        </a>
                    {% else %}
                        <a class="btn btn-sm btn-secondary" href="{{ fsc.url() }}?defaultPage=TRUE"
                           title="{{ trans('mark-as-homepage') }}">
                            <i class="fa-regular fa-bookmark" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                </div>
                {# -- Options button -- #}
                {% if firstView.settings.btnOptions %}
                    <div class="btn-group">
                        <div class="dropdown">
                            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button"
                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa-solid fa-wrench fa-fw me-1" aria-hidden="true"></i> {{ trans('options') }}
                            </button>
                            <div class="dropdown-menu">
                                <h6 class="dropdown-header">{{ trans('options-button-header') }}</h6>
                                {% for viewName, view in fsc.views %}
                                    <a class="dropdown-item"
                                       href="EditPageOption?code={{ viewName }}&url={{ view.model.url() | url_encode }}">
                                        <i class="{{ view.icon }} fa-fw me-1" aria-hidden="true"></i> {{ view.title }}
                                        {% if view.settings.customized %}
                                            <i class="fa-solid fa-user-pen ms-2" title="{{ trans('personalized') }}"></i>
                                        {% endif %}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="col-md-5 text-end">
                <h1 class="h4 mb-0 d-none d-md-inline-block">
                    {{ fsc.title }}<i class="{{ pageData.icon }} ms-3" aria-hidden="true"></i>
                </h1>
            </div>
        </div>
    </div>
    {# -- Tabs -- #}
    <div class="nav-tabs-wrapper d-print-none">
        <ul class="nav nav-tabs nav-tabs-scroll" id="mainTabs" role="tablist">
            {% for viewName, view in fsc.views %}
                <li class="nav-item">
                    {% set active = (viewName == fsc.active) ? ' active' : '' %}
                    <a href="#{{ viewName }}" class="nav-link{{ active }}" data-bs-toggle="tab" role="tab"
                       aria-controls="{{ viewName }}" title="{{ view.title }}">
                        <i class="{{ view.icon }} fa-fw me-1 d-none d-sm-inline" aria-hidden="true"></i>
                        {% if view.title | length > 15 %}
                            <span>{{ view.title | slice(0, 15) }}...</span>
                        {% else %}
                            <span>{{ view.title }}</span>
                        {% endif %}
                        {% if view.count > 0 %}
                            <span class="badge bg-secondary">{{ number(view.count, 0) }}</span>
                        {% endif %}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block body %}
    {{ parent() }}
    {# -- Tab content -- #}
    <div class="tab-content pt-3" id="mainTabsContent">
        {% for viewName, view in fsc.views %}
            {% set active = (viewName == fsc.active) ? ' show active' : '' %}
            <div class="tab-pane fade{{ active }}" id="{{ viewName }}" role="tabpanel">
                {% do fsc.setCurrentView(viewName) %}
                {{ include(view.template) }}
            </div>
        {% endfor %}
    </div>
{% endblock %}

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

            .nav-tabs-scroll {
                flex-wrap: nowrap;
                white-space: nowrap;
                border-bottom: 1px solid #dee2e6;
                min-width: min-content;
            }

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

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

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

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

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

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

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

            .nav-tabs-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 scrollActiveTabIntoView() {
                if (window.innerWidth <= 767) {
                    var activeTab = $('.nav-tabs-scroll .nav-link.active');
                    var wrapper = $('.nav-tabs-wrapper');
                    if (activeTab.length && wrapper.length) {
                        var tabLeft = activeTab.parent().position().left;
                        var tabWidth = activeTab.parent().outerWidth();
                        var wrapperWidth = wrapper.width();
                        var scrollLeft = wrapper.scrollLeft();

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

            if (document.location.hash) {
                $(".nav-tabs a[href=\\" + document.location.hash + "]").tab('show');
            }

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

            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) == false) {
                $("input[name='query']:visible").focus();
            }
            $('.nav-tabs a').click(function (e) {
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            });
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                // Desplazar la pestaña activa cuando se cambia de pestaña
                scrollActiveTabIntoView();

                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) == false) {
                    $("input[name='query']:visible").focus();
                }
            });
        });
    </script>
{% endblock %}