<template>

<div class="content">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="row"> 
  <div class="col-md-3 font-weight-bold">facture n {{ vente.idclient }}
  </div>
  <div class="col-md-3 text-success font-weight-bold"> client : {{ client.nom }} 
  </div>
  <div class="col-md-3 text-primary font-weight-bold"> tele: {{ client.tele }} 

  </div>
  <div class="col-md-3 text-danger font-weight-bold"> 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>
    </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>
    </div>
  </div> 
  <div class="col-md-3"> 
    
    <div class="form-group">
      <label for="exampleFormControlSelect1">mode payement</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option>cash</option>
        <option>credit</option>
        <option>cheque</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">prix de vente</label>
    <input type="text" v-model="prixdevente"  class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>

  </div> 
  <div class="col-md-3"> 
    
    <div class="form-group">
      <label for="exampleFormControlInput1">prix actuel</label>
      <div class="text-danger font-weight-bold" @click="prixdevente=produit.prixun" >
{{ produit.prixun }} DH</div>
    </div>
  </div>
  
  <div class="col-md-3"> 

<div class="form-group">
<label for="exampleFormControlInput1">qty</label>
<input v-model="qty" type="text" class="form-control" id="exampleFormControlInput1" placeholder="entrer quantité">
</div>

<button  @click="addcart(produit)" class="btn btn-primary">ajouter</button>
         </div>

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



<div class="card">

  <div class="card-body">

    <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
            
                <th>produit</th>
                <th>prix</th>
                <th>qty</th>
                <th>total</th>
                </tr>
                </thead>
                <tbody>
                  <tr v-for="cart in carts">
             <td class="text-primary font-weight-bold">{{ cart.nom }}</td>
             <td>{{ cart.prix }} </td>
            <td> <input :value="cart.qty" type="text" ></td>
            <td>{{ cart.total }}</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>
       <button class="btn btn-success" @click="addpay">enregistrer</button>
  </div>
</div>





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



</template>


              

<script>
    export default {
        data() {
          return{
            idcategorie:'',
           
            idproduit:'',
            prods:[],
            produit:[],
            clients:[],
            client:[],
            categories:[],
            qty:[],
            prixdevente:'',
            porcentag:'',
            tva:'',
          
            subtotal:0 ,
            total:0,
            carts:[{
           nom:'',
          prix:'',
          qty:1,
         total:0
            }],
            vente:{
              idclient:'',
              prixtotal:'',
            }
          }
        },
        mounted(){
this.getcategorie();
this.getclients();

        },
  
      
        methods:{


    

 getcategorie(){
   
   axios.get('./categorie')
.then(response =>{
this.categories = response.data.categories;

})
.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

})
.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){

 this.carts.push(
 {
  
  nom:produit.nom,
          prix:this.prixdevente,
          qty:this.qty,
         total:Number(this.prixdevente) * Number(this.qty),
         
 }
 );
 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,
    prixtotal: this.vente.prixtotal
  })
  .then(function (response) {
    console.log(response);
    alert('facture bien enregistrer');
  })
  .catch(function (error) {
    console.log(error);
  });

  
}
      }
    }
</script>