@extends('mpClient.layouts.main')

@section('title')
Information
@endsection

@section('content')
<main>
    <loading :active.sync="isLoading"></loading>
    
    <div class="single-col client-dashboard" v-cloak>
        
        @include('mpClient.common/secondary_header')
        
        <div class="tab-content">
            <div class="row">
                <div class="col-lg-6">
                    <form action="{{ route('mpClient.dashboard.getReportData', ['panel' => Session::get('panel')]) }}" method="post" id="getReportDataForm" 
                    @submit.prevent="getReportData">
                    <div class="row">
                        <div class="col-xl-4 col-sm-6">
                            <div class="form-group select btm-arrow">
                                <label class="control-label">Mystery Program</label>
                                <select class="form-control" name="mystery_program_id" id="mystery_program_id"  v-model="mystery_program_id" ref="mysteryProgramSelect">
                                    @foreach($mysteryProgramList as $mysteryProgram)
                                        <option value="{{ $mysteryProgram->id }}">{{ $mysteryProgram->scenario_name }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('mystery_program_id'))
                                <span class="invalid-feedback d-inline">{{ $errors->first('mystery_program_id') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-xl-4 col-sm-6">
                            <div class="form-group">
                                <label class="control-label"></label>
                                <button class="btn btn-em btn-primary-em" style="margin-top: .5rem;">Apply</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="col-lg-6">
                    <div class="d-flex mp-statastics bg-white mb-3">
                        <template v-if="info_client_user && info_client_user.access_type == 'project_owner'">
                            <div class="border-left border-right text-center p-2 flex-fill">
                                <span class="medium-font bold">@{{ info_client_count }}</span>
                                <p class="extrasmall-font m-0">Companies</p>
                            </div>
                            <div class="border-right text-center p-2 flex-fill">
                                <span class="medium-font bold">@{{ info_branch_region_count }}</span>
                                <p class="extrasmall-font m-0">Regions</p>
                            </div>
                        </template>
                        <div class="border-right text-center p-2 flex-fill" :class="info_client_user && info_client_user.access_type == 'project_owner' ? '' : 'border-left'">
                            <span class="medium-font bold">@{{ info_branch_count }}</span>
                            <p class="extrasmall-font m-0">Branches</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_shoppers_count">@{{ info_shoppers_count }}</span>
                            <p class="extrasmall-font m-0">Shoppers</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_branch_visit_count">@{{ info_branch_visit_count }}</span>
                            <p class="extrasmall-font m-0">Branch Visits</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_data_point">@{{ info_data_point }}</span>
                            <p class="extrasmall-font m-0">Data Points</p>
                        </div>
                    </div>
                </div>
            </div>    
            

            <div class="detail-page" v-cloak>
                <div class="detail-content mt-4 card p-2">
                
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs border-0 justify-content-center justify-content-lg-start" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link"  data-toggle="tab" :class="{'active' : current_tab == 'program_details'}"
                                @click="tab('program_details')">Program Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  data-toggle="tab" :class="{'active' : current_tab == 'assessment'}"
                                @click="tab('assessment')">Assessment</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  data-toggle="tab" :class="{'active' : current_tab == 'custom_questions'}"
                                @click="tab('custom_questions')">Custom Question</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  data-toggle="tab" :class="{'active' : current_tab == 'mp_clients_branches'}"
                                @click="tab('mp_clients_branches')">Branches & M+</a>
                        </li>
                    </ul>
    
                    <div class="tab-content border-top">
    
                        @include('mpClient.modules.dashboard.tabs.information-tabs.program_details')
    
                        @include('mpClient.modules.dashboard.tabs.information-tabs.assessments')
    
                        @include('mpClient.modules.dashboard.tabs.information-tabs.custom_question')
    
                        @include('mpClient.modules.dashboard.tabs.information-tabs.mp_clients_branches')
    
                    </div>
                </div>
            </div>
        </div>
        
            
        </div>
    </div>

    @include('mpClient.modules.dashboard.show_empty_data_notification')

</main>
@endsection('content')

@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\MpClient\GetReportData', '#getReportDataForm') !!}

<script>
$(document).ready(function() {
    @if(count($mysteryProgramList) == 0) 
    $('#mpInfoModal').modal('show');
    @endif
});
</script>

<script src="{{ asset('js/mpClient/mpClientInformation.js') }}"></script>
@endpush