@extends('Layouts.index')
@section('content')

    <div class="content-wrapper">
    <section class="wrapper bg-light">
      <div class="row">
          <div class="col-md-12 bg-pattern3 py-11">
              <div class="d-flex align-items-center justify-content-center">
                  <h2 class="fs-45 fw-semibold pt-5 p-0 mb-0 text-dark">Artikel<span class="text-primary"> Jagoti</span></h2>
              </div>
              <p class="fs-16 text-center">Perluas Wawasanmu dengan Kelas Online</p>
          </div>
      </div>
      <div class="container py-3 py-md-5">
        <div class="row">
          <div class="col-lg-12 order-lg-2 pt-7">
            <div class=" classic-view">
                <div class="row">
                @if (!empty($listartikel))
                @foreach ($listartikel as $item)
                    <div class="col-lg-4 col-md-6">
                        <article class="post">
                            <div class="card">
                            <figure class="card-img-top overlay overlay-1 hover-scale">
                              <a class="card-artikel-pic" href="{{url('Media/detail-artikel').'/'.$item['slug_title']}}">
                                <img class="h-auto" src="{{ $intcms->url }}upload/{!! $item['lampiran'] !!}" loading="eager" alt="Artikel Jagoti" />
                              </a>
                                <figcaption>
                                <h5 class="from-top mb-0">Lebih Lengkap</h5>
                                </figcaption>
                            </figure>
                            <div class="card-body card-body pt-4 px-5 pb-1 card-artikel-body">
                                <div class="post-header">
                                <div class="post-category mb-3">
                                    <a href="#" class="hover hover text-white bg-primary p-1 rounded" rel="category">{{$item['sumber_informasi']}}</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title mt-1 mb-0 post-title fs-20 fw-semibold">
                                  <a class="link-dark" href="{{url('Media/detail-artikel').'/'.$item['slug_title']}}">{!! substr(strip_tags($item['title']),0, 100).'..'!!}</a></h2>
                                </div>
                                <!-- /.post-header -->
                                <div class="post-content">
                                <p class="mb-0 fs-16 fw-normal text-ash">{!! substr(strip_tags($item['content']),0, 150).'...'!!}</p>
                                </div>
                                <!-- /.post-content -->
                            </div>
                            <!--/.card-body -->
                            <div class="card-footer p-4">
                                <ul class="post-meta mb-0">
                                  <li class="post-date fs-12"><i class="uil uil-calendar-alt"></i><span>{{$item['tgl_publish']}}</span></li>
                                  <li class="post-comments fs-12"><i class="uil uil-user"></i><span> {{$item['Author']}}</span></li>
                                </ul> 
                                <!-- /.post-meta -->
                            </div>
                            <!-- /.card-footer -->
                            </div>
                            <!-- /.card -->
                        </article>
                        <!-- /.post -->
                    </div>
                @endforeach
                @endif
                </div>
            </div>
            <!-- /.blog -->
              <!-- /.pagination -->
            <nav class="d-flex d-flex justify-content-center" aria-label="pagination">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="{{url('Media/list-artikel/1')}}" aria-label="Previous">
                    <span aria-hidden="true"><<</span>
                  </a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="{{url('Media/list-artikel/'.($currentPage - 1))}}" aria-label="Previous">
                    <span aria-hidden="true"><i class="uil uil-arrow-left"></i></span>
                  </a>
                </li>
                              <li  class="page-item disabled">
                  <a class="page-link" href="{{url('Media/list-artikel/'.($currentPage + 1))}}" aria-label="Next">
                    <span aria-hidden="true"><i class="uil uil-arrow-right"></i></span>
                  </a>
                </li>
                <li class="page-item disabled">
                  <a class="page-link" href="{{url('Media/list-artikel/'.$totalPages)}}" aria-label="Next">
                    <span aria-hidden="true">>></span>
                  </a>
                </li>
              </ul>
              <!-- /.pagination -->
            </nav>
            <!-- /nav -->
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
  </div>
  <!-- /.content-wrapper -->
    </div>

@endsection