@extends('petugas.layouts.layout_dashboard')

@section("title") Dashboard @endsection

@section("breadcrumb")
    <li class="breadcrumb-item"><a href="#">@yield("title")</a></li>
@endsection

@section('footer-scripts')

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

                        dataPengunjungPekananLineChart = {

                            labels: {!!json_encode($data_tgl)!!},
                            series: [
                                {!!json_encode($data_tgl_jumlah)!!}
                            ]
                        };

                        optionsPengunjungPekananLineChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 10
                            }),
                            axisX: {
                                showGrid: false,
                            },
                            low: 0,
                            high: {!! $data_tgl_jumlah_top+($data_tgl_jumlah_top/4) !!}, // 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 PengunjungPekananLineChart = new Chartist.Line('#pengunjungPekananLineChart', dataPengunjungPekananLineChart, optionsPengunjungPekananLineChart);

                        md.startAnimationForLineChart(PengunjungPekananLineChart);


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

                        dataPengunjungBulananStraightLinesChart = {

                            labels: {!!json_encode($data_bln)!!},
                            series: [
                                {!!json_encode($data_bln_jumlah)!!}
                            ]
                        };

                        optionsStraightLinesChart = {
                            lineSmooth: Chartist.Interpolation.cardinal({
                                tension: 0
                            }),
                            low: 0,
                            high: {!! $data_bln_jumlah_top+($data_bln_jumlah_top/4) !!}, // 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 pengunjungBulananStraightLinesChart = new Chartist.Line('#pengunjungBulananStraightLinesChart', dataPengunjungBulananStraightLinesChart, optionsStraightLinesChart);

                        md.startAnimationForLineChart(pengunjungBulananStraightLinesChart);

                    }

                }
            }
            dashboard.initCharts();
        });

    </script>
@endsection

@section('content')

<div class="row mt-3">
    <div class="col-md-6">
        <div class="card card-chart" data-count="8">
            <div class="card-header card-header-success" data-header-animation="true">
                <div id="pengunjungPekananLineChart" class="ct-chart"></div>
            </div>
            <div class="card-body">
                <div class="card-actions">
                    <button type="button" class="btn btn-danger btn-link fix-broken-card">
                        <i class="material-icons">build</i> Fix Header!
                    </button>
                    <a
                        href="{{route('petugas.laporan_pengunjung_statistik_detail_bulan_ja')}}"
                       class="btn btn-gray btn-link" rel="tooltip" data-placement="bottom"
                       title="" data-original-title="Detail">
                        <i class="material-icons">group</i>
                    </a>
                </div>
                <h4 class="card-title">Pengunjung Pekanan</h4>
                <p class="card-category">{{date('F Y')}}</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header card-header-info"  data-header-animation="true">
                <div id="pengunjungBulananStraightLinesChart" class="ct-chart"></div>
            </div>
            <div class="card-body">
                <div class="card-actions">
                    <button type="button" class="btn btn-danger btn-link fix-broken-card">
                        <i class="material-icons">build</i> Fix Header!
                    </button>
                    <a
                        href="{{route('petugas.laporan_pengunjung_statistik_detail_tahun_ja')}}"
                        class="btn btn-gray btn-link" rel="tooltip" data-placement="bottom"
                       title="" data-original-title="Detail">
                        <i class="material-icons">group</i>
                    </a>
                </div>
                <h4 class="card-title">Pengunjung Bulanan</h4>
                <p class="card-category">Januari - Desember {{date('Y')}}</p>
            </div>
        </div>
    </div>
    <div class="col-md-4"  style="display: none;">
        <div class="card card-chart">
            <div class="card-header card-header-warning"  data-header-animation="true">
                <div id="simpleBarChart" class="ct-chart"></div>
            </div>
            <div class="card-body">
                <div class="card-actions">
                    <button type="button" class="btn btn-danger btn-link fix-broken-card">
                        <i class="material-icons">build</i> Fix Header!
                    </button>
                    <button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom"
                            title="" data-original-title="Refresh">
                        <i class="material-icons">refresh</i>
                    </button>
                </div>
                <h4 class="card-title ">Pengunjung Bulanan</h4>
                <p class="card-category">Bar Chart</p>
            </div>
        </div>
    </div>
</div>

<div class="row ">
    @if(auth()->user()->level == 'admin')
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.konfigurasi_aplikasi.index')}}">
                    <div class="card-header card-header-rose card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">settings_applications</i>
                        </div>
                        <h4 class="card-title">Konfigurasi Profile App</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.user.index')}}">
                    <div class="card-header card-header-primary card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">face</i>
                        </div>
                        <h4 class="card-title">Users Petugas</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.konfigurasi_anggota_jenis.index')}}">
                    <div class="card-header card-header-success card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">people_outline</i>
                        </div>
                        <h4 class="card-title">Konfigurasi Anggota</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.jenis_koleksi.index')}}">
                    <div class="card-header card-header-info card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">local_library</i>
                        </div>
                        <h4 class="card-title">Konfigurasi Pustaka</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>


    @elseif(auth()->user()->level == 'pengolahan')
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.anggota.index')}}">
                    <div class="card-header card-header-success card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">group</i>
                        </div>
                        <h4 class="card-title">Users Anggota</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.pustaka_cetak.index')}}">
                    <div class="card-header card-header-info card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">collections_bookmark</i>
                        </div>
                        <h4 class="card-title">Pustaka Cetak</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.pustaka_digital.index')}}">
                    <div class="card-header card-header-danger card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">picture_as_pdf</i>
                        </div>
                        <h4 class="card-title">Pustaka Digital</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        @if($vkey == '69691c7bdcc3ce6d5d8a1361f22d04ac' || $vkey == '7fc56270e7a70fa81a5935b72eacbe29')
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.pustaka_multimedia.index')}}">
                    <div class="card-header card-header-rose card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">camera_roll</i>
                        </div>
                        <h4 class="card-title">Pustaka Multimedia</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>
        @endif
    @elseif(auth()->user()->level == 'sirkulasi')
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.sirkulasi_pc.index')}}">
                    <div class="card-header card-header-rose card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">autorenew</i>
                        </div>
                        <h4 class="card-title">Sirkulasi Pustaka Cetak</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.anggota.index')}}">
                    <div class="card-header card-header-success card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">group</i>
                        </div>
                        <h4 class="card-title">Users Anggota</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.pustaka_cetak.index')}}">
                    <div class="card-header card-header-info card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">collections_bookmark</i>
                        </div>
                        <h4 class="card-title">Pustaka Cetak</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <a href="{{route('petugas.pustaka_digital.index')}}">
                    <div class="card-header card-header-danger card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">picture_as_pdf</i>
                        </div>
                        <h4 class="card-title">Pustaka Digital</h4>
                    </div>
                </a>
                <div class="card-footer">
                    <div class="stats">

                    </div>
                </div>
            </div>
        </div>


    @endif

    <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="card card-stats">
            <a href="{{route('petugas.laporan')}}">
                <div class="card-header card-header-warning card-header-icon">
                    <div class="card-icon">
                        <i class="material-icons">assignment</i>
                    </div>
                    <h4 class="card-title">Rekap Laporan</h4>
                </div>
            </a>
            <div class="card-footer">
                <div class="stats">

                </div>
            </div>
        </div>
    </div>
</div>

@endsection