<table id="justificatifTable">
    <thead>
        <tr>
            <th>
                <div>
                    <span>Début</span>
                    <a class="icon order" onclick="order('date_debut', justificatifCallBack, this, false)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Fin</span>
                    <a class="icon order" onclick="order('date_fin', justificatifCallBack, this, false)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>État</span>
                    <a class="icon order" onclick="order('etat', justificatifCallBack, this, false)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Raison</span>
                    <a class="icon order" onclick="order('raison', justificatifCallBack, this, false)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Fichier</span>
                    <a class="icon order" onclick="order('fichier', justificatifCallBack, this, false)"></a>
                </div>
            </th>
        </tr>
    </thead>
    <tbody id="tableBodyJustificatifs">
    </tbody>
</table>
<div id="paginationContainerJustificatifs" class="pagination-container">
</div>

<script>
    const paginationContainerJustificatifs = document.getElementById("paginationContainerJustificatifs");
    let currentPageJustificatifs = 1;
    let orderJustificatifs = true;
    let filterJustificatifs = {
        columns: [
            "entry_date", "date_debut", "date_fin", "etat", "raison", "fichier"
        ],
        filters: {}
    }
    const tableBodyJustificatifs = document.getElementById("tableBodyJustificatifs");

    function justificatifCallBack(justi) {
        justi = filterArray(justi, filterJustificatifs.filters)
        renderTableJustificatifs(currentPageJustificatifs, justi);
        renderPaginationButtons(justi, false);
    }

    function renderTableJustificatifs(page, justificatifs) {
        generateTableHead(filterJustificatifs.columns, false)

        tableBodyJustificatifs.innerHTML = "";
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        justificatifs.slice(start, end).forEach((justificatif) => {
            const row = document.createElement("tr");
            row.setAttribute('type', "justificatif");
            row.setAttribute('obj_id', justificatif.justif_id);

            const etat = justificatif.etat.toLowerCase();

            if (etat == "valide") {
                row.classList.add(`l-valid`);

            } else {
                row.classList.add(`l-invalid`);

            }

            filterJustificatifs.columns.forEach((k) => {
                const td = document.createElement('td');
                if (k.indexOf('date') != -1) {
                    td.textContent = moment.tz(justificatif[k], TIMEZONE).format(`DD/MM/Y HH:mm`)
                } else if (k.indexOf('fichier') != -1) {
                    td.textContent = justificatif.fichier ? "Oui" : "Non";
                }
                else {
                    td.textContent = justificatif[k].capitalize()
                }

                row.appendChild(td)
            })

            row.addEventListener("contextmenu", (e) => {
                e.preventDefault();
                selectedRow = e.target.parentElement;
                contextMenu.style.top = `${e.clientY}px`;
                contextMenu.style.left = `${e.clientX}px`;
                contextMenu.style.display = "block";
                console.log(selectedRow);
            });

            tableBodyJustificatifs.appendChild(row);
        });
        updateActivePaginationButton(false);
    }


</script>