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

      <!-- ================= Sélection client / stock / catégorie / produit ================= -->
      <section>
        <div class="card">
          <div class="card-header bg-info text-white">
            <h4>Nouvelle Facture</h4>
          </div>
          <div class="card-body">
            <div class="row">
              <!-- Client -->
              <div class="col-md-3">
                <label>Distination:</label>
                <select class="form-control" v-model="iddistination" @change="getcatdistination">
                   <option v-for="l in lieux" :key="l.id" :value="l.id">{{ l.lieu }}</option>
                </select>
            
              </div>


             
              <!-- Catégorie -->
              <div class="col-md-3">
                <label>Catégorie :</label>
                <select class="form-control" v-model="idcatdistination" >
                  <option v-for="cat in categories1" :key="cat.id" :value="cat.id">{{ cat.topcat }}</option>
                </select>
              </div>





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

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

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

            <!-- Remise + TVA + Paiement -->
            <div class="row mt-3">
              <div class="col-md-4">
                <label>Remise (%) & TVA :</label>
                <div class="input-group">
                  <input type="number" class="form-control" v-model.number="remise" @input="calculateTotal" placeholder="Remise">
                  <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-4">
                <label>Mode de paiement :</label>
                <select class="form-control" v-model="idmod">
                  <option v-for="m in modepayements" :key="m.id" :value="m.id">{{ m.mode }}</option>
                </select>
              </div>

              <div class="col-md-4 d-flex align-items-end">
                <button class="btn btn-info w-100" @click="addcart(idproduit)">Ajouter produit</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ================= Table Panier ================= -->
      <section class="mt-3">
        <div class="card">
          <div class="card-body table-responsive">
            <table class="table table-striped table-hover">
              <thead class="bg-info text-white">
                <tr>
                  <th>Ref</th>
                  <th>Article</th>
                  <th>Quantité</th>
                  <th>Prix</th>
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(cart, index) in carts" :key="index">
                  <td>{{ cart.ref }}</td>
                  <td>{{ cart.nom }}</td>
                  <td>
                    <input type="number" class="form-control" v-model.number="cart.quantite" @input="updateTotal(cart)">
                  </td>
                  <td>
                    <input type="number" class="form-control" v-model.number="cart.prixvente" @input="updateTotal(cart)">
                  </td>
                  <td>{{ cart.total }} DH</td>
                </tr>
              </tbody>
            </table>

            <!-- Totaux -->
            <div class="text-right mt-3">
              <h5>Total HT : {{ totalSansTVA }} DH</h5>
              <h5>Remise : {{ remiseValue }} DH</h5>
              <h5>Total après remise : {{ totalAvecRemise }} DH</h5>
              <h5>TVA ({{ tva }}%) : {{ tvaValue }} DH</h5>
              <h4 class="font-weight-bold">Total TTC : {{ totalAvecTVA }} DH</h4>
            </div>
          </div>
        </div>
      </section>

      <!-- ================= Paiement Spécifique ================= -->
      <section class="mt-3" v-if="idmod === 2 || idmod === 3">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <!-- Crédit -->
              <div class="col-md-4" v-if="idmod === 2">
                <label>Avance :</label>
                <input type="number" class="form-control" v-model.number="avance">
              </div>

              <!-- Chèque -->
              <div class="col-md-4" v-if="idmod === 3">
                <label>Numéro de Chèque :</label>
                <input type="text" class="form-control" v-model="numeroCheque">
              </div>

              <div class="col-md-4" v-if="idmod === 3">
                <label>Banque :</label>
                <input type="text" class="form-control" v-model="banqueCheque">
              </div>

              <div class="col-md-4" v-if="idmod === 3">
                <label>Date d'Échéance :</label>
                <input type="date" class="form-control" v-model="datecheque">
              </div>
            </div>
          </div>
        </div>
      </section>

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

<script>
export default {
  props: ["userid"],
  data() {
    return {
      // Sélections
      idclient: "",
      iddistination: "",
      idcatdistination:"",
      idlieustock: "",
      idcat: "",
      idproduit: "",

      // Données
      clients: [],
      lieux: [],
      categories: [],
      categories1: [],
      prods: [],
      modepayements: [],

      // Panier
      carts: [],

      // Totaux
      remise: 0,
      tva: 0,
      totalSansTVA: 0,
      remiseValue: 0,
      totalAvecRemise: 0,
      tvaValue: 0,
      totalAvecTVA: 0,

      // Paiement
      idmod: 1,
      avance: 0,
      numeroCheque: "",
      banqueCheque: "",
      datecheque: "",

      // Autres
      showclient: false,
    };
  },
  created() {
    this.getclients();
    this.getlieux();
    this.getmode();
  },
  methods: {
    // === API Calls ===
     getclients() {
      axios.get('./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;
      });
    },

    getcatdistination() {
      axios.get("./api/topcatbyid/" + this.iddistination).then(res => {
        this.categories1 = res.data.topcats;
      });
    },





    getproduitbyid() {
      axios.get("./api/getproduitbycat/" + this.idcat).then(res => {
        this.prods = res.data.produits;
      });
    },
    getmode() {
      axios.get("./modepayements").then(res => {
        this.modepayements = res.data.modepayements;
      });
    },

    // === Panier ===
    addcart(idproduit) {
      const produit = this.prods.find(p => p.id === idproduit);
      if (!produit) return;
      let item = this.carts.find(c => c.id === idproduit);
      if (item) {
        item.quantite++;
        item.total = item.quantite * item.prixvente;
      } else {
        this.carts.push({
          id: produit.id,
          ref: produit.ref,
          nom: produit.nom,
          quantite: 1,
          prixvente: produit.prixvents,
          stock: produit.stock,
          total: produit.prixvents,
        });
      }
      this.calculateTotal();
    },
    updateTotal(cart) {
      if (cart.quantite <= 0) cart.quantite = 1;
      if (cart.quantite > cart.stock) {
        alert("Stock insuffisant !");
        cart.quantite = cart.stock;
      }
      cart.total = cart.prixvente * cart.quantite;
      this.calculateTotal();
    },
    calculateTotal() {
      this.totalSansTVA = this.carts.reduce((s, c) => s + c.total, 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;
    },

    // === Paiement ===
    addpay() {
   

      axios.post("./api/addvente", {
        iduser: this.userid,
        stockdistination_id: this.iddistination,
        catdistination_id: this.idcatdistination,
        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,
        modepayement_id: this.idmod,
        avance: this.avance,
 
      })
      .then(res => {
        if (res.data && res.data.id) {
          alert("Vente enregistrée !");
       
        }
      })
      .catch(err => {
        console.error(err);
        alert("Erreur lors de l'enregistrement !");
      });
    },
  },
};
</script>
