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

{% block title %}Liste Facture Fournisseur
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<style>
		/* Accordéon et bouton */
		.accordion-button {
			cursor: pointer;
			font-weight: bold;
			padding: 10px;
			border: none;
			background-color: #007bff;
			color: #fff;
			width: 100%;
			text-align: left;
			border-radius: 5px;
			transition: background-color 0.3s;
		}

		.accordion-button:hover {
			background-color: #0056b3;
		}

		/* Accordéon contenu */
		.accordion-content {
			display: none;
			padding: 20px;
			border: 1px solid #ddd;
			border-top: none;
			background-color: #f8f9fa;
			border-radius: 5px;
			margin-top: 10px;
		}

		/* Visualisation PDF */
		.pdf-viewer {
			width: 100%;
			height: 500px;
			border: 1px solid #ddd;
			border-radius: 8px;
		}

		/* Formulaire de validation de facture */
		.facture-form {
			background-color: #ffffff;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			font-size: 14px;
		}

		/* Conteneur principal pour PDF et formulaire */
		.flex-container {
			display: flex;
			gap: 20px;
			align-items: flex-start;
		}
		.pdf-container {
			width: 65%;
		}
		.form-container {
			width: 35%;
		}

		/* Champs du formulaire */
		.facture-form label {
			font-weight: bold;
			color: #555;
		}

		/* Bouton de soumission neutre */
		.facture-form .btn-submit {
			background-color: #6c757d;
			border-color: #6c757d;
			font-weight: bold;
			padding: 10px 20px;
			border-radius: 5px;
			width: 100%;
			transition: background-color 0.3s;
		}

		.facture-form .btn-submit:hover {
			background-color: #5a6268;
			border-color: #5a6268;
		}

		/* Champ de commentaire */
		.facture-form textarea {
			width: 100%;
			resize: vertical;
			border-radius: 4px;
			border: 1px solid #ced4da;
			padding: 10px;
			margin-bottom: 15px;
		}
	</style>
{% 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">
                            <h3>Factures Fournisseur à Valider</h3>

                            <!-- Formulaire de sélection de chantier -->
                            <form method="get" action="{{ path('budget_avalider') }}">
                                <div class="form-group">
                                    <label for="chantierSelect">Sélectionnez un chantier :</label>
                                    <select id="chantierSelect" name="chantier" class="form-control" onchange="this.form.submit()">
                                        <option value="">-- Choisissez un chantier --</option>
                                        {% for chantier in chantiers %}
                                            <option value="{{ chantier.id }}" {% if selectedChantier and chantier.id == selectedChantier.id %} selected {% endif %}>
                                                {{ chantier.libelle }} - Conducteur : {{ chantier.conducteurTravaux.nom }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </form>

                            {% if selectedChantier %}
                                <h4>Factures pour le chantier {{ selectedChantier.libelle }}</h4>
                                <ul>
                                   {% for invoice in invoices %}
    {% if invoice.traite == 0 and invoice.litige == 0 and invoice.validationPartielle == 0 %}
        <li>
            <button class="accordion-button" onclick="toggleAccordion(this)">
                {{ invoice.cheminFacture|split('/')|last }}

            </button>
            <div class="accordion-content">
                <div class="flex-container">
                    <div class="pdf-container">
                        <iframe src="{{ invoice.cheminFacture }}" class="pdf-viewer"></iframe>
                    </div>

                    <div class="form-container">
                        <div class="facture-form" data-invoice-id="{{ invoice.id }}">
                            {{ form_start(forms[invoice.id]) }}
                            {{ form_row(forms[invoice.id].chantier, { 'label': 'Chantier' }) }}
                            <label>Catégories de Budget</label>
                            <div class="row">
                                {% for categorie in forms[invoice.id].categoriesBudget %}
                                    <div class="col-md-4">
                                        {{ form_widget(categorie) }}
                                        {{ form_label(categorie) }}
                                    </div>
                                {% endfor %}
                            </div>
                            {{ form_row(forms[invoice.id].budgetEstimation, { 'label': 'Estimation associée' }) }}
                            {{ form_row(forms[invoice.id].bonCommandes) }}
                            {{ form_row(forms[invoice.id].traite, { 'label': 'Valider la facture' }) }}
                            {{ form_row(forms[invoice.id].litige, { 'label': 'Refuser la facture' }) }}
                            {{ form_row(forms[invoice.id].validationPartielle, { 'label': 'Valider partiellement' }) }}
                            {{ form_row(forms[invoice.id].comRefus, { 'label': 'Commentaire en cas de refus' }) }}
                            <button type="submit" class="btn btn-submit">Enregistrer</button>
                            {{ form_end(forms[invoice.id]) }}
                        </div>
                    </div>
                </div>
            </div>
        </li>
    {% endif %}
{% endfor %}

                                </ul>
                            {% else %}
                                <p>Veuillez sélectionner un chantier pour afficher les factures.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Fonction JavaScript pour ouvrir/fermer l'accordéon
        function toggleAccordion(button) {
            const content = button.nextElementSibling;
            if (content.style.display === 'block') {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
                content.style.maxHeight = content.scrollHeight + "px";
            }
        }
    </script>
    <script>
document.addEventListener('DOMContentLoaded', function () {
    const categorieCheckboxes = document.querySelectorAll('.categorie-checkbox'); // Cases à cocher des catégories

    categorieCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            const chantierId = this.dataset.chantierId; // Récupère l'ID du chantier
            const categorieId = this.value; // Récupère l'ID de la catégorie
            console.log(`Case cochée pour la catégorie : ${categorieId}, chantier : ${chantierId}`);

            // Récupérer toutes les listes déroulantes liées au chantier
            const estimationSelects = document.querySelectorAll(`.estimation-select[data-chantier-id="${chantierId}"]`);

            if (!estimationSelects.length) {
                console.error(`Aucune liste déroulante d'estimations trouvée pour le chantier ${chantierId}`);
                return;
            }

            if (this.checked) {
                console.log(`Récupération des estimations pour catégorie : ${categorieId}, chantier : ${chantierId}`);

                // Effectuer une requête AJAX pour obtenir les estimations liées
                fetch(`/estimations-by-categorie?categorie_id=${categorieId}&chantier_id=${chantierId}`)

                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`Erreur HTTP ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(`Données reçues pour catégorie ${categorieId}, chantier ${chantierId}:`, data);

                        // Mettre à jour toutes les listes déroulantes correspondantes
                        estimationSelects.forEach(estimationSelect => {
                            estimationSelect.innerHTML = ''; // Vider la liste des options actuelles

                            // Ajouter une option par défaut
                            const defaultOption = document.createElement('option');
                            defaultOption.textContent = 'Sélectionnez une estimation';
                            defaultOption.value = '';
                            estimationSelect.appendChild(defaultOption);

                            // Ajouter les nouvelles options
                            data.forEach(estimation => {
                                const option = document.createElement('option');
                                option.value = estimation.id;
                                option.textContent = estimation.intitule;
                                estimationSelect.appendChild(option);
                            });

                            if (data.length === 0) {
                                console.warn(`Aucune estimation trouvée pour la catégorie ${categorieId} et le chantier ${chantierId}`);
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Erreur lors de la récupération des estimations:', error);
                    });
            } else {
                console.log(`Case décochée pour catégorie ${categorieId}. Réinitialisation des listes déroulantes.`);

                // Réinitialiser les listes déroulantes associées
                estimationSelects.forEach(estimationSelect => {
                    estimationSelect.innerHTML = '';
                    const defaultOption = document.createElement('option');
                    defaultOption.textContent = 'Sélectionnez une estimation';
                    defaultOption.value = '';
                    estimationSelect.appendChild(defaultOption);
                });
            }
        });
    });
});

</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const estimationSelects = document.querySelectorAll('.estimation-select'); // Listes des estimations

    estimationSelects.forEach(estimationSelect => {
        estimationSelect.addEventListener('change', function () {
            const estimationId = this.value; // ID de l'estimation sélectionnée
            const bonCommandeSelect = document.querySelector(`.bon-commande-select[data-estimation-id="${this.dataset.chantierId}"]`);

            if (!bonCommandeSelect) {
                console.error('Aucune liste déroulante de bons de commande trouvée.');
                return;
            }

            if (estimationId) {
                console.log(`Récupération des bons de commande pour estimation : ${estimationId}`);

                // Requête AJAX pour récupérer les bons de commande liés
                fetch(`/bons-commande-by-estimation?estimation_id=${estimationId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`Erreur HTTP ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(`Données reçues pour estimation ${estimationId}:`, data);

                        // Mettre à jour la liste déroulante des bons de commande
                        bonCommandeSelect.innerHTML = ''; // Vider les options actuelles

                        const defaultOption = document.createElement('option');
                        defaultOption.textContent = 'Sélectionnez un bon de commande';
                        defaultOption.value = '';
                        bonCommandeSelect.appendChild(defaultOption);

                        data.forEach(bonCommande => {
                            const option = document.createElement('option');
                            option.value = bonCommande.id;
                            option.textContent = bonCommande.intitule;
                            bonCommandeSelect.appendChild(option);
                        });

                        if (data.length === 0) {
                            console.warn(`Aucun bon de commande trouvé pour l'estimation ${estimationId}`);
                        }
                    })
                    .catch(error => {
                        console.error('Erreur lors de la récupération des bons de commande:', error);
                    });
            } else {
                console.log('Estimation désélectionnée. Réinitialisation des bons de commande.');

                // Réinitialiser la liste déroulante
                bonCommandeSelect.innerHTML = '';
                const defaultOption = document.createElement('option');
                defaultOption.textContent = 'Sélectionnez un bon de commande';
                defaultOption.value = '';
                bonCommandeSelect.appendChild(defaultOption);
            }
        });
    });
});
</script>
{% endblock %}