{% 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 Devis Clients</h2>
                    <a href="{% url "liste_devis" %}" 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_devis" %}">Liste Devis</a></li>
                    </ul>                
                </div>
            </div>
        </div>
        <div class="invoice">
            <form class="card-body" action="{% url "valider_devis" %}" 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">Client</label></th>
                                        <th style="text-align: center"><label for="date_edition"> Date Profoma </label></th>
                                        <th style="text-align: center"><label for="date_validite"> Valable jusqu'au </label></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <input type="text" id="client_search" class="form-control" placeholder="Rechercher un client" autocomplete="on">
                                            <input type="hidden" name="client" id="client_id">
                                            <div id="client_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 proforma" class="form-control" aria-label="Objet Proforma" 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>
                            <textarea name="commentaires" class="form-control"></textarea>
                        </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>
                                            <div class="row">
                                                <div class="col-4">
                                                    TVA 18%
                                                </div>
                                                <div class="col-8">
                                                    <select name="tva_active" id="tva_active" class="form-control">
                                                        <option value="non">Non</option>
                                                        <option value="oui">Oui</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="number" name="tva" id="tva" readonly class="text-white bg-secondary ml-5"> FCFA
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Total TTC</td>
                                        <td><input type="number" name="montant_total_ttc" id="montant_total_ttc" readonly class="text-white bg-secondary ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="row">
                                                <div class="col-4">
                                                    BIC 2%
                                                </div>
                                                <div class="col-8">
                                                    <select name="bic_active" id="bic_active" class="form-control">
                                                        <option value="non">Non</option>
                                                        <option value="oui">Oui</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="number" name="bic" id="bic" readonly class="text-white bg-secondary ml-5"> FCFA
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: right"><strong>Frais de port</strong></td>
                                        <td><input type="number" min="0.00" name="frais_port" id="frais_port" class="text-white bg-info ml-5"> FCFA</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: right"><strong>Main d'oeuvre</strong></td>
                                        <td><input type="number" min="0.00" name="main_doeuvre" id="main_doeuvre" class="text-white bg-info 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 Devis">
                    </div>
                </div>
            </form>
            
            <script>

                document.addEventListener('DOMContentLoaded', function() {

                    // 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 clients
                    const clientSearch = document.getElementById('client_search');
                    if (clientSearch) {
                        clientSearch.addEventListener('input', debounce(function() {
                            let query = this.value;
                            if (query.length >= 2) {
                                fetch(`/rechercher_client/?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('client_list');
                                    resultList.innerHTML = '';
                                    if (data.clients.length > 0) {
                                        data.clients.forEach(client => {
                                            let item = document.createElement('div');
                                            item.textContent = client.nom;
                                            item.setAttribute('data-id', client.id);
                                            item.classList.add('client-item');
                                            item.addEventListener('click', function() {
                                                document.getElementById('client_search').value = client.nom;
                                                document.getElementById('client_id').value = client.id;
                                                resultList.innerHTML = '';
                                            });
                                            resultList.appendChild(item);
                                        });
                                    } else {
                                        resultList.innerHTML = '<div>Aucun client trouvé</div>';
                                    }
                                })
                                .catch(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.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() {
                        // Récupération des éléments du DOM
                        const montantTotalInput = document.getElementById('montant_total');
                        const tvaInput = document.getElementById('tva');
                        const montantTotalTtcInput = document.getElementById('montant_total_ttc');
                        const bicInput = document.getElementById('bic');
                        const netAPayerInput = document.getElementById('net_a_payer');
                        const fraisPortInput = document.getElementById('frais_port');
                        const mainDoeuvreInput = document.getElementById('main_doeuvre');
                
                        // Calcul du montant HT
                        let montantTotal = 0;
                        document.querySelectorAll('input[name="total[]"]').forEach(function(input) {
                            montantTotal += parseFloat(input.value) || 0;
                        });
                        montantTotalInput.value = montantTotal.toFixed(2);
                
                        // Récupération des valeurs
                        const tvaActive = document.getElementById('tva_active').value;
                        const bicActive = document.getElementById('bic_active').value;
                        const fraisPort = parseFloat(fraisPortInput.value) || 0;
                        const mainDoeuvre = parseFloat(mainDoeuvreInput.value) || 0;
                
                        // Calcul de la TVA
                        const tva = tvaActive === 'oui' ? (montantTotal * 0.18) : 0;
                
                        // Calcul du BIC
                        const bic = bicActive === 'oui' ? ((montantTotal + tva) * 0.02) : 0;
                
                        // Calcul du montant TTC
                        const montantTotalTtc = montantTotal + tva + bic;
                
                        // Calcul du NET A PAYER
                        const netAPayer = montantTotalTtc + fraisPort + mainDoeuvre;
                
                        // Mise à jour des champs
                        tvaInput.value = tva.toFixed(2);
                        bicInput.value = bic.toFixed(2);
                        montantTotalTtcInput.value = montantTotalTtc.toFixed(2);
                        netAPayerInput.value = netAPayer.toFixed(2);
                    }
                
                    // Attacher des événements de mise à jour
                    document.querySelectorAll('input, select').forEach(element => {
                        element.addEventListener('input', updateCalculations);
                        element.addEventListener('change', updateCalculations);
                    });
                
                    // Initialisation
                    updateCalculations();
                });
                
                
            </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 %}