@extends('admin.template.layout')

@section("_title", 'Utilizadores')

@section('_head')
  <link href="{{ url('admin/quill/quill.snow.css') }}" rel="stylesheet">
  <link href="{{ url('admin/choices.js/choices.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">Utilizadores do sistema</h5>
              <a href="#" id="btn_novo_utilizador" class="btn btn-primary"><i class="fas fa-plus me-2"></i> Adicionar utilizador</a>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table align-items-center mb-0" id="tabela_utilizadores">
                <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">Contato</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Plano</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @if (isset($utilizadores) && is_array($utilizadores) && sizeof($utilizadores) > 0)
                    @foreach ($utilizadores as $utilizador)
                      <tr>
                        <td>
                          <h6 class="text-xs mb-0 ">{{ $utilizador['nome'] }}</h6>
                          <small class="text-xs"><strong>CPF: </strong>{{ $utilizador['cpf'] }}</small>
                        </td>
                        <td>
                          <p class="text-xs mb-0">{{ $utilizador['email'] }}</p>
                          <small class="text-xs"><strong>Telefone: </strong>{{ $utilizador['telefone'] }}</small>
                        </td>
                        <td>
                          <p class="text-xs mb-0">
                            {{ is_null($utilizador['plano']) ? 'Sem plano' : $utilizador['plano']['plano']['nome'] }} 
                            @if (!is_null($utilizador['plano']))
                              <br />
                              Validade: <strong>{{ $utilizador['plano']['validade'] }}</strong>
                            @endif
                          </p>
                        </td>
                        <td class="align-middle text-center text-sm">
                          @if ($utilizador['status'] == 'Ativo')
                            <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-end">
                          <a href="javascript:;" class="btn btn-sm btn-dark font-weight-bold text-xs" data-planos="{{ $utilizador['id'] }}">
                            Planos
                          </a>
                          <a href="javascript:;" class="btn btn-sm btn-info font-weight-bold text-xs" data-edit="{{ $utilizador['id'] }}">
                            Editar
                          </a>
                          <a href="javascript:;" class="btn btn-sm btn-danger font-weight-bold text-xs" data-delete="{{ $utilizador['id'] }}" data-ativo="{{ $utilizador['status'] == 'Ativo' ? 'sim' : 'nao' }}">
                            Excluir
                          </a>
                          <a target="_blank" href="{{ route('admin.utilizadores.login_as_user', $utilizador['id']) }}" class="btn btn-sm btn-warning text-xs">
                            <i class="fas fa-sign-in"></i>
                          </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 src="{{ url('admin/choices.js/choices.js') }}"></script>

  <script>
    const URL_FORM_UTILIZADOR = "{{ route('admin.utilizadores.form') }}";
    const URL_PLANOS_UTILIZADOR = "{{ route('admin.utilizadores.planos') }}";
    const URL_DESATIVAR_PLANO = "{{ route('admin.utilizadores.desativar_planos.post') }}";
    const URL_EXCLUIR_UTILIZADOR = "{{ route('admin.utilizadores.excluir.post') }}";

    $(document).ready(function () {
      $('#btn_novo_utilizador').click(function () {
        core.load_modal(URL_FORM_UTILIZADOR);
      });

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

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

      $('[data-delete]').click(function () {
        let id = $(this).attr('data-delete');
        let options = {
          icon: 'question',
          html: `Você realmente deseja excluir este utilizador? Esta ação não poderá ser desfeita!`,
          title: 'Excluir utilizador',
          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 utilizador 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_UTILIZADOR,
              data: {
                id, 
                func: (result.isDenied === true) ? 'excluir' : 'desativar'
              },
              success: function (res) {
                if (res.status === 'success') {
                  location.reload();
                }
              }
            })
          }
        });
      });
    });
  </script>
@endsection