@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Scatter Plot
    @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>
            Scatter Plot

            @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', 'table2') }, 2000);">
                    Export
                </button>
            @endif
        </h1>


    </section>
    <!--section ends-->
    <section class="content">
        <!--main content-->
        <!--row starts-->
        <div class="row">
            <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>
                            <h2 class="first-tier-trigger">MEASURES
                                <i class="glyphicon glyphicon-chevron-up showhide clickable" title="Show Panel content"></i>
                            </h2>
                            <div class="input-block active-first-tier">

                                @include("admin.layouts.impact.dimensions")
                                @include("admin.layouts.impact.KeyFigures", ["label" => "key_figx", "name" => "Key Figure X-Axis*", "required" => "required"])
                                @include("admin.layouts.impact.KeyFigures", ["label" => "key_figy", "name" => "Key Figure Y-Axis*", "required" => "required"])
                                @include("admin.layouts.impact.KeyFigures", ["label" => "key_fig_bubble", "name" => "Key Figure Bubble", "required" => ""])
                                @include("admin.layouts.impact.divisors", ["label" => "divisor_x", "name" => "Divisor X-Axis", "required" => ""])
                                @include("admin.layouts.impact.divisors", ["label" => "divisor_y", "name" => "Divisor Y-Axis", "required" => ""])
                                @include("admin.layouts.impact.divisors", ["label" => "divisor_bubble", "name" => "Divisor Bubble", "required" => ""])

                                @include("admin.layouts.impact.scale", ["label" => "scalex", "name" => "Scale X-Axis", "required" => ""])
                                @include("admin.layouts.impact.scale", ["label" => "scaley", "name" => "Scale Y-Axis", "required" => ""])

                                @include("admin.layouts.impact.range", ["label" => "rangex_from", "name" => "X-Axis Range From", "required" => ""])
                                @include("admin.layouts.impact.range", ["label" => "rangex_to", "name" => "X-Axis Range To", "required" => ""])
                                @include("admin.layouts.impact.range", ["label" => "rangey_from", "name" => "Y-Axis Range From", "required" => ""])
                                @include("admin.layouts.impact.range", ["label" => "rangey_to", "name" => "Y-Axis Range To", "required" => ""])

                                @include("admin.layouts.impact.dateRange",  ["labelFrom" => "date-from", "labelTo" => "date-to", "name" => "Date Range", "requiredFrom" => "", "requiredTo" => ""])

                            </div>
                            <h2 class="first-tier-trigger">
                                <i class="glyphicon glyphicon-chevron-down showhide clickable"></i>
                                FILTERS
                            </h2>
                            <div class="input-block ">
                                @include("admin.layouts.impact.filters" , ["dataset"=> ""])
                            </div>
                            <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>
            <!--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> Scatter Plot Chart
                            @include('admin.display_date_range')
                        </h3>
                        <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>

                        </span>
                    </div>
                    <div class="panel-body">
                        <canvas id="scatter-chart" width="600" height="350"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-8 pull-right">
                <!-- Stack charts strats here-->
                <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> Scatter Plot 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">
                            <table class="table table-striped table-bordered" id="table2" width="100%">
                                <thead>
                                <tr>
                                    <th>@if(isset($dimension_name)){{$dimension_name}}@endif</th>
                                    <th>@if(isset($key_figure_x)){{$key_figure_x}} @endif</th>
                                    <th>@if(isset($key_figure_y)){{$key_figure_y}}@endif</th>
                                    <th>@if(isset($key_figure_bubble)){{$key_figure_bubble}}@endif</th>
                                </tr>
                                </thead>
                                <tbody>

                                @if (isset($dimension))
                                    @if  (!empty($dimension))
                                        @foreach ($dimension as $key => $val)
                                            <tr>
                                                <td> {{$val}}  </td>
                                                @if (isset($flag_div_x))
                                                    @if ($flag_div_x)
                                                        <td> {{number_format($key_figures[$key][0], 2)}}</td>
                                                    @else
                                                        <td> {{number_format($key_figures[$key][0])}}</td>

                                                    @endif
                                                @endif

                                                @if (isset($flag_div_y))
                                                    @if ($flag_div_y)
                                                        <td> {{number_format($key_figures[$key][1], 2)}} </td>
                                                    @else
                                                        <td> {{number_format($key_figures[$key][1])}}</td>
                                                    @endif
                                                @endif

                                                @if ($key_figure_bubble == '')
                                                    <td></td>
                                                @else
                                                    @if (isset($flag_div_bbl))
                                                        @if ($flag_div_bbl)
                                                            <td>{{number_format($key_figures[$key][3], 2)}}</td>
                                                        @else
                                                            <td> {{number_format($key_figures[$key][3])}}</td>
                                                        @endif

                                                    @endif
                                                @endif

                                            </tr>
                                @endforeach

                                @if (isset($total_x) and isset($total_y))

                                    <tfoot>
                                    <tr>
                                        <th>Total</th>
                                        <th> @if($flag_div_x) {{number_format($total_x, 2) }} @else {{number_format($total_x)}} @endif</th>
                                        <th> @if($flag_div_y) {{number_format($total_y, 2) }} @else {{number_format($total_y)}} @endif</th>
                                        @endif

                                        @if ($_GET["key_fig_bubble"] != "")
                                            @if (isset($flag_div_bbl))
                                                <th> @if($flag_div_bbl) {{number_format($total_bbl, 2) }} @else {{number_format($total_bbl)}} @endif</th>
                                    </tr>
                                    @else
                                        <th></th></tr>
                                    @endif
                                    @else
                                        <th></th></tr>
                                    @endif

                                    <td colspan='4'>
                                        <strong>*Filter criteria</strong> </br>

                                        @include("admin.filters_display", ['filter'=>$filters_name])
                                    </td
                                    </tfoot>
                                @else
                                    <tr>
                                        <td>No data matching the selected filters was found!</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    @endif
                                    @endif

                                    </tbody>
                            </table>
                        </div>

                        <!-- End Of Main Application -->
                    </div>
                </div>
            </div>
        </div>
        <!--main content ends--> </section>
    <!-- content -->


@stop

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

    <script>

        var appSettings = {
            values: "{{json_encode($values)}}",
            x_max: "{{json_encode($x_max)}}",
            x_min: "{{json_encode($x_min)}}",
            y_max: "{{json_encode($y_max)}}",
            y_min: "{{json_encode($y_min)}}",
            key_figure_x: "{{json_encode($key_figure_x)}}",
            key_figure_y: "{{json_encode($key_figure_y)}}"
        };

    </script>

    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/scatter.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/accounting.js') }}"></script>
@stop