@extends('homepage.layout')
@section('content')
    <style>
        body {
            background-color: green;
        }

        section {
            background-color: #033e3a;
        }

        .card {
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            max-width: 300px;
            margin: auto;
            text-align: center;
        }

        .title_list {
            color: grey;
            font-size: 18px;
        }

        /* Container */
        .container {
            /* border: 1px black solid; */
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            padding-right: 15px;
            padding-left: 15px;
            opacity: 1;
        }

        button {
            border: none;
            outline: 0;
            display: inline-block;
            padding: 8px;
            color: white;
            background-color: #000;
            text-align: center;
            cursor: pointer;
            width: 100%;
            font-size: 18px;
        }

        a {
            text-decoration: none;
            font-size: 22px;
            color: black;
        }

        button:hover,
        a:hover {
            opacity: 0.7;
        }

        .informasi {
            /* background-color: #033e3a; */
            border-radius: 10px;
        }

        .card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .card img {
            border-radius: 15px 15px 0 0;
        }

        .carousel-inner {
            border-radius: 15px;
            overflow: hidden;
        }

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .slider-container {
            display: flex;
            overflow: hidden;
            width: 100%;
        }

        .mySwiper {
            max-height: 75vh;
        }

        @media only screen and (max-width: 600px) {
            .mySwiper {
                height: 100%;
            }


        }

        .swiper-slide img {
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: center;
        }

        .user {
            display: inline-block;
            width: 130px;
            height: 130px;
            border-radius: 50%;

            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .fadein {
            /* border: 2px solid black; */
            opacity: 1;
            margin-top: 0px;
        }

        .swiper-button-next {
            color: rgb(196, 35, 35) !important;
        }

        .swiper-button-prev {
            color: rgb(196, 35, 35) !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('homepage/assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <link rel="stylesheet" href="{{ asset('assets/owl/assets/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/owl/assets/owl.theme.default.min.css') }}">
    <div class="beda">
        <section class="swiper mySwiper" style="margin-top: 60px;">
            <div class="swiper-wrapper "style="">
                @if ($slider)
                    @foreach ($slider as $a)
                        <div class="swiper-slide"><img src="{{ $a->foto }}" alt=""></div>
                    @endforeach
                @else
                    <div class="swiper-slide"><img src="{{ asset('assets/images/nothing.png') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('assets/images/nothing.png') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('assets/images/nothing.png') }}" alt=""></div>
                @endif
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>
        <div
            style="background: url('{{ asset('assets/images/bg_kesbangpol-04.jpg') }}'); background-size: cover; background-repeat: no-repeat; background-position-x: center;">
            <div class="bedas">
                <br>
                <div class="container-fixed">
                    <div class="fadein row" style="background-color: #f6f9ff;">
                        <div class="col-sm-12 col-md-4" style="padding: 15px;">
                            <center>
                                {{-- <img src="{{ asset('assets/images/pemkot.png') }}" style="width: 90px;" alt=""> --}}
                            </center>
                            <h4>SELAMAT DATANG DI SITUS</h4>
                            <h3 style="color: #09266c;"><b>Badan Kesatuan Bangsa dan Politik Provinsi Kalimantan Timur</b>
                            </h3>
                            <p>
                                Layanan ini merupakan sarana layanan online bagi pemohon informasi publik sebagai salah satu
                                wujud pelaksanaan keterbukaan informasi publik di Provinsi Kalimantan Timur
                            </p>
                            <br>
                        </div>
                        <div class="col-sm-12 col-md-8" style="background-color: #f6f9ff; padding: 15px;">
                            @include('homepage.isi_homepage.visitor', ['check' => 'atas'])
                        </div>
                    </div>
                </div>
                @include('homepage.isi_homepage.informasi')
                <br>
                @include('homepage.isi_homepage.galeridanjadwal')
                <br>
                @include('homepage.isi_homepage.infografis')
                <br>
                @include('homepage.isi_homepage.berita_home')
                <br>
                @include('homepage.isi_homepage.link_terkait')
                <br>
                {{-- <div class="containers">

                </div> --}}
            </div>
        </div>
        <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
        <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/owl/owl.carousel.min.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            const labels = [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'Oktober',
                'November',
                'Desember',
            ];

            const ctx2 = document.getElementById('visitor');

            const myChart2 = new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Data Pengunjung Tahun {{ date('Y') }}',
                        backgroundColor: 'rgb(255, 99, 132)',
                        borderColor: 'rgb(255, 99, 132)',
                        data: {!! json_encode($v) !!},
                    }]
                },
            });
        </script>
        <script>
            $(document).ready(function() {
                $(window).scroll(function() {
                    $('.fadein').each(function(i) {
                        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                        var bottom_of_window = $(window).scrollTop() + $(window).height();

                        /* If the object is completely visible in the window, fade it it */
                        if (bottom_of_window > bottom_of_object) {

                            $(this).animate({
                                'opacity': '1',
                                'margin-top': '0',
                            }, 10, 'linear');

                        }
                    })
                });
            });
            var swiper = new Swiper(".mySwiper", {
                autoplay: {
                    delay: 5000,
                },
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },

                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });

            var swiper = new Swiper(".penghargaan", {
                slidesPerView: 3,
                spaceBetween: 50,
                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                breakpoints: {
                    // when window width is >= 320px
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 40
                    }
                },
            });

            var swiper = new Swiper(".info-grafis", {
                slidesPerView: 1,
                spaceBetween: 50,
                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                }
            });

            var swiper = new Swiper(".video-informasi", {
                slidesPerView: 1,
                spaceBetween: 50,
                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                }
            });

            var swiper = new Swiper(".website-wilayah-kota", {
                slidesPerView: 7,
                spaceBetween: 10,

                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                breakpoints: {
                    // when window width is >= 320px
                    320: {
                        slidesPerView: 4,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 4,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 7,
                        spaceBetween: 40
                    }
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                }
            });

            var swiper = new Swiper(".website", {
                slidesPerView: 1,
                // centeredSlides: true,
                // centeredSlidesBounds: true
                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                // centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                breakpoints: {
                    // when window width is >= 320px
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 6,
                    }
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                }
            });

            var swiper = new Swiper(".informasi", {
                slidesPerView: 3,
                spaceBetween: 30,
                // centeredSlides: true,
                // centeredSlidesBounds: true
                // slidesPerGroup: 3,
                loop: true,
                // loopFillGroupWithBlank: true,
                // centerSlide: 'true',
                fade: true,
                grabCursor: 'true',
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
                breakpoints: {
                    // when window width is >= 320px
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 30
                    }
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                }
            });
        </script>
        <!--== Blog Classic Post Start ==-->
    @endsection