const $ = (element) => document.getElementById(element)
const url_liste_projet = $("tableau-liste-projet").dataset.url;
const tableau_liste_projet = new Tabulator("#tableau-liste-projet", {
    fitColumns: true,
    responsiveLayout : true,
    columns: [
        {title: "Projet", field: "nom_projet"},
        {title: "Source de financement", field: "source_financement"},
        {title: "Budget Total", field: "budget"},
        {title: "Budget RH", field: "budget_RH"},
        {title: "Avancement", field: "avancement", formatter: "progress"},
        {title: "Statut", field: "statut"},
    ],
    ajaxURL: url_liste_projet
})

const employes_affectes_projet = new Tabulator("#employes_affectes_projet", {
    columns: [
        {title: "Employé", field: "employe"},
        {title: "Pourcentage d'affectation", field: "pourcentage_affectation"},
    ],
    placeholder: "Aucun employé affecté pour ce projet",
})

const bailleurs_projet = new Tabulator("#bailleurs_projet", {
    columns: [
        {title: "Bailleur", field: "bailleur"},
        {title: "Pourcentage de financement", field: "pourcentage_financement"},
    ],
    placeholder: "Aucun bailleur attribué pour ce projet",
})

tableau_liste_projet.on("rowClick", function (row, rowData) {
    const data = rowData.getData();   
    const modal = new bootstrap.Modal($("modalDetailProjet"));

    $("detail_id_projet").value = data.id_projet;
    $("detail_nom_projet").value = data.nom_projet;
    $("detail_date_debut").value = data.date_debut;
    $("detail_date_fin").value = data.date_fin;
    $("detail_numero_convention").value = data.numero_convention;
    $("detail_type_projet").value = data.type_projet;
    Array.from($("detail_domaine_recherche").options).forEach(option => {
        if (data.domaine_recherche.includes(option.value)) {
            option.selected = true;
        } else {
            option.selected = false; 
        }
    });
    $("detail_budget").value = data.budget;
    $("detail_budget_rh").value = data.budget_RH;
    $("detail_description").value = data.description;
    $("detail_statut").value = data.statut;

    employes_affectes_projet.setData(`projet/liste-employes-par-projet/${$("detail_id_projet").value}`);
    bailleurs_projet.setData(`projet/bailleurs/${data.id_projet}/`);

    modal.show();
})

// $('detail-projet-form').addEventListener('submit', (e) => {
//     e.preventDefault();
//     new FormData($("detail-projet-form"));
// })