@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Heat Map
    @parent
@stop

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

@stop
{{-- Page content --}}
@section('content')
    <section class="content-header">
        <!--section starts-->
        <h1>Heat Map
            @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_scatter', 'tabledd') }, 2000);">
                    Export
                </button>
            @endif
        </h1>
    </section>
    <!--section ends-->
    <section class="content">
        <!--main content-->
    <!--row starts-->
        <div class="col-md-4">
            <!--lg-6 starts-->
            <!--basic form starts-->
            <div class="" 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>
                        <div class="input-block active-first-tier" >
                            @include("admin.layouts.grow.growDimensions")
                            @include("admin.layouts.grow.growKeyFigures", ["label" => "key_figy", "name" => "Key Figure Y-Axis*", "required" => "required"])
                            @include("admin.layouts.grow.growFilters")
                        </div>
                        <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>
        <!--md-6 ends-->
        <div class="col-md-8 pull-right">
            <div class="panel panel-primary" id="chart_scatter">
                <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> Heat Map 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%">
                        <canvas id="scatter-chart" width="600" height="350"></canvas>
                        <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 pull-right">
            <div class="panel panel-primary no-search-datatable ">
                <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> Heat Map 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" style="font-size:15px" id="tabledd" width="100%">
                            <thead>
                            <tr>
                                <th>{{ $dimensionName }}</th>
                                <th>Total Demand(CY)</th>
                                <th>Share Of Wallet(PY)</th>
                                <th>{{ $chartKeyFigureY }}</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($segmentsvalues as $segment)
                                    <tr>
                                        <td>{{ $segment->segmentName }}</td>
                                        <td>{{ $segment->demand }}</td>
                                        <td>{{ $segment->shareOfWallet }}%</td>
                                        <td>{{ $segment->keyFigureSum }}%</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tr style="font-weight: bold">
                                <td style="text-transform: uppercase">Total</td>
                                <td>{{ $totalDemand }}</td>
                                <td>{{ $totalShareOfWallet }}%</td>
                                <td>{{ $totalKeyFigure }}%</td>
                            </tr>
                            <tfoot>
                                <tr>
                                    <td colspan='10'>
                                        <strong>*Filter criteria</strong> </br>
                                        @include("admin.filters_display", ['filter' => $filters_name])
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- End Of Main Application -->
                </div>
            </div>
        </div>
        <!--main content ends-->
    </section>
    <!-- content -->

@stop

{{-- page level scripts --}}
@section('footer_scripts')
    <script>
        var appSettings = {
            values:       "{{json_encode($chartData)}}",
            x_max:        "{{json_encode($chartMaxX)}}",
            x_min:        "{{json_encode($chartMinX)}}",
            y_max:        "{{json_encode($chartMaxY)}}",
            y_min:        "{{json_encode($chartMinY)}}",
            key_figure_x: "{{json_encode($chartKeyFigureX)}}",
            key_figure_y: "{{json_encode($chartKeyFigureY)}}",
            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/chart-min.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/accounting.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/heat_map.js') }}" ></script>
@stop