{% extends "Includes/layout.html.twig" %}
{% block body %}
    <main class="row main mx-0 " id="main-content">
        <section id="app-business" class="content-area p-r-l-6" v-cloak>
            <div class="px-0 pb-4 container-fluid rounded-2 page-header">
                <p class="pb-2 text-primary">
                    {{ "Analyze advertisers's performance in different contexts"|trans }}
                </p>
            </div>
            <div class="col-12 mb-4 px-3 py-4 bg-white rounded-2 show">
                <h6 class="text-primary font-700 col-12">{{ 'Page filters'|trans }}</h6>
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center flex-wrap position-relative">
                            <div class="small-loader" v-show="sectionLoading.filtersData" style="top: 0;"></div>
                            <div class="d-flex align-items-center">
                                <date-selector
                                        :id="'overview'"
                                        :loading="sectionLoading.overview || sectionLoading.filtersData"
                                        :selected-period="selectedPeriodOne"
                                        :selected-by-period="selectedByPeriodOne"
                                        :model-config="{type: 'string', masks: 'YYYY-MM-DD'}"
                                        mode-date-picker='range'
                                        @select-period="setDateSelectAdvertiserOne"
                                        @select-by-period="selectByPeriodOne"
                                        class="position-relative mr-2 mt-2"
                                        key="date-selector-overview">
                                </date-selector>
                                <multi-select-dropdown
                                        v-model="comparaisonOne.filtersData.advertisers"
                                        :data="listAdvertisers"
                                        :limit="listAdvertisers.length"
                                        :sub-multi-selected-dropdown-data="dataSubChildFilters"
                                        placeholder="Advertisers"
                                        :init-value="comparaisonOne.filtersData.advertisers"
                                        :is-raw-value="true"
                                        label-key="name" input-value-text="Advertiser" class="mr-2 mt-2"
                                        :close-event="true"
                                        @close="getData(comparaisonOne)"
                                        :disabled="sectionLoading.advertisers"
                                        key="overview-advertiser"
                                        all-key="all"
                                        :search-box="true">
                                    >
                                </multi-select-dropdown>
                                <div class="mr-4 mt-2">
                                    <input class="inp-cbx" id="enabledComparaison" type="checkbox"
                                           style="display: none;"
                                           v-model="enabledComparaison"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="enabledComparaison">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                            </svg>
                                        </span>
                                        <span>
                                            {{ 'Enabled Comparison'|trans }}
                                        </span>
                                    </label>
                                    <input class="inp-cbx" id="groupPPCCheckBox" type="checkbox"
                                           style="display: none;"
                                           v-model="groupPPC"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="groupPPCCheckBox">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                            </svg>
                                        </span>
                                        <span>
                                            {{ 'Group Golden Bees'|trans }}
                                        </span>
                                    </label>
                                    <input class="inp-cbx"
                                           id="isDiscountCheckBox"
                                           type="checkbox"
                                           style="display: none;"
                                           v-model="isDiscount"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="isDiscountCheckBox">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                            </svg>
                                        </span>
                                        <span>
                                            {{ 'Discount Publisher'|trans }}
                                        </span>
                                    </label>
                                    <input class="inp-cbx"
                                           id="hasCommissionAdvertiser"
                                           type="checkbox"
                                           style="display: none;"
                                           v-model="hasCommission"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="hasCommissionAdvertiser">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                            </svg>
                                        </span>
                                        <span data-tippy-content="{{ 'agency commission and business referral'|trans }}">
                                            {{ 'Commission'|trans }}
                                        </span>
                                    </label>
                                </div>
                                <multi-select-dropdown
                                        v-model="selectedMedia"
                                        :data="listAgregator"
                                        placeholder="Média"
                                        id="comparaisonOne-filtersData-agregator"
                                        :is-raw-value="true"
                                        :init-value="selectedMedia"
                                        label-key="name"
                                        input-value-text="{{ 'Media'|trans }}" class="mr-2 mt-2"
                                        :close-event="true"
                                        :disabled="sectionLoading.overview"
                                        @close="mediaEventClose()"
                                        key="overview-agregator"
                                        all-key="all"
                                        :search-box="true"
                                ></multi-select-dropdown>
                                <button v-if="!enabledComparaison" class="btn btn-primary rounded-30 ml-3 px-3 mt-2"
                                        @click="exportData(comparaisonOne)">
                                    {{ 'Export'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12" v-if="enabledComparaison">
                        <div class="d-flex align-items-center flex-wrap position-relative">
                            <div class="small-loader" v-show="sectionLoading.filtersData" style="top: 0;"></div>
                            <div class="d-flex align-items-center">
                                <date-selector
                                        :id="'overviewenabledComparaison'"
                                        :loading="sectionLoading.overview || sectionLoading.filtersData"
                                        :selected-period="selectedPeriodTwo"
                                        :selected-by-period="selectedByPeriodTwo"
                                        :model-config="{type: 'string', masks: 'YYYY-MM-DD'}"
                                        mode-date-picker='range'
                                        @select-period="setDateSelectAdvertiserTwo"
                                        @select-by-period="selectByPeriodTwo"
                                        class="position-relative mr-2 mt-2"
                                        key="date-selector-overviewenabledComparaison">
                                </date-selector>
                                <multi-select-dropdown
                                        v-if="this.dataSubChildFilters.length > 0"
                                        v-model="comparaisonTwo.filtersData.advertisers"
                                        :data="listAdvertisers"
                                        placeholder="Advertisers"
                                        :sub-multi-selected-dropdown-data="dataSubChildFilters"
                                        :init-value="comparaisonTwo.filtersData.advertisers"
                                        :is-raw-value="true"
                                        label-key="name" input-value-text="Advertiser" class="mr-2 mt-2"
                                        :close-event="true"
                                        @close="getData(comparaisonTwo)"
                                        :disabled="sectionLoading.advertisers"
                                        key="overview-advertiser"
                                        all-key="all"
                                        :search-box="true"
                                ></multi-select-dropdown>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-4 px-3 pb-3 pt-4 pl-4 pr-4 bg-white rounded-2 show">
                <div v-show="sectionLoading.overview" class="loader"></div>
                <div style="width: 800px; margin: auto"
                     v-if="(this.comparaisonOne.selectedOverviewData.chartAgregatorData.length === 0) &&
                           (this.comparaisonOne.selectedOverviewData.doughnutAgregatorData.length === 0) &&
                           sectionLoading.overview === false">
                    <p style="text-align:center;margin-top: 15px;">no results for selected filters</p>
                </div>
                <div class="row" v-if="this.comparaisonOne.selectedOverviewData.doughnutAgregatorData.length > 0">
                    <div class="col-sm-12 col-md-4">
                        <h6 class="text-primary font-700 col-12  pl-5">{{ 'SPEND'|trans }}</h6>
                        <doughnut-chart key="chart-spend"
                                        :chart-data="createSpendDoughnutAdvertiserOne">
                        </doughnut-chart>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <h6 class="text-primary font-700 col-12  pl-5">{{ 'COST'|trans }}</h6>
                        <doughnut-chart key="chart-cost"
                                        :chart-data="createCostDoughnutAdvertiserOne">
                        </doughnut-chart>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <h6 class="text-primary font-700 col-12  pl-5">{{ 'MARGIN'|trans }}</h6>
                        <doughnut-chart key="chart-margin"
                                        :chart-data="createFeesDoughnutAdvertiserOne">
                        </doughnut-chart>
                    </div>
                </div>
                <div v-if="(comparaisonOne.filtersData.formattedStartDate !== null) &&
                          (comparaisonOne.filtersData.formattedEndDate !== null)"
                     style="width: 800px; margin: auto">
                    <div style="text-align:center; margin-top: 15px;">{{ 'Period from'|trans }}<strong>
                            <%comparaisonOne.filtersData.formattedStartDate%> </strong> {{ 'to'|trans }}
                        <strong><%comparaisonOne.filtersData.formattedEndDate%></strong>
                        <strong><%comparaisonOne.filtersData.toStringAdvertisers%></strong>
                        <span v-if="comparaisonOne.filtersData.advertisers.length > 63 && comparaisonOne.filtersData.displayAllAdvertisers===false">
                            <p class="cursor-pointer"
                               @click="getInfoSelection(comparaisonOne, false); comparaisonOne.filtersData.displayAllAdvertisers = true"><u>{{ 'See All advertisers'|trans }}</u></p>
                        </span>
                    </div>
                </div>
                <div class="row" v-if="this.comparaisonTwo.selectedOverviewData.doughnutAgregatorData.length > 0">
                    <div v-if="(enabledComparaison === true)"
                         class="col-12 d-flex mt-2 justify-content-between pl-0 pr-0">
                        <div class="col-sm-12 col-md-4 ">
                            <h6 class="text-primary font-700 col-12  pl-5">{{ 'SPEND'|trans }}</h6>
                            <doughnut-chart key="chart-spend-comparaison-one"
                                            :chart-data="createSpendDoughnutAdvertiserTwo">
                            </doughnut-chart>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <h6 class="text-primary font-700 col-12  pl-5">{{ 'COST'|trans }}</h6>
                            <doughnut-chart key="chart-cost-comparaison-two"
                                            :chart-data="createCostDoughnutAdvertiserTwo">
                            </doughnut-chart>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <h6 class="text-primary font-700 col-12  pl-5">{{ 'Margin'|trans }}</h6>
                            <doughnut-chart key="chart-margin-comparaison-three"
                                            :chart-data="createFeesDoughnutAdvertiserTwo">
                            </doughnut-chart>
                        </div>
                    </div>
                </div>
                <div style="width: 800px; margin: auto"
                     v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length === 0) &&
                           (this.comparaisonTwo.selectedOverviewData.doughnutAgregatorData.length === 0) &&
                           (sectionLoading.overview === false) &&
                           (enabledComparaison === true)">
                    <p style="text-align:center;margin-top: 15px;">no results for selected filters</p>
                </div>
                <div v-if="(comparaisonTwo.filtersData.formattedStartDate !== null) &&
                              (comparaisonTwo.filtersData.formattedEndDate !== null)"
                     style="width: 800px; margin: auto">
                    <div style="text-align:center; margin-top: 15px;">{{ 'Period from'|trans }}<strong>
                            <%comparaisonTwo.filtersData.formattedStartDate%> </strong> {{ 'to'|trans }}
                        <strong><%comparaisonTwo.filtersData.formattedEndDate%></strong>
                        <strong><%comparaisonTwo.filtersData.toStringAdvertisers%></strong>
                        <span v-if="comparaisonTwo.filtersData.advertisers.length > 63 && comparaisonTwo.filtersData.displayAllAdvertisers===false">
                            <p class="cursor-pointer"
                               @click="getInfoSelection(comparaisonTwo, false); comparaisonTwo.filtersData.displayAllAdvertisers = true"><u>{{ 'See All advertisers'|trans }}</u></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-4 px-3 py-4 bg-white rounded-2 show mb-5"
                 v-if="comparaisonOne.selectedOverviewData.chartAgregatorData.length > 0">
                <div class="col-12 d-flex mb-5">
                    <div v-if="(comparaisonOne.filtersData.formattedStartDate !== null) &&
                              (comparaisonOne.filtersData.formattedEndDate !== null)"
                         class="col-2 pl-0 pr-2">
                        <small>{{ 'Date corresponding'|trans }}</small><br>
                        <p class="mb-0 mt-1"><strong><%comparaisonOne.filtersData.formattedStartDate%></strong> au
                            <strong><%comparaisonOne.filtersData.formattedEndDate%></strong><br></p>
                        <p v-if="(comparaisonTwo.filtersData.formattedStartDate !== null) &&
                              (comparaisonTwo.filtersData.formattedEndDate !== null)">
                            <strong><%comparaisonTwo.filtersData.formattedStartDate%></strong> au
                        </p>
                    </div>
                    <button type="button"
                            @click="comparaisonOne.filtersData.selectedChart.CA = !comparaisonOne.filtersData.selectedChart.CA; comparaisonTwo.filtersData.selectedChart.CA = !comparaisonTwo.filtersData.selectedChart.CA"
                            :class="[comparaisonOne.filtersData.selectedChart.CA === true ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']"
                            :style="comparaisonOne.filtersData.selectedChart.CA === true ? 'background-color: ' + chartLineColors.clic + '; border-color: ' + chartLineColors.clic + '; color: white;' : ''">
                        <small>{{ 'CA'|trans }}</small><br>
                        <strong v-if="this.comparaisonOne.selectedOverviewData.totalChiffreAffaires !== null">
                            <% amountWithCurrency(this.comparaisonOne.selectedOverviewData.totalChiffreAffaires, 'currency')%>
                        </strong><br>
                        <strong v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0) && (this.comparaisonTwo.selectedOverviewData.totalChiffreAffaires !== null) ">
                            <% amountWithCurrency(this.comparaisonTwo.selectedOverviewData.totalChiffreAffaires, 'currency')%>
                        </strong>
                    </button>

                    <button type="button"
                            @click="comparaisonOne.filtersData.selectedChart.spend = !comparaisonOne.filtersData.selectedChart.spend; comparaisonTwo.filtersData.selectedChart.spend = !comparaisonTwo.filtersData.selectedChart.spend"
                            :class="[comparaisonOne.filtersData.selectedChart.spend === true ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']"
                            :style="comparaisonOne.filtersData.selectedChart.spend === true ? 'background-color: ' + chartLineColors.spend + '; border-color: ' + chartLineColors.spend + '; color: white;' : ''">
                        <small>{{ 'Spend'|trans }}</small><br>
                        <strong v-if="this.comparaisonOne.selectedOverviewData.totalSpend !== null">
                            <% amountWithCurrency(this.comparaisonOne.selectedOverviewData.totalSpend, 'currency')%>
                        </strong><br>
                        <strong v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0) && (this.comparaisonTwo.selectedOverviewData.totalSpend !== null) ">
                            <% amountWithCurrency(this.comparaisonTwo.selectedOverviewData.totalSpend, 'currency')%>
                        </strong>
                    </button>
                    <button type="button"
                            @click="comparaisonOne.filtersData.selectedChart.cost = !comparaisonOne.filtersData.selectedChart.cost; comparaisonTwo.filtersData.selectedChart.cost = !comparaisonTwo.filtersData.selectedChart.cost"
                            :class="[comparaisonOne.filtersData.selectedChart.cost === true ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']"
                            :style="comparaisonOne.filtersData.selectedChart.cost === true ? 'background-color: ' + chartLineColors.cost + '; border-color: ' + chartLineColors.cost + '; color: white;' : ''">
                        <small>{{ 'Cost'|trans }}</small><br>
                        <strong v-if="this.comparaisonOne.selectedOverviewData.totalCost !== null"><% amountWithCurrency(this.comparaisonOne.selectedOverviewData.totalCost, 'currency')%></strong><br>
                        <strong v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0) && (this.comparaisonTwo.selectedOverviewData.totalCost !== null) ">
                            <% amountWithCurrency(this.comparaisonTwo.selectedOverviewData.totalCost, 'currency')%>
                        </strong>
                    </button>
                    <button type="button"
                            @click="comparaisonOne.filtersData.selectedChart.fees = !comparaisonOne.filtersData.selectedChart.fees; comparaisonTwo.filtersData.selectedChart.fees = !comparaisonTwo.filtersData.selectedChart.fees "
                            :class="[comparaisonOne.filtersData.selectedChart.fees === true ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']"
                            :style="comparaisonOne.filtersData.selectedChart.fees === true ? 'background-color: ' + chartLineColors.margin + '; border-color: ' + chartLineColors.margin + '; color: white;' : ''">
                        <small>{{ 'Margin'|trans }}</small><br>
                        <strong v-if="this.comparaisonOne.selectedOverviewData.totalMargin !== null"><% amountWithCurrency(this.comparaisonOne.selectedOverviewData.totalMargin, 'currency')%></strong><br>
                        <strong v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0) && (this.comparaisonTwo.selectedOverviewData.totalMargin !== null) ">
                            <% amountWithCurrency(this.comparaisonTwo.selectedOverviewData.totalMargin, 'currency')%>
                        </strong>
                    </button>
                    <button type="button"
                            @click="comparaisonOne.filtersData.selectedChart.feesPercent = !comparaisonOne.filtersData.selectedChart.feesPercent; comparaisonTwo.filtersData.selectedChart.feesPercent = !comparaisonTwo.filtersData.selectedChart.feesPercent"
                            :class="[comparaisonOne.filtersData.selectedChart.feesPercent === true ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']"
                            :style="comparaisonOne.filtersData.selectedChart.feesPercent === true ? 'background-color: ' + chartLineColors.marginPercent + '; border-color: ' + chartLineColors.marginPercent + '; color: white;' : ''">
                        <small>{{ 'Margin Percent'|trans }}</small><br>
                        <strong v-if="this.comparaisonOne.selectedOverviewData.totalMarginPercent !== null"><% amountWithCurrency(this.comparaisonOne.selectedOverviewData.totalMarginPercent, 'percent')%></strong><br>
                        <strong v-if="(this.comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0) && (this.comparaisonTwo.selectedOverviewData.totalMarginPercent !== null) ">
                            <% amountWithCurrency(this.comparaisonTwo.selectedOverviewData.totalMarginPercent, 'percent')%>
                        </strong>
                    </button>
                </div>
                <line-chart :chart-options="constructRenderedYAxesComparaisonOne"
                            :chart-data="constructRenderedDataComparaisonOne"
                            chart-id="line-chart"
                            dataset-id-key="label"
                            :width="400"
                            :height="400"
                ></line-chart>
                <line-chart v-if="(comparaisonTwo.selectedOverviewData.chartAgregatorData.length > 0)"
                            class="mt-3"
                            :chart-options="constructRenderedYAxesComparaisonTwo"
                            :chart-data="constructRenderedDataComparaisonTwo"
                            chart-id="line-chart-comparaison-two"
                            dataset-id-key="label"
                            :width="400"
                            :height="400"
                ></line-chart>
            </div>
            <span class="d-none invisible twig-data-path-ajax-overview-get-data"
                  data-path-ajax-overview-get-data="{{ path('ajax_overview_get_data') }}"></span>
            <span class="d-none invisible twig-data-path-ajax-filters-data"
                  data-path-ajax-filters-data="{{ path('ajax_filters_data') }}"></span>
            <span class="d-none invisible twig-data-agregator" data-agregator="{{ agregator|json_encode }}"></span>
            <span class="d-none invisible twig-data-path-ajax-overview-export-data"
                  data-path-ajax-overview-export-data="{{ path('ajax_overview_export_data') }}"></span>
        </section>
    </main>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('business-overview-index') }}
{% endblock %}