@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">Liste des Livreurs</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">Livreur</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 Livreur</span>
                        </button>
                        </div>

					</div>
        <table id="table" class="table table-striped table-bordered" style="width: 100%">
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Email</th>
                    <th>Ville</th>
                    <th>Livraison</th>
                    <th class="action align-top">Action</th>			
                </tr>
            </thead>
            <tbody>
                @foreach($livreurs as $livreur)
                <tr>
                    <td>{{$livreur->name}}</td>	
                    <td>{{$livreur->email}}</td>
                    <td>{{$livreur->ville}}</td>
                    <td>{{$livreur->livraison->etat_liv}}</td>				
                    <td>
                        <form action="{{ route('livreurs.destroy', $livreur->id)}}" method="post">
                            @csrf
                            @method('DELETE')
                        <a class="badge badge-warning" href="{{ route('livreurs.edit',$livreur->id)}}">
                            <i class="fas fa-edit"></i>
                         </a>
                         <button class="badge badge-danger" type="submit"
                         onclick="return confirm('Si cette Livreur est SUPPRIMER en supprimera aussi toutes les commandes et paniers qui appartient a cette Livreur, Voulez-vous vraiment supprimer cette Livreur ??');">
                         <i class="fas fa-trash-alt"></i></button> 

                    </form>
                        
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th>Nom</th>
                    <th>Email</th>
                    <th>Ville</th>
                    <th>Livraison</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">Vos infos :</h4>              
                <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
                </button>
        </div>
        
            <div class="modal-body">
                <form action="{{ route('livreurs.store') }}" method="post">
                                        @csrf
                
                                        <div class="form-group row">
                                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
                
                                            <div class="col-md-6">
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                
                                                @error('name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                
                                        <div class="form-group row">
                                            <label for="ville" class="col-md-4 col-form-label text-md-right">{{ __('Ville') }}</label>
                
                                            <div class="col-md-6">
                                                <input id="ville" type="text" class="form-control @error('ville') is-invalid @enderror" name="ville" value="{{ old('ville') }}" required autocomplete="ville" autofocus>
                
                                                @error('ville')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="country" class="col-md-4 control-label text-md-right">livraison :</label>
                                                <div class="col-md-6">
                                                    <select name="livraison_id" class="form-control">
                                                        <option value="0" disabled="true" selected="true">-Select-</option>
                                                        @foreach($livraisons as $livraison)
                                                        <option value="{{ $livraison->id }}">
                                                        {{ $livraison->etat_liv }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
                
                                            <div class="col-md-6">
                                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                
                                                @error('email')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                
                                        <div class="form-group row">
                                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
                
                                            <div class="col-md-6">
                                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                
                                                @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                
                                        <div class="form-group row">
                                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
                
                                            <div class="col-md-6">
                                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                            </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