{#
 # -------------------------------------------------------------------------
 # Order plugin for GLPI
 # -------------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of Order.
 #
 # Order is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation; either version 3 of the License, or
 # (at your option) any later version.
 #
 # Order 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 General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with Order. If not, see <http://www.gnu.org/licenses/>.
 # -------------------------------------------------------------------------
 # @copyright Copyright (C) 2009-2023 by Order plugin team.
 # @copyright 2015-2025 Teclib' and contributors.
 # @copyright 2003-2014 by the INDEPNET Development Team.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 # @license   GPLv3 https://www.gnu.org/licenses/gpl-3.0.html
 # @link      https://github.com/pluginsGLPI/order
 # -------------------------------------------------------------------------
 #}

{% set datatable_id = 'datatable_link_' ~ rand %}
{% set table_visible = table_visible|default(false) %}

{% if numref == 0 %}
    <table class='tab_cadre_fixe'>
        <tr>
            <th>{{ __("No item to take delivery of", "order") }}</th>
        </tr>
    </table>
{% else %}
    <table class="table mb-1">
        <thead>
            <tr>
                <th>{{ __('Assets') }}</th>
                <th>{{ __('Manufacturer') }}</th>
                <th>{{ __('Product reference', 'order') }}</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-light">
                <td>{{ reference_header_data.item_type_name }}</td>
                <td>{{ reference_header_data.manufacturer_name|raw }}</td>
                <td>{{ reference_header_data.reference_name|raw }} ({{ reference_header_data.item_count }})</td>
            </tr>
        </tbody>
    </table>

    {% if hide_and_show %}
        <button id="toggle-table-{{ datatable_id }}" class="btn btn-link btn-sm mb-2" type="button">
            {% if table_visible %}
                <i class="ti ti-sort-ascending"></i>
                <span>{{ __('Collapse all', 'order') }}</span>
            {% else %}
                <i class="ti ti-sort-descending"></i>
                <span>{{ __('Expand all', 'order') }}</span>
            {% endif %}
        </button>
        <input type="hidden" name="{{ countainer_name }}" value="true">
    {% endif %}

    {# Items Details Table (collapsible) #}
    {% if total_count < 1 %}
        <div name="{{ datatable_id }}" {% if not table_visible %}style="display: none;"{% endif %}>
            <div class="alert alert-info m-2">
                {{ __('No results found') }}
            </div>
        </div>
    {% else %}
        {% set total_cols = columns|length + (showmassiveactions ? 1 : 0) %}

        <div name="{{ datatable_id }}" class="table-responsive" {% if showmassiveactions %} id="{{ massiveactionparams['container'] }}" {% endif %} {% if not table_visible %}style="display: none;"{% endif %}>
            {% if showmassiveactions %}
                <div class="my-2 ms-2">
                    {% do call('Html::showMassiveActions', [massiveactionparams|default([])]) %}
                    <span style='margin-left: 10px;'>
                        {% do call(
                            'Dropdown::showNumber',
                            [
                                massive_select_params["name"]|default(''),
                                massive_select_params["params"]|default([])
                            ]
                        ) %}
                        <button type='button' class='btn btn-secondary btn-sm' onclick='selectNItems("mass{{ classname }}{{ rand }}", "dropdown_nb_items_to_check_top_{{ rand }}")'>
                            {{ __("Select") }}
                        </button>
                    </span>
                    <script>
                        function selectNItems(container_id, select_id) {
                            var selectElement = document.getElementById(select_id);
                            if (!selectElement) {
                                console.error("Select element not found:", select_id);
                                return;
                            }
                            var n = parseInt(selectElement.value);
                            if (isNaN(n) || n <= 0) {
                                console.error("Invalid number selected:", selectElement.value);
                                return;
                            }
                            var checked = 0;
                            var selector = "#" + container_id + " input[type='checkbox'][name^='item[PluginOrderLink]']";
                            var checkboxes = document.querySelectorAll(selector);
                            checkboxes.forEach(function(checkbox) {
                                checkbox.checked = false;
                            });
                            checkboxes.forEach(function(checkbox) {
                                if (checked < n) {
                                    checkbox.checked = true;
                                    checked++;
                                }
                            });
                        }
                    </script>
                </div>
            {% endif %}
            <table id="{{ datatable_id }}" class="table {{ table_class_style|default('table-hover table-sm') }} mb-1">
                <thead>
                    <tr>
                        {% if showmassiveactions %}
                            <th style="width: 30px;">
                                <div>
                                    <input class="form-check-input massive_action_checkbox" type="checkbox" id="checkall_{{ massiveactionparams['container'] }}"
                                        value="" aria-label="{{ __('Check all') }}"
                                        onclick="checkAsCheckboxes(this, '{{ massiveactionparams['container'] }}', '.massive_action_checkbox');" />
                                </div>
                            </th>
                        {% endif %}
                        {% for colkey, column in columns %}
                            {% set column_label = column is array ? column['label'] : column %}
                            {% set raw_header = column is array ? column['raw_header']|default(false) : false %}
                            {% set sort_icon = '' %}
                            {% set new_order = "ASC" %} {# Default to ASC for the next click #}
                            {% if sort == colkey %}
                                {% set sort_icon = order == 'ASC' ? 'ti ti-sort-ascending' : (order == 'DESC' ? 'ti ti-sort-descending' : '') %}
                                {% set new_order = (order == 'ASC' ? 'DESC' : 'ASC') %}
                            {% endif %}

                            {% set sort_href = "javascript:reloadTab('start=" ~ start ~ "&" ~ countainer_name ~ "sort=" ~ colkey ~ "&" ~ countainer_name ~ "order=" ~ new_order ~ "&" ~ countainer_name ~ "visible=" ~ true ~ "');" %}

                            <th>
                                {% if not nosort and not (column is array and column['nosort'] is defined) %}
                                    <a href="{{ sort_href }}">
                                    <i class="{{ sort_icon }}"></i>
                                {% endif %}
                                <span>{{ raw_header ? column_label|raw : column_label }}</span>
                                {% if not nosort and not (column is array and column['nosort'] is defined) %}
                                    </a>
                                {% endif %}
                            </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% if entries|length > 0 %}
                        {% for entry in entries %}
                            <tr class="{{ row_class|default('') }} {{ entry['row_class']|default('') }}" data-itemtype="{{ entry['itemtype'] }}" data-id="{{ entry['id'] }}">
                                {% set row_massiveactions = entry['showmassiveactions']|default(showmassiveactions) %}
                                {% if row_massiveactions %}
                                    <td style="width: 10px">
                                        {% if entry['skip_ma'] is not defined or entry['skip_ma'] == false %}
                                            <input class="form-check-input massive_action_checkbox" type="checkbox" data-glpicore-ma-tags="common"
                                                value="1" aria-label="{{ __("Select item") }}"
                                                name="item[{{ entry['itemtype'] }}][{{ entry['id'] }}]" />
                                        {% endif %}
                                    </td>
                                {% endif %}
                                {% for colkey, colum in columns %}
                                    <td>
                                        {% if colkey in entry|keys %}
                                            {% set formatter = formatters[colkey]|default(null) %}
                                            {% if formatter == "raw_html" %}
                                                {{ entry[colkey]|raw }}
                                            {% else %}
                                                {{ entry[colkey] }}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="{{ total_cols }}">
                                <div class="alert alert-info">
                                    {{ __('No results found') }}
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
                {% if footers is defined and footers|length > 0 %}
                    <tfoot class="{{ footer_class|default('') }}">
                        {% for footer in footers %}
                            <tr>
                                {% if showmassiveactions %}
                                    <td></td>
                                {% endif %}
                                {% for footer_col, footerval in footer %}
                                    <td>{{ footerval|nl2br }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tfoot>
                {% endif %}
            </table>
            {% if showmassiveactions and entries|length > 10 %} {# Show actions at bottom if many items #}
                <div class="my-2 ms-2">
                    {% do call('Html::showMassiveActions', [massiveactionparams|default([])]) %}
                </div>
            {% endif %}

            {% if not nopager and total_count > 0 %}
                <div class="d-flex justify-content-between align-items-center my-2">
                    <div>
                        {{ __('Showing %s to %s of %s entries', 'order')|format(
                            start + 1,
                            (start + displayed_count > total_count ? total_count : start + displayed_count),
                            total_count
                        ) }}
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="d-inline-flex align-items-center me-4">
                            {{ __('Entries to show:', 'order') }}
                            {% include 'components/dropdown/limit.html.twig' with {
                                'is_tab': true,
                                'right': true,
                                'additional_params': 'id=' ~ ID ~ '&' ~ countainer_name ~ 'sort=' ~ sort ~ '&' ~ countainer_name ~ 'order=' ~ order ~ '&' ~ countainer_name ~ 'visible=1'
                            } %}
                        </div>

                        {% set nb_pages = (total_count / limit)|round(0, 'ceil') %}
                        {% if nb_pages > 1 %}
                            <ul class="pagination mb-0">
                                <li class="page-item {{ start == 0 ? 'disabled' : '' }}">
                                    <a class="page-link" href="javascript:reloadTab('start=0&{{ countainer_name }}sort={{ sort }}&{{ countainer_name }}order={{ order }}&{{ countainer_name }}visible=1');">
                                        <i class="ti ti-chevrons-left"></i>
                                    </a>
                                </li>
                                <li class="page-item {{ start == 0 ? 'disabled' : '' }}">
                                    <a class="page-link" href="javascript:reloadTab('start={{ start - limit < 0 ? 0 : start - limit }}&{{ countainer_name }}sort={{ sort }}&{{ countainer_name }}order={{ order }}&{{ countainer_name }}visible=1');">
                                        <i class="ti ti-chevron-left"></i>
                                    </a>
                                </li>

                                {% set current_page = (start / limit)|round(0, 'floor') + 1 %}
                                {% set start_page = max(1, current_page - 2) %}
                                {% set end_page = min(nb_pages, current_page + 2) %}

                                {% for i in start_page..end_page %}
                                    <li class="page-item {{ current_page == i ? 'active' : '' }}">
                                        <a class="page-link" href="javascript:reloadTab('start={{ (i - 1) * limit }}&{{ countainer_name }}sort={{ sort }}&{{ countainer_name }}order={{ order }}&{{ countainer_name }}visible=1');">
                                            {{ i }}
                                        </a>
                                    </li>
                                {% endfor %}

                                <li class="page-item {{ start + limit >= total_count ? 'disabled' : '' }}">
                                    <a class="page-link" href="javascript:reloadTab('start={{ start + limit >= total_count ? start : start + limit }}&{{ countainer_name }}sort={{ sort }}&{{ countainer_name }}order={{ order }}&{{ countainer_name }}visible=1');">
                                        <i class="ti ti-chevron-right"></i>
                                    </a>
                                </li>
                                <li class="page-item {{ start + limit >= total_count ? 'disabled' : '' }}">
                                    <a class="page-link" href="javascript:reloadTab('start={{ ((nb_pages - 1) * limit)|round(0, 'floor') }}&{{ countainer_name }}sort={{ sort }}&{{ countainer_name }}order={{ order }}&{{ countainer_name }}visible=1');">
                                        <i class="ti ti-chevrons-right"></i>
                                    </a>
                                </li>
                            </ul>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

        <script type="text/javascript">
        $(function() {
            $('.filter-select-multiple').select2();
        });
        </script>
    {% endif %}

    {% if hide_and_show %}
        <script>
            $(function() {
                // Toggle button functionality
                $('#toggle-table-{{ datatable_id }}').on('click', function() {
                    const div_table = $('[name="{{ datatable_id }}"]');
                    const icon = $(this).find('i');
                    const textSpan = icon.next('span');
                    const countainer_name = $('#{{ countainer_name }}');
                    let isVisible = !div_table.is(':hidden');

                    // Toggle visibility
                    if (!isVisible) {
                        div_table.show();
                        icon.removeClass('ti-sort-descending').addClass('ti-sort-ascending');
                        textSpan.text('{{ __("Collapse all", "order") }}');
                        countainer_name.val('true');
                        isVisible = true;
                    } else {
                        div_table.hide();
                        icon.removeClass('ti-sort-ascending').addClass('ti-sort-descending');
                        textSpan.text('{{ __("Expand all", "order") }}');
                        countainer_name.val('false');
                        isVisible = false;
                    }
                    // Update all reloadTab links to reflect the new visibility state
                    $('a[href^="javascript:reloadTab("]').each(function() {
                        let href = $(this).attr('href');
                        let params = href.substring(href.indexOf("'") + 1, href.lastIndexOf("'"));
                        // Parse parameters
                        let paramsObj = {};
                        params.split('&').forEach(function(param) {
                            let [key, value] = param.split('=');
                            paramsObj[key] = value;
                        });
                        // Update visible parameter
                        paramsObj['{{ countainer_name }}visible'] = isVisible ? '1' : '0';
                        // Reconstruct parameters string
                        let newParams = Object.entries(paramsObj).map(([key, value]) => `${key}=${value}`).join('&');
                        // Update href
                        let newHref = `javascript:reloadTab('${newParams}');`;
                        $(this).attr('href', newHref);
                    });
                });
            });
        </script>
    {% endif %}
{% endif %}