@extends('admin.partial.admin_master')
@section('title')
<title>Project Lists | 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 href="{{ asset('backend/assets/css/vendor/dataTables.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/responsive.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/buttons.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/select.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/fixedHeader.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/fixedColumns.bootstrap5.css') }}" rel="stylesheet" type="text/css" />  
    <link href="{{ asset('backend/assets/css/fontawesome.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('backend/assets/css/toastr.css') }}" rel="stylesheet" />
    <style nonce="{{ csp_nonce() }}">
        .bold{
            font-weight: bold;
        }

        .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;
        }
    </style>

@endsection
@section('main')
@can('Detail WBS')
<!-- Start Content-->
<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"><a href="#">Detil Project</a></li>
                    </ol>
                </div>
                <h4 class="page-title">Detil Project | {{ $project->project_name??'' }}</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 
    <!--planning -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <a href="{{ route('project.index') }}" class="btn btn-primary btn-sm">Back</a><h4><span class="">PLAN</span></h4>
                    @can('Report')
                        <a href="{{ route('wbs.downloadwbsrencana',encrypt($project->id)) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="PDF Download"><i class="mdi mdi-file-pdf-box"></i></a>
                        <a href="{{ route('wbs.downloadwbsXls',[encrypt($project->id),'type'=>'planning']) }}" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Xls Download"><i class="mdi mdi-microsoft-excel"></i></a>
                    @endcan
                    @if($project->status != "Started")
                        <a href="{{ route('wbs.editplan',encrypt($project->id)) }}" class="btn btn-primary">Edit WBS</a>
                    @endif
                    <div class="tab-content">
                        <div class="tab-pane show active" >
                            <table id="scroll-vertical-datatable1" class="table table-striped dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Task Name</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>    
                                        <th>Bobot</th>
                                        <th>Progress</th>                      
                                        <th>Duration</th>                       
                                    </tr>
                                </thead>
                            
                            
                                <tbody>
                                    @foreach ($detil as $key=>$row )
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>@if ($row->level == 1)
                                            <ul>
                                                <li>{{ $row->name??'' }}</li>
                                            </ul>
                                            @elseif ($row->level == 2)
                                            <ul style="list-style-type:none;">
                                                <li><ul style="list-style-type:square;">
                                                    <li>{{ $row->name??'' }}</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            @else
                                            {{ $row->name??'' }}
                                        @endif</td>                                                                   
                                        <td>{{ Carbon\Carbon::parse($row->start ??'')->isoFormat('D MMMM Y') ??'' }}</td>
                                        <td>{{ Carbon\Carbon::parse($row->end ??'')->isoFormat('D MMMM Y') ??'' }}</td> 
                                        <td>{{ $row->bobot??'' }}</td>
                                        <td>{{ $row->progress??'' }}</td>  
                                        <td>{{ $row->duration??'' }} Days</td>                     
                                    </tr>
                                    @endforeach                    
                                </tbody>
                            </table>                     
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--actual -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{-- {{ $actname->project_id }} --}}
                    <h4><span class="">ACTUAL</span></h4>                    
                    @can('Report')
                        <a href="{{ route('wbs.downloadwbsaktual',encrypt($project->id)) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="PDF Download"><i class="mdi mdi-file-pdf-box"></i></a>
                        <a href="{{ route('wbs.downloadwbsXls',[encrypt($project->id),'type'=>'actual']) }}" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Xls Download"><i class="mdi mdi-microsoft-excel"></i></a>
                    @endcan
                    <div class="row mt-5">
                        <div class="col-3">
                            <div class="card text-white bg-success">
                            <div class="card-body text-center">
                                <h4>Total Progress</h4>
                                <h1>{{ $line?collect($line)->sort()->last()."%":"" }}</h1>
                            </div>
                            
                            </div>
                        </div>
                        <div class="col-9">
                            <figure class="highcharts-figure">
                                <div id="actual"></div>                
                            </figure>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane show active">
                            <table id="scroll-vertical-datatable" class="table table-striped dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Task Name</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Bobot</th> 
                                        <th>Progress</th>                       
                                        <th>Duration</th>                       
                                    </tr>
                                </thead>
                            
                            
                                <tbody>
                                    @foreach ($actual as $key=>$row )
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>@if ($row->level == 1)
                                            <ul>
                                                <li>{{ $row->name??'' }}</li>
                                            </ul>
                                            @elseif ($row->level == 2)
                                            <ul style="list-style-type:none;">
                                                <li><ul style="list-style-type:square;">
                                                    <li>{{ $row->name??'' }}</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            @else
                                            {{ $row->name??'' }}
                                        @endif</td>                                                                   
                                        <td>{{ Carbon\Carbon::parse($row->start ??'')->isoFormat('D MMMM Y') ??'' }}</td>
                                        <td>{{ Carbon\Carbon::parse($row->end ??'')->isoFormat('D MMMM Y') ??'' }}</td>   
                                        <td>{{ $row->bobot??'' }}</td>
                                        <td>{{ $row->progress??'' }}</td>
                                        <td>{{ $row->duration??'' }} Days</td>                     
                                    </tr>
                                    @endforeach                    
                                </tbody>
                            </table>                     
                        </div>
                    </div>

                </div>
            </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/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.print.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/fixedColumns.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/fixedHeader.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.datatable-init.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.datatable-init1.js') }}"></script>
    <script src="{{ asset('backend/assets/js/toastr.js') }}"></script>
    <script src="{{ asset('backend/assets/js/sweetalert2.all.min.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 nonce="{{ csp_nonce() }}">
        Highcharts.chart('actual', {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'S Curve'
            },
            // subtitle: {
            //     text: 'S Curve'
            // },
            xAxis: {
                categories: {!! json_encode($categories) !!},
                crosshair: true,
                title: {
                    text: "{{ $xaxis_title }}"
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Progress'
                }
            },
            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} %</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Planning',
                data:{!! json_encode($data) !!}
            },
            {
                type: 'spline',
                name: 'Realisasi',
                data: {!! json_encode($line) !!},
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[5],
                    fillColor: 'white'
                }
            }]
        });
    </script>   
    
@endsection