@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Variance 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>
            Variance 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_var_scatter', 'table2') }, 2000);">
                    Export
                </button>
            @endif
        </h1>

    </section>
    <!--section ends-->
    <section class="content">
        <!--main content-->
    {{--<div class="row">--}}
    <!--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="#">
                        <!-- 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">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 1*", "requiredFrom" => "required", "requiredTo" => "required"])
                            @include("admin.layouts.impact.dateRange",  ["labelFrom" => "date-from2", "labelTo" => "date-to2", "name" => "Date Range 2*", "requiredFrom" => "required", "requiredTo" => "required"])

                        </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>

    {{--</div>--}}
    <!--md-6 ends-->

        <!--main content ends-->
        <div class="col-md-8 pull-right">
            <div class="panel panel-primary" id="chart_var_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> Var Scatter Plot Chart
                        @include('admin.display_varScatter_date_range')
                        VS
                        @include('admin.display_varScatter_second_date_range')
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                </div>
                <div class="panel-body">
                    <canvas id="var-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> Var 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 class="sorting"></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                                                        <th></th>
                                    <th></th>
                                                                    </tr>
                            </thead>
                            <tbody>
                                                    </table>
                    </div>

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

@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_axis: "{{json_encode($x_axis)}}",
            y_axis: "{{json_encode($y_axis)}}",
            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/accounting.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/var_scatter.js') }}"></script>

@stop