<template>
 
 

    <div class="content">
     <h1>Vente matnsach case etat payement</h1>   
             <div class="row">
               <div class="col-12 ">
                 <div class="card">
                         <div class="card-header">
   
                           <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 }} DH</option>
     
       </select> 
       <p style="color: red; font-weight: bold;">     credit:{{client.monton}} </p>
   
          <p  v-if="showclient">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 >{{vente.idmod}}</p>
     </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">
   
   
       <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>
       
   <button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#modal-xl">
             Aouter Prouit </button>
   
               <div class="modal fade" id="modal-xl">
       <div class="modal-dialog modal-xl">
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Extra Large Modal</h4>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
               <div class="card">
   
             <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="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">
    
   
   </div>
    
   
          </div>
   
             </div>
           </div>
   
    </div>
           </div>
           <div class="modal-footer justify-content-between">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button  @click="addcart(produit,prixdevente,qty)" class="btn btn-primary float-right" data-dismiss="modal">ajouter</button>
           </div>
         </div>
         <!-- /.modal-content -->
       </div>
       <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->
         
            
           </div>
   
   
    
   </div>
    
                         </div>
    
   
   </div>
   
   
   
      </div></div>
    </div>
   
   
   
   <div class="content">
     <div class="card">
                 <!-- /.card-header -->
                 <div class="card-body">
                   <table v-if="table" id="example2" class="table table-bordered table-hover">
                     <thead>
                     <tr>
                       <th>Designation</th>
                       <th>prix</th>
                       <th width="40">qty</th>
        
                       <th>total</th>
                       <th style="width: 50px;">supp</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>
                   
                   </table>
                 </div>
                 <!-- /.card-body -->
   </div>
   </div>
   <div class="content">
     <div class="card">
       <div class="card-body">
       <div class="row"> 
         <div class="col-md-3"> </div>
   <div class="col-md-3"></div>
   
   <div class="col-md-3"> </div>
   <div class="col-md-3"> 
     <p class="font-weight-bold"> total:{{subtotal}}</p>
     <p class="font-weight-bold"> tva:{{tva}}</p>
     <p class="font-weight-bold"> total:{{vente.prixtotal}}</p>
     <br>
     <div v-if="vente.idmod==2" class="form-group">
     <label for="exampleInputEmail1" class="form-label">avance</label>
       <input v-model="vente.avance" type="text" class="form-control" >
     </div>
     <button class="btn btn-success" @click="addpay">enregistrer</button>
     <button class="btn btn-success" @click="addpay">enr</button>
     
     {{ vente.qty }}
   
   </div>
   
   </div> </div>
   </div>
   </div>
   <div class="content">
     <div class="card">
       <div class="card-body">
       <div class="row"> 
   
   
   
   
   -
   
   
   
     </div> </div>
   </div>
   </div></div>
   
   </template>
   
   <script>
         export default {
             data() {
               return{
                 table:false,
                   csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                 showclient:false,
                 showcat:false,
                 showmode:false,
                 showproduit:false,
                 showdate:false,
                 idcategorie:'',
             
                 idproduit:'',
                 prods:[],
                 produit:[],
                 clients:[],
                 client:[],
                 lieustocks:[],
                 categories:[],
                 modepayements:[],
              
                 produitid:[],
                 prixdevente:'',
                 porcentag:'',
                 tva:'',
               
                 subtotal:0 ,
                 total:0,
                 carts:[{
                   id:'',
                nom:'',
               prix:'',
               qty:'',
              total:0
                 }],
                 vente:{
                   idlieutoock:'',
                     idcategorie:'',
                   
                   idmod:'',
                   dateecheance:'',
                   avance:'',
                   idclient:'',
                   prixtotal:'',
                   idproduit:[],
                   prixdevente:[],
                   qty:[],
                   total:[],
                 }
               }
             },
    created(){
    // this.getcategorie();
     this.getclients();
     this. getmode();
      this. getlieustock();
             },        
          
   
       
           
             methods:{
   
               getlieustock(){
          
          axios.get('./api/lieustock')
        .then(response =>{
        this.lieustocks = response.data.lieustock;
       
        
        })
        .catch(error =>{
        console.log(error);
        })
        },
        getcatebaylieu(){
       
       axios.get('./api/catlieu/'+this.vente.idlieutoock)
     .then(response =>{
       this.categories = response.data.categorie;
       console.log(this.categories )
     })
     .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;
                 },
         
   
     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,qty){
   
   
      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;
   this.table=true;
     },
     
   
     
     
     //post
     

           }
         }
     </script>
   