@extends('layouts.app')

@section('content')
    <div class="col-md-12">
        <div class="row">
            <div class="top-bred-wrap">
                <ul class="breadcrumb pull-left">
                    <li><a href="#">Home</a></li>
                    <li>Business Dashboard</li>
                </ul>
                <button class="btn pull-right help_btn">?</button>
            </div>
            <div class="cont-inner-wrap">
                <div class="page-tittleBox">
                    <div class="caption pull-left">
                        <h2 class="pageHead">Business Dashboard</h2>
                        <span class="subtitle"></span>
                    </div>
                </div>
                <div class="cont-dtsBox cont_dashBox">
                    <div id="leads">
                        <!-- TAB-START -->
                        <div class="lead_tabs">
                            <ul id="dash_tabWrap" class="lead_tabsNav nav nav-tabs sidebar-tabs" role="tablist">
                                <li><a href="#tab-1" class="active" role="tab" data-toggle="tab">DEALS STREAM</a></li>
                                <!-- <li><a href="#tab-2" role="tab" data-toggle="tab">OPPORTUNITIES</a></li>
                                <li><a href="#tab-3" role="tab" data-toggle="tab">TEAM PERFORMANCE</a></li> -->
                            </ul>
                            <div class="tab-content">
                                <!-- TAB-01-START -->
                                <div class="tab-pane active" id="tab-1">
                                    <div class="lead_highlights">
                                        <div class="each_highlight box">
                                            <div class="main_filter">Today</div>
                                            <div class="filter_result">
                                                <span class="this_total">6</span>
                                                <img src="{{asset('admin/images/arrow-up.png')}}" alt="arrow" />
                                            </div>
                                            <div class="comparison">
                                                <span class="last_tenure" style="display: inline;">Yesterday</span>
                                                : <span class="pre_total">55</span>
                                            </div>
                                        </div>

                                        <div class="each_highlight box">
                                            <div class="main_filter">This week</div>
                                            <div class="filter_result">
                                                <span class="this_all_total">14</span>
                                                <img src="{{asset('admin/images/arrow-down.png')}}" alt="arrow" />
                                            </div>
                                            <div class="comparison"><span class="last_tenure" style="display: inline;">Last week</span>
                                                : <span class="pre_all_total">20</span></div>
                                        </div>

                                        <div class="each_highlight box">
                                            <div class="main_filter">This month</div>
                                            <div class="filter_result">
                                                <span class="this_converted">20</span> 
                                                <img src="{{asset('admin/images/arrow-down.png')}}" alt="arrow" />
                                            </div>
                                            <div class="comparison">
                                                <span class="last_tenure" style="display: inline;">Last month</span>
                                                : <span class="pre_converted">30</span>
                                            </div>
                                        </div>

                                        <div class="each_highlight box">
                                            <div class="main_filter">This quarter</div>
                                            <div class="filter_result">
                                                <span class="this_conversion">50</span> 
                                                <img src="{{asset('admin/images/arrow-up.png')}}" alt="arrow" />
                                            </div>
                                            <div class="comparison">
                                                <span class="last_tenure" style="display: inline;">Last Quarter</span>
                                                : <span class="pre_conversion">50</span>
                                            </div>
                                        </div>

                                        <div class="each_highlight box">
                                            <div class="main_filter">This year</div>
                                            <div class="filter_result">
                                                <span class="this_lost">75</span>
                                                <img src="{{asset('admin/images/arrow-up.png')}}" alt="arrow" />
                                            </div>
                                            <div class="comparison">
                                                <span class="last_tenure" style="display: inline;">Last year</span>
                                                : <span class="pre_lost">60</span></div>
                                        </div>
                                    </div>
                                    <div class="bioDts-wrap">
                                        <!--BIO CHART-START-->
                                        <div class="bio_wrapBox">
                                            <div class="bio-1Box box bio_dubleBox">
                                                <div class="widget_head">
                                                    Licensed this month
                                                    <li class="button-dropdown dash_dropRight">
                                                        <a href="javascript:void(0)" class="pro-wrapBox dropdown-toggle">
                                                            <h6 class="dash_userName">This month</h6>
                                                            <i class="tNav-down-icon"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Monday</a></li>
                                                            <li><a href="#">Tuesday</a></li>
                                                            <li><a href="#">Wednesday</a></li>
                                                            <li><a href="#">Thursday</a></li>
                                                            <li><a href="#">Friday</a></li>
                                                            <li><a href="#">Saturday</a></li>
                                                            <li><a href="#">Sunday</a></li>
                                                        </ul>
                                                    </li>
                                                </div>
                                                <div class="widget_cont">
                                                    <div id="chartContainer1" class="bio_chartBox" style="height: 370px; width: 100%;"></div>
                                                </div>
                                            </div>
                                            <div class="bio-2Box box bio_dubleBox">
                                                <div class="widget_head">
                                                    Deals statistics
                                                    <li class="button-dropdown dash_dropRight">
                                                        <a href="javascript:void(0)" class="pro-wrapBox dropdown-toggle">
                                                            <h6 class="dash_userName">Deals statistics</h6>
                                                            <i class="tNav-down-icon"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Monday</a></li>
                                                            <li><a href="#">Tuesday</a></li>
                                                            <li><a href="#">Wednesday</a></li>
                                                            <li><a href="#">Thursday</a></li>
                                                            <li><a href="#">Friday</a></li>
                                                            <li><a href="#">Saturday</a></li>
                                                            <li><a href="#">Sunday</a></li>
                                                        </ul>
                                                    </li>
                                                </div>
                                                <div class="widget_cont">
                                                    <div id="chartContainer2" class="bio_chartBox" style="height: 370px; width: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bio_wrapBox">
                                            <div class="bio-2Box box bio_singleBox">
                                                <div class="widget_head">
                                                    Deals source statistics
                                                    <li class="button-dropdown dash_dropRight">
                                                        <a href="javascript:void(0)" class="pro-wrapBox dropdown-toggle">
                                                            <h6 class="dash_userName">Deals source statistics</h6>
                                                            <i class="tNav-down-icon"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Monday</a></li>
                                                            <li><a href="#">Tuesday</a></li>
                                                            <li><a href="#">Wednesday</a></li>
                                                            <li><a href="#">Thursday</a></li>
                                                            <li><a href="#">Friday</a></li>
                                                            <li><a href="#">Saturday</a></li>
                                                            <li><a href="#">Sunday</a></li>
                                                        </ul>
                                                    </li>
                                                </div>
                                                <div class="widget_cont">
                                                    <div id="chartContainer3" class="bio_chartBox" style="height: 370px; width: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--BIO CHART-END-->
                                    </div>
                                </div>
                                <!-- TAB-01-END -->
                                <!-- TAB-02-START -->
                                <div class="tab-pane" id="tab-2">

                                </div>
                                <!-- TAB-02-END -->
                                <!-- TAB-03-START -->
                                <div class="tab-pane" id="tab-3">

                                </div>
                                <!-- TAB-03-END -->
                            </div>
                        </div>
                        <!-- TAB-END -->


                    </div>



                </div>
            </div>
        </div>
    </div>
@endsection

@section('admin_css')

@stop
@section('admin_js')
<script type="text/javascript" src="{{asset('admin/js/canvasjs.min.js')}}"></script>

<script type="text/javascript">
    $(document).ready(function(){
         var chart1 = new CanvasJS.Chart("chartContainer1", {
        theme: "light2",
        exportFileName: "Doughnut Chart",
        exportEnabled: false,
        animationEnabled: true,
        title: {
            text: "71%",
            verticalAlign: "center",
            fontSize: 24,
            dockInsidePlotArea: true
        },
        legend: {
            cursor: "pointer",
            itemclick: explodePie
        },
        data: [{
                type: "doughnut",
                innerRadius: 90,
                showInLegend: true,
                toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
                indexLabel: "{name} - #percent%",
                dataPoints: [
                    {y: 450, name: "Monday"},
                    {y: 120, name: "Tuesday"},
                    {y: 300, name: "Wednesday"},
                    {y: 800, name: "Thursday"},
                    {y: 150, name: "Friday"},
                    {y: 150, name: "Saturday"},
                    {y: 100, name: "Sunday"}
                ]
            }]
    });

    function explodePie(e) {
        if (typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
            e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
        } else {
            e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
        }
        e.chart.render();
    }

    var chart2 = new CanvasJS.Chart("chartContainer2", {
        title: {
            text: ""
        },
        data: [
            {
                // Change type to "doughnut", "line", "splineArea", etc.
                type: "column",
                dataPoints: [
                    {label: "Jan", y: 10},
                    {label: "Feb", y: 15},
                    {label: "Mar", y: 25},
                    {label: "Apr", y: 30},
                    {label: "May", y: 28},
                    {label: "Jun", y: 20},
                    {label: "Jul", y: 10},
                    {label: "Aug", y: 15},
                    {label: "Sep", y: 25},
                    {label: "Oct", y: 30},
                    {label: "Nov", y: 28},
                    {label: "Dec", y: 20}
                ]
            }
        ]
    });

    var chart3 = new CanvasJS.Chart("chartContainer3", {
        animationEnabled: true,
        theme: "light2", // "light1", "light2", "dark1", "dark2"
        title: {
            text: ""
        },
        axisY: {
            title: "2018"
        },
        data: [{
                type: "column",
                showInLegend: true,
                legendMarkerColor: "grey",
                legendText: "MMbbl = one million barrels",
                dataPoints: [
                    {y: 300878, label: "JANUARY"},
                    {y: 266455, label: "FEBRUARY"},
                    {y: 169709, label: "MARCH"},
                    {y: 158400, label: "APRIL"},
                    {y: 142503, label: "MAY"},
                    {y: 101500, label: "JUNE"},
                    {y: 300983, label: "JULY"},
                    {y: 80000, label: "AUGUST"},
                    {y: 101500, label: "SEPTEMBER"},
                    {y: 97800, label: "OCTOBER"},
                    {y: 80000, label: "NOVEMBER"},
                    {y: 80000, label: "DECEMBER"}
                ]
            }]
    });
    chart1.render();
    chart2.render();
    chart3.render();
        
    });

</script>

@stop