<template>

  <div class="content">
        <div class="row">
          <div class="col-12 ">
              <div class="card-header  bg-warning">
                <div class="row"> 
   
    <div class="col-md-3 font-weight-bold"><i class="fas fa-sharp fa-solid fa-file-invoice-dollar"></i>facture test22
    </div>
    <div class="col-md-3 text-success font-weight-bold"><i class="fas fa-solid fa-user"></i> client : {{ client.nom }} 
    </div>
    <div class="col-md-3 text-primary font-weight-bold"><i class="fas fa-solid fa-phone"></i> tele: {{ client.tele }} 
  
    </div>
    <div class="col-md-3 text-danger font-weight-bold"><i class="fas fa-sharp fa-solid fa-dollar-sign"></i> credit:{{client.monton}} 
    </div>
  </div>
      </div>
              <div class="card-body">
       
    <div class="row"> 
    <div class="col-md-3"> 
      
      <div class="form-group">
        <label for="exampleFormControlSelect1">client</label>
        <select class="form-control"  @change="getclienttbyid" v-model="vente.idclient">
          <option v-for="client in clients" :value="client.id">{{ client.nom }}</option>
      
        </select> 
           <p  v-if="showclient">ce champ est oblicatoir</p>
      </div>
  </div> 
  
  <div class="col-md-6"> 
    <div class="form-group">
        <label for="exampleFormControlSelect1">categorie</label>
        <select class="form-control" @change="getproduitbycat"  v-model="idcategorie">
          <option v-for="categorie in categories" :value="categorie.id">{{ categorie.cat }}</option>
        </select>
        <p  v-if="showcat">ce champ est oblicatoir</p>
      </div>
    </div> 
    <div class="col-md-3"> 
      
      <div class="form-group">
        <label for="exampleFormControlSelect1">mode payement</label>
        <select class="form-control"  v-model="vente.idmod">
          <option v-for="mode in modepayements" :value="mode.id">{{ mode.mode }}</option>
        </select>
        <p  v-if="showmode">ce champ est oblicatoir</p>
      </div>
    </div> 
  
  
  
    <div class="col-md-3"> 
      
      <div class="form-group">
        <label for="exampleFormControlSelect1">produit    <span class="badge badge-success">{{ produit.stock }}</span></label>
        <select class="form-control" @change="getproduitbyid" v-model="idproduit">
          <option v-for="produit in prods" :value="produit.id">{{ produit.nom }}</option>
        </select>
        <p  v-if="showproduit">ce champ est oblicatoir</p>
      </div>
    </div> 
  
    <div class="col-md-3"> 
      
    <div class="form-group">
      <label for="exampleFormControlInput1">changer prix </label>
      <input  type="text" v-model="prixdevente"  class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  
    </div> 
    <div class="col-md-3"> 
      
      <div class="form-group">
        <label for="exampleFormControlInput1">date echeance</label>
      <input v-model="vente.dateecheance" type="date"  class="form-control">
      <p  v-if="showdate">ce champ est oblicatoir</p>
      </div>
    </div>
    
    <div class="col-md-3"> 
  
      <div class="form-group">
     
        <button  @click="addcart(produit,prixdevente)" class="btn btn-primary float-right">ajouter</button>
</div>
     

           </div>
  
              </div>
            </div>
    
     </div>
  
  
  
  <div class="card">
  
    <div class="card-body">
  
      <table  id="example1"  class="table table-bordered table-striped text-center">
                  <thead>
                    <tr>
              
              <th class="text-left">id00</th>
              <th >Prix</th>
              <th width="100">Quantité</th>
              <th >Total</th>
            <th width="60"><i class="fas fa-solid fa-trash"></i></th>
              </tr>
              </thead>
              <tbody>
              
                <tr   v-for="(cart, index) in carts " v-if="cart.id">
               
              
               <td class="text-primary font-weight-bold text-left">{{ cart.nom }}</td>
               <td>{{ cart.prix }} </td>
              <td> <input  style="width:50px;" type="text"   v-model="vente.qty[index]" @keyup="calcule(cart,vente.qty[index])"></td>
              <td>{{ cart.total }}</td>
              <td><button class="btn btn-danger"  @click="deleteRow(index, cart)"><i class="fas fa-solid fa-trash"></i></button></td>
                </tr>
              
            </tbody>
            <tfoot >
     <tr class=" font-weight-bold">
  <td></td><td></td><td>subtotal:</td>  <td>{{subtotal}}</td> </tr>
  <tr class="text-primary font-weight-bold"><td></td><td></td><td>
    tva: <select v-model="porcentag" name="" id="">
  <option value="0" >0 %</option>
  <option value="0.2">20%</option>
  </select></td>  <td>{{tva}}</td></tr>
  <tr class="text-success font-weight-bold">
    <td ></td>
    <td></td>
    <td>total:</td>
  <td>{{vente.prixtotal}}</td></tr>
  
    
    </tfoot>
  </table>
{{vente.idproduit}}
{{vente.qty}}
{{vente.prixdevente}}
{{ vente.dateecheance }}
{{ vente.idmod }}

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

  
  
  
  </template>
  
  
                
  
  <script>
      export default {
          data() {
            return{
              showclient:false,
              showcat:false,
              showmode:false,
              showproduit:false,
              showpdate:false,
              idcategorie:'',
          
              idproduit:'',
              prods:[],
              produit:[],
              clients:[],
              client:[],
              categories:[],
              modepayements:[],
           
              produitid:[],
              prixdevente:'',
              porcentag:'',
              tva:'',
            
              subtotal:0 ,
              total:0,
              carts:[{
                id:'',
             nom:'',
            prix:'',
            qty:'',
           total:0
              }],
              vente:{
                idmod:'',
                dateecheance:'',
                lieustock:'',
                idclient:'',
                prixtotal:'',
                idproduit:[],
                prixdevente:[],
                qty:[],
                total:[],
              }
            }
          },
 created(){
  this.getcategorie();
  this.getclients();
  this. getmode();

          },        
       

    
        
          methods:{
  
              calcule(cart,qty){
          
 cart.total=Number(cart.prix) * Number(qty);
 var subtotal;
              subtotal = this.carts.reduce(function (sum, product) {
                  var lineTotal = parseFloat(product.total);
                  if (!isNaN(lineTotal)) {
                      return sum + lineTotal;
                  }
              }, 0);
  this.subtotal=subtotal;
  this.tva=this.subtotal*this.porcentag;
  this.vente.prixtotal=this.subtotal+this.tva;
              },
      
  
   getcategorie(){
     
     axios.get('./categorie')
  .then(response =>{
  this.categories = response.data.categories;
  
  })
  .catch(error =>{
  console.log(error);
  })
  },
  getmode(){
     
     axios.get('./modepayements')
  .then(response =>{
  this.modepayements = response.data.modepayements;
  
  })
  .catch(error =>{
  console.log(error);
  })
  },
   getproduitbycat(){
  
        axios.get('./getproduitbycat/'+this.idcategorie)
   .then(response =>{
   this.prods = response.data.produits;
  
   })
   .catch(error =>{
   console.log(error);
   })
   },
   getproduitbyid(){
  
  axios.get('./produitbyid/'+this.idproduit)
  .then(response =>{
  this.produit = response.data.produit;
  this.prixdevente=this.produit.prixvents

  })
  .catch(error =>{
  console.log(error);
  })
  },  
  
  getclients(){
        axios.get('./clients')
   .then(response =>{
  
  this.clients = response.data.clients
  
   })
   .catch(error =>{
   console.log(error);
   })
   },
   getclienttbyid(){
  
  axios.get('./clientbyid/'+this.vente.idclient)
  .then(response =>{
  this.client = response.data.client
  
  })
  .catch(error =>{
  console.log(error);
  })
  }, 
  
  
  addcart(produit,prixdevente){
    if( !this.vente.dateecheance){
      this.showdate=true;
    }
    if( !this.vente.idmod){
      this.showmode=true;
    }
    if( !this.vente.idclient){
    
    this.showclient=true;
    }
    if( !this.idcategorie){
      this.showcat=true;
    }
    if( !this.idproduit){
      this.showproduit=true;
    }
  

    this.vente.qty.push(1);
this.vente.idproduit.push(produit.id);
this.vente.prixdevente.push(prixdevente);

   this.carts.push(
   {
            id:produit.id,
            nom:produit.nom,
            prix:this.prixdevente,
             qty:this.vente.qty,
            total:this.prixdevente,

   }
   );

  
   var subtotal, total;
              subtotal = this.carts.reduce(function (sum, product) {
                  var lineTotal = parseFloat(product.total);
                  if (!isNaN(lineTotal)) {
                      return sum + lineTotal;
                  }
              }, 0);
  this.subtotal=subtotal;
  this.tva=this.subtotal*this.porcentag;
  this.vente.prixtotal=this.subtotal+this.tva;

  },
  

  
  
  //post
  addpay(){
  
    axios.post('./addvente', {
      client: this.vente.idclient,
      modepayement_id:this.vente.idmod,
      lieustock:this.vente.lieustock,
      prixtotal: this.vente.prixtotal,
      id:this.vente.idproduit,
      dateecheance:this.vente.dateecheance,
      qty:this.vente.qty
     
    })
    .then(function (response) {
   
  alert('facture bien enregistrer');
     
    })
    .catch(function (error) {
      console.log(error);
    });
  
    
  },
  deleteRow(index, cart) {
          var idx = this.carts.indexOf(cart);
    
          if (idx > -1) {
              this.carts.splice(idx, 1);
          }
          var subtotal, total;
              subtotal = this.carts.reduce(function (sum, product) {
                  var lineTotal = parseFloat(product.total);
                  if (!isNaN(lineTotal)) {
                      return sum + lineTotal;
                  }
              }, 0);
  this.subtotal=subtotal;
  this.tva=this.subtotal*this.porcentag;
  this.vente.prixtotal=this.subtotal+this.tva;
  cart.prix='';
      },
        }
      }
  </script>