@extends('website.layouts.app')
@section('content')
    <section id="education_v_p_banner" class="education_v_p_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  pt-4 d-flex justify-content-center gy-md-5 gy-4  pt-xl-4 pt-3 ">
                        <div class="col-xl-5 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">
                                        <h2>{{ $verification->sub_heading_en }}</h2>
                                        <p>{{ $verification->sub_description_en }}</p>
                                        <div class="b_n_app_buttons">
                                            <span class="faq">
                                                <a href="{{ $verification->sub_link }}">Need Help? </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-7 col-lg-7 col-md-6 col-12 align-content-center">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-12 col-xl-12 col-lg-12 align-content-center">
                                    <div class="s_banner_img">
                                        <img src="{{ asset('uploads/screening_verification/' . $verification->image) }}"
                                            class="img-fluid w-100" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <section id="education_v_s2">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="row pt-4 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-4 col-lg-4 pe-xl-5">
                            <div class="card shadow">
                                <div class="card_content">
                                    <div class="p_main_div">
                                        @if (count($verifications))
                                            @foreach ($verifications as $verification)
                                                <div class="pt-2">
                                                    <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                        alt="" />
                                                    <a href="{{ route('verification.details', $verification->slug) }}"
                                                        class="para_text active ps-2"
                                                        style="text-decoration: none;">{{ $verification->title_en }}</a>
                                                    {{-- <span class="para_text active ps-2"></span> --}}
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-8 col-lg-8">
                            <div class="r_content">
                                <h2>{{ $verification->title_en }}</h2>
                                <p>{{ $verification->description_en }}</p>
                                <h3>{{ $verification->service_heading_en }}</h3>
                                <div class="p_main_div_r">
                                    @if (count($items))
                                        @foreach ($items as $item)
                                            <div class="pt-2">
                                                <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                    alt="" />
                                                <span class="para_text ps-md-3 ps-2">
                                                    {{ $item->title_en }}
                                                </span>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="b_n_app_buttons">
                                <span class="faq">
                                    <a href="">Need Help? </a>
                                </span>
                            </div>
                        </div>
                    </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 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 Now</a>
                                    </span>
                                </div>

                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 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>

    <section id="education_v_s3" class="education_v_s3_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-md-5  gy-4  d-flex justify-content-center">
                        <div class="col-xl-4 col-lg-12">
                            <div class="row">
                                <div class="col-lg-10">
                                    <div class="r_account_c_1_content">
                                        <h2>{{ $preferences->register_heading_en }}</h2>
                                        <p>{{ $preferences->register_description_en }}</p>
                                        <div class="r_account_btn">
                                            <a href="{{ $preferences->register_link }}">
                                                contact us
                                                <i class="fa-solid fa-angle-right ps-2"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 ps-xxl-4 ps-xl-2" id="card_1">
                            <div class="card shadow">
                                <div class="r_account_c_2_content">
                                    <h2>{{$preferences->corporate_heading_en}}</h2>
                                    <p>{{$preferences->corporate_description_en}}</p>
                                    <div class="r_account_c_2_buttons">
                                        <span class="apply_now">
                                            <a href="{{$preferences->corporate_link}}"> Apply Now </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 ps-xxl-4 ps-xl-2">
                            <div class="card shadow border-0">
                                <div class="r_account_c_3_content">
                                    <h2>{{$preferences->individual_heading_en}}</h2>
                                    <p>{{ $preferences->individual_description_en }}</p>
                                    <div class="r_account_c_3_buttons">
                                        <span class="apply_now">
                                            <a href="{{$preferences->individual_link}}"> Apply Now </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    <section id="track_my_ap_s6" style="background-color: #FFF;">
        <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">
                        @foreach ($faqs as $faq)
                            <div class="col-xl-6">
                                <div class="row pt-md-2 bottom_line text-md-start text-center">
                                    <div class="col-md-2 col-12">
                                        <div class="pdf_img">
                                            <img src="{{ asset('website/assets/images/message-question.svg') }}"
                                                alt="" />
                                        </div>
                                    </div>
                                    <div class="col-md-10 col-12">
                                        <div class="frequently_content">
                                            <h2>{{ $faq->title_en }}</h2>

                                            @php
                                                // Get the first 40 characters of the description
                                                $preview = \Illuminate\Support\Str::limit($faq->description_en, 40, '');

                                                // Get the remaining part of the description starting from character 40
                                                $remainingContent = substr($faq->description_en, 40);
                                            @endphp

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

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

                                                <!-- Unique "Read more" button linked to the above collapse -->
                                                <div class="e_article_btn mt-3">
                                                    <a class="read-more" data-bs-toggle="collapse"
                                                        href="#{{ $faq->id }}" role="button" aria-expanded="false"
                                                        aria-controls="{{ $faq->id }}">
                                                        Read more
                                                        <i class="fa-solid fa-angle-right ps-2"></i>
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="e_article_b_page_btn text-center">
                <span class="e_art_b_page ">
                    <a href="{{ route('contact.us') }}">
                        Contact us
                    </a>
                </span>
            </div>

        </div>
        </div>
    </section>
    <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 }}">
                                            FAQ
                                        </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>
@endsection