const $ = (element) => document.getElementById(element);

const url_liste_conge_attente = $("liste-demande-conges").dataset.url

const tableau_liste_demande_conge = new Tabulator("#liste-demande-conges", {
    layout : "fitColumns",
    columns: [
        {"title": "Nom et Prénom", "field": "prenom_nom"},
        {"title": "Date de début", "field": "date_debut", formatter:"datetime", formatterParams:{
            inputFormat:"yyyy-MM-dd",
            outputFormat:"dd/MM/yy",
        }},
        {"title": "Date de fin", "field": "date_fin", formatter:"datetime", formatterParams:{
            inputFormat:"yyyy-MM-dd",
            outputFormat:"dd/MM/yy",
        }},
        {"title": "Type de congé", "field": "type"},
        {"title": "Date de la demande", "field": "date_demande"},
        {"title": "Validation par supérieur hiérarchique", "field": "validation_hierarchique", formatter:"tickCross", formatterParams :{ 
            allowEmpty : true , 
        }},
        {"title": "Validation par supérieur hiérarchique", "field": "validation_direction", formatter:"tickCross", formatterParams :{ 
            allowEmpty : true , 
        }},
    ],
    pagination: true,
    paginationSize: 5
})

const bouton_demande_conges = $("bouton-demande-conge");

bouton_demande_conges.addEventListener("click", (e) => {
    var modalDemandeConge = new bootstrap.Modal(document.getElementById('modalDemandeConge'));
    modalDemandeConge.show();
})

tableau_liste_demande_conge.on("rowClick", function(row, rowData) {
    const data = rowData.getData();
    $("id_conge").value = data.id;
    $("employe").value = data.prenom_nom;
    $("type_conge").value = data.type;
    $("date_debut").value = data.date_debut;
    $("date_fin").value = data.date_fin;
    $("date_demande").value = data.date_demande;
    $("nombre_jours").value = data.nombre_jours;
    $("solde_restant").value = data.solde_conge;
    $("motif_refus").value = data.motif_refus;

    if($("validation_hierarchique_valide") & $("validation_hierarchique_refuse")){
        $("validation_hierarchique_valide").checked = data.validation_hierarchique === true;
        $("validation_hierarchique_refuse").checked = data.validation_hierarchique === false;
    }

    if($("validation_direction_valide") & $("validation_direction_refuse")){
        $("validation_direction_valide").checked = data.validation_direction === true;
        $("validation_direction_refuse").checked = data.validation_direction === false;
    }

    const modal = new bootstrap.Modal(document.getElementById('detailsCongeModal'));
    modal.show();
});

fetch(url_liste_conge_attente)
    .then(response => response.json())
    .then(data => {
        if(data.success === true){
            tableau_liste_demande_conge.setData(data.data)
        }else{
            alert(data.message)
        }
    })