@extends('mpClient.layouts.main')

@section('title')
Quadrant 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">Quadrant Chart</h2>
                <a href="javascript:void(0)" name="resetForm" id="resetForm" class="btn btn-bordered-primary float-right" 
                        @click="$refs.report_component.resetQuadrantChartForm()">{{ @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>
                <quadrant-chart-report chartid="{{ $reportQuadrantChart->id }}" charturl="{{ route('mpClient.dashboard.report.getQuadrantChartReportDataByAjax',['panel' => Session::get('panel')]) }}"
                    ref="report_component"></quadrant-chart-report>
            </div>
            <div class="box mt-4 min-height-auto py-3 px-2 quadrantChartDiv 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.quadrant_graph') }}</h3>
                        <form action="{{ route('mpClient.dashboard.report.exportChart',['panel' => Session::get('panel')]) }}" method="post" target="_blank">@csrf
                            <input type="hidden" name="chartImg" id="chartImg2">
                            <input type="hidden" name="export-form-inputs" id="export-quadrant-chart-form-inputs">
                            <input type="hidden" name="chartName" value="Quadrant Chart">
                            <button type="submit" class="btn btn-bordered-primary btn-sm exportChartCls" id="exportQuadrantChartBtn">{{ @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_quadrant_chart_mpId"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_type_for_x_axis') }}</label>
                                <p class="display-info label_quadrant_chart_x_dataType"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_point_for_x_axis') }}</label>
                                <p class="display-info label_quadrant_chart_x_dataPoint"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_type_for_y_axis') }}</label>
                                <p class="display-info label_quadrant_chart_y_dataType"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_point_for_y_axis') }}</label>
                                <p class="display-info label_quadrant_chart_y_dataPoint"></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_quadrant_chart_groupBy"></p>
                            </div>
                        </div>
                    </div>
                    <div style="min-height:500px;">
                        {!! $reportQuadrantChart->container() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection('content')

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

@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>
@include('admin.modules.report.no_data_plugin')
@include('admin.modules.report.four_quadrant_of_scatter')
<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>

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