{% 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">
                        {% if chefChantier %}
                            <form method="get" action="{{ path('planning') }}" class="form-inline mb-3">
                                <select name="chantier" class="form-control mr-2">
                                    <option value="">Sélectionner un chantier</option>
                                    {% for chantier in chantiers %}
                                        <option value="{{ chantier.id }}" {% if app.request.query.get('chantier') == chantier.id %}selected{% endif %}>
                                            {{ chantier.libelle }}
                                        </option>
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn btn-primary">Rechercher</button>
                            </form>
                            <table id="scroll-horizontal-datatable" class="table table-striped w-100 nowrap">
                                <thead>
                                    <tr>
                                        <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 salarie in planning.salaries %}
                                                <tr>
                                                    <td class="no-sort">
                                                        <ul class="list-inline">
                                                            <a href="{{ path('details_planning', {'id': planning.id}) }}" class="detail-custom" style="padding: 0px 5px;"><i class="ri-search-eye-line "></i></a>
                                                            <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': salarie.id}) }}">{{ salarie.nom }} {{ salarie.prenom }} </a></td>
                                                    <td>{{ planning.dateDebut|date('d/m/Y') }}</td>
                                                    <td>{{ planning.dateFin|date('d/m/Y') }}</td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% endif %}
                        
                        {% set showValidateButton = false %}
                        {% for planning in plannings %}
                            {% if not planning.valide %}
                                {% set showValidateButton = true %}
                            {% endif %}
                        {% endfor %}

                        {% if showValidateButton %}
                            <button id="validate-week" class="valider-custom">Valider la semaine</button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log("Page loaded and JS is running");

            const planningEl = document.getElementById('planning');
            const entrepriseId = planningEl.dataset.entrepriseId;
            let currentDate = new Date();

            document.getElementById('validate-week').addEventListener('click', function() {
                console.log("Validate button clicked");
                const startDate = formatDate(currentDate); 

                fetch('/api/validate-planning', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        entrepriseId: entrepriseId,
                        startDate: startDate
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        alert('Planning validé avec succès');
                        fetchAndRenderPlanning(); // Refresh the planning to show the changes
                    } else {
                        alert('Erreur lors de la validation du planning');
                    }
                })
                .catch(error => console.error('Erreur lors de la validation du planning:', error));
            });

            document.getElementById('prev-week').addEventListener('click', function() {
                currentDate.setDate(currentDate.getDate() - 7);
                fetchAndRenderPlanning();
            });

            document.getElementById('next-week').addEventListener('click', function() {
                currentDate.setDate(currentDate.getDate() + 7);
                fetchAndRenderPlanning();
            });

            function formatDate(date) {
                return date.toISOString().split('T')[0];
            }

            function fetchAndRenderPlanning() {
                const startDate = formatDate(currentDate);
                fetch(`/api/planning?entrepriseId=${entrepriseId}&startDate=${startDate}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log('Données reçues:', data);
                        renderPlanning(data);
                    })
                    .catch(error => console.error('Erreur lors de la récupération des plannings:', error));
            }

            function renderPlanning(data) {
                // Existing code for rendering planning
            }

            fetchAndRenderPlanning();
        });
    </script>
{% endblock %}