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

<section id="banner_nl_page" class="nl_p_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-xl-11 col-lg-12 col-md-12 col-12">
                    <div class="row 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>{{ $page->newsletter_heading_ar }}</h1>
                                        <p>{{ $page->newsletter_description_ar }}</p>
                                        <div class="tabs_buttons">
                                            <span class="get_started">
                                                <a href="{{ $page->newsletter_verification_link_ar }}"> تقدم بطلبك الآن </a>
                                            </span>
                                            <span class="talk_sales">
                                                <a data-bs-toggle="modal" data-bs-target="#staticBackdrop">تسجيل الدخول</a>
                                                {{-- <a href="{{ $page->newsletter_equivalency_link }}"> Sign In </a>
                                                --}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <style>
                        
                        .form-select{
                                background-position: left 0.75rem center;
                            }
                            .form-control.is-invalid, .was-validated .form-control:invalid {
                        background-position: left calc(.375em + .1875rem) center;
                        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
                        padding-right: calc(-0.25em  + .75rem);
                    }

                        @media (min-width: 992px) and (max-width: 1028px) {
                            #banner_nl_page .tabs_buttons {
                                padding-top: 10px;
                            }
                        }

                        @media (min-width: 1029px) and (max-width: 1400px) {
                            #banner_nl_page .tabs_buttons {
                                padding-top: 0;
                            }

                        }
                        </style>

                        <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/newsletter_page/' . $page->newsletter_image) }}"
                                            class="img-fluid w-100"
                                            alt="{{ str_replace('-', ' ', pathinfo($page->newsletter_image, PATHINFO_FILENAME)) }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="nl_p_s2" 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-xl-11 col-lg-12 col-md-12 col-12">
                    <div class="nl_p_s2_content">
                        <h2>{{ $page->explore_heading_ar }}</h2>
                    </div>
                    <div class="row gy-3 pt-xl-5 pt-lg-4 pt-md-3 pt-3">
                        <div class="col-lg-6 ps-xl-4">
                            <img src="{{ asset('uploads/newsletter_page/' . $page->explore_image) }}"
                                class="img-fluid nl_p_s2_img w-100"
                                alt="{{ str_replace('-', ' ', pathinfo($page->explore_image, PATHINFO_FILENAME)) }}" />
                        </div>
                        <div class="col-lg-6 pe-xl-4">
                            @if (count($contents) > 0)
                            @foreach ($contents as $content)
                            <div class="nl_p_s2_c_content pt-xxl-4 pt-md-3 pt-1">

                                <span>
                                    <a class="category_link">{{ $content->category->title_ar }}</a>
                                </span>
                                <a href="{{ route('newsletter.details.ar', $content->slug) }}"
                                    style="text-decoration: none;">

                                    <h6>{{ $content->title_ar }}</h6>
                                    <span class="nl_p_s2_date">{{ $content->created_at->locale('ar')->translatedFormat('d F, Y') }}</span>
                                </a>
                                <div class="e_article_btn">
                                    <!--<a href="{{ route('newsletter.details.ar', $content->slug) }}">Read more <i class="fa-solid fa-angle-right"></i></a>-->
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="nl_p_s3" style="direction: rtl;">
    <div class="container-fluid">
        <div class="col-lg-10 col-md-12 col-12 mx-auto">
            <div class="nl_p_s3_content text-center">
                <h2>{{ $page->article_heading_ar }}</h2>
                <p>{{ $page->article_description_ar }}</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="row d-flex justify-content-center">
                        <div class="col-lg-8 col-md-11">
                            <form method="GET" action="">
                                <div class="row pt-2 gy-3">
                                    <div class="col-lg-5 col-md-4">
                                        <div class="custom-select-icon">
                                            <select class="form-select" name="category"
                                                aria-label="Default select example">
                                                <option>فئة</option>
                                                @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->title_ar }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-4">
                                        <div class="custom-date-icon">
                                            <input type="date" name="date" class="form-control"
                                                aria-label="Date select">
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3">
                                        <div class="custom-search-icon text-lg-start text-md-end text-center">
                                            <button class="bttn_search shadow">يبحث</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row pt-md-5 pt-4 gy-lg-5 gy-3">
                        @if (count($contentss) > 0)
                        @foreach ($contentss as $content)
                        <div class="col-lg-4">
                            <a href="{{ route('newsletter.details.ar', $content->slug) }}">
                                <div class="card">
                                    <div class="card_img">
                                        <img src="{{ asset('uploads/contents/profile/' . $content->profile_image) }}"
                                            class="img-fluid w-100"
                                            alt="{{ str_replace('-', ' ', pathinfo(substr($content->profile_image,11), PATHINFO_FILENAME)) }}" />
                                    </div>
                                    <div class="card-body">
                                        <div class="row">

                                            <div class="col-auto">
                                                <a class="img_tag">
                                                    {{ $content->category->title_ar }}
                                                </a>
                                            </div>
                                            <div class="col-auto me-auto align-content-center">
                                                <a href="{{ route('newsletter.details.ar', $content->slug) }}"
                                                    style="text-decoration: none;">
                                                    <h5>{{ $content->created_at->locale('ar')->translatedFormat('d F, Y') }}</h5>
                                                </a>
                                            </div>
                                        </div>
                                        <a href="{{ route('newsletter.details.ar', $content->slug) }}"
                                            style="text-decoration: none;">
                                            <h4>{!! Str::words($content->title_ar, 7, ' ...') !!}</h4>
                                            <p>{!! Str::words($content->short_description_ar, 12, ' ...') !!}</p>
                                            {{-- <h4>{!! Str::limit($content->title_en, 36, ' ...') !!}</h4>
                                                        <p>{!! Str::limit($content->short_description_en, 85, ' ...') !!}</p> --}}
                                        </a>

                                        {{-- <div class="e_article_btn">
                                                        <!--<a href="{{ route('newsletter.details', $content->slug) }}">Read
                                        more<i-->
                                            <!--        class="fa-solid fa-angle-right ps-1"></i></a>-->
                                    </div> --}}
                                </div>
                        </div>
                        </a>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<section id="nl_p_s4" class="nl_p_s4_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-xxl-11 col-xl-11 col-lg-12 col-md-12 col-12">
                    <div class="row d-flex justify-content-center">
                        <div class="col-lg-7">
                            <div class="nl_p_s4_content text-center">
                                <h2>{{ $page->services_heading_ar }}</h2>
                                <p>{{ $page->services_description_ar }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section id="tabs" class="pt-lg-4 pt-md-3 pt-1">
                <div class="row d-flex justify-content-center">
                    <div class="col-xl-11 col-lg-11 col-md-12 col-12">
                        <div class="custom-nav-pills text-center" role="tablist">
                            @foreach ($services as $tab)
                            <button class="btn filt_btn_1 {{ $loop->first ? 'active' : '' }}" data-bs-toggle="pill"
                                data-bs-target="#category{{ $tab->id }}" type="button">
                                {{ $tab->heading_ar }}
                            </button>
                            @endforeach
                        </div>

                        <div class="tab-content mt-xl-1 mt-4" id="pills-tabContent">
                            @foreach ($services as $tab)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                id="category{{ $tab->id }}">
                                <div class="row gy-3 d-flex justify-content-center gy-md-5 gy-4 pt-xl-4 pt-2">
                                    <div class="col-xl-6 col-lg-12 col-md-12">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-xxl-11 col-xl-11 col-lg-12 px-lg-0">
                                                <div class="tabs-content text-xl-end ">
                                                    <h2>{{ $tab->title_ar }}</h2>
                                                    <h6>{{ $tab->description_ar }}</h6>
                                                    <div class="p_main_div">
                                                        @foreach ($tab->serviceItems as $item)
                                                        <div class="pt-2 alignsline">
                                                            <img src="{{ asset('website/assets/images/Group 427318929.svg') }}"
                                                                class="itm_margin" alt="mark" />
                                                            <span class="para_text pe-2">
                                                                {{ $item->item_ar }}</span>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                    <div class="tabs_buttons">
                                                        <span class="get_started">
                                                            @if ($tab->heading_ar == "تتبع طلبي")
                                                            <a>تتبع الآن</a>
                                                            @else
                                                            <a href="{{ $tab->apply_now_ar }}">
                                                                تقدم بطلبك الآن
                                                            </a>
                                                            @endif
                                                        </span>
                                                        <!--<span class="talk_sales"><a-->
                                                        <!--        href="{{ $tab->read_more_en }}">Read-->
                                                        <!--        More</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-11 col-xl-11 col-lg-12">
                                                <div class="tabs_img">
                                                    <img src="{{ asset('uploads/services/' . $tab->image) }}"
                                                        class="img-fluid w-100"
                                                        alt="{{ str_replace('-', ' ', pathinfo(substr($tab->image,11), PATHINFO_FILENAME)) }}" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>

<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) }}"-->
                        <!--    class="img-fluid w-100" />-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


{{-- <section id="nl_p_s5" class="nl_p_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-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_en }}</h2>
<p>{{ $preferences->application_description_en }}</p>
<div class="b_n_app_buttons">
    <span class="contact_us">
        <a href="{{ $preferences->application_contact_link }}"> Contact Us </a>
    </span>
    <span class="faq">
        <a href="{{ $preferences->application_faq_link }}"> FAQs </a>
    </span>
</div>
</div>
</div>
</div>

<div class="b_n_app_img text-center">
    <img src="{{ asset('uploads/preferences_page/' . $preferences->application_image) }}" class="img-fluid w-100"
        alt="" />
</div>
</div>
</div>
</div>
</div>
</section> --}}

@endsection