@extends('layouts.app')

@section('title', 'Placement')
@section('styles')
@endsection
@section('content')

    <div class="col-md-11 m-auto  mobile-space">
        <div class="d-flex col-md-12 align-items-center justify-content-start flex-wrap p-0">
            <div class="col-md-1 ">

                <div class="search-container">
                    <form action="/search" method="get">
                        <input class="search" id="searchleft" type="search" name="q" placeholder="Search">
                        <label class="button1 searchbutton" for="searchleft"><span class="mglass">&#9906;</span></label>
                    </form>
                </div>

            </div>
            <div class="col-md-11 text-center col-sm-12 title-bar pt-5 pb-5">
                <p class="text-white text-30 " style="margin-right: 160px;">{{ $pageContent->faq_title }}</p>
            </div>
        </div>
    </div>

    <div class="col-md-12 m-auto pl-5">
        <div class="row">
            <div class="col-lg-11 mx-auto p-0">
                <div id="search-results" class="search-results"></div>

                <!-- Accordion -->
                <div id="accordionExample" class="accordion">
                    @foreach ($faqs as $index => $faq)
                        <div class="card">
                            <div id="heading{{ $index }}" class="card-header border-0">
                                <h2 class="mb-0">
                                    <button type="button" data-toggle="collapse" data-target="#collapse{{ $index }}"
                                        aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                        aria-controls="collapse{{ $index }}"
                                        class="btn btn-link {{ $index === 0 ? '' : 'collapsed' }} font-weight-bold collapsible-link text-white text-16">
                                        {{ $faq->question }}
                                    </button>
                                </h2>
                            </div>
                            <div id="collapse{{ $index }}" aria-labelledby="heading{{ $index }}"
                                data-parent="#accordionExample" class="collapse {{ $index === 0 ? 'show' : '' }}">
                                <div class="card-body">
                                    <p class="font-weight-light m-0 text-white">{!! $faq->answer !!}</p>
                                </div>
                            </div>
                        </div><!-- End -->
                    @endforeach
                </div><!-- End -->
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#searchleft').on('keyup', function() {
                let query = $(this).val();

                // Perform AJAX request if there's input in the search box
                if (query.length > 0) {
                    $.ajax({
                        url: '{{ url('/search') }}', // Your server endpoint for handling search
                        type: 'GET',
                        data: {
                            q: query
                        },
                        success: function(data) {
                            // Update the accordion with search results
                            displaySearchResults(data);
                        },
                        error: function() {
                            console.log('Search request failed');
                        }
                    });
                } else {
                    // Reset to original accordion if search box is empty
                    resetAccordion();
                }
            });
        });

        function displaySearchResults(data) {
            let accordionContainer = $('#accordionExample'); // Target the accordion container
            accordionContainer.empty(); // Clear previous accordion items

            // Generate accordion items based on search results
            if (data.length) {
                data.forEach(function(result, index) {
                    accordionContainer.append(`
                        <div class="card">
                            <div id="heading${index}" class="card-header border-0">
                                <h2 class="mb-0">
                                    <button type="button" data-toggle="collapse" data-target="#collapse${index}"
                                        aria-expanded="${index === 0 ? 'true' : 'false'}"
                                        aria-controls="collapse${index}"
                                        class="btn btn-link ${index === 0 ? '' : 'collapsed'} font-weight-bold collapsible-link text-white text-16">
                                        ${result.question}
                                    </button>
                                </h2>
                            </div>
                            <div id="collapse${index}" aria-labelledby="heading${index}" data-parent="#accordionExample"
                                class="collapse ${index === 0 ? 'show' : ''}">
                                <div class="card-body">
                                    <p class="font-weight-light m-0 text-white">${result.answer}</p>
                                </div>
                            </div>
                        </div>
                    `);
                });
            } else {
                accordionContainer.append('<p class="text-white">No results found</p>');
            }
        }

        function resetAccordion() {
            // Optionally, you could reload the original FAQs or reset the accordion container.
            $('#accordionExample').html(`@foreach ($faqs as $index => $faq)
                <div class="card">
                    <div id="heading{{ $index }}" class="card-header border-0">
                        <h2 class="mb-0">
                            <button type="button" data-toggle="collapse" data-target="#collapse{{ $index }}"
                                aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-controls="collapse{{ $index }}"
                                class="btn btn-link {{ $index === 0 ? '' : 'collapsed' }} font-weight-bold collapsible-link text-white text-16">
                                {{ $faq->question }}
                            </button>
                        </h2>
                    </div>
                    <div id="collapse{{ $index }}" aria-labelledby="heading{{ $index }}" data-parent="#accordionExample"
                        class="collapse {{ $index === 0 ? 'show' : '' }}">
                        <div class="card-body">
                            <p class="font-weight-light m-0 text-white">{!! $faq->answer !!}</p>
                        </div>
                    </div>
                </div>
            @endforeach`);
        }
    </script>
@endsection