{% extends 'base.html.twig' %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('build/creationPlanningStyle.css') }}">
{% endblock %}

{% block body %}
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1>Création de Planning</h1>
                        <h2 id="weekTitle"></h2>
                        <div class="planning-container">
                            <div class="salarie-list">
                                <h2>Salariés</h2>
                                <table id="creationPlanningSalarieTable">
                                    <thead>
                                        <tr>
                                            <th rowspan="2">Nom</th>
                                            <th rowspan="2">Lieu de résidence</th>
                                            <th rowspan="2">Provenance</th>
                                            <th colspan="2">LUNDI</th>
                                            <th colspan="2">MARDI</th>
                                            <th colspan="2">MERCREDI</th>
                                            <th colspan="2">JEUDI</th>
                                            <th colspan="2">VENDREDI</th>
                                        </tr>
                                        <tr>
                                            <th>Matin</th>
                                            <th>Après-midi</th>
                                            <th>Matin</th>
                                            <th>Après-midi</th>
                                            <th>Matin</th>
                                            <th>Après-midi</th>
                                            <th>Matin</th>
                                            <th>Après-midi</th>
                                            <th>Matin</th>
                                            <th>Après-midi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="creationPlanningSalarieList">
                                        {# Les salariés seront injectés ici par JavaScript #}
                                    </tbody>
                                </table>
                            </div>
                            <div class="chantier-list">
                                <ul id="creationPlanningChantierList">
                                    {# Les chantiers seront injectés ici par JavaScript #}
                                </ul>
                            </div>
                        </div>
                        <button id="savePlanning">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div id="creationPlanningSalarieListData" data-salarie-list='{{ salaries|e('html_attr') }}'></div>
<div id="creationPlanningChantierListData" data-chantier-list='{{ chantiers|e('html_attr') }}'></div>
<div id="existingPlanningsData" data-existing-plannings='{{ existingPlannings|e('html_attr') }}'></div>
<div id="absencesData" data-absences='{{ absences|e('html_attr') }}'></div> <!-- Ajout des absences -->

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/creationPlanning.js') }}"></script>
{% endblock %}