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

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

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {

        });

        window.onload = function () {
            var options = {
                exportEnabled: true,
                animationEnabled: true,
                title:{
                    text: "{{$year}} Prospective Dashboard"
                },

                axisY: {
                    title: "Total Prospects",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC"
                },
                axisY2: {
                    title: "Approved Prospects",
                    titleFontColor: "#C0504E",
                    lineColor: "#C0504E",
                    labelFontColor: "#C0504E",
                    tickColor: "#C0504E"
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer",
                    itemclick: toggleDataSeries
                },
                data: [{
                    type: "spline",
                    name: "Total Prospects",
                    showInLegend: true,
                    xValueFormatString: "MMM YYYY",
                    yValueFormatString: "#,##0",
                    dataPoints: [
                        { x: new Date({{$year}}, 0),  y: {{$jan->count()}} },
                        { x: new Date({{$year}}, 1), y: {{$feb->count()}} },
                        { x: new Date({{$year}}, 2), y: {{$mar->count()}} },
                        { x: new Date({{$year}}, 3),  y: {{$apr->count()}} },
                        { x: new Date({{$year}}, 4),  y: {{$may->count()}} },
                        { x: new Date({{$year}}, 5),  y: {{$jun->count()}} },
                        { x: new Date({{$year}}, 6), y: {{$jul->count()}} },
                        { x: new Date({{$year}}, 7), y: {{$aug->count()}} },
                        { x: new Date({{$year}}, 8),  y: {{$sep->count()}} },
                        { x: new Date({{$year}}, 9),  y: {{$oct->count()}} },
                        { x: new Date({{$year}}, 10),  y: {{$nov->count()}} },
                        { x: new Date({{$year}}, 11), y: {{$dec->count()}} }
                    ]
                },
                    {
                        type: "spline",
                        name: "Approved Prospects",
                        axisYType: "secondary",
                        showInLegend: true,
                        xValueFormatString: "MMM YYYY",
                        yValueFormatString: "#,##0",
                        dataPoints: [
                            { x: new Date({{$year}}, 0),  y: {{$jan->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 1), y: {{$feb->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 2), y: {{$mar->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 3),  y: {{$apr->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 4),  y: {{$may->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 5),  y: {{$jun->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 6), y: {{$jul->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 7), y: {{$aug->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 8),  y: {{$sep->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 9),  y: {{$oct->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 10),  y: {{$nov->where('confirmed_to_policy',1)->count()}} },
                            { x: new Date({{$year}}, 11), y: {{$dec->where('confirmed_to_policy',1)->count()}} }
                        ]
                    }]
            };
            $("#chartContainer").CanvasJSChart(options);

            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.prospects-header')
@endsection

{{--Set Page Heading--}}
@section('heading')
    Prospects Dashboard:
@endsection
@section('done-by', '')
@section('searches')
    <button onclick="createNewProspect()" type="button" class="navButtons" style="margin-bottom: 0;background-color: #42f174; float: right; color: black"><i
            class="fa fa-user-plus"></i> &nbsp;Create New Prospect
    </button>
@endsection

{{--Page Content Goes here--}}
@section('content')
    <div id="chartContainer" style="height: 300px; width: 99%;"></div>
    <div class="guestDetails_inputDivider"></div><br>
@endsection

{{--System Hints Page--}}

@section('modal_heading')
    <h1>Prospects Dashboard</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <ol><b>
            <li>Create New Prospects into the System</li>
            <li>View Graphical Reports on Prospects</li>
            <li>Print Prospect Graphical Reports</li>
        </b>
    </ol>
@endsection
