@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Share Of Wallet
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/buttons.bootstrap.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/colReorder.bootstrap.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/rowReorder.bootstrap.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/buttons.bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/scroller.bootstrap.css') }}">

    <link href="{{ asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.css') }}"  rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/vendors/iCheck/css/all.css') }}"  rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/pages/pareto.css') }}"  rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/pages/tables.css') }}" />
    <link href="{{ asset('//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css') }}"  rel="stylesheet" type="text/css" />
    <link href=""  rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css"  rel="stylesheet" type="text/css" />

@stop

{{-- Page content --}}
@section('content')

    <section class="content-header">
        <!--section starts-->
        <h1>Share Of Wallet</h1>

    </section>
    <!--section ends-->
    <section class="content">

        <div class="col-md-4">
            <div id="hidepanel1">
                <div class="panel-body">
                    <form class="form-horizontal pareto-menu" action="#">
                        <div class="form-position">
                            <button type="button" onClick="clearForm(this.form)" id="button-lg"
                                    class="btn btn-responsive btn-primary btn-lg">
                                Clear Inputs
                            </button>
                        </div>
                        @include("admin.layouts.grow.growFilters")
                        <div class="form-position">

                            <button type="submit" id="button-lg" class="btn btn-responsive btn-primary btn-sm">Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8 pull-right">
            <div class="panel panel-primary" id="chart_demand">
                <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> Share Of Wallet Chart
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>
                <div class="panel-body">
                    <div style="width:100%">
                        <div class="grow_share_of_wallet_graphics">
                            <div class="grow_share_of_wallet_graph">
                                <p>Share of Demand</p>
                                <canvas id="grow_share_of_demand" width="100%" height="130"></canvas>
                            </div>
                            <div class="grow_share_of_wallet_graph">
                                <p>Sales Projected EUR (CDP only)</p>
                                <canvas id="grow_sales_projected_eur" width="100%" height="130"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 pull-right">
            <!-- Stack charts strats here-->
            <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="#F0785Ff"></i>Share Of Demand Table
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>
                <div class="panel-body">

                    <div class="table-responsive height-scroll-table">
                        <table class="table table-striped table-bordered" id="table2" width="100%">
                            <thead>
                            <tr>
                                <th>Competitor Name</th>
                                <th>Share of Demand % (CY)</th>
                                <th>Share of Demand % (CY+3)</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($pfleidererSare as $share)
                                <tr>
                                    <td>
                                       Coveris
                                    </td>

                                    <td>
                                        {{ $share->shareOfDemandCY }}%
                                    </td>

                                    <td>
                                        {{ $share->shareOfDemandCY3 }}%
                                    </td>
                                </tr>
                            @endforeach

                            @foreach($shareOfWallet as $share)
                                <tr>
                                    <td>
                                        {{ $share->competitorName }}
                                    </td>

                                    <td>
                                        {{ $share->shareOfDemandCY }}%
                                    </td>

                                    <td></td>
                                </tr>
                            @endforeach

                            </tbody>
                             @include("admin.layouts.grow.displaySelectedFilters")
                        </table>
                    </div>
                </div>
            </div>
            <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>Sales Projected (EUR) Table
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>
                <div class="panel-body">

                    <div class="table-responsive height-scroll-table">
                        <table class="table table-striped table-bordered" id="table2" width="100%">
                            <thead>
                            <tr>
                                <th style="width: 20%" >Gross Sales  {{ $currentYear -1 }} (EUR)</th>
                                <th >Sales Projected {{ $currentYear }} (EUR)</th>
                                <th >Sales Projected {{ $currentYear +1 }} (EUR)</th>
                                <th >Sales Projected {{ $currentYear +2 }} (EUR)</th>
                                <th >Sales Projected {{ $currentYear +3 }} (EUR)</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($projectedSales as $sales)
                                <tr>
                                    <td>
                                        {{ $sales->salesPY }}
                                    </td>

                                    <td>
                                        {{ $sales->salesCY }}
                                    </td>

                                    <td>
                                        {{ $sales->salesCY_1 }}
                                    </td>

                                    <td>
                                        {{ $sales->salesCY_2 }}
                                    </td>

                                    <td>
                                        {{ $sales->salesCY_3 }}
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                                @include("admin.layouts.grow.displaySelectedFilters")
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- content -->

@stop
{{-- page level scripts --}}
@section('footer_scripts')
    <script>
        var appSettings = {
            arrLable:                          "{{json_encode($chartLabels)}}",
            arrdata:                           "{{json_encode($chartShareOfDemand)}}",
            grow_sales_projected_eur_data:     "{{json_encode($chartProjectedSales)}}",
            jump_off_point:                    "{{json_encode($jump_off_point)}}",
        };
        var route_dimension_to_filter="{{route('admin.ajax.grow_dimensionToFilter')}}"

    </script>

    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/clear_input.js') }}"></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/pages/html2canvas.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/export_chart.js') }}"></script>
    <script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>
    <script src="{{ asset('assets/vendors/iCheck/js/icheck.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form_examples.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script language="javascript" type="text/javascript"
            src="{{ asset('assets/js/pages/grow_share_of_wallet.js') }}"></script>
@stop