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

@section('Limitless::Content')

    @php

        // sample backend data
        $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        $series = ['ONC', 'APR', 'PHX', 'BRG'];

        $seriesData = [];
        foreach ($series as $s) {
            $data['name'] = $s;
            $dataArray = [];
            foreach ($categories as $c) {
               $dataArray[] = rand(1,100);
            }
            $data['data'] = $dataArray;
            $data['index'] = 0; //rand(0,1); on what chart index to add.
            $seriesData[] = $data;
        }

        // json string data should be valid else it will return null
        $rawData = '{
           "textStyle":{
              "fontFamily":"Roboto, Arial, Verdana, sans-serif",
              "fontSize":13
           },
           "animationDuration":750,
           "grid":{
              "left":0,
              "right":30,
              "top":30,
              "bottom":0,
              "containLabel":true
           },
           "legend":{
              "data":[
                 "Customers",
                 "Returned"
              ],
              "itemHeight":8,
              "itemGap":20,
              "textStyle":{
                 "padding":[
                    0,
                    5
                 ],
                 "color":"#fff"
              }
           },
           "tooltip":{
              "trigger":"axis",
              "backgroundColor":"rgba(255,255,255,0.9)",
              "padding":[
                 10,
                 15
              ],
              "textStyle":{
                 "color":"#222",
                 "fontSize":13,
                 "fontFamily":"Roboto, sans-serif"
              },
              "axisPointer":{
                 "type":"shadow",
                 "shadowStyle":{
                    "color":"rgba(255,255,255,0.1)"
                 }
              }
           },
           "xAxis":[
              {
                 "type":"value",
                 "axisLabel":{
                    "color":"#fff"
                 },
                 "axisLine":{
                    "lineStyle":{
                       "color":"rgba(255,255,255,0.25)"
                    }
                 },
                 "splitLine":{
                    "show":true,
                    "lineStyle":{
                       "color":"rgba(255,255,255,0.1)",
                       "type":"dashed"
                    }
                 }
              }
           ],
           "yAxis":[
              {
                 "type":"category",
                 "data":[
                    "Oct",
                    "Sep",
                    "Aug",
                    "July",
                    "June",
                    "May",
                    "Apr",
                    "Mar",
                    "Feb",
                    "Jan"
                 ],
                 "axisLabel":{
                    "color":"#fff"
                 },
                 "axisLine":{
                    "lineStyle":{
                       "color":"rgba(255,255,255,0.25)"
                    }
                 },
                 "splitLine":{
                    "show":true,
                    "lineStyle":{
                       "color":"rgba(255,255,255,0.1)"
                    }
                 },
                 "splitArea":{
                    "show":true,
                    "areaStyle":{
                       "color":[
                          "rgba(255,255,255,0.01)",
                          "rgba(0,0,0,0.01)"
                       ]
                    }
                 }
              }
           ],
           "series":[
              {
                 "name":"Customers",
                 "type":"bar",
                 "barCategoryGap":"40%",
                 "label":{
                    "normal":{
                       "textStyle":{
                          "color":"#682d19"
                       },
                       "position":"left",
                       "show":false,
                       "formatter":"{b}"
                    }
                 },
                 "itemStyle":{
                    "normal":{
                       "color":"#6bca6f"
                    }
                 },
                 "data":[
                    1900,
                    1029,
                    1602,
                    2004,
                    1100,
                    1800,
                    2800,
                    1407,
                    2200,
                    900
                 ]
              },
              {
                 "name":"Returned",
                 "type":"line",
                 "symbol":"circle",
                 "symbolSize":7,
                 "silent":true,
                 "data":[
                    100,
                    1000,
                    800,
                    1070,
                    900,
                    300,
                    1200,
                    900,
                    1200,
                    200
                 ],
                 "itemStyle":{
                    "normal":{
                       "color":"#fff",
                       "borderWidth":2
                    }
                 }
              }
           ]
        }';

    @endphp

    @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
        @Limitless::BarChart([
            'title' => 'Basic',
            'mark-line' => 'average',
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
        @Limitless::BarChart([
            'stacked' => true,
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Stacked Horizontal Setup", 'icon' => 'icon-info22' ] )
        @Limitless::BarChart([
            'horizontal' => true,
            'stacked' => true,
            'bar-values' => true,
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Raw Setup", 'icon' => 'icon-info22' ] )
        @Limitless::BarChart([
            'raw' => $rawData
        ])
    @Limitless::CardStop

@stop
