@extends('front.layout')
@section('title', 'Detail Informasi')
@section('konten')

<style>
    .title:after {
        content: "";
        height: 2px;
        left: 15px;
        position: absolute;
        width: 100px;
        background: #1d0fe0;
        top: 30px;
    }
</style>
<style>
    .title1:after {
        content: "";
        height: 2px;
        left: 15px;
        position: absolute;
        width: 100px;
        background: #1d0fe0;
        top: 390px;
    }
</style>
<!-- START SECTION BANNER -->
<section class="breadcrumb_section bg_gray overlay_bg_blue_90" style="background: url({{asset('assets')}}/images/bg.jpg); background-position: center; padding-top:120px; background-repeat:no-repeat; background-size:cover">
	<div class="container">
    	<div class="row">
        	<div class="col-sm-6">
            	<div class="page-title">
            		<h1 style="color: #fff; font-family: 'Otomanopee One', sans-serif;">Detail Informasi</h1>
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb justify-content-sm-end">
                    <li class="breadcrumb-item"><a href="/" style="color: #fff">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page" style="color: #fff">Detail Informasi</li>
                  </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- END SECTION BANNER --> 

<!-- START SECTION BLOG -->
<section>
	<div class="container">
    	<div class="row">
        	<div class="col-lg-9">
            	<div class="row animation" data-animation="fadeInUp" data-animation-delay="0.04s">
            <div class="col-lg-12 col-sm-12" >
                <div class="icon_box icon_box_style_2" style="border-radius: 30px; box-shadow: 1px 2px 18px #27e27873;">
                    <div class="icon_box_content">
                        <h4>{{$detailinformasi->judul_informasi}}</h4>
                        <p><span class="text_default"><small style="color: #333;"> <i class="ion-calendar"></i> {{ date('d-m-Y H:i:s', strtotime($detailinformasi->tanggal_informasi)) }} <br> <i class="fa fa-user"></i> {{$detailinformasi->name}}</small></span>
                                    </p>
                        <hr style="width:100%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#27e278">
                        <p>{!! html_entity_decode($detailinformasi->keterangan_informasi) !!}</p>
                    </div>
                </div>
            </div>
        </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-4" style="position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; height: 700px; top: 150px; bottom: auto;">
            	<div class="sidebar">
                	<div class="widget">
                    	<h5 class="widget_title">Berita Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#27e278">
                        <ul class="recent_post border_bottom_dash list_none">
                            @foreach ($beritaterkait as $item)    
                                <li>
                                    <div class="post_footer">
                                        <div class="post_img">
                                            <a href="/detail_berita/{{$item->id_berita}}"><img style="width: 80px" src="{{asset('foto berita')}}/{{$item->gambar_berita}}" alt="letest_post1"></a>
                                        </div>
                                        <div class="post_content">
                                            <h6><a href="/detail_berita/{{$item->id_berita}}">{{ \Illuminate\Support\Str::words(strip_tags($item->judul_berita), 5, $end = '...') }}</a></h6>
                                            <p class="small m-0">{{ date('d-m-Y H:i:s', strtotime($item->tanggal_berita)) }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                    	</ul>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
@endsection
<!-- END SECTION BLOG -->