{% extends "layouts/base.twig" %}

{% block title %}{{ translations.peppol_status }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.peppol_status }}</h3>
        <p class="text-subtitle text-muted">{{ translations.peppol_status_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">{{ translations.invoices }}</h4>
        </div>
        <div class="card-content">
            <div class="card-body px-3 py-4-5">

            <div class="row">
                <div class="col-4"></div>
                <div class="col-4">
                    <label class="form-label" for="year_picker">
                        {{ translations.year }}
                    </label>
                    <select class="form-select" id="year_picker" onchange="loadInvoicesByDate(this.value)">
                        <option value="-1">{{ translations.select_year }}</option>

                        {% for invoice_year in invoice_years %}
                            <option value="{{ invoice_year }}">{{ invoice_year }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-4"></div>


                <div class="col-5 mt-5">
                    <label class="form-label" for="invoice_search">
                        {{ translations.client_invoice_numer }}
                    </label>
                    <input id="invoice_search"
                           type="text"
                           class="form-control"
                           placeholder="{{ translations.search_by_client_invoice }}"
                           oninput="filterInvoices(this.value)">
                </div>
                <div class="col-12 mt-3">
                    <table class="table">
                    <thead>
                        <tr>
                            <th id="th_client" style="width: 35%; cursor:pointer;">
                                {{ translations.client }} <span class="ms-1 sort-indicator" id="si_client"></span>
                            </th>
                            <th id="th_invoice" style="width: 25%; cursor:pointer;">
                                {{ translations.invoice_number }} <span class="ms-1 sort-indicator" id="si_invoice"></span>
                            </th>
                            <th id="th_status" style="width: 15%; cursor:pointer;">
                                {{ translations.peppol_status }} <span class="ms-1 sort-indicator" id="si_status"></span>
                            </th>
                            <th style="width: 25%"></th>
                        </tr>
                    </thead>
                        <tbody id="invoices_tbody">

                        </tbody>
                    </table>
                </div>
            </div>

            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        // --- SORT STATE ---
        const sortState = {
            col: 1,   // 0,1,2
            dir: 'asc'   // 'asc' | 'desc'
        };

        function getCellText(tr, colIndex) {
            const td = tr.cells[colIndex];
            if (!td) return '';
            return (td.textContent || td.innerText || '').trim().toLowerCase();
        }

        function getStatusValue(tr) {
            // 1 = sent (checkmark), 0 = not sent (minus/button)
            const td = tr.cells[2];
            if (!td) return 0;
            return td.querySelector('.dripicons-checkmark') ? 1 : 0;
        }

        function updateSortIndicators() {
            const siClient = document.getElementById('si_client');
            const siInvoice = document.getElementById('si_invoice');
            const siStatus = document.getElementById('si_status');

            if (siClient) siClient.textContent = '';
            if (siInvoice) siInvoice.textContent = '';
            if (siStatus) siStatus.textContent = '';

            const arrow = sortState.dir === 'asc' ? '▲' : '▼';

            if (sortState.col === 0 && siClient) siClient.textContent = arrow;
            if (sortState.col === 1 && siInvoice) siInvoice.textContent = arrow;
            if (sortState.col === 2 && siStatus) siStatus.textContent = arrow;
        }

        function sortInvoicesTable(colIndex, toggle = true) {
            const tbody = document.getElementById("invoices_tbody");
            const rows = Array.from(tbody.querySelectorAll("tr"));

            if (rows.length === 1 && rows[0].cells.length === 1 && rows[0].cells[0].colSpan >= 4) return;

            if (toggle) {
                if (sortState.col === colIndex) {
                    sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
                } else {
                    sortState.col = colIndex;
                    sortState.dir = 'asc';
                }
            } else {
                // ustawiamy “na sztywno” bez zmiany kierunku
                sortState.col = colIndex;
                // zostaw sortState.dir jak jest (np. asc)
            }

            const dirMul = sortState.dir === 'asc' ? 1 : -1;

            rows.sort((a, b) => {
                if (colIndex === 2) {
                    const av = getStatusValue(a);
                    const bv = getStatusValue(b);
                    if (av !== bv) return (av - bv) * dirMul;

                    const at = getCellText(a, 1);
                    const bt = getCellText(b, 1);
                    return at.localeCompare(bt, 'pl', { numeric: true, sensitivity: 'base' }) * dirMul;
                }

                const at = getCellText(a, colIndex);
                const bt = getCellText(b, colIndex);
                return at.localeCompare(bt, 'pl', { numeric: true, sensitivity: 'base' }) * dirMul;
            });

            tbody.innerHTML = "";
            rows.forEach(r => tbody.appendChild(r));

            updateSortIndicators();

            const searchEl = document.getElementById('invoice_search');
            if (searchEl && searchEl.value.trim().length > 0) {
                filterInvoices(searchEl.value);
            }
        }

        // --- FILTER ---
        function filterInvoices(query) {
            const q = (query || '').trim().toLowerCase();
            const tbody = document.getElementById("invoices_tbody");
            const rows = Array.from(tbody.querySelectorAll("tr"));

            // jeżeli jest "no_invoics" to nic nie filtrujemy
            if (rows.length === 1 && rows[0].cells.length === 1 && rows[0].cells[0].colSpan >= 4) return;

            rows.forEach(tr => {
                const client = getCellText(tr, 0);
                const invoice = getCellText(tr, 1);

                const match = (q.length === 0) || client.includes(q) || invoice.includes(q);
                tr.style.display = match ? '' : 'none';
            });
        }

        // Podpinamy kliknięcia w nagłówki
        document.addEventListener('DOMContentLoaded', () => {
            const thClient = document.getElementById('th_client');
            const thInvoice = document.getElementById('th_invoice');
            const thStatus = document.getElementById('th_status');

            if (thClient) thClient.addEventListener('click', () => sortInvoicesTable(0));
            if (thInvoice) thInvoice.addEventListener('click', () => sortInvoicesTable(1));
            if (thStatus) thStatus.addEventListener('click', () => sortInvoicesTable(2));

            updateSortIndicators();
        });

        function showInvoicesLoadingSpinner() {
            const tbody = document.getElementById("invoices_tbody");
            tbody.innerHTML = `
        <tr>
            <td colspan="4" class="text-center py-4">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">{{ translations.loading }}</span>
                </div>
            </td>
        </tr>
    `;
        }

        function showNoInvoicesRow() {
            const tbody = document.getElementById("invoices_tbody");
            tbody.innerHTML = `
        <tr>
            <td colspan="4" class="text-center py-4">
                {{ translations.no_invoics }}
            </td>
        </tr>
    `;
        }

        function loadInvoicesByDate(year) {
            // jak user wybierze "-1" to czyścimy tabelę i pokazujemy tylko strzałki
            if (String(year) === '-1') {
                const tbody = document.getElementById("invoices_tbody");
                tbody.innerHTML = '';
                updateSortIndicators();
                return;
            }

            // pokaz spinner w body tabeli
            showInvoicesLoadingSpinner();

            // czyścimy wyszukiwarkę po zmianie roku
            const searchEl = document.getElementById('invoice_search');
            if (searchEl) searchEl.value = '';

            getJSON('Document', "getInvoicesByDate/" + year, {}, 'GET', {})
                .then(function (res) {
                    const tbody = document.getElementById("invoices_tbody");
                    tbody.innerHTML = "";

                    if (res.length === 0) {
                        showNoInvoicesRow();
                        // nie resetuj col na null, żeby strzałka była widoczna od początku
                        updateSortIndicators();
                        return;
                    }

                    for (let i = 0; i < res.length; i++) {
                        const row = tbody.insertRow();

                        const cell0 = row.insertCell(0);
                        cell0.innerText = res[i].consignee_name;

                        const cell1 = row.insertCell(1);
                        cell1.innerText = res[i].invoice_number;

                        const cell2 = row.insertCell(2);
                        cell2.innerHTML = res[i].was_sent_peppol === 1
                            ? `<i class="icon dripicons-checkmark text-success"></i>`
                            : `<i class="icon dripicons-minus text-danger"></i>`;

                        const cell3 = row.insertCell(3);
                        cell3.innerHTML = res[i].was_sent_peppol === 1
                            ? "{{ translations.sent }}"
                            : `<button class="btn btn-outline-dark btn-sm" onclick="SendInvoiceByPeppol(${res[i].id}, this)">{{ translations.send_by_peppol }}</button>`;
                    }

                    sortState.dir = 'asc';
                    sortInvoicesTable(1, false);
                })
                .catch(function () {
                    // w razie błędu też schowaj spinner i pokaż "brak" (albo możesz dać osobny komunikat)
                    showNoInvoicesRow();
                    updateSortIndicators();
                });
        }

        function SendInvoiceByPeppol(id, btn){
            btn.innerHTML = `<div class="col-12">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">{{ translations.sending }}</span>
            </div>
        </div>`;
            btn.disabled = true;

            const data = { id_invoice: id };

            api(`/ajax/invoices/${id}/send-by-peppol`, {
                method: "POST",
                data
            })
                .then(function (res) {
                    showSnack(res.success);

                    if (res.success) {
                        const parentCell = btn.parentNode;
                        parentCell.innerHTML = "{{ translations.sent }}";
                    } else {
                        btn.innerHTML = "{{ translations.send_by_peppol }}";
                        btn.disabled = false;
                    }
                })
                .catch();
        }
    </script>

{% endblock %}