@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Grow Market Position
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')


    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>


@stop

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

    <section class="content-header">
        <!--section starts-->
        <h1>Grow Market Position
            @if(\App\Models\Role_Permission::hasExportPermission())
                <button style="width: 100px; float: right; text-transform: capitalize; " id="button-md"
                        onclick="loading();setTimeout(function(){ save_tabel_and_chart('chart_demand', 'tabledd') }, 2000);">
                    Export
                </button>
            @endif
        </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.growDimensions")
                        @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> Market Position Chart
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive" >
                        <div class="grow_market_position_graphics" >
                            <div class="grow_market_position_graph" >
                                <p>Size (CY)</p>
                                <canvas id="grow_size(cy)" width="100%" height="150"></canvas>
                            </div>
                            <div class="grow_market_position_graph" >
                                <p>Market Growth  (CY vs PY)</p>
                                <canvas id="market_growth(CYvsPY)" width="100%" height="150"></canvas>
                            </div>
                            <div class="grow_market_position_graph" >
                                <p>Share of Wallet(PY)</p>
                                <canvas id="share_of_wallet(PY)" width="100%" height="150"></canvas>
                            </div>
{{--                            <div class="grow_market_position_graph" >--}}
{{--                                <p>SoW incl CDP(CY+3)</p>--}}
{{--                                <canvas id="sowincl_cdp(cy_3)" width="100%" height="157"></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="#F0785F"></i> Market Position 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="tabledd" width="100%">
                            <thead>
                            <tr>
                                <th style="min-width: 170px">{{ $dimensionName }}</th>
                                <th>Size (CY)</th>
                                <th>Market Growth (CY vs PY)</th>
                                <th>Share Of Wallet (PY)</th>

                            </tr>
                            </thead>
                            <tbody>
                            @foreach($segmentsValues as $segment)
                                <tr>
                                    <td style="min-width: 170px">
                                        {{ $segment->segmentName }}
                                    </td>

                                    <td>
                                        {{ $segment->size }}
                                    </td>

                                    <td>
                                        {{ $segment->marketGrowth }}%
                                    </td>

                                    <td>
                                        {{ $segment->shareOfWallet }}%
                                    </td>

{{--                                    <td @if($segment->sowCDP > $segment->shareOfWallet ) style=" background-color: #00b050;border :none" @endif  @if($segment->sowCDP <= $segment->shareOfWallet ) style="background-color: #ff0000;border :none"@endif  >--}}
{{--                                        {{ $segment->sowCDP }}%--}}
{{--                                    </td>--}}
                                </tr>
                            @endforeach

                            </tbody>
                            <tr style="font-weight: bold">
                                <td style="font-weight: bold;text-transform: uppercase">
                                    Total
                                </td>

                                <td>
                                    {{ $totalSize }}
                                </td>

                                <td>
                                    {{ $totalMarketGrowth }}%
                                </td>

                                <td>
                                    {{ $totalShareOfWallet }}%
                                </td>

{{--                                <td @if($totalSowCDP > $totalShareOfWallet ) style="background-color: #00b050;border :1px solid #00b050"@endif  @if($totalSowCDP <= $totalShareOfWallet ) style="background-color: #ff0000 ;border :1px solid #ff0000"@endif  >--}}
{{--                                    {{ $totalSowCDP }}%--}}
{{--                                </td>--}}
                            </tr>
                            @include("admin.layouts.grow.displaySelectedFilters")
                        </table>
                    </div>
                </div>
            </div>
        </div>

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

@stop
<script>
    var appSettings = {
        labels: "{{json_encode($chartLabels)}}",
        size: "{{json_encode($chartSize)}}",
        market_growth: "{{json_encode($chartMarketGrowth)}}",
        share_of_wallet: "{{json_encode($chartShareOfWallet)}}",
        sow_cdp: "{{json_encode($chartsowCDP)}}",
        jump_off_point: "{{json_encode($jump_off_point)}}",
    };

    var route_dimension_to_filter="{{route('admin.ajax.grow_dimensionToFilter')}}"
</script>
@section('footer_scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.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 language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/grow_market_position.js') }}"></script>

@stop