{{-- Layout Reference --}}
@extends('Limitless::Help.Layout.Master')

@section('Limitless::Content')

    @php

        $chartDataManager = SidekickPieChartDataManager::getInstance();
        // or $chartDataManager = new SidekickPieChartDataManager();

        $sd = $chartDataManager::getSeriesDataInstance();
        $sd->addData('ONC', 20);
        $sd->addData('APR', 50);
        $sd->addData('PHX', 33.33);
        $sd->setName('Projects');
        $chartDataManager->addSeries($sd);

        $sd = $chartDataManager::getSeriesDataInstance();
        $sd->addData('A', 22);
        $sd->addData('B', 55);
        $sd->addData('C', 88.33);
        $sd->setName('Projects 2');
        $chartDataManager->addSeries($sd);

        $chartDataManager->setHasLabel(false);

        $dataObject = $chartDataManager->toJson();


        // sample backend data
        // series should be an object or if nested, array of objects limit 2.

        $series = ['ONC', 'APR', 'SPR', 'PHX', 'BRG'];

        // basic data
        $data['name'] = 'Projects';
        foreach ($series as $s) {
            $seriesData = (object)[];
            $seriesData->name = $s;
            $seriesData->value = rand(1,100);
            $data['data'][] = $seriesData;
        }


        // nested pie data
        $nestedSeriesInner = ['ONC', 'APR', 'SPR', 'PHX'];
        $nestedSeriesOuter = ['BRG', 'SDK', 'OCT', 'SIG'];

        $nestedData = [];
        $seriesData = [];

        foreach ($nestedSeriesInner as $i) {
            $series = (object)[];
            $series->name = $i;
            $series->value = rand(1,100);
            $seriesData[] = $series;
        }
        $nestedSeriesData = [];
        $nestedSeriesData['data'] = $seriesData;
        $nestedSeriesData['name'] = 'Project 1';
        $nestedData[] = $nestedSeriesData;


        $seriesData = [];
        foreach ($nestedSeriesOuter as $o) {
            $series = (object)[];
            $series->name = $o;
            $series->value = rand(1,100);
            $seriesData[] = $series;
        }
        $nestedSeriesData = [];
        $nestedSeriesData['data'] = $seriesData;
        $nestedSeriesData['name'] = 'Project 2';
        $nestedData[] = $nestedSeriesData;

    $rawData = '{
       "color":[
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d"
       ],
       "textStyle":{
          "color":"#fff"
       },
       "tooltip":{
          "trigger":"item"
       },
       "legend":{
          "top":"5%",
          "left":"center",
          "textStyle": {
            "color":"#fff"
          }
       },
       "series":[
          {
             "name":"Projects",
             "type":"pie",
             "radius":[
                "40%",
                "70%"
             ],
             "avoidLabelOverlap":false,
             "itemStyle":{
                "borderRadius":10,
                "borderColor":"#fff",
                "borderWidth":2
             },
             "label":{
                "show":false,
                "position":"center"
             },
             "emphasis":{
                "label":{
                   "show":true,
                   "fontSize":"40",
                   "fontWeight":"bold"
                }
             },
             "labelLine":{
                "show":false
             },
             "data":[
                {
                   "value":1048,
                   "name":"ONC"
                },
                {
                   "value":735,
                   "name":"APR"
                },
                {
                   "value":580,
                   "name":"PHX"
                },
                {
                   "value":484,
                   "name":"SPR"
                },
                {
                   "value":300,
                   "name":"BRG"
                }
             ]
          }
       ]
    }';

    @endphp

    <div class="row">
        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'data' => $dataObject
                ])
            @Limitless::CardStop
        </div>

        <div class="col-xl-6">
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'title' => 'Basic Pie Chart',
                    'subtitle' => 'basic pie chart setup',
                    'series' => $data,
                ])
            @Limitless::CardStop
        </div>

        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Donut Pie Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'title' => 'Basic Donut Chart',
                    'subtitle' => 'basic donut chart setup',
                    'pie-type' => 'donut',
                    'series' => $data,
                ])
            @Limitless::CardStop
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Rose Pie Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'pie-type' => 'rose',
                    'series' => $data,
                ])
            @Limitless::CardStop
        </div>
        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Nested Pie Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'series' => $nestedData,
                    'label' => false,
                    'emphasis-label' => true
                ])
            @Limitless::CardStop
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6">
            @Limitless::CardStart(['title' => "Raw Data Setup", 'icon' => 'icon-info22' ] )
                @Limitless::PieChart([
                    'raw' => $rawData,
                ])
            @Limitless::CardStop
        </div>
    </div>

@stop
