<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/RH/style.css">
<link rel="stylesheet" href="../../css/RH/rh.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<title>Gestion des Candidatures</title>
</head>
<body class="w3-light-grey">
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
<div class="logo-container w3-bar-item">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;">
</div>
<!-- Bouton burger pour petit écran -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>
<!-- Catégories dans le header -->
<div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
</div>
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-right w3-hide-small w3-hide-medium">
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
</a>
</div>
</div>
<!-- Menu mobile caché au départ -->
<div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
<!-- Section utilisateur pour mobile -->
<div class="w3-bar-item w3-border-top w3-margin-top">
<div class="user-name">Alice BERGER</div>
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
</a>
</div>
</div>
</div>
<div class="w3-container">
<div class="w3-row">
<div class="w3-col l10 m12 s12"> <!-- Pour large, medium et small devices -->
<h2>Candidatures en Attente de Validation</h2>
</div>
</div>
<!-- Barre de recherche -->
<div class="w3-margin-bottom">
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()" class="w3-input w3-border">
</div>
<!-- Conteneur de tri -->
<div class="w3-margin-bottom w3-row">
<!-- Boutons empilés sur les petits écrans -->
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(0)">Trier par Nom</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(1)">Trier par Prénom</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(2)">Trier par Formation</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom">
<button class="w3-button w3-blue w3-block w3-small" style="padding: 5px;" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
</div>
</div>
<!-- Tableau responsive -->
<div class="w3-responsive">
<table class="w3-table w3-bordered w3-white">
<thead>
<tr class="w3-green">
<th>Nom</th>
<th>Prénom</th>
<th>Formation</th>
<th>Durée</th>
<th>Action</th>
</tr>
</thead>
<tbody id="candidatures-table">
<tr>
<td>Mike</td>
<td>Michel</td>
<td>Informatique - BUT1</td>
<td>1 semestre (120h)</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
</td>
</tr>
<tr>
<td>John</td>
<td>Williams</td>
<td>Mathématiques - BUT GEA</td>
<td>2 semestre (180h)</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal pour consulter le dossier de candidature -->
<div id="dossierModal" class="w3-modal">
<div class="w3-modal-content">
<span class="w3-button w3-display-topright" onclick="closeDossierModal()">×</span>
<div class="w3-container">
<h2>Dossier de Candidature : <span id="dossier-nom"></span> <span id="dossier-prenom"></span></h2>
<h3>Pièces Justificatives :</h3>
<ul id="pieces-list"></ul>
<div class="comment-container">
<h3>Commentaire :</h3>
<textarea class="w3-input w3-border" id="commentaire" rows="4" placeholder="Ajouter un commentaire sur ce dossier..."></textarea><br>
<button class="w3-button w3-lime" style="margin-bottom: 10px;" onclick="ajouterCommentaire()">Ajouter Commentaire</button>
</div>
<div>
<button class="w3-button w3-green w3-margin-bottom" onclick="validerDossier()">Valider Dossier</button>
<button class="w3-button w3-red w3-margin-bottom" onclick="refuserDossier()">Refuser Dossier</button>
</div>
</div>
</div>
</div>
<!-- Modal pour ajouter une offre de vacation -->
<div id="vacationModal" class="w3-modal">
<div class="w3-modal-content">
<span class="w3-button w3-display-topright" onclick="closeVacationModal()">×</span>
<div class="w3-container">
<h2>Ajouter une Offre de Vacation</h2>
<form id="vacation-form">
<label for="diplome">Diplôme requis :</label>
<input type="text" id="diplome" name="diplome" required class="w3-input w3-border">
<label for="description">Description :</label>
<textarea id="description" name="description" rows="4" required class="w3-input w3-border"></textarea>
<label for="duree">Durée (en jours) :</label>
<input type="number" id="duree" name="duree" min="1" required class="w3-input w3-border">
<button type="submit" class="w3-button w3-green w3-margin-top w3-margin-bottom">Soumettre l'Offre</button>
</form>
</div>
</div>
</div>
<div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #0f431f;">
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
</p>
</div>
<script>
const sortOrder = [true, true, true]; // État du tri pour chaque colonne
function sortTable(columnIndex) {
const table = document.getElementById("candidatures-table");
const rows = Array.from(table.rows);
const direction = sortOrder[columnIndex] ? 1 : -1; // Déterminer la direction du tri
sortOrder[columnIndex] = !sortOrder[columnIndex]; // Basculer l'ordre de tri pour le prochain clic
rows.sort((a, b) => {
const aText = a.cells[columnIndex].textContent.trim();
const bText = b.cells[columnIndex].textContent.trim();
return direction * aText.localeCompare(bText);
});
// Réattacher les lignes triées au tableau
rows.forEach(row => table.appendChild(row));
}
function filterTable() {
const input = document.getElementById("search-input").value.toLowerCase();
const table = document.getElementById("candidatures-table");
const rows = Array.from(table.rows);
rows.forEach(row => {
const cells = Array.from(row.cells);
const match = cells[0].textContent.toLowerCase().includes(input) ||
cells[1].textContent.toLowerCase().includes(input);
row.style.display = match ? "" : "none";
});
}
function consulterDossier(nom, prenom) {
document.getElementById("dossier-nom").textContent = nom;
document.getElementById("dossier-prenom").textContent = prenom;
const piecesList = document.getElementById("pieces-list");
piecesList.innerHTML = `
<li><a href="">CV - ${prenom} ${nom}.pdf</a></li>
<li><a href="">Diplôme - Licence Informatique.pdf</a></li>
<li><a href="">Lettre de motivation.pdf</a></li>
<li><a href="">Justificatif de domicile.pdf</a></li>
`;
document.getElementById("dossierModal").style.display = "block";
}
function closeDossierModal() {
document.getElementById("dossierModal").style.display = "none";
}
function ajouterCommentaire() {
const commentaire = document.getElementById("commentaire").value;
alert(`Commentaire ajouté : ${commentaire}`);
document.getElementById("commentaire").value = ""; // Réinitialiser le champ
}
function validerDossier() {
alert("Dossier validé !");
closeDossierModal();
}
function refuserDossier() {
alert("Dossier refusé !");
closeDossierModal();
}
function openVacationModal() {
document.getElementById("vacationModal").style.display = "block";
}
function closeVacationModal() {
document.getElementById("vacationModal").style.display = "none";
}
// Gestion de la soumission du formulaire d'offre de vacation
document.getElementById("vacation-form").onsubmit = function (event) {
event.preventDefault(); // Empêche le rechargement de la page
alert("Offre de vacation ajoutée !");
closeVacationModal();
};
function toggleMenu() {
var x = document.getElementById("mobileMenu");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>