@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 Marques</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">Marque</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 Marque</span>
                        </button>
                        </div>

					</div>
        <table id="table" class="table table-striped table-bordered" style="width: 100%">
            <thead>
                <tr>
                    <th>Désignation</th>
                    <th class="action align-top">Action</th>			
                </tr>
            </thead>
            <tbody>
                @foreach($marques as $marque)
                <tr>
                    <td>{{$marque->designationMar}}</td>					
                    <td>
                        <form action="{{ route('marques.destroy', $marque->id)}}" method="post">
                            @csrf
                            @method('DELETE')
                        <a class="badge badge-warning" href="{{ route('marques.edit',$marque->id)}}">
                            <i class="fas fa-edit"></i>
                         </a>
                         <button class="badge badge-danger" type="submit"
                         onclick="return confirm('Si cette Marque est SUPPRIMER en supprimera aussi toutes les produits et stocks qui appartient a cette Marque, Voulez-vous vraiment supprimer cette marque ??');">
                         <i class="fas fa-trash-alt"></i></button> 

                    </form>
                        
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th>Désignation</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">L'Ajout d'une marque :</h4>              
                <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
                </button>
        </div>
        <form action="{{ route('marques.store') }}" method="post">
                {{csrf_field()}}
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" name="name" id="name" class="form-control" placeholder="Désignation ...">
                    </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>
  



<!-- 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 type="text/javascript">
      $(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