<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">Liste Categorie</h1>
              </div><!-- /.col -->
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-xl">
                  +Nouveau
      
                      </button>
    
                </ol>
      </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->  
           </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="addcat"  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 stock0</label>
          <select name="idlieutoock"  class="form-control" @change="getcatebaylieux"  v-model="cat.idlieutoock">
            
            <option v-for="lieu in lieustocks" :value="lieu.id"> {{ lieu.lieu }}</option>
          </select>
     
        </div>
      </div> 

      <div class="col-md-3">
      <div class="form-group">
          <label for="exampleFormControlSelect1">lieu de stock22</label>
          <select name="idlieutoock"  class="form-control"  v-model="cat.idtopcat">
            
            <option v-for="top in topcats" :value="top.id"> {{ top.topcat }}</option>
          </select>
     
        </div>
      </div> 


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



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





























           
                  </div>
                  <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" @click="addcat" class="btn btn-primary float-right" data-dismiss="modal">ajouter</button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
            </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;"> ok</span>
          </div>
            
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                    
                      <table id="salim" class="table table-bordered table-striped">










                        <thead>
                      <tr>
                        <th >image</th>
                        <th >nom</th>
                        <th >categorie</th>
                        <th >ieu de stock</th>
<th>action</th>
                  
                      </tr>
                      </thead>
                      <tbody>
                        <tr v-for="cat in categories" :value="cat.id">
                       
                          <td><img style="width: 50px;height: 50px;" :src="'img/' + cat.img"/> </td>
                          <td>{{ cat.cat }} </td>
                          <td>{{ cat.topcat.topcat }} </td>
                          <td>{{ cat.lieustock.lieu }} </td>
                          <td>
                        
                      <button @click="deletecat(cat.id)" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash">
                              </i>
                        supprimer</button>
                          </td>
    
              
    
    
     
                  
                      </tr>
               
                      </tbody>
            
            
                      </table>
                         </div>
                    <!-- /.card-body -->
                  </div>
                  <!-- /.card -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            </section>
    
                          </div>
                      </div>
                  </div>
              </div>
          </div>   
      </template>


<script>
     export default {
            data() {
              return{
         
  
            
                 
                lieustocks:[],
                topcats:[],
                categories:[],
                cat:[{
                  image:'',
                idlieutoock:'',
                 idtopcat:'',
                  categorie:'',
             
                 
            
                }],

              }   },

              created(){
   
  this.getlieustock();
  this.getcategories();

  
            },        
         
  
      
          
            methods:{
              onfilselected(event){
                console.log(event)
    
    this.cat.image= event.target.files[0];
  
     
      },
              getcategories(){
                
                axios.get('./api/categorie')
     .then(response =>{
     this.categories = response.data.categories;
    
     
     })
     .catch(error =>{
     console.log(error);
     })
              },

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

     addcat(){
     
            
     
      let formdata = new FormData();
      formdata.append('lieustock',this.cat.idlieutoock)
      formdata.append('topcat',this.cat.idtopcat)
      formdata.append('categorie',this.cat.categorie)
      formdata.append('image', this.cat.image)

     let config = {
      headers :{"content-type":'multipart/form-data'}
  
      
     }
      axios.post('./addcategorie', formdata ,config)
  
      .then(function (response) {
        Swal.fire(
   'parfait!',
   'vente bien enregistrer!',
   'success'
 )
 
        this.this.cat.idlieutoock='';
        this.cat.idtopcat;
        this.cat.categorie='';
        this.cat.image='';

     $('modal-xl').modal('hide');
  
     this.getcategories();
      })
      .catch(function (error) {
        console.log(error);
      });
    
    },
     


    deletecat(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/supcat/'+id).then(response=>{
  if(response.data.status=='success'){
     Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
    this.getcategories();
  }
})



   
  }
})
    }




















              
              
                   }  
                   
              
           }
</script>