@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>{{$value->judul}}</h2></div>
                                    <br><br>{!!str_limit(strip_tags($value->isi_berita),100)!!}
                                <div class="link-box">
                                    <a href="{{url('berita/'.$value->slug)}}" class="thm-btn">Discover More</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">
                <p>from the blog</p>
                <h3>News & Articles</h3>
                <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)}}">{{$value->judul}}</a></h3>
                                <div class="blog_one_text">
                                    {!!str_limit(strip_tags($value->isi_berita),200)!!}
                                </div>
                                <div class="read_more_btn">
                                    <a href="{{url('berita/'.$value->slug)}}"><i class="fa fa-angle-right"></i>Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </div>
        </div>
    </section>
    <section class="product-one">
        <div class="container">
            <div class="block-title text-center">
                <h3>from the blog</h3>
                <div class="col-xl-12 col-lg-12">
                    <canvas id="syam"></canvas>
                </div>
            </div>
        </div>
    </section> 
<script>
    var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Miskin',
            backgroundColor: "gray",  
            borderColor: 'black',
            borderWidth: 1,
            data: [
                '12',
                '34',
                '56',
                '56',
                '34',
                '44',
                '78'
            ]
        }, {
            label: 'Kaya',
           backgroundColor: "brown",
            borderColor: 'black',
            borderWidth: 1,
            data: [
                '90',
                '56',
                '56',
                '45',
                '100',
                '10',
                '23'
            ]
        }]

    };

    window.onload = function() {
        var ctx = document.getElementById('syam').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });

    };

    
</script>

@endsection