@extends(layoutTenant())

@section('content')
  <div class="row">
    <div class="col-12">
      <div class="page-title-box">
        <h4 class="page-title float-left">Lista de Usuários</h4>

        <div class="float-right">

          <form action="{{routeTenant('usuariosapp.buscar')}}" class="form form-inline" style="height:40px;width: 100%;">
                    <input type="text" name="buscar" class="form-control" style="height:40px;width: 70%;">
                    <button type="submit" class="btn btn-primary btn-outline-success">buscar</button>
          </form>
        </div>
        <div class="clearfix"></div>
        @if (session('erro'))
          <div class="alert alert-danger" style="display: flex; width: 90vw; align-items: center; justify-content: center;">
            {{ session('erro') }}
          </div>
        @endif
      </div>
    </div>
  </div>
  <div class="row" style="margin-top: -20px;  min-height: 100px; position: relative; ">
    <div style="position: absolute;  padding: 20px;  border-radius: 12px;  ">
      <div class="float-left">
        <a href="{{ routeTenant('usuariosapp.create') }}" class="btn btn-success botao-adicionar"><i class=""></i>
          Adicionar novo usuário</a>
      </div>
    </div>
  </div>
  <div class="col-xl-12 col-lg-12 col-md-6 col-sm-12 col-12" style="display:flex; gap:100px; flex-direction: column;">
    <div class="card">
      <h5 class="card-header">Usuarios</h5>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table">
            <thead class="bg-light">
              <tr class="border-0">
                <th class="border-0">Foto</th>
                <th class="border-0">Nome</th>
                <th class="border-0">E-mail</th>
                <th class="border-0">Telefone</th>
                <th class="border-0">Endereço</th>
                <th class="border-0">Funções</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($categories as $user)
                <tr>
                  <td>
                    <div class="m-r-10"><img src="{{ asset($user->foto) }}" alt="user" class="rounded" width="45">
                    </div>
                  </td>
                  <td>{{ $user->name }} </td>
                  <td>{{ $user->email }} </td>
                  <td>{{ $user->telefone }}</td>
                  <td>{{ $user->endereco }}</td>
                  <td>
                    <a href="{{ routeTenant('usuariosapp.edit', ['usuariosapp' => $user->id]) }}" title="Editar"
                      class="btn btn-primary"> <i class="fa fa-edit" aria-hidden="true"></i></a>
                    <a href="{{ routeTenant('usuariosapp.detalhes', ['id' => $user->id]) }}" title="Detalhes"
                      class="btn btn-warning"><i class="fa fa-list" aria-hidden="true"></i></a>
                    <a href="{{ routeTenant('usuariosapp.delete', ['id' => $user->id]) }}" title="Deletar"
                      data-confirm='Tem certeza de que deseja Desativar o item selecionado?' class="btn btn-secondary"
                      style="background-color:red"><i class=" fa fa-ban" aria-hidden="true"></i></a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          {!! $categories->links() !!}
        </div>
      </div>
    </div>
    @if($usersOff->total() > 0)
    <div class="card">
      <h5 class="card-header">Usuarios Dessabilitados</h5>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table">
            <thead class="bg-light">
              <tr class="border-0">
                <th class="border-0">Foto</th>
                <th class="border-0">Nome</th>
                <th class="border-0">E-mail</th>
                <th class="border-0">Telefone</th>
                <th class="border-0">Endereço</th>
                <th class="border-0">Funções</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($usersOff as $userOff)
                <tr>
                  <td>
                    <div class="m-r-10"><img src="{{ asset($userOff->foto) }}" alt="user" class="rounded"
                        width="45"></div>
                  </td>
                  <td>{{ $userOff->name }} </td>
                  <td>{{ $userOff->email }} </td>
                  <td>{{ $userOff->telefone }}</td>
                  <td>{{ $userOff->endereco }}</td>
                  <td>
                    <a href="{{ routeTenant('usuariosapp.active', ['id' => $userOff->id]) }}" title="Ativar"
                      data-confirm2='Tem certeza de que deseja Ativar o usuário selecionado?' class="btn btn-secondary"
                      style="background-color:greenyellow"><i class=" fa fa-check" aria-hidden="true"></i></a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          {!! $usersOff->links() !!}
        </div>
      </div>
    </div>
    @endif
  </div>
  <!-- ============================================================== -->
  <!-- end recent orders  -->
@endsection

@section('post-script')

  <script>

    $(document).ready(function() {
      $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#confirm-delete').length) {
          $('body').append('<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" ' +
            'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
            '<div class="modal-content"><div class="modal-header bg-secondary text-white">DESATIVAR USUARIO' +
            '<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 deseja Desativar o Usuario ?</div><div class="modal-footer">' +
            '<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar' +
            '</button><a class="btn bg-secondary text-white" id="dataComfirmOK">Desativar</a><' +
            '/div></div></div></div>');
        }
        $('#dataComfirmOK').attr('href', href);
        $('#confirm-delete').modal({
          show: true
        });
        return false;
      });
      $('a[data-confirm2]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#confirm-active').length) {
          $('body').append('<div class="modal fade" id="confirm-active" tabindex="-1" role="dialog" ' +
            'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
            '<div class="modal-content"><div class="modal-header bg-secondary text-white">ATIVAR USUARIO' +
            '<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 deseja Ativar este Usuario?</div><div class="modal-footer">' +
            '<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar' +
            '</button><a class="btn bg-secondary text-white" id="dataComfirmOK">Ativar</a><' +
            '/div></div></div></div>');
        }
        $('#dataComfirmOK').attr('href', href);
        $('#confirm-active').modal({
          show: true
        });
        return false;
      });
      console.log('Script executado com sucesso!');
    });
  </script>
@endsection