@extends('layouts.sidik')

@section('content')
<div class="row mt-5 justify-content-center">
        
        <div class="col-md-10">
            <div class="card-deck">
                
                <div class="card p-3">
                    <center>
                          <h3>Informasi Berkala <br> Data Kepegawaian Provinsi Kalimantan Timur</h3>
                            <p>Total PNS Aktif : <small>{{ $pns_aktif }}</small></p>
                    </center>
                </div>
            </div>
        </div>
        
    </div>
    <div class="row mt-4 justify-content-center">
        <div class="col-md-10 mt-3">
            
            <div class="card-deck">
                <div class="card p-3 mb-3">
                    <h4><center>Data Pegawai Berdasarkan Jenis Kelamin</center></h4>
                    <blockquote class="blockquote mb-0 card-body">
                        <p> <canvas id="jenis-kelamin" height="180" width="200"
                                style="margin-top:-3rem;"></canvas></p>
                        <footer class="blockquote-footer">
                            <small class="text-muted">
                                Persentase Data Pegawai
                            </small>
                        </footer>
                    </blockquote>
                </div>
            </div>

        </div>
        
    </div>
   
    <div class="row mt-5 justify-content-center">
        <div class="col-md-10">
            <div class="card-deck">
                <div class="card p-3">
                    <center>
                        <h4>Data Pegawai Berdasarkan Golongan</h4>
                    </center>
                    <p><canvas id="golongan" height="280"></canvas></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-5 justify-content-center">
        <div class="col-md-10">
            <div class="card-deck">
                <div class="card p-3">
                    <center>
                        <h4>Data Pegawai Berdasarkan Pendidikan</h4>
                    </center>
                    <p><canvas id="pendidikan" height="350"></canvas></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-5 justify-content-center">
        <div class="col-md-10">
            <div class="card-deck">
                <div class="card p-3">
                    <center>
                        <h4>Data Pegawai Struktural</h4>
                    </center>
                    <p><canvas id="eselon" height="280"></canvas></p>
                    <center>
                        Sumber Data :
                        <a href="https://simpeg.kaltimprov.go.id" style="color:blue;" target="_blank">Simpeg BKD</a>
                        
                    </center>
                </div>
            </div>
        </div>
    </div>
    
    

    
    </div>
@endsection

@push('script')
<script>
        
    toastr.options = {
        "positionClass": "toast-top-right mt-toast",
    }

    toastr["info"]("Sistem Integerasi Daftar Infromasi Publik", "Selamat datang di data SIDIK");
    
</script>

<script>
    var ctx = document.getElementById('pendidikan');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
                'SD','SMP','SMA','D1','D2','D3','D4','S1','S2','S3'
        ],
        datasets: [{
            label: 'Data Pegawai',
            data: [
                {{ $pendidikan_sd }},{{ $pendidikan_smp }},{{ $pendidikan_sma }},{{ $pendidikan_d1 }},{{ $pendidikan_d2 }},{{ $pendidikan_d3 }},{{ $pendidikan_d4 }},{{ $pendidikan_s1 }},{{ $pendidikan_s2 }},{{ $pendidikan_s3 }}
            ],
            backgroundColor: [
                        '#0099ff', '#000099','#304a5c','#4acac5','#84aab4','#8484b4','#9292ee','#3aafc5','#2546b1','#1570a3'
            ]
        }]
    },
    options: {
        responsive: true,
        legend: {
                    position: 'top',
                },
        title: {
            display: true,
        },
    }
});
</script>

<script>
    var ctx = document.getElementById('eselon');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
                'Eselon II','Eselon III','Eselon IV'
        ],
        datasets: [{
            label: 'Data Pegawai',
            data: [
                {{ $eselon_2 }},{{ $eselon_3 }},{{ $eselon_4 }}
            ],
            backgroundColor: [
                        '#0099ff', '#000099','#304a5c'
            ]
        }]
    },
    options: {
        responsive: true,
        legend: {
                    position: 'top',
                },
        title: {
            display: true,
        },
    }
});
</script>

<script>
    var ctx = document.getElementById('golongan');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
                'Golongan I','Golongan II','Golongan III','Golongan IV'
            ],
        datasets: [
            {
                label: 'Data Pegawai',
                data: [
                    {{ $golongan_1 }},{{ $golongan_2 }},{{ $golongan_3 }},{{ $golongan_4 }}
                ],
                backgroundColor: [
                            '#0099ff', '#000099','#304a5c','#1cc0d6'
                    ]
            }
            
        ]
    },
    options: {
        responsive: true,
        legend: {
                    position: 'top',
                },
        title: {
            display: true,
        },
    }
});
</script>

<script>
    var ctx = document.getElementById('jenis-kelamin');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['PNS Pria', 'PNS Wanita'],
            datasets: [
                {
                    label: 'Data Pegawa',
                    data: [
                        '{{ $pns_pria }}',
                        '{{ $pns_wanita }}' 
                    ],
                    backgroundColor: [
                        '#0099ff', '#000099'
                    ]
                }
            ],
        },
        options: {
            
            responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
        }
    });        
</script>
@endpush