@extends('website.layouts.app')
@section('content')
    <section id="banner_nl_page" class="nl_p_banner_bg">
        <div class="container-fluid banner_height align-content-center">
            <div class="col-lg-10 col-md-10 col-12 mx-auto">
                <div class="row  d-lex 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-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">
                                        <div class="tabs-content text-md-start text-center">
                                            <h1>{{ $page->newsletter_heading_en }}</h1>
                                            <p>{{ $page->newsletter_description_en }}</p>
                                            <div class="tabs_buttons">
                                                <span class="get_started">
                                                    <a href="{{ $page->newsletter_verification_link }}"> Apply Now </a>
                                                </span>
                                                <span class="talk_sales">
                                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop">Sign In</a>
                                                    {{-- <a href="{{ $page->newsletter_equivalency_link }}"> Sign In </a> --}}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <style>
                                @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-5 col-lg-5 col-md-6 col-12 align-content-end ">
                                <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" alt="{{ str_replace('-', ' ', pathinfo($page->newsletter_image, PATHINFO_FILENAME)) }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="nl_p_s2" class="s-p-tb">
        <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_en }}</h2>
                        </div>
                        <div class="row gy-3 pt-xl-5 pt-lg-4 pt-md-3 pt-3">
                            <div class="col-lg-6 pe-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 ps-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_en }}</a>
                                                </span>
                                                <a href="{{ route('newsletter.details', $content->slug) }}" style="text-decoration: none;">
                                                    
                                                    <h6>{{ $content->title_en }}</h6>
                                                    <span class="nl_p_s2_date">{{ $content->created_at->format('d F, Y') }}</span>
                                                </a>
                                            <div class="e_article_btn">
                                                <!--<a href="{{ route('newsletter.details', $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" class="s-p-tb">
        <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_en }}</h2>
                    <p>{{ $page->article_description_en }}</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>Category</option>
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->title_en }}
                                                        </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-center">
                                                <button class="bttn_search shadow">Search</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', $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_en }}
                                                                </a>
                                                            </div>
                                                            <div class="col-auto ms-auto align-content-center">
                                                                <a href="{{ route('newsletter.details', $content->slug) }}" style="text-decoration: none;">
                                                                    <h5>{{ $content->created_at->format('d F, Y') }}</h5>
                                                                </a>
                                                            </div>
                                                    </div>
                                                    <a href="{{ route('newsletter.details', $content->slug) }}" style="text-decoration: none;">
                                                        <h4>{!! Str::words($content->title_en, 7, ' ...') !!}</h4>
                                                        <p>{!! Str::words($content->short_description_en, 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 ">
        <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_en }}</h2>
                                    <p>{{ $page->services_description_en }}</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_en }}
                                    </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-start ">
                                                            <h2>{{ $tab->title_en }}</h2>
                                                            <h6>{{ $tab->description_en }}</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 ps-2">
                                                                            {{ $item->item_en }}</span>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <div class="tabs_buttons">
                                                                <span class="get_started">
                                                                        @if ($tab->heading_en == "Track My Application")
                                                                            <a href="https://track.quadrabay.com/">Track Now</a>
                                                                        @else
                                                                            <a href="{{ $tab->apply_now_en }}">
                                                                                Apply Now
                                                                            </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">
        <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" />-->
                        </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