<template>
  <div class="content">
        <div class="row">
          <div class="col-12 ">
            <div class="card">
                    <div class="card-header">
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-xl">
                nouvel facture30

                </button>
              </div>
                






























      <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">
        <label for="exampleFormControlSelect1">lieu de stock</label>
        <select name="idlieutoock"  class="form-control" @change="getcatebaylieu" v-model="produit.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">categorie33</label>
        <select name="idcategorie" class="form-control" v-model="produit.idcategorie">
          <option v-for="cat in categories" :value="cat.id"> {{ cat.cat }}</option>
        </select>
        <p >ce champ est oblicatoir</p>
      </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.prixvente"  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.qty" 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">
    <div class="form-group">
      <label for="exampleFormControlInput1">coode bar22</label>
      <input name="codebar"  v-model="produit.codebar"   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>

    {{ produit.codebar }}  {{ produit.image }} 
  </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>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

                    <div class="card-body">
                      <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
 

            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Liste des Produits</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>id</th>
                    <th>nom</th>
                    <th>qty</th>
                    <th>prixun</th>
                    <th>prixvente2</th>
                  </tr>
                  </thead>
                  <tbody>
           
     {{produit.id}}
                  <tr v-for="produit in produits">
                    <td> <img :src=" 'img/'+produit.img"  style="width: 50px;height: 50px;">  </td>
                    <td>{{produit.nom}}</td>
                    <td>{{produit.qty}}</td>
                    <td>{{produit.prixun}}</td>
                    <td>{{produit.prixvente}}</td>
                 
                  </tr>
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>Rendering engine22</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
      export default {
          data() {
            return{
       

          
               
              lieustocks:[],
              categories:[],
              fournisseurs:[],
              produits:[],
        

          
    
              produit:[{
                idlieutoock:'',
                idcategorie:'',
                idfournisseur:'',
                nom:'',
                image:null,
                ref:'',
                qty:'',
                minqty:'',
                prixun:'',
                prixvente:'',
                codebar:'',
               
          
              }],
            }
          },
 created(){
 this.getallproduits(); 
this.getlieustock();
this.getfournisseurs();

          },        
       

    
        
          methods:{
            onfilselected(event){
              console.log(event)
  
  this.produit.image= event.target.files[0];

   
    },
            getlieustock(){
     
     axios.get('./api/lieustock')
   .then(response =>{
   this.lieustocks = response.data.lieustock;
  
   
   })
   .catch(error =>{
   console.log(error);
   })
   },


getallproduits(){
  axios.get('./api/produits')
   .then(response =>{
   this.produits = response.data.produits;
  
   
   })
   .catch(error =>{
   console.log(error);
   })
},


   getcatebaylieu(){
  
  axios.get('./api/catlieu/'+this.produit.idlieutoock)
.then(response =>{
  this.categories = response.data.categorie;
  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);
   })
   },
  


  
  addpost(){
    
   
    let formdata = new FormData();
    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.pixvente)
    formdata.append('codebar',this.produit.codebar)
    formdata.append('qty',this.produit.qty)
    formdata.append('idcategorie',this.produit.idcategorie)
    formdata.append('idfournisseur',this.produit.idfournisseur)
    formdata.append('idlieutoock',this.produit.idlieutoock)
    formdata.append('image', this.produit.image)
   
   let config = {
    headers :{"content-type":'multipart/form-data'}

    
   }
    axios.post('./addproduit', formdata ,config)

    .then(function (response) {
      this.produit.nom='';
   this.produit.ref='';
  this.produit.minqty='';
    this.produit.prixun='';
   this.produit.pixvente='';
 this.produit.codebar='';
this.produit.qty='';
this.produit.idcategorie='';
  this.produit.idfournisseur='';
   this.produit.idlieutoock='';
'image', this.produit.image='';
   $('modal-xl').modal('hide');
  alert('facture bien enregistrer');
      this.getallproduits(); 
    })
    .catch(function (error) {
      console.log(error);
    });
  
  },

  
        }
      }
  </script>
