@extends('layouts.appadmin')

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="font-weight-bold">Categories</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
<!-- Button trigger modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">
 + categorie
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
  <div class="modal-content bg-info text-white">

      <div class="modal-body">
      <form method="POST" action="{{asset('addtopcat')}}" enctype="multipart/form-data">

      @csrf  
  <div class="form-group">
    <label for="exampleInputEmail1">Ajouter une categorie</label>
    <input name="topcat" type="text" class="form-control" placeholder="Enter categorie">
    </div>  
    <div class="form-group">
    <label for="exampleFormControlSelect1">Choisi stock </label>
    <select name="lieu" class="form-control" id="exampleFormControlSelect1">
    @foreach($lieustock as $lieu)
      <option value="{{$lieu->id}}">{{$lieu->lieu}}</option>
     
      @endforeach
    </select>
  </div> 
  <div class="form-group">
    <label for="exampleFormControlFile1">Ajouter image</label>
    <input type="file" name="image" class="form-control-file" id="exampleFormControlFile1">
  </div>




  <button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
        <button type="submit" class="btn btn-warning float-right">enregistrer</button> 
</form>
</div>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <form id="search-form" class="mb-3" method="Get" action="{{asset('/searchecat/')}}">         
    <div class="input-group">
        <input name="search" type="text" id="search" class="form-control" placeholder="Rechercher par nom" value="{{ request('search') }}">
        <button class="btn btn-success" type="submit">Chercher</button>
    </div>
</form>

         <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">
          <div class="card">
          <div class="card-header  bg-info">
       
          <div class="col-md-3 font-weight-bold"><i class="fas  fa fa-users"></i>  categories
          <span class="badge badge-pill badge-warning" style="font-size:20px;"> {{$topcats->count() }}</span>
          </div> 
            </div>  

            





     
              

            <!-- /.card-header -->
            <div class="card-body"> 
            <div class="table-responsive">
            <table  class="table table-bordered display nowrap" id="categoriesTable" cellspacing="0" width="100%">
                <thead>
                <tr>
                <th style="color: blue;font-weight: bold;">Ref</th>
                
                <th style="color: blue;font-weight: bold;">categorie</th>
              
                <th style="color: blue;font-weight: bold;">lieu de stockage</th>
                <th>action</th>
              
             
                </tr>
                </thead>
                <tbody>   <tr>
                  @foreach($topcats as $cat)
                  <td>  {{$cat->id}}</td>
             
             <td class="text-primary font-weight-bold"> {{$cat->topcat}}  </td>
           
             <td> {{$cat->lieustock->lieu}} </td>
             <td>{{$cat->produits_count}}
          
                          <a type="button" class="btn btn-info btn-sm"  data-toggle="modal" data-target="#exampleModal{{$cat->id}}">
                          <i class="fas fa-pencil-alt">
                              </i>
                             
                         
</a>

<!-- Modal -->
<div class="modal fade" id="exampleModal{{$cat->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
  <div class="modal-content bg-info text-white">
 
      <div class="modal-body">
      <form method="POST" action="{{asset('modiftopcat/'.$cat->id)}}" enctype="multipart/form-data">

@csrf  
<div class="form-group">
<label for="exampleInputEmail1">Ajouter une categorie</label>
<input value="{{$cat->topcat}}" name="topcat" type="text" class="form-control" placeholder="Enter categorie">
</div>  
<div class="form-group">
<label for="exampleFormControlSelect1">Choisi stock </label>
<select name="lieu" class="form-control" id="exampleFormControlSelect1">
@foreach($lieustock as $lieu)
<option value="{{$lieu->id}}">{{$lieu->lieu}}</option>

@endforeach
</select>
</div> 
<div class="form-group">
<label for="exampleFormControlFile1">Ajouter image</label>
<img style="width: 25px;height: 25px;" src="{{asset('img/'.$cat->img)}}" alt="">
<input  type="file" name="image" class="form-control-file" id="exampleFormControlFile1">
</div>




<button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
  <button type="submit" class="btn btn-warning float-right">modifier</button> 
</form>
      </div>

    </div>
  </div>
</div>
                          <a class="btn btn-danger btn-sm" href="{{asset('topcatsup/'.$cat->id)}}">
                              <i class="fas fa-trash">
                              </i>
                      
                          </a>
                  
             </td>
           
           </tr> 
             @endforeach
          </tbody>
        </table>
           <!-- Pagination stylisée avec Bootstrap -->
           <div id="paginationLinks" class="d-flex justify-content-center mt-4">
                                                {{ $topcats->links('pagination::bootstrap-4') }}
                                            </div>
        </div>


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

                </section>
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
        @endsection
        <script src="{{asset('dash/plugins/jquery/jquery.min.js')}}"></script>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

</script>





</body>
</html>