@extends('layouts.webdes')

@section('main')

<div class="container cover home-intro-one">
    <div class="row ">
        <div class="col-md-12">
            <div class="featured-slider">
                <article class="hero-post-card">
                    <div class="row">
                        @if ($hero != NULL)
                        <div class="col-md-7">
                            <div class="post-img-container">
                                <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$hero->slug]) }}" class="post-img-wrap">
                                    <img loading="lazy" srcset="{{ asset('storage/'.$hero->image) }}"
                                        sizes="(max-width: 472px) 400px, (max-width: 767px) 600px, (min-width: 768px) 400px, 400px"
                                        src="{{ asset('storage/'.$hero->image) }}" alt="{{ $hero->title }}">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="post-info-wrap">
                                <div class="tag-list">
                                    <a href="#"><span class="tag-accent" style="background: #1DBF2F;"></span>{{ $hero->tags }}</a>
                                </div>
                                <h4 class="post-title h4">
                                    <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$hero->slug]) }}">{{ $hero->title }}</a>
                                </h4>
                                <div class="post-excerpt">
                                    {!! $hero->content !!}
                                </div>
                                <div class="post-meta text-s">
                                    <time class="post-date" datetime="2022-05-02">
                                        <svg><use xlink:href="#i-calendar"></use></svg>{{ \Carbon\Carbon::parse($hero->created_at)->translatedFormat('F d, Y') }}
                                    </time>
                                </div>
                            </div>
                            <br>
                        </div>
                        @endif
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
@php
        $sosmed = json_decode($data->sosial_media, true);
        $yt = explode( '/', ($sosmed['youtube'] ?? 'data-null'));
@endphp
{{-- @if ($yt == "-" || $yt == NULL) --}}
<div class="container cover home-intro-two">
    <div class="row">
        <div class="col-1">&nbsp;</div>
        <div class="col-10">
            <figure class="kg-card kg-embed-card kg-card-hascaption" >
                <iframe width="480" height="270" src="https://www.youtube.com/embed/{{ end($yt) ?? '-' }}?feature=oembed" style="border-radius: 2%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            
                </iframe>
                <figcaption>&nbsp;</figcaption>
            </figure>
        </div>
    </div>
</div>
{{-- @endif --}}

<div class="container cover home-intro-three">
    <div class="welcome-card-personal flex align-center has-image">
        <div class="cover-image">
            <img loading="lazy"
            src="{{ asset('storage/'.($kades == NULL ? '' : $kades->image)) }}" alt=" cover">
        </div>
        <div class="welcome-card-content-wrap">
            <h1 class="intro-title">{{ ucwords(strtolower($data->kepala_desa)) }}</h1>
            <div class="intro-description">
                 <strong>{{ ucwords(strtolower(($kades == NULL ? 'Tidak Ada Data Kepala Desa' : $kades->jabatan))) }}</strong>
                <br>
                Selamat Datang di Website Resmi {{ $data->jenis }} {{ ucwords(strtolower($data->nama_desa)) }}
            </div>
        </div>
    </div>
</div>


<div class="container">
    <div class="row main-content ">
        <div class="col-lg-8 js-demo-content-area">
            <div class="js-post-list-wrap">
    @if ($data->quotes != NULL)
    <article class="post-card flex js-post-card">
        <blockquote style="font-size: 15px;"> <u>Pengumuman :</u> <br> {{ $data->quotes }}</blockquote>
    </article>
    @endif  
    @foreach ($berita as $item)
    <article class="post-card flex js-post-card">
        <div class="post-img-container">
            <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$item->slug]) }}" class="post-img-wrap">
                <img loading="lazy" srcset="{{ asset('storage/'.$item->image) }}"
                    sizes="(max-width: 472px) 400px, (max-width: 767px) 600px, (min-width: 768px) 400px, 400px"
                    src="{{ asset('storage/'.$item->image) }}" alt="{{ $item->title }}">
            </a>
        </div>
        <div class="post-info-wrap">
            <div class="tag-list">
                <a href="#"><span class="tag-accent" style="background: #1DBF2F;"></span>{{ $item->tags }}</a>
            </div>
            <h4 class="post-title">
                <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$item->slug]) }}">{{ $item->title }}</a>
            </h4>
            <div class="post-excerpt">
                {!! $item->content !!}
            </div>
            <div class="post-meta text-s">
                <time class="post-date" datetime="2022-05-02">
                    <svg><use xlink:href="#i-calendar"></use></svg>{{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('F d, Y') }}
                </time>
            </div>
        </div>
    </article>
    @endforeach
    
</div>
<div class="pagination-wrap text-center" id="pagination-wrap">
    <a href="{{ route('webdes.beritaDesa', ['desa'=>$nama_desa]) }}" class="btn post-load-button"><span>Lihat lebih banyak berita</span></a>
</div>
<div id="load-more"></div>            
</div>
@include('components.webdes.sidebar')

@endsection