@extends('web.layouts.container')

@section('content')

<main>
    <!-- Start pg-header -->
    <section class="pg-header section">
        <div class="container">
            <div class="bread mb-4">
                <a href="{{ route('home') }}" class="pg_link"><img src="{{ asset('assets/web/images/icon.png')}}" alt="" class="icon"/></a> /
                <span class="pg_link active">{{ __('main.news') }}</span>
            </div>
            <h1 class="title text-white text-uppercase fw-bold text-center">{{ __('main.news') }}</h1>
        </div>
        <img src="{{ asset('assets/web/images/pg-header-3.png')}}" alt="" class="bg"/>
    </section>

    <!-- Start impact-pg -->
    <section class="impact-pg news-det section">
        <div class="container">
            <div class="main_inner">
                <div class="box bg_gray mb-0">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="img_box">
                                <div class="date">
                                    <span class="day color-primary">{{ date('d', strtotime($article->news_date)) }}</span>
                                    <p class="month mb-0">{{ date('M', strtotime($article->news_date)) }} <br> {{ date('Y', strtotime($article->news_date)) }}</p>
                                </div>
                                <img src="{{ asset($article->main_photo)}}" alt="" class="sec-img"/>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="text_box">
                                <h2 class="title fw-bold  mb-4 ">
                                    {!! footerLink($description->title, false, false, 3) !!}
                                </h2>
                                <div class="p">
                                    {!! $description->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Start news-sec -->
    <section class="news-sec section">
        <div class="container">
            <h1 class="title text-center sec_head mb-5 pb-3">
                {!! footerLink(__('main.related_news')) !!}
            </h1>
            <div class="swiper-container news_swiper">
                <div class="swiper-wrapper">
                    @foreach ($articles as $item)
                        <div class="swiper-slide">
                            <div class="news_card">
                                <div class="img-box">
                                    <img src="{{ asset($item->main_photo)}}" alt="" class="sec-img"/>
                                    <div class="date">
                                        <span class="day color-primary">{{ date('d', strtotime($item->news_date)) }}</span>
                                        <p class="month mb-0">{{ date('M', strtotime($item->news_date)) }} <br> {{ date('Y', strtotime($item->news_date)) }}</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <h5 class="title mb-4">{{ $item->currentDescription->title }}</h5>
                                    <a href="{{ $item->url }}" class="more_link d-block color-primary mt-4">
                                        {{ __('main.learn_more') }} <i class="fa-solid fa-angle-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <a href="{{route('news')}}" class="link_butn m-auto mt-4"><span>{{ __('main.view_more') }}  <i class="fa-solid fa-angle-right"></i></span></a>
        </div>
    </section>

    <!-- Start downloading-sec -->
    @include('web.layouts.downloading')
</main>

@endsection

@section('content_js')

@endsection