@include('admin.header', [
   'elementActive' => 'users'
])

<div class="content-wrapper">

    <section class="content-header">
      <h1>
      Usuários<small>Gerencia usuários</small>
      </h1> 
    </section>

    <!-- Main content -->
    <section class="content">
    <div class="row">
        
        <div class="col-xs-12">
          <form action="" method="post" id="form_apagar" name="form_apagar">

            <!-- box -->
            <div class="box">
                <div class="box-body">

                    <div>

                        <button type="button" class="btn btn-primary" onclick="openModalCreate();">Novo</button>


                    </div>

                    <hr>

                    <div id="tabela1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
     
                                    <div class="row">
                                        <div class="col-sm-12">
                        <table id="tabela1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="tabela1_info">

                        <thead>
                            <tr role="row">
                              
                                <th>Nome</th>
                                <th>E-mail</th>
                                <th>Opt.</th>
                                
                            </tr>
                        </thead>
                        
                        <tbody>
                            @foreach ($users as $user)
                                <tr class="odd">
                                    <td valign="top" class="dataTables_empty">{{ $user->name }}</td>
                                    <td valign="top" class="dataTables_empty">{{ $user->email }}</td>
                                    <td>

                                        <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $user->id }}, '{{ $user->name }}', '{{ $user->username }}', '{{ $user->email }}', '{{ json_encode($user->permissions) }}')"/>
                                        <input type="button" class="btn btn-danger" value="Apagar" onclick="if (confirm('Excluir a usuário selecionado?')) { $('#delete_{{ $user->id }}').submit(); }" />
                                        <form action="{{ route('admin.users.destroy', $user->id) }}" method="post" id="delete_{{ $user->id }}" hidden>
                                            @csrf
                                            @method('DELETE')
                                        </form>

                                    </td>
                                </tr>
                            @endforeach
                                     
                        </tbody>

                    </table>
                  </div>
               </div>
               <div class="col-12">
                  <div class="col-12 text-right">
                     {!! $users->links("pagination::bootstrap-4") !!}

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

                </div>

            </div>
            <!-- /.box -->

        </form>
        </div>

    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

</div>
@include('admin.footer')



<script>
    function openModalCreate(){
        $('#id_user').val('');
        $('#name').val('');
        $('#username').val('');
        $("#email").val('');

        $("#create").modal();
    }
    function openModalEdit(id, name, username, email, permissions){
        
      permissions = $.parseJSON(permissions);

      $.each(permissions, (key, permission) => {
         if(permission == true){
            $('#'+key).prop('checked', true);
         }else{
            $('#'+key).prop('checked', false);
         }
      });

        $('#id_user').val(id);
        $('#name').val(name);
        $('#username').val(username);
        $("#email").val(email);

        $("#update").modal();
    }
</script>

<div id="update" class="modal fade" role="dialog">
   <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content" id="conteudo_modal">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h5 class="modal-title modal_titulo">Editar usuário</h5>
         </div>
         <div class="modal-body" id="modal_conteudo_m">
            <style type="text/css">
               .bootstrap-timepicker-widget table{
               background-color: #fff !important;
               }
            </style>
            <form action="{{ route('admin.users.update') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="id_schedule" name="id_user" id="id_user" hidden />
               <fieldset>
                  <div class="form-group">
                     <label class="col-md-12">Nome</label>
                     <div class="col-md-12">
                        <input name="name" id="name" type="text" class="form-control">
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="col-md-12">Usuário</label>
                     <div class="col-md-12">
                        <input name="username" id="username" type="text" class="form-control">
                     </div>
                  </div>
                  <div class="form-group">
                       <label class="col-md-12">E-mail</label>
                       <div class="col-md-12">
                       <input name="email" id="email" type="text" class="form-control">
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-md-12">Nova senha</label>
                       <div class="col-md-12">
                       <input name="password" id="password" type="text" class="form-control" placeholder="Deixe em branco para não alterar">
                       </div>
                   </div>
   
               </fieldset>

               <section class="content-header">
                  <h1 onclick="permissions();">
                     <a href="#">Permissões <small>>></small></a>
                  </h1> 
               </section>
               <script>
                  function permissions(){
                     $('#permissions').toggle();
                  }
               </script>
               <br/>
               <fieldset id="permissions" style="display: none;">
                  @foreach ($permissions as $permission)
                     <div class="form-check">
    
                        <div class="col-md-4">
                           <input name="{{ $permission->type }}" id="{{ $permission->type }}" type="checkbox" class="form-check-input">
                           <label class="form-check-label" for="{{ $permission->type }}">
                              {{ $permission->name }}
                            </label>
                            <br/>
                            <span style="font-size:9px">{{ $permission->description }}</span>
                        </div>
                        
                     </div>
                  @endforeach
               </fieldset>
               <br/>
               <div style="text-align: left; width: 100%;">
                  <button type="submit" class="btn btn-primary">Salvar</button>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         </div>
      </div>
   </div>
</div>
   
<div id="create" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
       <!-- Modal content-->
       <div class="modal-content" id="conteudo_modal">
          <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">×</button>
             <h5 class="modal-title modal_titulo">Criar anúncio</h5>
          </div>
          <div class="modal-body" id="modal_conteudo_m">
             <style type="text/css">
                .bootstrap-timepicker-widget table{
                background-color: #fff !important;
                }
             </style>
             <form action="{{ route('admin.users.store') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                 @csrf
                 @method('POST')
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-12">Nome</label>
                        <div class="col-md-12">
                           <input name="name" id="name" type="text" class="form-control">
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-12">Usuário</label>
                        <div class="col-md-12">
                           <input name="username" id="username" type="text" class="form-control">
                        </div>
                     </div>
                     <div class="form-group">
                          <label class="col-md-12">E-mail</label>
                          <div class="col-md-12">
                          <input name="email" id="email" type="text" class="form-control">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-12">Senha</label>
                          <div class="col-md-12">
                          <input name="password" id="password" type="text" class="form-control" placeholder="Deixe em branco para não alterar">
                          </div>
                      </div>
                </fieldset>

               <section class="content-header">
                  <h1 onclick="permissions_new();">
                     <a href="#">Permissões <small>>></small></a>
                  </h1> 
               </section>
               <script>
                  function permissions_new(){
                     $('#permissions_new').toggle();
                  }
               </script>
               <br/>
               <fieldset id="permissions_new" style="display: none;">
                  @foreach ($permissions as $permission)
                     <div class="form-check">
    
                        <div class="col-md-4">
                           <input name="{{ $permission->type }}" id="{{ $permission->type }}" type="checkbox" checked class="form-check-input">
                           <label class="form-check-label" for="{{ $permission->type }}">
                              {{ $permission->name }}
                            </label>
                            <br/>
                            <span style="font-size:9px">{{ $permission->description }}</span>
                        </div>
                        
                     </div>
                  @endforeach
               </fieldset>
               <br/>
               <div style="text-align: left; width: 100%;">
                  <button type="submit" class="btn btn-primary">Salvar</button>
               </div>
             </form>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
       </div>
    </div>
</div>