{{--Get the Page Format--}}
@extends('layouts.app')

{{--Set Page Title--}}
@section('title', 'Admin Dashboard')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            $('#search-report').select2();
            $('#search-year').select2();
            $('#search-option').select2();
        });


        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light2",
                title: {
                    text: "{{$year}} Monthly Production Report"
                },
                axisX: {
                    valueFormatString: "MMM"
                },
                axisY: {
                    prefix: "{{$currency->abbr ?? ''}} ",
                    labelFormatter: addSymbols
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer",
                    itemclick: toggleDataSeries
                },
                data: [
                    {
                        type: "column",
                        name: "Total Invoices",
                        showInLegend: true,
                        xValueFormatString: "MMMM YYYY",
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 0 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y: 0 },
                            { x: new Date({{$year}}, 3), y: 0},
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y: 0 },
                            { x: new Date({{$year}}, 6), y: 0 },
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y:  0 },
                            { x: new Date({{$year}}, 10), y: 0 },
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    },
                    {
                        type: "line",
                        name: "Paid Invoices",
                        showInLegend: true,
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 0 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y: 0 },
                            { x: new Date({{$year}}, 3), y: 0 },
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y: 0 },
                            { x: new Date({{$year}}, 6), y: 0 },
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y:  0},
                            { x: new Date({{$year}}, 10), y: 0 },
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    },
                    {
                        type: "area",
                        name: "Revenue",
                        markerBorderColor: "white",
                        markerBorderThickness: 2,
                        showInLegend: true,
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 0 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y:0 },
                            { x: new Date({{$year}}, 3), y: 0},
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y:0 },
                            { x: new Date({{$year}}, 6), y: 0},
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y:  0},
                            { x: new Date({{$year}}, 10), y: 0 },
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    }]
            });

            var chartCommission = new CanvasJS.Chart("chartContainerCommission", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light2",
                title: {
                    text: "{{$year}} Monthly Commission Report"
                },
                axisX: {
                    valueFormatString: "MMM"
                },
                axisY: {
                    prefix: "{{$currency->abbr ?? ''}} ",
                    labelFormatter: addSymbols
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer",
                    reversed: true,
                    itemclick: toggleDataSeries
                },
                data: [
                    {
                        type: "stackedColumn",
                        name: "Total Net Commission",
                        showInLegend: true,
                        xValueFormatString: "MMMM YYYY",
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 0 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y: 0 },
                            { x: new Date({{$year}}, 3), y: 0},
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y: 0 },
                            { x: new Date({{$year}}, 6), y: 0 },
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y:  0},
                            { x: new Date({{$year}}, 10), y: 0},
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    },
                    {
                        type: "stackedColumn",
                        name: "W.Tax Commission",
                        showInLegend: true,
                        xValueFormatString: "MMMM YYYY",
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 0 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y: 0 },
                            { x: new Date({{$year}}, 3), y: 0 },
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y: 0 },
                            { x: new Date({{$year}}, 6), y: 0 },
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y:  0 },
                            { x: new Date({{$year}}, 10), y: 0 },
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    },
                    {
                        type: "line",
                        name: "Received Commissions",
                        showInLegend: true,
                        yValueFormatString: "{{$currency->abbr ?? ''}} #,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0), y: 2000 },
                            { x: new Date({{$year}}, 1), y: 0 },
                            { x: new Date({{$year}}, 2), y: 0 },
                            { x: new Date({{$year}}, 3), y: 0 },
                            { x: new Date({{$year}}, 4), y: 0 },
                            { x: new Date({{$year}}, 5), y: 0 },
                            { x: new Date({{$year}}, 6), y: 0 },
                            { x: new Date({{$year}}, 7), y: 0 },
                            { x: new Date({{$year}}, 8), y: 0 },
                            { x: new Date({{$year}}, 9), y: 0 },
                            { x: new Date({{$year}}, 10), y: 2000 },
                            { x: new Date({{$year}}, 11), y: 0 }
                        ]
                    }]
            });

            chart.render();
            chartCommission.render();

            function addSymbols(e) {
                var suffixes = ["", "K", "M", "B"];
                var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);

                if(order > suffixes.length - 1)
                    order = suffixes.length - 1;

                var suffix = suffixes[order];
                return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
            }

            function toggleDataSeries(e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
            }
        }
    </script>
@endsection

{{--Include any Internal CSS Code--}}
@section('internal-css')

@endsection

{{--Control Page Header/Links--}}
@section('headers')
    @include('headers.admin-header')
@endsection

{{--Set Page Heading--}}
@section('heading', 'Admin Dashboard')
@section('searches')
    <div style="float: right">
        <br>
        {!! Form::open(['route'=>['modules.admin.filter'], 'method'=>'POST', 'id'=>'filter-report-statement']) !!}
        <div class="guestDetails_input">
            <div class="guestDetails_input" style="text-align: center">
                Option: <select name="search-option" id="search-option" style="width: 80px">
                    {{--@if($search['option'] != null)
                        <option value="{{$search['option']}}">{{$search['optionName']}}</option>
                    @endif--}}
                    <option value="graphical">Graphical</option>
                    <option value="figures">Figures</option>
                </select>
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_input" style="text-align: center">
                Type: <select name="search-report" id="search-report" style="width: 130px">
                   {{-- @if($search['type'] != null)
                        <option value="{{$search['type']}}">{{$search['reportName']}}</option>
                    @endif--}}
                    <option value="premium">Sales Report</option>
                    <option value="commission">Income Report</option>
                </select>
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_input" style="text-align: center">
                Year: <select name="search-year" id="search-year" style="width: 60px">
                    {{--@if($search['year'] != null)
                        <option value="{{$search['year']}}">{{$search['year']}}</option>
                    @endif--}}
                    @for($x=date('Y'); $x>=app('CompanySetup')->version_from; $x--)
                        <option value="{{$x}}">{{$x}}</option>
                    @endfor
                </select>
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_input">
                <button type="submit" id="submit-search" style="width: auto; height: 22px; cursor: pointer" title="Search a Product"><i class="fa fa-search" aria-hidden="true"></i></button>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
@endsection

{{--Page Content Goes here--}}
@section('content')

    <div id="chartContainerCommission" style="height: 400px; width: 95%;margin-left: auto; margin-right: auto"></div>
    <div id="chartContainer" style="height: 400px; width: 95%;margin-left: auto; margin-right: auto"></div>

    @if($search['type'] == 'commission')
        <script>
            document.getElementById('chartContainer').style.display="none";
        </script>
    @else
        <script>
            document.getElementById('chartContainerCommission').style.display="none";
        </script>
    @endif
    <div class="guestDetails_inputDivider"></div>

@endsection


{{--System Hints Page--}}

@section('modal_heading')
    <h1>Admin Dashboard</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View Graphical Production Analysis</li>
            <li>View Branch Performance Report</li>
            <li>Get Graphical Client's Reports</li>
        </ol>
    </b>
@endsection





