@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    Overview CDPs
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
{{--      <link href="{{ asset('assets/css/pages/form2.css') }}" rel="stylesheet"/>--}}
{{--      <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>--}}
@stop

{{-- Page content --}}
@section('content')
    <div class="popup-wrapper">
        <div class="popup">

        </div>
    </div>
    <section class="content-header">
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="livicon" data-name="home" data-size="14" data-color="#000"></i>
                    Home
                </a>
            </li>
            <li><a>Sales Dashboard</a></li>
            <li class="active">Overview</li>
        </ol>
    </section>


    <!-- Main content -->
    <section class="content paddingleft_right15 sd_overview_table">
        <div class="row">
            <div class=" panel-primary ">
                <div class="sd_overview_title"><h1>OVERVIEW</h1></div>
                <div class="sd_overview_content">
                    <div class="quarter">
                        <div class="sd_overview_title_content">Sales</div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">
                            <div id="overlay_overview_sales_month" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">{{$current_month}}</div>
                            <div id="sd_arrow_sales_month" class="sd_arrow"></div>
                            <div id="sales_month_left" class="sd_overview_value_left"></div>
                            <div id="sales_month_right" class="sd_overview_value_right"></div>
                        </div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">
                            <div id="overlay_overview_sales_year" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">{{$current_year}}</div>
                            <div id="sd_arrow_sales_year" class="sd_arrow"></div>
                            <div id="sales_year_left" class="sd_overview_value_left"></div>
                            <div id="sales_year_right" class="sd_overview_value_right"></div>
                        </div>
                    </div>
                    <div class="quarter">
                        <div class="sd_overview_title_content">CM 2</div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">
                            <div id="overlay_overview_cm2_month" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">{{$current_month}}</div>
                            <div id="sd_arrow_cm2_month" class="sd_arrow"></div>
                            <div id="cm2_month_left" class="sd_overview_value_left"></div>
                            <div id="cm2_month_right" class="sd_overview_value_right"></div>
                        </div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">
                            <div id="overlay_overview_cm2_year" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">{{$current_year}}</div>
                            <div id="sd_arrow_cm2_year" class="sd_arrow"></div>
                            <div id="cm2_year_left" class="sd_overview_value_left"></div>
                            <div id="cm2_year_right" class="sd_overview_value_right"></div>
                        </div>
                    </div>
                    <div class="quarter">
                        <div class="sd_overview_title_content">Pipeline</div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">  <div id="overlay_overview_pipeline_sales" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">EXPECTED SALES</div>
                            <div id="pipeline_exp_sales" class="sd_overview_value_center"></div>
                        </div>
                        <div class="sd_line_horizontal"></div>
                        <div class="sd_overview_content_values">  <div id="overlay_overview_pipeline_cm2" style="/*! display: none; */">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div></div>
                            </div>
                            <div class="sd_overview_content_values_info">EXPECTED CM2</div>
                            <div id="pipeline_exp_cm2" class="sd_overview_value_center"></div>
                        </div>
                    </div>
                    <div class="quarter">
                        <div class="sd_overview_title_content">CDP</div>
                        <div class="sd_line_horizontal"></div>
                        <div id="overlay_overview_cdp" style="/*! display: none; */">
                            <div class="lds-roller">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div></div>
                        </div>
                        <div class="sd_overview_content_values">

                            <div class="sd_overview_content_values_info">PLAN</div>
                            <div id="cdp_plan" class="sd_overview_value_right" style="line-height: 140px"></div>
                        </div>

                        <div id="cdp_sd_arrow" class="sd_arrow"></div>

                        <div class="sd_overview_content_values">
                            <div class="sd_overview_content_values_info">RUNNING RATE</div>
                            <div id="cdp_rr" class="sd_overview_value_right" style="line-height: 140px"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

{{-- page level scripts --}}
@section('footer_scripts')

    <script>

        var route_pipeline="{{route("admin.sd_overview.ajax.pipeline")}}";
        var route_cdp="{{route("admin.sd_overview.ajax.cdp")}}";
        var route_redis_values="{{route("admin.sd_overview.ajax.redis_values")}}";
        var path_arrow_red="{{ asset('assets/img/red-arrow.png') }}";
        var path_arrow_green="{{ asset('assets/img/green-arrow.png') }}";


    </script>

    <script type="text/javascript" src="{{ asset('assets/js/pages/sd_overview.js') }}"></script>

@stop