@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Target Map
    @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>
            Target Map
        </h1>
    </section>
    <!--section ends-->
    <section class="content">
        <div class="col-md-4" style="padding:0;">
            <!--lg-6 starts-->
            <!--basic form starts-->
            <div class="" id="hidepanel1">

                <div class="panel-body">
                    <form class="form-horizontal pareto-menu" action="#">
                        <!-- CSRF Token -->
                        <!-- Name input-->
                        <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>
                        <h2 class="first-tier-trigger">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>MEASURES
                        </h2>
                        <div class="input-block active-first-tier">

                            @include('admin.layouts.pipeline.measures')

                        </div>
                        <h2 class="first-tier-trigger">
                            <i class="glyphicon glyphicon-chevron-down showhide clickable"></i>
                            FILTERS
                        </h2>
                        <div class="input-block">

                            @include('admin.pipelineFilters')

                        </div>
                        <!-- Form actions -->
                        <div class="form-position">

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

                        </div>
                    </form>
                </div>
            </div>

        </div>

        <div class="col-md-8">
            <!-- Stack charts strats here-->
            <div class="panel panel-primary" id="ramp_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> Target 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: calc(100% - 25px);float: right;">
                        <canvas id="ramp_up_curve_scatter" width="400" height="200"></canvas>
                    </div>
                    <div class="ramp_up_curve_yaxis">
                        <span style="float: left">Lost</span>
                        <span style="float: right">Won</span>
                    </div>
                    <!-- End Of Main Application -->
                </div>
            </div>
        </div>


        <div class="col-md-8" style="float: 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> Target Map Table
                    </h3>
                    <span class="pull-right">
                    <i class="glyphicon glyphicon-chevron-up showhide clickable arrow-down panel-collapsed"></i>

                    </span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive height-scroll-table">
                        @if(empty($request->get('key_fig')))
                            No data provided !
                        @else
                            <table class="table table-striped table-bordered" id="table2" width="100%">
                                <thead>
                                <tr>
                                    <th style="background-color: #7cadd6" colspan="5">Target Map</th>
                                </tr>
                                <tr>
                                    <th>{{$selected_dimension}} </th>
                                    <th>Won (EUR)</th>
                                    <th>Lost (EUR)</th>
                                    <th>Net Outcome</th>
                                    <th>Expected (In Progress)</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($table_results as $table_result)
                                    <tr>
                                        <td>{{$table_result->Dimension}}</td>
                                        <td>{{$table_result->Sum_Won}}</td>
                                        <td>{{$table_result->Sum_Lost}}</td>
                                        <td>{{$table_result->Net_Outcome}}</td>
                                        <td>{{$table_result->Sum_In_Progress}}</td>
                                    </tr>
                                @endforeach
                                <td colspan="5">
                                    @include("admin.pipeline_display_filters")
                                </td>
                                </tbody>
                            </table>
                        @endif

                    </div>

                    <!-- End Of Main Application -->
                </div>

            </div>
        </div>

    </section>

@stop
<script>
    var black_points = "{{json_encode($black_points)}}";
    var chart_results = "{{json_encode($chart_results)}}";
    var jump_off_point = "{{route('admin.ramp_up_curve')}}";
    var route_dimension_to_filter = "{{route('admin.ajax.pipeline_dimensionToFilter')}}";
    var date_since = "{{App\Helpers\PipelineMeasure::DATE_SINCE}}";
    var date_from = "{{App\Helpers\PipelineMeasure::DATE_FROM}}";

</script>

{{-- page level scripts --}}
@section('footer_scripts')
    <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/chart-min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/target_map.js') }}"></script>

@stop