{% extends "Includes/layout.html.twig" %}

{% block body %}
    <main id="source-app" class="row main mx-0">
        <section class="content-area p-r-l-6 fade-in">
            <div class="pb-5" v-cloak>
                <div class="px-0 pb-4 mb-4 container-fluid rounded-2 page-header">
                    <p v-show="activePanel === 'publishers'" class="pb-2 text-primary">
                        {{ 'Compare your publishers KPI by dates'|trans }}
                    </p>
                    <p v-show="activePanel === 'overview'" class="pb-2 text-primary">
                        {{ "Analyze publisher's performance in different context"|trans }}
                    </p>
                    <p v-show="activePanel === 'insight'" class="pb-2 text-primary">
                        {{ 'Get an insight point of view of your company in comparison to the market'|trans }}
                    </p>
                    <div class="border-bottom position-relative d-flex nav nav-tabs">
                        <a :class="[activePanel === 'publishers' ? 'active' : '', 'btn-tab nav-link']"
                           href="#publishers" @click="switchPanel('publishers')">{{ 'Overview R.O.I'|trans }}</a>
                        <a :class="[activePanel === 'overview' ? 'active' : '', 'btn-tab nav-link']"
                           href="#overview" @click="switchPanel('overview')">{{ 'Analysis R.O.I'|trans }}</a>
                        <a :class="[activePanel === 'insight' ? 'active' : '', 'btn-tab nav-link']"
                           href="#insight" @click="switchPanel('insight')">{{ 'Insight Market'|trans }}</a>
                        <button v-show="activePanel !== 'insight'" :class="[isGbStatsExploded ? 'btn-primary' : 'btn-yellow', 'btn rounded-30 px-3 my-auto ml-auto']" @click="isGbStatsExploded = !isGbStatsExploded">
                            <template v-if="isGbStatsExploded">{{ 'Fold Golden Bees stats'|trans }}</template>
                            <template v-else>{{ 'Spread Golden Bees stats'|trans }}</template>
                        </button>
                    </div>
                </div>
                
                <div id="page-source" class="container-fluid"  v-show="activePanel === 'publishers'">
                    <div v-show="sectionLoading.publishers" class="loader"></div>
                    <div class="px-3 py-4 rounded-2 bg-white row position-relative">
                        <div class="col-12 d-flex align-items-center">
                            <h6 class="text-primary font-700 mr-3 mb-0">{{ 'Periods'|trans }}</h6>
                            <date-selector
                                :id="'publishers'"
                                :periods="periods.defaultPeriods"
                                :loading="sectionLoading.publishers"
                                :date-widget-period="dateWidgetSelected.publishers"
                                :selected-period="selectedPeriod.publishers"
                                :model-config="modelConfig"
                                :mode-date-picker="modeDatePicker"
                                @select-period="selectPeriod"
                                class="mt-0 mr-2"
                                style="margin-top: 0 !important;"
                                key="date-selector-publishers"></date-selector>
                        </div>
                    </div>
                    <div class="row main-data-table">
                        <div class="main-data-table-content mb-5 pb-3 mt-4 col-12 px-0">
                            <div class="simple-data-table d-flex flex-column">
                                <div class="table-headers px-3 py-4 rounded-2">
                                    <div class="col-12 d-flex justify-content-between align-items-center px-0">
                                        <div class="col-3 text-left pl-2 pr-1">
                                            <span class="cursor-pointer" @click="orderItems('name', 'String')">Publishers</span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('name', 'String')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'name',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'name' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'name' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col text-center px-1 overflow-hidden text-ellipsis pr-3">
                                            <span class="cursor-pointer" @click="orderItems('spend', 'Number')"
                                                  data-tippy-content="{{ 'All the expense already used for a publisher'|trans }}">
                                                {{ 'Spend'|trans }}
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('spend', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'spend',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'spend' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'spend' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col text-center px-1 overflow-hidden text-ellipsis pr-3">
                                            <span class="cursor-pointer" @click="orderItems('applies', 'Number')"
                                                  data-tippy-content="{{ 'All applies for a publisher'|trans }}">
                                                {{ "Applies"|trans }}
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('applies', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'applies',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'applies' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'applies' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1">
                                            <span class="cursor-pointer" @click="orderItems('cpa', 'Number')"
                                                  data-tippy-content="{{ 'Total spend by total applies for a publisher'|trans }}">
                                                CPA
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('cpa', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'cpa',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'cpa' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'cpa' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1">
                                            <span class="cursor-pointer" @click="orderItems('cpqa', 'Number')"
                                                  data-tippy-content="{{ 'Total spend by total qualified applies for a publisher'|trans }}">
                                                CPQA
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('cpqa', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'cpqa',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'cpqa' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'cpqa' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1">
                                            <span class="cursor-pointer" @click="orderItems('cpha', 'Number')"
                                                  data-tippy-content="{{ 'Total spend by total hired candidate for a publisher'|trans }}">
                                                CPH
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('cpha', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'cpha',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'cpha' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'cpha' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1">
                                            <span class="cursor-pointer" @click="orderItems('totalNbJobs', 'Number')"
                                                  data-tippy-content="{{ 'All Jobs for a publisher (with minimum one click or one application for a non Golden Bees publisher)'|trans }}">
                                                {{ 'Jobs'|trans }}
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('totalNbJobs', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'totalNbJobs',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'totalNbJobs' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'totalNbJobs' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1 overflow-hidden text-ellipsis pr-3">
                                            <span class="cursor-pointer" @click="orderItems('avgApplies', 'Number')"
                                                  data-tippy-content="{{ 'Average applies by job'|trans }}">
                                                {{ 'Average applies by job'|trans }}
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('avgApplies', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'avgApplies',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'avgApplies' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'avgApplies' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                        <div class="col-1 text-center px-1 overflow-hidden text-ellipsis pr-3">
                                            <span class="cursor-pointer" @click="orderItems('coverage', 'Number')"
                                                  data-tippy-content="{{ 'Number of jobs with applies by total of jobs'|trans }}">
                                                {{ 'Coverage rate'|trans }}
                                            </span>
                                            <i class="fa small column-sorter"
                                               @click="orderItems('coverage', 'Number')"
                                               :class="{'fa-sort-alt': publisherStatsOrder.option !== 'coverage',
                                               'fa-sort-amount-down-alt': publisherStatsOrder.option === 'coverage' && publisherStatsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': publisherStatsOrder.option === 'coverage' && publisherStatsOrder.direction === 'DESC'}">
                                            </i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="simple-data-table d-flex flex-column mt-2">
                                <div class="table-headers px-3 py-3 rounded-2">
                                    <div class="col-12 d-flex justify-content-between align-items-center px-0">
                                        <div class="col-3 text-left pl-2 pr-1 border-right">
                                            <span>{{ 'Total'|trans }}</span>
                                        </div>
                                        <div class="col text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisherListTotalStats?.spend,0),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col text-center px-1 border-right">
                                            <span><% numberFormat(publisherListTotalStats?.applies,0) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisherListTotalStats?.cpa,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisherListTotalStats?.cpqa,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisherListTotalStats?.cpha,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1 border-right">
                                            <span><% numberFormat(publisherListTotalStats?.totalNbJobs,0) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1 border-right">
                                            <span><% numberFormat(publisherListTotalStats?.avgApplies,2) %></span>
                                        </div>
                                        <div class="col-1 text-center px-1">
                                            <span><% numberFormat(publisherListTotalStats?.coverage,2) %></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                                 v-for="(publisher, publisherId) in publisherListStats" v-if="publisherListStats.length > 0" :key="publisherId">
                                <div class="pr-0 px-3 content-line row">
                                    <div class="col-12 d-flex justify-content-between align-items-center main-line-content px-0">
                                        <div class="col-sm-3 user-profile px-1 d-flex align-items-center border-right">
                                            <img :src="publisher.logo" :alt="publisher.name+'-logo'" width="30" class="my-auto mr-4">
                                            <span class="font-600 mr-2 d-block text-capitalize"><% publisher.name %></span>
                                        </div>
                                        <div class="col text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisher.spend,0),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col text-center px-1 border-right">
                                            <span><% numberFormat(publisher.applies,0) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisher.cpa,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisher.cpqa,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1 border-right">
                                            <span><% amountWithCurrency(numberFormat(publisher.cpha,2),advertiserCurrency) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1 border-right">
                                            <span><% numberFormat(publisher.totalNbJobs,0) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1 border-right">
                                            <span><% numberFormat(publisher.avgApplies,2) %></span>
                                        </div>
                                        <div class="col-sm-1 text-center px-1">
                                            <span><% numberFormat(publisher.coverage,2) %></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="page-overview" class="container-fluid" v-if="activePanel === 'overview'">
                    <div v-show="sectionLoading.overview" class="loader"></div>
                    <div class="px-3 py-4 rounded-2 bg-white row position-relative">
                        <h6 class="text-primary font-700 col-12">{{ 'Page filters'|trans }}</h6>
                        <div class="col-12 d-flex justify-content-between">
                            <div class="d-flex align-items-center flex-wrap position-relative">
                                <div class="small-loader" v-show="sectionLoading.filtersData" style="top: 0;"></div>
    
                                <input-dropdown v-model="overviewFilters.kpi" :data-list="KPI" id="overview-filter-kpi"
                                                :init-value="overviewFilters.kpi" class="mr-2 mt-2"
                                                :disabled="sectionLoading.overview || sectionLoading.filtersData"
                                                key="overview-filter-kpi"></input-dropdown>
                                <date-selector
                                    :id="'overview'"
                                    :periods="periods.defaultPeriods"
                                    :loading="sectionLoading.overview || sectionLoading.filtersData"
                                    :date-widget-period="dateWidgetSelected.overview"
                                    :selected-period="selectedPeriod.overview"
                                    :selected-by-period="selectedByPeriod.overview"
                                    :model-config="modelConfig"
                                    :mode-date-picker="modeDatePicker"
                                    @select-period="selectPeriod"
                                    @select-by-period="selectByPeriod"
                                    class="position-relative mr-2 mt-2"
                                    key="date-selector-overview"></date-selector>
                                <multi-select-dropdown v-model="overviewFilters.publisher" :data="publishers" placeholder="Publishers"
                                                      :id="'overviewFilters-publisher'" :init-value="overviewFilters.publisher" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="Publishers" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.overview || sectionLoading.filtersData" key="overview-publisher"></multi-select-dropdown>
                                <div style="width: 13%" class="mr-2 mt-2">
                                    <categories-selector :job-categories="jobCategories"  v-model="overviewFilters.jobCategory"
                                                         :id="'overviewFilters-jobCategory'" @close="multiSelectCloseHandler"
                                                         :close-event="true" :init-value="overviewFilters.jobCategory" key="overview-category"
                                                         :disabled="sectionLoading.overview || sectionLoading.filtersData"></categories-selector>
                                </div>
                                <multi-select-dropdown v-model="overviewFilters.label" :data="labels" placeholder="{{ 'label'|trans|capitalize }}"
                                                      :id="'overviewFilters-label'" :init-value="overviewFilters.label" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'label'|trans|capitalize }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.overview || sectionLoading.filtersData" key="overview-label"></multi-select-dropdown>
                                <multi-select-dropdown v-model="overviewFilters.contractType" :data="contractType" placeholder="{{ 'Contract type'|trans }}"
                                                      :id="'overviewFilters-contractType'" :init-value="overviewFilters.contractType" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Contract type'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.overview || sectionLoading.filtersData" key="overview-contractType"></multi-select-dropdown>
                                <multi-select-dropdown v-model="overviewFilters.country" :data="countries" placeholder="{{ 'Country'|trans }}"
                                                      :id="'overviewFilters-country'" :init-value="overviewFilters.country" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Country'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.overview || sectionLoading.filtersData" key="overview-country"></multi-select-dropdown>
                                <multi-select-dropdown v-model="overviewFilters.region" :data="regions" placeholder="{{ 'Region'|trans }}"
                                                      :id="'overviewFilters-region'" :init-value="overviewFilters.region" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Region'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.overview || sectionLoading.filtersData" key="overview-region"></multi-select-dropdown>
                            </div>
                            <button class="btn btn-primary rounded-30 ml-3 px-3 mt-2 mb-auto" @click="exportData">
                                {{ 'Export'|trans }}
                            </button>
                        </div>
                    </div>
                    <div v-if="showOverviewCharts" class="bg-white py-4 rounded-2 mt-4 row">
                        <div class="col-12">
                            <h6 class="text-primary font-700 text-center mb-3">{{ 'Average price per'|trans }} <% KPI.filter(el => el.id === overviewFilters.kpi)[0].name.toLowerCase() %></h6>
                            <template v-if="!isObjEmpty(overviewChartsStats[gbStatsViewMode].lineKPI) && hasDataSuperiorAtZero(overviewChartLineKpi.datasets, true)">
                                <line-chart :height="350"
                                            :css-classes="'col-12'"
                                            :chart-data="overviewChartLineKpi"
                                            :text-color="fontColor"
                                            :legend-position="'top'"
                                            :legend-suffix="advertiserCurrency.symbole"
                                            :plugins="chartPlugins"
                                            key="overview-chart-line-kpi"></line-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
                    <div v-if="showOverviewCharts" class="bg-white py-4 rounded-2 mt-4 row">
                        <div class="col-12">
                            <h6 class="text-primary font-700 text-center mb-3 d-flex justify-content-center align-items-center position-relative">
                                <button class="btn btn-sm btn-primary rounded-30 position-absolute ml-2" style="left: 0"
                                        @click="changeSpendVSAppliesMode" data-tippy-content="{{ 'Show values in absolute or percentage'|trans }}">
                                    <% overviewFilters.barSpendVSAppliesMode == 'percent' ? '{{ 'Percentage values'|trans }}' : '{{ 'Absolute values'|trans }}' %>
                                </button>
                                <span>{{ 'Spend VS'|trans }} <% KPI.filter(el => el.id === overviewFilters.kpi)[0].name.toLowerCase() %></span>
                            </h6>
                            <template v-if="!isObjEmpty(overviewChartsStats[gbStatsViewMode].barSpendVSApplies) && hasDataSuperiorAtZero(overviewChartBarSpendVSApplies.datasets, true)">
                                <bar-horizontal-chart :text-color="fontColor"
                                                      :chart-data="overviewChartBarSpendVSApplies"
                                                      :stacked="false"
                                                      :legend-suffix="legendSuffixSpendVSApplies"
                                                      :responsive="true"
                                                      :style="{height: spendVSAppliesChartHeight + 'px'}"
                                                      :chart-id="'overview-chart-bar-spend-applies'"
                                                      :plugins="chartPlugins"
                                                      key="overview-chart-bar-spend-applies"></bar-horizontal-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
                    <div v-if="showOverviewCharts" class="row mt-4 justify-content-between flex-nowrap" style="min-height: 320px">
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 33%">
                            <h6 class="text-primary font-700 text-center mb-3">
                                <% '{{ 'Average %kpi% per job'|trans({'%kpi%': ':kpi'}) }}'.replace(':kpi', KPI.filter(el => el.id === overviewFilters.kpi)[0].name.toLowerCase()) %>
                            </h6>
                            <template v-if="!isObjEmpty(overviewChartsStats[gbStatsViewMode].barAvgApplies) && hasDataSuperiorAtZero(overviewChartBarAvgApplies.datasets[0].data, false)">
                                <bar-vertical-chart :height="320"
                                                    :chart-data="overviewChartBarAvgApplies"
                                                    :text-color="fontColor"
                                                    :chart-id="'overview-chart-bar-avg-apply'"
                                                    :plugins="chartPlugins"
                                                    key="overview-chart-bar-avg-apply"></bar-vertical-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 33%">
                            <h6 class="text-primary font-700 text-center mb-3">{{ 'Coverage rate'|trans }}</h6>
                            <template v-if="!isObjEmpty(overviewChartsStats[gbStatsViewMode].barCoverageRate) && hasDataSuperiorAtZero(overviewChartsStats[gbStatsViewMode].barCoverageRate.datasets[0].data, false)">
                                <bar-vertical-chart :height="320"
                                                    :chart-data="overviewChartsStats[gbStatsViewMode].barCoverageRate"
                                                    :text-color="fontColor"
                                                    :chart-id="'overview-chart-bar-coverage-rate'"
                                                    :plugins="chartPlugins"
                                                    key="overview-chart-bar-coverage-rate"></bar-vertical-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 33%">
                            <h6 class="text-primary font-700 text-center mb-3 d-flex justify-content-center align-items-center">
                                <span class="mx-auto">{{ 'Volume of jobs sponsored'|trans }}</span>
                                <template v-if="overviewChartsStats.stats?.[`avg_${gbStatsViewMode}`]?.totalNbJobs > 0">
                                    <span>
                                        {{ 'average'|trans }} :
                                        <span class="chips chips_purple">
                                             <% numberFormat(overviewChartsStats.stats?.[`avg_${gbStatsViewMode}`]?.totalNbJobs, 0) %>
                                        </span>
                                    </span>
                                </template>
                            </h6>
                            <template v-if="!isObjEmpty(overviewChartsStats[gbStatsViewMode].barJobs) && hasDataSuperiorAtZero(overviewChartsStats[gbStatsViewMode].barJobs.datasets, true)">
                                <bar-horizontal-chart :height="320"
                                                      :text-color="fontColor"
                                                      :chart-data="overviewChartsStats[gbStatsViewMode].barJobs"
                                                      :stacked-y="true"
                                                      :stacked-x="true"
                                                      :max-ticks-limit="2"
                                                      :step-size="1"
                                                      :show-grid-lines-y="false"
                                                      :show-grid-lines-x="false"
                                                      :chart-id="'overview-chart-bar-jobs'"
                                                      :plugins="chartPlugins"
                                                      key="overview-chart-bar-jobs"></bar-horizontal-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
                    <div v-if="showOverviewCharts" class="row mt-4 justify-content-between flex-nowrap" style="min-height: 320px">
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 49.5%">
                            <h6 class="text-primary font-700 text-center mb-3 d-flex justify-content-center align-items-center">
                                <span class="mx-auto">{{ 'Applies in each recruitment process stages'|trans }}
                                    <i class="fal fa-question-circle" data-tippy-content="{{ 'Subject to having all the statuses of applications'|trans}}"></i>
                                </span>
                                <template v-if="overviewPanelTotalApplies > 0">
                                    <span>
                                        {{ 'Total applies'|trans }} :
                                        <span class="chips chips_purple">
                                             <% overviewPanelTotalApplies %>
                                        </span>
                                    </span>
                                </template>
                            </h6>
                            <template v-if="!isObjEmpty(overviewChartsStats.barRecruitmentStage) && overviewChartsStats.barRecruitmentStage.datasets.length > 0">
                                <bar-horizontal-chart :height="320"
                                                      :text-color="fontColor"
                                                      :chart-data="overviewChartsStats.barRecruitmentStage"
                                                      :stacked="false"
                                                      :max-ticks-limit="2"
                                                      :step-size="1"
                                                      :chart-name="'barRecr uitmentStage'"
                                                      :chart-id="'overview-chart-bar-recruitment-stage'"
                                                      :plugins="chartPlugins"
                                                      key="overview-chart-bar-recruitment-stage"></bar-horizontal-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 49.5%">
                            <h6 class="text-primary font-700 text-center mb-3">{{ 'Recruitment process time'|trans }}
                                <i class="fal fa-question-circle" data-tippy-content="{{ 'The recruitment process time start starts from the moment the job is put online and ends when the recruiter moves the application to the recruited stage of his pipe'|trans }}"></i>
                            </h6>
                            <template v-if="!isObjEmpty(overviewChartsStats.lineRecruitmentTime) && overviewChartsStats.lineRecruitmentTime.datasets.length > 0">
                                <line-chart :height="320"
                                            :chart-data="overviewChartsStats.lineRecruitmentTime"
                                            :text-color="fontColor"
                                            :legend-position="'bottom'"
                                            :legend-suffix="'days'"
                                            :plugins="chartPlugins"
                                            key="overview-chart-line-recruitment-time"></line-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
                </div>
    
                <div id="page-insight" class="container-fluid" v-if="activePanel === 'insight'">
                    <div v-show="sectionLoading.insight" class="loader"></div>
                    <div class="px-3 py-4 rounded-2 bg-white row position-relative">
                        <h6 class="text-primary font-700 col-12">{{ "Filters"|trans }}</h6>
                        <div class="col-12 d-flex justify-content-between">
                            <div class="d-flex align-items-center flex-wrap position-relative">
                                <div class="small-loader" v-show="sectionLoading.filtersData" style="top: 0;"></div>
                                
                                <input-dropdown v-model="insightFilters.kpi" :data-list="KPI" id="insight-filter-kpi"
                                                :init-value="insightFilters.kpi" class="mr-2 mt-2" :disabled="sectionLoading.insight || sectionLoading.filtersData" key="insight-filter-kpi"></input-dropdown>
                                <date-selector
                                    :id="'insight'"
                                    :periods="periods.insightPeriods"
                                    :loading="sectionLoading.insight || sectionLoading.filtersData"
                                    :date-widget-period="dateWidgetSelected.insight"
                                    :selected-period="selectedPeriod.insight"
                                    :selected-by-period="selectedByPeriod.insight"
                                    :model-config="modelConfig"
                                    :mode-date-picker="modeDatePicker"
                                    @select-period="selectPeriod"
                                    @select-by-period="selectByPeriod"
                                    class="position-relative mr-2 mt-2"
                                    key="date-selector-insight"></date-selector>
    
                                <categories-selector :job-categories="jobCategories" class="mr-2 mt-2" v-model="insightFilters.jobCategory"
                                                     :id="'insightFilters-jobCategory'" @close="multiSelectCloseHandler"
                                                     :close-event="true" :init-value="insightFilters.jobCategory" key="insight-category"
                                                     :disabled="sectionLoading.insight || sectionLoading.filtersData"></categories-selector>
                                <multi-select-dropdown v-model="insightFilters.contractType" :data="contractType" placeholder="{{ 'Contract type'|trans }}"
                                                      :id="'insightFilters-contractType'" :init-value="insightFilters.contractType" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Contract type'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.insight || sectionLoading.filtersData" key="insight-contractType"></multi-select-dropdown>
                                <multi-select-dropdown v-model="insightFilters.country" :data="countries" placeholder="{{ 'Country'|trans }}"
                                                      :id="'insightFilters-country'" :init-value="insightFilters.country" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Country'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.insight || sectionLoading.filtersData" key="insight-country"></multi-select-dropdown>
                                <multi-select-dropdown v-model="insightFilters.region" :data="regions" placeholder="{{ 'Region'|trans }}"
                                                      :id="'insightFilters-region'" :init-value="insightFilters.region" :is-raw-value="true"
                                                      label-key="name" key-option="value" input-value-text="{{ 'Region'|trans }}" class="mr-2 mt-2"
                                                      :close-event="true" @close="multiSelectCloseHandler" :disabled="sectionLoading.insight || sectionLoading.filtersData" key="insight-region"></multi-select-dropdown>
                            </div>
                            <button class="btn btn-primary rounded-30 ml-3 px-3 mt-2 mb-auto" @click="exportData">
                                {{ 'Export'|trans }}
                            </button>
                        </div>
                    </div>
                    
                    <div v-if="showInsightCharts" class="bg-white py-4 rounded-2 mt-4 row">
                        <div class="col-12">
                            <h6 class="text-primary font-700 text-center mb-3">
                                <% '{{ 'Your %kpi% versus the market'|trans({'%kpi%': ':kpi'}) }}'.replace(':kpi', selectedKPIName) %>
                            </h6>
                            <template v-if="!isObjEmpty(insightChartsStats.lineKPI) && hasDataSuperiorAtZero(insightChartLineKpi.datasets, true)">
                                <line-chart :height="350"
                                            :css-classes="'col-12'"
                                            :chart-data="insightChartLineKpi"
                                            :text-color="fontColor"
                                            ref="insightChartLineKPI"
                                            :legend-position="'top'"
                                            :legend-suffix="advertiserCurrency.symbole"
                                            :plugins="chartPlugins"
                                            key="insight-chart-line-kpi"></line-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
            
                    <div v-if="showInsightCharts" class="row mt-4 justify-content-between flex-nowrap" style="min-height: 320px">
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 49.5%">
                            <h6 class="text-primary font-700 text-center mb-3">
                                {{ 'Spend by categories on your job VS the market'|trans }}
                            </h6>
                            <template v-if="!isObjEmpty(insightChartsStats.barSpendCategory) && hasDataSuperiorAtZero(insightChartsStats.barSpendCategory.datasets, true)">
                                <bar-vertical-chart :height="320"
                                                    :chart-data="insightChartsStats.barSpendCategory"
                                                    :text-color="fontColor"
                                                    :unit="advertiserCurrency.symbole"
                                                    :chart-id="'insight-chart-spend-category'"
                                                    key="insight-chart-spend-category"
                                                    :dataset-label-as-tooltip-key="true"
                                                    :plugins="chartPlugins"
                                                    :has-legend="true"></bar-vertical-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                        <div class="bg-white py-4 rounded-2 px-3" style="width: 49.5%">
                            <h6 class="text-primary font-700 text-center mb-3">
                                <% '{{ 'Average %kpi% on your job VS the market'|trans({'%kpi%': ':kpi'}) }}'.replace(':kpi', KPI.filter(el => el.id === insightFilters.kpi)[0].name.toLowerCase()) %>
                            </h6>
                            <template v-if="!isObjEmpty(insightChartsStats.barAvgApplies) && hasDataSuperiorAtZero(insightChartBarAvgApplies.datasets, true)">
                                <bar-vertical-chart :height="320"
                                                    :chart-data="insightChartBarAvgApplies"
                                                    :font-color="fontColor"
                                                    :chart-id="'insight-chart-avg-apply'"
                                                    key="insight-chart-avg-apply"
                                                    :dataset-label-as-tooltip-key="true"
                                                    :plugins="chartPlugins"
                                                    :has-legend="true"></bar-vertical-chart>
                            </template>
                            <template v-else>
                                <p class="text-center mt-5 mb-5">{{ 'There is no data available yet'|trans }}</p>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            
            <span class="d-none invisible twig-data-currencies" data-currencies="{{ currencies|json_encode }}"></span>
            <span class="d-none invisible twig-data-advertiser-currency" data-advertiser-currency="{{ advertiser.currency|json_encode }}"></span>
            <span class="d-none invisible twig-data-path-ajax-analytics-publishers-stats" data-path-ajax-analytics-publishers-stats="{{ path('ajax_analytics_publishers_stats', {'advertiser': advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-analytics-filters-data" data-path-ajax-analytics-filters-data="{{ path('ajax_analytics_filters_data', {'advertiser': advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-analytics-overview-stats" data-path-ajax-analytics-overview-stats="{{ path('ajax_analytics_overview_stats', {'advertiser': advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-analytics-insight-stats" data-path-ajax-analytics-insight-stats="{{ path('ajax_analytics_insight_stats', {'advertiser': advertiser.id}) }}"></span>

        </section>
    </main>
    
{% endblock %}
{% block specificJS %}
    
    {{ encore_entry_script_tags('analytics-index') }}
    
{% endblock %}