@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateRankingReport', '#report_ranking') !!}
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script src="{{ asset('js/mpClient/reports/rankingComponent.js') }}"></script>
<script type="text/x-template" id="ranking-report-template">
    <section>
        <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_ranking" method="post" @submit.prevent="generate_report_ranking">
                <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="mpId" id="mpId" @change="getFilterClientByMpIdWithCustomGroup" v-model="mpId">
                                <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="groupBy"
                                @change="getCustomGroups(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="mpId == '' ? true : false">Custom Group</option>
                            </select>
                        </div>
                    </div>
                    <template v-if="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-3">
                        <div class="form-group required">
                            <label class="control-label">Company</label>
                            <select-2  :options="report_client" multiple=true name="clientIds" id="clients" @input="getClientBranchesByClientId(clientIds)" v-model="clientIds">
                            </select-2>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group required">
                            <label class="control-label">Select Branches</label>
                            <select-2 :options="report_clientBranches"  multiple=true name="clientBranchIds" v-model="clientBranchIds"
                                id="reportClientBranches">
                            </select-2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group select btm-arrow required">
                            <label class="control-label">Data Type</label>
                            <select class="form-control" name="dataType" id="dataType" @change="getDataPointByDataType" v-model="report_dataType">
                                <option value="" hidden>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 select btm-arrow required">
                            <label class="control-label">Data Point</label>
                            <select name="dataPointId" id="dataPointId" class="form-control" v-model="dataPointId">
                                <option value="" hidden>Select</option>
                                <option data-value="oas" v-bind:value="{ id: 'oas', name: 'Company OAS' }" v-if="report_dataType =='oas' && groupBy == 'client'">Company OAS</option>
                                <option data-value="oas" v-bind:value="{ id: 'oas', name: 'Branch OAS' }" v-if="report_dataType =='oas' && (groupBy == 'branch' || 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 :data-value="dataPoint.name" v-bind:value="{ id: dataPoint.id, name: 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="#rankingFilter" data-toggle="collapse" data-target="#rankingFilter" 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="rankingFilter" 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="ageGroup">
                                                <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="gender" id="gender" v-model="gender">
                                                <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="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_rankingStartDate" id="report_rankingStartDate"  autocomplete="off" v-model="startDate" 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_rankingEndDate" id="report_rankingEndDate"  autocomplete="off" v-model="endDate" 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="resetRankingReport" 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" :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.ranking') }}</h3>
                    @if(Session::get('panel') == 'mfmp-client-admin')
                    <form action="{{ route('mpClient.dashboard.report.exportReport', ['panel' => Session::get('panel')]) }}" @click.prevent="exportRankingReport" id="exportRankingReport" method="post" target="_blank">@csrf
                    @else
                    <form action="{{ route('admin.reports.exportReport', ['panel' => Session::get('panel')]) }}" @click.prevent="exportRankingReport" id="exportRankingReport" method="post" target="_blank">@csrf
                    @endif
                        <input type="hidden" name="form-inputs" id="export-ranking-form-inputs">
                        <input type="hidden" name="export-data" id="export-ranking-data">
                        <input type="hidden" name="exportType" v-model="export_type">
                        <template v-if="items.length">
                            <button type="submit" class="btn btn-bordered-primary btn-sm" @click="exportType('excel')">{{ @trans('report.export_excel') }}</button>
                            <button type="submit" class="btn btn-bordered-primary btn-sm" @click="exportType('pdf')">{{ @trans('report.export_pdf') }}</button>
                        </template>
                    </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">@{{ mpId.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">@{{ 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="groupBy == 'client'">Company</p>
                            <p class="display-info" v-else>@{{ groupBy | snakeCaseToCamelCase }}</p>
                        </div>
                    </div>
                </div>
                <div style="height:500px" class="border-top pt-4">
                    <loading :active.sync="isLoading" :is-full-page=false></loading>
                    <div class="table-wrapper">
                        <div class="table-data" v-if="items.length">
                            <div class="table-responsive table-checkable">
                                <table class="table" id="mtcTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th v-if="items[0].branch_name">Branch Name</th>
                                            <th>Client Name</th>
                                            <th>Avg</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item,index) in items">
                                            <td>@{{  index + 1 }}</td>
                                            <td v-if="item.branch_name">@{{ item.branch_name }}</td>
                                            <td>@{{ item.client_name }}</td>
                                            <td>@{{ item.Avg }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                    <div class="row" v-if="!items.length && loaded == true">
                        <div class="col-md-12">
                            <div class="alert alert-warning" role="alert">
                                No data available for above selected criteria!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</script>
@endpush