<template>

  <div class="content">
        <div class="row">
          <div class="col-12 ">
            <div class="card">
              <div class="card-header ">
           
 <h1> Nouveau Devis</h1>  
      </div>
              <div class="card-body">
       
    <div class="row"> 

      <div class="col-md-3">
    <div class="form-group">
        <label for="exampleFormControlSelect1">lieu de stock</label>
        <select name="idlieutoock"  class="form-control" @change="getcatebaylieu" v-model="vente.idlieutoock">
          
          <option v-for="lieu in lieustocks" :value="lieu.id"> {{ lieu.lieu }}</option>
        </select>
        <p >ce champ est oblicatoir </p>
      </div>
    </div> 
<div class="col-md-3"> 
<div class="form-group">
  <label for="exampleFormControlSelect1">categorie</label>
  <select class="form-control" @change="getproduitbycat"  v-model="vente.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">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></div>
    <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>
      
      </div>
  </div> 
  

  
  
    <div class="col-md-3"> 
      
      <div class="form-group">
        <label for="exampleFormControlSelect1">produit</label>
        <select class="form-control" @change="getproduitbyid" v-model="idproduit">
          <option v-for="produit in prods" :value="produit.id">{{ produit.nom }}</option>
        </select>
      </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">en stock</label>
        <div class="text-danger font-weight-bold" >
          {{ produit.stock }}</div>
      </div>
    </div>
    
    <div class="col-md-3">
<div class="form-group">


  <label for="exampleFormControlSelect1">taux</label>
  <select class="form-control"   v-model="porcentag">
    <option value="0" >0 %</option>
<option value="0.2">20%</option>
  </select>
</div>

</div>

    <div class="col-md-3"> 
  
      <div class="form-group">
        <label for="exampleFormControlInput1">date </label>
      <input v-model="vente.dateecheance" type="date"  class="form-control">
</div>
     

           </div>
  
              </div>
            </div>
         
                  <button  @click="addcart(produit,prixdevente)" class="btn btn-info">ajouter</button>
         
     </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: </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 }}


         <button class="btn btn-success" @click="addpay">enregistrer</button>
    </div>
  </div>
  
  
  
  
  
    
        </div>
  </div>
  </div>
  
  
  
  </template>
  
  
                
  
  <script>
      export default {
          data() {
            return{
              idcategorie:'',
          
              idproduit:'',
              lieustocks:[],
              prods:[],
              produit:[],
              clients:[],
              client:[],
              categories:[],
              modepayements:[],
           
              produitid:[],
              prixdevente:'',
              porcentag:'',
              tva:'',
            
              subtotal:0 ,
              total:0,
              carts:[{
                id:'',
             nom:'',
            prix:'',
            qty:'',
           total:0
              }],
              vente:{
                idlieutoock:'',
                idcategorie:'',
                idproduit:'',
                dateecheance:'',
                idclient:'',
                prixtotal:'',
                idproduit:[],
                prixdevente:[],
                qty:[],
                total:[],
              }
            }
          },
 created(){
 
  this.getclients();
  this. getmode();
  this.getlieustock();
          },        
       

    
        
          methods:{
            getlieustock(){
     
     axios.get('./api/lieustock')
   .then(response =>{
   this.lieustocks = response.data.lieustock;
  
   
   })
   .catch(error =>{
   console.log(error);
   })
   },
  
              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;
              },
      
  
              getcatebaylieu(){
  
  axios.get('./api/catlieu/'+this.vente.idlieutoock)
.then(response =>{
  this.categories = response.data.categorie;
  console.log(this.categories )
})
.catch(error =>{
console.log(error);
})
},
getproduitbyid(){

axios.get('./produitbyid/'+this.vente.idcategorie)
.then(response =>{
this.produit = response.data.produit;
//this.prixdevente=this.produit.prixvents

})
.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.vente.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){
this.vente.idproduit.push(produit.id);
this.vente.prixdevente.push(prixdevente);
this.vente.qty.push(1);
   this.carts.push(
   {
            id:produit.id,
            nom:produit.nom,
            prix:this.prixdevente,
            qty:this.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;
  cart.prix='';
  
  },
  
  
  
  
  //post
  addpay(){
  
    axios.post('./adddevis', {
      client: this.vente.idclient,
 
      prixtotal: this.vente.prixtotal,
      id:this.vente.idproduit,
      dateecheance:this.vente.dateecheance,
      qty:this.vente.qty
     
    })
    .then(function (response) {
   
      Swal.fire(
'parfait!',
'devis bien enregistrer!',
'success'
)
     
    })
    .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>