@extends('website.layouts.app')
@section('content')
    <section id="b_A_wallet_page" class="b_A_wallet_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-lg-11 col-md-11">
                    <div class="row d-flex justify-content-center">
                        <div class="col-xxl-8s col-xl-8 col-lg-10 col-md-11">
                            <div class="b_n_app_content text-center">
                                <h2>{{ $page->application_heading_en }}</h2>
                                <p>{!! $page->application_description_en !!}</p>
                                <div class="b_n_app_buttons">
                                    <span class="contact_us">
                                        <a href="{{ $page->application_get_started_link }}"> Get Started with the
                                            Application Wallet </a>
                                    </span>
                                    <span class="faq">
                                        <a href="{{ $page->application_learn_more_link }}"> Learn More </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="b_n_app_img text-center">
                        <img src="{{ asset('uploads/application_wallet_page/' . $page->application_image) }}"
                            class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->application_image, PATHINFO_FILENAME)) }}" />
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <section id="application_w_s2">
        <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-6 col-md-8">
                    <div class="Evaluation_S_p_s3_s4_h text-center">
                        <h2>{{ $page->application_sub_heading_en }}</h2>
                    </div>
                </div>
            </div>

            <div class="row d-flex justify-content-center pt-md-2">
                <div class="col-xxl-10 col-lg-10 col-md-12 col-12">
                    <div class="Evaluation_S_p_s3_s4_h text-center">
                        <p>{!! $page->application_sub_description_en !!}</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <section id="about_us_s6">
        <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 pt-lg-4">
                        <div class="col-xl-6 ">
                            <div class="accordion accordion-item pt-md-4 pt-1" id="accordionExample">
                                <h2 class="accordion-header">
                                    <button class="accordion-button  align-content-center " type="button"
                                        data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne">
                                        <img src="{{ asset('website/assets/images/point_one.png') }}" alt="mark" />
                                        <h2>{{ $page->accordion_heading_one_en }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{!! $page->accordion_heading_description_one_en !!}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <img src="{{ asset('website/assets/images/application_two.png') }}"
                                            alt="mark" />
                                        <h2>{{ $page->accordion_heading_two_en }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{!! $page->accordion_heading_description_two_en !!}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        <img src="{{ asset('website/assets/images/application_seven.png') }}"
                                            alt="mark" />
                                        <h2>{{ $page->accordion_heading_three_en }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{!! $page->accordion_heading_description_three_en !!}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR">
                                        <img src="{{ asset('website/assets/images/application_nine.png') }}"
                                            alt="mark" />
                                        <h2>{{ $page->accordion_heading_four_en }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseFOUR" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{!! $page->accordion_heading_description_four_en !!}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE">
                                        <img src="{{ asset('website/assets/images/application_ten.png') }}"
                                            alt="mark" />
                                        <h2>{{ $page->accordion_heading_five_en }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseFIVE" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{!! $page->accordion_heading_description_five_en !!}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="tabs_buttons">
                                <span class="get_started"><a href="{{ $page->accordion_get_started_link }}">Get
                                        Started</a></span>
                                <span class="talk_sales"><a href="{{ $page->accordion_talk_to_sales_link }}">Talk to
                                        Sales</a></span>
                            </div>

                        </div>

                        <div class="col-xl-6 align-content-center">
                            <div class="about_us_s6_img">
                                <img src="{{ asset('uploads/application_wallet_page/' . $page->accordion_image) }}"
                                    class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->accordion_image, PATHINFO_FILENAME)) }}">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </div>

    </section>

    <section id="application_w_s3">
        <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->how_does_it_work_en }}</h2>
            </div>
            <div class="row d-flex justify-content-center pt-lg-5 pt-3">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row gy-4">
                        <div class="col-lg-3 col-md-6">
                            <div class="card shadow">
                                <div class="card_content text-center">
                                    <img src="{{ asset('website/assets/images/user.svg') }}" alt="mark">
                                    <h2>{{ $page->box_heading_one_en }}</h2>
                                    <p>{!! $page->box_description_one_en !!}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <div class="card shadow">
                                <div class="card_content text-center">
                                    <img src="{{ asset('website/assets/images/user.svg') }}" alt="mark">
                                    <h2>{{ $page->box_heading_two_en }}</h2>
                                    <p>{!! $page->box_description_two_en !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="card shadow">
                                <div class="card_content text-center">
                                    <img src="{{ asset('website/assets/images/user.svg') }}" alt="mark">
                                    <h2>{{ $page->box_heading_three_en }}</h2>
                                    <p>{!! $page->box_description_three_en !!}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <div class="card shadow">
                                <div class="card_content text-center">
                                    <img src="{{ asset('website/assets/images/user.svg') }}" alt="mark">
                                    <h2>{{ $page->box_heading_four_en }}</h2>
                                    <p>{!! $page->box_description_four_en !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>


    <section id="application_w_s4" class="application_w_s4_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">
                                            <span class="apply_now">
                                                <a href="{{ $preferences->register_link }}">Get Started Today</a>
                                            </span>
                                        </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">
        <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="Faq" />
                                        </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>
        </div>
    </section>
    <section id="cu_p_s4" class="cu_p_4_bg">
        <div class="container-fluid">
            <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="row  d-flex justify-content-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row gy-4">
                        <div class="col-lg-6 col-md-6 align-content-center">
                            <div class="r_s_4_content text-md-start text-center">
                                <h2>{{ $page->ready_to_talk_heading_en }}</h2>
                                <p>{!! $page->ready_to_talk_description_en !!}</p>
                                <div class="tabs_buttons">
                                    <span class="get_started_aw ">
                                        <a href="{{ $page->ready_to_talk_application_link }}">Create Your Application
                                            Wallet Now</a>
                                    </span>
                                    <span class=" talk_sales_aw              ">
                                        <a href="{{ $page->ready_to_talk_contact_link }}">Contact Us</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/application_wallet_page/' . $page->ready_to_talk_image) }}"
                                            class="img-fluid w-100" alt="{{ str_replace('-', ' ', pathinfo($page->ready_to_talk_image, PATHINFO_FILENAME)) }}">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
@endsection