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

{% block title %}Planning{% 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">   </br>
                                <h1>Planning en attente de validation</h1>
                        {% if chefChantier  %}
                            <form method="get" action="{{ path('validation_chef_chantier') }}" class="form-inline mb-3" id="filter-form">
                                <div class="row">
                                 <div class="col-6">
                                    <select name="chantier" class="form-control" id="chantier-select">
                                        <option value="">Sélectionner un chantier</option>
                                        {% for chantier in chantiers %}
                                        {% if  user.entreprise == chantier.entreprise %}
                                           <option value="{{ chantier.id }}" {% if app.request.query.get('chantier') == chantier.id %}selected{% endif %}>
                                                {{ chantier.libelle }}
                                            </option>
                                             {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                                 <div class="col-6">
                                    <select name="semaine" class="form-control" id="semaine-select">
                                        <option value="">Sélectionner une semaine</option>
                                        {% for i in 1..52 %}
                                            <option value="{{ i }}" {% if app.request.query.get('semaine') == i %}selected{% endif %}>
                                                Semaine {{ i }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div></div>
                            </form>
                        {% endif %}

                        <form method="post" action="{{ path('valider_plannings') }}" id="plannings-form">
                            <table id="scroll-horizontal-datatable" class="table table-striped w-100 nowrap">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="check-all"></th>
                                        <th class="no-sort"></th>
                                        <th>Chantier</th>
                                        <th>Salarié</th>
                                        <th>Date de Début</th>
                                        <th>Date de Fin</th>
                                    </tr>
                                </thead>
                                <tbody style="vertical-align: middle;">
                                    {% for planning in plannings %}
                                        {% if planning.dateDelete is null %}
                                            {% for planningSalarie in planning.planningSalaries %}
                                            {% if planningSalarie.valide == false and user.entreprise == planning.chantier.entreprise and planningSalarie.salarie.dateDelete is null %}
                                                <tr>
                                                    <td><input type="checkbox" name="plannings[]" value="{{ planningSalarie.id }}"></td>
                                                    <td class="no-sort">
                                                        <ul class="list-inline">
                                                            <a href="{{ path('modifier_planning', {'id': planning.id}) }}" class="modifier-custom" style="padding: 0px 5px;"><i class="ri-edit-line "></i></a>
                                                            <a href="{{ path('supprimer_planning', {'id': planning.id}) }}" class="supprimer-custom" style="padding: 0px 5px;"><i class="ri-delete-bin-line "></i></a>
                                                        </ul>
                                                    </td>
                                                    <td>{{ planning.chantier.libelle }}</td>
                                                    <td><a href="{{ path('details_salarie', {'id': planningSalarie.salarie.id}) }}">{{ planningSalarie.salarie.nom }} {{ planningSalarie.salarie.prenom }} </a></td>
                                                    <td>{{ planning.dateDebut|date('d/m/Y') }} {{planning.plageDebut}}</td>
                                                    <td>{{ planning.dateFin|date('d/m/Y') }} {{planning.plageFin}}</td>
                                                </tr>
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>
                            <button type="submit" class="valide">Valider les plannings sélectionnés</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('filter-form');
            const chantierSelect = document.getElementById('chantier-select');
            const semaineSelect = document.getElementById('semaine-select');

            chantierSelect.addEventListener('change', function() {
                form.submit();
            });

            semaineSelect.addEventListener('change', function() {
                form.submit();
            });

            // Checkbox select all functionality
            const checkAll = document.getElementById('check-all');
            const checkboxes = document.querySelectorAll('input[name="plannings[]"]');

            checkAll.addEventListener('change', function() {
                checkboxes.forEach(checkbox => {
                    checkbox.checked = checkAll.checked;
                });
            });
        });
    </script>
{% endblock %}