@extends('root')
@section('styles')
<link href="{{ asset('css/flexslider.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.default.min.css') }}" rel="stylesheet">
@endsection

@section('content')
<section id="news-2" class="news-section division pt-40">
    <div class="container">
        <div class="row">
            @if($data->count() > 0)
                @foreach ($data->items() as $q)
                <div class="col-md-6 col-lg-4 d-flex">
                    <div class="article-2 b-bottom mb-40 pb-20 d-flex flex-column w-100">
                        <div class="article-2-img">
                            <a href="{{ url('berita/detail/' . $q->id . '/' . $q->seo) }}">
                                <img class="img-fluid img-h-220 rounded-8" src="{{ asset($q->image) }}" alt="{{ $q->title }}" loading="lazy" />
                            </a>
                        </div>
                        <div class="article-2-txt d-flex flex-column">
                            <p class="p-sm grey-color pt-20">Berita | {{ date('d M, Y', strtotime($q->created_at)) }}</p>
                            <h5 class="h5-sm"><a href="{{ url('berita/detail/' . $q->id . '/' . $q->seo) }}">{{ $q->title }}</a></h5>
                            <p>{{ $q->excerpt ?? Str::limit(strip_tags($q->content), 120) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-md-12 text-center">
                    <p>Belum ada berita yang diterbitkan.</p>
                </div>
            @endif
        </div>

        @if($data->lastPage() > 1)
        <div class="row">
            <div class="col-md-12">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center mt-30">
                        @if($data->currentPage() > 1)
                            <li class="page-item"><a class="page-link" href="{{ $data->url(1) }}"><i class="fas fa-angle-double-left"></i></a></li>
                        @endif

                        @php
                            $n = 1;
                            $last = $data->lastPage();
                            if($data->currentPage() > 5 && $data->lastPage() > 10) {
                                $n = $data->currentPage() - 5;
                            }
                            if($data->currentPage() + 5 < $data->lastPage() && $data->lastPage() > 10) {
                                $last = $data->currentPage() + 5;
                            }
                        @endphp

                        @for($i = $n; $i <= $last; $i++)
                            <li class="page-item {{ $i == $data->currentPage() ? 'active' : '' }}">
                                <a class="page-link" href="{{ $data->url($i) }}">{{ $i }}</a>
                            </li>
                        @endfor

                        @if($data->currentPage() < $data->lastPage())
                            <li class="page-item"><a class="page-link" href="{{ $data->url($data->lastPage()) }}"><i class="fas fa-angle-double-right"></i></a></li>
                        @endif
                    </ul>
                </nav>
            </div>
        </div>
        @endif
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('js/modernizr.custom.js') }}"></script>
<script src="{{ asset('js/jquery.easing.js') }}"></script>
<script src="{{ asset('js/jquery.appear.js') }}"></script>
<script src="{{ asset('js/materialize.js') }}"></script>
<script src="{{ asset('js/jquery.flexslider.js') }}"></script>
<script src="{{ asset('js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('js/register-form.js') }}"></script>
<script src="{{ asset('js/comment-form.js') }}"></script>
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {


    });
</script>
@endpush