@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateQuadrantGraph', '#report_quadrantGraph') !!}
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script src="{{ asset('js/mpClient/reports/quadrantGraphComponent.js') }}"></script>
<script>
    $(document).ready(function(){
        $('#exportQuadrantChartBtn').on('click',function(){
            var image = {{ $reportQuadrantChart->id }}.toBase64Image();
            $('#chartImg2').val(image);
            
            $filters = [];
            $filters = {
                'ageGroup' : ($('#ageGroupFilter').val() != '') ? $('#ageGroupFilter').val() : '',
                'gender' : ($('#genderFilter').val() != '') ? $('#genderFilter').val() : '',
                'origin' : ($('#ethnicityId').val() != '') ? $('#ethnicityId').find('option:selected')[0]['text'] : '',
                'startDate' : ($('#report_quadrantChartStartDate').val() != '') ? $('#report_quadrantChartStartDate').val() : '',
                'endDate' : ($('#report_quadrantChartEndDate').val() != '') ? $('#report_quadrantChartEndDate').val() : ''
            }

            var inputs = {
                             'mpId': $('.label_quadrant_chart_mpId').text(),
                             'xDataType' : $('.label_quadrant_chart_x_dataType').text(),
                             'yDataType' : $('.label_quadrant_chart_y_dataType').text(),
                             'xDataPoint': $('.label_quadrant_chart_x_dataPoint').text(),
                             'yDataPoint': $('.label_quadrant_chart_y_dataPoint').text(),
                             'groupBy': $('.label_quadrant_chart_groupBy').text(),
                             'filters' : $filters
                };
                $('#export-quadrant-chart-form-inputs').val(JSON.stringify(inputs));
        });
    });
</script>
<script type="text/x-template" id="quadrant-chart-report-template"> 
    <form id="report_quadrantGraph" method="post" @submit.prevent="generate_report_quadrantGraph">
        <div class="row">
            <div class="col-xl-3 col-lg-4">
                <div class="form-group select btm-arrow required">
                    <label class="control-label">Select Mystery Program</label>
                    <select class="form-control" name="quadrant_chart_mp_id" id="quadrant_chart_mp_id" @change="getFilterClientByMpIdWithCustomGroup" 
                        v-model="quadrant_chart_mp_id">
                        <option value="" hidden>Select</option>
                        @foreach($mysteryProgramList as $mp)
                        <option value="{{ $mp->id }}" data-value="{{ $mp->scenario_name }}" >{{ $mp->scenario_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4">
                <div class="form-group select btm-arrow required">
                    <label class="control-label">Group By</label>
                    <select class="form-control" name="quadrant_report_qc_groupBy" id="quadrant_report_qc_groupBy" v-model="report_groupBy"
                        @change="getCustomGroups(report_groupBy)">
                        <option value="" hidden>Select</option>
                        <option value="client" data-value="Company">Company</option>
                        <option value="branch" data-value="Branch">Branch</option>
                        <option value="custom_group" data-value="Custom Group" 
                                :disabled="quadrant_chart_mp_id == '' ? true : false">Custom Group</option>
                    </select>
                </div>
            </div>
            <template v-if="report_groupBy == 'custom_group'">
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group select btm-arrow">
                        <label class="control-label">Custom Group</label>
                        <select class="form-control" name="customGroupId" id="customGroupId" v-model="report_custom_group_id" 
                            @change="changeCustomGroupId(report_custom_group_id)">
                            <option value="" hidden>Select</option>
                            <option :value="item.id" v-for="(item, index) in report_groups">@{{ item.group_name }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <a href="javascript:void(0)" class="btn btn-bordered-primary" style="margin-top: .4rem;" 
                            @click="openManageGroupModal">{{ @trans('report.manage_groups') }}</a>
                    </div>
                </div>
            </template>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group required">
                    <label class="control-label">Company</label>
                    <select-2  :options="report_client" multiple=true name="clients" @input="getClientBranchesByClientId(quadrant_chart_client_ids)" 
                        v-model="quadrant_chart_client_ids" id="clients">
                    </select-2>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group required">
                    <label class="control-label">Select Branches</label>
                    <select-2 :options="report_clientBranches"  multiple=true name="clientBranches" id="reportClientBranches"
                            v-model="quadrant_chart_client_branches_ids">
                    </select-2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group select btm-arrow required">
                    <label class="control-label">Data Type For X axis</label>
                    <select class="form-control" name="report_xDataType" id="report_xDataType" @change="getDataPointIds('x')" v-model="report_xDataType">
                        <option value="">Select</option>
                        <option value="oas">OAS</option>
                        <option value="assessment_category">Pillar</option>
                        <option value="focus_area">Focus Area</option>
                        <option value="focus_category">Detail</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group required">
                    <label class="control-label">Data Point For X axis</label>
                    <select name="quandrant_report_x_data_point_id" id="quandrant_report_x_data_point_id" class="form-control" v-model="report_xDataPointId">
                        <option value="" hidden>Select</option>
                        <option value="oas" v-if="report_xDataType =='oas' && report_groupBy == 'client'">Company OAS</option>
                        <option value="oas" v-if="report_xDataType =='oas' && (report_groupBy == 'branch' || report_groupBy == 'custom_group')">Branch OAS</option>
                        <template v-for="(item,index) in report_xDataPoints">
                            <option :value="item.id" :data-value="item.name" v-if="report_xDataType === 'assessment_category'">@{{ item.name }}</option>
                            <optgroup :label="index" v-else-if="report_xDataType != 'assessment_category'">
                                <option :value="dataPoint.id" :data-value="dataPoint.name" v-for="(dataPoint,index) in item">@{{ dataPoint.name }}</option>
                            </optgroup>
                        </template>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group select btm-arrow required">
                    <label class="control-label">Data Type For Y axis</label>
                    <select class="form-control" name="report_yDataType" id="report_yDataType" @change="getDataPointIds('y')" v-model="report_yDataType">
                        <option value="">Select</option>
                        <option value="oas">OAS</option>
                        <option value="assessment_category">Pillar</option>
                        <option value="focus_area">Focus Area</option>
                        <option value="focus_category">Detail</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group required">
                    <label class="control-label">Data Point For Y axis</label>
                    <select name="quadrant_report_y_data_point_id" id="quadrant_report_y_data_point_id" class="form-control" v-model="report_yDataPointId">
                        <option value="" hidden>Select</option>
                        <option value="oas" v-if="report_yDataType =='oas' && report_groupBy == 'client'">Company OAS</option>
                        <option value="oas" v-if="report_yDataType =='oas' && (report_groupBy == 'branch' || report_groupBy == 'custom_group')">Branch OAS</option>
                        <template v-for="(item,index) in report_yDataPoints">
                            <option :value="item.id" :data-value="item.name" v-if="report_yDataType === 'assessment_category'">@{{ item.name }}</option>
                            <optgroup :label="index" v-else-if="report_yDataType != 'assessment_category'">
                                <option :value="dataPoint.id" :data-value="dataPoint.name" v-for="(dataPoint,index) in item">@{{ dataPoint.name }}</option>
                            </optgroup>
                        </template>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="#quadrantGraphFilter" data-toggle="collapse" data-target="#quadrantGraphFilter" class="small-font gray semibold py-2 px-3 border-cus w-100 form-control body-bg collapsed ex-col-filter">Show Filter</a>
                <div id="quadrantGraphFilter" class="collapse pt-3 border border-top-0 rounded-bottom">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col">
                                <div class="form-group select btm-arrow">
                                    <label class="control-label">{{ @trans('report.age_group') }}</label>
                                    <select class="form-control" name="ageGroupFilter" id="ageGroupFilter" v-model="report_ageGroupFilter">
                                        <option value="">{{ @trans('report.select') }}</option>
                                        <option value="1">18 - 25 {{ @trans('report.years') }} </option>
                                        <option value="2">26 - 30 {{ @trans('report.years') }} </option>
                                        <option value="3">31 - 35 {{ @trans('report.years') }} </option>
                                        <option value="4">36 - 45 {{ @trans('report.years') }} </option>
                                        <option value="5">46 - 60 {{ @trans('report.years') }} </option>
                                        <option value="6">60+ </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group select btm-arrow">
                                    <label class="control-label">{{ @trans('report.gender') }}</label>
                                    <select class="form-control" name="genderFilter" id="genderFilter" v-model="report_genderFilter">
                                        <option value="">{{ @trans('report.select') }}</option>
                                        <option value="male">{{ @trans('report.male') }}</option>
                                        <option value="female">{{ @trans('report.female') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group select btm-arrow">
                                    <label class="control-label">{{ @trans('report.ethinicity') }}</label>
                                    <select class="form-control" name="ethnicityId" id="ethnicityId" v-model="report_ethnicityId">
                                        <option value="">{{ @trans('report.select') }}</option>
                                        @foreach($ethnicityList as $ethnicity)
                                        <option value="{{ $ethnicity->id }}">{{ $ethnicity->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <label class="control-label">Start Date</label>
                                <div class="form-group date" data-provide="datepicker">
                                    <input type="text" class="form-control datepicker bg-white" placeholder="{{ @trans('report.select') }}" name="report_quadrantChartStartDate" id="report_quadrantChartStartDate"  autocomplete="off" v-model="report_quadrantChartStartDate" readonly>
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <label class="control-label">End Date</label>
                                <div class="form-group date" data-provide="datepicker">
                                    <input type="text" class="form-control datepicker  bg-white" placeholder="{{ @trans('report.select') }}" name="report_quadrantChartEndDate" id="report_quadrantChartEndDate"  autocomplete="off" v-model="report_quadrantChartEndDate" readonly>
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col my-auto">
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <a href="javascript:void(0)" name="resetFilter" id="resetFilter" @click="resetQuadrantChartFilter" class="btn btn-bordered-primary">{{ @trans('report.reset_filters') }}</a>
                                </div>
                            </div>
                            <div class="col d-none d-xl-block"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-em mt-3 ChartSubmitBtn" name="submit" id="submit">Generate</button>
    </form>
</script>
@endpush