@extends('layouts.app')
@section('content')
    <!-- End Navbar Area -->
    <section class="services-area bg-f2f6f9 ptb-110">
        <div class=container>
            <div class=row>
                <div class="col-lg-12 col-md-12">
                    <a href="{{ ($component = $publicities->firstWhere('position', \App\Models\PublicityComponent::TYPE_Tp))->url }}" class=text-center target=_blank>
                        <img data-src="{{ $component->showUrl() }}" alt="{{ $component->title }}" title="{{ $component->title }}" class="img-fluid lazy" style="width: 100%;">
                    </a>
                </div>
            </div>
            <div class=row>
                <div class="col-lg-12 col-md-12">
                    <h1 class="page-header mt-3">{{ $news_type->title }}</h1>
                </div>
            </div>
            @if($news_type->has_competitions)
                <div class=row>
                    <div class="col-6 col-lg-6 col-md-6 col-sm-6">
                        <a href="{{ $news_type->url() }}" class="btn btn-primary btn-wide mb-2"> الأخبار</a>
                    </div>
                    <div class="col-6 col-lg-6 col-md-6 col-sm-6">
                        <a href="{{ $news_type->table_url }}" class="btn btn-transparent btn-wide mb-2">المباريات/الترتيب</a>
                    </div>
                </div>
                <div class=row>
                    <div class="col-lg-12 col-md-12">
                        <hr class=brd>
                    </div>
                </div>
            @endif
            <div class=row>
                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    <div class=row>
                        @empty($news->count())
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-50">
                                <h2 class="text-center mt-3 text-muted"><b>لا توجد أخبار لاستعراضها.</b></h2>
                            </div>
                        @endempty
                        @php($current_date =null)
                        @foreach ($news as $n)
                            @if($current_date != $n->published->format('d /m /Y'))
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <h5 class="text-center mt-3 text-muted"><b>{{ $current_date = $n->published->format('d /m /Y') }}</b></h5>
                                </div>
                            @endif
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <article class="post-wrapper last-child mb-5 mt-4">
                                    <header class=post-img>
                                        <a class=blog-image href="{{ $n->url }}">
                                            <img data-src="{{ $n->cover_thumb_url }}" width="100%" class="img-fluid attachment-ftc_blog_shortcode_thumb size-ftc_blog_shortcode_thumb wp-post-image lazy" alt="{{ $n->title }}">
                                        </a>
                                        <social-share url="{{ $n->url }}" :mini=true></social-share>
                                    </header>
                                    <div class=post-info>
                                        <header class=entry-header>
                                            <h6 class="product_title blog-title entry-title"><a href="{{ $n->url }}">{{ $n->title }}</a></h6>
                                        </header>
                                    </div>
                                    <footer data-sponsorship-slot=card data-sponsorship-slot-id=footer><i class=media></i>
                                        {{--                                            <a href="" class=category itemprop=articleSection title="الدوري الإسباني"> <b>الدوري الإسباني</b></a>--}}
                                        <time>{{ $n->published_index }}</time>
                                    </footer>
                                </article>
                            </div>
                        @endforeach
                    </div>
                    @if($news->count())
                        <div class="row mt-50 @empty($previousPageUrl) justify-content-center @endempty">
                            @if($previousPageUrl)
                                <div class="col-lg-4 col-md-4 text-center @empty($nextPageUrl) offset-4 @endempty">
                                    <a href="{{ $previousPageUrl }}" class="btn btn-primary btn-wide"> <i class="fa fa-chevron-right"></i> أحدث</a>
                                </div>
                                <div class="col-lg-4 col-md-4 text-center">
                                    <a href="{{ route('home') }}" class="btn btn-transparent btn-wide">آخر </a>
                                </div>
                            @endif
                            @if($nextPageUrl)
                                <div class="col-lg-4 col-md-4 text-center">
                                    <a href="{{ $nextPageUrl }}" class="btn btn-primary btn-wide">أقدم <i class="fa fa-chevron-left"></i> </a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                    <div class="sticky p-3 bg-white">
                        <h6 class="float-right text-muted"> إعلان</h6>
                        <a href="{{ ($component = $publicities->firstWhere('position', \App\Models\PublicityComponent::TYPE_LT))->url }}" target=_blank>
                            <img data-src="{{ $component->showUrl() }}" alt="{{ $component->title }}" title="{{ $component->title }}" class="img-fluid p-3 lazy" style="width: 100%;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section("js")
    <script>
        if ($.isFunction($.fn.owlCarousel))
            $('.owl-carousel').owlCarousel({
                rtl: true,
                loop: true,
                autoplay: true,
                nav: false,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 9
                    }
                }
            });
    </script>
@endsection