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

{% block body %}
    {% set pendingSections = fsc.sections | length %}
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-8 col-md-6 col-lg-5 col-xl-4">
                <div class="text-center mb-4 {% if fsc.query == '' %}mt-4 mt-xl-5 pt-xl-5{% else %}mt-4{% endif %}">
                    <h1 class="mb-2 {% if fsc.query != '' %}h3{% endif %}">
                        <i class="fa-solid fa-search fa-fw text-primary"></i>
                        {{ trans('mega-search') }}
                    </h1>
                    <p class="text-muted">{{ trans('search-in-all-pages') }}</p>
                </div>
                <form action="{{ fsc.url() }}" method="post" class="form" onsubmit="animateSpinner('add')">
                    <div class="mb-4">
                        <div class="input-group input-group-lg shadow-sm">
                            <input type="text" name="query" value="{{ fsc.query }}" class="form-control"
                                   placeholder="{{ trans('search') }}..." autocomplete="off" autofocus/>
                            <button type="submit" class="btn btn-spin-action btn-primary">
                                <i class="fa-solid fa-search" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {% if fsc.query != '' and pendingSections > 0 %}
            <div class="row justify-content-center mt-3" id="mega-search-status-row">
                <div class="col-sm-10 col-md-8 col-lg-7 col-xl-6">
                    <div class="alert alert-light border shadow-sm mb-3" id="mega-search-progress" data-total="{{ pendingSections }}">
                        <div class="d-flex align-items-center gap-3">
                            <div class="spinner-border spinner-border-sm text-primary flex-shrink-0" id="mega-search-progress-spinner" role="status" aria-hidden="true"></div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong class="mb-0">{{ trans('searching') }}...</strong>
                                    <small class="text-muted" id="mega-search-progress-counter">0 / {{ pendingSections }}</small>
                                </div>
                                <div class="progress mt-2" role="progressbar" aria-label="{{ trans('searching') }}"
                                     aria-valuemin="0" aria-valuemax="{{ pendingSections }}" aria-valuenow="0">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                                         id="mega-search-progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if fsc.query != '' and fsc.results is empty %}
            <div class="row justify-content-center mt-3{{ pendingSections > 0 ? ' d-none' : '' }}" id="no-data-msg">
                <div class="col-sm-8 col-md-6 col-lg-5 col-xl-4">
                    <div class="alert alert-info text-center">
                        <i class="fa-solid fa-info-circle fa-fw"></i>
                        {{ trans('no-results-found') }}
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="row g-2">
            <div class="col-12 col-lg-auto mt-lg-2">
                <div class="nav nav-pills flex-row flex-lg-column overflow-x-auto" id="v-pills-tab" role="tablist" style="white-space: nowrap;">
                    {% for key, result in fsc.results %}
                        {% set active = (loop.index == 1) ? 'nav-link active text-nowrap' : 'nav-link text-nowrap' %}
                        <a class="{{ active }}" data-bs-toggle="pill" href="#v-pills-{{ key }}" role="tab"
                           aria-controls="v-pills-{{ key }}" aria-expanded="true">
                            <i class="{{ result.icon }} fa-fw me-1 d-none d-lg-inline-block"></i>
                            <span class="d-inline d-lg-inline">{{ trans(result.title) }}</span>
                            <span class="badge bg-secondary ms-1 mt-lg-1 mb-lg-1 float-lg-end">{{ result.results | length }}</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
            <div class="col-12 col-lg" style="min-width: 0;">
                <div class="tab-content" id="v-pills-tabContent">
                    {% for key, result in fsc.results %}
                        {% set active = (loop.index == 1) ? ' show active' : '' %}
                        <div class="tab-pane fade{{ active }}" id="v-pills-{{ key }}" role="tabpanel"
                             aria-labelledby="v-pills-{{ key }}-tab">
                            <div class="card shadow">
                                {{ _self.showSearchResults(result) }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% macro showSearchResults(result) %}
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0">
            <thead>
            <tr>
                {% for key, column in result.columns %}
                    {% if key == 'icon' %}
                        <th></th>
                    {% else %}
                        <th>{{ trans(column) | capitalize }}</th>
                    {% endif %}
                {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for line in result.results %}
                {% set link = line.link ? line.link : '#' %}
                <tr class="clickableRow" data-href="{{ link }}" data-bs-target="_blank">
                    {% for key, column in result.columns %}
                        {% if key == 'icon' %}
                            <td class="text-center">
                                <i class="{{ line[key] }} fa-fw"></i>
                            </td>
                        {% elseif key != 'link' %}
                            <td>{{ line[key] }}</td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endmacro %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('Core/Assets/JS/MegaSearch.js') }}?v=3"></script>
    {% if fsc.sections %}
        <script>
            $(document).ready(function () {
                searchOnSections({{ fsc.sections | json_encode | raw }});
            });
        </script>
    {% endif %}
{% endblock %}
