@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>     
                <form class="" id="search_form" style="margin-top: 15px;">       
                    <div class="row mb-4">      
                        <div class="col-md-4" >
                            <select class="form-control" id="location_id" style="width:100%">
                                <option value="" selected="selected">Semua Lokasi</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location['id'] }}">{{ $location['description'] }}</option>
                                @endforeach
                            </select>
                        </div>   
                        <div class="col-md-4">
                            <select class="form-control" id="year" style="padding:5px 5px;">
                                <option hidden value="">year</option>
                                {{ $last= 2017 }}
                                {{ $now = date('Y') }}      
                                @for ($i = $now; $i >= $last; $i--)
                                    @if($i == $now)
                                        <option selected value="{{ $i }}">{{ $i }}</option>
                                    @else
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endif
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                        </div> 
                    <div>                   
                </form>
            </div>            
            <div class="col-md-12">
                <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 id="jumlah_permohonan"></h3> 
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanSps::ACTIVE) }}" 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 Diluluskan</h4>
                        <h3 id="permohonan_diluluskan"></h3>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanSade::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 Ditolak</h4>
                        <h3 id="permohonan_ditolak"></h3>
                    </a>
                </div>
            </div>
        </div>

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

        <div class="row mb-3">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="racebarchart"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="racepiechart"></div>
                </div>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card card-body">
                    <div id="genderbarchart"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-body">
                    <div id="coveragebarchart"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-body">
                    <div id="coveragepiechart"></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>       

        $( document ).ready(function() {
            $location_id = $('#location_id option:selected').val();
            $year = $('#year option:selected').val();
            var data = {
                _token: '{{ csrf_token() }}',
                location_id: $location_id,
                year:$year
            };
            $.ajax({
                url: '{{ url('admin/permohonan/sps/getdashboardData') }}',
                type: 'POST',
                data: data,
                async: true,
                success: function(response) 
                {  
                    renderstatusbarchart(response.statsbystatusbar);                    
                    renderstatuspiechart(response.statsbystatuspie.series, response.statsbystatuspie.labels);
                    renderracebarchart(response.statsByRacebar);
                    renderracepiechart(response.statsByRacepie.series, response.statsByRacepie.labels);
                    rendergenederbarchart(response.statsByGenderbar);
                    rendercoveragebarchart(response.statsByCoveragebar);
                    rendercoveragepiechart(response.statsByCoveragepie.series, response.statsByCoveragepie.labels);
                   
                    $('#jumlah_permohonan').text(response.total);
                    $('#permohonan_diluluskan').text(response.approved);
                    $('#permohonan_ditolak').text(response.rejected);                      
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check your console.error().',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });
        });

        $('#filter').click(function () {
            $location_id = $('#location_id option:selected').val();
            $year = $('#year option:selected').val();
            var data = {
                _token: '{{ csrf_token() }}',
                location_id: $location_id,
                year:$year
            };
            $.ajax({
                url: '{{ url('admin/permohonan/sps/getdashboardData') }}',
                type: 'POST',
                data: data,
                async: true,
                success: function(response) 
                {  
                    renderstatusbarchart(response.statsbystatusbar);                    
                    renderstatuspiechart(response.statsbystatuspie.series, response.statsbystatuspie.labels);
                    renderracebarchart(response.statsByRacebar);
                    renderracepiechart(response.statsByRacepie.series, response.statsByRacepie.labels);
                    rendergenederbarchart(response.statsByGenderbar);
                    rendercoveragebarchart(response.statsByCoveragebar);
                    rendercoveragepiechart(response.statsByCoveragepie.series, response.statsByCoveragepie.labels);
                   
                    $('#jumlah_permohonan').text(response.total);
                    $('#permohonan_diluluskan').text(response.approved);
                    $('#permohonan_ditolak').text(response.rejected);                      

                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check your console.error().',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });
        });


        function renderstatusbarchart(data) 
        {
            var chart = new ApexCharts(document.querySelector("#statusbarchart"), {
            title: { text: 'Status Permohonan' },
            series: [{ name: '', data: data }],
            chart: { type: 'bar', height: 280 },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {                
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
            });
            chart.render();

        }
        function renderracebarchart(data) 
        {
            var chart = new ApexCharts(document.querySelector("#racebarchart"), {
            title: { text: 'Bangsa' },
            series: [{ name: '', data: data }],
            chart: { type: 'bar', height: 280 },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {                
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
            });
            chart.render();
        }
        function rendergenederbarchart(data) 
        {
            var chart = new ApexCharts(document.querySelector("#genderbarchart"), {
            title: { text: 'Jantina' },
            series: [{ name: '', data: data }],
            chart: { type: 'bar', height: 280 },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {                
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
            });
            chart.render();
        }
        function rendercoveragebarchart(data)  
        {
            var chart = new ApexCharts(document.querySelector("#coveragebarchart"), {
            title: { text: 'Coverage' },
            series: [{ name: '', data: data }],
            chart: { type: 'bar', height: 280 },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {                
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
            });
            chart.render();
        }



        function renderstatuspiechart(series, labels) 
        {
            var intSeries = series.map(function (x) { 
                return parseFloat(x, 10); 
            });
            var chart = new ApexCharts(document.querySelector("#statuspiechart"), {
                title: { text: 'Status Permohonan' },
                chart: { type: 'pie', height: 295 },
                legend: { show: true, position: 'left' },
                series: intSeries,
                labels: labels,
            });
            chart.render();
        }
        function renderracepiechart(series, labels) 
        {            
            var intSeries = series.map(function (x) { 
                return parseFloat(x, 10); 
            });
            var chart = new ApexCharts(document.querySelector("#racepiechart"), {
                title: { text: 'Bangsa' },
                chart: { type: 'pie', height: 295 },
                legend: { show: true, position: 'left' },
                series: intSeries,
                labels: labels,
            });
            chart.render();
        }

        
        function rendercoveragepiechart(series, labels)
        {
            var intSeries = series.map(function (x) { 
                return parseFloat(x, 10); 
            });
            var chart = new ApexCharts(document.querySelector("#coveragepiechart"), {
                title: { text: 'Coverage' },
                chart: { type: 'pie', height: 295 },
                legend: { show: true, position: 'left' },
                series: intSeries,
                labels: labels,
            });
            chart.render();
        }
        
    </script>
@endpush