@extends('front.layout')
@section('title', 'Gangguan')
@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>
    <link rel="image_src" href="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta itemprop="image" content="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta name="msapplication-TileImage" content="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta property="og:image" content="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta property="og:image:secure_url" content="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta property="og:image:width" content="1024" />
    <meta property="og:image:height" content="678" />
    <meta property="og:image:alt" content="{{ $detailgangguan->judul_gangguan }}" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:title" content="{{ $detailgangguan->judul_gangguan }}" />
    <meta property="og:description" content="{{ \Illuminate\Support\Str::words(strip_tags($detailgangguan->keterangan_gangguan), 30, $end = '...') }}" />
    <meta property="og:type" content="article" />
    <meta property="og:locale" content="id_ID" />
    <meta property="og:site_name" content="Official Website Desa" />
    <meta property="og:title" content="{{ $detailgangguan->judul_gangguan }}" />
    <meta property="og:url" content="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}" />
    <meta property="og:updated_time" content="{{$detailgangguan->tanggal_gangguan}}" />
    <meta property="article:published_time" content="{{$detailgangguan->tanggal_gangguan}}" />
    <meta property="article:modified_time" content="{{$detailgangguan->tanggal_gangguan}}" />
    <meta property="article:section" content="Gangguan Desa" />
    <meta property="article:section" content="Gangguan Desa" />
    <meta property="article:section" content="Gangguan Desa" />
    <meta property="twitter:partner" content="ogwp" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="{{ $detailgangguan->judul_gangguan }}" />
    <meta property="twitter:description" content="{{ \Illuminate\Support\Str::words(strip_tags($detailgangguan->keterangan_gangguan), 30, $end = '...') }}" />
    <meta property="twitter:url" content="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}" />
    <meta property="twitter:image" content="{{ asset('foto gangguan') }}/{{ $detailgangguan->gambar_gangguan }}" />
    <meta name="generator" content="WordPress 5.9.3" />
    <link rel="canonical" href="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}" />
    <link rel='shortlink' href="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}" />
    <link rel='stylesheet' id='addtoany-css' href="{{ asset('assets/share/css/addtoany.min.css?ver=1.16') }}" type='text/css' media='all' />
    <script type='text/javascript' id='addtoany-core-js-before'>
        window.a2a_config = window.a2a_config || {};
        a2a_config.callbacks = [];
        a2a_config.overlays = [];
        a2a_config.templates = {};
        a2a_localize = {
            Share: "Share",
            Save: "Save",
            Subscribe: "Subscribe",
            Email: "Email",
            Bookmark: "Bookmark",
            ShowAll: "Show all",
            ShowLess: "Show less",
            FindServices: "Find service(s)",
            FindAnyServiceToAddTo: "Instantly find any service to add to",
            PoweredBy: "Powered by",
            ShareViaEmail: "Share via email",
            SubscribeViaEmail: "Subscribe via email",
            BookmarkInYourBrowser: "Bookmark in your browser",
            BookmarkInstructions: "Press Ctrl+D or \u2318+D to bookmark this page",
            AddToYourFavorites: "Add to your favorites",
            SendFromWebOrProgram: "Send from any email address or email program",
            EmailProgram: "Email program",
            More: "More&#8230;",
            ThanksForSharing: "Thanks for sharing!",
            ThanksForFollowing: "Thanks for following!"
        };
    </script>
    <script type='text/javascript' async src="{{ asset('assets/share/js/page.js') }}" id='addtoany-core-js'></script>
    <script type='text/javascript' async src="{{ asset('assets/share/js/addtoany.min.js?ver=1.1') }}" id='addtoany-jquery-js'></script>
<!-- START SECTION BANNER -->
<section class="breadcrumb_section bg_gray overlay_bg_blue_90" style="background: url({{asset('assets')}}/images/gedungpdam.png); 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 Gangguan</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 Gangguan</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="single_post">
                    <div class="blog_img">
                        <a href="#">
                            <img src="{{asset('foto gangguan')}}/{{$detailgangguan->gambar_gangguan}}" alt="blog_img1" style="border-top-left-radius: 30px; border-top-right-radius: 30px">
                        </a>
                    </div>
                    <div class="blog_content" style="background-color: #27e27812; padding: 30px 10px 30px 10px; border-bottom: 4px solid #1d0fe0;">
                        <div class="blog_text">
                            <h3>{{$detailgangguan->judul_gangguan}}</h3>
                            <hr style="width:100%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#1d0fe0">
                            <p class="small m-0">
                                <ul class="list_none blog_meta">
                                    <li><a><i class="ion-calendar"></i>{{ date('d-m-Y H:i:s', strtotime($detailgangguan->tanggal_gangguan)) }}</a></li>
                                    <li><a><i class="fa fa-user"></i>{{ $detailgangguan->name }}</a>
                                    </li>
                                </ul>    
                            </p><br>
                            
                            <p style="text-align: justify; text-indent: 40px">{!! html_entity_decode($detailgangguan->keterangan_gangguan) !!}</p>
                        </div>
                        <div class="addtoany_share_save_container addtoany_content addtoany_content_bottom">
                            <div class="a2a_kit a2a_kit_size_32 addtoany_list"
                                data-a2a-url="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}"
                                data-a2a-title="{{ $detailgangguan->judul_gangguan }}">
                                <a class="a2a_button_facebook"
                                    href="https://www.addtoany.com/add_to/facebook?linkurl=https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}&amp;linkname={{ $detailgangguan->judul_gangguan }}"
                                    title="Facebook" rel="nofollow noopener" target="_blank">
                                </a>
                                <a class="a2a_button_twitter"
                                    href="https://www.addtoany.com/add_to/twitter?linkurl=https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}&amp;linkname={{ $detailgangguan->judul_gangguan }}"
                                    title="Twitter" rel="nofollow noopener" target="_blank">
                                </a>
                                <a class="a2a_button_email"
                                    href="https://www.addtoany.com/add_to/email?linkurl=https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}&amp;linkname={{ $detailgangguan->judul_gangguan }}"
                                    title="Email" rel="nofollow noopener" target="_blank">
                                </a>
                                <a class="a2a_button_whatsapp"
                                    href="https://www.addtoany.com/add_to/whatsapp?linkurl=https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}&amp;linkname={{ $detailgangguan->judul_gangguan }}"
                                    title="WhatsApp" rel="nofollow noopener" target="_blank">
                                </a>
                                <a class="a2a_button_instapaper"
                                    href="https://www.addtoany.com/add_to/instapaper?linkurl=https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}&amp;linkname={{ $detailgangguan->judul_gangguan }}"
                                    title="Instapaper" rel="nofollow noopener" target="_blank">
                                </a>
                                <a class="a2a_button_facebook_like addtoany_special_service" data-layout="button"
                                    data-href="https://tirtabahari.co.id/detail_gangguan/{{ $detailgangguan->id_gangguan }}">
                                </a>
                                <a class="a2a_dd addtoany_share_save addtoany_share"
                                    href="https://www.addtoany.com/share">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="col-lg-3 mt-lg-0 mt-4">
            	<div class="sidebar">
                	<div class="widget">
                    	<h5 class="widget_title">Gangguan Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#1d0fe0">
                        <ul class="recent_post border_bottom_dash list_none">
                            @foreach ($gangguanterkait as $item)    
                                <li>
                                    <div class="post_footer">
                                        <div class="post_img">
                                            <a href="/detail_gangguan/{{$item->id_gangguan}}"><img style="width: 80px" src="{{asset('foto gangguan')}}/{{$item->gambar_gangguan}}" alt="letest_post1"></a>
                                        </div>
                                        <div class="post_content">
                                            <h6><a href="/detail_gangguan/{{$item->id_gangguan}}">{{ \Illuminate\Support\Str::words(strip_tags($item->judul_gangguan), 5, $end = '...') }}</a></h6>
                                            <p class="small m-0">{{ date('d-m-Y H:i:s', strtotime($item->tanggal_gangguan)) }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                    	</ul>
                    </div>
                    <div class="widget">
                    	<h5 class="widget_title">Galeri Lainnya</h5>
                        <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; background-color:#1d0fe0; margin-bottom: 30px">
                        <ul class="grid_container gutter_medium work_col3 portfolio_gallery portfolio_style1 animation masonry" data-animation="fadeInUp" data-animation-delay="0.04s" style="margin-top: 20px">
                            @foreach ($galeriterkait as $item)
                            <!-- START PORTFOLIO ITEM -->
                            <li class="grid_item web-design">
                                <div class="portfolio_item" style="box-shadow: 1px 1px 8px #11a8e4;">
                                    <a href="#" class="image_link">
                                        <img src="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" alt="image" style="height:75px" class="d-none d-md-block">
                                        <img src="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" alt="image" class="d-sm-block d-md-none">
                                    </a>
                                        <div class="portfolio_content">
                                            <div class="link_container">
                                                <a href="{{asset('foto galeri')}}/{{$item->gambar_galeri}}" class="image_popup"><i class="ion-image"></i></a>
                                                <a href="/detail_galeri/{{$item->id_galeri}}" ><i
                                                    class="ion-eye" title="detail"></i></a>
                                            </div>
                                    </div>
                                </div>
                            </li>
                            <!-- END PORTFOLIO ITEM -->
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
@endsection
<!-- END SECTION BLOG -->