@extends('admin.layouts.default')
@section('header_styles')
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
@stop
@section('content')
    <div class="row" id="app" v-cloak>
    </div>
    <section class="content-header">
        <h1>
            FORECAST CALENDAR DATA
            <button style="width: 100px; float: right; text-transform: capitalize; " id="button-md"
                    onclick="loading();setTimeout(function(){ save_table_and_chart_with_colspan('chart_forecast_heading','forecast_multidimensional') }, 2000);">
                Export
            </button>
        </h1>
    </section>

    <section class="content">
        <div class="col-md-4" style="padding:0;">
            <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">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>DIMENSIONS
                        </h2>
                        <div class="input-block active-first-tier">
                            @include('admin.bf.forecast.forecast_dimensions')
                        </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.bf.forecast.forecast_measures')
                        </div>
                        <h2 class="first-tier-trigger">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>CHART
                        </h2>
                        <div class="input-block active-first-tier">
                            @include('admin.bf.forecast.forecast_chart')
                        </div>
                        <h2 class="first-tier-trigger">
                            <i class="glyphicon glyphicon-chevron-down showhide clickable"></i>
                            FILTERS
                        </h2>
                        <div class="input-block">
                            @include('admin.bf.forecast.forecast_filters')
                        </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 class="col-md-8 pull-right">
            <div class="panel panel-primary" id="chart_forecast_heading">
                <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> Forecast Chart
                    </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">
                    @if (empty($request->get('chart_key_fig_1')))
                        No data provided !
                    @else
                        <canvas id="chart_forecast"></canvas>
                    @endif
                </div>
            </div>
        </div>

        <div>
            @include('admin.bf.forecast.forecast_calendar_table')
        </div>

    </section>


    <div class="modal fade" id="details" tabindex="-1" role="dialog" aria-labelledby="details"
         aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content"></div>
        </div>
    </div>

@endsection
@section('footer_scripts')
    <script>
        var appSettings = {
            labels: "{{json_encode($labels_chart_display)}}",
            key_figure_name_1: "{{json_encode($key_figure_name_1)}}",
            key_figure_name_2: "{{json_encode($key_figure_name_2)}}",
            key_figure_name_3: "{{json_encode($key_figure_name_3)}}",
            key_figure_1: "{{json_encode($key_figure_1)}}",
            key_figure_2: "{{json_encode($key_figure_2)}}",
            key_figure_3: "{{json_encode($key_figure_3)}}",
            cumulative_key_figure_1: "{{json_encode($cumulative_key_figure_1)}}",
            cumulative_key_figure_2: "{{json_encode($cumulative_key_figure_2)}}",
            cumulative_key_figure_3: "{{json_encode($cumulative_key_figure_3)}}"
        };

        var excelName = "Forecast Calendar Year ";

    </script>

    <link href="{{ asset('assets/css/pages/BF/Forecast/forecast_analysis.css') }}" rel="stylesheet" type="text/css"/>

    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/chart-min.js') }}"></script>

    <script src="{{asset('assets/js/pages/vue.js')}}"></script>
    {{--    <script language="javascript" type="text/javascript"--}}
    {{--            src="{{ asset('assets/js/pages/BF/Budget/multidimensional_report.js') }}"></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/BF/Forecast/chart.js') }}"></script>
    <script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>

@endsection