@extends('layouts.layout')
@section('content')

{{-- SHOW ALL --}}

<div class="container">
  <h2>Vos users</h2>
</div>
<hr>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Ajouter un user</button></div>
<hr>
<section id="user_list" class="container">
  @if ( count($users) > 0 )
  <table id="tab_users">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Roles</th>
      </tr>
    </thead>
    <tbody>
      @foreach ( $users  as $user)
      <tr data-id="{{ $user->id }}" class="user_edit" data-toggle="modal" data-target="#edit_squarespaceModal">
        <td>{{ $user->name }}</td>
        <td>{{ $user->email }}</td>
        <td>
          <ul class="listeroles">
           @foreach ( $user->roles as $userrole)
           <li class="inline-b">{{ $userrole->name }}</li>
           @endforeach
         </ul>
       </td>
     </tr>
     @endforeach
   </tbody>
 </table>
 @endif
</section>

{{-- ADD --}}

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3 class="modal-title" id="lineModalLabel">Ajouter un user</h3>
      </div>
      <div class="modal-body clearfix">
        <div id="err_add_user">
        </div>
        <form method="post" action="/users" id="add_user">
          @csrf
          {{-- <div class="form-grou">
            <label for="role">Role</label>
            <select name="role" class="form-control">
              @foreach ( $roles as $role )
              <option value="{{ $role->name }}">{{ $role->name }}</option>
              @endforeach
            </select>
          </div> --}}
          <input type="hidden" name="role" value="basic">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name"/>    
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" name="email"/>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password"/>
          </div>
          <div class="form-group">
            <label for="passwordconfirm">Password confirm</label>
            <input type="password" class="form-control" id="passwordconfirm" name="passwordconfirm"/>
          </div>
          <div class="form-group col-sm-12 text-right">
            <button type="submit" class="btn btn-primary">Ajouter</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- SHOW/EDIT --}}

<div class="modal fade" id="edit_squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3 class="modal-title" id="edit_lineModalLabel">Modifier un user <button id="new_password" type="button" class="btn btn-primary pull-right" data-id="">Réinitialiser le mot de passe</button></h3>
      </div>
      <div class="modal-body clearfix">
        <div id="err_edit_roles">
        </div>

       {{--  <form id="edit_roles" action="" method="post">
       @csrf --}}
          {{-- <div class="form-group">
            <button type="submit" class="btn btn-primary pull-right">Add role</button>
            <h4>Role</h4>
            <select name="role" class="form-control">
              @foreach ( $roles as $role )
              <option value="{{ $role->name }}">{{ $role->name }}</option>
              @endforeach
            </select>
          </div> --}}
          {{-- <div class="form-group">
            <ul id="edit_roles_list">
            </ul>
          </div>
          <div class="text-right">
          </div>
        </form> --}}
        {{-- <hr> --}}
        <div id="err_edit_user">
        </div>
        <form method="post" action="" id="edit_user">
          @csrf
          <div class="form-group">
            <label for="edit_name">Name</label>
            <input type="text" class="form-control" id="edit_name" name="name"/>    
          </div>
          <div class="form-group">
            <label for="edit_email">Email</label>
            <input type="text" class="form-control" id="edit_email" name="email"/>
          </div>

          <div class="form-group">
            <label for="edit_password">Password</label>
            <input type="password" class="form-control" id="edit_password" name="password"/>
          </div>
           <p class="infos">Laisser vide pour ne pas modifier le mot de passe</p>
          <div class="form-group">
            <label for="edit_passwordconfirm">Password confirm</label>
            <input type="password" class="form-control" id="edit_passwordconfirm" name="passwordconfirm"/>
          </div>
           <p class="infos">Laisser vide pour ne pas modifier le mot de passe</p>
          <div class="form-group col-sm-12">
            <div class="col-sm-6"><button id="destroy_user" type="button" class="btn btn-danger">Supprimer</button></div>
            <div class="col-sm-6 text-right"><button type="submit" class="btn btn-primary">Enregistrer</button></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- DELETE --}}

<div  style="display: none" >
  <form id="delete_user">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
    <div class="err_del"> 
    </div>
  </form>
</div>  

<div  style="display: none" >
  <form id="delete_user_role">
    @csrf
    <input type="hidden" id="rem_role_id" name="rem_role_id">
    <div class="err_del_role"> 
    </div>
  </form>
</div>  


<script>
  jQuery(document).ready(function($) {
    frenchDataTable('#tab_users',100);
    formSubmitWithErrors('#add_user', '#err_add_user');
    formSubmitWithErrors('#edit_user', '#err_edit_user');
    formSubmitWithErrors('#edit_roles', '#err_edit_roles');

    $('.user_edit').click(function(event) {
      iduser=$(this).data('id');
      var form = $('#edit_user');
      var formroles = $('#edit_roles');
      var url='/user/'+$(this).data('id');
      var urlroles='/user/role/'+$(this).data('id');
      $.ajax({
        type: "GET",
        url: url
      }).done(function(data){
        var jsondata = JSON.parse(data);
        form.attr('action', url);
        formroles.attr('action', urlroles);
        $('#edit_name').val(jsondata.user.name);
        $('#edit_email').val(jsondata.user.email);
        $('#edit_roles_list').empty();
        $('#edit_password').val('');
        $('#edit_passwordconfirm').val('');
        $('#new_password').attr('data-id', iduser);
        $(jsondata.roles).each(function(index, el) {
          $('#edit_roles_list').append('<li class="inline-b tag">'+el.name+'<button type="button" class="close remrole" onClick="rem_role('+el.id+')"><span>×</span></button></li>');
        });
      }).fail(function(data) {
        console.log(data);
      });
    });  

    $('#destroy_user').click(function(event) {
      var url = $('#edit_user').attr('action');
      var form = $('#delete_user');
      $.ajax({
        type: "DELETE",
        url: url,
        data: form.serialize(),
      }).done(function(data){
        location.reload();
      }).fail(function(data) {
        location.reload();
      });
    });

  });

  $('#new_password').click(function(event) {
      $.ajax({
        type: "GET",
        url: "/user/resetpassword/"+$(this).data('id'),
      }).done(function(data){
        location.reload();
      }).fail(function(data) {
        location.reload();
      });
  });

  function rem_role(id){
    var url = $('#edit_user').attr('action')+'/detach';
    $('#rem_role_id').val(id);
    var form = $('#delete_user_role');
    $.ajax({
      type: "POST",
      url: url,
      data: form.serialize(),
    }).done(function(data){
      location.reload();
    }).fail(function(data) {
      location.reload();
    });
  }


</script>
@endsection