@extends('templates.template')
@push('page-title')
   <h2>Usuários</h2>
    <p>Cadastre, edite e remova usuários do sistema.</p>
    
@endpush
@section('content')
   <div class="row">
        <div class="col-md-3">
            <a href="{{ url(route('users.adduser')) }}" class="tile-box tile-box-shortcut btn-warning">
                <span class="bs-badge badge-absolute">
                    Usuários
                </span>
                <div class="tile-header">Adicionar Usuários</div>
                <div class="tile-content-wrapper">
                    <i class="fa fa-user-plus glyph-icon"></i>
                </div>
            </a>
        </div>

         <div class="col-md-3">
            <a href="{{ url(route('configuracao.franquias')) }}" class="tile-box tile-box-shortcut btn-success">
                <span class="bs-badge badge-absolute">
                    Franquias
                </span>
                <div class="tile-header">Todas as Franquias</div>
                <div class="tile-content-wrapper">
                    <i class="fa fa-building-o glyph-icon"></i>
                </div>
            </a>
        </div>

  </div>
  <hr/>
  <h2>Usuários</h2>
  <hr>
  <table class="table table-striped table-bordered" role="grid" aria-describedby="example_info" id="searchListarUser" width="100%">
    <thead>
      <tr>
        <th height="20px">
          <div class="divBotaoEnviarDados" hidden>
            <button class="enviarDados btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
          </div>
        </th>
      </tr>
        <tr>
            {{-- <th><input class="selecionarTodos" style="width: 1.2em; height: 1.2em;" type="checkbox" name="geral" id="geral"> Código</th> --}}
            <th>Código</th>
            <th>Nome</th>
            <th>Grupo</th>
            <th>Cidade da Franquia</th>
            <th>Ação</th>
        </tr>
    </thead>
    <tbody>
      @foreach($usuarios as $key => $user)
      	<tr>
      		<th class="th"><input class="checkClick" style="width: 1.2em; height: 1.2em;" type="checkbox" id="{{$user->id}}" value="{{$user->id}}" name="usersDelete[]"> <span style="vertical-align: middle;font-size:13px;" class="ms-3">{{$user->id}}</span></th>
          <th class="th">{{$user->name}}</th>
          <th class="th">
            @foreach($user->roles as $role)
              {{$role->name}}
        		@endforeach
          </th>
      		<th class="th">{{$user->configuracao['cidade'] ?? ''}}</th>
      		<th class="th"> 
      		<a href="{{route('configuracao.usuarios.editar', $user->id)}}"  data-toggle="tooltip" data-placement="top" title="Editar" class="btn btn-primary btn-xs">
                    <i class="fa fa-edit"></i>
             </a>
          <a href="{{route('configuracao.usuarios.deletar', $user->id)}}" title="Excluir" class="deletarIndividual btn btn-danger btn-xs">
                    <i class="fa fa-trash"></i>
          </a>
 
      	@endforeach

                 <!-- Modal delete -->
             <!--    <div class="modal fade" id="deletar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Excluir Usuário</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        Tem certeza de que quer excluir {{$user->name}}?
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-danger" ><a style="color: #fff;" href="{{route('configuracao.usuarios.deletar', $user->id)}}">Sim</a></button>
                      </div>
                    </div>
                  </div>
                </div> -->
            </th>
        </tr>
    </tbody>
</table>
<div class="preloader" hidden>
  <div class="caju">
    {{-- <img src="caju.png" alt="Caju"> --}}
    <strong><p style="font-size: 15px;">Carregando. Por favor, aguarde!</p></strong>
  </div>
  <div class="castanhas">
    <div class="castanha"></div>
    <div class="castanha"></div>
    <div class="castanha"></div>
  </div>
</div>
<div class="divSucces" hidden>
  <div class="caju">
    {{-- <img src="caju.png" alt="Caju"> --}}
    <strong>
      <p style="font-size: 15px;">
        <span style="font-size: 15px;">
          Dados(s) excluído(s) com sucesso
        </span> 
          <i class="fa fa-check" style="font-size:48px;color:green"></i>
      </p>
    </strong>
  </div>
  <div class="castanhas">
    <div class="castanha"></div>
    <div class="castanha"></div>
    <div class="castanha"></div>
  </div>
</div>
<div class="divError" hidden>
  <div class="caju">
    {{-- <img src="caju.png" alt="Caju"> --}}
    <strong>
      <p>
        <span style="font-size: 15px;">Erro ao salvar dados </span> <i class="fa fa-remove" style="font-size:48px;color:red"></i>
      </p>
    </strong>
  </div>
  <div class="castanhas">
    <div class="castanha"></div>
    <div class="castanha"></div>
    <div class="castanha"></div>
  </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
      /*
        Regras que devem ocorrer ao carregar o DOM
      */
      $('input[name="usersDelete[]"]').prop('checked', false);
      $(".preloader").hide();
      $(".divSucces").hide();
      $(".divError").hide();

      /* 
        Table
      */
      $('[data-toggle="tooltip"]').tooltip();

      /*
        #searchListarUser
      */
      $('#searchListarUser').dataTable({
        "columnDefs": [
            {
                "targets": 0,  
                "orderable": false
            }
        ],
        /*
            MANIPULAÇÃO DO DOM DENTRO DESSA FUNÇÃO PARA SER DINÂMICO A CADA RENDERIZAÇÃO DO JAVASCRIPT NA PAGINAÇÃO DA TABELA
        */
        "drawCallback": function(settings)
          {
              /*
                Teste
              */
              var api = new $.fn.dataTable.Api( settings );
              var currentPage = api.page.info().page;
              console.log(currentPage);
              
              /*
                Atualizar dados conforme a página atual
              */
              verificarSeInputNaPageAtualSelecionado();

              /*
              Ocultar ou não botão de deletar
              */
              $('.checkClick').click(function(){
                var idDoBotao = $(this).attr('id');
                var valueDoBotao = $(this).attr('value');
                var valoresSelecionados = [];
                valoresSelecionados = $("input[name='usersDelete[]']:checked").map(function(){
                  return $(this).val();
                }).get();
                
                if(valoresSelecionados.length > 0){
                  if($(".divBotaoEnviarDados").is(":hidden"))
                    $(".divBotaoEnviarDados").show();
                    return;
                }
                $(".divBotaoEnviarDados").hide();
              });


              /*
                Selecionar ou desmarcar usuário pelo botão global de seleção
              */
              $(".selecionarTodos").change(function() {
                if($(this).prop("checked")) {
                  $(".checkClick").prop("checked", true);
                } else {
                  $(".checkClick").prop("checked", false);
                }
              });


              /*
                Confirmar ação de excluir individualmente
              */
              $('.deletarIndividual').click(function(event){
                    event.preventDefault();
                    var __URL__ = $(this).attr('href');
                    bootbox.confirm("Deseja deletar este registro?", function(result) {
                        if(result){
                            $(window.document.location).attr('href',__URL__);
                        }
                    });
              });
                
          }
      });
      /*
       FIM #searchListarUser
      */


      /*
        Deletar Informações
      */
      $(".enviarDados").click(function() {
        
        bootbox.confirm('Deseja confirmar a exclusão do(s) dado(s) selecionado(s) ?', function(result)
          {
            if(result){
              var valoresSelecionados = $("input[name='usersDelete[]']:checked").map(function(){
                return $(this).val();
              }).get();

              $(".preloader").show();
              $(".enviarDados").prop("disabled", true);
              
              $.ajax({
                  url: "{{route('users.deleteUsersSelected')}}",  // Substitua pelo URL da rota do seu controller Laravel
                  type: 'POST',
                  // dataType:"json",
                  data: {
                      _token : '{{ csrf_token() }}',
                      usersDelete: valoresSelecionados
                  },
                  success: function(response) {
                      // Lida com a resposta do servidor (caso haja alguma)

                      $(".preloader").hide();
                      $(".divSucces").show();
                      
                      setTimeout(() => {
                        window.location.reload();
                      }, 2000);
                    
                  },
                  error: function(error) {
                      // Lida com erros de requisição (caso ocorram)
                      $(".preloader").hide();
                      $(".divError").show();

                      setTimeout(() => {
                        window.location.reload();
                      }, 2000);
                  }
              });
              return;
            }
            return;
                              
        });

      });


      function verificarSeInputNaPageAtualSelecionado(){
          console.log('draw');
          var idDoBotao = $('.checkClick').attr('id');
          var valueDoBotao = $('.checkClick').attr('value');
          var valoresSelecionados = [];
          valoresSelecionados = $("input[name='usersDelete[]']:checked").map(function(){
            return $('.checkClick').val();
          }).get();
          
          if(valoresSelecionados.length > 0){
            if($(".divBotaoEnviarDados").is(":hidden")){
              $(".divBotaoEnviarDados").show();
            }
          }
          else{
              $(".divBotaoEnviarDados").hide();
          }
      }

    });
</script>
<style type="text/css" media="screen">
  .th{
   font-weight: normal;
  }

  /* ANIMAÇÃO */
  /* body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
} */

.preloader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.caju img {
  width: 100px;
  height: 100px;
}

.castanhas {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.castanha {
  width: 20px;
  height: 20px;
  background-color: #ee7a27;
  border-radius: 50%;
  margin: 0 5px;
  animation: bounce 0.6s infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}
/* FIM ANIMAÇÃO */


.divSucces {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divError {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
@endpush