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

{% block title %}Ajouter informations chantier{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.table td {
    padding: 10px;
    vertical-align: middle;
}

.table .form-check-input {
    margin-right: 10px;
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.input-group .form-control {
    padding-left: 30px; /* Adjust this value as needed */
}
</style>
{% endblock %}

{% block body %}
<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1>Ajouter un chantier</h1>
                        {{ form_start(form) }}
                        {% if not form.vars.valid %}
                        <ul>
                            {% for child in form.children %}
                            {% for error in child.vars.errors %}
                            <li>{{ error.message }}</li>
                            {% endfor %}
                            {% endfor %}
                        </ul>
                        {% endif %}

                        <div class="mb-3" id="entrepriseContainer">
                            {{ form_label(form.entreprise, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.entreprise, {'attr': {'class': 'form-select'}, 'id': 'entreprise'}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.clients, null, {'label_attr': {'class': 'form-label'}}) }}*
                            <table class="table">
                                <tr>
                                      {% for client in form.clients %}
                                        <td>{{ form_widget(client, {'attr': {'class': 'form-check-input'}}) }} {{ client.vars.label }}</td>
                                        {% if loop.index is divisible by(3) %}</tr><tr>{% endif %}
                                    {% endfor %}
                                </tr>
                            </table>
                        </div>
                                     

                                <div class="mb-3">
                                    {{ form_label(form.libelle, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.libelle, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.adresse1, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.adresse1, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.adresse2, null, {'label_attr': {'class': 'form-label'}}) }}
                                 {{ form_widget(form.adresse2, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.codePostal, null, {'label_attr': {'class': 'form-label'}}) }}
                                 {{ form_widget(form.codePostal, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.ville, null, {'label_attr': {'class': 'form-label'}}) }}
                                 {{ form_widget(form.ville, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.pays, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.pays,  {'attr': {'class': 'form-control'}}) }}
                                </div>
     
                               <div class="mb-3">
                                    {{ form_label(form.conducteurTravaux, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.conducteurTravaux, {'attr': {'class': 'form-select'}, 'id': 'conducteur'}) }}
                                </div>
                               {#}  <div class="mb-3">
                                    {{ form_label(form.chefChantier, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.chefChantier, {'attr': {'class': 'form-select'}, 'id': 'chefChantier'}) }}
                                </div>#}

                                <div class="mb-3">
                                    {{ form_label(form.dateOuverture, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.dateOuverture, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateOuverture'}}) }}
                                </div>


                                <div class="mb-3">
                                {{ form_label(form.dateReceptionPVLeveReserve, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateReceptionPVLeveReserve,  {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateReceptionPVLeveReserve'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.dateCloturePrevisionnelle, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateCloturePrevisionnelle,  {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateCloturePrevisionnelle'}}) }}
                                </div>

                                <div class="mb-3">
                                {{ form_label(form.dateClotureReelle, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateClotureReelle,  {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateClotureReelle'}}) }}
                                </div>
                                
                                <div class="mb-3">
                                    {{ form_label(form.montantMarcheInitial, null, {'label_attr': {'class': 'form-label'}}) }}
                                    <div class=" input-group">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text">€</span>
                                    </div>
                                    {{ form_widget(form.montantMarcheInitial, {'attr': {'class': 'form-control'}}) }}
                                </div>
                            </div>

                               

                                <div class="mb-3 input-group">
                                    {{ form_label(form.pourcentageRetenueDefinitive, null, {'label_attr': {'class': 'form-label'}}) }}
                                    <div class=" input-group">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text">%</span>
                                        </div>
                                    {{ form_widget(form.pourcentageRetenueDefinitive, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                </div>
                                <div class="mb-3">
                                    {{ form_label(form.montantCaution, null, {'label_attr': {'class': 'form-label'}}) }}
                                    <div class=" input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">€</span>
                                        </div>
                                        {{ form_widget(form.montantCaution, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                </div>

                            <div class="col-12 text-center"> 
                                <button type="submit">Ajouter</button>
                                {{ form_end(form) }}
                                <button class="retour-custom" onclick="retourPage(event);">
                                    <i class="ri-reply-line font-14"></i> Retour
                                </button>
                            </div>
                           
                            
                        </div>    
                    </div>   
                </div> 
            </div> 
        </div>    
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
document.addEventListener('DOMContentLoaded', function() {
    var entrepriseSelect = document.getElementById('entreprise');
    var clientSelect = document.getElementById('client');
    var conducteurSelect = document.getElementById('conducteur');
    var chefChantierSelect = document.getElementById('chefChantier');

    // Sauvegarder les options initiales des clients, conducteurs et chefs de chantier
    var initialClientOptions = clientSelect.innerHTML;
    var initialConducteurOptions = conducteurSelect.innerHTML;
    var initialChefChantierOptions = chefChantierSelect.innerHTML;

    if (entrepriseSelect) {
        entrepriseSelect.addEventListener('change', function() {
            var selectedEntrepriseId = this.value;
            console.log('Entreprise sélectionnée ID:', selectedEntrepriseId);

            if (!selectedEntrepriseId) {
                // Si le placeholder est sélectionné, réinitialiser les listes des clients et salariés
                resetSelects();
                return;
            }

            // Récupérer les clients associés à l'entreprise
            fetch('/entreprises/client', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ entrepriseId: selectedEntrepriseId })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Données reçues pour clients:', data);
                if (Array.isArray(data) && data.length > 0) {
                    updateSelect(clientSelect, data, 'nom');
                } else {
                    clientSelect.innerHTML = '<option>Aucun client trouvé</option>';
                }
            })
            .catch(error => console.error('Erreur lors de la récupération des données:', error));

            // Récupérer les conducteurs et chefs de chantier associés à l'entreprise
            fetch('/salarie/responsable', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ entrepriseId: selectedEntrepriseId })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Données reçues pour responsables:', data);
                if (Array.isArray(data) && data.length > 0) {
                    updateSelect(conducteurSelect, data, 'affichageResponsableHierarchique');
                    updateSelect(chefChantierSelect, data, 'affichageResponsableHierarchique');
                } else {
                    conducteurSelect.innerHTML = '<option>Aucun conducteur trouvé</option>';
                    chefChantierSelect.innerHTML = '<option>Aucun chef de chantier trouvé</option>';
                }
            })
            .catch(error => console.error('Erreur lors de la récupération des données:', error));
        });

        clientSelect.addEventListener('change', function() {
            var selectedClientId = this.value;
            console.log('Client sélectionné ID:', selectedClientId);

            if (!selectedClientId) {
                // Si le placeholder est sélectionné, réinitialiser le sélecteur d'entreprises
                resetSelects();
                return;
            }

            // Récupérer l'entreprise associée au client
            fetch('/clients/entreprise', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ clientId: selectedClientId })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Données reçues pour l\'entreprise associée:', data);
                if (data && data.entrepriseId) {
                    entrepriseSelect.value = data.entrepriseId;
                    entrepriseSelect.dispatchEvent(new Event('change'));
                }
            })
            .catch(error => console.error('Erreur lors de la récupération des données:', error));
        });
    }

    function updateSelect(selectElement, data, textProperty) {
        selectElement.innerHTML = '';
        data.forEach(function(item) {
            if (item && item.id && item[textProperty]) {
                var option = document.createElement('option');
                option.value = item.id;
                option.textContent = item[textProperty];
                selectElement.appendChild(option);
            } else {
                console.warn('Donnée invalide:', item);
            }
        });
    }

    function resetSelects() {
        // Réinitialiser les sélecteurs aux options initiales
        clientSelect.innerHTML = initialClientOptions;
        conducteurSelect.innerHTML = initialConducteurOptions;
        chefChantierSelect.innerHTML = initialChefChantierOptions;
    }
});

    </script>
{% endblock %}