@extends('template.master')
@section('body')

@section('title', 'Artikel')
@section('description', 'Semua Artikel Onebox Contact Center Omnichanel')

<!-- /header -->
<section class="atas-wrapper bg-soft-primary">
  <div class="container pt-10 pb-7 pt-md-10 pb-md-10 text-center">
    <div class="row">
      <div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
        <h1 class="display-1 mb-3">Artikel</h1>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center">
            <li class="breadcrumb-item"><a href="{{url('/')}}" title="Beranda">Beranda</a></li>
            <li class="breadcrumb-item"><a title="Artikel">Artikel</a></li>
          </ol>
        </nav>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

<!-- /header -->
<section class="berita d-lg-flex align-items-centerd-lg-flex align-items-center">
  <div class="container pt-3 pt-md-11">
    <div class="d-flex form-inputs">
      <input id="search" class="form-control" type="text" placeholder="Cari Artikel">
      <a id="btn-search"><i class="bx bx-search"></i></a>
    </div>
    <div class="row">
      @if (!empty($artikel))
      @foreach ($artikel as $item)
      <div class="col-lg-3 p-4">
        <div class="blog-item wow fadeInUp delay-0-4s">
          <figure class="card-img-top overlay overlay-1 hover-scale" style="height: 100%;">
            <a href="{{url('/detail-blog').'/'.$item['slug_title']}}" title="Artikel">
              <img src="https://cms.ciptadrasoft.com/upload/{!! $item['lampiran'] !!}" alt="">
              <span class="bgv"></span><span class="bg"></span></a>
            <figcaption>
              <h5 class="from-top mb-0">Baca Selengkapnya</h5>
            </figcaption>
          </figure>

          <div class="blog-content">
            <span class="tanggal"><i class="bx bx-calendar"></i>{!! $item['tgl_publish'] !!}</span>
            <div class="content">
              <h5 class="h5-artikel pt-0">
                <a href="{{url('/detail-blog').'/'.$item['slug_title']}}" title="Artikel">{!! substr(strip_tags( $item['title']),0, 40).'...'!!}</a>
              </h5>
              <p class="p-artikel">
                {!! substr(strip_tags($item['content']),0, 100).'...'!!}
              </p>
              {{-- <ul class="list-unstyled tag-list mb-0">
                                      <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill mb-0" style="padding: 5px 10px;font-size: 12px;">Still Life</a></li>
                                      <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill mb-0" style="padding: 5px 10px;font-size: 12px;">Urban</a></li>
                                      <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill mb-0" style="padding: 5px 10px;font-size: 12px;">Nature</a></li>
                                    </ul> --}}
            </div>
          </div>
        </div>
      </div>
      @endforeach
      @endif
    </div>

    <nav class="d-flex justify-content-center" aria-label="pagination">
      <ul class="pagination">
        @if ($page == '1')
        @else
                <li class="page-item disabled">
          <a class="page-link" href="?page={{$link_prev}}" aria-label="Previous">
            <span aria-hidden="true"><i class="uil uil-arrow-left"></i></span>
          </a>
        </li>
        @endif
        @if($jumlah_page > 1)
        @for ($i = $start_number; $i <= $end_number; $i++)  <li class="page-item {{$link_active}}">
          <a class="page-link" href="?page={{$i}}" title="Halaman">{{ $i }}</a></li>
          @endfor
          @endif
          @if($page == $jumlah_page)
          @else
                    <li class="page-item">
            <a class="page-link" aria-label="Next">
              <span aria-hidden="true"><i class="uil uil-arrow-right"></i></span>
            </a>
          </li>
          @endif
      </ul>
      <!-- /.pagination -->
    </nav>

  </div>


</section>


@endsection