@extends('admin.partial.admin_master')
@section('title')
<title>Project Dashboard | Project Monitoring Sistem</title>
@endsection
@section('css')
    <link href="{{ asset('backend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style"/>
    <link rel="stylesheet" href="{{ asset('jqueryui113/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ asset('datepicker/bootstrap-datepicker.css') }}">
    <style nonce="{{ csp_nonce() }}">
        .export {
            float: right;
            border-radius: 10%;
        }
        .btn-jingga {
            background-color: #f9dcdc;
            color: red;
        }
        .btn-ungu {
            background-color: #b7abf4;
            color: blue;
        }

        .find{
            float: left;
            margin-top: 8px;
        }

        .export{
            margin-top: 8px;
        }
        /* chart progress */
        .highcharts-figure,
            .highcharts-data-table table {
                min-width: 600px;
                max-width: 1900px;
                margin: 1em auto;
            }

            #container {
                height: 400px;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #ebebeb;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }

            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }

            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }

            .highcharts-data-table td,
            .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }

            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }

            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }
        /* end chart progress  */
            /* chart cost  */
            .highcharts-figure,
                .highcharts-data-table table {
                    min-width: 600px;
                    max-width: 1900px;
                    margin: 1em auto;
                }

                #cost {
                    height: 400px;
                }

                .highcharts-data-table table {
                    font-family: Verdana, sans-serif;
                    border-collapse: collapse;
                    border: 1px solid #ebebeb;
                    margin: 10px auto;
                    text-align: center;
                    width: 100%;
                    max-width: 500px;
                }

                .highcharts-data-table caption {
                    padding: 1em 0;
                    font-size: 1.2em;
                    color: #555;
                }

                .highcharts-data-table th {
                    font-weight: 600;
                    padding: 0.5em;
                }

                .highcharts-data-table td,
                .highcharts-data-table th,
                .highcharts-data-table caption {
                    padding: 0.5em;
                }

                .highcharts-data-table thead tr,
                .highcharts-data-table tr:nth-child(even) {
                    background: #f8f8f8;
                }

                .highcharts-data-table tr:hover {
                    background: #f1f7ff;
                } 
            /* end of chart cost  */
            /* chart status proyek */
            .highcharts-figure,
            .highcharts-data-table table {
                min-width: 600px;
                max-width: 1900px;
                margin: 1em auto;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #ebebeb;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }

            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }

            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }

            .highcharts-data-table td,
            .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }

            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }

            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }

            input[type="number"] {
                min-width: 50px;
            }

            .highcharts-credits{
                display: none;
            }
            /* end chart status proyek */

            ul.no-bullets {
                list-style-type: none; 
            }

        .costChart {
            min-width: {!! $sizechart['minwidth'] !!};
            max-width: {!! $sizechart['maxwidth'] !!};
            height: 400px;
            width: {!! $sizechart['width'] !!};
        }
    </style>
@endsection
@section('main')
@can('Dashboard')
<div class="container-fluid">
                        
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">                                           
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">All Progress</li>
                    </ol>
                </div>
                <h4 class="page-title">All Progress</h4>
            </div>
        </div>
    </div>
    <!-- end page title --> 

    


    <div class="form" id="capture">

       

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title"><span class="badge bg-primary">Progress</span></h4>                        
                        <div class="2" dir="ltr">
                            <figure class="highcharts-figure">
                                <div class="costChart" id="Progress"></div>                            
                            </figure>
                        </div>
                    </div>
                    <!-- end card body-->
                </div>
            </div><!-- end col-->            
        </div>
   

    </div>
   

    
</div>
@endcan 
@endsection
@section('js')
<script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/app.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/chart.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/apexcharts.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/jquery-jvectormap-1.2.2.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/jquery-jvectormap-world-mill-en.js') }}"></script>
    <script src="{{ asset('highchart/highcharts.js') }}"></script>
    {{-- <script src="{{ asset('highchart/exporting.js') }}"></script> --}}
    <script src="{{ asset('highchart/export-data.js') }}"></script>
    <script src="{{ asset('highchart/export-data.js') }}"></script>
    <script src="{{ asset('highchart/variable-pie.js') }}"></script>
    <script src="{{ asset('highchart/accessibility.js') }}"></script>
    <script src="{{ asset('chartjs/chart.js') }}"></script>
    <script src="{{ asset('datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('jqueryui113/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('jspdf/jspdf.umd.min.js') }}"></script>
    <script src="{{ asset('jspdf/html2canvas.min.js') }}"></script>
    <script src="{{ asset('jspdf/html2canvas.js') }}"></script>

    <script nonce="{{ csp_nonce() }}">
        window.html2canvas = html2canvas;
        window.jsPDF = window.jspdf.jsPDF;

        $('#download').on('click',function(){
            $('body').scrollTop(0); 
            makePDF();
        });

        function makePDF(){
            html2canvas(document.querySelector('#capture'),{
                allowTaint: true,
                useCORS: true,
                scale: 1
            }).then(canvas => {
                // document.body.appendChild(canvas)
                var img = canvas.toDataURL("image/png");
                var doc = new jsPDF();
                doc.setFont('Arial');
                doc.getFontSize(11);
                doc.addImage(img,'PNG',7,14,200,105); //(img,'PNG','margin-kiri','margin-atas','margin-kanan','margin-bawah')
                doc.save('download-dashboard');
            });
        }
    </script>
    
    <script nonce="{{ csp_nonce() }}">
        Highcharts.chart('progress', {
            chart: {
                type: 'bar',
                marginLeft: 150,
                scrollablePlotArea: {
                    minWidth: {!! $sizechart['chartminWidth'] !!},
                    scrollPositionX: 0
                }
            },
            title: {
                text: 'Actual Vs Plan (%)'
            },
            xAxis: {
                categories: {!! json_encode($nama) !!},
                labels: {
                    overflow: 'justify'
                },
                crosshair: true
            },
            yAxis: {
                max: 100,
                title: {
                    text: 'Persentase'
                }
                // visible: false
            },
            plotOptions: {
                // series: {
                //         stacking: 'normal',
                //         dataLabels: {
                //             enabled: true
                //         }
                //     },
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Plan',
                color: '#6EBEF4',
                data:  {!! json_encode($target) !!},

            }, {
                name: 'Actual',
                color: 'lightgreen',
                data: {!! json_encode($realisasi) !!},

            }]
        });
</script>

    <script nonce="{{ csp_nonce() }}">
        $('.date-own').datepicker({
           minViewMode: 2,
           format: 'yyyy'
         });
         $('.date').datepicker({  
            format: 'yyyy-mm-dd'
        });
    </script>

    
@endsection