@extends('admin.template.layout')

@section("_title", 'Usuários')

@section('_head')
  <link href="{{ url('admin/quill/quill.snow.css') }}" rel="stylesheet">
@endsection

@section('content')
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="card-title mb-0">Usuários do sistema</h5>
              <a href="#" id="btn_novo_usuario" class="btn btn-primary"><i class="fas fa-plus me-2"></i> Adicionar usuário</a>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table align-items-center mb-0" id="tabela_usuarios">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nome</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">E-mail</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Administrador</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @if (isset($usuarios) && is_array($usuarios) && sizeof($usuarios) > 0)
                    @foreach ($usuarios as $usuario)
                      <tr>
                        <td>
                          <h6 class="text-xs mb-0 ">{{ $usuario['name'] }}</h6>
                        </td>
                        <td>
                          <p class="text-xs mb-0">{{ $usuario['email'] }}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                          @if ($usuario['ativo'] == true)
                            <span class="badge badge-sm bg-success">
                              <i class="fas fa-check me-2"></i> Ativo
                            </span>
                            @else
                              <span class="badge badge-sm bg-danger">
                                <i class="fas fa-times me-2"></i> Inativo
                              </span>
                            @endif
                        </td>
                        <td class="align-middle text-center text-sm">
                          @if ($usuario['admin'] == true)
                            <span class="badge badge-sm bg-success">
                              <i class="fas fa-check me-2"></i> Sim
                            </span>
                            @else
                              <span class="badge badge-sm bg-danger">
                                <i class="fas fa-times me-2"></i> Não
                              </span>
                            @endif
                        </td>
                        <td class="align-middle text-end">
                          <a href="javascript:;" class="btn btn-sm btn-info font-weight-bold text-xs" data-edit="{{ $usuario['id'] }}">
                            Editar
                          </a>
                          <a href="javascript:;" class="btn btn-sm btn-danger font-weight-bold text-xs" data-delete="{{ $usuario['id'] }}" data-ativo="{{ $usuario['ativo'] == true ? 'sim' : 'nao' }}">
                            Excluir
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('_foot')
  <script src="{{ url('admin/quill/quill.min.js') }}"></script>
  <script src="{{ url('admin/quill/DynamicQuillTools.js') }}"></script>

  <script>
    const URL_FORM_USUARIO = "{{ route('admin.usuarios.form') }}";
    const URL_EXCLUIR_USUARIO = "{{ route('admin.usuarios.excluir.post') }}";
    $(document).ready(function () {
      $('#btn_novo_usuario').click(function () {
        core.load_modal(URL_FORM_USUARIO);
      });

      $('[data-edit]').click(function () {
        let id = $(this).attr('data-edit');
        core.load_modal(URL_FORM_USUARIO, { data: { id } });
      });

      $('[data-delete]').click(function () {
        let id = $(this).attr('data-delete');
        let options = {
          icon: 'question',
          html: `Você realmente deseja excluir este usuário? Esta ação não poderá ser desfeita!`,
          title: 'Excluir usuário',
          showConfirmButton: false,
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: 'Apenas desativar',
          denyButtonText: 'Sim, excluir',
          cancelButtonText: 'Cancelar'
        }

        if ($(this).attr('data-ativo') === 'sim') {
          options.showConfirmButton = true;
          options.html = options.html + '<br><br><small>Você pode apenas desativar o usuário para não permitir o seu acesso.</small>';
        }

        Swal.fire(options).then((result) => {
          if (result.isConfirmed === true || result.isDenied === true) {
            $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
              method: 'post',
              url: URL_EXCLUIR_USUARIO,
              data: {
                id, 
                func: (result.isDenied === true) ? 'excluir' : 'desativar'
              },
              success: function (res) {
                if (res.status === 'success') {
                  location.reload();
                }
              }
            })
          }
        });
      });
    });
  </script>
@endsection