@extends('admin.partial.admin_master')
@section('title')
<title>Project Dashboard | Aplikasi Project Management</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: 310px;
                max-width: 800px;
                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: 310px;
                    max-width: 800px;
                    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: 320px;
                max-width: 800px;
                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;
            }
            /* end chart status proyek */
    </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="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Projects</li>
                    </ol>
                </div>
                <h4 class="page-title">Projects</h4>
            </div>
        </div>
    </div>
    <!-- end page title --> 

    <div class="row">
        @can('Dashboard Filter')
        <div class="col-md-3 col-sm-12">
            <label for="project_owner" class="form-label">Pilih Judul Project</label>
            <select class="select2 form-control" data-toggle="select2" name="project">
                <option readonly>Pilih Judul Project</option>        
                @foreach ($pr as $row )
                    <option value="{{ $row->id }}">{{ $row->project_name??'' }}</option>
                @endforeach        
            </select>
        </div>

        <div class="col-md-2 col-sm-12">
            <label for="project_owner" class="form-label">Tanggal Awal</label>
            <input type="text" class="form-control date" data-provide="datepicker" data-date-container="#datepicker1" name="start_date">
            {{-- <input class="date-own form-control" style="width: 100px;" type="text"> --}}
        </div> 
        
        <div class="col-md-2 col-sm-12">
            <label for="project_owner" class="form-label">Tanggal Akhir</label>
            <input type="text" class="form-control date" data-provide="datepicker" data-date-container="#datepicker1" name="end_date">
        </div>  
        <div class="col-md-2 col-sm-12 mt-3">            
            <button class="btn btn-primary btn-sm ms-3 find">Cari</button>
        </div>
        @endcan
        @can('Dashboard Download')
        <div class="col-md-3 col-sm-12 mt-3">            
            <button class="btn btn-success btn-sm ms-3 export">Export Pdf</button>
        </div>
        @endcan
        
    </div>
    <div class="row mt-4">
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h4 class="header-title"><span class="badge bg-primary">Overall Health</span></h4>                        
                    </div>

                    <div class="table-responsive">
                        <table class="table table-centered table-nowrap table-hover mb-0">
                            <tbody>
                                <tr>
                                    <td>
                                        <h5 class="font-14 my-1">Time</h5>
                                        {{-- <span class="text-muted font-13">Due in 3 days</span> --}}
                                    </td>
                                    <td>
                                        {{-- <span class="text-muted font-13">10% Behind on Sxhedule</span> <br/> --}}
                                        <h5><span class="badge bg-danger">{{ $tottime??'' }} %</span> <span class="badge bg-danger">Behind on Schedule</span></h5>  <br/>
                                        {{-- <span class="badge badge-warning-lighten">In-progress</span> --}}
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <h5 class="font-14 my-1">Project Status</h5>
                                        {{-- <span class="text-muted font-13">Due in 27 days</span> --}}
                                    </td>
                                    <td>
                                        <h5><span class="badge bg-success">{{ $total_project ?round($progress /$total_project):0 }} %</span> <span class="badge bg-success">Project Completed</span></h5>  <br/>
                                        {{-- <span class="badge badge-danger-lighten">Outdated</span> --}}
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <h5 class="font-14 my-1">Budget</h5>
                                        {{-- <span class="text-muted font-13">Due in 7 days</span> --}}
                                    </td>
                                    {{-- <td>
                                        <span class="text-muted font-13">Status</span> <br/>
                                        <span class="badge badge-success-lighten">Completed</span>
                                    </td>                                     --}}
                                </tr>
                                <tr>
                                    <td>
                                        <button class="btn btn-sm btn-jingga text-center">CAPEX</button>
                                        {{-- <span class="text-muted font-13">Due in 7 days</span> --}}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-ungu text-center">OPEX</button>
                                        {{-- <span class="text-muted font-13">Due in 7 days</span> --}}
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        {{-- <h5 class="font-14 my-1"><span>Rp.30.000.000,-</span></h5> --}}
                                        <h5 class="font-14 my-1"><span>Rp.{{ number_format($budget->capex??'') }},-</span></h5>
                                        {{-- <span class="text-muted font-13">Due in 7 days</span> --}}
                                    </td>
                                    <td>
                                        <h5 class="font-14 my-1"><span>Rp.{{ number_format($budget->opex??'') }},-</span></h5>
                                        {{-- <span class="text-muted font-13">Due in 7 days</span> --}}
                                    </td>                                    
                                </tr>
                                
                                
                            </tbody>
                        </table>
                    </div>
    
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="header-title"><span class="badge bg-primary">Status Proyek</span></h4>       
                                         
                    </div>
                    <figure class="highcharts-figure">
                        <div id="status_proyek"></div>                                
                    </figure>
                    
                   

                    {{-- <div class="chart-widget-list">
                        <div class="row">
                            <div class="col-sm-4">
                                <p>
                                    <i class="mdi mdi-square text-danger"></i> Not Started                                    
                                </p>
                            </div>
                            <div class="col-sm-4">
                            <p>
                                <i class="mdi mdi-square text-warning"></i> In Progress                                
                            </p>
                            </div>
                            <div class="col-sm-4">
                            <p class="mb-0">
                                <i class="mdi mdi-square text-success"></i> Completed                                
                            </p>
                            </div>
                        </div>                                                
                    </div> --}}
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div>
    </div>
    
    <!-- end row-->


    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title"><span class="badge bg-primary">Progress</span></h4>
                    <div dir="ltr">
                        <figure class="highcharts-figure">
                            <div id="progress"></div>                            
                        </figure>
                    </div>
                </div>
                <!-- end card body-->
            </div>
        </div><!-- end col-->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title"><span class="badge bg-primary">Cost</span></h4>
                    <div dir="ltr">
                        <figure class="highcharts-figure">
                            <div id="cost"></div>                            
                        </figure>
                    </div>
                </div>
                <!-- end card body-->
            </div>
            <!-- end card -->
        </div>
    </div>
   


   

    
</div>
@endcan 
@endsection
@section('js')
    <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('backend/assets/js/pages/demo.dashboard.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.dashboard-projects.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.apex-bar.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.apex-column.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('datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('jqueryui113/jquery-ui.min.js') }}"></script>
    <script nonce="{{ csp_nonce() }}">
        Highcharts.chart('progress', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Realisasi Vs Target (%)'
            },
            xAxis: {
                // categories: ['Project 1', 'Project 2', 'Project 3', 'Project 4', 'Project 5']
                categories: {!! json_encode($nama) !!},
            },
            yAxis: {
                max: 100,
                title: {
                    text: 'Persentase'
                }
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Target',
                color: '#d40c0c',
                data:  {!! json_encode($target) !!},
               
            }
            , {
                name: 'Realisasi',
                color: '#64c245',
                data: {!! json_encode($realisasi) !!},
               
            }
            ]
        });
    </script>
    <script nonce="{{ csp_nonce() }}">
            Highcharts.chart('cost', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Cost x Plan x Budget'
            },           
            xAxis: {
                categories: {!! json_encode($costnama) !!},
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'IDR'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Actual',
                color: '#08c355',
                data: {!! json_encode($costactual) !!}

            }, {
                name: 'Plan',
                color: '#ff7f50',
                data: {!! json_encode($costplan) !!}

            }, {
                name: 'Budget',
                color: '#380568',
                data: {!! json_encode($costbudget) !!}

            }]
        });
    </script>
    <script nonce="{{ csp_nonce() }}">
        $(document).ready(function() {
            var students =  null;
            var options = {
                chart: {
                    renderTo: 'status_proyek',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Status Proyek'
                },
                 tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                            dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type:'pie',
                    name:'Student'
                }]
            }
            myarray = [];
            $.each(students, function(index, val) {
                myarray[index] = [val.course, val.count];
            });
            options.series[0].data = myarray;
            chart = new Highcharts.Chart(options);
            
        });
    </script>
    <script nonce="{{ csp_nonce() }}">
        $('.date-own').datepicker({
           minViewMode: 2,
           format: 'yyyy'
         });
         $('.date').datepicker({  
            format: 'yyyy-mm-dd'
        });
    </script>

    
@endsection