@extends('layouts.master')

@section('content')


			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <div class="container">
                    <div class="col-md-12">
                @if(session()->get('success')) 
                    <div class="alert alert-success">
                  {{ session()->get('success') }}  
                        </div>
                @endif
                </div></div>
                
                
                <div class="container">
                  <div class="col-md-12">
                @if(session()->get('errorsrep'))
                  <div class="alert alert-danger">
                {{ session()->get('errorsrep') }}  
                      </div>
                @endif
                </div>
                
                <div>
                @if ($errors->any())
                <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div><br />
                @endif

                <div class="content-header">
                    <div class="container-fluid">
                      <div class="row mb-2">
                        <div class="col-sm-6">
                          <h1 class="m-0 text-dark">Gestion des Produits</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                          <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">
                                <i class="fa fa-home fa-fw" aria-hidden="true"></i> Accueil</a>
                            </li>
                            <li class="breadcrumb-item active">Produit</li>
                          </ol>
                        </div><!-- /.col -->
                      </div><!-- /.row -->
                    </div><!-- /.container-fluid -->
                  </div>

				<!-- Main content -->
				<section id="main" class="content">	
					<div class="row">						
						<div id="html" class="col">

                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#myModal">
                            <i class="fa fa-briefcase"></i>
                            <span>Ajouter un Produit</span>
                        </button>
                        </div>

					</div>
        <table id="table" class="table table-striped table-bordered" style="width: 100%">
            <thead>
                <tr>
                    <th>Nom Produit</th>
                    <th>Marque</th>
                    <th style="width:40px;">Image</th>
                    <th class="action align-top">Action</th>			
                </tr>
            </thead>
            <tbody>
                @foreach($produits as $produit)
                <tr>
                    <td>{{$produit->designationPro}}</td>
                    <td>{{$produit->marque->designationMar}}</td>
                    <td><img src="{{ asset('storage/'.$produit->avatar) }}" alt="" class="img-thumbnail"></td>					
					
                    <td>
                        <form action="{{ route('produits.destroy', $produit->id)}}" method="post">
                            @csrf
                            @method('DELETE')
                        <a class="badge badge-warning" href="{{ route('produits.edit',$produit->id)}}">
                            <i class="fas fa-edit"></i>
                         </a>
                         <button class="badge badge-danger" type="submit"  
 onclick="return confirm('Si cet Produit est SUPPRIMER en supprimera aussi toutes les stocks qui appartient a cette Produit et aussi Supprimera toute les Commande appartien a cette Produit, Voulez-vous vraiment supprimer cet Produit');">
 <i class="fas fa-trash-alt"></i></button> </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th>Nom Produit</th>
                    <th>Marque</th>
                    <th>Image</th>
                    <th>Action</th>
                </tr>
            </tfoot>
        </table>
    </section>
<!-- /.content -->
            </div>
            


<!-- Button trigger modal -->


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header"> 
        <h4 class="modal-title"></h4>              
                <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
                </button>
        </div>
            <div class="modal-body">
                
                
                <div>
                    
                    <br/>
                    <strong style="color:teal;font-style: italic;">
                        Est ce que vous voulez ajouter que le Produit Ou le Produit avec leurs Stocks ?
                        <br/>
                        -Si vous voulez Ajouter que le Produit clique sur Ajouter Produit
                        <br/>
                        -Si vous voulez Ajouter le Produit avec son Stock clique sur Ajouter Produit-Stock
                    </strong> 
                </div>
            </div>
            <div class="modal-footer">
            
                <button type="button" data-toggle="modal" data-target="#infos" class="btn btn-success">Ajouter Produit</button>
                <button type="button" data-toggle="modal" data-target="#infos1" class="btn btn-info">Ajouter Produit-Stock</button>
            </div>
        </form>
    </div>
    </div>
    </div>

    <div class="modal fade" id="infos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"> 
            <h4 class="modal-title">L'Ajout d'un Produit :</h4>              
                    <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                    </button>
            </div>
            <form action="{{ route('produits.store') }}" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" name="name" id="name" class="form-control" placeholder="Designation Produit ...">
                        </div>
                
                
                <div class="form-group">
                    <label for="marque_id" class="col-md-4">Marque :</label>
                    <div>
                        <select name="marque_id" id="marque_id" class="form-control">
                            <option value="0" disabled="true" selected="true">-Select-</option>
                            @foreach($marques as $marque)
                            
                          <option value="{{ $marque->id }}">
                            {{ $marque->designationMar}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
    
                <div class="form-group">
                    <input type="file" name="avatarI" class="form-control">
                        <label for="avatar" >
                        <i class="fa fa-upload"></i>
                        Choisir une photo</label>
                        <div class="level-right">
                        </div>
                        
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-dismiss="modal">Fermer</button>
                    <button type="submit" class="btn btn-success">Enregistrer</button>
                    </div>
            </form>
        </div>
        </div>
        </div>

        <div class="modal fade" id="infos1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> 
                <h4 class="modal-title">L'Ajout d'un Produit avec Stock :</h4>              
                        <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                        </button>
                </div>
                <form action="{{ route('stocks.storeStock') }}" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="text" name="name" id="name" class="form-control" placeholder="Désignation Produit ...">
                            </div>
                    
                    
                    <div class="form-group">
                        <label for="marque_id" class="col-md-4">Marque :</label>
                        <div>
                            <select name="marque_id" id="marque_id" class="form-control">
                                <option value="0" disabled="true" selected="true">-Select-</option>
                                @foreach($marques as $marque)
                              <option value="{{ $marque->id }}">
                                {{ $marque->designationMar}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
        
                    <div class="form-group">
                        <input type="file" name="avatarI" class="form-control">
                            <label for="avatar" >
                            <i class="fa fa-upload"></i>
                            Choisir une photo</label>
                            <div class="level-right">
                            </div>
                            
                        </div>
                        
                        <div>
                            <strong style="color: violet;">Message : </strong>
                            <strong style="color:teal;font-style: italic;">
                                Clique sur <span style="color:darkgreen;">Suivant </span>pour ajoute le stock
                            </strong> 
                        </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-dismiss="modal">Fermer</button>
            <button type="button" data-toggle="modal" data-target="#mystock" class="btn btn-success">Suivant</button>

            <div class="modal" id="mystock">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Enregistrement de Stock :</h4>            
                            <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                            </button>
                    </div>
                    <form action="{{ route('stocks.storeStock') }}" method="post">
                      {{csrf_field()}}
                        <div class="modal-body">
                            <table class="table table-striped table-bordered" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Taille</th>
                                        <th>Quantité</th>			
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                    @foreach($tailles as $taille)
                                    <td><div class="form-group form-check">
                                    <input type="checkbox" name="tailles[]" id="{{ $taille->id}}" class="form-check-input" value="{{ $taille->id}}">
                                    <label for="{{ $taille->id}}">{{ $taille->designationTail}}</label>
                                </td>
                                <td>
                                    <input type="text" name="qteStock[]">
                                    </div></td>
                                </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Taille</th>
                                        <th>Quantité</th>
                                    </tr>
                                </tfoot>
                            </table>
                      </div>
                      <div>
                        <strong>NB : </strong>
                        <strong style="color: red;font-style: italic;">
                            Entrer au moins une taille, Merci :-)
                        </strong> 
                    </div>
                    <div class="modal-footer">
                      <button type="submit" class="btn btn-success">Enregister</button>
          
                    </div>
                  </div>
                </div>
              </div>
        </div>
        </form>
    </div>
    </div>
    </div>
    
  



<!-- script jquery-sersh and pagination-->
<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>

<script>
      $(document).ready(function() {

      $('#table thead th').each(function() {
          var title = $('#table thead th').eq($(this).index()).text();
          $(this).html("<span class='align-top'>"+ title +'</span><br><input class="form-control" placeholder="Rechercher..." >');
      });
       
      // DataTable
      var table = $('#table').DataTable();
       
      // Apply the search
      table.columns().eq(0).each(function(colIdx) {
          $('input', table.column(colIdx).header()).on('keyup change', function() {
              table
                  .column(colIdx)
                  .search(this.value)
                  .draw();
          });
       
          $('input', table.column(colIdx).header()).on('click', function(e) {
              e.stopPropagation();
          });
      });
      $(".action").html("Action");

        
        });
    </script>
@endsection