@extends('layouts.default')

@include('plugins.amcharts')
@include('plugins.ammap')
@include('plugins.circliful')
@include('plugins.sparkline')
@include('plugins.notifyjs')
@include('plugins.select2')
@include('plugins.moment')
@include('plugins.bootstrap-datepicker')

@push("page-js")
<script src="{{asset('plugins/chart.js/Chart.bundle.min.js')}}"></script>
<script>

    $(document).ready(function () {
        $('.circliful-chart').circliful();
    });


    !function($) {
        "use strict";

        var ChartJs = function() {};
        ChartJs.prototype.respChart = function(selector,type,data, options) {
            // get selector by context
            var ctx = selector.get(0).getContext("2d");
            // pointing parent container to make chart js inherit its width
            var container = $(selector).parent();

            // enable resizing matter
            $(window).resize( generateChart );

            // this function produce the responsive Chart JS
            function generateChart(){
                // make chart width fit with its container
                var ww = selector.attr('width', $(container).width() );
                switch(type){
                    case 'Line':
                        new Chart(ctx, {type: 'line', data: data, options: options});
                        break;
                    case 'Doughnut':
                        new Chart(ctx, {type: 'doughnut', data: data, options: options});
                        break;
                    case 'Pie':
                        new Chart(ctx, {type: 'pie', data: data, options: options});
                        break;
                    case 'Bar':
                        new Chart(ctx, {type: 'bar', data: data, options: options});
                        break;
                    case 'Radar':
                        new Chart(ctx, {type: 'radar', data: data, options: options});
                        break;
                    case 'PolarArea':
                        new Chart(ctx, {data: data, type: 'polarArea', options: options});
                        break;
                }
                // Initiate new chart or Redraw

            };
            // run function - render chart at first load
            generateChart();
        },
            //init
            ChartJs.prototype.init = function() {

                @foreach( $data['widgets'] as $index => $d )
                    @if( $d['chart'] )

                        this.respChart($("#graph_{{$index}}"),'Bar',{
                            labels: {!! $d['chart']['labels'] !!},
                            display : false,
                            datasets: [
                                {
                                    label: "{{$index}}",
                                    backgroundColor: "rgba({{$d['chart']['color']}}, 0.3)",
                                    borderColor: "rgba({{$d['chart']['color']}})",
                                    borderWidth: 1,
                                    hoverBackgroundColor: "rgba({{$d['chart']['color']}},0.6)",
                                    hoverBorderColor: "rgba({{$d['chart']['color']}})",
                                    data: {!! $d['chart']['series'] !!}
                                }
                            ]
                        });
                    @endif
                @endforeach

                @foreach( $data['top5'] as $index => $d )
                    this.respChart($("#{{$index}}"),'Doughnut', {
                        labels: {!! $d['labels'] !!},
                        datasets: [
                            {
                                data: {!! $d['series'] !!},
                                backgroundColor: [
                                    "#da4838",
                                    "#8f72da",
                                    "#1cb188",
                                    "#b17b40",
                                    "#4e49b1",
                                    "#b158a2",
                                ],
                                hoverBackgroundColor: [
                                    "#da4838",
                                    "#8f72da",
                                    "#1cb188",
                                    "#b17b40",
                                    "#4e49b1",
                                    "#b158a2",
                                ],
                                hoverBorderColor: "#fff"
                            }]
                    });
                @endforeach

                @isset( $data['monthData'])
                    this.respChart($("#graph_monthData"),'Line', {
                        labels: {!! $data['monthData']['labels'] !!},
                        datasets: [
                            {
                                label: "{{ $data['monthData']['current']['label'] }}",
                                backgroundColor: 'rgba(255, 0, 41, 0.2)',
                                borderColor: 'rgba(255, 0, 41, 1)',
                                data: {!! $data['monthData']['current']['series'] !!},
                                fill: true,
                            },
                            {
                                label: "{{ $data['monthData']['prev']['label'] }}",
                                backgroundColor: 'rgba(59, 175, 218,0.2)',
                                borderColor: 'rgba(59, 175, 218,1)',
                                borderDash: [5, 5],
                                data: {!! $data['monthData']['prev']['series'] !!},
                                fill: false,
                            }]
                    });
                @endisset

            },
            $.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs

    }(window.jQuery),

    //initializing
    function($) {
        "use strict";
        $.ChartJs.init()
    }(window.jQuery);

</script>
@endpush

@push('page-css')
<link href="{{asset('plugins/jquery-circliful/css/jquery.circliful.css')}}" rel="stylesheet" type="text/css" />
<style>
    .datepicker-days .active-day{

    }
</style>
@endpush

@push('menu-sup')
    <li class="float-left">
        <button class="button-menu-mobile waves-light waves-effect"
                data-slide="#form-agenda"
                data-toggle="tooltip" data-original-title="Agendar">
            <i class="mdi mdi-calendar-plus"></i>
        </button>
    </li>
@endpush

@section('page-title')
    <i class="fa fa-dash"></i> Dashboard
@endsection

@section('content')
    @include('contents.form-agenda')
    <div class="row">
        <div class="col-12">
            <div class="portlet">
                <div class="portlet-heading">
                    <h3 class="portlet-title text-dark text-center">
                        Meses anteriores
                    </h3>
                </div>
                <div class="portlet-body">
                    <canvas id="graph_monthData" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        @foreach( $data['widgets'] as $index =>  $d )
            <div class="col-4">
                @component('components.widget',[
                    'title' => $index,
                    'icon' => $d['icon'],
                    'total' => $d['total'],
                    'total_month' => $d['total_month']
                ]) @endcomponent
            </div>
        @endforeach

    </div>
    <div class="row">
        <div class="col-4">
            <div class="portlet"><!-- /primary heading -->
                <div class="portlet-heading">
                    <h3 class="portlet-title text-dark">
                        Top 5 de Especialidades
                    </h3>
                    <div class="clearfix"></div>
                </div>
                <div id="portlet2" class="panel-collapse collapse show">
                    <div class="portlet-body">
                        <canvas id="top5_esp" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="portlet"><!-- /primary heading -->
                <div class="portlet-heading">
                    <h3 class="portlet-title text-dark">
                        Desenmpenho por Unidade
                    </h3>
                    <div class="clearfix"></div>
                </div>
                <div id="portlet2" class="panel-collapse collapse show">
                    <div class="portlet-body">
                        <canvas id="top5_unit" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">


        </div>

    </div>
@endsection

@push('plugin-js')
    
<script>

    $(function(){
        $('#datepicker')
        .off('changeDate')
        .off('changeMonth')
        .off('show')
        .datepicker({
            dateFormat: "yyyy-mm-dd",
            minDate : -1,
            language: "pt-BR"
        }).on('changeDate', function(  date ){
            

        }).on('changeMonth', function( event ){
            dateActive.year = event.date.getFullYear()
            dateActive.month = event.date.getMonth() + 1
            dateActive.day = 1;
            loadCallendar()
        })

        
    })
    
</script>
@endpush