@extends('layouts.dashboard.app')

@section('content')
    <style>
        a {
            color: inherit;
        }
    </style>
    <div class="content-wrapper">
        <div class="callout callout-warning">
            <br>
            <h3>@lang('site.warning')!</h3>
            <h4 class="text-red text-bold" style="background-color:white">@lang('site.adv')</h4>
        </div>

        <section class="content-header">

            <h1>@lang('site.dashboard')</h1>

            <ol class="breadcrumb">
                <li class="active"><i class="fa fa-dashboard"></i> @lang('site.dashboard')</li>
            </ol>
        </section>

        @if(Auth::user()->should_alert <> 0)
            <div class="modal modal-danger fade in" id="modal-danger" style="display: block; padding-right: 17px;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">
                                <a class="btn btn-outline call_and_re_load"
                                   data-url="{{ route('dashboard.users.should_alert') }}"
                                   data-method="get"
                                   data-token="{{csrf_token()}}">×</a>
                                </span></button>
                            <h3 class="modal-title">تنبية : الادارة - نموذج التقييم اليومي</h3>
                        </div>
                        <div class="modal-body">
                            <div>
                                 <h4>@lang('site.adv')</h4>
                                <div style="text-align: center;">
                                    <img src="{{asset('dashboard_files/img/alert_image.png')}}" alt="alert" width="170">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">

                            <a class="btn btn-outline call_and_re_load"
                               data-url="{{ route('dashboard.users.should_alert') }}"
                               data-method="get"
                               data-token="{{csrf_token()}}">موافق</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (!auth()->user()->hasRole('uploader|prices_tester'))
            <section class="content">

                <div class="row">

                    <div class="col-md-4">

                        <div class="box box-solid">
                            <div class="box-header with-border">
                                <h3 class="box-title">تحت التجربة</h3>
                            </div>

                            <div class="box-body border-radius-none" id="get-main-data">
                                <div style="display: none; flex-direction: column; align-items: center;"
                                     id="get_main_data_loading">
                                    <div class="loader"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box box-solid">
                            <div class="box-header with-border">
                                <h3 class="box-title">@lang('site.statistical_reports')</h3>
                            </div>

                            <div class="box-body">
                                <div class="box-group" id="accordion">

                                    {{--not_available_stock--}}
                                    @if(auth()->user()->isUserManager() || auth()->user()->isUserAsmManager())
                                        <div class="panel box box-danger">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse0"
                                                       class="" aria-expanded="false">
                                                        @lang('site.not_available_stock')
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse0" class="panel-collapse collapse" aria-expanded="false"
                                                 style="">
                                                <div class="box-body table-responsive">

                                                    <table class="table no-margin">
                                                        <tr>
                                                            <th>@lang('site.oCount')</th>
                                                            <th>@lang('site.prodCCode')</th>
                                                            <th>@lang('site.oQty')</th>
                                                            <th>@lang('site.curStock')</th>
                                                            <th>@lang('site.outOfStock')</th>
                                                        </tr>

                                                        <tbody id="data-wrapper-get-not-available-stock">
                                                        <!-- Results -->

                                                        </tbody>

                                                    </table>
                                                    {{--                                                    <div style="display: none; height:60px; flex-direction: column; align-items: center;" class="auto-load-get-not-available-stock">--}}
                                                    <div class="auto-load-get-not-available-stock text-center">
                                                        @include('dashboard.partials._loader')
                                                    </div>
                                                    <div class="box-footer text-center">
                                                        <a href="javascript:void(0)"
                                                           class="btn btn-primary btn-sm uppercase see-more-get-not-available-stock">@lang('site.load_more')</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    {{--readyOrders--}}
                                    <div class="panel box box-success">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion"
                                                   href="#collapseOne"
                                                   aria-expanded="false" class="collapsed">
                                                    @lang('site.readyOrders')
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false"
                                             style="">
                                            <div class="box-body">
                                                <div id="get_order_progress1">
                                                    @include('dashboard.partials.dash.progress._progress1')
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{--ordersProgress--}}
                                    <div class="panel box box-success">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion"
                                                   href="#collapseTwo"
                                                   class="" aria-expanded="false">
                                                    @lang('site.ordersProgress')
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false"
                                             style="">
                                            <div class="box-body">
                                                <div id="get_order_progress2">
                                                    @include('dashboard.partials.dash.progress._progress2')
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{--best_seller--}}
                                    <div class="panel box box-primary">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion"
                                                   href="#collapseThree"
                                                   class="" aria-expanded="false">
                                                    @lang('site.best_seller')
                                                </a>
                                            </h4>
                                            {{--                                            <div class="label label-danger pull-right"><h4 style="margin: 0">جديد</h4></div>--}}
                                        </div>
                                        <div id="collapseThree" class="panel-collapse collapse"
                                             aria-expanded="false"
                                             style="">
                                            <div class="box-body table-responsive">
                                                <div id="get_top_qty">
                                                    @include('dashboard.partials.dash.top_best._top_best_data')
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{--not_selling_in_month--}}
                                    <div class="panel box box-danger">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion"
                                                   href="#collapseFour"
                                                   class="" aria-expanded="false">
                                                    @lang('site.not_selling_in_month')
                                                </a>
                                            </h4>
                                            {{--                                            <div class="label label-danger pull-right"><h4 style="margin: 0">جديد</h4></div>--}}
                                        </div>
                                        <div id="collapseFour" class="panel-collapse collapse" aria-expanded="false"
                                             style="">
                                            <div class="box-body table-responsive">
                                                <table class="table no-margin">
                                                    <tr>
                                                        <th>@lang('site.number')</th>
                                                        <th>@lang('site.prodCCode')</th>
                                                        <th>@lang('site.product')</th>
                                                        <th>@lang('site.quantity')</th>
                                                    </tr>
                                                    <tbody id="data-wrapper">
                                                    <!-- Results -->

                                                    </tbody>
                                                </table>

                                                <!-- Data Loader -->
                                                <div class="auto-load text-center">
                                                    @include('dashboard.partials._loader')
                                                </div>
                                                <div class="box-footer text-center">
                                                    <a href="javascript:void(0)"
                                                       class="btn btn-primary btn-sm uppercase see-more">@lang('site.load_more')</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if(auth()->user()->isUserManager() && (auth()->user()->branch == '1101') || auth()->user()->isUserAsmManager())
                                        {{--get_images_counter--}}
                                        <div class="panel box box-success">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse5"
                                                       aria-expanded="false" class="collapsed">
                                                        أحصائيات صور الاصناف
                                                    </a>
                                                </h4>
                                                {{--                                                <div class="label label-danger pull-right"><h4 style="margin: 0">جديد</h4></div>--}}
                                            </div>
                                            <div id="collapse5" class="panel-collapse collapse" aria-expanded="false"
                                                 style="">
                                                <div class="box-body">
                                                    <div id="get_images_counter">
                                                        @include('dashboard.partials.dash.product_data._images_counter_data')
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{--daily_images_data--}}
                                        <div class="panel box box-primary">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse6"
                                                       class="" aria-expanded="false">
                                                        تقرير الصور المرفوعة للاصناف
                                                    </a>
                                                </h4>
                                                {{--                                                <div class="label label-danger pull-right"><h4 style="margin: 0">جديد</h4></div>--}}
                                            </div>
                                            <div id="collapse6" class="panel-collapse collapse" aria-expanded="false"
                                                 style="">
                                                <div class="box-body table-responsive">
                                                    <div id="get_daily_images">
                                                        @include('dashboard.partials.dash.product_data._daily_images_data')
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                        </div>

                        @include('dashboard.partials.dash._the_dash_js')

                    </div>

                    @if(auth()->user()->isUserManager())
                        <div class="col-md-8">
                            <div class="col-md-12">
                                <div class="box box-solid">
                                    <div class="box-body border-radius-none" id="get-orders-analytics">
                                        <div style="display: none; flex-direction: column; align-items: center;"
                                             id="get_orders_analytics_loading">
                                            <div class="loader"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="col-md-8">

                        {{--allOrders--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-aqua">
                                <a href="{{ route('dashboard.orders.index') }}" class="small-box">
                                    <div class="inner">
                                        <h3>{{ $allOrders }}</h3>

                                        <p>@lang('site.completed_orders')</p>
                                    </div>
                                    <div class="icon">
                                        <i class="ion ion-bag"></i>
                                    </div>
                                </a>
                                <a href="{{ route('dashboard.orders.index')}}"
                                   class="small-box-footer">@lang('site.read')
                                    <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>

                        {{--products--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-green">
                                <a href="{{ route('dashboard.products.index') }}" class="small-box">
                                    <div class="inner">
                                        <h3>{{ $products_count }}</h3>

                                        <p>@lang('site.products')</p>
                                    </div>
                                    <div class="icon">
                                        <i class="ion ion-stats-bars"></i>
                                    </div>
                                </a>
                                <a href="{{ route('dashboard.products.index') }}"
                                   class="small-box-footer">@lang('site.read')<i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>

                        {{--clients--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-red">
                                <a href="{{ route('dashboard.clients.index') }}" class="small-box">

                                    <div class="inner">
                                        <h3>{{ $clients_count }}</h3>

                                        <p>@lang('site.clients')</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-user"></i>
                                    </div>
                                </a>
                                <a href="{{ route('dashboard.clients.index') }}"
                                   class="small-box-footer">@lang('site.read')
                                    <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>

                        {{--users--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-yellow">
                                <a href="@permission('create_quotes') {{ route('dashboard.quotes.index') }} @endpermission"
                                   class="small-box">

                                    <div class="inner">
                                        <h3>{{ $allQuotes }}</h3>

                                        <p>@lang('site.quotes')</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-users"></i>
                                    </div>
                                </a>

                                <a href="@permission('create_quotes') {{ route('dashboard.quotes.index') }} @endpermission"
                                   class="small-box-footer">@lang('site.read')
                                    <i class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>

                        @if(!auth()->user()->hasRole('user|uploader'))
                            {{--reports--}}
                            <div class="col-lg-3 col-xs-6">
                                <div class="small-box bg-teal">
                                    <a href="@permission('read_reports') {{ route('dashboard.reports.index') }} @endpermission"
                                       class="small-box">

                                        <div class="inner">
                                            <h3>{{ 3 }}</h3>

                                            <p>@lang('site.reports')</p>
                                        </div>
                                        <div class="icon">
                                            <i class="fa fa-file-text-o"></i>
                                        </div>
                                    </a>

                                    <a href="@permission('read_reports') {{ route('dashboard.reports.index') }} @endpermission"
                                       class="small-box-footer">@lang('site.read')
                                        <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        @endif

                        @if(auth()->user()->hasRole('super_admin|generalManager|areaSalesManager|generalSalesManager|reader|auditor'))
                            {{--commissions--}}
                            <div class="col-lg-3 col-xs-6">
                                <div class="small-box bg-light-blue">
                                    <a href="{{ route('dashboard.commissions.index') }}"
                                       class="small-box">

                                        <div class="inner">
                                            <h3>{{ 3 }}</h3>

                                            <p>@lang('site.commission_system')</p>
                                        </div>
                                        <div class="icon">
                                            <i class="fa fa-calculator"></i>
                                        </div>
                                    </a>

                                    <a href="{{ route('dashboard.commissions.index') }}"
                                       class="small-box-footer">@lang('site.read')
                                        <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        @endif

                        {{--orders--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-navy">
                                <a href="@permission('create_orders') {{ route('dashboard.clients.index', ['command' => "order"]) }} @endpermission"
                                   class="small-box">
                                    <div class="inner">
                                        <h4>@lang('site.issuance') @lang('site.add_order')</h4>
                                    </div>
                                </a>
                            </div>
                        </div>
                        {{--quotes--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-yellow">
                                <a href="@permission('create_quotes') {{ route('dashboard.quotes.create', ['command' => "quote"]) }} @endpermission"
                                   class="small-box">
                                    <div class="inner">
                                        <h4>@lang('site.issuance') @lang('site.add_quote')</h4>
                                    </div>
                                </a>
                            </div>
                        </div>

                        {{--statements--}}
                        <div class="col-lg-3 col-xs-6">
                            <div class="small-box bg-teal">
                                <a href="{{ route('dashboard.clients.index', ['command' => "statement"] ) }}"
                                   class="small-box">
                                    <div class="inner">
                                        <h4>@lang('site.customerStatement')</h4>
                                    </div>
                                </a>
                            </div>
                        </div>

                        @if(auth()->user()->hasRole('super_admin|generalManager'))
                            {{--cashs--}}
                            <div class="col-lg-3 col-xs-6">
                                <div class="small-box bg-purple">
                                    <a href="{{ route('dashboard.clients.index', ['command' => "cash"]) }}"
                                       class="small-box">
                                        <div class="inner">
                                            <h4>@lang('site.issuance') @lang('site.add_cash')</h4>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endif

                        <div class="col-lg-3 col-xs-6">

                        </div>

                        <div class="col-lg-12 col-xs-12">
                            <div class="box box-solid">

                                <div class="box-header">
                                    <h3 class="box-title">Sales Graph</h3>
                                </div>
                                <div class="box-body border-radius-none">
                                    <div class="chart" id="line-chart" style="height: 250px;"></div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                        </div>

                        <div class="col-lg-12 col-xs-12">
                            <div class="box box-solid">

                                <div class="box-header">
                                    <h3 class="box-title">أحصائيات طلبات المبيعات للشهر الحالي</h3>
                                </div>
                                <div class="box-body border-radius-none">
                                    <div class="chart" id="bar-chart"
                                         style="height: 300px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                        </div>
                    </div>

                </div><!-- end of row -->

            </section><!-- end of content -->

        @else
            @if (auth()->user()->hasRole('uploader'))
                <section class="content">
                    <div class="row">
                        <div class="col-md-4">

                            <div class="box box-solid">
                                <div class="box-body border-radius-none">
                                    <div id="get_images_counter">
                                        @include('dashboard.partials.dash.product_data._images_counter_data')
                                    </div>
                                </div>
                            </div>

                            <div class="box box-solid">
                                <div class="box-header with-border">
                                    <h3 class="box-title">@lang('site.statistical_reports')</h3>
                                </div>

                                <div class="box-body">
                                    <div class="box-group" id="accordion">

                                        {{--daily_images_data--}}
                                        <div class="panel box box-primary">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">
                                                    <a data-toggle="collapse" data-parent="#accordion"
                                                       href="#collapseThree"
                                                       class="" aria-expanded="true">
                                                        تقرير الصور المرفوعة للاصناف
                                                    </a>
                                                </h4>
                                                {{--                                            <div class="label label-danger pull-right"><h4 style="margin: 0">جديد</h4></div>--}}
                                            </div>
                                            <div id="collapseThree" class="panel-collapse collapse in"
                                                 aria-expanded="true"
                                                 style="">
                                                <div class="box-body">
                                                    <div id="get_daily_images">
                                                        @include('dashboard.partials.dash.product_data._daily_images_data')
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            @include('dashboard.partials.dash._the_dash_js')

                        </div>
                    </div>
                </section>
            @endif
            @if (auth()->user()->hasRole('prices_tester'))
                <section class="content">
                    <div class="row">
                        <div class="col-md-8">

                            <div class="col-lg-3 col-xs-6">
                                <div class="small-box bg-navy">
                                    <a href="@permission('read_prices') {{ route('dashboard.prices.index', ['status' => isset($prams)?$prams:''] )}} @endpermission"
                                       class="small-box">
                                        <div class="inner">
                                            <h4>@lang('site.print_pricing')</h4>
                                        </div>
                                    </a>
                                </div>
                            </div>

                            <div class="col-lg-3 col-xs-6">
                                <div class="small-box bg-light-blue">
                                    <a href="@permission('read_prices') {{ route('dashboard.config.prices.index')}} @endpermission"
                                       class="small-box">
                                        <div class="inner">
                                            <h4>@lang('site.price_calculator')</h4>
                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>
            @endif
        @endif
    </div><!-- end of content wrapper -->

@endsection

@push('dashTileScripts')
    <script src="{{ asset('dashboard_files/js/custom/dashboard.js') }}"></script>
@endpush

@push('scripts')

    <script>

        //line chart
        var line = new Morris.Line({
            element: 'line-chart',
            resize: true,
            data: [
                    @foreach ($sales_data as $data)
                {
                    ym: "{{ $data->year }}-{{ $data->month }}", sum: "{{ $data->sum }}"
                },
                @endforeach
            ],
            xkey: 'ym',
            ykeys: ['sum'],
            labels: ['@lang('site.total')'],
            lineWidth: 2,
            hideHover: 'auto',
            gridStrokeWidth: 0.4,
            pointSize: 4,
            gridTextFamily: 'Open Sans',
            gridTextSize: 10
        });

        //BAR CHART
        var bar = new Morris.Bar({
            element: 'bar-chart',
            resize: true,
            data:
                [
                        @foreach ($daily_sales_status as $data)
                    {
                        branch: '{{ $data['branch'] }}', review: {{ $data["review"] }}, approve: {{ $data["approve"] }},
                        cancel: {{ $data['cancel'] }}, hold: {{ $data["hold"] }},
                        finish: {{ $data['finish'] }},
                    },
                    @endforeach
                ],
            // data: [
            //     {y: '2006', a: 100, b: 90, c: 90, d: 90, e: 90},
            //     {y: '2007', a: 75, b: 65},
            //     {y: '2008', a: 50, b: 40},
            //     {y: '2009', a: 75, b: 65},
            //     {y: '2010', a: 50, b: 40},
            //     {y: '2011', a: 75, b: 65},
            //     {y: '2012', a: 100, b: 90}
            // ],
            barColors: ['#dd4b39', '#0073b7', '#f56954', '#f39c12', '#00a65a'],
            xkey: 'branch',
            ykeys: ['review', 'approve', 'cancel', 'hold', 'finish'],
            labels: ['تحت الاجراء', 'طلبات معتمدة', 'طلبات ملغية', 'طلبات معلقة', 'طلبات مفوترة'],
            hideHover: 'auto'
        });

    </script>

    {{--    <script>--}}
    {{--        $(function () {--}}
    {{--            /* ChartJS--}}
    {{--             * ---------}}
    {{--             * Here we will create a few charts using ChartJS--}}
    {{--             */--}}

    {{--            //---------------}}
    {{--            //- PIE CHART ---}}
    {{--            //---------------}}
    {{--            // Get context with jQuery - using jQuery's .get() method.--}}
    {{--            var pieChartCanvas = $('#pieChart').get(0).getContext('2d')--}}
    {{--            var pieChart       = new Chart(pieChartCanvas)--}}
    {{--            var PieData        = [--}}
    {{--                {--}}
    {{--                    value    : 700,--}}
    {{--                    color    : '#f56954',--}}
    {{--                    highlight: '#f56954',--}}
    {{--                    label    : 'Chrome'--}}
    {{--                },--}}
    {{--                {--}}
    {{--                    value    : 500,--}}
    {{--                    color    : '#00a65a',--}}
    {{--                    highlight: '#00a65a',--}}
    {{--                    label    : 'IE'--}}
    {{--                },--}}
    {{--                {--}}
    {{--                    value    : 400,--}}
    {{--                    color    : '#f39c12',--}}
    {{--                    highlight: '#f39c12',--}}
    {{--                    label    : 'FireFox'--}}
    {{--                },--}}
    {{--                {--}}
    {{--                    value    : 600,--}}
    {{--                    color    : '#00c0ef',--}}
    {{--                    highlight: '#00c0ef',--}}
    {{--                    label    : 'Safari'--}}
    {{--                },--}}
    {{--                {--}}
    {{--                    value    : 300,--}}
    {{--                    color    : '#3c8dbc',--}}
    {{--                    highlight: '#3c8dbc',--}}
    {{--                    label    : 'Opera'--}}
    {{--                },--}}
    {{--                {--}}
    {{--                    value    : 100,--}}
    {{--                    color    : '#d2d6de',--}}
    {{--                    highlight: '#d2d6de',--}}
    {{--                    label    : 'Navigator'--}}
    {{--                }--}}
    {{--            ]--}}
    {{--            var pieOptions     = {--}}
    {{--                //Boolean - Whether we should show a stroke on each segment--}}
    {{--                segmentShowStroke    : true,--}}
    {{--                //String - The colour of each segment stroke--}}
    {{--                segmentStrokeColor   : '#fff',--}}
    {{--                //Number - The width of each segment stroke--}}
    {{--                segmentStrokeWidth   : 2,--}}
    {{--                //Number - The percentage of the chart that we cut out of the middle--}}
    {{--                percentageInnerCutout: 50, // This is 0 for Pie charts--}}
    {{--                //Number - Amount of animation steps--}}
    {{--                animationSteps       : 100,--}}
    {{--                //String - Animation easing effect--}}
    {{--                animationEasing      : 'easeOutBounce',--}}
    {{--                //Boolean - Whether we animate the rotation of the Doughnut--}}
    {{--                animateRotate        : true,--}}
    {{--                //Boolean - Whether we animate scaling the Doughnut from the centre--}}
    {{--                animateScale         : false,--}}
    {{--                //Boolean - whether to make the chart responsive to window resizing--}}
    {{--                responsive           : true,--}}
    {{--                // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container--}}
    {{--                maintainAspectRatio  : true,--}}
    {{--                //String - A legend template--}}
    {{--                legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'--}}
    {{--            }--}}
    {{--            //Create pie or douhnut chart--}}
    {{--            // You can switch between pie and douhnut using the method below.--}}
    {{--            pieChart.Doughnut(PieData, pieOptions)--}}

    {{--        })--}}
    {{--    </script>--}}

@endpush