@extends('app')
@section('head')
    @include('partial.head')
    <style>
        .select2-container .select2-selection--single {
            height: auto !important;
        }
    </style>

    <script>
        var year = {{ $tahunberlakutakberlaku }};
        var nama = ["Surat Edaran", "Rekomendasi Kajian", "Peraturan Gubernur", "Peraturan Daerah", "Naskah Akademik",
            "Keputusan Gubernur", "Katalog Produk Hukum", "Instruksi Gubernur"
        ];
        var produk = ['Berlaku', 'Tidak Berlaku'];
        var data_berlaku = {{ $berlaku }};
        var data_tidakberlaku = {{ $tidakberlaku }};
        var grafikkategori = {{ $grafikkategori }};

        var barChartData = {
            labels: year,
            datasets: [{
                label: '{{ __('Berlaku') }}',
                backgroundColor: "#50cd89",
                data: data_berlaku
            }, {
                label: '{{ __('Tidak Berlaku') }}',
                backgroundColor: "#009ef7",
                data: data_tidakberlaku
            }]
        };

        var barChartData2 = {
            labels: nama,
            datasets: [{
                label: '',
                data: grafikkategori,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(201, 203, 207, 0.2)'
                ],
                borderColor: [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(201, 203, 207)'
                ],
                borderWidth: 1
            }]
        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                            borderColor: 'rgb(0, 255, 0)',
                            borderSkipped: 'bottom'
                        }
                    },
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Yearly Website Visitor'
                    }
                }
            });

            var ctx = document.getElementById("canvas2").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData2,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                },
            });

        };
    </script>
@endsection
@section('content')
    @include('partial.topbar')

    <section class="slider-area slider-one pt-22">
        <div class="bd-example">
            <div id="carouselOne" class="carousel slide" data-bs-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-bs-target="#carouselOne" data-bs-slide-to="0" class="active"></li>
                    <li data-bs-target="#carouselOne" data-bs-slide-to="1"></li>
                    <li data-bs-target="#carouselOne" data-bs-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    @foreach ($slider as $var)
                        <div class="carousel-item  @if ($loop->first) active @endif"
                            style="background-image: url({{ asset('banner/' . $var->gambar) }});background-size:100%;">
                            <div class="carousel-caption">
                                <div class="container">
                                    <div class="row justify-content-center">
                                        <div class="col-xxl-7 col-xl-8 col-lg-8">

                                        </div>
                                    </div>
                                    <!-- row -->
                                </div>
                                <!-- container -->
                            </div>
                            <!-- carousel caption -->
                        </div>
                    @endforeach
                </div>
                <!-- carousel-inner -->
                <a class="carousel-control-prev" href="#carouselOne" role="button" data-bs-slide="prev">
                    <i class="lni lni-chevron-left"></i>
                </a>
                <a class="carousel-control-next" href="#carouselOne" role="button" data-bs-slide="next">
                    <i class="lni lni-chevron-right"></i>
                </a>
            </div>
            <!-- carousel -->
        </div>
        <!-- bd-example -->
    </section>
    <!--====== SLIDER ONE PART ENDS ======-->

    <!--====== HEADER ONE PART START ======-->
    <section id="hero-area" class="testimonial-one slider-three header-area header-eight"
        style="background-color: var(--semi-transparent)">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header-content">
                        <h1 class="text-center mt-5 mb-5">{!! app()->getLocale() == 'id'
                            ? 'Jaringan Dokumentasi dan Informasi Hukum <br> Provinsi Jawa Tengah'
                            : GoogleTranslate::trans('Jaringan Dokumentasi dan Informasi Hukum <br> Provinsi Jawa Tengah', app()->getLocale()) !!}</h1>
                        @include('partial.pencarian')
                    </div>
                </div>
            </div>
        </div>
        <div class="container">

            <div class="row justify-content-center">
                <!-- <div class="col-lg-6" style="margin-bottom:50px;">
                                                                                <div class="section-title align-center">
                                                                                    <h2 class="fw-bold text-gray-500 text-center">
                                                                                        {{ GoogleTranslate::trans('Informasi produk dan layanan hukum Jawa Tengah dalam satu portal', app()->getLocale()) }}
                                                                                    </h2>
                                                                                    <p class="text-gray-500 text-center">
                                                                                        {{ GoogleTranslate::trans('Biro Hukum Jawa Tengah, Ngayemi Dan Nglayani', app()->getLocale()) }}
                                                                                    </p>
                                                                                </div>
                                                                            </div> -->
                <div class="col-lg-12">
                    <div class="section-title align-center">
                        <center><iframe width="800" height="500" src="https://www.youtube.com/embed/5j1LYpP3uEs"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen></iframe></center>
                    </div>
                </div>
            </div>

        </div>
        <!-- container -->
    </section>

    <!--====== TESTIMONIAL ONE PART ENDS ======-->

    <!--====== Tiny Slider js ======-->
    <script src="https://cdn.ayroui.com/1.0/js/tiny-slider.js"></script>
    </script>

    <script>
        //======== tiny slider for testimonial-one
        // tns({
        //     autoplay: true,
        //     autoplayButtonOutput: false,
        //     mouseDrag: true,
        //     gutter: 0,
        //     container: ".-items-active",
        //     center: false,
        //     nav: true,
        //     navPosition: "bottom",
        //     controls: false,
        //     speed: 400,
        //     controlsText: [
        //         '<i class="lni lni-arrow-left-circle"></i>',
        //         '<i class="lni lni-arrow-right-circle"></i>',
        //     ],
        //     responsive: {
        //         0: {
        //             items: 1,
        //         },

        //         768: {
        //             items: 2,
        //         },
        //         992: {
        //             items: 3,
        //         },
        //     },
        // });
    </script>

    <!--====== HEADER ONE PART ENDS ======-->

    <!--====== SLIDER 2 PART START ======-->

    <section class="slider-three">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">

                    <div class="section-title text-center">
                        <h3 class="title">
                            {{ app()->getLocale() == 'id' ? 'Produk Hukum' : GoogleTranslate::trans('Produk Hukum', app()->getLocale()) }}
                        </h3>
                        <p class="text">
                            {{ app()->getLocale() == 'id' ? 'Daftar Peraturan sesuai keterkaitan dengan produk hukum' : GoogleTranslate::trans('Daftar Peraturan sesuai keterkaitan dengan produk hukum', app()->getLocale()) }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="slider-items-wrapper">
                <div class="row  sliders-items-active3">
                    @foreach ($produk_hukum as $var)
                        <div class="col-lg-4 col-md-7 col-sm-9">
                            <div class="features-style-one text-center d-flex">
                                <div class="features-icon me-3">
                                    <i class="lni lni-book"></i>
                                </div>
                                <div class="features-content">
                                    <h4 class="">
                                        {{ app()->getLocale() == 'id' ? $var->nama : GoogleTranslate::trans($var->nama, app()->getLocale()) }}
                                    </h4>
                                    <div class="features-btn rounded-buttons">
                                        <a class="btn primary-btn-outline rounded-full"
                                            href="{{ route('inventarisasi-hukum.kategori', [$var->link]) }}">
                                            {{ $var->jumlah . ' ' . (app()->getLocale() == 'id') ? 'Dokumen' : GoogleTranslate::trans('Dokumen', app()->getLocale()) }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <!--====== SLIDER THREE PART ENDS ======-->

    <!-- Start Latest News Area -->
    <section id="blog" class="latest-news-area section">
        <div class="section-title-five">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content">
                            <h1 class="fw-bold">
                                {{ app()->getLocale() == 'id' ? 'Pengumuman / Berita' : GoogleTranslate::trans('Pengumuman / Berita', app()->getLocale()) }}
                            </h1>
                            <p>
                                {{ app()->getLocale() == 'id' ? 'Media Informasi dan Berita terkini JDIH Provinsi Jawa Tengah' : GoogleTranslate::trans('Media Informasi dan Berita terkini JDIH Provinsi Jawa Tengah', app()->getLocale()) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--======  End Section Title Five ======-->
        <div class="container">
            <div class="row">
                @if($data && count($data) > 0)
                <div class="col-lg-5 col-12">
                    <div class="single-news">
                        <div class="image">
                            <img src="{{ asset('berita/' . $data[0]->images) }}" alt="Blog" />
                            <div class="meta-details">
                                <img class="thumb" src="{{ asset('media/svg/avatars/blank.svg') }}" alt="Author">
                                <span>{{ $data[0]->views . ' ' . (app()->getLocale() == 'id') ? 'Kali' : GoogleTranslate::trans('Kali', app()->getLocale()) }}</span>
                            </div>
                        </div>
                        <div class="content-body">
                            <h4 class="title">
                                <a href="{{ route('artikel.detail', [$data[0]->link]) }}">
                                    {{ app()->getLocale() == 'id' ? Helper::string_rmv_html($data[0]->nama) : GoogleTranslate::trans(Helper::string_rmv_html($data[0]->nama), app()->getLocale()) }}</a>
                            </h4>
                            <p>
                                {!! app()->getLocale() == 'id'
                                    ? substr($data[0]->isi, 0, 360)
                                    : GoogleTranslate::trans(substr($data[0]->isi, 0, 360), app()->getLocale()) !!} ...
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 col-12">
                    @foreach ($data as $key => $var)
                        @if ($key > 0)
                            <div class="d-flex align-items-sm-center mb-1">
                                <div class="symbol symbol-150px symbol-2by3 me-4 mt-10">
                                    <div class="symbol-label"
                                        style="background-image: url('{{ asset('berita/' . $var->images) }}')"></div>
                                </div>
                                <div class="d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1">
                                    <div class="single-news d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3">
                                        <div class="content-body">
                                            <h4 class="mt-6">
                                                <a href="{{ route('artikel.detail', [$var->link]) }}"
                                                    class="text-gray-900 text-hover-danger">
                                                    {{ app()->getLocale() == 'id' ? $var->nama : GoogleTranslate::trans($var->nama, app()->getLocale()) }}
                                                </a>
                                            </h4>
                                            <div class="blog-content mt-3">
                                                <span><i class="lni lni-calendar"></i>