@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 -->
    @foreach($widgets as $widget)
        @widget($widget->widget_name, (array)$widget)
    @endforeach
    

    <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 -->

</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' || $metric->type == 'verses')
                    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