@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\ReportMfmp\GenerateRawDataReport', '#report_rawData') !!}
<script src="{{ asset('js/mpClient/reports/chartMixins.js') }}"></script>
<script src="{{ asset('js/mpClient/reports/rawDataComponent.js') }}"></script>
<script type="text/x-template" id="raw-data-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_rawData" method="post" @submit.prevent="generate_report_rawData">
                <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-4">
                        <div class="form-group required">
                            <label class="control-label">Company</label>
                            <select-2  :options="report_client" id="clients" multiple=true name="clientIds" @input="getClientBranchesByClientId(clientIds)" v-model="clientIds">
                            </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" id="reportClientBranches" name="clientBranchIds"  multiple=true 
                                v-model="clientBranchIds">
                            </select-2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <a href="#rawDataFilter" data-toggle="collapse" data-target="#rawDataFilter" 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="rawDataFilter" 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="ageGroup" id="ageGroup" 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_rawDataStartDate" id="report_rawDataStartDate"  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_rawDataEndDate" id="report_rawDataEndDate"  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="resetRawDataFilter" 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.raw_data') }}</h3>
                    @if(Session::get('panel') == 'mfmp-client-admin')
                    <form action="{{ route('mpClient.dashboard.report.exportRawDataReport',['panel' => Session::get('panel')]) }}" 
                        @submit.prevent="exportRawDataReport" method="post" target="_blank" id="exportRawDataReport">@csrf
                    @else
                        <form action="{{ route('admin.reports.exportRawDataReport',['panel' => Session::get('panel')]) }}" 
                            @submit.prevent="exportRawDataReport" method="post" target="_blank" id="exportRawDataReport">@csrf    
                    @endif
                        <input type="hidden" name="chartName" id="chartName" value="Raw Data">
                        <input type="hidden" name="form-inputs" id="export-raw-data-form-inputs">
                        <input type="hidden" name="exportType" v-model="export_type">
                        <template v-if="Object.keys(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.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="min-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="Object.keys(items).length">
                            <div class="table-responsive">
                                <table class="table" id="mtcTable">
                                    <thead>
                                        <tr>
                                            <th>Data Point</th>
                                            <template v-for="(item,index) in tableHeader">
                                                <th>@{{ item }}</th>
                                            </template>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template v-for="(item,index) in items">
                                                <tr>
                                                    <td>@{{ index }}</td>
                                                    <template v-for="(itemData,indexData) in item.data">
                                                        <td>@{{ itemData }}</td>
                                                    </template>
                                                </tr>
                                            <template v-for="(item1,index1) in item.children">
                                                <tr>
                                                    <td style="padding-left: 50px">@{{ index1 }}</td>
                                                    <template v-for="(itemData1,indexData1) in item1.data">
                                                        <td>@{{ itemData1 }}</td>
                                                    </template>
                                                </tr>
                                                <template v-for="(item2,index2) in item1.children">
                                                    <tr>
                                                        <td style="padding-left: 70px;">@{{   index2    }}</td>
                                                        <template v-for="(item3,index3) in item2">
                                                            <td>@{{ item3 }}</td>
                                                        </template>
                                                    </tr>
                                                </template>
                                            </template>
                                        </template>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                    <div class="row" v-if="!Object.keys(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>
    </div>
</script>
@endpush