{% extends "base.html" %}
{% load static %}
{% load custom_filters %}
{% block contenu %}
{% include "header.html" %}
{% include "leftbar.html" %}
{% include "rightbar.html" %}
{% include "chat.html" %}
<section class="content">
    <section class="main--content">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-7 col-md-6 col-sm-12">
                    <h2>Création Facture Consultant</h2>
                    <a href="{% url "liste_facture_consultant" %}" class="btn btn-danger btn-sm">Annuler</a>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12">                
                    <ul class="breadcrumb float-md-right">
                        <li class="breadcrumb-item"><a href="{% url "accueil_admin" %}"><i class="zmdi zmdi-home"></i> Accueil</a></li>
                        <li class="breadcrumb-item active"><a href="{% url "liste_facture_consultant" %}">Liste Factures Clients</a></li>
                    </ul>                
                </div>
            </div>
        </div>
        <div class="invoice">
            <form class="card-body" action="{% url "valider_facture_consultant" %}" method="post">
                {% csrf_token %}
                <div class="card shadow mb-4 col-12">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <div id="error-message" class="alert alert-danger" style="display: none;"></div>
                                <thead class="card-header">
                                    <tr>
                                        <th><label for="client">Consultant</label></th>
                                        <th style="text-align: center"><label for="date_edition"> Date Facture </label></th>
                                        <th style="text-align: center"><label for="date_validite"> Date Validité </label></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <input type="text" id="consultant_search" class="form-control" placeholder="Rechercher un consultant" autocomplete="on">
                                            <input type="hidden" name="consultant" id="consultant_id">
                                            <div id="consultant_list"></div>
                                        </td>                                        
                                        <td>
                                            <input type="date" name="date_edition" class="form-control" id="date_edition" required>
                                        </td>
                                        <td>
                                            <input type="date" name="date_validite" class="form-control" id="date_validite" required>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-4 col-12">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <thead class="card-header">
                                    <tr>
                                        <th><label>Objet de la facture</label></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <input type="text" name="objet" Placeholder="Objet de votre facture" class="form-control" aria-label="Objet Facture" id="objet">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="table-responsive">
                            <input type="hidden" name="produits" id="produits" value="">
                            <table class="table table-bordered" id="table_lignes" width="100%" cellspacing="0">
                                <thead class="card-header">
                                    <tr>
                                        <th class="col-3">Service</th>
                                        <th style="text-align: center" class="col-2">Unité de mesure</th>
                                        <th style="text-align: center" class="col-2">Quantité</th>
                                        <th style="text-align: center" class="col-2">Prix unitaire</th>
                                        <th style="text-align: center" class="col-2">Total</th>
                                        <th style="text-align: center" class="col-1">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="ligne_produits">
                                    <!-- Lignes de produits ou services ajoutées dynamiquement ici -->
                                </tbody>
                            </table>
                            <div style="text-align: right">
                                <button type="button" class="btn btn-info btn-sm" id="ajouter_ligne">Ajouter une ligne</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 col-sm-12 card shadow mb-4">
                        <div class="form-group">
                            <label><strong></strong></label>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-12 card shadow mb-4">
                        <div class="form-group">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <thead class="card-header">
                                    <tr>
                                        <th class="col-4"><label for="produit"> </label></th>
                                        <th class="col-3" style="text-align: center"><label for="action"> Montant </label></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Total HT</td>
                                        <td> <input type="number" name="montant_total" id="montant_total" readonly class="text-white bg-secondary ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td>Remise</td>
                                        <td> <input type="number" name="remise" id="remise" class="ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td>TVA 18%</td>
                                        <td><input type="number" name="tva" id="tva" class="ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td>Total TTC</td>
                                        <td> <input type="number" name="montant_ttc" id="montant_ttc" readonly class="text-white bg-secondary ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td>BIC 2%</td>
                                        <td> <input type="number" name="bic" id="bic" class="ml-5"> FCFA </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: right"><strong>NET A PAYER</strong></td>
                                        <td> <input type="number" name="net_a_payer" id="net_a_payer" readonly class="text-white bg-success ml-5"> FCFA</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="col-8">
                    </div>
                    <div class="col-2">
                        <a href="{% url "liste_devis" %}" class="btn btn-lg btn-primary">Annuler</a>
                    </div>
                    <div class="col-2">                            
                        <input class="btn btn-lg btn-success" type="submit" value="Valider Facture">
                    </div>
                </div>
            </form>
            
            <script>
                document.addEventListener('DOMContentLoaded', function() {

                    // Initialiser les champs à 0 lors du chargement de la page
                    function initialiserChamps() {
                        const montantTotalInput = document.getElementById('montant_total');
                        const remiseInput = document.getElementById('remise');
                        const tvaInput = document.getElementById('tva');
                        const bicInput = document.getElementById('bic');
                        
                        // Initialiser les valeurs à 0
                        montantTotalInput.value = "0.00";
                        remiseInput.value = "0.00";
                        tvaInput.value = "0.00";
                        bicInput.value = "0.00";
                    }
                
                    // Fonction debounce pour limiter les requêtes fréquentes
                    function debounce(func, delay) {
                        let timeout;
                        return function(...args) {
                            clearTimeout(timeout);
                            timeout = setTimeout(() => func.apply(this, args), delay);
                        };
                    }
                
                    // Ajouter l'événement pour la recherche de consultants
                    const consultantSearch = document.getElementById('consultant_search');
                    if (consultantSearch) {
                        consultantSearch.addEventListener('input', debounce(function() {
                            let query = this.value;
                            if (query.length >= 2) {
                                fetch(`/rechercher_consultant/?q=${query}`, {
                                    method: 'GET',
                                    headers: {
                                        'X-Requested-With': 'XMLHttpRequest'
                                    }
                                })
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Erreur lors de la requête de recherche.');
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    let resultList = document.getElementById('consultant_list');
                                    resultList.innerHTML = '';
                                    if (data.consultants.length > 0) {
                                        data.consultants.forEach(consultant => {
                                            let item = document.createElement('div');
                                            item.textContent = consultant.nom;
                                            item.setAttribute('data-id', consultant.id);
                                            item.classList.add('consultant-item');
                                            item.addEventListener('click', function() {
                                                document.getElementById('consultant_search').value = consultant.nom;
                                                document.getElementById('consultant_id').value = consultant.id;
                                                resultList.innerHTML = '';
                                            });
                                            resultList.appendChild(item);
                                        });
                                    } else {
                                        resultList.innerHTML = '<div>Aucun consultant trouvé</div>';
                                    }
                                })
                                .catch(error => {
                                    console.error('Erreur:', error);
                                });
                            }
                        }, 300)); // Utiliser un délai de 300ms pour éviter les requêtes trop fréquentes
                    }
                
                    const ajouterLigneButton = document.getElementById('ajouter_ligne');
                    const tbodyProduits = document.getElementById('ligne_produits');
                
                    ajouterLigneButton.addEventListener('click', function() {
                        const newRow = document.createElement('tr');
                        newRow.classList.add('ligne-produit'); // Ajouter une classe pour le recalcul
                        newRow.innerHTML = `
                            <td><input type="text" class="form-control" name="service[]" placeholder="Nom du service"></td>
                            <td><input type="text" class="form-control" name="unite_mesure[]" placeholder="Unité de mesure"></td>
                            <td><input type="number" class="form-control" name="quantite[]" value="1" min="1"></td>
                            <td><input type="number" class="form-control" name="tarif_unitaire[]" value="0" step="0.01"></td>
                            <td><input type="number" class="form-control" name="total[]" value="0" readonly></td>
                            <td><button type="button" class="btn btn-danger btn-sm supprimer-ligne">Supprimer</button></td>
                        `;
                        tbodyProduits.appendChild(newRow);
                        attachEventListeners(newRow);
                    });
                
                    function attachEventListeners(row) {
                        const tarifUnitaireField = row.querySelector('input[name="tarif_unitaire[]"]');
                        const totalField = row.querySelector('input[name="total[]"]');
                        const quantiteField = row.querySelector('input[name="quantite[]"]');
                
                        const deleteButton = row.querySelector('.supprimer-ligne');
                        deleteButton.addEventListener('click', function() {
                            row.remove();
                            updateCalculations();
                        });
                
                        // Event listener pour recalculer le total lors du changement de tarif unitaire ou de quantité
                        tarifUnitaireField.addEventListener('input', updateTotal);
                        quantiteField.addEventListener('input', updateTotal);
                
                        function updateTotal() {
                            const tarifUnitaire = parseFloat(tarifUnitaireField.value) || 0;
                            const quantite = parseFloat(quantiteField.value) || 0;
                            totalField.value = (tarifUnitaire * quantite).toFixed(2);
                            updateCalculations(); // Recalculer les totaux après chaque mise à jour
                        }
                    }
                
                    function updateCalculations() {
                        let montantTotal = 0;
                        const lignesProduit = document.querySelectorAll('.ligne-produit');
                        
                        lignesProduit.forEach(function(row) {
                            const totalField = row.querySelector('input[name="total[]"]');
                            const totalValue = parseFloat(totalField.value) || 0;
                            montantTotal += totalValue;
                        });
                
                        const montantTotalInput = document.getElementById('montant_total');
                        montantTotalInput.value = montantTotal.toFixed(2);
                
                        recalculerMontants(); // Recalculer les autres montants après mise à jour
                    }
                
                    function recalculerMontants() {
                        var remiseInput = document.getElementById('remise');
                        var tvaInput = document.getElementById('tva');
                        var montantTotalTTCInput = document.getElementById('montant_ttc');
                        var bicInput = document.getElementById('bic');
                        var netAPayerInput = document.getElementById('net_a_payer');
                        var montantTotalInput = document.getElementById('montant_total');
                        
                        var montantTotal = parseFloat(montantTotalInput.value) || 0;
                        var remise = parseFloat(remiseInput.value) || 0;
                        var tva = parseFloat(tvaInput.value) || 0;
                        var bic = parseFloat(bicInput.value) || 0;
                    
                        // Calcul du montant HT après remise
                        var montantHTApresRemise = montantTotal - remise;
                    
                        // Calcul du montant TTC en ajoutant la TVA manuellement saisie
                        var montantTTC = montantHTApresRemise + tva;
                        montantTotalTTCInput.value = montantTTC.toFixed(2);
                    
                        // Calcul du montant net à payer (incluant BIC)
                        var netAPayer = montantTTC + bic;
                        netAPayerInput.value = netAPayer.toFixed(2);
                    }
                    
                    // Écouteurs d'événements pour recalculer lors des changements
                    const remiseInput = document.getElementById('remise');
                    const tvaInput = document.getElementById('tva');
                    const bicInput = document.getElementById('bic');
                    
                    remiseInput.addEventListener('input', recalculerMontants);
                    tvaInput.addEventListener('input', recalculerMontants);
                    bicInput.addEventListener('input', recalculerMontants);
                    
                    // Appel initial pour calculer au chargement de la page
                    initialiserChamps(); // Initialisation des champs à 0
                    recalculerMontants();                                              
                });
            </script>
                
            <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title center-align">Confirmation de suppression</h5>
                        </div>
                        <div class="modal-body">
                            Êtes-vous sûr de vouloir supprimer cette ligne ?
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-round waves-effect" id="confirmDeleteBtn">Supprimer</button>
                            <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Annuler</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de confirmation pour enregistrer la facture -->
            <div id="confirmationModalSave" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title center-align">Confirmation d'enregistrement</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Êtes-vous sûr de vouloir enregistrer cette facture proforma ?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                            <button type="button" class="btn btn-success" id="confirmSaveBtn">Enregistrer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
{% endblock %}