@extends('layouts.webTekdes')
@include('components.webTekdes.header')


<header class="pageMainHead d-flex position-relative bgCover w-100 text-white" style="background-image: url('{{ asset('webTekdes/images/img86.jpg') }}');">
    <div class="alignHolder d-flex w-100 align-items-center">
        <div class="align w-100 position-relative">
            <div class="container">
                <h1 class="text-white mb-2">{{ $data['read']->title }}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrWhite rounded-0 border-0 p-0 fontAlter mb-0">
                        <li class="breadcrumb-item"><a href="home.html">Home</a></li>
                        <li class="breadcrumb-item"><a href="newsClassic.html">Artikel</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $data['read']->title }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</header>
<article class="newsSingleWrap pt-7 pb-2 pt-md-9 pb-md-4 pt-lg-14 pb-lg-8 pt-xl-22 pb-xl-13">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 col-xl-9 mb-6">
                <div class="pr-xl-14">
                    <div class="imgHolder mb-4 mb-md-8 position-relative">
                        <div class="">
                            <div>
                                <div class="imgWrap">
                                    <img src="{{ asset('storage/'.$data['read']->image) }}" class="img-fluid w-100" alt="image description">
                                </div>
                            </div>
                        </div>
                    </div>
                    <header class="nrcHead">
                        <strong class="d-block fwMedium title mb-1">
                            <i class="icnTheme fwMedium icomoon-clock"><span class="sr-only">icon</span></i>
                            <time datetime="2011-01-12">{{ \Carbon\Carbon::parse($data['read']->created_at)->translatedFormat('F d, Y') }}</time>
                            - 
                            <a href="javascript:void(0);" class="text-lDark">{{ $data['read']->category }}</a>
                            Oleh
                            <a href="javascript:void(0);" class="text-lDark">{{ $data['read']->author->name }}</a>
                            &nbsp;&nbsp;
                            {{-- <i class="icomoon-chat icn"><span class="sr-only">icon</span></i>
                            3 --}}
                        </strong>
                        <h2 class="h2vii fwSemiBold mb-5">{{ $data['read']->title }}</h2>
                    </header>
                    {!! $data['read']->content !!}
                    <div class="newsTagWrap text-center text-sm-left d-sm-flex mt-11 mb-10 align-items-sm-center justify-content-sm-between justify-content-center">

                        <div class="saShareAside text-center d-sm-flex align-items-center justify-content-center justify-content-end">
                            <strong class="d-block text-lDark  font-weight-normal fontAlter title mb-2">Share</strong>
                            <ul class="list-unstyled socialNetworks saSocialNetworks d-flex flex-wrap justify-content-center mb-0">
                                <li>
                                    <a href="javascript:void(0);" class="facebook">
                                        <i class="fab fa-facebook-square" aria-hidden="true"><span class="sr-only">facebook</span></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="twitter">
                                        <i class="fab fa-twitter" aria-hidden="true"><span class="sr-only">twitter</span></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="pinterest">
                                        <i class="fab fa-pinterest" aria-hidden="true"><span class="sr-only">pinterest</span></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="linkedin">
                                        <i class="fab fa-linkedin-in" aria-hidden="true"><span class="sr-only">linkedin-in</span></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <nav class="postNavigatorNav border-0 position-relative mb-2 mb-md-6 mb-lg-10 mb-xl-13 px-10 px-md-14 px-xl-18">
                            @if ($data['prev'] != null)
                        <a href="{{ route('teknologiDesa.read', $data['prev']->slug ) }}" class="btnPrev flex-shrink-0 d-flex position-absolute align-items-center justify-content-center" style="background-image: url('{{ asset('storage/'.$data['prev']->image) }}');">
                            <i class="fas fa-chevron-left" aria-hidden="true"><span class="sr-only">icon</span></i>
                        </a>
                            @endif
                        <ul class="list-unstyled mb-0 pnnPaginList d-flex fontAlter justify-content-between">
                                                        <li>
                            @if ($data['prev'] != null)
                                <a class="text-uppercase" href="{{ route('teknologiDesa.read', $data['prev']->slug ) }}">Previous</a>
                                <strong class="h4 d-none d-sm-block fwSemiBold mb-0">
                                    <a href="{{ route('teknologiDesa.read', $data['prev']->slug ) }}">{{ $data['prev']->title }}</a>
                                </strong>
                            @endif
                                                        </li>
                            @if ($data['next'] != null)
                            <li>
                                <a class="text-uppercase" href="{{ route('teknologiDesa.read', $data['next']->slug) }}">Next</a>
                                <strong class="h4 d-none d-sm-block fwSemiBold mb-0">
                                    <a href="{{ route('teknologiDesa.read', $data['next']->slug) }}">{{ $data['next']->title }}</a>
                                </strong>
                            </li>
                            @endif
                        </ul>
                            @if ($data['next'] != null)
                        <a href="{{ route('teknologiDesa.read', $data['next']->slug) }}" class="btnNext flex-shrink-0 d-flex position-absolute align-items-center justify-content-center" style="background-image: url('{{ asset('storage/'.$data['next']->image) }}');">
                            <i class="fas fa-chevron-right" aria-hidden="true"><span class="sr-only">icon</span></i>
                        </a>
                            @endif
                    </nav>
                    {{-- <div class="commentFormWrap">
                        <h2 class="fwSemiBold h2vii mb-6">Tulis Komentar Anda</h2>
                        <form action="#" class="commentForm">
                            <div class="row mx-n2">
                                <div class="col-12 px-2">
                                    <div class="form-group">
                                        <textarea class="form-control w-100 d-block" placeholder="Tulis Komentar&hellip;"></textarea>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 px-2">
                                    <div class="form-group">
                                        <input type="text" class="form-control d-block w-100" placeholder="Nama">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 px-2">
                                    <div class="form-group">
                                        <input type="email" class="form-control d-block w-100" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btnTheme d-flex font-weight-bold text-capitalize position-relative border-0 p-0 mt-2 btnWidthSmall" data-hover="Kirim">
                                <span class="d-block btnText">Kirim Komentar</span>
                            </button>
                        </form>
                    </div> --}}
                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-3 mb-6">
                <aside class="dscSidebar pt-1 ml-xl-n5">
                    <aside class="sidebar">
                        <section class="widget widgetSearch mb-6 mb-lg-10">
                            <form action="#" class="searchForm">
                                <div class="input-group">
                                    <input type="search" class="form-control" placeholder="Search Here…">
                                    <div class="input-group-append">
                                        <button class="btn btnTheme btnNoOver d-flex align-items-center justify-content-center" type="button">
                                            <i class="icomoon-search"><span class="sr-only">search</span></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </section>
                        <nav class="widget widgetArchiveList mb-6 mb-lg-10">
                            <h3 class="fwMedium mb-5">Kategori</h3>
                            <ul class="list-unstyled pl-0">
                                @foreach ($data['category'] as $item)
                                <li>
                                    <a href="javascript:void(0);">{{ $item->category }}</a>
                                </li>
                                @endforeach
                            </ul>
                        </nav>
                        <nav class="widget widgetUpcoming mb-6 mb-lg-10">
                            <h3 class="fwMedium mb-5">Artikel Terbaru</h3>
                            <ul class="list-unstyled pl-0 mb-7">
                                @foreach ($data['latest_article'] as $item)
                                <li>
                                    <div class="imgHolder flex-shrink-0 mr-4 mt-1">
                                        <img src="{{ asset('storage/'.$item->image) }}" class="img-fluid" alt="image description">
                                    </div>
                                    <div class="descrWrap">
                                        <h4 class="fwMedium mb-1">
                                            <a href="{{ route('teknologiDesa.read', $item->slug) }}">{{ $item->title }}</a>
                                        </h4>
                                        <time datetime="2011-01-12" class="d-block"><i class="icomoon-clock icn mr-1"><span class="sr-only">icon</span></i>{{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('d F Y') }}</time>
                                    </div>
                                </li>
                                @endforeach                                
                            </ul>
                        </nav>
                        <section class="widget widgetGallery mb-6 mb-lg-10">
                            <h3 class="fwMedium mb-5">Galeri Foto</h3>
                            <ul class="list-unstyled pl-0 d-flex flex-wrap">
                                @foreach ($data['gallery'] as $item)
                                <li>
                                    <a href="{{ asset('storage/'.$item->image) }}" class="lightbox" data-fancybox="true">
                                        <img src="{{ asset('storage/'.$item->image) }}" class="img-fluid" alt="image description">
                                    </a>
                                </li>
                                @endforeach
                                
                            </ul>
                        </section>
                        <section class="widget widgetTags mb-6 mb-lg-10">
                            <h3 class="fwMedium mb-5">Tags</h3>
                            <ul class="list-unstyled pl-0 d-flex flex-wrap fontAlter">
                            @php
                                $tags = $data['read']->tags;
                                $tag = explode(',', $tags)
                            @endphp
                            @foreach ( $tag as $item)
                                <li>
                                    <a href="javascript:void(0);">{{ $item }}</a>
                                </li>   
                            @endforeach
                            </ul>
                        </section>
                        {{-- <article class="widget widgetVote bgCover py-9 px-6" style="background-image: url('{{ asset('webTekdes/images/bg02.png') }}');">
                            <h3 class="h3Large">Apakah anda menyukai artikel ini?</h3>
                            <a href="javascript:void(0);" class="btn btnDarkAlter text-capitalize btn-sm mt-2 position-relative border-0 p-0" data-hover="Sukai">
                                <span class="d-block btnText">Ya</span>
                            </a>
                        </article> --}}
                    </aside>
                </aside>
            </div>
        </div>
    </div>
</article>