@extends('website.layouts.app')
@section('content')
    <section id="banner_track_my_ap" class="track_my_a_banner_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-xl-11 col-lg-12 col-md-12 col-12">
                        <div class="row  d-flex justify-content-center gy-md-5 gy-2 pt-xl-4 pt-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 text-center">
                                            <h2>{{ $page->track_heading_en }}</h2>
                                            <p>{{ $page->track_description_en }}</p>
                                            <div class="b_n_app_buttons">
                                                <span class="faq">
                                                    <a href="{{ $page->track_link }}">Enter Your Application ID to Get
                                                        Started</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-12 col-xl-12 col-lg-12 align-content-center">
                                        <div class="s_banner_img">
                                            <img src="{{ asset('uploads/track_page/' . $page->track_image) }}"
                                                class="img-fluid w-100" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="track_my_ap_s2">
        <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-xl-7 col-lg-10">
                        <div class="row gy-4">
                            <div class="col-lg-8">
                                <div class="track_id_input">
                                    <input type="text" class="form-control" placeholder="Enter Your Application ID">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="track_id_btn">
                                    <button class="btn_track"> Track My Application </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="track_my_ap_s3">
        <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-4">
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <img src="{{ asset('website/assets/images/Layer_1.png') }}" alt="">
                                        <h6>{{ $page->stay_en }}</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <img src="{{ asset('website/assets/images/Layer_2.png') }}" alt="">
                                        <h6>{{ $page->understand_en }}</h6>
                                    </div>

                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <img src="{{ asset('website/assets/images/Layer_3.png') }}" alt="">
                                        <h6>{{ $page->need_en }}</h6>
                                    </div>

                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 col-md-6 ">
                                <div class="card shadow">
                                    <div class="card_content text-center">
                                        <img src="{{ asset('website/assets/images/Layer_4.png') }}" alt="">
                                        <h6>{{ $page->customize_en }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="track_my_ap_s4">
        <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="ratio ratio-16x9">
                            <iframe src="{{ $page->track_video }}" title="YouTube video" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="track_my_ap_s5" class="track_my_ap_s5_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-xl-11 col-lg-12 col-md-12 col-12 track_my_ap_s5_bg_l">
                        <div class="row px-lg-5 px-md-3 px-2 gy-4">
                            <div class="col-xl-6 col-lg-6  align-content-center text-lg-start text-center">
                                <div class="sms_service_content">
                                    <h2>{{ $preferences->signup_heading_en }}</h2>
                                    <p>{{ $preferences->signup_description_en }}</p>
                                    <div class="b_n_app_buttons">
                                        <span class="faq">
                                            <a href="{{ $preferences->signup_link }}">Sign Up</a>
                                        </span>
                                    </div>

                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 text-lg-end text-center">
                                <div class="sms_service_img">
                                    <img src="{{ asset('uploads/preferences_page/' . $preferences->signup_image) }}"
                                        class="img-fluid" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
      @media (min-width: 992px) and (max-width: 1028px) {
                #track_my_ap_s5 .sms_service_img {
    margin-top: -95px;
}
#track_my_ap_s5 .sms_service_img img {
    height: 430px;
}
.track_my_ap_s5_bg_l {
        padding: 0px;
    }

    }
    @media (min-width: 1029px) and (max-width: 1400px) {
        #track_my_ap_s5 .sms_service_img {
    margin-top: -95px;
}
#track_my_ap_s5 .sms_service_img img {
    height: 430px;
}
.track_my_ap_s5_bg_l {
        padding: 0px;
    }


    }

    @media (min-width: 1401px) and (max-width: 1440px) {
               #track_my_ap_s5 .sms_service_img {
    margin-top: -95px;
}
#track_my_ap_s5 .sms_service_img img {
    height: 440px;
}
.track_my_ap_s5_bg_l {
        padding: 0px;
    }

    }
    @media (min-width: 1441px) {
          #track_my_ap_s5 .sms_service_img {
    margin-top: -95px;
}
#track_my_ap_s5 .sms_service_img img {
    height: 450px;
}
.track_my_ap_s5_bg_l {
        padding: 0px;
    }


    }
    </style>
    <div id="faqs"></div>
    @if (!empty($faqs))
    <section id="c_p_s4">
        <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="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="" 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="track_my_ap_s7" class="track_my_ap_s7_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="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- <section id="track_my_ap_s8">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="testimonial_content text-center">
                    <h2>Testimonials</h2>
                    <p>words of praise by our valuable customers</p>
                </div>

                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="owl-carousel owl-theme pt-md-4">
                            @if (count($testimonials))
                                @foreach ($testimonials as $index => $testimonial)
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="card" style="min-height: 400px;">
                                                    <div class="star_icons text-end">
                                                        @php
                                                            $ratings = (int) $testimonial->ratings;
                                                        @endphp
                                                        @if (!empty($ratings))
                                                            @for ($i = 0; $i < $ratings; $i++)
                                                                <svg width="27" height="27" viewBox="0 0 27 27"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <mask id="mask0_83_487" style="mask-type: alpha"
                                                                        maskUnits="userSpaceOnUse" x="3" y="4"
                                                                        width="21" height="19">
                                                                        <path
                                                                            d="M13.4996 19.7095L18.1684 22.5332C19.0234 23.0507 20.0696 22.2857 19.8446 21.3182L18.6071 16.0082L22.7359 12.4307C23.4896 11.7782 23.0846 10.5407 22.0946 10.462L16.6609 10.0007L14.5346 4.98324C14.1521 4.07199 12.8471 4.07199 12.4646 4.98324L10.3384 9.98949L4.90462 10.4507C3.91462 10.5295 3.50962 11.767 4.26337 12.4195L8.39212 15.997L7.15462 21.307C6.92962 22.2745 7.97587 23.0395 8.83087 22.522L13.4996 19.7095Z"
                                                                            fill="black" />
                                                                    </mask>
                                                                    <g mask="url(#mask0_83_487)">
                                                                        <rect width="27" height="27"
                                                                            fill="#054776" />
                                                                    </g>
                                                                </svg>
                                                            @endfor
                                                        @endif
                                                    </div>
                                                    <div class="testimonial_c_content">
                                                        <h5>{{ $testimonial->description_en }}</h5>
                                                        <h6>{{ $testimonial->author_en }}</h6>
                                                        <p>{{ $testimonial->company_en }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="testimonial_btn text-center mt-5">
                            <span class="s_experience">
                                <a href=""> Share Your Experiences </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <section id="testimonial">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="testimonial_content text-center">
                    <h2>See What Applicants Have to Say</h2>
                    <p>Discover real stories and feedback that highlight our commitment to providing a seamless and effective Verification & Evaluation experience</p>
                </div>
                <div class="row d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="owl-carousel owl-theme pt-md-4">
                            @if (count($testimonials))
                                @foreach ($testimonials as $index => $testimonial)
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="card px-4 py-4" style="min-height: 400px;">
                                                    <div class="star_icons">
                                                        @php
                                                            $ratings = (int) $testimonial->ratings;
                                                        @endphp
                                                        @if (!empty($ratings))
                                                            @for ($i = 0; $i < $ratings; $i++)
                                                                <svg width="27" height="27" viewBox="0 0 27 27"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <mask id="mask0_83_487" style="mask-type: alpha"
                                                                        maskUnits="userSpaceOnUse" x="3" y="4"
                                                                        width="21" height="19">
                                                                        <path
                                                                            d="M13.4996 19.7095L18.1684 22.5332C19.0234 23.0507 20.0696 22.2857 19.8446 21.3182L18.6071 16.0082L22.7359 12.4307C23.4896 11.7782 23.0846 10.5407 22.0946 10.462L16.6609 10.0007L14.5346 4.98324C14.1521 4.07199 12.8471 4.07199 12.4646 4.98324L10.3384 9.98949L4.90462 10.4507C3.91462 10.5295 3.50962 11.767 4.26337 12.4195L8.39212 15.997L7.15462 21.307C6.92962 22.2745 7.97587 23.0395 8.83087 22.522L13.4996 19.7095Z"
                                                                            fill="black" />
                                                                    </mask>
                                                                    <g mask="url(#mask0_83_487)">
                                                                        <rect width="27" height="27"
                                                                            fill="#054776" />
                                                                    </g>
                                                                </svg>
                                                            @endfor
                                                        @endif
                                                    </div>
                                                    <div class="testimonial_c_content">
                                                        <h5>{{ $testimonial->description_en }}</h5>
                                                        <h6>{{ $testimonial->author_en }}</h6>
                                                        <p>{{ $testimonial->company_en }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="testimonial_btn text-center">
                            <span class="s_experience">
                                <a href="">Share Your Experiences</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="explore_article">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
                <div class="e_article_content text-center">
                    <h2>Explore Our Top Articles</h2>
                    {{-- <p>In publishing and graphic design, Lorem ipsum is a placeholder</p> --}}
                </div>
                <div class="row pt-lg-5 pt-md-4 pt-1 d-flex justify-content-center">
                    <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                        <div class="row">
                            {{-- @if (count($contents) > 0)
                                @foreach ($contents as $content)
                                    <div class="col-lg-4">
                                        <div class="card">
                                            <div class="card_img">
                                                <img src="{{ asset('uploads/contents/profile/' . $content->profile_image) }}"
                                                    class="img-fluid w-100" />
                                                @if ($content->category)
                                                    <a class="img_tag"
                                                        href="#">{{ $content->category->title_en }}</a>
                                                @endif
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-auto">
                                                        <h5>{{ $content->created_at->format('d F, Y') }}</h5>
                                                    </div>
                                                    <div class="col-auto ms-auto">
                                                        @if (!empty($content->read_time))
                                                            <h6>Read Time: {{ $content->read_time }} Minutes</h6>
                                                        @endif
                                                    </div>
                                                </div>
                                                <h4>{!! Str::limit($content->title_en, 36, ' ...') !!}</h4>
                                                <p>{!! Str::limit($content->short_description_en, 85, ' ...') !!}</p>
                                                <div class="e_article_btn">
                                                    <a href="{{ route('blog.details', $content->slug) }}">Read more<i
                                                            class="fa-solid fa-angle-right ps-1"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif --}}
                            @if (count($contents) > 0)
                                @foreach ($contents as $content)
                                    <div class="col-lg-4">
                                        <a href="{{ route('blog.details', $content->slug) }}">
                                            <div class="card">
                                                <div class="card_img">
                                                    <img src="{{ asset('uploads/contents/profile/' . $content->profile_image) }}"
                                                        class="img-fluid w-100" />
                                                    @if ($content->category)
                                                        <a class="img_tag">{{ $content->category->title_en }}</a>
                                                    @endif
                                                </div>
                                                <div class="card-body">
                                                    <a href="{{ route('blog.details', $content->slug) }}"
                                                        style="text-decoration: none;">
                                                        <div class="row">
                                                            <div class="col-auto">
                                                                <h5>{{ $content->created_at->format('d F, Y') }}</h5>
                                                            </div>
                                                            <div class="col-auto ms-auto">
                                                                @if (!empty($content->read_time))
                                                                    <h6>Read Time: {{ $content->read_time }} Minutes</h6>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <h4>{!! Str::words($content->title_en, 7, '') !!}</h4>
                                                        <p>{!! Str::words($content->short_description_en, 11, '...') !!}</p>
                                                    </a>
                                                    <div class="e_article_btn">
                                                        <a href="{{ route('blog.details', $content->slug) }}">Read more<i
                                                                class="fa-solid fa-angle-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        </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('track.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="" 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 mt-3">
                                    <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
                        $('#items_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>