@extends('website.layouts.app')
@section('content')
<style>
    .read-more {
    color: #000;
    font-weight: 900;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    font-size: 14px;
    background: transparent;
    border: 0px;
    margin-top: 10px;
}
#tabs .p_main_div .alignsline {
    display: flex;
    align-items: flex-start;
}
@media (min-width: 1029px) and (max-width: 1400px) {
          .itm_margin{
            margin-top: 1px;
          }
    }
     @media (min-width: 1441px) {
         #tabs .para_text {
        padding-left: 9px !important;
    }

    }
</style>
    <section id="lead_gen_p_banner" class="lead_gen_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-5 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->verification_heading_en }}</h1>
                                            <p>{{ $page->verification_description_en }}</p>
                                            <div class="b_n_app_buttons">
                                                <span class="faq">
                                                    <a href="{{ $page->verification_link }}">Contact Sales</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5 col-lg-7 col-md-6 col-12 ">
                                <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/verification_page/' . $page->verification_image) }}"
                                                class="img-fluid forios_img" alt="{{ str_replace('-', ' ', pathinfo($page->verification_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="Verification_B_S_s2" style="background-color: #FFF;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row pb-2 d-flex justify-content-center">
                    <div class="col-lg-7 col-md-8">
                        <div class="Verification_B_S_s2_content text-center">
                            <h2>{{ $page->background_sub_heading_en }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="application_dashboard" style="background-color: #FFF;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <section id="tabs" class="pt-0">
                    <div class="row  d-flex justify-content-center">
                        <div class="col-xl-11 col-lg-11 col-md-12 col-12">
                            <div class="tab-content mt-md-3" id="pills-tabContent">
                                <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-2 pt-2">
                                    <div class="col-xl-5 col-lg-12 col-md-12" data-tag="Category_1">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-xxl-11 col-xl-11 col-lg-12 ">
                                                <div class=" tabs-content text-xl-start text-center">
                                                    <h2>{{ $page->background_heading_en }}</h2>
                                                    <h6>{{ $page->background_description_en }}</h6>
                                                    <div class="p_main_div">
                                                        <div class="alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark" class="itm_margin">
                                                            <span
                                                                class="para_text ps-2">{{ $page->background_point_one_en }}</span>
                                                        </div>
                                                        <div class="pt-2 alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark" class="itm_margin">
                                                            <span
                                                                class="para_text ps-2">{{ $page->background_point_two_en }}</span>
                                                        </div>
                                                        <div class="alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark" class="itm_margin">
                                                            <span
                                                                class="para_text ps-2">{{ $page->background_point_three_en }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="tabs_buttons">
                                                        {{-- <span class="get_started ">
                                                            <a href="{{ $page->qualification_get_started_link }}">
                                                                Get Started
                                                            </a>
                                                        </span> --}}
                                                        <span class=" talk_sales ">
                                                            <a href="{{ $page->background_get_started_link }}">
                                                                Talk to Sales
                                                            </a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-xl-7 col-lg-12 col-md-12 align-content-center" data-tag="Category_1">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-xxl-11 col-xl-11 col-lg-12 ">
                                                <div class="tabs_img">
                                                    <img src="{{ asset('uploads/verification_page/' . $page->background_image) }}"
                                                        class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->background_image, PATHINFO_FILENAME)) }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>

    <section id="Verification_B_S_s2" style="background-color: #FFF;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="row pb-2 d-flex justify-content-center">
                    <div class="col-lg-7 col-md-8">
                        <div class="Verification_B_S_s2_content text-center">
                            <h2>{{ $page->verification_sub_heading_en }}</h2>
                        </div>
                    </div>
                </div>

                {{-- <div class="row  d-flex justify-content-center pt-lg-4 pt-2">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="Verification_B_S_s2_content ">
                            <p>{{ $page->verification_sub_description_en }}</p>
                        </div>
                    </div>
                </div> --}}


            </div>
        </div>
    </section>
    <section id="application_dashboard" style="background-color: #FFF;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <section id="tabs" class="pt-0">
                    <div class="row  d-flex justify-content-center">
                        <div class="col-xl-11 col-lg-11 col-md-12 col-12">
                            <div class="tab-content mt-md-3" id="pills-tabContent">
                                <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-2 pt-2">
                                    <div class="col-xl-5 col-lg-12 col-md-12" data-tag="Category_1">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-xxl-11 col-xl-11 col-lg-12 ">
                                                <div class=" tabs-content text-xl-start text-center">
                                                    <h2>{{ $page->qualification_heading_en }}</h2>
                                                    <h6>{{ $page->qualification_description_en }}</h6>
                                                    <div class="p_main_div">
                                                        <div class="alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark" class="itm_margin">
                                                            <span
                                                                class="para_text ps-2">{{ $page->qualification_point_one_en }}</span>
                                                        </div>

                                                        <div class="pt-2 alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark" class="itm_margin">
                                                            <span
                                                                class="para_text ps-2">{{ $page->qualification_point_two_en }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="tabs_buttons">
                                                        <span class="talk_sales">
                                                            <a href="{{ $page->qualification_talk_sales_link }}">
                                                                Talk to Sales
                                                            </a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-xl-7 col-lg-12 col-md-12 align-content-center" data-tag="Category_1">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-xxl-11 col-xl-11 col-lg-12 ">
                                                <div class="tabs_img">
                                                    <img src="{{ asset('uploads/verification_page/' . $page->qualification_image) }}"
                                                        class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->qualification_image, PATHINFO_FILENAME)) }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section id="Verification_B_S_s3" class="s-p-tb" style="background-color: #FFF;">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="Verification_B_S_s3_content text-center">
                    <h2>{{ $page->background_screening_en }}</h2>
                </div>
                <div class="row  d-flex justify-content-center pt-lg-5 pt-4">
                    <div class="col-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row gy-4 d-flex flex-wrap ">
                            @if (count($verifications))
                                @foreach ($verifications as $verification)
                                    <div class="col-xl-6 col-lg-6 d-flex">
                                        <div class="card shadow d-flex flex-column">
                                            <div class="card_content flex-grow-1">
                                                <div class="d-flex align-items-lg-center">
                                                    <img src="{{ asset('uploads/screening_verification/' . $verification->image) }}"
                                                    alt="{{ str_replace('-', ' ', pathinfo(substr($verification->image,11), PATHINFO_FILENAME)) }}">
                                                    <h2>{{ $verification->title_en }}</h2>
                                                </div>
                                                <p>{!! $verification->sub_description_en !!}</p>
                                                {{-- <div class="e_article_btn">
                                                    <a href="{{ route('verification.details', $verification->slug) }}">Read
                                                        more
                                                        <i class="fa-solid fa-angle-right ps-1"></i>
                                                    </a>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="faqs"></div>
    @if (!empty($faqs))
        <section id="c_p_s4" class="s-p-tb"  style="background-color: #FFF;">
            <div class="container-fluid pb-xl-4 pb-lg-5 pb-4">
                <div class="col-lg-10 col-md-12 col-12 mx-auto">
                    <div class="c_p_s4_content text-center">
                        <h2>frequently asked questions</h2>
                    </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="verification_faqs">

                                @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>{!! 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 }}">{{ $previewWords }}</span><span
                                                            id="dots{{ $index }}">...</span>
                                                        <!-- The remaining text, hidden initially -->
                                                        <span id="moreText{{ $index }}"
                                                            style="display: none;">{{ $remainingWords }}</span>
                                                    </h5>
                                                    <button onclick="toggleReadMore({{ $index }})"
                                                        class="read-more px-0" id="readMoreBtn{{ $index }}">Read more<i
                                                            class="fa-solid fa-angle-right ps-2"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <span id="faq_s3">
                        <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>
                    </span>

                </div>
            </div>
        </section>
    @endif
    <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 = 4;

        $('#load_more_button').click(function() {
            $.ajax({
                url: "{{ route('verification.faqs.loadmore') }}",
                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" id="readMoreBtn${faqId}">
                                        Read more <i class="fa-solid fa-angle-right ps-2"></i>
                                    </button>
                                </div>
                                `;
                            }

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

                        // Append the generated HTML to the container with a fade-in effect
                        $('#verification_faqs').append($(html).hide().fadeIn(1000));
                        $('#load_more_button').text('Load More').prop('disabled', false);
                        start = data.next; // Update the start index for pagination
                    } else {
                        $('#load_more_button').text('No More FAQs Available').prop(
                            'disabled', true);
                    }
                }

            });
        });
    });
</script>