@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: 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;
            }

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

            ul.no-bullets {
                list-style-type: none; 
            }
            /* #statusproyek{
                width: 400px;
                height: 400px;
                margin: 0 auto;
            } */
    </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">Dashboard</h4>
            </div>
        </div>
    </div>
    <!-- end page title --> 

    <div class="col-xl-12">
        <div class="float-end">
            <h6><span class="">{{ Carbon\Carbon::parse(now()->toDateTimeString())->format('d-M-Y') }} </span></h6>
        </div>
    </div>

    <div class="col-xl-12 card">
        <div class="row card-body">        
            <div class="col-xl-9">                   
                        <div class="float-left mr-auto">                            
                        @can('Dashboard Filter')
                        <form class="form-control form-inline" action="{{ route('dashboard') }}" method="GET">
                            @csrf
                            <div class="row"> 
                                <div class="col"> 
                                    <div class="input-group mb-0">
                                        <label for="project_owner" class="form-label">Select Project Title</label>
                                        <select class="select2 form-control" multiple data-toggle="select2" name="project_id[]">
                                            <option readonly value="">Select Project Title</option>        
                                            @foreach ($pr as $row )
                                                <option value="{{ $row->id }}">{{ $row->project_name??'' }}</option>
                                            @endforeach        
                                        </select>
                                    </div>
                                </div>
                                <div class="col"> 
                                    <div>
                                        <label for="project_owner" class="form-label">From</label><br>
                                        <input type="date" class="form-control" name="start_date">
                                    </div>   
                                </div>
                                <div class="col">                                           
                                    <div>
                                        <label for="project_owner" class="form-label">To</label><br>
                                        <input type="date" class="form-control" name="end_date">
                                    </div>
                                </div>
                                <div class="col mt-3"> 
                                    <div class="input-group mb-0">            
                                        <button type="submit" class="btn btn-primary btn-sm ms-3 find">Find</button>&nbsp;
                                        @role('Employee')
                                            <a href="{{ route('dashboard_employee') }}" class="btn btn-warning btn-sm ms-3 find">Reset</a>
                                        @else
                                            <a href="{{ route('dashboard') }}" class="btn btn-warning btn-sm ms-3 find">Reset</a>
                                        @endrole    
                                    </div>   
                                </div>  
                            </div>                                                            
                        </form>
                        @endcan
                        </div>
                <div class="clearfix"></div> 
            </div> 
            <div class="col-xl-3 mt-4">
                @can('Dashboard Download')
                <div class="col-12">                            
                    <input type="button" class="btn btn-success btn-sm ms-3" id="download" value="Dashboard Download">                   
                </div>
                @endcan
            </div>
        </div>
        <div class="row card-body">
            <div class="col-xl-12">
                <div class="row float-center mr-auto">
                    <div class="col card text-center text-bg-primary p-3" style="background-color: blue; margin-right:5px;">
                        <div>
                            <label for="project_owner" class="form-label" style="color: #ffffff;">Total Projects</label><br>
                            <h2 style="color: #ffffff;">{{ $data['project'] }}</h2>
                        </div>   
                    </div>
                    <div class="col card text-center text-bg-primary p-3" style="background-color: red; margin-right:5px;">
                                <div>
                                    <label for="project_owner" class="form-label" style="color: #ffffff;">Not Started</label><br>
                                    <h2 style="color: #ffffff;">{{ $data['not_started'] }}</h2>
                                </div> 
                    </div>
                    <div class="col card text-center text-bg-primary p-3" style="background-color: #f58012; margin-right:5px;">
                                <div>
                                    <label for="project_owner" class="form-label" style="color: #ffffff;">In Progress</label><br>
                                    <h2 style="color: #ffffff;">{{ $data['in_progress'] }}</h2>
                                </div>  
                    </div>
                    <div class="col card text-center text-bg-primary p-3" style="background-color: green; margin-right:5px;">
                                <div>
                                    <label for="project_owner" class="form-label" style="color: #ffffff;">Done</label><br>
                                    <h2 style="color: #ffffff;">{{ $data['done'] }}</h2>
                                </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>

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

        <div class="row mt-4">
            <div class="col-md-4 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">Estimate Delivery</h5>                                       
                                        </td>
                                        <td>
                                            <h6><span class="badge bg-danger">{{ $data_progress['estimate_delivery']??'' }} Days</span> <span class="badge bg-danger">Behind on Schedule</span></h6>  <br/>
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>
                                            <h5 class="font-14 my-1">Gap Status</h5>
                                        </td>
                                        <td>
                                            <h6><span class="badge {{ $data_progress['gap_color']??'' }}"  data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="{{ $data_progress['gap_note']??'' }}">{{ $data_progress['gap_status']??'' }} %</span>&nbsp;&nbsp; <span class="badge {{ $data_progress['gap_color']??'' }}">{{ $data_progress['gap_note']??'' }}</span></h6>  <br/>
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>
                                            <h5 class="font-14 my-1">Progress Status</h5>
                                        </td>
                                        <td>
                                            <h5><span class="badge bg-primary">{{ $data_progress['progress']??'' }} %</span></h5>
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>
                                            <ol>
                                                <li>Planning</li>
                                                <li>Procurement</li>
                                                <li>Implementation</li>
                                                <li>Closing</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul class="no-bullets">
                                            @foreach ($data_progress['progress_status'] as $val_prog)
                                                <li>{{ $val_prog }} %</li>
                                            @endforeach
                                            </ul>
                                        </td>                                    
                                    </tr>
                                    
                                    
                                </tbody>
                            </table>
                        </div>
        
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-7">
                        <div class="card" style="height: 475px;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="header-title"><span class="badge bg-primary">Progress Task</span></h4>                                                   
                                </div>
                                <div dir="">
                                    <figure class="highcharts-figure">
                                        <div id="statusproyek"></div>                            
                                    </figure>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="col-5">
                        <div class="card" style="height: 475px; overflow-y:auto;">
                            <div class="card-body">
                                <div>
                                    <h5><span class="badge bg-primary">Project Name:</span></h5>
                                </div>
                                <div class="align-items-center">
                                    <table>
                                        @foreach ($project_names as $pname)
                                            <tr>
                                                <td><span><i class="mdi mdi-arrow-right-thin"></i></span>{!! $pname !!}</td>
                                            </tr>
                                        @endforeach                                
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             
                
            </div>
        </div>
        
        <!-- end row-->


        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title"><span class="badge bg-primary">Progress</span></h4>
                        <a href="{{ route('seeallProgress').'?'.optional($qs)[1] }}"><p style="float: right;"><span class="badge bg-primary">See all</span></p></a> 
                        <div dir="ltr">
                            <figure class="highcharts-figure">
                                <div id="progress"></div>                            
                            </figure>
                        </div>
                    </div>
                    <!-- end card body-->
                </div>
            </div><!-- end col-->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title"><span class="badge bg-primary">Cost</span></h4>
                        <a href="{{ route('seeallCost').'?'.optional($qs)[1] }}"><p style="float: right;"><span class="badge bg-primary">See all</span></p></a> 
                        <div dir="ltr">
                            <figure class="highcharts-figure">
                                <div id="cost"></div>                            
                            </figure>
                        </div>
                    </div>
                    <!-- end card body-->
                </div>
                <!-- end card -->
            </div>
        </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: 2
        }).then(canvas => {
            var img = canvas.toDataURL("image/png");
            var doc = new jsPDF('landscape');
            doc.setFont('Arial');
            doc.getFontSize(11);

            // Add a rectangle with white background as the card
            doc.setFillColor(255, 255, 255); // White color
            doc.rect(7, 14, 280, 150, 'F');

            // Add the image on top of the white rectangle
            doc.addImage(img, 'PNG', 7, 14, 280, 150);

            doc.save('download-dashboard');
            });
        }

    </script>
    
    <script nonce="{{ csp_nonce() }}">

        Highcharts.chart('statusproyek', {
            chart: {
                type: 'pie',
                width: 400,
                height: 375
            },
            title: {
                text: null // Judul chart
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    size: 160,
                    dataLabels: {
                        enabled: true,
                        color: '#000', // Warna teks nilai
                        formatter: function() {
                            return this.point.name + ': ' + this.point.y; // Menampilkan label dan nilai
                        }
                    }
                }
            },
            series: [{
                name: 'Status', // Nama data series
                colorByPoint: true,
                colors: {!! $status_color !!},
                data: [
                    @foreach($title_status as $index => $status)
                        {
                            name: '{!! $status !!}', // Label status
                            y: {!! $dat[$index] !!} // Nilai status
                        },
                    @endforeach
                ]
            }],
            legend: {
                enabled: true, // Tampilkan legenda
                align: 'center',
                verticalAlign: 'bottom',
                labelFormatter: function() {
                    const series = this.chart.series[0];
                    const point = series.data[this.index];
                    const color = point.color; // Warna dari series

                    return '<span style="color:' + color + '">' + this.name + '</span>';
                }
            }
        });

       
        Highcharts.chart('progress', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Actual Vs Plan (%)'
            },
            xAxis: {                
                categories: {!! json_encode(array_slice($nama, 0, 3)) !!},
            },
            yAxis: {
                max: 100,
                title: {
                    text: 'Persentase'
                },
                visible: false,
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Plan',
                color: '#6EBEF4',
                data:  {!! json_encode(array_slice($target, 0, 3)) !!},
               
            }
            , {
                name: 'Actual',
                color: 'lightgreen',
                data: {!! json_encode(array_slice($realisasi, 0, 3)) !!},
               
            }
            ]
        });
    </script>
    <script nonce="{{ csp_nonce() }}">
            Highcharts.chart('cost', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Cost x Plan x Budget'
            },           
            xAxis: {
                categories: {!! json_encode(array_slice($costnama, 0, 3)) !!},
                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} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Actual',
                color: '#08c355',
                data: {!! json_encode(array_slice($costactual, 0, 3)) !!}

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

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

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

    
@endsection