@extends('painel-admin.menu')
@section('title', 'FAQ - APRESI')
@section('content')
  <div class="row">
    <div class="col-md-10 col-12">
      <h1>FAQ</h1>
    </div>
    <div class="col-md-2 col-12 text-right">
      <a href="{{route('FAQs.create')}}"><button type="submit" class="btn btn-primary"><i class="fas fa-plus mr-1"></i>Nova Pergunta</button></a>
    </div>
  </div>
  <br>
  <form method="GET" action="{{ route('FAQs.index') }}">
    <div class="row">
      <div class="col-md-11 col-12">
        <input type="text" id="search" name="search" class="form-control" placeholder="Pesquisar" value="{{ request('search') }}">
      </div>
      <div class="col-md-1 mb-3">
        <button type="submit" class="btn btn-success"><i class="fas fa-search" ></i></button>
      </div>
    </div>
  </form>
  <div class="row">
    <div class="col-12" id="FAQresultado">
      @foreach($faqs as $faq)
        <div class="card">
          <div class="card-header" id="heading{{ $faq->id }}">
            <h5 class="mb-0 d-flex justify-content-between align-items-center">
              <button class="btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ $faq->id }}" aria-expanded="true" aria-controls="collapse{{ $faq->id }}">
                <i class="fas fa-plus mr-1"></i>{{ $faq->pergunta }}
              </button>
              <div class="d-flex">
                <a href="{{ route('FAQs.edit', $faq->id) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                <form id="deleteForm" method="post" style="display:inline;">
                  @csrf
                  @method('DELETE')
                  <button type="button" class="btn btn-danger btn-sm delete-button" title="Excluir"  data-id="{{ $faq->id }}"  data-toggle="modal" data-target="#confirmDeleteModal">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </div>
            </h5>
          </div>

          <div id="collapse{{ $faq->id }}" class="collapse" aria-labelledby="heading{{ $faq->id }}" data-parent="#FAQresultado">
            <div class="card-body">
                {!! $faq->resposta !!}
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>

  <div class="row">
    <div class="col-12">
        {{ $faqs->appends(request()->query())->links('pagination::bootstrap-4') }}
    </div>
  </div>

  <!-- Modal de confirmação do delete -->
  <div class="modal fade" id="confirmDeleteModal" 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">Exclusão do FAQ</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 certeza de que deseja excluir esse FAQ?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Excluir</button>
        </div>
      </div>
    </div>
  </div>


  <style>

  </style>
    
  <script type="text/javascript">

    $(document).ready(function() {
        $('#FAQresultado').on('show.bs.collapse', function() {

            $('#FAQresultado .collapse').collapse('hide');
        });
    })

    var currentItemId = 'faq-link';

    $(document).ready(function () {
    let idDelete = null;

    // Captura o ID do FAQ quando o botão de exclusão é clicado
    $(document).on('click', '.delete-button', function() {
        idDelete = $(this).data('id'); // Pega o ID do FAQ a ser deletado
        $('#confirmDeleteModal').modal('show'); // Exibe o modal de confirmação
    });

    // Quando o botão "Excluir" no modal é clicado
    $('#confirmDeleteBtn').click(function() {
        if (idDelete) {
            // Atualiza o action do formulário de exclusão com o ID correto
            $('#deleteForm').attr('action', '/FAQs/' + idDelete);
            $('#deleteForm').submit(); // Envia o formulário de exclusão
            $('#confirmDeleteModal').modal('hide'); // Fecha o modal
        }
    });
});

  </script>
@endsection