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

    @if (!empty($detailartikel))
    @foreach ($detailartikel as $item)
    <section class="wrapper bg-soft-primary">
      <div class="container pt-10 pb-19 pt-md-14 pb-md-20 text-center">
        <div class="row">
          <div class="col-md-10 col-xl-8 mx-auto bg-pattern3">
            <div class="post-header">
              <div class="post-category text-line">
                <a href="{{url('list-artikel')}}" class="hover" rel="category">Artikel</a>
              </div>
              <!-- /.post-category -->
              <h1 class="display-1 mb-4">{{ $item['title']}}</h1>
              <ul class="post-meta mb-5">
                <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ $item['tgl_publish']}}</span></li>
                <li class="post-author"><i class="uil uil-user"></i><span>By {{ $item['Author']}}</span></li>
              </ul>
              <!-- /.post-meta -->
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    
    <section class="wrapper bg-light">
      <div class="container pb-14 pb-md-16">
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <div class="blog single mt-n17">
              <div class="card">
                <figure class="card-img-top"><img class="w-100" src="{{ $intcms->url }}upload/{!! $item['lampiran'] !!}" loading="eager" alt="JAGOTI" /></figure>
                <div class="card-body">
                  <div class="classic-view">
                    <article class="post">
                      <div class="post-content mb-5">
                        <h2 class="h1 mb-4">{{ $item['title']}}</h2>
                        <p>{!! $item['content'] !!}</p>
                        <!-- /.row -->
                      </div>
                      <!-- /.post-content -->
                    </article>
                    <!-- /.post -->
                  </div>
                  <!-- /.classic-view -->
                
                  <hr />
                  <h3 class="mb-3 mt-4">Artikel</h3>
                  <div class="swiper-container blog grid-view mb-16" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
                    <div class="swiper">
                      <div class="swiper-wrapper">
                        @if (!empty($listartikel))
                        @foreach ($listartikel as $x)
                        <div class="swiper-slide">
                          <article>
                            <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="{{url('Media/detail-artikel').'/'.$x['slug_title']}}"> <img src="{{ $intcms->url }}upload/{!! $x['lampiran'] !!}" loading="eager" alt="JAGOTI"/></a>
                              <figcaption>
                                <h5 class="from-top mb-0">Selengkapnya</h5>
                              </figcaption>
                            </figure>
                            <div class="post-header">
                              <div class="post-category text-line">Artikel</div>
                              <!-- /.post-category -->
                              <h6 class="fw-bold mt-1 mb-3"><a class="link-dark" href="{{url('Media/detail-artikel').'/'.$x['slug_title']}}">{{$x['title']}}</a></h6>
                            </div>
                            <!-- /.post-header -->
                            <div class="post-footer">
                              <ul class="post-meta mb-0">
                                <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{$x['tgl_publish']}}</span></li>
                              </ul>
                              <!-- /.post-meta -->
                            </div>
                            <!-- /.post-footer -->
                          </article>
                          <!-- /article -->
                        </div>
                        <!--/.swiper-slide -->
                        @endforeach
                        @endif
                      </div>
                      <!--/.swiper-wrapper -->
                    </div>
                    <!-- /.swiper -->
                  </div>
                  <!-- /.swiper-container -->
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
            </div>
            <!-- /.blog -->
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    @endforeach
    @endif

@endsection