{# BASE LOAD #}
{% extends 'base.html.twig' %}
{# TITLE TOP PAGE #}
{% block title %}CPI | {% if app.request.locale == 'fr' %}Planning Formation{% else %}Training Schedule{% endif %}{% endblock %}
{# CSS #}
{% block stylesheet %}
<link rel="stylesheet" href="{{ asset('css/planningFormation.css')}}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{% endblock %}
{# BODY HOME PAGE #}
{% block body %}
<main>
<style>
.navigation-header .nav-link, .navigation-header .nav-link p{
color: #000!important;
font-weight: 300;
}
.side-bar-content .nav-link{
color: #fff!important;
font-weight: 300;
}
.dropdown-toggle, .btn-res{
display:flex;
justify-content:space-between;
align-items:center;
}
</style>
{% if app.user %}
<style>
.accueil{
padding-top:300px;
}
</style>
{% endif %}
<div class="accueil">
<div class="container container-head">
<div class="row py-5 justify-content-center justify-content-md-start">
<div class="col-12">
<div class="row">
<div class="col-md-8 col-12">
<a style="text-decoration:none;" href="{{ path('formations',{'locale':app.request.locale})}}">
<p class="returnBack"><i class="fa-solid fa-arrow-left"></i> {% trans %}retour-catalogue{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':116})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}<p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-8 col-12">
<h1 class="">{% trans %}planning-formation-titre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':117})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
<div class="traitBlanc"></div>
</div>
</div>
<div class="row py-5">
<div class="dropdowns">
<div class="row mb-5">
{% set sujetSelected = app.request.query.get('sujet') %}
{% set typeSelected = app.request.query.get('type') %}
{% set lieuSelected = app.request.query.get('lieu') %}
{% set refSelected = app.request.query.get('ref') %}
<style>
.btn-dangerr{
background-color:#30278E!important;
font-weight:bold!important;
color:white!important;
}
</style>
<div class="col-xl-2 col-md-4 col-12" style="z-index:4">
<div data-aos="fade-up" data-aos-duration="1000" class="dropdown">
<button class="btn {{ sujetSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
{% if sujetSelected %}
{% set selectedTitle = '' %}
{% for res in sujets %}
{% if res.id == sujetSelected %}
{% set selectedTitle = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
{% endif %}
{% endfor %}
{{ selectedTitle|length > 10 ? selectedTitle|slice(0, 11) ~ '...' : selectedTitle }}
{% else %}
{% set defaultTitle = app.request.locale == 'fr' ? 'Sujet' : 'Subject' %}
{{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
{% endif %}
</button>
<ul class="dropdown-menu">
<li>
<a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_planningFormation', {'sujet': '', 'type': typeSelected, 'lieu': lieuSelected, 'ref': refSelected, 'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'fr' %}Tout les Sujets{% else %}All Subjects{% endif %}
</a>
</li>
{% for res in sujetFormation %}
<li>
<a class="dropdown-item text-light" href="{{ path('app_planningFormation', {'sujet': res.id, 'type': typeSelected, 'lieu': lieuSelected, 'ref': refSelected, 'locale': app.request.locale}) }}#formaList">
{{ app.request.locale == 'en' ? res.titreEn : res.titreFr }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-xl-2 col-md-4 col-12">
<div class="dropdown">
<button class="btn {{ typeSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{% if typeSelected == 1 %}
{% if app.request.locale == 'fr' %}Intra{% else %}Intra{% endif %}
{% elseif typeSelected == 2 %}
{% if app.request.locale == 'fr' %}Inter{% else %}Inter{% endif %}
{% elseif typeSelected == 3 %}
{% if app.request.locale == 'fr' %}A distance{% else %}Remote{% endif %}
{% else %}
Type
{% endif %}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
{% set seenTypes = [] %}
<li>
<a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_planningFormation', {'type': '', 'sujet': sujetSelected, 'lieu': lieuSelected, 'ref': refSelected,'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'fr' %}Tout les Types{% else %}All Types{% endif %}
</a>
</li>
{% for res in typeFormation %}
<li>
<a class="dropdown-item text-light" href="{{ path('app_planningFormation', {'type': res.id, 'sujet': sujetSelected, 'lieu': lieuSelected, 'ref': refSelected,'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-xl-2 col-md-4 col-12">
<div class="dropdown">
<button class="btn {{ lieuSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{% if lieuSelected %}
{{ lieuSelected|length > 10 ? lieuSelected|slice(0, 11) ~ '...' : lieuSelected }}
{% else %}
{% if app.request.locale == 'fr' %}Lieu{% else %}Location{% endif %}
{% endif %}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
{% set seenLieux = [] %}
<li>
<a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_planningFormation', {'lieu': '', 'type': typeSelected, 'sujet': sujetSelected, 'ref': refSelected, 'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'fr' %}Tout les Lieux{% else %}All Locations{% endif %}
</a>
</li>
{% set processedItems = [] %} {# Initialize an empty array to keep track of processed items #}
{% for res in sessionsformationsAll %}
{% if res.lieu not in processedItems %} {# Check if the item has not been processed #}
<li>
<a class="dropdown-item text-light" href="{{ path('app_planningFormation', {'lieu': res.lieu, 'type': typeSelected, 'sujet': sujetSelected, 'ref': refSelected, 'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'en' %}
{{ res.lieuEn|replace({'A convenir': 'To agree', 'A distance': 'Remote'}) }}
{% else %}
{{ res.lieu }}
{% endif %}
</a>
</li>
{% set processedItems = processedItems|merge([res.lieu]) %} {# Add the item to the list of processed items #}
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="col-xl-2 col-md-4 col-12">
<div class="dropdown">
<button class="btn {{ refSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{% if refSelected %}
{{ refSelected|length > 10 ? refSelected|slice(0, 11) ~ '...' : refSelected }}
{% else %}
{% if app.request.locale == 'fr' %}Formations{% else %}Training{% endif %}
{% endif %}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li>
<a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_planningFormation', {'ref': '', 'type': typeSelected, 'sujet': sujetSelected, 'lieu': lieuSelected, 'locale': app.request.locale}) }}#formaList">
{% if app.request.locale == 'fr' %}Toutes les Formations{% else %}All Trainings{% endif %}
</a>
</li>
{% for res in formations %}
<li><a class="dropdown-item text-light" href="{{ path('app_planningFormation', {'ref': res.titreFr, 'type': typeSelected, 'sujet': sujetSelected, 'lieu': lieuSelected, 'locale': app.request.locale}) }}#formaList">{% if app.request.locale == 'fr' %}{{ res.TitreFr }}{% else %}{{ res.TitreEn }}{% endif %}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-xl-2 col-md-4 col-12 d-flex">
<a href="{{path('app_planningFormation',{'locale':app.request.locale})}}" style="text-decoration:none">
<button class="btn btn-secondary btn-res" type="button" style="background-color: rgb(28, 1, 114)!important;color: white!important;">
<i style="color: white!important;margin-top: 3px;background" class="fas fa-arrows-rotate" aria-hidden="true"></i> {% if app.request.locale == 'fr' %}Réinitialiser{% else %}Reset{% endif %}
</button>
</a>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="logo-slide d-flex justify-content-end d-xl-none">
<img style="width: 50px; padding-bottom: 30px;" src="{{asset('img/formations/swipe.png')}}" alt="logo de scroll">
</div>
<div class="table-container">
<table class="table table-striped table-hover" >
<thead id="thead">
<tr>
<th scope="col" class="d-xl-none d-block " style="border:none;"></th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/toolbox.svg')}}" alt="">
<p>DATE</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/toolbox.svg')}}" alt="">
<p>{% if app.request.locale == 'fr' %}SUJET{% else %}SUBJECT{% endif %}</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/comment.svg')}}" alt="">
<p>{% if app.request.locale == 'fr' %}FORMATIONS{% else %}TRAINING{% endif %}</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/toolbox.svg')}}" alt="">
<p>TYPE</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/comment.svg')}}" alt="">
<p>{% if app.request.locale == 'fr' %}LANGUE{% else %}LANGUAGE{% endif %}</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/pin.svg')}}" alt="">
<p>{% if app.request.locale == 'fr' %}LIEU{% else %}LOCATION{% endif %}</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
<th scope="col">
<div class="titre_traitBleu">
<div class="titre">
<img class="img-fluid" src="{{asset('img/Formation-A/euro.svg')}}" alt="">
<p>{% if app.request.locale == 'fr' %}Prix HT{% else %}RATE excl. taxes{% endif %}<br>
</p>
</div>
<div class="trait-bleu">
<img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
</div>
</div>
</th>
</tr>
</thead>
<tbody>
{% set today = "now"|date('U') %}
{% set futureSessions = [] %}
{% set pastSessions = [] %}
{% set noDateSessions = [] %}
{% for res in sessionsformations %}
{% if res.date is null %}
{% set noDateSessions = noDateSessions|merge([res]) %}
{% elseif res.date|date('U') >= today %}
{% set futureSessions = futureSessions|merge([res]) %}
{% else %}
{% set pastSessions = pastSessions|merge([res]) %}
{% endif %}
{% endfor %}
{% set sortedFutureSessions = futureSessions|sort((a, b) => a.date|date('U') - b.date|date('U')) %}
{% set sortedPastSessions = pastSessions|sort((a, b) => b.date|date('U') - a.date|date('U')) %}
{% if app.user %}
{% for res in sortedPastSessions %}
<tr>
<td class="d-xl-none d-block ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
<td scope="row"> {% if res.date is null %}
{% if app.request.locale == 'fr' %}Nous consulter{% else %}Contact us{% endif %}
{% else %}
{{ res.date|date('d/m/Y') }}
{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.sujetsFormations.TitreFr }}{% else %}{{ res.formations.sujetsFormations.TitreEn }}{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.TitreFr }}{% else %}{{ res.formations.TitreEn }}{% endif %}</td>
<td>
{% if app.request.locale == 'en' %}
{{ res.Type|replace({'A distance': 'Remote'}) }}
{% else %}
{{ res.Type }}
{% endif %}
</td>
<td>{% if app.request.locale == 'fr' %}{{ res.LanguesFr }}{% else %}{{ res.LanguesEn }}{% endif %}</td>
{% if app.request.locale == 'fr' %}
<td>{{ res.Lieu }}</td>
{% else %}
{% if res.Lieu == "A distance" %}
<td>Remote</td>
{% elseif res.Lieu == "A convenir" %}
<td>To be agreed</td>
{% else %}
<td>{{ res.Lieu }}</td>
{% endif %}
{% endif %}
<td><b>{% if app.request.locale == 'en' %}
{{ res.tarifs|raw|replace({'par jour / pers.': 'per Day / pers.','par Jour / Pers.': 'per Day / pers.','Nous consulter' : 'Contact us', 'par jour (1-4 pers.)' : 'per day (1-4 pers)', 'par Jour (1-4 pers)' : 'per day (1-4 pers)'}) }}
{% else %}
{{res.tarifs|raw}}
{% endif %}</b></td>
<td class="d-xl-block d-none ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
</tr>
{% endfor %}
{% endif %}
{% for res in sortedFutureSessions %}
<tr>
<td class="d-xl-none d-block ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
<td scope="row"> {% if res.date is null %}
{% if app.request.locale == 'fr' %}Nous consulter{% else %}Contact us{% endif %}
{% else %}
{{ res.date|date('d/m/Y') }}
{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.sujetsFormations.TitreFr }}{% else %}{{ res.formations.sujetsFormations.TitreEn }}{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.TitreFr }}{% else %}{{ res.formations.TitreEn }}{% endif %}</td>
<td>
{% if app.request.locale == 'en' %}
{{ res.Type|replace({'A distance': 'Remote'}) }}
{% else %}
{{ res.Type }}
{% endif %}
</td>
<td>{% if app.request.locale == 'fr' %}{{ res.LanguesFr }}{% else %}{{ res.LanguesEn }}{% endif %}</td>
{% if app.request.locale == 'fr' %}
<td>{{ res.Lieu }}</td>
{% else %}
{% if res.Lieu == "A distance" %}
<td>Remote</td>
{% elseif res.Lieu == "A convenir" %}
<td>To be agreed</td>
{% else %}
<td>{{ res.Lieu }}</td>
{% endif %}
{% endif %}
<td><b>{% if app.request.locale == 'en' %}
{{ res.tarifs|raw|replace({'par jour / pers.': 'per Day / pers.','par Jour / Pers.': 'per Day / pers.','Nous consulter' : 'Contact us', 'par jour (1-4 pers.)' : 'per day (1-4 pers)', 'par Jour (1-4 pers)' : 'per day (1-4 pers)'}) }}
{% else %}
{{res.tarifs|raw}}
{% endif %}</b></td>
<td class="d-xl-block d-none ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
</tr>
{% endfor %}
{% for res in noDateSessions %}
<tr>
<td class="d-xl-none d-block ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
<td scope="row"> {% if res.date is null %}
{% if app.request.locale == 'fr' %}Nous consulter{% else %}Contact us{% endif %}
{% else %}
{{ res.date|date('d/m/Y') }}
{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.sujetsFormations.TitreFr }}{% else %}{{ res.formations.sujetsFormations.TitreEn }}{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.formations.TitreFr }}{% else %}{{ res.formations.TitreEn }}{% endif %}</td>
<td>{% if app.request.locale == 'en' %}
{{ res.Type|replace({'A distance': 'Remote'}) }}
{% else %}
{{ res.Type }}
{% endif %}</td>
<td>{% if app.request.locale == 'fr' %}{{ res.LanguesFr }}{% else %}{{ res.LanguesEn }}{% endif %}</td>
{% if app.request.locale == 'fr' %}
<td>{{ res.Lieu }}</td>
{% else %}
{% if res.Lieu == "A distance" %}
<td>Remote</td>
{% elseif res.Lieu == "A convenir" %}
<td>To be agreed</td>
{% else %}
<td>{{ res.Lieu }}</td>
{% endif %}
{% endif %}
<td><b>{% if app.request.locale == 'en' %}
{{ res.tarifs|raw|replace({'par jour / pers.': 'per Day / pers.','par Jour / Pers.': 'per Day / pers.','Nous consulter' : 'Contact us', 'par jour (1-4 pers.)' : 'per day (1-4 pers)', 'par Jour (1-4 pers)' : 'per day (1-4 pers)'}) }}
{% else %}
{{res.tarifs|raw}}
{% endif %}</b></td>
<td class="d-xl-block d-none ">
<a href="{{ path('detailsFormation', {'ref': res.formations.reference,'locale':app.request.locale}) }}">
<button class="btn btn-secondary btnMore">
+
</button>
</a>
</td>
</tr>
{% endfor %}
<!-- <script>
const btnMore = document.querySelector('.btnMore');
function changeButtonText() {
// Récupère tous les éléments avec la classe "btnMore"
const btnMoreElements = document.querySelectorAll('.btnMore');
// Détermine à quelle taille d'écran vous souhaitez changer le texte du bouton
const breakpoint = 1200; // Par exemple, à 1200 pixels de largeur
// Parcourir tous les éléments avec la classe "btnMore"
btnMoreElements.forEach(btnMore => {
// Changer le texte du bouton en fonction de la taille de l'écran
if (window.innerWidth <= breakpoint) {
btnMore.textContent = '+';
} else {
btnMore.textContent = 'En savoir plus';
}
});
}
// Appeler la fonction lors du chargement initial de la page
changeButtonText();
// Écouter les changements de taille d'écran et appeler la fonction en conséquence
window.addEventListener('resize', changeButtonText);
</script> -->
<!-- <tr>
<th>
<p class="date">21.05.2023</p>
</th>
<th>
<p>Phasellus viverra</p>
</th>
<th>
<p>vehicula nisi auctor sit amet. Suspendisse in</p>
</th>
<th>
<p>Phasellus viverra</p>
</th>
<th>
<p class="tarif">300 €</p>
</th>
</tr>
<tr>
<th>
<p class="date">21.05.2023</p>
</th>
<th>
<p> Phasellus viverra</p>
</th>
<th>
<p>vehicula nisi auctor sit amet. Suspendisse in</p>
</th>
<th>
<p>Phasellus viverra</p>
</th>
<th>
<p class="tarif">300 €</p>
</th>
</tr>
<tr>
<th>
<p class="date">21.05.2023</p>
</th>
<th>
<p> Phasellus viverra</p>
</th>
<th>
<p>vehicula nisi auctor sit amet. Suspendisse in</p>
</th>
<th>
<p>Phasellus viverra</p>
</th>
<th>
<p class="tarif">300 €</p>
</th>
</tr>
-->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
window.onscroll = function() {
var nav = document.getElementById('thead');
if ( window.pageYOffset > 350 ) {
nav.classList.add("sticky");
} else {
nav.classList.remove("sticky");
}
}
</script>
{% endblock %}