@extends('website_ar.layouts.app')
@section('content')
    <section id="b_A_wallet_page" class="b_A_wallet_bg" style="direction: rtl">
        <div class="container-fluid">
            <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-7 col-xl-8 col-lg-10 col-md-11">
                            <div class="b_n_app_content text-center">
                                <h2>{{ $page->application_heading_ar }}</h2>
                                <p>{{ $page->application_description_ar }}</p>
                                <div class="b_n_app_buttons">
                                    <span class="contact_us">
                                        <a href="{{ $page->application_get_started_link }}"> ابدأ مع تطبيق Wallet </a>
                                    </span>
                                    <span class="faq">
                                        <a href="{{ $page->application_learn_more_link }}">يتعلم أكثر </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="" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="application_w_s2" style="direction: rtl">
        <div class="container-fluid">
            <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_ar }}</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>
    </section>

    <section id="about_us_s6" style="direction: rtl">
        <div class="container-fluid">
            <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="" />
                                        <h2>{{ $page->accordion_heading_one_ar }}</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_ar }}</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="" />
                                        <h2>{{ $page->accordion_heading_two_ar }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{{ $page->accordion_heading_description_two_ar }}</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="" />
                                        <h2>{{ $page->accordion_heading_three_ar }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{{ $page->accordion_heading_description_three_ar }}</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="" />
                                        <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="" />
                                        <h2>{{ $page->accordion_heading_five_ar }}</h2>
                                    </button>
                                </h2>
                                <div id="collapseFIVE" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{{ $page->accordion_heading_description_five_ar }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="tabs_buttons">
                                <span class="get_started"><a
                                        href="{{ $page->accordion_get_started_link }}">ابدأ</a></span>
                                <span class="talk_sales"><a href="{{ $page->accordion_talk_to_sales_link }}">تحدث إلى
                                        المبيعات</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="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="application_w_s3" style="direction: rtl">
        <div class="container-fluid">
            <div class="Evaluation_S_p_s3_s4_h text-center">
                <h2>{{ $page->how_does_it_work_ar }}</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="">
                                    <h2>{{ $page->box_heading_one_ar }}</h2>
                                    <p>{{ $page->box_description_one_ar }}</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="">
                                    <h2>{{ $page->box_heading_two_ar }}</h2>
                                    <p>{{ $page->box_description_two_ar }}</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="">
                                    <h2>{{ $page->box_heading_three_ar }}</h2>
                                    <p>{{ $page->box_description_three_ar }}</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="">
                                    <h2>{{ $page->box_heading_four_ar }}</h2>
                                    <p>{{ $page->box_description_four_ar }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="application_w_s4" class="application_w_s4_bg" style="direction: rtl">
        <div class="container-fluid">
            <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_ar }}</h2>
                                        <p>{{ $preferences->register_description_ar }}</p>
                                        <div class="r_account_btn">
                                            <span class="apply_now">
                                                <a href="{{ $preferences->register_link }}"> ابدأ اليوم </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_ar }}</h2>
                                    <p>{{ $preferences->corporate_description_ar }}</p>
                                    <div class="r_account_c_2_buttons">
                                        <span class="apply_now">
                                            <a href="{{ $preferences->corporate_link }}">تقدم بطلبك الآن</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_ar }}</h2>
                                    <p>{{ $preferences->individual_description_ar }}</p>
                                    <div class="r_account_c_3_buttons">
                                        <span class="apply_now">
                                            <a href="{{ $preferences->individual_link }}">تقدم بطلبك الآن</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection