@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateLineGraph', '#report_lineGraph') !!}
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script src="{{ asset('js/mpClient/reports/lineGraphComponent.js') }}"></script>
<script>
    $(document).ready(function(){
        $('#exportLineChartBtn').on('click',function(){
            var image = {{ $reportLineChart->id }}.toBase64Image();
            $('#chartImg1').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_lineChartStartDate').val() != '') ? $('#report_lineChartStartDate').val() : '',
                'endDate' : ($('#report_lineChartEndDate').val() != '') ? $('#report_lineChartEndDate').val() : ''
            }

            var inputs = {
                         'mpId': $('.label_line_chart_mpId').text(),
                         'dataType' : $('.label_line_chart_dataType').text(),
                         'groupBy': $('.label_line_chart_groupBy').text(),
                         'dataPoint': $('.label_line_chart_dataPoint').text(),
                         'filters' : $filters
            };
            $('#export-line-chart-form-inputs').val(JSON.stringify(inputs));
        });
    });
</script>
<script type="text/x-template" id="line-chart-report-template">
    <form id="report_lineGraph" method="post" @submit.prevent="generate_report_lineGraph">
        <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="lineChartmysteryProgramId" @change="getFilterClientByMpIdWithCustomGroup" v-model="line_chart_mystery_program_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="groupBy" id="line_chart_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="line_chart_mystery_program_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="getClientBranchesByClientId(line_chart_client_ids)" 
                        name="clients" id="clients" v-model="line_chart_client_ids">
                    </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="line_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 select btm-arrow required">
                    <label class="control-label">Data Point</label>
                    <select name="report_data_point_id" id="line_chart_report_data_point_id" class="form-control" v-model="report_dataPointId">
                        <option value="" hidden>Select</option>
                        <option value="oas" v-if="report_dataType =='oas' && report_groupBy == 'client'">Company OAS</option>
                        <option value="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 :value="item.id" :data-value="item.name" v-if="report_dataType === 'assessment_category'">@{{ item.name }}</option>
                            <optgroup :label="index" v-else-if="report_dataType != '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-4 required">
                <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_lineChartStartDate" id="report_lineChartStartDate" autocomplete="off" v-model="report_lineChartStartDate" readonly>
                    <div class="input-group-addon">
                        <span class="material-icons">date_range</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 required">
                <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_lineChartEndDate" id="report_lineChartEndDate" autocomplete="off" v-model="report_lineChartEndDate" readonly>
                    <div class="input-group-addon">
                        <span class="material-icons">date_range</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="#lineGraphFilter" data-toggle="collapse" data-target="#lineGraphFilter" 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="lineGraphFilter" 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 my-auto">
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <a type="reset" name="resetFilter" id="resetFilter" class="btn btn-bordered-primary" @click="resetLineChartFilter">{{ @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