@extends('layouts.appadmin')
<style>
  .modal-title-custom {
  font-size: 1.5rem; /* Tu peux ajuster la taille de la police selon ton besoin */
}
</style>
@section('content')

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
          <!-- Button trigger modal -->
          <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-edit">
                                  Ajouter produit<i class="fas fa-edit"></i>
                                </button>
         
            <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                                  <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h5 class="modal-title" id="modalLabel">ajouter produit</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                        </button>
                                      </div>
                                      <div class="modal-body">
                                        <form method="POST" action="{{asset('addproduit2')}}" enctype="multipart/form-data">      
                                          @csrf
                                          <div class="row">

                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="categorie">Catégorie</label>
                                                <select name="cat" class="form-control" id="exampleFormControlSelect1">
                                                  @foreach($categories as $cat)
                                                  <option value="{{$cat->id}}">{{$cat->topcat}}</option>
     
                                                     @endforeach
                                                         </select>
                                              </div>
                                            </div>
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="categorie">mettre</label>
                                                <select name="mettre" class="form-control" id="exampleFormControlSelect1">
                                                  @foreach($mettres as $mettre)
                                                  <option value="{{$mettre->id}}">{{$mettre->mettre}}</option>
     
                                                     @endforeach
                                                         </select>
                                              </div>
                                            </div>
                                            <!-- Désignation -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="designation">Désignation</label>
                                                <input name="nom"  type="text" class="form-control" placeholder="Désignation">
                                              </div>
                                            </div>

                                            <!-- Référence -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="reference">Référence</label>
                                                <input name="ref"  type="text" class="form-control" placeholder="Référence">
                                              </div>
                                            </div>
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="reference">Couleur</label>
                                                <input name="couleur"  type="text" class="form-control" placeholder="Référence">
                                              </div>
                                            </div>
                                            <!-- Catégorie -->
                                          

                                      
                                          
                                        

                                

                                                                        <!-- Prix Achat -->
                                                                        <div class="col-md-6">
                                                                          <div class="form-group">
                                                                            <label for="prixAchat">UF</label>
                                                                            <input name="uf" type="text" class="form-control" placeholder="Prix Achat">
                                                                          </div>
                                                                        </div>
                            
                                                       
                                            <!-- Quantité -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="quantite">Quantité</label>
                                                <input name="qty" type="text" class="form-control" placeholder="Quantité">
                                              </div>
                                            </div>

                                            <!-- Image -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="image">Image</label>
                                                <input type="file" name="image" class="form-control">
                                              </div>
                                            </div>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="submit" class="btn btn-success">Enregistrer</button>
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                          </div>
                                        </form>
                                      </div>
                                    </div>
                                  </div>
                                </div>
            <div class="row mb-2">
                <div class="col-sm-12">
           
      
             

          
                    <form id="search-form" class="mb-3" method="Get" action="{{asset('/produits/recherche')}}">
                        <input name="search" type="text" id="search" class="form-control" placeholder="Rechercher par nom, référence ou catégorie">
                        <button class="btn btn-success">cherche </button>
                    </form>

              

                    <section class="content">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header bg-info">
                                        <h4 class="text-white font-weight-bold"><i class="fas fa-users"></i> Liste Produits</h4>
                                    
                                      </div>

                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered" cellspacing="0" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Désignation</th>
                                                        <th>Reference</th> 
                                      
                                                        <th>Couleur</th>
                                                       
                                                        <th>U.F</th>
                                                     
                                                       
                                                        <th>catgorie</th>
                                                         <th>long</th>
                                                       
                                                        <th>Qty</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($produits as $produit)
                                                    <tr>
                                                        <td>{{ $produit->id }}</td>
                                                        <td><a class="text-primary font-weight-bold" href="">{{ $produit->nom }}</a></td>
                                                         <td class="text-primary font-weight-bold">{{ $produit->ref }}</td> 
                                                         <td><a class="text-primary font-weight-bold" href="">{{ $produit->couleur }}</a></td>
                                                       
                                                         <td>{{ $produit->uf }}</td>
                                                         <td class="text-success font-weight-bold">{{ $produit->topcat->topcat }}</td>
                                                         <td>{{ $produit->mettre->mettre }}</td>
                                                        <td>{{ $produit->stock }}</td>




                                                  
                                                      
                                                        <td>
                                                        <a href="{{asset('deleteproduit/'.$produit->id)}}"  class="btn btn-danger btn-sm">
                                  <i class="fas fa-trash"></i>
                                </a>
                                                           <!-- Bouton Éditer -->
                                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-edit-{{$produit->id}}">
                                  <i class="fas fa-edit"></i>
                                </button>

                                <!-- Modal d'édition -->
                                <div class="modal fade" id="modal-edit-{{$produit->id}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                                  <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h5 class="modal-title" id="modalLabel">Modifier le produit</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                        </button>
                                      </div>
                                      <div class="modal-body">
                                        <form method="POST" action="{{asset('updatproduit/'.$produit->id)}}" enctype="multipart/form-data">      
                                          @csrf
                                          <div class="row">
                                            <!-- Désignation -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="designation">Désignation</label>
                                                <input name="nom" value="{{$produit->nom}}" type="text" class="form-control" placeholder="Désignation">
                                              </div>
                                            </div>

                                            <!-- Référence -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="reference">Référence</label>
                                                <input name="ref" value="{{$produit->ref}}" type="text" class="form-control" placeholder="Référence">
                                              </div>
                                            </div>
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="reference">Couleur</label>
                                                <input name="com" value="{{$produit->couleur}}" type="text" class="form-control" placeholder="commentair">
                                              </div>
                                            </div>

                                            <!-- Catégorie -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="categorie">Catégorie</label>
                                                <select name="cat" class="form-control">
                                                  @foreach($categories as $cat)
                                                    <option value="{{$cat->id}}" {{$cat->id == $produit->topcat_id ? 'selected' : ''}}>{{$cat->topcat}}</option>
                                                  @endforeach
                                                </select>
                                              </div>
                                            </div>

                                            <!-- Fournisseur -->
                                        
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="categorie">mettre</label>
                                                <select name="mettre" class="form-control" id="exampleFormControlSelect1">
                                                  @foreach($mettres as $mettre)
                                                  <option value="{{$mettre->id}}" {{$mettre->id == $produit->mettre_id ? 'selected' : ''}}>{{$mettre->mettre}}</option>
     
                                                     @endforeach
                                                         </select>
                                              </div>
                                            </div>
                                            <!-- Prix Achat -->
                 
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="prixAchat">UF</label>
                                                <input name="uf" value="{{$produit->uf}}" type="text" class="form-control" placeholder="Prix Achat">
                                              </div>
                                            </div>

                                          
                                            <!-- Quantité -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="quantite">Quantité</label>
                                                <input name="qty" value="{{$produit->stock}}" type="text" class="form-control" placeholder="Quantité">
                                              </div>
                                            </div>

                                            <!-- Image -->
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="image">Image</label>
                                                <input type="file" name="image" class="form-control">
                                              </div>
                                            </div>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="submit" class="btn btn-success">Enregistrer</button>
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                          </div>
                                        </form>
                                      </div>
                                    </div>
                                  </div>
                                </div>


                                <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal-edite-{{$produit->id}}">
  <i class="fas fa-eye"></i>
</button>

<!-- Modal d'édition -->
<div class="modal fade" id="modal-edite-{{$produit->id}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title modal-title-custom" id="modalLabel">Détail du Produit:{{$produit->nom}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Carte de présentation du produit -->
        <div class="card">
          <div class="card-body d-flex">
            <!-- Informations à gauche -->
            <div class="col-md-6">
            
              <p><strong>Référence:</strong> {{$produit->ref}}</p>
              <p><strong>Catégorie:</strong> {{$produit->topcat->topcat}}</p>
              
              <p><strong>mettre:</strong> {{ $produit->mettre->mettre }} </p>
          
              <p><strong>Prix de Vente:</strong> {{$produit->prixvente}} MAD</p>
              <p><strong>Quantité en Stock:</strong> {{$produit->stock}}</p>
              <p><strong>Commentair:</strong> {{$produit->com}}</p>
            </div>

            <!-- Image à droite -->
            <div class="col-md-6 text-center">
              <img src="{{ asset('img/'.$produit->img) }}" alt="Image du Produit" class="img-fluid" style="max-width: 250px;">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>


                              </td>
                           
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>

                                            <!-- Pagination stylisée avec Bootstrap -->
                                            <div class="d-flex justify-content-center mt-4">
                                              {{ $produits->links('pagination::bootstrap-4') }}
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script src="{{ asset('dash/plugins/jquery/jquery.min.js') }}"></script>