@extends('admin.layouts.default')

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

{{-- page level styles --}}
@section('header_styles')
    <link rel="stylesheet" type="text/css"
          href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}"/>
    <link href="{{ asset('assets/css/pages/tables.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
    <script>
        $(document).ready(function () {
            $('.corner-cut:nth-child(10)').addClass("active");
            $('.corner-cut-withoutMenu:nth-child(10)').addClass("active");
            $('#analytics').removeClass("hidden_analytics");
            $('#portfolio').removeClass("hide");
            $('#market-share-development').removeClass("hide");
            $('#differentiation').removeClass("hide");
            $('#css_development').removeClass("hide");
        });
        window.onload = function() {
            setTimeout(function(){$('#overlay').fadeOut()} , 700);
        }
    </script>
@stop

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

        </div>

    </div>



    <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>
    <section class="">
        @include('admin.layouts.CDP.cdp_menu')

    </section>

    <button class="cdp_export" id="button-mdd" onclick="loading();setTimeout(function(){ save_tabel_and_chart('chart_trend', 'portfolio_tbl1') }, 2000);">Export</button>
    <!-- Main content -->
    <section class="cdp-overflow-height cdp-portfolio">

        <div class="col-md-12" style="margin-right: 10%">
            <div><h3>{{$menu_info[0]['Sold_To_ID'] }} | {{$menu_info[0]['Sold_To_Name'] }} </h3></div>
            <div class="panel panel-primary" id="chart_trend">
                <div class="panel-heading">
                    <h3 class="panel-title ">
                        <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                           data-hc="#F0785F"></i> Portfolio Development
                    </h3>
                    <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        </span>
                </div>

                <div class="panel-body">
                    <section class="content paddingleft_right15">
                        <div class="chart_representation">
                            <section class="data_chart_section">
                                @foreach($main_array as $ma_key => $ma_value)

                                    <div class="chart-wrapper" style="width: 100%">

                                        <p>  </p>

                                        <div class="full_chart">
                                            @foreach ($ma_value['values'] as $row_key => $row_value)
                                                                                                @if($row_value['totalVal']>0)
                                                    <div class="basic_product"
                                                         style="width:calc(% - 1%); "
                                                    >
                                                        <h1>                                                            ( 0                                                            0%)</h1>
                                                        <i class="line_title_chart"> </i>
                                                        @foreach ($row_value['values'] as $chart_key => $chart_value)
                                                                                                                        @if($chart_value['value']!=0)
                                                                <div class="parameter_quantitative_chart_parent"
                                                                     style="width:calc(0% - 0px); background-color: #fff ">
                                                                    <div class="parameter_quantitative_chart tooltip_param_chart"
                                                                         style="width:calc(100% - 1px); ">
                                <span class="info_tooltipText_parameter">->0%</span>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                            @if($chart_value['value']==0)
                                                                <p class="parameter_quantitative_chart tooltip_param_chart"
                                                                   style="display: none">
                                <span class="info_tooltipText_parameter">->0%</span>
                                                                </p>
                                                            @endif
                                                        @endforeach
                                                    </div>

                                                @endif
                                            @endforeach
                                        </div>
                                        <p> 0&nbsp; EUR </p>

                                    </div>
                                @endforeach
                            </section>
                            <section class="legend_chart">
                                <h1 style="text-decoration: underline;font-size: 24px">Legend:</h1>

                                @foreach($legend_array['title'] as $key => $value)
                                    <p class="title_legend"><span
                                                style="width: 10px;height: 10px; border: 1px solid black ;background-color:rgba();display: inline-block ;margin-right: 15px "></span>
                                         </p>
                                @endforeach
                            </section>
                        </div>
                    </section>
                </div>
            </div>
        </div>



        <div class="col-md-12" style="margin-right: 10%">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title ">
                        <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                           data-hc="#F0785F"></i> Portfolio Development Table
                    </h3>
                    <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        </span>
                </div>

                <div class="panel-body">
                    <section class="content paddingleft_right15">


                        <table class="table table-striped table-bordered" id="portfolio_tbl1">
                            <thead>
                                <th></th>
                                <th colspan="2" >Last Year 2021</th>
                                <th colspan="2" >Plan Current Year 2022</th>
                                <th colspan="2" >Plan Next Year 2023</th>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Product Type PH1</td>
                                <td>Gross Sales (EUR)</td>
                                <td>Share (%)</td>
                                <td>Gross Sales (EUR)</td>
                                <td>Share (%)</td>
                                <td>Gross Sales (EUR)</td>
                                <td>Share (%)</td>
                            </tr>
                            @foreach($newEntries as $key => $value)
                                <tr>
                                    <td>{{$value[0]['Prodh35_Head']}}</td>
                                    <td>{{number_format($value[0]['netsales_py']) }}</td>
                                    <td>{{number_format($value[0]['last']) . "%"}}</td>
                                    <td>{{number_format($value[0]['netsales_cy']) }}</td>
                                    <td>{{number_format($value[0]['current']) . "%"}}</td>
                                    <td>{{number_format($value[0]['rr_cy']) }}</td>
                                    <td>{{number_format($value[0]['next']) . "%"}}</td>
                                </tr>
                            @endforeach
                            <tr class="bold">
                                <td>Total</td>
                                @foreach($main_array as $ma_key => $ma_value)
                                    <td >{{number_format($ma_value['price'])}}</td>
                                    <td></td>
                                @endforeach
                            </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
        </div>
    </section>

@stop

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

    <script>
        var route_export="{{route('admin.cdp_export_chart')}}";
        var cdp_id="{{$cdp_obj->ID}}";
        var userid="{{\Cartalyst\Sentinel\Laravel\Facades\Sentinel::getUser()->id}}";
        var portfolio_header = true;
    </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 type="text/javascript" src="{{ asset('assets/js/pages/cdp_overview.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>
    </script>

    <script>
        $('.chart_representation').css("display", "block");
    </script>
@stop