@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/selectize/selectize.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">Dashboard</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    
    <div class="card">
        <div class="card-body">
            <h4 class="header-title mb-2">{{$graph->name}}</h4>

            <div id="cardCollpase4" class="collapse pt-3 show">
                @if($graph->agg_type == 'individual')
                <div class="btn-group mb-2">
                    <button type="button" class="btn btn-info leaderboard-prev" {{$graph->current_level==$graph->level?'disabled':''}}><i class="mdi mdi-play mdi-rotate-180 mdi-18px"></i></button>
                    <button type="button" class="btn btn-info">Level {{$graph->current_level}}</button>
                    <button type="button" class="btn btn-info leaderboard-next" {{$graph->current_level==1?'disabled':''}}><i class="mdi mdi-play mdi-18px"></i></button>
                </div>
                @endif
                <div class="table-responsive">
                    <table class="table table-centered table-nowrap table-borderless mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Rank</th>
                                <th colspan="2">User</th>
                                <th>Designation</th>
                                <th>Units</th>
                                <th>Percent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($graph->values as $i => $val)
                            <tr>
                                <td><img src="https://ui-avatars.com/api/?background={{$i>3?$colors[4]:$colors[$i]}}&name={{$val->rank}}" class="avatar-md"></td>
                                <td><img src="{{$val->user->avatar}}" class="avatar-sm rounded-circle"></td>
                                <td style="text-align:left;">{{$val->user->name}}</td>
                                <td>{{$val->user->designation}}</td>
                                <td>{{round($val->score, 2)}}</td>
                                <td>{{$graph->values[0]->rank != 0 ? ($graph->values[0]->rank == 1 ? ($graph->values[0]->score ? ceil(($val->score/$graph->values[0]->score)*100) : 0) : ($graph->values[1]->score ? ceil(($val->score/$graph->values[1]->score)*100) : 0 ) ) : 0 }}%</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div> <!-- .table-responsive -->
            </div> <!-- end collapse-->
        </div>
    </div>


    <div class="row">
        @foreach($metrics as $metric)
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <!-- <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            @foreach($metric->available_charts as $chart)
                            <a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}&period={{$metric->periods[0]->value}}" class="dropdown-item">{{$chart->name}} Chart</a>
                            @endforeach
                        </div>
                    </div> -->
                    <h4 class="header-title mb-0">{{$metric->name}}</h4>
                    <h6>{{$metric->periods[0]->label}}</h6>
                    <div class="widget-chart text-center" dir="ltr">
                        <div id="chart-{{$metric->id}}" class="mt-0" data-colors="#f1556c"></div>
                        <h5 class="text-muted mt-0">{{$metric->label}}</h5>
                        <h2>{{$metric->value}}</h2>
                        <div class="button-list">
                            @foreach($metric->available_charts as $chart)
                                <a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}&period={{$metric->periods[0]->value}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
        @endforeach
    </div>
    <!-- end row -->

    @if(array_key_exists('value', $submission) )
        <div class="row">
            <div class="col-12 p-0">
                <div class="card">
                    <div class="card-body">
                        <div class="responsive-table-plugin">
                            <div class="table-rep-plugin">
                                <div class="table-responsive" data-pattern="priority-columns">
                                    <table id="tech-companies-1" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th data-priority="1">Last Accessment</th>
                                                <th data-priority="1">{{date("M Y", strtotime($submission['value']->record_date))}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $ques = ['area_of_strength','area_of_development','coaching_objective','development_time_frame','next_coaching_visit','development_action_plan'];
                                            @endphp
                                            @foreach($submission['questions'] as $code => $question)
                                            @if(in_array($code, $ques))
                                            <tr>
                                                <th>{{$question->label}}</th>
                                                @if(count((array)$question->options) > 0)
                                                <td>{{ isset($question->options->{ $submission['value']->formdata->{$code} }) ? $question->options->{ $submission['value']->formdata->{$code} } : $submission['value']->formdata->{$code} }}</td>
                                                @else
                                                <td>{{  $submission['value']->formdata->{$code} }}</td>
                                                @endif
                                            </tr>
                                            @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div> <!-- end .table-responsive -->

                            </div> <!-- end .table-rep-plugin-->
                        </div> <!-- end .responsive-table-plugin-->

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
    @endif


</div> <!-- container -->
<style type="text/css">
    .apexcharts-legend {display: none;}
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<!-- third party js ends -->

<script type="text/javascript">
    jQuery(document).ready(function($){
        var colors = ['#01C14B', '#FF8050', '#4A5CD0', '#FECD00', '#707070'];
        var dataColors = $("#total-revenue").data('colors');
        if (dataColors) {
            colors = dataColors.split(",");
        }
        let options = {}
        let chart = {}
        let values = []
        @foreach($metrics as $metric)
            @if($metric->agg_type == 'individual')
                @if($metric->type == 'grouped')
                    values = {!!json_encode($metric->values)!!}
                    options = {
                      series: values.map(a => a.value),
                      chart: {
                      width: 250,
                      type: 'pie',
                      animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 2000,
                      }
                    },
                    labels: values.map(a => a.label),
                    responsive: [{
                      breakpoint: 480,
                      options: {
                        chart: {
                          width: 250
                        },
                        legend: {
                          position: 'bottom'
                        }
                      }
                    }]
                    };
                @elseif($metric->type == 'simple')
                    options = {
                        series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
                        chart: {
                            height: 250,
                            type: 'radialBar',
                            animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                            }
                        },
                        plotOptions: {
                            radialBar: {
                                startAngle: -90,
                                endAngle: 270,
                                hollow: {
                                    size: '58%',
                                }
                            },
                        },
                        fill: {
                          type: 'gradient',
                          gradient: {
                              shade: 'light',
                              shadeIntensity: 0.15,
                              inverseColors: false,
                              opacityFrom: 1,
                              opacityTo: 1,
                              stops: [0, 50, 65, 91]
                          },
                        },
                        stroke: {
                          dashArray: 7
                        },
                        colors: colors,
                        labels: ['{{$metric->label}}'],
                    };
                @endif
                
            @elseif($metric->agg_type == 'team')
                @if($metric->type == 'grouped')
                    values = {!!json_encode($metric->values)!!}
                    options = {
                      series: values.map(a => a.value),
                      chart: {
                      width: 250,
                      type: 'pie',
                      animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 2000,
                      }
                    },
                    labels: values.map(a => a.label),
                    responsive: [{
                      breakpoint: 480,
                      options: {
                        chart: {
                          width: 250
                        },
                        legend: {
                          position: 'bottom'
                        }
                      }
                    }]
                    };
                @elseif($metric->type == 'simple')
                    options = {
                        series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
                        chart: {
                            height: 250,
                            type: 'radialBar',
                            animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                              }
                        },
                        plotOptions: {
                            radialBar: {
                                hollow: {
                                    size: '68%',
                                }
                            },
                        },
                        fill: {
                          type: 'gradient',
                          gradient: {
                              shade: 'dark',
                              shadeIntensity: 0.15,
                              inverseColors: false,
                              opacityFrom: 1,
                              opacityTo: 1,
                              stops: [0, 50, 65, 91]
                          },
                        },
                        stroke: {
                          dashArray: 4
                        },
                        colors: colors,
                        labels: ['{{$metric->label}}'],
                    };
                @endif
            @endif
            chart = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
            chart.render();
        @endforeach
    });
</script>


@endsection