@extends('template_front.index')
<!-- @section('title','Welcome') -->
<!-- @section('description','Website Resmi Desa Nepo Barru Sulawesi Selatan') -->

@section('content')

    <section class="banner-section banner-one">
        <div class="banner-carousel owl-theme owl-carousel">
            <!-- Slide Item -->
            @foreach($berita_slider as $value)
            <div class="slide-item">
                <div class="image-layer" style="background-image: url({{asset(Storage::url($value->img))}});">
                </div>
                <div class="auto-container">
                    <div class="content-box">
                        <div class="content">
                            <div class="inner">
                                <div class="sub-title"><h2>>{!!str_limit(strip_tags($value->judul),50)!!}</h2></div>
                                    <br><br>{!!str_limit(strip_tags($value->isi_berita),200)!!}
                                <div class="link-box">
                                    <a href="{{url('berita/'.$value->slug)}}" class="thm-btn">Selengkapnya</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide Item -->
            @endforeach
        </div>
    </section>

        
    <section class="product-one">
        <div class="container">
            <div class="block-title text-center">
                <h4>Berita & Artikel</h4>
                <div class="leaf">
                    <img src="{{asset('assets/images/resources/leaf.png')}}" alt="">
                </div>
            </div>
            <div class="row">
                @foreach($berita as $value)
                <div class="col-xl-4 col-lg-4">
                    <div class="blog_one_single wow fadeInUp" data-wow-delay="{{$a=$a+300}}ms">
                        <div class="blog_one_image">
                            <div class="blog_image">
                                <img src="{{url(Storage::url($value->img))}}" width="100%"  alt="Blog One Image" onError="this.style.display='none';">
                                <div class="blog_one_date_box">
                                    <p>{{date('d-m-Y',strtotime($value->created_at))}}</p>
                                </div>
                            </div>
                            <div class="blog-one__content">
                                <ul class="list-unstyled blog-one__meta">
                                    <li><a href="#"><i class="far fa-user-circle"></i>{{$value->post_by}}</a></li>
                                   <!--  <li><a href="{{url('berita/'.$value->slug)}}"><i class="far fa-comments"></i>2 Comment</a>
                                    </li> -->
                                </ul>
                                <h3><a href="{{url('berita/'.$value->slug)}}">{!!ucwords(str_limit(strip_tags(strtolower($value->judul)),90))!!}</a></h3>
                                <div class="blog_one_text">
                                    {!!str_limit(strip_tags($value->isi_berita),350)!!}
                                </div>
                                <div class="read_more_btn">
                                    <a href="{{url('berita/'.$value->slug)}}"><i class="fa fa-angle-right"></i>Selengkapnya</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </div>
        </div>
    </section>
    <section class="location">
        <div class="container" style="text-align: center;">
           <div class="block-title text-center">
                <h4>Populasi Data Penduduk</h4>
            </div>
            <div class="col-xl-12 col-lg-12">
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="location_single">
                            <img src="{{asset('assets/images/icon/all.svg')}}" style="width: 40%">
                            <p>Total Penduduk</p>
                            <p style="color: black;">{{$total}}</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="location_single">
                            <img src="{{asset('assets/images/icon/lk.svg')}}" style="width: 40%">
                            <p>Total Kepala Keluarga</p>
                            <p style="color: black;">{{$kk}}</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="location_single">
                            <img src="{{asset('assets/images/icon/lk.svg')}}" style="width: 40%">
                            <p>Total Laki-Laki</p>
                            <p style="color: black;">{{$laki}}</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="location_single">
                            <img src="{{asset('assets/images/icon/pr.svg')}}" style="width: 40%">
                            <p>Total Perempuan</p>
                            <p style="color: black;">{{$wanita}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> 
<section class="testimonials-three">
            <div class="container">
                <div class="block-title text-center">
                    <h4>Produk Desa Manuba</h4>
                    <div class="leaf">
                        <img src="assets/images/resources/leaf.png" alt="">
                    </div>
                </div>
                <div class="testimonials-three__carousel thm__owl-carousel light-dots owl-carousel owl-theme"
                    data-options='{"nav": false, "autoplay": true, "autoplayTimeout": 5000, "smartSpeed": 700, "dots": false, "margin": 30, "loop": true, "responsive": { "0": { "items": 1, "nav": true, "navText": ["Prev", "Next"], "dots": false }, "767": { "items": 1, "nav": true, "navText": ["Prev", "Next"], "dots": false }, "991": { "items": 2 }, "1199": { "items": 2 }, "1200": { "items": 3 } }}'>
                    @foreach($wisata as $tampil)
                    <div class="item">
                        <div class="testimonials-three__single">
                            <div class="testimonials-three__content" style="background-image: url({{asset(Storage::url($tampil->img))}}); background-repeat: no-repeat;background-size: 100% 54%">
                                <div class="testimonials-three_icon">
                                    <img src="{{asset('assets/images/icon/quote_1.png')}}" >
                                </div>
                                <a style="color: #254619" href="{{url('produk/'.$tampil->slug)}}">{!!str_limit(strip_tags($tampil->isi_berita),200)!!}</a>
                            </div>
                            <div class="testimonials-three__info">
                                <img src="{{asset(Storage::url($tampil->img))}}" style="width: 10%;height: 40px !important;">
                                <!-- <h4 style="color: #254619 !important;font-size: 16pt !important;padding-top: 10px;">{{$tampil->judul}}</h4> -->
                               <!--  <p>founder</p> -->
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

@endsection