@extends ('admin.master')

@section('styles')
    <!-- CSS Files -->
   
     
@stop

@section('content-main')
	<div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Dashboard</a>
        </li>
        <li class="breadcrumb-item active">Utilisateurs</li>
      </ol>
		<!-- Example DataTables Card-->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-table"></i> Liste des utilisateurs</div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered"  id="mytable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Nom</th>                  
                  <th>Email</th>                  
                  <th>Action</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>No</th>
                  <th>Nom</th>                  
                  <th>Email</th>                  
                  <th>Action</th>
                </tr>
              </tfoot>
              <tbody>
              </tbody>
               
            </table>
            {{ csrf_field() }}
          </div>
        </div>
        <div class="card-footer small text-muted">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Ajouter
          </button>
        </div>
      </div>
	  <!-- /tables-->
	  </div>

    <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">
          <form method="post" action="{{ route('admin.users.store') }}" >
            @csrf
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">             

                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Nom</label>
                      <input type="text" class="form-control" name="name" placeholder="Nom">
                    </div>
                  </div>  
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Email</label>
                      <input type="text" class="form-control" name="email" placeholder="Email">
                    </div>
                  </div>         
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Mots de passe</label>
                      <input  class="form-control" id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" placeholder="Mots de passe">
                      @error('password')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                    </div>
                  </div>  
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="password-confirm" >Confirmé mot de pass</label>
                      <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                    </div>
                  </div>
                </div>
              
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Sauvegarder</button>

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

@stop

@section('scripts')
<script src="{{URL::asset('admin/js/admin-datatables.js')}}"></script>

<script>
  $(function(){ 
      load_data();

      function load_data(){
          $('#mytable').DataTable({
              processing:true,
              serverSide:true,
              pageLength: 5,
              ajax: {
                  url:"{{ route('admin.users.index')}}",                  
              },
              columns:[
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'name', name:'name'},                  
                  {data: 'email', name:'email'},                  
                  {data: 'action', name:'action', orderable:false, searchable: false}
              ]
          });
      }
  });
</script>
    
@stop