@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    @lang('CDP/cdp_differentiation.page_title')
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
    <script> window.onload = function () {
            setTimeout(function(){$('#overlay').fadeOut()} , 500);
        }
    </script>

@stop

{{-- Page content --}}
@section('content')
    <div id="overlay">
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <div id="differentiation-chartModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>

            <button class="cdp_export" title="Export" id="button-mdd" onclick="loading();setTimeout(function(){save_chart('differentiation_chart') }, 2000);">
                <img  src="{{asset('assets/img/export.svg')}}" alt="@lang('button.export')" width="28px" height="28px">
            </button>

            <div class="panel panel-primary" id="differentiation_chart" style="margin-top: 50px;box-shadow:none;">
                <div class="panel-heading">
                    <h3 class="panel-title ">
                        <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#fff"
                           data-hc="#fff"></i> @lang('CDP/cdp_differentiation.differentiation_chart')
                    </h3>
                    <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        </span>
                </div>

                <div class="panel-body">
                    <canvas id="differentiation-chart_copy" height="100"></canvas>
                </div>
            </div>

        </div>
    </div>
    <div id="differentiation-plot1Modal" class="modal">
        <div class="modal-content" style="text-align: center">
            <span class="close close_plot1">&times;</span>

            <button class="cdp_export" id="button-mdd" title="Export" onclick="loading();setTimeout(function(){save_chart('chart_kbf') }, 2000);">
                <img  src="{{asset('assets/img/export.svg')}}" alt="@lang('button.export')" width="28px" height="28px">
            </button>

            <div class="panel panel-primary" id="chart_kbf" style="margin-top: 50px;">

                <div class="panel-heading">
                    <h3 class="panel-title ">
                        <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#fff"
                           data-hc="#fff"></i> @lang('CDP/cdp_differentiation.kbf_analysis')
                    </h3>
                    <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>

                <div class="panel-body" style="text-align: center;">

                    <canvas id="differentiation-plot1_copy" width="100"></canvas>
                    <section class="legend_color">
                                            </section>
                </div>
            </div>
        </div>
    </div>

    <section class="">
        @include('admin.layouts.CDP.cdp_menu')

    </section>

    <section class="cdp-overflow-height">

        <section class="content" id="chart">

            <!--main content-->
            <div class="row">
                <div><h3>{{$menu_info[0]['Sold_To_ID'] }} | {{$menu_info[0]['Sold_To_Name'] }} </h3></div>
                <div class="col-md-6">

                    <div class="info_click_differentiation-chart">
                        @lang('CDP/cdp_differentiation.full_screen_export_indication')
                        <span id="info_click_differentiationchartClose">&times;</span>
                    </div>
                    <div class="panel panel-primary" id="chart_trend" style="margin-top: 80px">
                        <div class="panel-heading">
                            <h3 class="panel-title ">
                                <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#fff"
                                   data-hc="#fff"></i> @lang('CDP/cdp_differentiation.differentiation_chart')
                            </h3>
                            <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        </span>
                        </div>

                        <div class="panel-body">
                            <canvas id="differentiation-chart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="info_click_differentiation-plot1">
                        @lang('CDP/cdp_differentiation.full_screen_export_indication')
                        <span id="info_click_differentiation-plot1Close">&times;</span>
                    </div>
                    <div class="panel panel-primary" id="chart_trend" style="margin-top: 80px">

                        <div class="panel-heading">
                            <h3 class="panel-title ">
                                <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#fff"
                                   data-hc="#fff"></i> @lang('CDP/cdp_differentiation.kbf_analysis')
                            </h3>
                            <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                        </div>
                        <div class="panel-body" style="text-align: center;">

                            <canvas id="differentiation-plot1" width="100" height="100">
                            </canvas>
                            <section class="legend_color">
                                                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
@stop


{{-- page level scripts --}}
@section('footer_scripts')
    <script>
        $("#info_click_differentiation").on('click',function (){
            console.log('test');
            $("#info_click_differentiation-plot1").css('display','none');
        })
    </script>


    <script>
        var route_export = "{{route('admin.cdp_export_chart')}}";
        var exportChart = "{{json_encode(__('js/exportChart'))}}";
    </script>

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

    <script>
    </script>

        <script>
        $(document).ready(function () {
            $('.corner-cut:nth-child(12)').addClass("active");
            $('.corner-cut-withoutMenu:nth-child(12)').addClass("active");
            $('#analytics').removeClass("hidden_analytics");
            $('#portfolio').removeClass("hide");
            $('#market-share-development').removeClass("hide");
            $('#differentiation').removeClass("hide");
            $('#css_development').removeClass("hide");

        });
    </script>
    <script>
        var appSettings = {
            values: '{{json_encode($values)}}',
            x_label: '{{json_encode($x_label)}}'
        };
        var kbf_analysis = {"labels":null,"kbf_analysis":null,"yAxis_labels":null};

        var cdp_id = "{{$cdp_obj->ID}}";
        var userid = "{{\Cartalyst\Sentinel\Laravel\Facades\Sentinel::getUser()->id}}";

    </script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/accounting.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/chart-min.js') }}"></script>
    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script> --}}
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/html2canvas.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/key_buying_factor_analysis.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/differentiation.js') }}"></script>
{{--    <script src="{{ \App\Http\Classes\LaravelEchoServerClientInterface::getHost() }}:{{\App\Http\Classes\LaravelEchoServerClientInterface::getPort()}}/socket.io/socket.io.js"></script>--}}
{{--    <script src="{{ asset('assets/js/laravel_echo/laravel-echo-setup.js') }}" type="text/javascript"></script>--}}
    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_broadcaster.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_overview.js') }}"></script>

@stop