@extends('web.layouts.layout')

@section('head_css')

    <style>
        .blog-pg .news_card {
            margin-bottom: 25px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 3px 6px 10px 0 #c9c4c411;
        }
        .blog-pg .news_card .card-body .p {
            height: 58px;
        }
        .blog-pg .categ_box .item{
            background-color: #fff;
            border-radius: 15px;
            padding: 25px 25px;
            margin-bottom: 10px;
            display: block;
        }
        .blog-pg .categ_box .item .num {
            width: 45px;
            height: 40px;
            display: block;
            font-size: 12px;
            font-weight: bold;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--secondary);
            color: #fff;
        }
        .blog-pg .tags_box .tag_link {
            position: relative;
            padding: .9em 2rem;
            width: fit-content;
            font-size: 14px;
            border-radius: 5px;
            margin-inline-end: 10px;
            margin-bottom: 10px;
            background-color: var(--primary);
            color: #fff;
        }
        .pagination-wrapper .pagination .page-link {
            border-radius: 5px !important;
            background-color: transparent;
            color: var(--secondary);
            margin: 0 4px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 0;
            width: 45px;
            height: 40px;
        }

        .pagination-wrapper .pagination .page-link:hover,
        .pagination-wrapper .pagination .page-link.active {
            background-color: var(--primary);
            color: #fff !important;
        }
    </style>

@endsection

@section('content')

    <main>
        <!-- Start section -->
        <section class="blog-pg news-pg section bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="mb-5">
                            @if($articles)
                                @foreach($articles as $article)
                                    <div class="news_card">
                                        <div class="img_box">
                                            <img src="{{ getImage($article->image) }}"
                                                 alt="{{ $article->currentDescription->title }}" class="sec-img"/>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="title fw-bold mb-3">{{ $article->currentDescription->title }}</h5>
                                            <p class="p">{{ wordLimit($article->currentDescription->description, 40) }}</p>
                                            <p class="date"><i class="bi bi-calendar2-week"></i> {{ $article->custom_date }}</p>
                                            <a href="{{ route('article.show', $article->id) }}" class="butn primary_border_butn ">
                                                <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.read_more') }}
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="alert alert-warning text-center" role="alert">
                                    {{ __('main.no_results') }}
                                </div>
                            @endif
                        </div>

                        <div class="d-flex justify-content-center">
                            {{ $articles->appends(request()->query())->links('web.partials._custom_pagination') }}
                        </div>

                    </div>
                    <div class="col-lg-4">
                        <div class="categ_box mb-5">
                            <h4 class="title fw-bold mb-4 pb-2">
                                {{ __('articles.categories') }}
                            </h4>
                            @foreach($categories as $category)
                                <a href="{{ route('article.index', ['category_id'=>$category->id]) }}" class="item">
                                    <div class="in-flex">
                                        <span class="txt">{{ $category->currentDescription->name }}</span>
                                        <span class="num">{{ $category->articles_count }}</span>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                        <div class="tags_box">
                            <h4 class="title fw-bold mb-4 pb-2">
                                {{ __('articles.tags') }}
                            </h4>
                            <div class="items d-flex flex-wrap">
                                @foreach($tags as $tag)
                                    <a href="{{ route('article.index', ['tag_id'=>$tag->id]) }}" class="tag_link">
                                        {{ $tag->currentDescription->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Start section -->
        <section class="news-pg section bg_lightblue3">
            <div class="container">
                <h1 class="title fw-bold mb-5">
                    {{ __('articles.similar_news') }}
                </h1>
                <div class="swiper-container news_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($similarArticles as $article)
                            <div class="swiper-slide">
                                <div class="news_card">
                                    <div class="img_box">
                                        <img src="{{ getImage($article->image) }}" alt="{{ $article->currentDescription->title }}" class="sec-img"/>
                                    </div>
                                    <div class="card-body">
                                        <h5 class="title fw-bold mb-3">{{ $article->currentDescription->title }}</h5>
                                        <p class="p">
                                            {{ wordLimit($article->currentDescription->description, 40) }}
                                        </p>
                                        <p class="date"><i class="bi bi-calendar2-week"></i> {{ $article->custom_date }}</p>
                                        <a href="{{ route('article.show', $article->id) }}" class="butn primary_border_butn ">
                                            <i class="bi bi-arrow-right ms-0 me-3"></i> {{ __('main.read_more') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
    </main>

@endsection

@section('js')

    <script>
        var swiper = new Swiper('.news-pg .news_swiper', {
            // loop: true,
            speed: 900,
            slidesPerView: 1,
            spaceBetween: 15,
            // autoplay: {
            //     delay: 2500,
            // },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.news-pg .swiper-pagination',
                clickable: true
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 20,

                },
            }
        });
    </script>

@endsection