@extends('mpClient.layouts.main')

@section('title')
Bar Chart
@endsection

@section('content')
<main>

    <loading :active.sync="isLoading"></loading>

    <div class="single-col client-dashboard" v-cloak>
        
        @include('mpClient.common/secondary_header')

            <div class="container-fluid p-4">
                <div class="top-bar d-flex align-items-center justify-content-between">
                    <h2 class="mb-0">Bar Chart</h2>
                    <a href="javascript:void(0)" name="resetForm" id="resetForm" class="btn btn-bordered-primary float-right" 
                        @click="$refs.report_component.resetBarChartForm()">{{ @trans('report.reset') }}</a>
                </div>
                <div class="card card-body py-3">
                    <h3 class="form-sec-title border-bottom pb-2 ">Select Parameters to generate chart</h3>
                    <bar-chart-report chartid="{{ $reportBarChart->id }}" charturl="{{ route('mpClient.dashboard.report.getBarChartReportDataByAjax',['panel' => Session::get('panel')]) }}"
                        ref="report_component"></bar-chart-report>
                </div>
                <div class="box mt-4 min-height-auto py-3 px-2 barChartDiv hidden">
                    <div class="container-fluid">
                        <div class="border-bottom d-flex justify-content-between w-100 pb-2 align-items-center mb-3">
                            <h3 class="general-font gray m-0">{{ @trans('report.bar_chart') }}</h3>
                            <form action="{{ route('mpClient.dashboard.report.exportChart',['panel' => Session::get('panel')]) }}" method="post" target="_blank">@csrf
                                <input type="hidden" name="chartImg" id="chartImg">
                                <input type="hidden" name="chartName" value="Bar Chart">
                                <input type="hidden" name="export-form-inputs" id="export-bar-chart-form-inputs">
                                <button type="submit" class="btn btn-bordered-primary btn-sm exportChartCls" id="exportChartBtn">{{ @trans('report.export') }}</button>
                            </form>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-xl">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('report.reports_for_scenario_number') }}</label>
                                    <p class="display-info label_bar_chart_mpId"></p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('report.data_type') }}</label>
                                    <p class="display-info label_bar_chart_dataType"></p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('report.data_point') }}</label>
                                    <p class="display-info label_bar_chart_dataPoint"></p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('report.total_average') }}</label>
                                    <p class="display-info label_bar_chart_totalAverage"></p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl">
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('report.group_by') }}</label>
                                    <p class="display-info label_bar_chart_groupBy"></p>
                                </div>
                            </div>
                        </div>
                        <div style="min-height:500px;">
                            {!! $reportBarChart->container() !!}
                        </div>
                    </div>
                </div>
            </div>
    </div>
</main>
@endsection('content')

@include('mpClient.modules.reports.barGraphComponent')

@push('pageModals')
    @include('admin.modules.report.manage_group_modal')
    @include('admin.components.modal_delete_js')
@endpush

@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\MpClient\GetReportData', '#getReportDataForm') !!}
<script src="{{ asset('js/vendor/chart.js') }}"></script>
<script src="{{ asset('js/vendor/chart-datalabels.js') }}"></script>
@include('admin.modules.report.no_data_plugin')
@include('admin.modules.report.bar_graph_avg_line_plugin')
<script>
    var storeReportManageGroupUrl = "{{ route('mpClient.reports.storeManageGroup',['panel' => Session::get('panel')]) }}";
    var deleteReportManageGroupUrl = "{{ route('mpClient.reports.deleteManageGroup',['panel' => Session::get('panel'), 'id' => null]) }}";
    var getCustomGroupsByMpIdUrl = "{{ route('mpClient.reports.getManageGroup',['panel' => Session::get('panel'), 'id' => null]) }}";
</script>
<script type="text/javascript" src="{{ asset('js/vendor/vuelidate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/validators.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/reportManageGroupMixin.js') }}?date=20200826"></script>
<script src="{{ asset('js/mpClient/chart-reports/bar_graph_report.js') }}?date=20200826"></script>

{!! $reportBarChart->script() !!}
@endpush