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

@section('Limitless::Content')

    @php

        // sample backend data
        $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['name'] = 'All Projects';
        $nestedData['nested'] = true; // this will be auto set when inner and outer data have values
        foreach ($nestedSeriesInner as $i) {
            $nestedSeriesInnerData = (object)[];
            $nestedSeriesInnerData->name = $i;
            $nestedSeriesInnerData->value = rand(1,100);
            $nestedData['innerData'][] = $nestedSeriesInnerData;
        }
        foreach ($nestedSeriesOuter as $o) {
            $nestedSeriesOuterData = (object)[];
            $nestedSeriesOuterData->name = $o;
            $nestedSeriesOuterData->value = rand(1,100);
            $nestedData['outerData'][] = $nestedSeriesOuterData;
        }

    $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([
                    '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
