{{!
    This file is part of Moodle - https://moodle.org/

    Moodle 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.

    Moodle 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 Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_kopere_bi/dashboard-start

    Example context (json):
    {
      "categorys": [
        {
          "category_title": "Categoria 1",
          "editing": true,
          "category_id": "1",
          "pages": [
            {
              "page_id": "101",
              "page_title": "Relatório 1",
              "description": "Uma breve descrição do relatório 1.",
              "user_fullname": "Usuário 1",
              "is_user_fullname": true
            }
          ]
        }
      ]
    }
}}

{{#editing}}
    <div class="mb-3 d-flex justify-content-end gap-3">
        <a href="?classname=dashboard&method=edit_cat"
           class="btn btn-success">{{#str}}cat_new,local_kopere_bi{{/str}}</a>
        <a href="?classname=data_import&method=cat_upload"
           class="btn btn-success">{{#str}}cat_upload,local_kopere_bi{{/str}}</a>
    </div>
{{/editing}}

<div class="reports-home">
    <nav class="filters" aria-label="{{#str}}filters{{/str}}">
        <button class="chip" aria-pressed="true" data-filter="all">{{#str}}all{{/str}}</button>
        {{#categorys}}
            <button class="chip" aria-pressed="false"
                    data-filter="category-{{{category_id}}}">{{{category_title}}}</button>
        {{/categorys}}
    </nav>

    {{#categorys}}
        <section class="group"
                 data-group="category-{{{category_id}}}"
                 data-category_id="{{{category_id}}}">
            <h2 class="group__title">
                {{{category_title}}}
                {{#editing}}
                    <div class="buttons-move">
                        <span class="btn-move-up" style="display:none">
                            {{#pix}} icons/btn-move-up, local_kopere_bi {{/pix}}
                        </span>
                        <span class="btn-move-down" style="display:none">
                            {{#pix}} icons/btn-move-down, local_kopere_bi {{/pix}}
                        </span>

                        <a href="?classname=dashboard&method=edit&cat_id={{category_id}}"
                        class="btn btn-primary">{{#str}}page_new_cat,local_kopere_bi{{/str}}</a>
                        <a href="?classname=dashboard&method=edit_cat&cat_id={{category_id}}"
                        class="btn btn-success">{{#str}}cat_edit,local_kopere_bi{{/str}}</a>
                        <a href="?classname=dashboard&method=delete_cat&cat_id={{category_id}}"
                        class="btn btn-danger ml-2">{{#str}}cat_delete,local_kopere_bi{{/str}}</a>
                    </div>
                {{/editing}}
            </h2>
            <div class="grid">
                {{#pages}}
                    <article class="card" data-category="vendas">
                        <div class="card__icon" aria-hidden="true">
                            {{#pix}} icons/report, local_kopere_bi {{/pix}}
                        </div>
                        <div class="card__body">
                            <h3 class="card__title">{{{page_title}}}</h3>
                            <p class="card__desc">{{{description}}}</p>
                        </div>
                        <div class="card__actions">
                            <a class="btn btn-primary"
                               href="?classname=dashboard&method=preview&page_id={{page_id}}">
                            {{#str}}resourcedisplayopen{{/str}}
                            </a>
                        </div>
                    </article>
                {{/pages}}
            </div>
        </section>
    {{/categorys}}
</div>

{{#js}}
    //<script>
    require(["jquery", "core/ajax",], function ($, ajax) {
        $(".btn-move-up,.btn-move-down").show();
        $(".reports-home").each(clickIcons);

        function clickIcons(id, element) {
            var $element = $(element);
            $element.find(".btn-move-down").click(function () {
                $element.next().insertBefore($element);
                saveOrderCategories();
            });
            $element.find(".btn-move-up").click(function () {
                $element.prev().insertAfter($element);
                saveOrderCategories();
            });
        }

        function saveOrderCategories() {
            var itens = "";
            $(".dashboard-home").each(function () {
                itens += "," + $(this).attr("data-category_id");
            });

            ajax.call([{
                methodname: "local_kopere_bi_cat_sortorder",
                args: {
                    itens: itens
                }
            }])[0];
        }
    });

    // Filtro por categoria.
    const chips = document.querySelectorAll(".chip");
    const groups = document.querySelectorAll(".group");

    function applyCategoryFilter(filter, selectedChip) {
        chips.forEach(chip => {
            chip.setAttribute("aria-pressed", chip === selectedChip ? "true" : "false");
        });

        groups.forEach(group => {
            if (filter === "all") {
                group.classList.remove("hidden-group");
            } else {
                group.classList.toggle("hidden-group", group.dataset.group !== filter);
            }
        });
    }

    chips.forEach(chip => chip.addEventListener("click", () => {
        applyCategoryFilter(chip.dataset.filter, chip);
    }));

    const urlParams = new URLSearchParams(window.location.search);
    const bicat = urlParams.get("bicat");

    if (/^\d+$/.test(bicat || "")) {
        const selectedChip = document.querySelector(`.chip[data-filter="category-${bicat}"]`);

        if (selectedChip) {
            applyCategoryFilter(selectedChip.dataset.filter, selectedChip);
        }
    }
{{/js}}