<template>


  <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          
            <h3 class="font-weight-bold">Achat55</h3>
          </div><!-- /.col -->
      
          <div class="col-sm-6">
        
  <!-- Button trigger modal -->
 
  </div></div></div>
    
             <div v-if="bloc" class="row">
               <div class="col-12 ">
                 <div class="card">
                         <div class="card-header">
   
                           <div class="card-body">
                             <div class="row">
                              <div class="col-md-6">
                                <div class="col-md-10">
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Fourniseur</label>
                                    <div class="col-sm-10">
            <select name="idfournisseur" class="form-control" v-model="vente.fournisseur_id">
              <option v-for="four in fournisseurs" :value="four.id">{{ four.nom }}</option>
          
            </select> 
          </div>
          </div>
        </div> 
        <div class="col-md-10">
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Dépot</label>
                                    <div class="col-sm-10">
            <select name="idfournisseur" class="form-control" v-model="vente.lieustock_id" @change="gettopcat">
              <option v-for="lieu in lieustocks2" :value="lieu.id">{{ lieu.lieu }}</option>
          
            </select> 
          </div>
          </div>
        </div> 
        <div class="col-md-10">
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Categorie</label>
                                    <div class="col-sm-10">
            <select name="idfournisseur" class="form-control" v-model="vente.topcat_id">
              <option v-for="top in topcat12" :value="top.id"> {{ top.topcat }}</option>
          
            </select> 
          </div>
          </div>
        </div> 
        <div class="col-md-3">
      <input   type="file" name="image"   >
  
   
  </div>
                              </div>
                              <div class="col-md-6"> 

                                <div class="form-group row">
    <label class="col-sm-2 col-form-label">Code Artiicle</label>
    <div class="col-sm-10">
      <input name="ref"  v-model="vente.id"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  </div>
        <div class="form-group row">
    <label class="col-sm-2 col-form-label">Nom Artiicle</label>
    <div class="col-sm-10">
      <input name="nom" v-model="vente.nom"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  </div>
        <div class="form-group row">
    <label class="col-sm-2 col-form-label">Prix Achat</label>
    <div class="col-sm-10">
      <input name="prixun"  v-model="vente.prixun" type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  </div>
        <div class="form-group row">
    <label class="col-sm-2 col-form-label">Prix Vente</label>
    <div class="col-sm-10">
      <input name="prixvente"  v-model="vente.prixvents"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  </div>
  <div class="form-group row">
    <label  class="col-sm-2 col-form-label">Quantité</label>
    <div class="col-sm-10">
      <input name="qty"  v-model="vente.quantite" type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
  </div>



                  <button  @click="add" class="btn btn-info float-right mb-4">ajouter a la liste des commande</button>







                              </div>  



                              

 </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">
           <h5 class="modal-title">
   
       
           </h5>
  
   <div v-if="showprod"  class="form-controller">
                <label>cherher</label>
  <input v-model="q" type="text">
  </div>
   
    <div v-if="shoowliu"   v-for="lieu in lieustocks" :value="lieu.id">
   <button class="btn btn-info mr-2" @click="getcatebaylieux2(lieu.id)">{{ lieu.lieu }}</button>
   </div>
           <button @click="shlieu" type="button" class="btn btn-success">
          liste stoock
           </button>
         </div>
   
   
   
         <div  class="modal-body  ">
           <div class="row">
             <div v-if="showfirst" class="col-md-2"  v-for="tcat in topcat1" :value="tcat.id">
    
               <div class="card">
     <div class="card-body" style=" padding: 2px !important;" >
       <img @click="showprduits(tcat.id)" style="width: 100%;height: 80px;padding: 0;"  :src="'img/' + tcat.img"/>
       <p style="font-weight: bold; color: green;text-align: center;">{{ tcat.topcat }}</p>
   </div>
   </div>
   </div></div>
   
   
   
   
   
   
         </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
        
         <div v-if="showprod"  class="modal-body  ">
         
           <div class="row">
      
     <div class="col-md-2"  v-for="prod in filterpost" :value="prod.id">
    
   <div class="card" >
  
     <div class="card-body" @click="addcart(prod)"  style=" padding: 2px !important;" >
       <img  style="width: 100%;height: 80px;padding: 0;" :src="'img/' + prod.img"/>
   <p style="font-weight: bold; color: green;text-align: center;" > {{ prod.nom }}</p>
   <p style="font-weight: bold; color: red;text-align: center;">prix de vente: {{ prod.prixvents }}  DH</p>
   <p style="font-weight: bold; color:blueviolet;text-align: center;"> prix d'achat:{{ prod.prixun }}  DH</p>
   </div>
   </div> 
   
   
   
   
   
   
     </div>
   </div>
           </div>
  
       
         <div v-if="showtopcat"  class="modal-body  ">
           <div class="row">
     <div class="col-md-2"  v-for="top in topcats" :value="top.id">
    
   <div class="card">
     <div class="card-body" style=" padding: 2px !important;" >
       <img @click="showcategorie(top.id)" style="width: 100%;height: 80px;padding: 0;"  :src="'img/' + top.img"/>
       <p style="font-weight: bold; color: green;text-align: center;">{{ top.topcat }}</p>
   </div>
   </div>
   
   
   
   
   
   
     </div>
   </div>
         </div>
         
         <div class="modal-footer">
       
           <button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
         </div>
       </div>
       </div>
       <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->
         
            
           </div>
   
   
    
   </div>
    
                         </div>
    
   
   </div>
   
   
   
      </div>

   
   
   
    <div class="content">
        <div class="card">
                    <!-- /.card-header -->
                    <div class="card-body">
                      <form @submit.prevent="addpay"  method="post" enctype="multipart/form-data">
                      <table v-if="table" id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr class=" bg-info ">
                         <th style="width: 50px;">supp</th>
                         <th >PHOTO</th>
                          <th >CODE ARTICLE</th>
                          <th>DÉSIGNATION</th>
                          <th width="40">QAUNTITÉ</th>
                          <th>PRIX DE D'ACHAT</th>
                          <th>MONTANTACHAT</th>
                            <th>PRIX DE VENTE</th>
                        <th>DÉPOT</th>
                       
                          
                        </tr>
                        </thead>
                        <tbody>
                        
                          <tr   v-for="cart in carts " >
                           <td><button class="btn btn-danger"  @click="deleteRow(index, cart)"><i class="fas fa-solid fa-trash"></i></button></td>
                           <td  style="width:150px !important;"  >img</td>
                           <td  style="width:150px !important;"  class="text-primary font-bold">{{ cart.id }}</td>
              <td  class="text-primary font-bold">{{ cart.nom }}</td>
                 
                  <td> <input    style="width: 40px !important;"  v-model="cart.quantite"   @keyup="calculeqty(cart,)" >
                    
                    </td>
                  <td ><input    style="width: 40px !important;"  v-model="cart.prixun"   @keyup="calculeprix(cart)"></td> 
             <td>{{cart.x}} dh</td>
             <td ><input    style="width: 40px !important;"  v-model="cart.prixvents" ></td> 
                <td>depot</td>
             
         
      
           

            
   
                </tr>
   
              
              
                <button  type="submit" @click="addpay" class="float-right  btn btn-info">enregistrer</button>      
             

                
                        </tbody>
                      
                      </table>
  </form>
                    </div>
   
  
    
                    <!-- /.card-body -->
      </div>
      </div>
      <div class="content">
        <div v-if="bloc2" class="card">
          <div class="card-body">
          <div class="row"> 
   

        
   
   
   
          
      
      <div class="col-md-3"> 
        <p class="font-weight-bold"> total:{{vente.subtotal}} DH</p>
      
     <p> total:{{ vente.total}} DH</p>
      
   
    
        
  
      </div>
      
   
      
      </div> </div>
      </div>
      </div>

  </div>
   </template>
   
   <script>
         export default {
             data() {
               return{
                shoowliu:false,
                q:'',
                bloc:true,
                bloc2:false,
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                 qty:1,
                 showfirst:true,
                 showprod:false,
                 showtopcat:false,
                 showcat:false,
                 table:true,
                 
              
                 showcat:false,
                 showmode:false,
                 showproduit:false,
                 showdate:false,
             
                 prods:[],
                 produit:[],
              
                 lieustocks:[],
                 topcats:[],
                 lieustocks2:[],
                 topcat1:[],
                 topcat12:[],
                 
                 fournisseurs:[],

  carts:[],
         
           totale:0,  
                 vente:{
                  nom:'',
           fournisseur_id:1,
           lieustock_id:1,
           topcat_id:1,
           quantite:1,
           prixun:'',
           prixvents:'',
           x:0,
           date:Date.now() ,
                   subtotal:0 ,
                 total:0,
                 }
               }
             },
    created(){
    
      
      this. getlieustock();
      this. getlieustock2();
      this.  getbonenattentsituation();
      this.getlastidvente();
      this.getcatebaylieuxfirst();
      this.getfournisseurs();
      this.gettopcat();
             },        
          
   
           
             methods:{
              shlieu(){
                this.shoowliu=true;
              },
gettopcat(){ 
  axios.get('./api/topcatbyid/'+this.vente.lieustock_id)
       .then(response =>{
       this.topcat12 = response.data.topcats;
      
       
       })
       .catch(error =>{
       console.log(error);
       })
},

              calculeqty(cart){
                let  name = this.carts.findIndex(item=>item.id===cart.id);  
  
  if(name !=-1)  {

  this.carts[name].x= this.carts[name].prixun* this.carts[name].quantite;
  
  }
   
  
  var subtotal;
                 subtotal = this.carts.reduce(function (sum, product) {
                     var lineTotal = parseFloat(product.x);
                     if (!isNaN(lineTotal)) {
                         return sum + lineTotal;
                     }
                 }, 0);
          
     this.vente.subtotal=subtotal;
     this.vente.total=subtotal;
     this.vente.remise=0;
     this.vente.avance=0;
     this.vente.idcrediturgent=1;
    
  
  
  }
  ,
  calculeprix(cart){
     let  name = this.carts.findIndex(item=>item.id===cart.id);  
   
               
  
  if(name !=-1)  {
  
  this.carts[name].x= this.carts[name].prixun* this.carts[name].quantite;
  
  }
   
  
  var subtotal;
                 subtotal = this.carts.reduce(function (sum, product) {
                     var lineTotal = parseFloat(product.x);
                     if (!isNaN(lineTotal)) {
                         return sum + lineTotal;
                     }
                 }, 0);
          
     this.vente.subtotal=subtotal;
     this.vente.total=subtotal;
     this.vente.remise=0;
     this.vente.avance=0;
     this.vente.idcrediturgent=1;
    
  
  
  }
  ,
   
  getfournisseurs(){
         
         axios.get('./api/fournisseurs')
       .then(response =>{
       this.fournisseurs = response.data.fournisseurs;
       
       
       })
       .catch(error =>{
       console.log(error);
       })
       },
      
  

        
               getlieustock(){
          
          axios.get('./api/lieustock')
        .then(response =>{
        this.lieustocks = response.data.lieustock;
       
        
        })
        .catch(error =>{
        console.log(error);
        })
        },   
        getlieustock2(){
          
          axios.get('./api/lieustock')
        .then(response =>{
        this.lieustocks2 = response.data.lieustock;
       
        
        })
        .catch(error =>{
        console.log(error);
        })
        },  
        showcategorie(id){
          this.showcat=false;
    this.showtopcat=false;
      this.showprod=true;
      this.showfirst=false;
      axios.get('./getproduitbycat/'+id)
      .then(response =>{
      this.prods = response.data.produits;
     
      })
      .catch(error =>{
      console.log(error);
      })
        },
        getcatebaylieuxfirst(){
         this.showfirst=true,
        this.showtopcat=false;
        this.showcat=false;
      this.showprod=false;
          axios.get('./api/topcatbyid/1')
        .then(response =>{
        this.topcat1 = response.data.topcats;
        this.vente.idlieutoock=1;
        this.showtopcat=false;
        this.showcat=false;
      this.showprod=false;
      this.showfirst=true;
        
        })
        .catch(error =>{
        console.log(error);
        })
        },   
        getcatebaylieux(){
        this.showtopcat=true;
        this.showcat=false;
      this.showprod=false;
      this.showfirst=false;
          axios.get('./api/topcatbyid/'+this.vente.idlieutoock)
        .then(response =>{
        this.topcats = response.data.topcats;
        this.showtopcat=true;
        this.showcat=false;
      this.showprod=false;
      this.showfirst=false;
        
        })
        .catch(error =>{
        console.log(error);
        })
        },   
        getcatebaylieux2(id){
         this.vente.idlieutoock=id;
        this.showtopcat=true;
        this.showcat=false;
      this.showprod=false;
      this.showfirst=false,
          axios.get('./api/topcatbyid/'+id)
        .then(response =>{
        this.topcats = response.data.topcats;
        this.showtopcat=true;
        this.showcat=false;
      this.showprod=false;
      this.showfirst=false;
        
        })
        .catch(error =>{
        console.log(error);
        })
        }, 
  
   showprduits(id){
     this.showcat=false;
    this.showtopcat=false;
      this.showprod=true;
      this.showfirst=false;
      axios.get('./getproduitbycat/'+id)
      .then(response =>{
      this.prods = response.data.produits;
     
      })
      .catch(error =>{
      console.log(error);
      })
   },
   
  

     getbonenattentsituation(){
        
        axios.get('./api/bonenattentsituations')
     .then(response =>{
     this.bonenattentsituations = response.data.bonenattentsituations;
     
     })
     .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);
     })
     },  
     

      getclienttbyid(){
     
     axios.get('./clientbyid/'+this.vente.idclient)
     .then(response =>{
     this.client = response.data.client
     
     })
     .catch(error =>{
     console.log(error);
     })
     }, 
     
     add(){
 let idp =Math.floor(Math.random() * 1000) + 1000;
 this.carts.push({
 
  id:idp,
  nom:this.vente.nom,
  quantite:this.vente.quantite,
  prixun:this.vente.prixun,
  x:this.vente.prixun*this.vente.quantite,
  prixvents:this.vente.prixvents,
  fournisseur_id:this.vente.fournisseur_id,
  lieustock_id:this.vente.lieustock_id,
  topcat_id:this.vente.topcat_id,
 
 

/*
   
      "ref" => "1222"
      "img" => "1695647062.jfif"
   
      */
 });

 

 var subtotal;
                 subtotal = this.carts.reduce(function (sum, product) {
                     var lineTotal = parseFloat(product.x);
                     if (!isNaN(lineTotal)) {
                         return sum + lineTotal;
                     }
                 }, 0);
          
     this.vente.subtotal=subtotal;
     this.vente.total=subtotal;
     this.vente.remise=0;
     this.vente.avance=0;
     this.vente.idcrediturgent=1;
    
   this.table=true;
  
   this.bloc2=true;
  
 
 


 
 
  },
     
     addcart(produit){
   
    let  name = this.carts.findIndex(item=>item.id===produit.id);  
  
  if(name !=-1)  {
  this.carts[name].quantite++;
  this.carts[name].x= this.carts[name].prixun* this.carts[name].quantite;
  
  }else{
  this.carts.push(produit);
  produit.quantite=1;
  produit.comment='rien';
  produit.x=produit.prixun*produit.quantite;
  
  }
   
  
  
    
      var subtotal;
                 subtotal = this.carts.reduce(function (sum, product) {
                     var lineTotal = parseFloat(product.x);
                     if (!isNaN(lineTotal)) {
                         return sum + lineTotal;
                     }
                 }, 0);
          
     this.vente.subtotal=subtotal;
     this.vente.total=subtotal;
     this.vente.remise=0;
     this.vente.avance=0;
     this.vente.idcrediturgent=1;
  
   this.table=true;
  
   this.bloc2=true;
  
  
   },
    
    
     getlastidvente(){
           axios.get('./api/lastid')
      .then(response =>{
     
     this.lastidvente = response.data.lasid
     
      })
      .catch(error =>{
      console.log(error);
      })
      },
     
     //post

  
     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.x);
                     if (!isNaN(lineTotal)) {
                         return sum + lineTotal;
                     }
                 }, 0);
     this.vente.subtotal=subtotal;
     this.vente.total=subtotal;
     //cart.prix='';
     //this.vente.qty[index]='';
         },
  
    
         addpay(){
          let formdata = new FormData();
      formdata.append('fournisseur_id',this.vente.fournisseur_id)
      formdata.append('prixtotal',this.vente.total)
      
     
     let config = {
      headers :{"content-type":'multipart/form-data'}
  
      
     }
  
      axios.post('./addachat2',formdata,config, {
        
         cart:this.carts,


}).then(function (response) {
         Swal.fire(
    'parfait!',
    'vente bien enregistrer!',
    'success'
  );
 
      })
      .catch(function (error) {
    
      
 
 Swal.fire({
   icon: 'error',
   title: 'Oops...',
   text: 'tous les donner sont obligatoire',
   footer: '<a href="">revenire au facture?</a>'
 });
 
      });
 
      this.carts='';
      this.vente.total=0;

 
    },
  
  
  
           },
   
   
           computed:{
  
  
   
  


  
  filterpost(){
    return this.prods.filter(prod=>{
      return prod.nom.toLowerCase().includes(this.q.toLowerCase());
    })
  }
    
       },
           
         }
     </script>
   