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

            @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_trend', '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="#">
                            <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.KeyFigures", ["label" => "key_fig1", "name" => "Key Figure 1*", "required" => "required"])
                                @include("admin.layouts.impact.KeyFigures", ["label" => "key_fig2", "name" => "Key Figure 2", "required" => ""])
                                @include("admin.layouts.impact.KeyFigures", ["label" => "key_fig3", "name" => "Key Figure 3 (2nd Axis)", "required" => ""])

                                @include("admin.layouts.impact.divisors", ["label" => "divisor_1", "name" => "Divisor 1", "required" => ""])
                                @include("admin.layouts.impact.divisors", ["label" => "divisor_2", "name" => "Divisor 2", "required" => ""])
                                @include("admin.layouts.impact.divisors", ["label" => "divisor_3", "name" => "Divisor 3 (2nd Axis)", "required" => ""])

                                @include("admin.layouts.impact.scale", ["label" => "scale1", "name" => "Scale Axis 1", "required" => ""])
                                @include("admin.layouts.impact.scale", ["label" => "scale2", "name" => "Scale Axis 2", "required" => ""])

                                @include("admin.layouts.impact.range", ["label" => "primary_range_from", "name" => "Primary-Axis Range From", "required" => ""])
                                @include("admin.layouts.impact.range", ["label" => "primary_range_to", "name" => "Primary-Axis Range To", "required" => ""])

                                @include("admin.layouts.impact.range", ["label" => "secondary_range_from", "name" => "Secondary-Axis Range From", "required" => ""])
                                @include("admin.layouts.impact.range", ["label" => "secondary_range_to", "name" => "Secondary-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>
                <!--md-6 ends-->

            </div>
            <!--main content ends-->
            <!-- content -->
            <script language="javascript" type="text/javascript" src="{{ asset('assets/js/chart-min.js') }}"></script>
            <div class="col-md-8">
                <div class="panel panel-primary" id="chart_trend">
                    <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> Trends 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="trend-plot"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <!-- 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> Trends 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%" style="table-layout: auto">
                                <thead>
                                <tr class="header-tabled">

                                    <th>PERIOD</th>
                                    <th>{{$key_figure_1_name}}</th>

                                    @if($key_figure_2_name!="")
                                        <th>{{$key_figure_2_name}}</th>@endif
                                    @if($key_figure_3_name!="")
                                        <th>{{$key_figure_3_name}}</th>@endif

                                </tr>
                                </thead>
                                <tbody>

                                @if(!empty($labels))
                                    @foreach($labels as $key => $label)

                                        <tr>
                                            <td>{{$label}}</td>

                                            @if($divisor_1)
                                                <td>{{number_format($line_1[$key],2)}}</td>
                                            @else
                                                <td>{{number_format($line_1[$key])}}</td>
                                            @endif

                                            @if($key_figure_2_name!="")

                                                @if($divisor_2)
                                                    <td>{{number_format($line_2[$key],2)}}</td>
                                                @else
                                                    <td>{{number_format($line_2[$key])}}</td>
                                                @endif
                                            @endif

                                            @if($key_figure_3_name!="")
                                                @if($divisor_3)
                                                    <td>{{number_format($line_3[$key],2)}}</td>
                                                @else
                                                    <td>{{number_format($line_3[$key])}}</td>
                                                @endif
                                            @endif
                                        </tr>

                                    @endforeach
                                @endif

                                </tbody>

                                @if(!empty($labels))
                                    <tfoot>

                                        <tr>
                                            <th>Average Sum</th>
                                            <th>{{number_format($average_sum_key1)}}</th>
                                            @if($key_figure_2_name!="")
                                                @if($divisor_2)
                                                    <td>{{number_format($average_sum_key2,2)}}</td>
                                                @else
                                                    <td>{{number_format($average_sum_key2)}}</td>
                                                @endif
                                            @endif

                                            @if($key_figure_3_name!="")
                                                @if($divisor_3)
                                                    <td>{{number_format($average_sum_key3,2)}}</td>
                                                @else
                                                    <td>{{number_format($average_sum_key3)}}</td>
                                                @endif
                                            @endif
                                        </tr>

                                        <tr>
                                            <td colspan="4">
                                                <strong>Filter criteria</strong><br>
                                                @include("admin.filters_display", ['filter'=>$filters_name])
                                            </td>
                                        </tr>

                                    </tfoot>
                                @endif
                            </table>
                        </div>

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


@stop

{{-- page level scripts --}}
@section('footer_scripts')
    <script>
        var appSettings = {
            labels: "{{json_encode($labels)}}",
            line_1: "{{json_encode($line_1)}}",
            line_2: "{{json_encode($line_2)}}",
            line_3: "{{json_encode($line_3)}}",
            key_figure_1_name: "{{json_encode($key_figure_1_name)}}",
            key_figure_2_name: "{{json_encode($key_figure_2_name)}}",
            key_figure_3_name: "{{json_encode($key_figure_3_name)}}",
            max_left: "{{json_encode($max_left)}}",
            min_left: "{{json_encode($min_left)}}",
            max_right: "{{json_encode($max_right)}}",
            min_right: "{{json_encode($min_right)}}",
        };
    </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/trend.js') }}"></script>


@stop