@extends('layouts.webdes')

@push('style')
    <style>
        img {
            display:block; 
            margin: 0 auto;
            border-radius: 5%;
        }
    </style>
@endpush

@section('main')

<div class="container single-post">
    <div class="row main-content">
        <div class="col-lg-8 js-demo-content-area">
            <article class="single-post-card">
                <figure class="single-post-img-container ratio-16-9">
                    <img loading="lazy"
                        srcset="{{ asset('storage/'.$post->image) }}"
                        alt="{{ $post->title }}">
                </figure>
                <header class="single-post-header">
                    {{-- <div class="tag-list">
                        <a href="../tag/food/index.html"><span class="tag-accent"
                                style="background: #B43ADF;"></span>Food</a>
                    </div> --}}
                    <h4 class="post-title">
                        {{ $post->title }}
                    </h4>
                    <div class="post-meta text-s">
                        <span class="post-author">

                            <svg>
                                <use xlink:href="#i-user"></use>
                            </svg><a href="#">{{ $post->author->name }}</a>
                        </span>
                        <time class="post-date" datetime="2022-05-02">
                            <svg>
                                <use xlink:href="#i-calendar"></use>
                            </svg>{{ \Carbon\Carbon::parse($post->created_at)->translatedFormat('F d, Y') }}
                        </time>
                    </div>
                </header>
                <div class="single-post-content" style="font-size: 80%">
                    {!! $post->content !!}
                </div>
            </article>
            <div class="share-wrap">
                <div class="share-title h4 text-center">Bagikan Berita :</div>
                <div class="share-links flex justify-center">
                    <a class="facebook"
                        href="https://www.facebook.com/sharer/sharer.php?u=https://{{ strtolower(getDesaName($data->id)) }}-{{ strtolower(App\Models\Kecamatan::first()->nama_kecamatan) }}.sistekdes.id{{ '/read/'.$post->slug }}"
                        onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"
                        title="Share on Facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                            height="24">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z" />
                            </svg></a>
                    <a class="twitter"
                        href="https://twitter.com/share?text={{ str_replace(' ', '%20', $post->title); }}&amp;url=https://{{ strtolower(getDesaName($data->id)) }}-{{ strtolower(App\Models\Kecamatan::first()->nama_kecamatan) }}.sistekdes.id{{ '/read/'.$post->slug }}"
                        onclick="window.open(this.href, 'twitter-share', 'width=580,height=296');return false;"
                        title="Share on Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                            height="24">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
                            </svg></a>
                    <a class="whatsapp"
                        href="whatsapp://send?text=https://{{ strtolower(getDesaName($data->id)) }}-{{ strtolower(App\Models\Kecamatan::first()->nama_kecamatan) }}.sistekdes.id{{ '/read/'.$post->slug }}"
                        data-action="share/whatsapp/share"
                        onclick="window.open(this.href, 'linkedin-share', 'width=580,height=296');return false;"
                        title="Share on Whatsapp"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                            height="24">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M2.004 22l1.352-4.968A9.954 9.954 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.004 22zM8.391 7.308a.961.961 0 0 0-.371.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.729 2.729 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.971 2.742.214.213.423.427.648.626a9.448 9.448 0 0 0 3.84 2.046l.569.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231c.166-.088.244-.132.383-.22 0 0 .043-.028.125-.09.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.401-.621a.498.498 0 0 0-.177-.041.482.482 0 0 0-.378.127v-.002c-.005 0-.072.057-.795.933a.35.35 0 0 1-.368.13 1.416 1.416 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.109l-.005-.002a6.01 6.01 0 0 1-1.57-1c-.126-.11-.243-.23-.363-.346a6.296 6.296 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41a4.38 4.38 0 0 0 .263-.373c.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004z" />
                            </svg></a>
                    <a class="mail"
                        href="mailto:?subject={{ str_replace(' ', '%20', $post->title); }}&amp;body=https://{{ strtolower(getDesaName($data->id)) }}-{{ strtolower(App\Models\Kecamatan::first()->nama_kecamatan) }}.sistekdes.id{{ '/read/'.$post->slug }}"
                        title="Send via email" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24" width="24" height="24">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z" />
                            </svg></a>

                </div>
                <div class=" notification js-notification-copy-link text-center">
                    <a class="notification-close" href="javascript:;" aria-label="close notification"><span
                            class="close-icon"><svg>
                                <use xlink:href="#i-close"></use>
                            </svg></span></a>
                    <span>The link has been Copied to clipboard!</span>
                </div>
            </div>
            @php
                $newer_id = $header->where('id', '>', $post->id)->min('id');
                $older_id = $header->where('id', '<', $post->id)->max('id');
                $newer = $header->where('id',  $newer_id)->first();
                $older = $header->where('id',  $older_id)->first();
            @endphp
            <div class="row prev-next-wrap">
                @if ($older != NULL)
                <div class="col-md-6">
                    <div class="next-post">
                        <div class="nav-text">Sebelumnya</div>
                        <article class="post-small flex">
                            <div class="post-img-container">
                                <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$older->slug]) }}"
                                    class="post-img-wrap">
                                    <img src="{{ asset('storage/'.$older->image) }}"
                                        alt="Never let your memories be greater than your dreams" loading="lazy">
                                </a>
                            </div>
                            <div class="post-info-wrap">
                                <h3 class="post-title h5">
                                    <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$older->slug]) }}">{{ $older->title }}</a>
                                    </h2>
                            </div>
                        </article>
                    </div>
                </div>
                @endif
                @if ($newer != NULL)
                <div class="col-md-6">
                    <div class="prev-post">
                        <div class="nav-text">Selanjutnya</div>
                        <article class="post-small flex">
                            <div class="post-img-container">
                                <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$newer->slug]) }}"
                                    class="post-img-wrap">
                                    <img src="{{ asset('storage/'.$newer->image) }}"
                                        alt="Self-observation is the first step of inner unfolding" loading="lazy">
                                </a>
                            </div>
                            <div class="post-info-wrap">
                                <h3 class="post-title h5">
                                    <a href="{{ route('webdes.artikelDetail', ['desa'=>$nama_desa,'slug'=>$newer->slug]) }}">{{ $newer->title }}</a>
                                    </h2>
                            </div>
                        </article>
                    </div>
                </div>
                @endif
                
            </div>
        </div>
        <div id="load-more"></div>
        @include('components.webdes.sidebar')

        @endsection