@extends('website_ar.layouts.app')
@section('content')

<section id="solution_banner" class="s_banner_bg" style="direction: rtl">
    <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-lg-11 col-md-12 col-12">
                    <div class="row gy-3 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-end text-center">
                                        <h1>{{ $solution->solution_heading_ar }}</h1>
                                        {{-- <h6>{{ $solution->solution_description_ar }}</h6> --}}
                                        <div class="p_main_div">
                                            @if (count($solutionItems) > 0)
                                            @foreach ($solutionItems as $item)
                                            <div class="pt-2 alignsline">
                                                <img src="{{ asset('website/assets/images/Layer_1.svg') }}"
                                                    class="itm_margin_solution" alt="mark">
                                                <span class="para_text pe-2">{{ $item->item_ar }}</span>
                                            </div>
                                            @endforeach
                                            @endif
                                        </div>
                                        <div class="tabs_buttons">
                                            <span class="get_started">
                                                <a href="{{ $solution->solution_verification_link_ar }}">تَحَقّق</a>
                                            </span>
                                            <span class="talk_sales">
                                                <a href="{{ $solution->solution_equivalency_link_ar }}">تقييم</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-7 col-lg-7 col-md-6 col-12">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-12 col-xl-12 col-lg-12 ">
                                    <div class="s_banner_img">
                                        <img src="{{ asset('uploads/solution_page/' . $solution->solution_image) }}"
                                            class="img-fluid w-100"
                                            alt="{{ str_replace('-', ' ', pathinfo($solution->solution_image, PATHINFO_FILENAME)) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

@if (count($solutions) > 0)
@foreach ($solutions as $index => $solution)
@if ($index % 2 == 0)
<section id="verification_solutions" style="direction: rtl">
    <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-3">
                        <div class="col-xl-6 col-lg-12 col-md-12 col-md-12 align-content-center">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-10 col-xl-11 col-lg-12">
                                    <div class="v_solutions_img">
                                        <img src="{{ asset('uploads/solutions/' . $solution->image) }}"
                                            class="img-fluid w-100"
                                            alt="{{ str_replace('-', ' ', pathinfo(substr($solution->image,11), PATHINFO_FILENAME)) }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-12">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-10 col-xl-11 col-lg-12">
                                    <div class="v_solutions_content text-xl-end text-center">
                                        <h2>{{ $solution->title_ar }}</h2>
                                        <h6>
                                            @if ($solution->category)
                                            {{ $solution->category->title_ar }}
                                            @endif
                                        </h6>
                                        <p>{!! $solution->description_ar !!}</p>
                                        <div class="v_solutions_buttons">
                                            <span class="get_started">
                                                <a href="{{ $solution->get_started_link_ar }}">اقرأ المزيد</a>
                                            </span>
                                            <span class="talk_sales">
                                                <a href="{{ $solution->talk_sales_link_ar }}">تقدم بطلبك الآن</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@else
<section id="verification_solutions_2" style="direction: rtl">
    <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-3">
                        <div class="col-xl-6 col-lg-12 col-md-12">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-10 col-xl-11 col-lg-12">
                                    <div class="v_solutions_content text-xl-end text-center">
                                        <h2>{{ $solution->title_ar }}</h2>
                                        <h6>
                                            @if ($solution->category)
                                            {{ $solution->category->title_ar }}
                                            @endif
                                        </h6>
                                        <p>{!! $solution->description_ar !!}</p>
                                        <div class="v_solutions_buttons">
                                            <span class="get_started">
                                                <a href="{{ $solution->get_started_link_ar }}">اقرأ المزيد</a>
                                            </span>
                                            <span class="talk_sales">
                                                <a href="{{ $solution->talk_sales_link_ar }}">تقدم بطلبك الآن</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-12 align-content-center">
                            <div class="row d-flex justify-content-center">
                                <div class="col-xxl-10 col-xl-11 col-lg-12">
                                    <div class="v_solutions_img">
                                        <img src="{{ asset('uploads/solutions/' . $solution->image) }}"
                                            class="img-fluid w-100"
                                            alt="{{ str_replace('-', ' ', pathinfo(substr($solution->image,11), PATHINFO_FILENAME)) }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
@endforeach
@endif

<section id="banner_need_app" class="b_n_app_bg" style="direction: rtl">
    <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-10 col-xl-10 col-lg-11 col-md-11">
                            <div class="b_n_app_content text-center">
                                <h2>{{ $preferences->application_heading_ar }}</h2>
                                <p>{{ $preferences->application_description_ar }}</p>
                                <div class="b_n_app_buttons">
                                    <span class="contact_us">
                                        <a href="{{ $preferences->application_contact_link_ar }}"> اتصل بنا </a>
                                    </span>
                                    <span class="faq">
                                        <a href="{{ $preferences->application_faq_link_ar }}"> الأسئلة الشائعة </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

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

<section id="register_account" style="direction: rtl">
    <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-4 gy-3 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">
                                            <a href="{{ $preferences->register_link_ar }}">
                                                اتصل بنا
                                                <i class="fa-solid fa-angle-left ps-md-2 ps-1"></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 px-lg-4 py-lg-5 border-0">
                                <div class="r_account_c_2_content">
                                    <h2>{{ $preferences->corporate_heading_ar }}</h2>
                                    <p>{{ $preferences->corporate_description_ar }}</p>
                                    {{-- <h4>$80/<span class="year">Yr</span></h4> --}}
                                    <div class="r_account_c_2_buttons">
                                        <span class="apply_now">
                                            <a href="{{ $preferences->corporate_link_ar }}"> تقدم بطلبك الآن </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 ps-xxl-4 ps-xl-2">
                            <div class="card shadow px-lg-4 py-lg-5 border-0">
                                <div class="r_account_c_3_content">
                                    <h2>{{ $preferences->individual_heading_ar }}</h2>
                                    <p>{{ $preferences->individual_description_ar }}</p>
                                    {{-- <h4>$80/<span class="year">Yr</span></h4> --}}
                                    <div class="r_account_c_3_buttons">
                                        <span class="apply_now">
                                            <a href="{{ $preferences->individual_link_ar }}"> تقدم بطلبك الآن </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection