@extends('layouts.app')

@section('conteudo')



<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
  <div class="bg-black-50">
    <div class="content content-full">
      <div class="d-flex justify-content-between align-items-center">
        <h1 class="flex-grow-1 fs-2 text-white my-2">
          <i class="fa fa-boxes text-white-50 me-1"></i> Organizações
        </h1>

        {{-- quem tem permissão para registrar organização verá esse botão --}}
        @can('pode_registrar_organizacao')
        <a class="btn btn-primary my-2" href="/registar_organizacao">
          <i class="fa fa-fw fa-plus"></i>
          <span class="d-none d-sm-inline ms-1">Registrar Organização</span>
        </a>
        @endcan

      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_organizacao')

<br><br>

<br><br>


@csrf


<div class="content content-boxed">
  <!-- Current Jobs -->
  <h2 class="content-heading" style="margin-top: -60px;">
    <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Organizações
  </h2>




  @foreach($organizacoes as $item)
  <div class="block block-rounded">
    <div class="block-content block-content-full">
      <div class="d-sm-flex">
        <div class="ms-sm-2 me-sm-4 py-2 text-center">
          <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 " style="margin-left: 15px;" href="javascript:void(0)">

            @if($item->logotipo == "")
            <!-- <i class="fab fa-fw fa-cloudsmith"></i> -->
            @else
            <img style="max-width: 90%; max-height: 90%;" src="{{$item->logotipo}}">
            @endif

          </a>
          <div class="btn-group btn-group-sm">
            {{-- quem tem permissão para editar organização verá esse botão --}}
            @can('pode_visualizar_organizacao')
            <a class="btn btn-alt-secondary" href="/visualizar_organizacao/{{$item->id}}">
              <i class="fa fa-fw fa-eye"></i>
            </a>
            @endcan
            @can('pode_editar_organizacao')
            <a class="btn btn-alt-secondary" href="/editar_organizacao/{{$item->id}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            @endcan

            {{-- quem tem permissão para eliminar organização verá esse botão --}}
            @can('pode_eliminar_organizacao')
            <a class="btn btn-alt-secondary eliminar_organizacao" href="/eliminar_organizacao/{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
            @endcan
          </div>
        </div>
        <div class="py-2">
          <p class="link-fx h4 mb-1 d-inline-block text-dark" >
            {{$item->nome}}
          </p>
          <!-- <div class="fs-sm fw-semibold text-muted mb-2">
              Criado aos: {{$item->created_at}}
            </div> -->
          <p class="text-muted mb-2">
            Razão Social: {{$item->razao_social}}
          </p>
          <p class="text-muted mb-2">
            CNPJ: {{$item->cnpj}}
          </p>
          <p class="text-muted mb-2">
            Telefone: {{$item->telefone1}}
          </p>
        </div>
      </div>
    </div>
  </div>
  @endforeach


</div>
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan
<!-- END Page Content -->



<script>
  // Obtém a referência para o elemento select
  var select = document.getElementById("select_ano")

  // Adiciona um ouvinte de evento para o evento "change"
  select.addEventListener("change", function() {
    // Obtém o valor selecionado atual
    var selectedValue = this.value;
    // alert(selectedValue);
    // Faça alguma coisa com o valor selecionado
    window.location.href = "/listar_organizacoes_por_ano/" + selectedValue;
  })
</script>

@endsection







<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/main.js"></script>


{{-- -------------------------------- A J A X --}}


<script>
  $(document).ready(function() {
    // alert();
    $("#spinner-div").hide();

    // search
    $(document).on('keyup', function(e) {

      e.preventDefault();
      let search_string = $('#search').val();

      $.ajax({
        method: 'get',
        url: "{{ route('pesquisar_organizacao') }}",
        data: {
          search_string: search_string,
        },
        success: function(res) {
          $('.content-boxed').html(res);
          if (res.status == 'nothing_found') {
            $('.content-boxed').html('<span class="text-danger">' + 'Nenhum Registro Encontrado!' + '</span');
            $("#spinner-div").hide();
          }
        }
      })


    })

  });
</script>