@extends('layouts.app')

@section('conteudo')




<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;" >
  <div class="bg-black-50" style="margin-top: 30px;">
    <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> Chamadas
        </h1>
        @can('pode_registrar_chamada')
        <a class="btn btn-primary my-2" href="/registar_chamada">
          <!-- <a class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#addProjetModal"> -->
          <i class="fa fa-fw fa-plus"></i>
          <span class="d-none d-sm-inline ms-1">Registrar Chamada</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

<form action="/visualizar_chamadas_por_intervalo_datas" method="POST">
    @csrf
    {{-- <div class="col-12 col-sm-6 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="funcionario_id">Data de Início</label>
        <input class="form-control col-6" type="date" name="data_inicio" id="data_inicio">
    </div>
    <div class="col-12 col-sm-6 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="funcionario_id">Data Final</label>
        <input class="form-control col-6" type="date" name="data_final" id="data_final">
    </div> --}}
    <div class="col-12 col-sm-6 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="select_data">Filtrar por Data</label>
        <input class="form-control col-6" type="date" name="select_data" id="select_data">
    </div>
    <div class="col-12 col-sm-3 col-lg-3" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="example-select">Organização</label>
        <select class="form-select" id="select1" name="organizacao_id">
            @foreach($options1 as $item)
            <option selected value="{{$item->id}}">{{$item->nome}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="example-select">Projeto</label>
        <select class="form-select" id="select2" name="projeto_id">
            <option value="" selected></option>
            @foreach($options2 as $item)
                <option value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="example-select">Prestadores</label>
        <select class="form-select" id="select4" name="funcionario_id">
            <option value="" selected></option>
            @foreach($funcionarios as $item)
                <option value="{{$item->id}}">{{$item->nome_completo}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
        <label class="form-label" for="example-select">Turmas</label>
        <select class="form-select" id="select3" name="turma_id">
            <option value="" selected></option>
            @foreach($turmas as $item)
                @if($item->situacao == 1)
                    <option value="{{$item->id}}">{{$item->descricao}} | {{$item->ano}}</option>
                @endif
            @endforeach
        </select>
    </div>
    <div class="col-12 col-sm-6 col-lg-4" style="display: inline-block; margin-top:3%;">
        <br>
        <button class="btn btn-primary" type="submit">Filtrar</button>
    </div>
</form>


<div class="content content-boxed">
  <!-- Current Jobs -->
  <h2 class="content-heading">
    <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Chamadas
  </h2>


  <br><br>

  @if($permission_funcionario)
  @foreach($chamadas as $item)
  <div class="block block-rounded">
    <div class="block-content block-content-full">
      <div class="d-sm-flex row">
        <div class="col-3 col-sm-3 col-lg-1">
          <div class="btn-group btn-group-sm">
            @can('pode_visualizar_chamada')
            <a class="btn btn-alt-secondary" href="/visualizar_chamada/{{$item->id}}">
              <i class="fa fa-fw fa-eye"></i>
            </a>
            @endcan
            @can('pode_editar_chamada')
            <a class="btn btn-alt-secondary" href="/editar_chamada/{{$item->id}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            @endcan

            @can('pode_eliminar_chamada')
            <a class="btn btn-alt-secondary" data-toggle="modal" data-target="#modalEliminar{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
            @endcan

          </div>
        </div>
        <div class="col-9 col-sm-9 col-lg-11">
          <p class="h4 d-inline-block text-dark">{{$item->nome_turma}} | {{$item->ano}}</p>
          <p>{{$item->nome_completo}}</p>
          <p>{{date ('d-m-Y h:i:s', strtotime($item->data))}}</p>
        </div>
      </div>
    </div>
  </div>



  <!-- Modal -->
  <div class="modal fade" id="modalEliminar{{$item->id}}" 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">Confirmar Operação</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 a certeza que pretende eliminar essa chamada?
        </div>
        <div class="modal-footer">
          <a href="/eliminar_chamada/{{$item->id}}"><button type="button" class="btn btn-danger">Eliminar</button> </a>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </div>
  </div>


  @endforeach


  @else

  @foreach($chamadas 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">
          <div class="btn-group btn-group-sm">
          @can('pode_visualizar_chamada')
            <a class="btn btn-alt-secondary" href="/visualizar_chamada/{{$item->id}}">
              <i class="fa fa-fw fa-eye"></i>
            </a>
            @endcan
            @can('pode_editar_chamada')
            <a class="btn btn-alt-secondary" href="/editar_chamada/{{$item->id}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            @endcan
            @can('pode_eliminar_chamada')
            <a class="btn btn-alt-secondary" data-toggle="modal" data-target="#modalEliminar{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
            @endcan

          </div>
        </div>
        <div class="py-2">
          <p class="h4 mb-1 d-inline-block text-dark">{{$item->nome_turma}} | {{$item->ano}}</p>
          <p>{{$item->nome_completo}}</p>
          <p>{{date ('d-m-Y', strtotime($item->data))}} {{date ('H:i:s', strtotime($item->created_at))}} </p>
        </div>
      </div>
    </div>
  </div>



  <!-- Modal -->
  <div class="modal fade" id="modalEliminar{{$item->id}}" 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">Confirmar Operação</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 a certeza que pretende eliminar essa chamada?
        </div>
        <div class="modal-footer">
          <a href="/eliminar_chamada/{{$item->id}}"><button type="button" class="btn btn-danger">Eliminar</button> </a>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </div>
  </div>



  @endforeach


  @endif

<!-- Pagination -->
<nav aria-label="Photos Search Navigation">
    <ul class="pagination justify-content-end mt-2">
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)" tabindex="-1" aria-label="Previous">
          Prev
        </a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:void(0)">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)" aria-label="Next">
          Next
        </a>
      </li>
    </ul>
  </nav>
  <!-- END Pagination -->
</div>




@include('incl.linha_filtros_selects')


<script>
    function filtrarChamadas() {
        // Obter o valor da data selecionada
        var dataSelecionada = document.getElementById('select_data').value;

        // Obter outros valores selecionados, por exemplo, organização, projeto, turma, prestador

        // Enviar uma solicitação AJAX ao servidor para obter chamadas filtradas
        $.ajax({
            url: '/rota-do-seu-controlador-filtrar-chamadas',
            type: 'GET',
            data: {
                data: dataSelecionada,
                // Outros parâmetros selecionados
            },
            success: function(response) {
                // Atualizar a exibição das chamadas com base na resposta do servidor
                // Por exemplo, atualizar a tabela HTML com as chamadas filtradas
            },
            error: function(error) {
                console.log(error);
            }
        });
    }
</script>



@endsection