@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateCorellationGraph', '#report_correllationGraph') !!} 
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script  src="{{ asset('js/mpClient/reports/corellationGraphComponent.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/chartLoader.js') }}"></script>
<script>
    google.charts.load('current', {'packages':['corechart']});
</script>
<script type="text/x-template" id="corellation-chart-report-template">
    <div>
        <div class="card card-body py-3">
            <h2 class="form-sec-title border-bottom pb-2 ">Select Parameters to generate chart</h2>
            <form id="report_correllationGraph" method="post" @submit.prevent="generate_report_corellationGraph">
                <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="mysteryProgramId" id="mysteryProgramId" @change="getFilterClientByMpIdWithCustomGroup" v-model="corellation_chart_mp_id">
                                <option value="" hidden>Select</option>
                                @foreach($mysteryProgramList as $mp)
                                <option v-bind:value="{ id: {!! $mp->id !!} , name: '{!! $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="groupBy" id="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="corellation_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 @input="getClientBranchesByClientIdOwn(corellation_chart_client_ids)" name="clients" v-model="corellation_chart_client_ids"
                                id="clients">
                            </select-2>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group required">
                            <label class="control-label">Branches</label>
                            <select-2 :options="report_clientBranches" multiple=true name="clientBranches" v-model="corellation_chart_client_branches_ids"
                                id="reportClientBranches">
                            </select-2>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group select btm-arrow required">
                            <label class="control-label">Data Type</label>
                            <select class="form-control" name="report_dataType" id="report_dataType" v-model="report_dataType" @change="getDataPointByDataType">
                                <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-4">
                        <div class="form-group required">
                            <label class="control-label">Data Point</label>
                            <select name="report_data_point_id" id="report_data_point_id" class="form-control" v-model="report_dataPointId">
                                <option value="" hidden>Select</option>
                                <option data-value="oas" v-bind:value="{ id: 'oas', name: 'Company OAS' }" v-if="report_dataType =='oas' && report_groupBy == 'client'">Company OAS</option>
                                <option data-value="oas" v-bind:value="{ id: 'oas', name: 'Branch OAS' }" v-if="report_dataType =='oas' && (report_groupBy == 'branch' || report_groupBy == 'custom_group')">Branch OAS</option>
                                <template v-for="(item,index) in report_dataPoints">
                                    <option :data-value="item.name" v-bind:value="{ id: item.id, name: item.name }" v-if="report_dataType === 'assessment_category'">@{{ item.name }}</option>
                                    <optgroup :label="index" v-else-if="report_dataType != 'assessment_category'">
                                        <option v-bind:value="{ id: dataPoint.id, name: dataPoint.name }" :data-value="dataPoint.name" v-for="(dataPoint,index) in item">@{{ dataPoint.name }}</option>
                                    </optgroup>
                                </template>
                            </select>
                        </div>
                    </div>
                </div>
                <h3 class="small-font gray semibold border-bottom pb-2 mt-2">Comparison Data</h3>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group required">
                            <label class="control-label">Comparison Data Title</label>
                            <input type="text" class="form-control" placeholder="{{ @trans('report.comparison_data_title') }}" name="comparisonTitle" id="comparisonTitle" v-model="comparisonTitle">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <template v-for="(item,index) in report_client" v-if="report_groupBy === 'client' ">
                            <template v-for="(item1,index1) in corellation_chart_client_ids">
                                <div class="form-group w-50 required" v-if="item.id == item1">
                                    <label class="control-label">@{{ item.text }}</label>
                                    <input type="text" class="form-control" placeholder="{{ @trans('report.comparison_data_value') }}" 
                                    :name="'comparisonClients['+ item.id + ']'" v-model="comparisonClients[item.id]">
                                </div>
                            </template>
                        </template>
                        <template v-for="(item,index) in report_clientBranches" v-if="report_groupBy === 'branch' ">
                            <template v-for="(item1,index1) in corellation_chart_client_branches_ids">
                                <div class="form-group w-50 required" v-if="item.id == item1">
                                    <label class="control-label">@{{ item.text }}</label>
                                    <input type="text" class="form-control" placeholder="{{ @trans('report.comparison_data_value') }}" 
                                    :name="'comparisonBranches['+ item.id + ']'" v-model="comparisonBranches[item.id]">
                                </div>
                            </template>
                        </template>
                        <template v-for="(item,index) in report_clientBranches" v-if="report_groupBy === 'custom_group' ">
                            <template v-for="(item1,index1) in corellation_chart_client_branches_ids">
                                <div class="form-group w-50 required" v-if="item.id == item1">
                                    <label class="control-label">@{{ item.text }}</label>
                                    <input type="text" class="form-control" placeholder="{{ @trans('report.comparison_data_value') }}" 
                                    :name="'comparisonBranches['+ item.id + ']'" v-model="comparisonBranches[item.id]">
                                </div>
                            </template>
                        </template>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <a href="#corellationFilter" data-toggle="collapse" data-target="#corellationFilter" 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="corellationFilter" 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_corellation_startDate" id="report_corellation_startDate" v-model="report_corellation_startDate" autocomplete="off" 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_corellation_endDate" id="report_corellation_endDate" v-model="report_corellation_endDate" autocomplete="off" 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" class="btn btn-bordered-primary" @click="resetCorellationChartFilter">{{ @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" :class="(submitBtn != 'Generate') ? 'disabled' : ''" name="submit" 
                        id="submit">@{{ submitBtn }}</button>
            </form>
        </div>
        <div class="box mt-4 min-height-auto py-3 px-2" v-if="showDiv">
            <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.corellation_graph') }}</h3>
                    @if(Session::get('panel') == 'mfmp-client-admin')
                    <form action="{{ route('mpClient.dashboard.report.exportChart',['panel' => Session::get('panel')]) }}" @submit.prevent="exportCorellationReport" method="post" target="_blank" id="exportCorellationReport">@csrf
                    @else
                    <form action="{{ route('admin.reports.exportChart',['panel' => Session::get('panel')]) }}" @submit.prevent="exportCorellationReport" method="post" target="_blank" id="exportCorellationReport">@csrf
                    @endif
                        <input type="hidden" name="chartName" value="Correlation Chart">
                        <input type="hidden" name="chartImg" id="corellationChart">
                        <input type="hidden" name="export-form-inputs" id="export-corellation-form-inputs">
                        <button type="submit" class="btn btn-bordered-primary btn-sm" :class="(showEmptyDataMsg) ? 'd-none': ''">{{ @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">@{{ corellation_chart_mp_id.name }}</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" v-if="report_dataType == 'assessment_category'">Pillar</p>
                            <p class="display-info" v-else-if="report_dataType == 'focus_area'">Focus Area</p>
                            <p class="display-info" v-else>Detail</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">@{{ report_dataPointId.name }}</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" v-if="report_groupBy == 'client'">Company</p>
                            <p class="display-info" v-else>@{{ report_groupBy | snakeCaseToCamelCase }}</p>
                        </div>
                    </div>
                </div>
                <div id="chartLinear" style="min-height: 550px; width:100%; margin-right:2%; margin-top:0%;" :class="(showEmptyDataMsg) ? 'd-none': ''"></div>
                <div style="height: 500px; width:100%; margin-right:2%; margin-top:0%;" :class="(!showEmptyDataMsg) ? 'd-none' : ''">
                    <p style="font-size: 16px; text-align: center; padding-top: 17%;">No data available for above selected criteria!</p>
                </div>
            </div>
        </div>
    </div>
</script>
@endpush