@extends('front.layout')
@section('title', 'Galeri')
@section('konten')
    <!-- 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;">Galeri</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">Galeri
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <!-- END SECTION BANNER -->
    <style>
        .ag-label2 {
            position: absolute;
            top: -4px;
            overflow: hidden;
            height: 85px;
            width: 85px;
            text-align: center;
            z-index: 0;
            left: -4px;
        }

        .ag-label {
            font: 700 14px/12px "Roboto", sans-serif;
            color: #FFF;
            background: #1ae45d none repeat scroll 0% 0%;
            text-transform: uppercase;
            padding: 9px 0px 7px;
            text-shadow: 1px 1px rgb(0 0 0 / 24%);
            width: 130px;
            text-align: center;
            display: block;
            position: absolute;
            left: -33px;
            top: 16px;
            z-index: 1;
            transform: rotate(-45deg);
        }
    </style>
    <!-- START SECTION BLOG -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="grid_container gutter_medium work_col3 portfolio_gallery portfolio_style1 animation masonry"
                        data-animation="fadeInUp" data-animation-delay="0.04s">
                        @foreach ($menugaleri as $item)
                            <!-- START PORTFOLIO ITEM -->
                            <li class="grid_item web-design">
                                <div class="portfolio_item" style="box-shadow: 1px 1px 8px #11e49e;">
                                    <div class="ag-label2">
                                        <div class="ag-label">Galeri</div>
                                    </div>
                                    <a href="#" class="image_link">
                                        <img src="{{ asset('foto galeri') }}/{{ $item->gambar_galeri }}" alt="image"
                                            style="height: 300px">
                                    </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>
                                        <h5><a href="#" data-toggle="modal"
                                                data-target="#pr_modal">{{ \Illuminate\Support\Str::limit(strip_tags($item->judul_galeri), 30, $end = '...') }}</a>
                                        </h5>
                                        <p>{{ \Illuminate\Support\Str::limit(strip_tags($item->keterangan_galeri), 50, $end = '...') }}
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <!-- END PORTFOLIO ITEM -->
                        @endforeach
                    </ul>
                </div>
                <div class="col-xl-12" style="margin: 20px 0px">
                    {{ $menugaleri->links() }}
                    <hr>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="widget" style="margin-bottom:25px">
                            <h5 class="widget_title" style="margin-bottom: 0px">Berita Lainnya</h5>
                            <hr
                                style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                            <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 class="col-lg-4">
                    <div class="sidebar">
                        <div class="widget" style="margin-bottom:25px">
                            <h5 class="widget_title" style="margin-bottom: 0px">Gangguan Lainnya</h5>
                            <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                            <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>
                                            {{-- Status Badge --}}
                                            <div class="w-100" style="margin-top: 10px;">
                                                @if ($item->status == 'Selesai')
                                                    <span class="badge badge-success w-100" style="font-size: 12px;">Selesai</span>
                                                @elseif ($item->status == 'Proses Perbaikan')
                                                    <span class="badge badge-warning w-100" style="font-size: 12px;">Proses Perbaikan</span>
                                                @else
                                                    <span class="badge badge-secondary w-100" style="font-size: 12px;">{{ $item->status }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>    
                <div class="col-xl-4">
                    <div class="widget" style="margin-bottom:25px">
                        <h5 class="widget_title" style="margin-bottom: 0px">Galeri Lainnya</h5>
                        <hr
                            style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#5027e2">
                        <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:100px" 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>
    </section>
@endsection
<!-- END SECTION BLOG -->