@extends('layouts.app')

@section('styles')
	@parent

	<style>
        #chartdiv {
            width: 100%;
            height: 500px;
        }							
    </style>

@endsection

@section('content')

	<div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
              <li><a href="{{Route('admin.index')}}">Início</a></li>
              <li>Gráfico</li>
            </ol>
        </div>
    </div>
    
    <grafico-revenda aba="{{$aba}}" url="{{url('/')}}" ano="{{$ano}}"></grafico-revenda>
    
@endsection

@section('scripts')
	@parent

	<script src="{{url('/js/app.js')}}"></script>

    {{-- graficos --}}
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

    <!-- Chart code -->
    <script>

    var dados = {!!json_encode($data)!!};    

    var chart = AmCharts.makeChart( "chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 50,
    "autoMarginOffset": 20,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [ {
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth": true
    } ],
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "graphs": [ {
        "id": "g1",
        "balloon": {
        "drop": true,
        "adjustBorderColor": false,
        "color": "#ffffff",
        "type": "smoothedLine"
        },
        "fillAlphas": 0.2,
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "value",
        "balloonText": "<span style='font-size:15px;'>[[value]]</span>"
    } ],
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha": 0,
        "zoomable": false,
        "valueZoomable": true,
        "valueLineAlpha": 0.5
    },
    "valueScrollbar": {
        "autoGridCount": true,
        "color": "#000000",
        "scrollbarHeight": 50
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "dashLength": 1,
        "minorGridEnabled": false,
    },
    "export": {
        "enabled": true
    },
    "dataProvider": dados
    } );
    AmCharts.shortMonthNames = 
    [
    'Jan',
    'Fev',
    'Mar',
    'Abr',
    'Mai',
    'Jun',
    'Jul',
    'Ago',
    'Set',
    'Out',
    'Nov',
    'Dez'
    ];
    </script>

@endsection

{{-- {
        "date": "2017-01-01",
        "value": 13
    }, {
        "date": "2017-02-01",
        "value": 85
    }, {
        "date": "2017-03-01",
        "value": 40
    }, {
        "date": "2017-04-01",
        "value": 50
    }, {
        "date": "2017-05-01",
        "value": 30
    }, {
        "date": "2017-06-01",
        "value": 60
    }, {
        "date": "2017-07-01",
        "value": 84,
    }, {
        "date": "2017-08-01",
        "value": 81
    }, {
        "date": "2017-09-01",
        "value": 81
    }, {
        "date": "2017-10-01",
        "value": 81
    }, {
        "date": "2017-11-01",
        "value": 81
    }, {
        "date": "2017-12-01",
        "value": 81
    } --}}