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

    </section>
    <!--section ends-->


    <section class="content">
        <!--main content-->
        <!--row starts-->
        <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.impact.dimensions")

                            @include("admin.layouts.impact.KeyFigures",  ["label" => "key_fig", "name" => "Key Figure*", "required" => "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_paretto">
                <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> Pareto Chart
                        @include('admin.display_date_range')
                    </h3>
                    <span class="pull-right ">
                        <i class="glyphicon showhide clickable glyphicon-chevron-up" title="Hide Panel content"></i>
                    </span>
                </div>

                <div style="" class="panel-body">
                    <canvas id="pareto"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-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> Pareto 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">
                        <table class="table table-striped table-bordered" id="table2" width="100%">
                            <thead>
                            <tr>
                                <th>{{$dimension_name}}</th>
                                <th>{{$key_figure_name}}</th>
                                <th>{{$key_figure_name}} CUMMULATED</th>
                            </tr>
                            </thead>
                            <tbody>

                            @if(!empty($dimension))

                                @foreach($dimension as $key => $value )
                                    <tr>
                                        <td>{{$value}}</td>
                                        <td>{{number_format($key_figure[$key])}}</td>
                                        <td>{{number_format($cummulative_key_figure[$key])}}</td>
                                    </tr>
                                @endforeach

                            @endif
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="3">
                                    <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 = {
            labels: "{{json_encode($labels_chart_display)}}",
            key_figure_name: "{{json_encode($key_figure_name)}}",
            key_figure: "{{json_encode($key_figure)}}",
            dimension_name: "{{json_encode($dimension_name)}}",
            cumulative_key_figure: "{{json_encode($cummulative_key_figure)}}"
        };
    </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/accounting.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/pareto_chart.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/pareto_form.js') }}"></script>
    <script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>

@stop