@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateBarGraph', '#report_barGraph') !!}
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script src="{{ asset('js/mpClient/reports/barGraphComponent.js') }}"></script>
<script>
$(document).ready(function(){
    $('#exportChartBtn').on('click',function(){
        var image = {{ $reportBarChart->id }}.toBase64Image();
        $('#chartImg').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_startDate').val() != '') ? $('#report_startDate').val() : '',
            'endDate' : ($('#report_endDate').val() != '') ? $('#report_endDate').val() : ''
        }

        var inputs = {
                         'mpId': $('.label_bar_chart_mpId').text(),
                         'dataType' : $('.label_bar_chart_dataType').text(),
                         'groupBy': $('.label_bar_chart_groupBy').text(),
                         'dataPoint': $('.label_bar_chart_dataPoint').text(),
                         'totalAverage': $('.label_bar_chart_totalAverage').text(),
                         'filters' : $filters
            };
            $('#export-bar-chart-form-inputs').val(JSON.stringify(inputs));
    });
});
</script>

<script type="text/x-template" id="bar-chart-report-template">
    <form id="report_barGraph" method="post" @submit.prevent="generate_report_barGraph">
        <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="bar_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="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="bar_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(bar_chart_client_ids)" name="clients" 
                        id="clients" v-model="bar_chart_client_ids">
                    </select-2>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="control-label">Branches for X axis<span class="required">*</span></label>
                    <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="branches" name="branches" value="all" v-model="report_branches">
                        <label class="custom-control-label" for="branches">All</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="branches1" name="branches" value="selected" v-model="report_branches">
                        <label class="custom-control-label" for="branches1">Selected</label>
                    </div>
                </div>
            </div>
            <div class="col-sm-4" v-if="report_branches === 'selected'">
                <div class="form-group required">
                    <label class="control-label">Select Branches for X axis</label>
                    <select-2 :options="report_clientBranches" multiple=true name="clientBranches" id="reportClientBranches" v-model="bar_chart_client_branches_ids">
                    </select-2>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="control-label">Branches for Total Average<span class="required">*</span></label>
                    <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="branchesTotalAvg" name="branchesTotalAvg" value="all" v-model="report_branches_totalAvg">
                        <label class="custom-control-label" for="branchesTotalAvg">All</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="branchesTotalAvg1" name="branchesTotalAvg" value="selected" v-model="report_branches_totalAvg">
                        <label class="custom-control-label" for="branchesTotalAvg1">Selected</label>
                    </div>
                </div>
            </div>
            <div class="col-sm-4" v-if="report_branches_totalAvg === 'selected'">
                <div class="form-group required">
                    <label class="control-label">Select Branches for Total Average</label>
                    <select-2 :options="report_clientBranches" multiple=true name="clientBranchesTotalAvg" id="reportClientBranchesTotalAvg" v-model="report_client_branches_total_avg_ids">
                    </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 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>

        <div class="row">
            <div class="col">
                <a href="#filter" data-toggle="collapse" data-target="#filter" 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="filter" 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_startDate" id="report_startDate" readonly v-model="report_startDate" autocomplete="off">
                                    <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_endDate" id="report_endDate" v-model="report_endDate" readonly autocomplete="off">
                                    <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="resetBarChartFilter">{{ @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