<template>
  <div class="content-header">
    <div class="container-fluid">

    {{userid}} {{idvente}} {{clients}}
      <!-- Section pour sélectionner le client, la catégorie, le produit, la remise et la TVA -->
      <section>
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header " style="background-color: rgb(23, 162, 184);color: white;">
                <h4>Facture</h4>
              </div>
              <div class="card-body">
                <div class="row">
                  <!-- Sélection du client -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="clientSelect">Client :</label>
                      <select class="form-control rounded" id="clientSelect" v-model="idclient"> 
                        <option v-for="client in clients" :value="client.id">{{ client.nom }} </option>
                      </select>
                      <p v-if="showclient" class="text-danger">Ce champ est obligatoire</p>
                    </div>
                  </div>

                  <!-- Choisir Catégorie -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="categorySelect">Choisir Catégorie :</label>
                      <select class="form-control rounded" id="categorySelect" @change="getproduitbyid" v-model="idcat">
                        <option v-for="tcat in catgories" :key="tcat.id" :value="tcat.id">
                          {{ tcat.topcat }} 
                        </option>
                      </select>
                    </div>
                  </div>

                  <!-- Sélectionner un produit -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="productSelect">Sélectionner un produit :</label>
                      <select class="form-control rounded" id="productSelect" v-model="idproduit">
                        <option v-for="prod in prods" :key="prod.id" :value="prod.id">
                          {{ prod.nom }}*{{prod.ref }}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>

                <!-- Section pour la remise, TVA et mode de paiement -->
                <div class="row">
                  <!-- Champ Remise et TVA combinés -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="remiseTva">Remise et TVA :</label>
                      <div class="input-group">
                        <input type="number" class="form-control rounded-left" v-model.number="remise" @input="calculateTotal" placeholder="Remise (%)">
                        <select class="form-control rounded-right" v-model="tva" @change="calculateTotal">
                          <option value="0">Pas de TVA</option>
                          <option value="10">10%</option>
                          <option value="20">20%</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- Sélection du mode de paiement -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="modePaiement">Mode de Paiement :</label>
                      <select class="form-control" v-model="idmod">
                        <option v-for="mode in modepayements" :value="mode.id">{{ mode.mode }}</option>
                      </select>
                    </div>
                  </div>

                  <!-- Bouton Ajouter -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>&nbsp;</label> <!-- Espace pour aligner avec les autres champs -->
                      <button  style="background-color: rgb(23, 162, 184);color: white;" class="btn btn-primary btn-block" @click="addcart(idproduit)">Ajouter produit</button>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Section pour afficher la table des produits ajoutés -->
      <section>
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <!-- Ajouter la classe table-responsive pour gérer les petits écrans -->
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead style="background-color: rgb(23, 162, 184); color: white;">
                <tr>
                  <th>ref</th>
                  <th>Article</th>
                  <th>Quantité</th>
                  <th>P.v</th>
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(cart, index) in carts" :key="index">
                  <td>{{ cart.id }}</td>
                  <td>{{ cart.nom }}</td>
                  <td>
                    <input type="number" class="form-control rounded" v-model.number="cart.quantite" @input="updateTotal(cart)">
                  </td>
                  <td>
  <input type="number" class="form-control rounded" v-model.number="cart.prixvente" @input="updateTotal(cart)">
</td>

                  <td>{{ cart.total }} DH</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- Affichage des totaux avec Remise et TVA en bas à droite -->
          <div class="d-flex justify-content-end mt-4">
            <div class="text-right">
              <h5><strong>Total sans TVA:</strong> {{ totalSansTVA }} DH</h5>
              <h5><strong>Remise:</strong> {{ remiseValue }} DH</h5>
              <h5><strong>Total avec remise:</strong> {{ totalAvecRemise }} DH</h5>
              <h5><strong>TVA ({{ tva }}%):</strong> {{ tvaValue }} DH</h5>
              <h4 class="font-weight-bold"><strong>Total TVA incluse:</strong> {{ totalAvecTVA }} DH</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

      <section>
        <div class="row">
          <div class="col-md-12">
            <div class="card">
             <div class="card-body">
        
                <!-- Inputs conditionnels pour le mode de paiement -->
                <div class="row" v-if="idmod === 2 || idmod === 3"> <!-- Crédit = 2, Chèque = 3 -->
                  <div class="col-md-4" v-if="idmod === 3">
                    <div class="form-group">
                      <label for="numeroCheque">Numéro de Chèque :</label>
                      <input type="text" class="form-control" v-model="numeroCheque" placeholder="Entrez le numéro du chèque">
                    </div>
                  </div>

                  <div class="col-md-4" v-if="idmod === 3">
                    <div class="form-group">
                      <label for="banqueCheque">Banque :</label>
                      <input type="text" class="form-control" v-model="banqueCheque" placeholder="Entrez le nom de la banque">
                    </div>
                  </div>

                  <div class="col-md-4" v-if="idmod === 3">
                    <div class="form-group">
                      <label for="dateEcheance">Date d'Échéance :</label>
                      <input type="date" class="form-control" v-model="datecheque">
                    </div>
                  </div>
                  <div class="col-md-4" v-if="idmod === 2">
                    <div class="form-group">
                      <label for="numeroCheque">Avance :</label>
                      <input type="text" class="form-control" v-model="avance" placeholder="Entrez Avance">
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      
        
        </section>

      <button class="btn btn-success" @click="addpay">Enregistrer</button>
    </div>
  </div>
</template>




<script>
export default {
props: ['userid', 'idvente'],
  data() {
    return {
      idcat: '',
      idproduit: '',
      clients: [],
      prods: [],
      catgories: [],
      modepayements:[],
      carts: [], // Liste pour stocker les produits ajoutés au panier
      remise: 0, // Remise initialisée à 0%
      tva: 0, // TVA sélectionnée initialisée à 0%
      totalSansTVA: 0, // Total sans TVA
      remiseValue: 0, // Valeur de la remise
      totalAvecRemise: 0, // Total après remise
      tvaValue: 0, // Valeur de la TVA
      totalAvecTVA: 0, // Total avec TVA
      idlieutoock: 1,
      idclient: '',
      dateecheance: '',
      idmod:1,
      date: '',
      avance:0,
      datecheque:'',
      banqueCheque:'',
      numeroCheque:'',


    };
  },
  created() {
    this.getclients();
    this.getcatebaylieuxfirst();
    this. getmode();
  },
  methods: {
    getmode(){
     
     axios.get('./modepayements')
  .then(response =>{
  this.modepayements = response.data.modepayements;
  
  })
  .catch(error =>{
  console.log(error);
  })
  },
    getclients() {
      axios.get('./clients')
        .then(response => {
          this.clients = response.data.clients;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getcatebaylieuxfirst() {
      axios.get('./api/topcatbyid/1')
        .then(response => {
          this.catgories = response.data.topcats;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getproduitbyid() {
      axios.get('./api/getproduitbycat/' + this.idcat)
        .then(response => {
          this.prods = response.data.produits;
        })
        .catch(error => {
          console.log(error);
        });
    },
    addcart(idproduit) {
      const produit = this.prods.find(prod => prod.id === idproduit);

      if (!produit) return; // Si le produit n'est pas trouvé, on arrête.

      let productInCart = this.carts.find(item => item.id === idproduit);

      if (productInCart) {
        productInCart.quantite++;
        productInCart.total = productInCart.prixvente * productInCart.quantite;
      } else {
        // Ajouter le produit au panier avec une quantité initiale de 1
        this.carts.push({
          id: produit.id,
          nom: produit.nom,
          quantite: 1,
          stock: produit.stock,
          prixun:produit.prixun,
          stock: produit.stock,
          prixvente: produit.prixvents, // Vérifie si c'est bien prixvente
          total: produit.prixvents // Initialisation du total
        });
      }

      this.calculateTotal(); // Recalculer le total après l'ajout d'un produit
    },
    updateTotal(cart) {
      // Vérifier si la quantité est inférieure à 0
   

      // Vérifier si la quantité dépasse le stock disponible
      if (cart.quantite > cart.stock) {
        alert("La quantité demandée dépasse le stock disponible.");
        cart.quantite = cart.stock;
      }

      // Mettre à jour le total pour ce produit
      cart.total = cart.prixvente * cart.quantite;

      // Recalculer le total général
      this.calculateTotal();
    },
    calculateTotal() {
      this.totalSansTVA = this.carts.reduce((sum, cart) => sum + (cart.prixvente * cart.quantite), 0);
      this.remiseValue = (this.remise / 100) * this.totalSansTVA;
      this.totalAvecRemise = this.totalSansTVA - this.remiseValue;
      this.tvaValue = (this.tva / 100) * this.totalAvecRemise;
      this.totalAvecTVA = this.totalAvecRemise + this.tvaValue;
    },
    addpay() {
      // Ajouter le paiement
      if (this.idclient && this.carts.length > 0) {
        axios.post('./api/addvente', {
          iduser:this.userid,
          idclient: this.idclient,
          date: this.date,
          modepayement_id:this.idmod,
          dateecheance: this.dateecheance,
          prixtotal: this.totalAvecTVA,
         cart: this.carts,
         tva:    this.tva   ,        // TVA envoyée depuis Vue.js
         remise:  this.remise ,       // Remise envoyée depuis Vue.js
         totalremise: this.remiseValue, // Total des remises
         totaltva:   this.tvaValue,  // Total TVA
         totalhtc: this.totalSansTVA,
         avance:this.avance,
         datecheque:this.datecheque,
      banqueCheque:this.banqueCheque,
      numeroCheque:this.numeroCheque,
        })

        .then(response => {
                // Vérifier si la réponse contient l'ID de la vente
      if (response.data && response.data.id) {
        const venteId = response.data.id; // Récupérer l'ID de la vente
          // Réinitialiser le panier après l'ajout
          this.carts = [];
          this.totalSansTVA = 0;
          this.remiseValue = 0;
          this.totalAvecRemise = 0;
          this.tvaValue = 0;
          this.totalAvecTVA = 0;
          alert("Paiement ajouté avec succès !");
        
        // Rediriger vers le lien ventepdf/id
        window.location.href = `./bonlivraisonpdf/${venteId}`;
      } else {
        alert("L'ID de la vente n'a pas pu être récupéré.");
      }
        })
        .catch(error => {
          console.error(error);
          alert("Erreur lors de l'ajout du paiement !");
        });
      } else {
        alert("Veuillez sélectionner un client et ajouter au moins un produit au panier.");
      }
    }
  }
};
</script>

