<template>











  <div class="content">
            <div class="row">
              <div class="col-12 ">
                <div class="card">
                        <div class="card-header">
  
  
  <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="font-weight-bold">Capiitale7:
              <span class="badge badge-pill badge-successi" style="font-size:20px;">{{ capital }} DH</span>
         </h1>   </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
   
  
              </ol>
  
  
  
  
  
  
  </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
  
  
  
  
              
                  </div>
                    
    
    
    
    
    
    
    
  
    
    
    

    
                        <div class="card-body">
                          <section class="content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">
     
    
                <div class="card " id="example1_wrapper">
             
                    <div class="card-header  bg-info">
            <div class="col-md-3 font-weight-bold"><i class="fas  fa fa-users"></i>  Articles
            <span class="badge badge-pill badge-warning" style="font-size:20px;"> {{ produits.length }}</span>
        </div>
          
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <div class="table-responsive">
                    <table id="salim" class="table table-bordered table-striped">
                      <thead>
                    <tr>
                      <th style="color: blue;font-weight: bold;">image</th>
                      <th style="color: blue;font-weight: bold;">id</th>
                      <th style="color: blue;font-weight: bold;">designation</th>
                      <th style="color: blue;font-weight: bold;">prix achat</th>
                      <th style="color: blue;font-weight: bold;">prix de vente</th> 
                       <th style="color: blue;font-weight: bold;">qty</th>
                      <th style="color: blue;font-weight: bold;">fournisseur</th>
                      <th style="color: blue;font-weight: bold;">lieu de stoock</th>
                      <th style="color: blue;font-weight: bold;">categorie</th>
                      <th style="color: blue;font-weight: bold;width:180px;">action</th>
                
                    </tr>
                    </thead>
                    <tbody>
                      <tr v-for=" prod in produits">
                        <td><img style="width: 50px;height: 50px;" :src="produit.img"/> </td>
                        <td>{{prod.id}}</td>
                      <td>{{prod.nom}}</td>
                      <td>{{prod.prixun}}</td>
                      <td>{{prod.prixvents}}</td>
                      <td>{{prod.stock}}</td>
                      <td>{{prod.fournisseur.nom}}</td>
                      <td>{{prod.lieustock.lieu}}</td>
                      <td>{{prod.topcat.topcat}}</td>
            
  
  
                      <td>          
         
                    
                    

                        <button @click="deleteproduit(produit.id)" class="btn btn-danger btn-sm">
                          <i class="fas fa-trash">
                                </i>
                          supprimer</button>
  
                          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-xl">
                modifier

                </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">Ajouter Nouveau Produit</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">
<form @submit.prevent="addpost"  method="post" enctype="multipart/form-data">
              <div class="card-body">
       
    <div class="row">

   <div class="col-md-3">
   
                                  <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Dépot</label>
                                    <div class="col-sm-8">
            <select name="" class="form-control" v-model="produit.lieuid" @change="gettopcat">
              <option v-for="lieu in lieustocks2" :value="lieu.id">{{ lieu.lieu }}</option>
          
            </select> 
           
          </div>
          </div>
        </div> 
        <div class="col-md-3">
                                  <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Categorie</label>
                                    <div class="col-sm-8">
                                     
            <select name="idfournisseur" class="form-control"   >
              <option v-for="top in topcats" :value="top.id"> {{ top.topcat }}</option>
          
            </select> 
          {{ topcats }}
          </div> </div> </div> 
    <div class="col-md-3">
    <div class="form-group">
        <label for="exampleFormControlSelect1">fournisseur11</label>
        <select name="idfournisseur" class="form-control" v-model="produit.idfournisseur">
          <option v-for="four in fournisseurs" :value="four.id">{{ four.nom }}</option>
      
        </select> 
        <p >ce champ est oblicatoir</p>
      </div>
    </div> 

    <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">designationt </label>
      <input name="nom"  v-model="produit.nom"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>


   </div>
   <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">reference </label>
      <input name="ref"  v-model="produit.ref"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>


   </div>
    
   <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">prix achat </label>
      <input name="prixun"  v-model="produit.prixun"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>


   </div>
   <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">prix de vente </label>
      <input name="prixvente"  v-model="produit.prixvents"  type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
   </div>
   <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">quantité</label>
      <input name="qty"  v-model="produit.stock" type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
   </div>
   <div class="col-md-3">
    <div class="form-group">
      <label for="exampleFormControlInput1">min quantité</label>
      <input name="minqty"  v-model="produit.minqty" type="text" class="form-control" id="exampleFormControlInput1" placeholder="changer prix ">
    </div>
   </div>



   <div class="col-md-3">
    <input   type="file" name="image"    @change="onfilselected" >

 
</div>

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


     
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" @click="addpost" class="btn btn-primary float-right" data-dismiss="modal">ajouter</button>
            </div>
          </div>             
        </div>
          </div>          
            
                     
  
  
  
  
  
                      </td>
                
                    </tr>
             
                    </tbody>
          
          
                    </table>
                  </div>        </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          </section>
  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
          export default {
              data() {
                return{
                  csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    capital:0,
              
                   
    lieustocks2:[],
                  
                  v:[],
                  fournisseurs:[],
                  produits:[],
            
  
              
        
                  produit:{
                    lieuid:'',
                    topcat_id:'',
                    fournisseur_id:'',
                    nom:'',
                    image:null,
                    ref:'',
                    qty:'',
                    minqty:'',
                    prixun:'',
                    prixvente:'',
                    codebar:'',
                    id:'',
                   
              
                  },
                }
              },
     created(){
     this.getallproduits(); 
    this.getlieustock2();
    this.getfournisseurs();

    
              },        
           
    
        
            
              methods:{
  

      
 
        getlieustock2(){
          
          axios.get('./api/lieustock')
        .then(response =>{
        this.lieustocks2 = response.data.lieustock;
       
        
        })
        .catch(error =>{
        console.log(error);
        })
        },      
        gettopcat(){ 
       
  axios.get('./api/topcatbyid/'+this.produit.lieuid)
       .then(response =>{
      
       this.topcats = response.data.topcats;
      
       
       })
       .catch(error =>{
       console.log(error);
       })
}, 
  
                onfilselected(event){
                  console.log(event)
      
      this.produit.image= event.target.files[0];
    
       
        },
       
    
  table(){
    this.$nextTick(()=>{
      $('#salim').DataTable({
        "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
      }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    });
  },
    getallproduits(){
      axios.get('./api/produits')
       .then(response =>{
           this.produits = response.data.produits; 
           this.capital= response.data.total; 
           this.table();
       
       })
     
       .catch(error =>{
       console.log(error);
       })
    },
  
  /*
    
       getcatebaytoopcat(){
    
      axios.get('./api/catpytop/'+this.produit.idtopcat)
    .then(response =>{
      this.categories = response.data.categories;
      console.log(this.categories )
    })
    .catch(error =>{
    console.log(error);
    })
    },
    */
      getfournisseurs(){
         
         axios.get('./api/fournisseurs')
       .then(response =>{
       this.fournisseurs = response.data.fournisseurs;
       
       
       })
       .catch(error =>{
       console.log(error);
       })
       },
      
    
    
      
      addpost1(){
  

     
        let formdata = new FormData();
        formdata.append('id',this.produit.id)
        formdata.append('nom',this.produit.nom)
        formdata.append('ref',this.produit.ref)
       // formdata.append('minqty',this.produit.minqty)
        formdata.append('prixun',this.produit.prixun)
        formdata.append('pixvente',this.produit.prixvents)
       // formdata.append('codebar',this.produit.codebar)
        formdata.append('qty',this.produit.stock)
        formdata.append('idtopcat',this.produit.topcat_id)
       //formdata.append('idcategorie',this.produit.idcategorie)
        formdata.append('idfournisseur',this.produit.fournisseur_id)
        formdata.append('idlieutoock',this.produit.lieustock_id)
        formdata.append('image', this.produit.image)
   
       
       let config = {
        headers :{"content-type":'multipart/form-data'}
       
        
       }
        axios.post('./updatproduit/'+this.produit.id, formdata ,config)
    
        .then(function (response) {
        
          $(".modal-backdrop").remove();
          $("#modal-xl").hide();
        })
        .catch(function (error) {
          console.log(error);
        });
      
       } ,
     
    modifierproduit(produit){
  this.produit=produit;
  this.modifier=true;
    },
   
      deleteproduit(id){
        Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then((result) => {
    if (result.isConfirmed) {
  
  axios.delete('./api/deleteproduit/'+id).then(response=>{
    if(response.data.status=='success'){
       Swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      )
      this.getallproduits();
    }
  })
  
  
  
     
    }
  })
      }
            }
          }
  
  
  
  
   
  
      </script>
  