@extends('layouts.app')

@section('title', 'Home')
@section('home', 'm-menu__item--active')

@push('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .header-button:hover {
            opacity: .5 !important;
            text-decoration: none;
        }
    </style>
@endpush

@section('content')
    <section id="dashboardContent">
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">{{ $ipr->display_name }}</h3>
                    </div>
                </div>
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                    <a href="{{ url('admin/permohonan/'.$ipr->name) }}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #716aca; color: white">
                        <div class="mb-2">
                            <i class="flaticon-file" style="font-size: 40px"></i>
                        </div>
                        <h4>Jumlah Permohonan</h4>
                        <h3>{{ number_format(App\PermohonanBlueprint::count()) }}</h3>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanBlueprint::APPROVED) }}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #34bfa3; color: white">
                        <div class="mb-2">
                            <i class="la la-check-circle" style="font-size: 40px"></i>
                        </div>
                        <h4>Permohonan Lulus</h4>
                        <h3>{{ number_format(App\PermohonanBlueprint::where('status_mohon', 2)->count()) }}</h3>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanBlueprint::REJECTED) }}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #f4516c; color: white">
                        <div class="mb-2">
                            <i class="flaticon-cancel" style="font-size: 40px"></i>
                        </div>
                        <h4>Permohonan Gagal</h4>
                        <h3>{{ number_format(App\PermohonanBlueprint::where('status_mohon', 3)->count()) }}</h3>
                    </a>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart1"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart2"></div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart3"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart4"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart5"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart6"></div>
                </div>
            </div>
        </div>

    </section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
    <script>
        var options = {
                title: { text: 'Status Permohonan' },
                zoom: {enabled: true},
                chart: { type: 'bar', height: 265, toolbar: { show: false } },
                plotOptions: { bar: { horizontal: true } },
                series: [{
                    name: '',
                    data: [
                        {!! json_encode($totalIPRBlueprint) !!}, 
                        {!! json_encode($lulusIPRBlueprint) !!},
                        {!! json_encode($gagalIPRBlueprint) !!}
                    ],
                }],
                xaxis: {
                    categories: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'],
                    // tickAmount: 'dataPoints',
                    labels: { 
                        show: true, 
                        rotate: -35, 
                        rotateAlways: false,
                        hideOverlappingLabels: false,
                        formatter: function(val) {
                            return val;
                        },
                        
                    },
                    axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
                yaxis: {
                    // categories: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'],
                    // tickAmount: 'dataPoints',
                    labels: { 
                        show: true, 
                        // rotate: -35, 
                        rotateAlways: false,
                        hideOverlappingLabels: false,
                        formatter: function(val) {
                            return val;
                        },
                        
                    },
                    axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                        return val
                        }
                    }
                }
            }
            var chart = new ApexCharts(document.querySelector("#chart1"), options);
        
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart2"), {
            title: { text: 'Status Permohonan' },
            chart: { type: 'pie', height: 280 },
            legend: { show: true, position: 'left' },
            series: [{!! json_encode($totalIPRBlueprint) !!}, {!! json_encode($lulusIPRBlueprint) !!}, {!! json_encode($gagalIPRBlueprint) !!}],
            labels: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'], 
            colors: ['#008FFB', '#f4516c', '#34bfa3', ]
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart3"), {
            title: { text: 'Umur' },
            series: [{ name: '', data: {!! $topByAgeBlueprint->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 280, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topByAgeBlueprint->pluck('label')->toJson() !!},
                // tickAmount: 1,
                labels: { 
                    show: true, 
                    rotate: -35, 
                    rotateAlways: true ,
                    formatter: function(val) {
                            return val;
                    },
                },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            },
            yaxis: {
                // categories: {!! $topByAgeBlueprint->pluck('label')->toJson() !!},
                // tickAmount: 1,
                labels: { 
                    show: true, 
                    // rotate: -35, 
                    rotateAlways: true ,
                    formatter: function(val) {
                            return val;
                    },
                },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            },
                tooltip: {
                    y: {
                        formatter: function(val) {
                        return val
                        }
                    }
                }
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart4"), {
            title: { text: 'Bangsa' },
            series: [{ name: '', data: {!! $topByRaceBlueprint->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 280, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topByRaceBlueprint->pluck('label')->toJson() !!},
                labels: { 
                    show: true, 
                    rotate: -35, 
                    rotateAlways: true ,
                    formatter: function(val) {
                            return val;
                    },
                },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            },
            yaxis: {
                // categories: {!! $topByRaceBlueprint->pluck('label')->toJson() !!},
                labels: { 
                    show: true, 
                    // rotate: -35, 
                    rotateAlways: true ,
                    formatter: function(val) {
                            return val;
                    },
                },
                // axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            }
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart5"), {
            title: { text: 'Jantina' },
            chart: { type: 'donut', height: 315 },
            legend: { show: true, position: 'bottom' },
            series: {!! $topByGenderBlueprint->pluck('total')->toJson() !!},
            labels: {!! $topByGenderBlueprint->pluck('label')->toJson() !!},
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart6"), {
            title: { text: 'Status Perkahwinan' },
            chart: { type: 'donut', height: 315 },
            legend: { show: true, position: 'bottom' },
            series: {!! $topByMarriageBlueprint->pluck('total')->toJson() !!},
            labels: {!! $topByMarriageBlueprint->pluck('label')->toJson() !!},
        });
        chart.render();
    </script>
@endpush