@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-6">
            <div class="page-title-box">
                <h4 class="page-title">Dashboard</h4>
            </div>
        </div>
        <div class="col-6 mt-2">
            <a href="/index?refresh=1" class="btn btn-dark rounded waves-effect waves-light float-end">Refresh Data</a>
        </div>
    </div>
    <!-- end page title -->
    
    <div class="row">
        @foreach($metrics as $metric)
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-0">{{$metric->name}}</h4>
                    <h6>{{$metric->current_period}}</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}} {{$metric->type=='verses' ? ' / ' . $metric->max : ''}} </h2>
                        <div class="button-list">
                            @foreach($metric->available_charts as $chart)
                                <a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
        @endforeach
    </div>

    @foreach($widgets as $widget)
        @widget($widget->widget_name, (array)$widget)
    @endforeach
    <!-- end row -->
    @if(sizeof($campaigns) >0)
    <div class="row" id="campaign-wrapper">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">Campaigns</h4>
            </div>
        </div>
        @foreach($campaigns as $campaign)
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-0">{{$campaign->title}}</h4>
                    <h6>This Month</h6>
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center" dir="ltr">
                                <h2>{{$campaign->self_points->points}}</h2>
                                <h5>{{$campaign->self_points->text}}</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center" dir="ltr">
                                <h2>{{$campaign->team_rank->points}}</h2>
                                <h5>{{$campaign->team_rank->text}}</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center" dir="ltr">
                                <h2>{{$campaign->overall_rank->points}}</h2>
                                <h5>{{$campaign->overall_rank->text}}</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center" dir="ltr">
                                <h2>{{$campaign->rank_in_team->points}}</h2>
                                <h5>{{$campaign->rank_in_team->text}}</h5>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="button-list">
                                <div class="text-center" dir="ltr">
                                    <a href="/campaign/dashboard?id={{$campaign->id}}" class="btn btn-soft-blue btn-rounded">Dashboard</a>
                                    <a href="/campaign/report?id={{$campaign->id}}" class="btn btn-soft-blue btn-rounded">Detail View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
        @endforeach
    </div>
    @endif
</div> <!-- container -->
<div id="previewImg" class="d-none"></div>
<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>
<script src="{{asset('assets/js/html2canvas.min.js')}}" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- third party js ends -->

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.js-milestone-team-leaderboard').each(function() {
            var $box = $(this);
            var listUrl = $box.data('list-url');
            $.ajax({
                url: listUrl,
                type: 'GET',
                success: function(html) {
                    $box.html(html);
                },
                error: function() {
                    $box.html('<p class="text-danger mb-0">Unable to load leaderboards.</p>');
                }
            });
        });

        $(document).on('click', '.js-milestone-team-leaderboard .mlb-pill', function(e) {
            e.preventDefault();
            var $pill = $(this);
            var $card = $pill.closest('.mlb-card');
            var index = String($pill.data('index'));
            var detailsUrl = $pill.attr('data-details-url');
            var src = $card.find('.js-mlb-podium-src[data-index="' + index + '"]')[0];

            $card.find('.mlb-pill').removeClass('is-active').attr('aria-pressed', 'false');
            $pill.addClass('is-active').attr('aria-pressed', 'true');

            if (detailsUrl) {
                $card.find('.js-mlb-details').attr('href', detailsUrl);
            }
            if (src) {
                $card.find('.js-mlb-podium').html(src.innerHTML);
            }
        });

        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' || $metric->type == 'verses')
                    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%',
                                },
                                @if($metric->type == 'verses')
                                dataLabels: {
                                    name: { show: false },
                                    value: {
                                        show: true,
                                        offsetY: 8,
                                        fontSize: '22px'
                                    }
                                }
                                @endif
                            },
                        },
                        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->type == 'verses' ? '' : $metric->label}}'],
                    };
                @endif
            @endif
            chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
            chart['{{$metric->id}}'].render();
        @endforeach

        $('.dlscreenshot').click(function(){
            html2canvas(document.getElementById( $(this).attr('target') ), {
                allowTaint: true, useCORS: true
            }).then(function (canvas) {
                var anchorTag = document.createElement("a");
                document.body.appendChild(anchorTag);
                document.getElementById("previewImg").appendChild(canvas);
                anchorTag.download = "filename.jpg";
                anchorTag.href = canvas.toDataURL();
                anchorTag.target = '_blank';
                anchorTag.click();
            });
        })

    });
</script>


@endsection