@extends('frontend.layouts.app')
 @section('content')
 <div id="rev_slider_wrapper" class="slider-container rev_slider_wrapper rev_container_1 fullwidthbanner-container" data-alias="classicslider1" style="margin-bottom: -1rem;">
     <div id="rev_slider" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
         <ul>
             <li data-index="rs-1" data-transition="slideoverup" data-slotamount="7" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="1200" data-thumb="{{asset('assets/images/banner.jpg')}}" data-rotate="0" data-saveperformance="off" data-title="Bold">
                 <img src="{{asset('assets/images/banner.jpg')}}" width="1280" height="633" alt="Slider bg 1" data-bgposition="center center" data-duration="11000" data-ease="Linear.easeNone" class="rev-slidebg" data-no-retina>
                 <div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-0" id="slide-1-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="full" data-height="full" data-whitespace="nowrap" data-transform_idle="o:0.5;" data-transform_in="opacity:0;s:1500;" data-transform_out="o:0;s:1000;" data-start="1000" data-basealign="slide" data-responsive_offset="on" data-responsive="off" style="z-index: 5; background-color: rgba(0,0,0, 0.5);">
                 </div>
                 <div class="tp-caption tp-resizeme rs-parallaxlevel-0" id="slide-1-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-80','-60','-50','-38']" data-fontsize="['100','100','100','100']" data-fontweight="700" data-lineheight="['220','170','150','100']" data-width="none" data-color="#fff" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="800" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-elementdelay="0.1" style="z-index: 5; white-space: nowrap;text-shadow:0 3px 8px rgba(0,0,0, 0.35);">Pemadam Kebakaran.
                 </div>
                 <div class="tp-caption tp-resizeme rs-parallaxlevel-0" id="slide-1-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['35','35','35','25']" data-width="none" data-height="none" data-color="#fff" data-fontsize="['42','36','28','22']" data-fontweight="300" data-lineheight="['42','36','28','22']" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="1300" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; white-space: nowrap;">Kota Makassar
                 </div>
             </li>

         </ul>
         <div class="tp-bannertimer" style="height: 5px; background-color: rgba(255, 255, 255, 0.5);"></div>
     </div><!-- End #rev_slider -->
 </div><!-- END REVOLUTION SLIDER -->
 <div class="container-fluid" style="background-color: #FFFFFF;">
     <h2 class="title custom text-center" style="margin-top: 2rem;">Berita</h2>
     <!-- <div class="text-center">
         <ul id="portfolio-filter">
             <li class="active"><a href="#" data-filter="*">All</a></li>
             <li><a href="{{route('berita.index')}}">Berita Utama</a></li>
             <li><a href="{{route('berita.index')}}">Berita Lainnya</a></li>
         </ul>
     </div> -->
     <div class="swiper-container latest-news-carousel">
         <div class="swiper-wrapper">
             @foreach ($berita as $b)
             <div class="swiper-slide">
                 <article class="entry entry-grid">
                     <div class="entry-media">
                         <figure>
                             <a href=""><img src="{{asset('uploads/foto_berita/'.$b->gambar)}}" style="height:150px !important" alt="Post image"></a>
                         </figure>
                     </div>
                     <div class="entry-content-container">
                         <div class="entry-meta">
                             <div><i class="fa fa-calendar"></i>{{$b->tanggal}},{{$b->jam}}</div>
                             <div><a href="#"><i class="fa fa-eye"></i>{{$b->dibaca}} View(s)</a></div>
                         </div><!-- End .entry-meta -->

                         <div class="entry-content-wrapper">
                             <h2 class="entry-title"><a href="{{route('beritapage.detail',$b->judul_seo)}}">{{$b->judul}}</a></h2>
                             <div class="entry-content">
                                 <p>{!! \Illuminate\Support\Str::limit($b->isi_berita,80)!!}</p>
                                 <a href="{{route('beritapage.detail',$b->judul_seo)}}" class="readmore">Read more<i class="fa fa-angle-right"></i></a>
                             </div><!-- End .entry-content -->
                         </div><!-- End .entry-content-wrapper -->
                     </div><!-- End .entry-content-container -->
                 </article>
             </div>
             @endforeach
             <!-- End .swiper-slide -->
         </div><!-- End .swiper-wrapper -->

         <div class="swiper-pagination"></div>
     </div>
     <div class="text-center">
         <a href="{{route('beritapage.index')}}" class="btn btn-primary mb20 mt10" style="border-radius: 30px !important;width:250px !important">Selengkapnya</a>
     </div>
 </div>
 <div class="mb50 mb25-sm mb15-xs"></div>
 <div class="container-fluid">
     <div class="row" style="margin-bottom: 3rem;">
         <div class="col-md-6 ">
             <h3 class="title custom">Pengumuman </h3>

             <div class="swiper-container testimonials-box-carousel-small text-center">
                 <div class="swiper-wrapper">
                     @foreach ($pengumuman as $p)
                     <div class="swiper-slide">
                         <article class="entry entry-grid">
                             <div class="entry-media">
                                 <figure>
                                     <a href="{{asset('uploads/foto_berita/'.$p->gambar)}}"><img src="{{asset('uploads/foto_berita/'.$p->gambar)}}" alt="Post image"></a>
                                 </figure>
                             </div><!-- End .entry-media -->
                             <!-- 
                                <div class="entry-icon">
                                    <i class="fa fa-file-image-o"></i>
                                </div> -->

                             <div class="entry-content-container">
                                 <div class="entry-meta">
                                     <div><i class="fa fa-calendar"></i>{{$p->tanggal}},{{$p->jam}}</div>
                                     <div><a href="#"><i class="fa fa-eye"></i>{{$p->dibaca}} View(s)</a></div>
                                 </div><!-- End .entry-meta -->

                                 <div class="entry-content-wrapper">
                                     <h2 class="entry-title"><a href="{{route('pengumuman.detail',$p->judul_seo)}}">{{$p->judul}}</a></h2>
                                     <div class="entry-content">
                                         <!-- <p>{!! \Illuminate\Support\Str::limit($p->isi_berita,100)!!}</p> -->
                                         <a href="{{route('pengumuman.detail',$p->judul_seo)}}" class="readmore">Read more<i class="fa fa-angle-right"></i></a>
                                     </div><!-- End .entry-content -->
                                 </div><!-- End .entry-content-wrapper -->
                             </div><!-- End .entry-content-container -->
                         </article>
                     </div>
                     @endforeach
                 </div><!-- End .swiper-wrapper -->

                 <div class="swiper-pagination"></div>
                 <a href="{{route('pengumuman')}}" class="btn btn-primary float-center mb20 mt10 " style="border-radius: 30px !important;width:250px !important">Selengkapnya</a>
             </div><!-- End .clients-carousel -->
         </div><!-- End .col-md-6 -->

         <div class="clearfix mb25 visible-xs visible-sm"></div><!-- margin -->

         <div class="col-lg-6 col-md-6">
             <h3 class="title custom">Video</h3>

             <div class="row">
             
                 <div class="col-lg-12 col-md-12 ">
                     <div class="panel panel-default shadow-lg">
                         <div class="panel-body text-center">
                             {!! $link->youtube !!}
                         </div>
                     </div>
                 </div>
              
             </div>
             <!-- End .swiper-slide -->
         </div><!-- End .swiper-wrapper -->

         <!-- End .swiper-pagination -->
     </div><!-- End .clients-carousel -->
 </div><!-- End .col-md-6 -->
 <div class="mb50 mb25-sm mb15-xs"></div>
 <div class="bg-wrapper pt60 pb40 pt50-sm" style="margin-top: -4rem;background-color: #FFFFFF !important;">
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-6 ">
                 <h3 class="title custom mb30">Agenda DAMKAR</h3>

                 <div class="swiper-container testimonials-box-carousel-small text-center">
                     <div class="swiper-wrapper">
                         @foreach ($agenda as $a)
                         <div class="swiper-slide">
                             <article class="entry entry-grid">

                                 <div class="entry-content-container">
                                     <div class="entry-meta">
                                         <div><i class="fa fa-calendar"></i>{{$a->tgl_mulai}} s/d {{$a->tgl_selesai}}</div>

                                     </div><!-- End .entry-meta -->

                                     <div class="entry-content-wrapper">
                                         <h2 class="entry-title"><a href="{{route('agenda.detail',$a->tema_seo)}}">{{$a->tema}}</a></h2>
                                         <div class="entry-content">
                                             <p>{!!\Illuminate\Support\Str::limit($a->isi_agenda,100)!!}</p>

                                         </div><!-- End .entry-content -->
                                     </div><!-- End .entry-content-wrapper -->
                                 </div><!-- End .entry-content-container -->
                             </article>
                         </div><!-- End .swiper-slide -->
                         @endforeach

                     </div><!-- End .swiper-wrapper -->

                     <div class="swiper-pagination"></div>
                     <a href="{{route('agenda')}}" class="btn btn-primary mb20 mt10" style="border-radius: 30px !important;width:250px !important">Selengkapnya</a>
                 </div><!-- End .swiper-wrapper -->

                 <!-- End .swiper-pagination -->
             </div>
             <!-- End .col-md-6 -->

             <!-- <div class="mb35 clearfix visible-sm visible-xs"></div> -->

             <div class="col-md-6">
                 <h3 class="title custom ">Sambutan</h3>
                 <div class="row row-sm custom-gallery">
                     <article class="entry entry-grid">
                         <div class="entry-content-container">
                             <div class="entry-content-wrapper">
                                 <div class="row">
                                     <div class="col-xs-6">
                                         <div class="mt20"></div><!-- margin -->

                                         <p>"{{$sambutan->keterangan}}"</p>
                                     </div><!-- End .col-xs-4 -->

                                     <div class="col-xs-6">
                                         <div class="mt20"></div><!-- margin -->

                                         <a class="custom-link" href="{{asset('uploads/foto_pimpinan/'.$sambutan->favicon)}}" data-thumb="{{asset('uploads/foto_pimpinan/'.$sambutan->favicon)}}">
                                             <img src="{{asset('uploads/foto_pimpinan/'.$sambutan->favicon)}}" alt="Item">
                                         </a>
                                     </div>
                                 </div>

                             </div><!-- End .entry-content-wrapper -->
                         </div><!-- End .entry-content-container -->
                     </article>
                     <!-- End .col-xs-4 -->
                 </div>

             </div><!-- End .col-md-6 -->
         </div><!-- End .row -->

         <!-- margin -->
     </div><!-- End .container-fluid -->
 </div>
 <div class="mb50 mb25-sm mb15-xs"></div>
 <div class="container-fluid text-center">
     <h2 class="title custom text-center">Galeri Kegiatan</h2>
 </div>
 <div class="container-fluid">
     <div class="portfolio-row">
         <div id="portfolio-item-container" class="popup-gallery max-col-4" data-layoutmode="fitRows">
             @foreach ($gambar as $g)
             <div class="portfolio-item web-design wordpress">
                 <figure>
                     <img src="{{asset('uploads/foto_galeri/'.$g->gbr_gallery)}}" alt="Portfolio Name">
                     <figcaption>
                         <a href="{{asset('uploads/foto_galeri/'.$g->gbr_gallery)}}" data-thumb="{{asset('uploads/foto_galeri/'.$g->gbr_gallery)}}" class="zoom-btn"><i class="fa fa-search"></i></a>
                     </figcaption>
                 </figure>
                 <div class="portfolio-meta">
                     <h3 class="portfolio-title"><a href="#" title="Portfolio name">{{$g->jdl_gallery}}</a></h3>
                 </div>
             </div>
             @endforeach


         </div>
         <div class="text-center">
             <a href="{{route('galerigambar.page')}}" class="btn btn-primary mb20 mt10" style="border-radius: 30px !important;width:250px !important">Selengkapnya</a>
         </div>
     </div>

 </div>
 <div class="callout custom mb0" style="background-color: #EA5833 !important;">
     <div class="container-fluid">
         <div class="left">
             <h3 class="callout-title">DAMKAR Kota Makassar</h3>
         </div>

     </div>
 </div>
 @endsection