@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">Metric Report</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row" id="graph-wrapper">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-2">{{$graph->name}}</h4>
                    <div class="row">
                        <div class="col-6 pt-1">
                            <p class="text-muted"> {!!$graph->agg_type == 'team' ? '<i class="mdi mdi-account-group" aria-hidden="true"></i>' : '<i class="mdi mdi-account" aria-hidden="true"></i>' !!} {{ucwords($graph->agg_type)}} Report</p>
                        </div>
                        <div class="col-6 pt-1">
                            <p class="text-end" text-muted><i class="mdi mdi-chart-box-plus-outline" aria-hidden="true"></i> {{ucwords($graph->type)}} Metric</p>
                        </div>
                        <div class="col-8">
                            <p class="text-muted"><i class="mdi mdi-calendar" aria-hidden="true"></i> {{$graph->valid_from}} to {{$graph->valid_till}}</p>
                        </div>
                        <div class="col-4 text-end">
                            @if((in_array($post['type'], ['trend','leaderboard']) && !in_array($post['chart'], ['line', 'bar']) ) || ($post['type'] == 'graphical' && $graph->type == 'grouped') || ($post['type'] == 'details' && $graph->chart == 'tabular') )
                            <button class="btn btn-dark btn-xs" id="export">Export</button>
                            <button class="btn btn-warning btn-xs" id="email-export">Send me Email</button>
                            @endif
                        </div>
                
                        <div class="col-md-8">
                            <div class="button-list">
                                @foreach($charts as $chart)
                                    @if(sizeof($chart->charts)>0)
                                    <a href="/metricreport/report?id={{$graph->id}}&type={{$chart->type}}&chart={{$chart->charts[0]}}&period={{$periods[0]->value}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}}</a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row mb-3">
                                <label for="period" class="col-6 col-xl-5 col-form-label">Select Period</label>
                                <div class="col-6 col-xl-7">
                                    <select class="form-control" id="period" name="period">
                                        @foreach($periods as $v)
                                        <option value="{{$v->value}}" {{$post['period'] == $v->value ? "selected":""}}>{{$v->label}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="button-list">
                        @foreach($charts as $chart)
                            @if($chart->type == $post['type'] && sizeof($chart->charts) > 1)
                                @foreach($chart->charts as $ch)
                                    <a href="/metricreport/report?id={{$graph->id}}&type={{$chart->type}}&chart={{$ch}}&period={{$periods[0]->value}}" class="btn btn-soft-warning btn-rounded">{{ucwords($ch)}}</a>
                                @endforeach
                            @endif
                        @endforeach
                    </div>

                    <div class="widget-chart text-center" dir="ltr">
                        @switch(true)
                            @case($graph->chart == 'leaderboard')
                                <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>
                                                @php
                                                $leader_id = '';
                                                @endphp
                                                @foreach($graph->values as $i => $val)
                                                    @if($leader_id != $val->user->id)
                                                    <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>
                                                    @endif
                                                @php
                                                $leader_id = $val->user->id;
                                                @endphp
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div> <!-- .table-responsive -->
                                </div> <!-- end collapse-->
                                @break
                            @case($graph->type == 'simple' && $post['type'] == 'trend' && $graph->chart == 'tabular')
                                <div id="cardCollpase4" class="collapse pt-3 show">
                                    <div class="table-responsive">
                                        <table class="table table-centered table-nowrap table-borderless mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Periods</th>
                                                    <th>{{$graph->label}}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($graph->values as $i => $val)
                                                <tr>
                                                    <td>{{$val->x}}</td>
                                                    <td>{{$val->y}}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div> <!-- .table-responsive -->
                                </div> <!-- end collapse-->
                                @break
                            @case($graph->type == 'grouped' && $post['type'] == 'trend' && $graph->chart == 'tabular')
                                <div id="cardCollpase4" class="collapse pt-3 show">
                                    <div class="table-responsive">
                                        <table class="table table-centered table-nowrap table-borderless mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Periods</th>
                                                    @foreach($graph->values as $met)
                                                    <th>{{$met->metric}}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($graph->values[0]->stats as $i => $stat)
                                                <tr>
                                                    <td>{{$stat->x}}</td>
                                                    @foreach($graph->values as $met)
                                                    <td>{{isset($met->stats[$i])?$met->stats[$i]->y:0}}</td>
                                                    @endforeach
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div> <!-- .table-responsive -->
                                </div> <!-- end collapse-->
                                @break
                            @case($post['type'] == 'details' && $graph->chart == 'tabular')
                                <div id="cardCollpase4" class="collapse pt-3 show">
                                    <div class="table-responsive">
                                        @if(isset($graph->values->metrics))
                                        <table class="table table-centered table-nowrap table-borderless mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th colspan="2">User</th>
                                                    <th>Employee Code</th>
                                                    <th>Zone</th>
                                                    <th>Region</th>
                                                    <th>Area</th>
                                                    <th>Territory</th>
                                                    @foreach($graph->values->metrics as $metric)
                                                        <th>{{$metric->metric}}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($graph->values->users as $user)
                                                <tr>
                                                    <td><img src="{{isset($user->avatar) ? $user->avatar : ''}}" class="avatar-sm rounded-circle"></td>
                                                    <td>{{ $user->name }} <br/>{{$user->designation}}</td>
                                                    <td>{{ isset($user->employee_code) ? $user->employee_code:''}}</td>
                                                    <td>{{ isset($user->positions->Zone) ? $user->positions->Zone : '-' }}</td>
                                                    <td>{{ isset($user->positions->Region) ? $user->positions->Region : '-' }}</td>
                                                    <td>{{ isset($user->positions->Area) ? $user->positions->Area : '-' }}</td>
                                                    <td>{{ isset($user->positions->Territory) ? $user->positions->Territory : '-' }}</td>
                                                    @foreach($graph->values->metrics as $metric)
                                                        <td>{{ isset($metric->stats->{$user->id}) ? $metric->stats->{$user->id} : '-' }}</th>
                                                    @endforeach
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        @endif
                                    </div> <!-- .table-responsive -->
                                </div> <!-- end collapse-->
                                @break
                            @default
                                <div id="chart-{{$graph->id}}" class="mt-0" data-colors="#f1556c"></div>
                                @if($post['type'] == 'value' || ($post['type'] == 'graphical' && $graph->chart = 'percentile' && $graph->type == 'simple' ))
                                <h5 class="text-muted mt-0">{{ $graph->type == 'simple' ? $graph->label : 'Total ' . $graph->name }}</h5>
                                <h2>{{$graph->value}}</h2>
                                @endif
                                @break
                        @endswitch
                        
                    </div>
                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

</div> <!-- container -->
@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($){
        $('#period').change(function(){
            let href = new URL(window.location.href);
            href.searchParams.set('period', $(this).val() );
            window.location.href = href.toString()
        });

        $('#graph-wrapper a').click(function(event) {
            event.preventDefault();
            $('.loader').show()
            console.log($(this).attr('href'))
            let href = new URL(document.location.origin + $(this).attr('href'));
            href.searchParams.set('period', $('#period').val() );
            window.location.href = href.toString()
        });

        $('.leaderboard-next').click(function(){
            let href = new URL(window.location.href);
            href.searchParams.set('level', {{$graph->current_level}}-1 );
            window.location.href = href.toString()
        })
        $('.leaderboard-prev').click(function(){
            let href = new URL(window.location.href);
            href.searchParams.set('level', {{$graph->current_level}}+1 );
            window.location.href = href.toString()
        })

        $('#export').click(function(){
            let href = new URL(window.location.href);
            window.location.href = href.origin + '/metricreport/export' + href.search
        })
        $('#email-export').click(function(){
            let href = new URL(window.location.href);
            $.get( href.origin + '/metricreport/export' + href.search + '&email=1', function( data ) {
              alert( "Email has been sent to your email id." );
            });
        })

        let colors = {!!json_encode($colors)!!};
        colors = colors.map(c => '#'+c)
        let options = {}
        let chart = {}
        let values = []
        colors.shift()
        @if($graph->type == 'grouped')
            @switch($post['type'])
                @case('graphical')
                    values = {!!json_encode($graph->values)!!}
                    @if($post['chart'] == 'pie')
                        options = {
                          series: values.map(a => a.value),
                              chart: {
                              width: 500,
                              type: 'pie',
                              animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                              }
                            },
                            labels: values.map(a => a.label),
                            responsive: [{
                              breakpoint: 480,
                              options: {
                                chart: {
                                  width: 300
                                },
                                legend: {
                                  position: 'bottom'
                                }
                              }
                            }]
                        };

                    @elseif($post['chart'] == 'bar')
                        options = {
                            series: [{
                                name: "{{$graph->label}}",
                                data: values.map(a => a.value)
                            }],
                            chart: {
                              height: 350,
                              type: '{{$post['chart']}}',
                              zoom: {
                                enabled: false
                              },
                              animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                              }
                            },
                            dataLabels: {
                              enabled: false
                            },
                            stroke: {
                              curve: 'straight'
                            },
                            
                            grid: {
                              row: {
                                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                                opacity: 0.5
                              },
                            },
                            xaxis: {
                              categories: values.map(a => a.label),
                            }
                        };
                    @endif
                    
                @break

                @case('trend')
                    values = {!!json_encode($graph->values)!!}
                    options = {
                        series: values.map(m => {
                            return {
                                name: m.metric,
                                data: m.stats.map(a => a.y)
                            }
                        }),
                        // series: [{
                        //     name: "{{$graph->label}}",
                        //     data: values.map(a => a.y)
                        // }],
                        chart: {
                          height: 350,
                          type: '{{$post['chart']}}',
                          zoom: {
                            enabled: false
                          },
                          animations: {
                            enabled: true,
                            easing: 'easeinout',
                            speed: 2000,
                          }
                        },
                        dataLabels: {
                          enabled: false
                        },
                        stroke: {
                          curve: 'straight'
                        },
                        
                        grid: {
                          row: {
                            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                            opacity: 0.5
                          },
                        },
                        xaxis: {
                          categories: values[0].stats.map(a => a.x),
                        }
                    };
                    console.log(options)
                @break

            @endswitch
            
        @elseif($graph->type == 'simple')
            @switch($post['type'])
                @case('graphical')
                    options = {
                    series: [{{ $graph->max > 0 ? ceil(($graph->value/$graph->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: 'dark',
                          shadeIntensity: 0.15,
                          inverseColors: false,
                          opacityFrom: 1,
                          opacityTo: 1,
                          stops: [0, 50, 65, 91]
                      },
                    },
                    stroke: {
                      dashArray: 7
                    },
                    colors: colors,
                    labels: ['{{$graph->label}}'],
                };
                @break
                @case('trend')
                    values = {!!json_encode($graph->values)!!}
                    options = {
                        series: [{
                            name: "{{$graph->label}}",
                            data: values.map(a => a.y)
                        }],
                        chart: {
                          height: 350,
                          type: '{{$post['chart']}}',
                          zoom: {
                            enabled: false
                          },
                          animations: {
                            enabled: true,
                            easing: 'easeinout',
                            speed: 2000,
                          }
                        },
                        dataLabels: {
                          enabled: false
                        },
                        stroke: {
                          curve: 'straight'
                        },
                        
                        grid: {
                          row: {
                            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                            opacity: 0.5
                          },
                        },
                        xaxis: {
                          categories: values.map(a => a.x),
                        }
                    };
                @break

            @endswitch

            
        @endif
        chart = new ApexCharts(document.querySelector("#chart-{{$graph->id}}"), options);
        chart.render();
    });
</script>


@endsection