@extends('website.layouts.app')
@section('content')
    <section id="faq_p_banner" class="faq_p_banner_bg">
        <div class="container-fluid banner_height align-content-center">
            <div class="col-lg-10 col-md-10 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row d-flex justify-content-center">
                            <div class="col-xl-7 col-lg-7 col-md-6 col-12 align-content-center">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12">
                                        <div class="tabs-content text-md-start text-center">
                                            <h1>{{ $page->faq_heading_en }}</h1>
                                            @if ($page->faq_description_en)
                                                <p>{{ $page->faq_description_en }}</p>
                                            @endif
                                            <div class="b_n_app_buttons">
                                                <span class="faq">
                                                    <a href="{{ $page->need_help_link }}"> Need Help? </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-5 col-lg-5 col-md-6 col-12 align-content-end ">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/faqs_image/' . $page->faq_image) }}"
                                                class="img-fluid" alt="{{ str_replace('-', ' ', pathinfo($page->faq_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="faq_s2" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row d-flex justify-content-center">
                    <div class="col-lg-6 col-md-9 ">
                        <form method="GET" action="">
                            <div class="faq_search">
                                <input type="text" name="title" class="form-control" placeholder="Search FAQ here">
                                {{-- <input type="submit" value=""> --}}
                                <div class="search_icon">
                                    <button type="submit"><i class="fa-solid fa-magnifying-glass "></i></button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="faq_s3" class="s-p-tb">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="c_p_s4_content text-center">
                    <h2>{{ $page->frequently_heading_en }}</h2>
                </div>
                @if (count($faqs))
                    {{-- <div class="row d-flex justify-content-center">
                        <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                            <div class="row gx-4 pt-md-5 pt-3 gy-4" id="items_container">
                                @foreach ($faqs as $faq)
                                    <div class="col-xl-6">
                                        <div class="row pt-md-2 bottom_line text-md-start text-center">
                                            <div class="col-md-2 col-12">
                                                <div class="pdf_img">
                                                    <img src="{{ asset('website/assets/images/message-question.svg') }}" />
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-12">
                                                <div class="frequently_content">
                                                    <h2>{!! Str::words($faq->title_en, 9, '') !!}</h2>
                                                    @php
                                                        $preview = \Illuminate\Support\Str::words(
                                                            $faq->description_en,
                                                            10,
                                                            '...',
                                                        );
                                                        $remainingContent = implode(
                                                            ' ',
                                                            array_slice(explode(' ', $faq->description_en), 10),
                                                        );
                                                    @endphp

                                                    <h5>{{ $preview }}</h5>

                                                    <!-- Unique ID for the collapse content -->
                                                    @if (strlen($remainingContent) > 0)
                                                        <div class="collapse" id="{{ $faq->id }}">
                                                            <div class="">
                                                                <h5>{{ $remainingContent }}</h5>
                                                                <!-- Show the remaining content here -->
                                                            </div>
                                                        </div>

                                                        <!-- Unique "Read more" button linked to the above collapse -->
                                                        <div class="e_article_btn mt-3">
                                                            <a class="read-more" data-bs-toggle="collapse"
                                                                href="#{{ $faq->id }}" role="button"
                                                                aria-expanded="false" aria-controls="{{ $faq->id }}">
                                                                Read more
                                                                <i class="fa-solid fa-angle-right ps-2"></i>
                                                            </a>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div> --}}
                    <div class="row d-flex justify-content-center">
                        <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                            <div class="row gx-4 pt-md-5 pt-3 gy-4" id="items_container">

                                @foreach ($faqs as $index => $faq)
                                    <div class="col-xl-6">
                                        <div class="row pt-md-2 bottom_line text-md-start text-center">
                                            <div class="col-md-2 col-12">
                                                <div class="pdf_img">
                                                    <img src="{{ asset('website/assets/images/faq.png') }}"  alt="Faq" class="img-fluid" style=" width:82px; height: 82px; object-fit: contain;" />
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-12">
                                                <div class="frequently_content">
                                                    <h2>{!! $faq->title_en !!}</h2>
                                                    {{-- <h2>{!! Str::words($faq->title_en, 9, '') !!}</h2> --}}
                                                    @php
                                                        $words = explode(' ', $faq['description_en']);
                                                        $previewWords = implode(' ', array_slice($words, 0, 10)); // First 10 words
                                                        $remainingWords = implode(' ', array_slice($words, 10)); // Remaining words
                                                    @endphp
                                                    <h5>
                                                        <!-- Display a preview of the first 10 words -->
                                                        <span
                                                            id="previewText{{ $index + 100 }}">{{ $previewWords }}</span><span
                                                            id="dots{{ $index + 100 }}">...</span>
                                                        <!-- The remaining text, hidden initially -->
                                                        <span id="moreText{{ $index + 100 }}"
                                                            style="display: none;">{{ $remainingWords }}</span>
                                                    </h5>
                                                    <button onclick="toggleReadMore({{ $index + 100 }})"
                                                        class="read-more px-0" id="readMoreBtn{{ $index + 100 }}">Read
                                                        more<i class="fa-solid fa-angle-right ps-2"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="e_article_b_page_btn text-center">
                        <button id="load_more_button" data-page="{{ $faqs->currentPage() + 1 }}" class="e_art_b_page ">
                            Load More
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </section>
    <section id="cu_p_s4" class="cu_p_4_bg">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row  d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row gy-4">
                            <div class="col-lg-6 col-md-6 align-content-center">
                                <div class="r_s_4_content text-md-start text-center">
                                    <h2>{{ $preferences->help_heading_en }}</h2>
                                    <p>{{ $preferences->help_description_en }}</p>
                                    <div class="tabs_buttons">
                                        <span class="get_started ">
                                            <a href="{{ $preferences->help_concierge_link }}">
                                                Concierge Service
                                            </a>
                                        </span>
                                        <span class=" talk_sales ">
                                            <a href="{{ $preferences->help_faq_link }}">
                                                FAQs
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="row">
                                    <div class="col-xl-11">
                                        <div class="r_s_4_img">
                                            <img src="{{ asset('uploads/preferences_page/' . $preferences->help_image) }}"
                                                class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($preferences->help_image, PATHINFO_FILENAME)) }}">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script>
    function toggleReadMore(index) {
        var dots = document.getElementById("dots" + index);
        var moreText = document.getElementById("moreText" + index);
        var btnText = document.getElementById("readMoreBtn" + index);

        if (dots.style.display === "none") {
            dots.style.display = "inline";
            btnText.innerHTML = 'Read more <i class="fa-solid fa-angle-right ps-2"></i>';;
            moreText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = 'Read less <i class="fa-solid fa-angle-right ps-2"></i>';;
            moreText.style.display = "inline";
        }
    }
    $(document).ready(function() {
        var start = 8;

        $('#load_more_button').click(function() {
            $.ajax({
                url: "{{ route('load.more.faqs') }}",
                method: "GET",
                data: {
                    start: start
                },
                dataType: "json",
                beforeSend: function() {
                    $('#load_more_button').html('Loading...');
                    $('#load_more_button').attr('disabled', true);
                },
                success: function(data) {
                    if (data.data.length > 0) {
                        var html = '';
                        data.data.forEach(function(faq, index) {
                            // Extract the title and description from the response
                            var title_en = faq.title_en;
                            var faqId = faq.id;
                            var description_en = faq.description_en;

                            var words = description_en.split(' ');
                            var preview = words.slice(0, 10).join(
                                ' '); // First 20 words
                            var remainingContent = words.slice(10).join(
                                ' '); // Remaining words

                            html += `
                            <div class="col-xl-6">
                                <div class="row pt-md-2 bottom_line text-md-start text-center">
                                    <div class="col-md-2 col-12">
                                        <div class="pdf_img">
                                             <img src="{{ asset('website/assets/images/faq.png') }}"  alt="Faq" class="img-fluid" style=" width:82px; height: 82px; object-fit: contain;" />
                                        </div>
                                    </div>
                                    <div class="col-md-10 col-12">
                                        <div class="frequently_content">
                                            <h2>${title_en}</h2>
                                            <h5>
                                                <!-- Display a preview of the first 100 characters -->
                                                <span id="previewText${faqId}">${preview}</span>
                                                <span id="dots${faqId}">...</span>
                                                <!-- The remaining text, hidden initially -->
                                                <span id="moreText${faqId}" style="display: none;">${remainingContent}</span>
                                            </h5>`;

                                            // If there's remaining content, add the "Read more" button
                                            if (remainingContent.length > 0) {
                                                html += `
                                                <div class="e_article_btn">
                                                    <button onclick="toggleReadMore(${faqId})" class="read-more  px-0" id="readMoreBtn${faqId}">
                                                        Read more <i class="fa-solid fa-angle-right ps-2"></i>
                                                    </button>
                                                </div>
                                                `;
                                            }

                                            html += `
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                            `;
                        });

                        // Append data with fade in effect
                        $('#items_container').append($(html).hide().fadeIn(1000));
                        $('#load_more_button').html('Load More');
                        $('#load_more_button').attr('disabled', false);
                        start = data.next;
                    } else {
                        $('#load_more_button').html('No More Data Available').hide();
                        $('#load_more_button').attr('disabled', true);
                    }
                }
            });
        });
    });
</script>