@extends('opac.layouts.layout_home')

@section("title") Home @endsection


@section('footer-scripts')

    <script src="{{ asset('md/assets/js/plugins/perfect-scrollbar.jquery.min.js') }}"></script>
    <!-- Chartist JS -->
    <script src="{{ asset('md/assets/js/plugins/chartist.min.js') }}"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="{{ asset('md/assets/js/material-dashboard.js?v=2.1.0') }}" type="text/javascript"></script>
    <!-- Material Dashboard DEMO methods, don't include it in your project! -->
    <script src="{{ asset('md/assets/demo/demo.js') }}"></script>

    <script>
        $(document).ready(function () {
            // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
            // initCharts();
            dashboard = {
                initCharts: function () {
                    if ($('#roundedLineChart').length != 0
                        || $('#pengunjungWebsiteWeek').length != 0
                        || $('#colouredRoundedLineChart').length != 0
                        || $('#colouredBarsChart').length != 0
                        || $('#pengunjungPerpusWeek').length != 0
                        || $('#multipleBarsChart').length != 0) {
                        /* ----------==========    Rounded Line Chart initialization    ==========---------- */

                        dataRoundedLineChart = {
                            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
                            series: [
                                [12, 17, 7, 17, 23, 18, 38]
                            ]
                        };

                        optionsRoundedLineChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 10
                            }),
                            axisX: {
                                showGrid: false,
                            },
                            low: 0,
                            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
                            chartPadding: {
                                top: 0,
                                right: 0,
                                bottom: 0,
                                left: 0
                            },
                            showPoint: false
                        }

                        var RoundedLineChart = new Chartist.Line('#roundedLineChart', dataRoundedLineChart, optionsRoundedLineChart);

                        md.startAnimationForLineChart(RoundedLineChart);


                        /*  **************** Straight Lines Chart - single line with points ******************** */

                        dataStraightLinesChart = {
                            labels: {!!json_encode($data_pw_tgl)!!},//['07', '08', '09', '10', '11', '12', '13', '14', '15'],
                            series: [
                                {!!json_encode($data_pw_tgl_jumlah)!!},//[10, 16, 8, 13, 20, 15, 20, 34, 30]
                            ]
                        };

                        optionsStraightLinesChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 0
                            }),
                            low: 0,
                            high: {!!$max_data_pw_tgl_jumlah!!}, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
                            chartPadding: {
                                top: 0,
                                right: 0,
                                bottom: 0,
                                left: 0
                            },
                            classNames: {
                                point: 'ct-point ct-white',
                                line: 'ct-line ct-white'
                            }
                        }

                        var pengunjungWebsiteWeek = new Chartist.Line('#pengunjungWebsiteWeek', dataStraightLinesChart, optionsStraightLinesChart);

                        md.startAnimationForLineChart(pengunjungWebsiteWeek);


                        /*  **************** Coloured Rounded Line Chart - Line Chart ******************** */


                        dataColouredRoundedLineChart = {
                            labels: ['\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
                            series: [
                                [287, 480, 290, 554, 690, 690, 500, 752, 650, 900, 944]
                            ]
                        };

                        optionsColouredRoundedLineChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 10
                            }),
                            axisY: {
                                showGrid: true,
                                offset: 40
                            },
                            axisX: {
                                showGrid: false,
                            },
                            low: 0,
                            high: 1000,
                            showPoint: true,
                            height: '300px'
                        };


                        var colouredRoundedLineChart = new Chartist.Line('#colouredRoundedLineChart', dataColouredRoundedLineChart, optionsColouredRoundedLineChart);

                        md.startAnimationForLineChart(colouredRoundedLineChart);


                        /*  **************** Coloured Rounded Line Chart - Line Chart ******************** */


                        dataColouredBarsChart = {
                            labels: ['\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
                            series: [
                                [287, 385, 490, 554, 586, 698, 695, 752, 788, 846, 944],
                                [67, 152, 143, 287, 335, 435, 437, 539, 542, 544, 647],
                                [23, 113, 67, 190, 239, 307, 308, 439, 410, 410, 509]
                            ]
                        };

                        optionsColouredBarsChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 10
                            }),
                            axisY: {
                                showGrid: true,
                                offset: 40
                            },
                            axisX: {
                                showGrid: false,
                            },
                            low: 0,
                            high: 1000,
                            showPoint: true,
                            height: '300px'
                        };


                        var colouredBarsChart = new Chartist.Line('#colouredBarsChart', dataColouredBarsChart, optionsColouredBarsChart);

                        md.startAnimationForLineChart(colouredBarsChart);



                        /*  **************** Public Preferences - Pie Chart ******************** */

                        var dataPreferences = {
                            labels: ['62%', '32%', '6%'],
                            series: [62, 32, 6]
                        };

                        var optionsPreferences = {
                            height: '230px'
                        };

                        Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);

                        /*  **************** Simple Bar Chart - barchart ******************** */

                        var dataSimpleBarChart = {
                            labels: {!!json_encode($data_pp_tgl)!!},//['07', '08', '09', '10', '11', '12', '13', '14', '15'],
                            series: [
                                {!!json_encode($data_pp_tgl_jumlah)!!}//[10, 16, 8, 13, 20, 15, 20, 34, 30]
                            ]
                            // labels: ['Siswa', 'Guru', 'Karyawan', 'Umum'],
                            // series: [
                            //     [868, 610, 756, 895]
                            // ]
                        };

                        var optionsSimpleBarChart = {
                            seriesBarDistance: 10,
                            axisX: {
                                showGrid: false
                            },
                            high: {!!$max_data_pp_tgl_jumlah!!},
                        };

                        var responsiveOptionsSimpleBarChart = [
                            ['screen and (max-width: 640px)', {
                                seriesBarDistance: 5,
                                axisX: {
                                    labelInterpolationFnc: function (value) {
                                        return value[0];
                                    }
                                }
                            }]
                        ];

                        var pengunjungPerpusWeek = Chartist.Bar('#pengunjungPerpusWeek', dataSimpleBarChart, optionsSimpleBarChart, responsiveOptionsSimpleBarChart);

                        //start animation for the Emails Subscription Chart
                        md.startAnimationForBarChart(pengunjungPerpusWeek);


                        var dataMultipleBarsChart = {
                            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            series: [
                                [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
                                [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]
                            ]
                        };

                        var optionsMultipleBarsChart = {
                            seriesBarDistance: 10,
                            axisX: {
                                showGrid: false
                            },
                            height: '300px'
                        };

                        var responsiveOptionsMultipleBarsChart = [
                            ['screen and (max-width: 640px)', {
                                seriesBarDistance: 5,
                                axisX: {
                                    labelInterpolationFnc: function (value) {
                                        return value[0];
                                    }
                                }
                            }]
                        ];

                        var multipleBarsChart = Chartist.Bar('#multipleBarsChart', dataMultipleBarsChart, optionsMultipleBarsChart, responsiveOptionsMultipleBarsChart);

                        //start animation for the Emails Subscription Chart
                        md.startAnimationForBarChart(multipleBarsChart);
                    }

                }
            }
            dashboard.initCharts();
        });

    </script>
@endsection

@section('content')

    <div class="main main-raised">
        <div class="section pt-4">
            <div class="container">
                <div class="text-center"></div>
                <div class="row">
                    <div class="col-md-6 text-right pr-5">
                                            </div>
                    <div class="col-md-6 pl-5">
                                            </div>
                </div>
                <div class="row">
                    <div class="col-md-8 mr-auto ml-auto">
                        <div class="card card-raised card-carousel" style="background-color: lightgray;">
                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"
                                 data-interval="3000">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
                                </ol>
                                <div class="carousel-inner">
                                    @foreach($galeri as $key => $g)
                                        <div class="carousel-item
                                            @if ($key == 1)
                                                active
                                            @endif">
                                            <img class="d-block ml-auto mr-auto" height="400px"
                                                 src="{{asset('storage/galeri/'.$g->gambar)}}" alt="First slide">
                                            <div class="carousel-caption d-none d-md-block">
                                                <h4>{{$g->judul}}</h4>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                                   data-slide="prev">
                                    <i class="material-icons">keyboard_arrow_left</i>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                                   data-slide="next">
                                    <i class="material-icons">keyboard_arrow_right</i>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="section section-blog pt-3">

            <div class="container mt-5" id="pus_pil">
                <h2 class="section-title" >Pustaka Pilihan</h2>
                <div class="row">
                    @foreach($pus_cet_pil as $key => $pc_pil)
                        <div class="col-lg-3 col-6">
                            <div class="card card-product card-plain">
                                <div class="card-header card-header-image">
                                    <a href="{{route('pc.show',[$pc_pil->id])}}">
                                        <img src="{{asset('storage/pustaka_cetak/'.$pc_pil->gambar)}}" style="object-fit: cover; object-position: top;" height="275rem"
                                             onerror="this.src='https://ui-avatars.com/api/?size=235&background=c9c9c9&name='+'{{ $pc_pil->judul }}'"
                                        />
                                    </a>
                                    <div class="colored-shadow"
                                         style="background-image: url(&quot;../assets/img/examples/card-product2.jpg&quot;); opacity: 1;">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <h6 class="card-category text-rose">{{ $pc_pil->pengarang }}</h6>
                                    <h4 class="card-title">
                                        <a href="{{route('pc.show',[$pc_pil->id])}}">{{ Illuminate\Support\Str::limit($pc_pil->judul, 30) }}</a>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="subscribe-line subscribe-line-image img" data-parallax="true" style="background-image: url(&apos;{{ asset('mk/assets/img/bg-banner-opac.jpg') }}&apos;); background-position: center center;"  id="pus_laris">
                <div class="container">
                    <h2 class="section-title text-white">Pustaka Terlaris</h2>
                    <div class=" text-center">
                        <div class="team">
                            <div class="row">
                                @foreach($pus_cet_tlr as $key => $pc_tlr)
                                    <div class="col-lg-3 col-6">
                                        <div class="card card-product card-plain">
                                            <div class="card-header card-header-image">
                                                <a href="{{route('pc.show',[$pc_tlr->id])}}">
                                                    <img src="{{asset('storage/pustaka_cetak/'.$pc_tlr->gambar)}}" style="object-fit: cover; object-position: top;" height="275rem"
                                                         onerror="this.src='https://ui-avatars.com/api/?size=235&background=c9c9c9&name='+'{{ $pc_tlr->judul }}'" />
                                                </a>
                                                <div class="colored-shadow"
                                                     style="background-image: url(&quot;../assets/img/examples/card-product2.jpg&quot;); opacity: 1;">
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <h6 class="card-category text-white">{{ $pc_tlr->pengarang }}</h6>
                                                <h4 class="card-title ">
                                                    <a class=" text-white" href="{{route('pc.show',[$pc_tlr->id])}}">{{ Illuminate\Support\Str::limit($pc_tlr->judul,30) }}</a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="container mt-5" id="pus_new">
                <h2 class="section-title">Pustaka Terbaru</h2>
                <div class="row">
                    @foreach($pus_cet_new as $key => $pus_cet_new)
                        <div class="col-lg-3 col-6">
                            <div class="card card-product card-plain">
                                <div class="card-header card-header-image">
                                    <a href="{{route('pc.show',[$pus_cet_new->id])}}">
                                        <img src="{{asset('storage/pustaka_cetak/'.$pus_cet_new->gambar)}}" style="object-fit: cover; object-position: top;" height="275rem"
                                             onerror="this.src='https://ui-avatars.com/api/?size=235&background=c9c9c9&name='+'{{ $pus_cet_new->judul }}'"
                                        />
                                    </a>
                                    <div class="colored-shadow"
                                         style="background-image: url(&quot;../assets/img/examples/card-product2.jpg&quot;); opacity: 1;">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <h6 class="card-category text-primary">{{ $pus_cet_new->pengarang }}</h6>
                                    <h4 class="card-title">
                                        <a href="{{route('pc.show',[$pus_cet_new->id])}}">{{ Illuminate\Support\Str::limit($pus_cet_new->judul,30) }}</a>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="section bg-white" id="berita">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 ml-auto mr-auto">
                        <h2 class="title">Informasi Perpustakaan</h2>
                        <a href="{{route('b.index')}}">Lihat Semua</a>
                        @foreach($berita as $key => $b)
                            <div class="card card-plain card-blog">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card-header card-header-image">
                                            <a href="{{route('b.show',[$b->id])}}">
                                                <img class="img img-raised" src="{{asset('storage/berita/'.$b->gambar)}}"
                                                     onerror="this.src='https://ui-avatars.com/api/?size=235&background=c9c9c9&name='+'{{ $b->judul }}'">
                                            </a>
                                            <div class="colored-shadow"
                                                 style="background-image: url(&quot;{{asset('storage/berita/'.$b->gambar)}}&quot;); opacity: 1;">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        {{-- <h6 class="card-category text-info">Enterprise</h6> --}}
                                        <h3 class="card-title">
                                            <a href="{{route('b.show',[$b->id])}}">{{$b->judul}}</a>
                                        </h3>
                                        <p class="card-description">