@extends('website.layouts.app')
@section('content')
    <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->evaluation_heading_en }}</h1>
                                            <p>{!! $page->evaluation_description_en !!}</p>
                                            <div class="b_n_app_buttons">
                                                <span class="faq">
                                                    <a href="{{ $page->evaluation_link_en }}">Contact Sales </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5 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 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/evaluation_service_page/' . $page->evaluation_image) }}"
                                                class="img-fluid" alt="{{ str_replace('-', ' ', pathinfo($page->evaluation_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section id="Evaluation_S_p_s3" class="Evaluation_S_p_s4_bg  s-p-tb " >
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="Evaluation_S_p_s3_s4_h text-center">
                    <h2>{{ $page->evaluation_sub_heading_en }}</h2>
                </div>

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

            </div>
        </div>
    </section>
    <section id="Evaluation_S_p_s2" class="s-p-tb ">
        <div class="container-fluid Evaluation_S_p_s3_s4_h">
            <h2 class="pb-4">{{ $page->comprehensive_heading_en }}</h2>
            <div class="col-lg-10 col-md-12 col-12 mx-auto pb-4 ">
                <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 gy-4">
                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                    @php
                                        $len = 180;
                                    @endphp
                                        <!--<img src="{{ asset('website/assets/images/Result Accuracy.png') }}" -->
                                        <!--    alt="Result Accuracy"  class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->result_heading_en }}</h2>
                                        <!--<p>{{ $page->result_description_en }}</p>-->
                                        <p>
                                            @if (strlen($page->result_description_en) > $len)
                                                {{ substr($page->result_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#result_description_en">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->result_description_en }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <!--<img src="{{ asset('website/assets/images/Customized Evaluations.png') }}" alt="Customized Evaluations" class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->customized_heading_en }}</h2>
                                        <!--<p>{{ $page->customized_description_en }}</p>-->
                                        <p>
                                            @if (strlen($page->customized_description_en) > $len)
                                                {{ substr($page->customized_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#customized_description_en">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->customized_description_en }}
                                            @endif
                                        </p>
                                        
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <!--<img src="{{ asset('website/assets/images/web.png') }}" alt="Global" class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->global_heading_en }}</h2>
                                        <!--<p>{{ $page->global_description_en }}</p>-->
                                        <p>
                                            @if (strlen($page->global_description_en) > $len)
                                                {{ substr($page->global_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#global_description_en">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->global_description_en }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row gy-4">
                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <!--<img src="{{ asset('website/assets/images/Result Accuracy.png') }}" -->
                                        <!--    alt="Result Accuracy"  class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->Evaluation_box_4_en }}</h2>
                                        <p>
                                            @if (strlen($page->Evaluation_box_4_description_en) > $len)
                                                {{ substr($page->Evaluation_box_4_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#Evaluation_box_4">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->Evaluation_box_4_description_en }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <!--<img src="{{ asset('website/assets/images/Customized Evaluations.png') }}" alt="Customized Evaluations" class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->Evaluation_box_5_en }}</h2>
                                        <!--<p>{{ $page->Evaluation_box_5_description_en }}</p>-->
                                        <p>
                                            @if (strlen($page->Evaluation_box_5_description_en) > $len)
                                                {{ substr($page->Evaluation_box_5_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#Evaluation_box_5">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->Evaluation_box_5_description_en }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <!--<img src="{{ asset('website/assets/images/web.png') }}" alt="Global" class="img-fluid" style="width: 70px; height: 70px; object-fit: contain;">-->
                                        <h2>{{ $page->Evaluation_box_6_en }}</h2>
                                        <!--<p>{{ $page->Evaluation_box_6_description_en }}</p>-->
                                        <p>
                                            @if (strlen($page->Evaluation_box_6_description_en) > $len)
                                                {{ substr($page->Evaluation_box_6_description_en, 0, $len) }}...
                                                <br>
                                                <a href="#" class="read-more-btn" data-bs-toggle="modal" data-bs-target="#Evaluation_box_6">
                                                    Read More
                                                </a>
                                            @else
                                                {{ $page->Evaluation_box_6_description_en }}
                                            @endif
                                        </p>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="result_description_en" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->result_heading_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->result_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="customized_description_en" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->customized_heading_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->customized_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="global_description_en" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->global_heading_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->global_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="Evaluation_box_4" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->Evaluation_box_4_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->Evaluation_box_4_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="Evaluation_box_5" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->Evaluation_box_5_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->Evaluation_box_5_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="Evaluation_box_6" tabindex="-1" aria-labelledby="descriptionModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="descriptionModalLabel">{{ $page->Evaluation_box_6_en }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ $page->Evaluation_box_6_description_en }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="Evaluation_S_p_s4" class="" >
        <!--<div class="container-fluid">-->
        <!--    <div class="col-lg-10 col-md-12 col-12 mx-auto">-->
        <!--        <div class="Evaluation_S_p_s3_s4_h  text-left ">-->
        <!--            <h2>{{ $page->comprehensive_heading_en }}</h2>-->
        <!--            <div class="row d-flex justify-content-center">-->
        <!--                <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-12 col-12 text-left">-->
        <!--                    <p>{!! $page->comprehensive_description_en !!}</p>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
        <div class="Evaluation_S_p_s4_bg s-p-tb pt-3 pb-3">
        <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-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-3 ">
                            <div class="col-xl-6 col-lg-6 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 ">
                                            <h2>{{ $page->comprehensive_sub_heading_en }}</h2>
                                            <!--<h6>{{ $page->comprehensive_sub_description_en }}</h6>-->
                                            <div class="p_main_div">
                                                @if (count($pageItems) > 0)
                                                    @foreach ($pageItems as $item)
                                                        <div class="pt-3 alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                alt="mark"  class="itm_margin_evalu"/>
                                                            <span class="para_text ps-3">{{ $item->item_en }}</span>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            <div class="tabs_buttons">
                                                {{-- <span class="talk_sales">
                                                    <a href="{{ $page->comprehensive_get_started_en }}"> Get Started </a>
                                                </span> --}}
                                                <span class="get_started">
                                                    <a href="{{ $page->comprehensive_talk_to_sales_en }}"> Talk to Sales
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-content-center">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-xxl-11 col-xl-12 col-lg-12 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/evaluation_service_page/' . $page->comprehensive_image) }}"
                                                class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->comprehensive_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>
    <div id="faqs"></div>
    @if (!empty($faqs))
        <section id="c_p_s4" 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>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="evaluation_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>{!! 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" 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('evaluation.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
                        $('#evaluation_container').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);
                            $('#load_more_button').html('No More Data Available').hide();
                    }
                }

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