@extends('layouts.app')

@section('conteudo')


<!-- Hero -->
<div class="bg-image" style="background-image: url('');">
    <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> Chamadas
          </h1>
          <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>
        </div>
      </div>
    </div>
  </div>
  <!-- END Hero -->


{{-- <select id="select1">
    @foreach($options1 as $option)
        <option value="{{ $option->id }}">{{ $option->nome }}</option>
    @endforeach
</select>

<select id="select2">
    @foreach($options2 as $option)
        <option value="{{ $option->id }}">{{ $option->descricao }}</option>
    @endforeach
</select> --}}

<script>
    document.querySelector('#select1').addEventListener('change', function() {
        let value = this.value;

        // use o método fetch para enviar a requisição
        fetch('{{ route('selects.filter') }}', {
            method: 'POST',
            body: JSON.stringify({ _token: '{{ csrf_token() }}', value: value }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            let select2 = document.querySelector('#select2');
            select2.innerHTML = '';

            // use o método forEach para percorrer as opções filtradas e adicioná-las ao select2
            data.forEach(function(item) {
                let option = document.createElement('option');
                option.value =item.id;
                option.text = item.descricao;
                select2.appendChild(option);
                });
            });
        });
    </script>



@endsection