<template>
  <div class="content-header">
    <div class="container-fluid">
      <!-- Section pour sélectionner client, lieu stock, catégorie et produit -->
      <section>
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header bg-primary text-white">
                <h4>Nouvelle Vente</h4>
              </div>
              <div class="card-body">
                <div class="row">
                  <!-- Client -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>Client :</label>
                      <select class="form-control rounded" v-model="idclient">
                        <option v-for="client in clients" :key="client.id" :value="client.id">
                          {{ client.nom }}
                        </option>
                      </select>
                    </div>
                  </div>

                  <!-- Lieu stock -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>Lieu de stock :</label>
                      <select class="form-control rounded" v-model="idlieustock" @change="getcatebaylieux">
                        <option v-for="lieu in lieux" :key="lieu.id" :value="lieu.id">
                          {{ lieu.nom }}
                        </option>
                      </select>
                    </div>
                  </div>

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

                  <!-- Produit -->
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>Produit :</label>
                      <select class="form-control rounded" v-model="idproduit">
                        <option v-for="prod in prods" :key="prod.id" :value="prod.id">
                          {{ prod.nom }}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>

                <!-- Remise & TVA -->
                <div class="row">
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>Remise (%):</label>
                      <input type="number" class="form-control" v-model.number="remise" @input="calculateTotal">
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>TVA :</label>
                      <select class="form-control" v-model="tva" @change="calculateTotal">
                        <option value="0">0%</option>
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary btn-block" @click="addcart(idproduit)">
                      Ajouter au panier
                    </button>
                  </div>
                </div>
              </div> <!-- card-body -->
            </div>
          </div>
        </div>
      </section>

      <!-- Table panier -->
      <section>
        <div class="row mt-3">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>Code</th>
                      <th>Produit</th>
                      <th>Quantité</th>
                      <th>Prix</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" v-model.number="cart.quantite" @input="updateTotal(cart)">
                      </td>
                      <td>{{ cart.prixvente }} DH</td>
                      <td>{{ cart.total }} DH</td>
                    </tr>
                  </tbody>
                </table>

                <!-- Totaux -->
                <div class="text-right mt-3">
                  <h5>Total sans TVA: {{ totalSansTVA }} DH</h5>
                  <h5>Remise: {{ remiseValue }} DH</h5>
                  <h5>Total avec remise: {{ totalAvecRemise }} DH</h5>
                  <h5>TVA ({{ tva }}%): {{ tvaValue }} DH</h5>
                  <h4><strong>Total TTC: {{ totalAvecTVA }} DH</strong></h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <button class="btn btn-success mt-3" @click="addpay">Valider la Vente</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idclient: '',
      clients: [],
      lieux: [],
      idlieustock: '',
      categories: [],
      idcat: '',
      prods: [],
      idproduit: '',
      carts: [],
      remise: 0,
      tva: 0,
      totalSansTVA: 0,
      remiseValue: 0,
      totalAvecRemise: 0,
      tvaValue: 0,
      totalAvecTVA: 0,
    };
  },
  created() {
    this.getclients();
    this.getlieux();
  },
  methods: {
    getclients() {
      axios.get('./api/clients').then(res => {
        this.clients = res.data.clients;
      });
    },
    getlieux() {
      axios.get('./api/lieustock').then(res => {
        this.lieux = res.data.lieustock;
        if (this.lieux.length > 0) {
          this.idlieustock = this.lieux[0].id;
          this.getcatebaylieux();
        }
      });
    },
    getcatebaylieux() {
      axios.get('./api/topcatbyid/' + this.idlieustock).then(res => {
        this.categories = res.data.topcats;
      });
    },
    getproduitbyid() {
      axios.get('./api/getproduitbycat/' + this.idcat).then(res => {
        this.prods = res.data.produits;
      });
    },
    addcart(idproduit) {
      const produit = this.prods.find(p => p.id === idproduit);
      if (!produit) return;
      let existing = this.carts.find(c => c.id === idproduit);
      if (existing) {
        existing.quantite++;
        existing.total = existing.quantite * existing.prixvente;
      } else {
        this.carts.push({
          id: produit.id,
          nom: produit.nom,
          quantite: 1,
          stock: produit.stock,
          prixvente: produit.prixvents,
          total: produit.prixvents
        });
      }
      this.calculateTotal();
    },
    updateTotal(cart) {
      if (cart.quantite <= 0) cart.quantite = 1;
      if (cart.quantite > cart.stock) cart.quantite = cart.stock;
      cart.total = cart.quantite * cart.prixvente;
      this.calculateTotal();
    },
    calculateTotal() {
      let total = this.carts.reduce((sum, c) => sum + c.total, 0);
      this.totalSansTVA = total;
      this.remiseValue = total * (this.remise / 100);
      this.totalAvecRemise = total - this.remiseValue;
      this.tvaValue = this.totalAvecRemise * (this.tva / 100);
      this.totalAvecTVA = this.totalAvecRemise + this.tvaValue;
    },
    async addpay() {
      await axios.post('./api/addvente', {
        client: this.idclient,
        idlieustock: this.idlieustock,
        cart: this.carts,
        remise: this.remise,
        tva: this.tva,
        totalSansTVA: this.totalSansTVA,
        remiseValue: this.remiseValue,
        totalAvecRemise: this.totalAvecRemise,
        tvaValue: this.tvaValue,
        totalAvecTVA: this.totalAvecTVA
      });
      alert("Vente enregistrée !");
    }
  }
};
</script>
