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

{% block title %}Daf ATS{% endblock %}
{% block pageheader %}Daf ATS{% endblock %}

{% block body %}
    {% set breadcrumb_nav = "home" %}
    <main class="row main mx-0">
        {{ include('Includes/aside_ats.html.twig') }}
        <section class="content-area p-r-l-6">
            <div id="source-app" v-cloak>
                <div class="title-page col-12 text-left  pb-3 px-0 d-flex mt-3">
                    <div class="col-md-6 px-0 text-left">
                        <span class="mr-3 chips chips_purple text-primary px-3 py-2 active panel-roi cursor-pointer"
                              @click="activePanel" id="panel-1">All sources</span>
                        <span class="chips status-form chips_purple text-primary px-3 py-2 panel-roi cursor-pointer"
                              @click="activePanel" id="panel-2">Overview R.O.I</span>
                    </div>
{#                    <div class="col-md-6 text-right px-0 mx-0">#}
{#                        <button title="Show more infos"#}
{#                                type="button"#}
{#                                class="btn btn-primary rounded-30 px-3 small ml-auto d-none"#}
{#                                :disabled="loading"#}
{#                                @click="showModalOnboarding" id="btn_new_source">#}
{#                            <span class="small">add a source</span>#}
{#                            <i class="ml-3 far fa-angle-right"></i>#}
{#                        </button>#}
{#                    </div>#}
                </div>

                <div id="page-source" data-target="#panel-1" class="active panel-roi-body">
                    <div class="col-12 main-data-table px-0">
                        <div class="main-data-table-content mb-5 pb-3">
                            <div class="simple-data-table d-flex flex-column px-0 col-md-12 col-lg-12 col-sm-12">
                                <div class="table-headers px-3 py-4 rounded-2">
                                    <div class="col-lg-11 col-md-12 col-sm-12 justify-content-between d-flex">
                                        <div class="col-2 text-left">
                                            <span>Source</span>
                                        </div>
                                        <div class="col-3 text-center">
                                            <span>Applies</span>
                                        </div>
                                        <div class="col-2 text-center">
                                            <span>CPA</span>
                                        </div>
                                        <div class="col-3 text-center">
                                            <span>Media Spend</span>
                                        </div>
                                        <div class="col-2 text-left">
                                            <span>Status</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 py-2 line-animation"
                                 v-for="(source, sourceIndex) in sources" v-if="sources.length > 0" style="cursor: default" :key="sourceIndex">

                                <div class="pr-0 px-3 d-flex justify-content-between content-line row" style="min-height: 50px; cursor: pointer;">

                                    <div class="col-lg-11 col-md-12 col-sm-12 d-flex main-line-content" @click="showHidden($event, source.id)">
                                        <div class=" col-sm-2 my-auto user-profile p-0 d-flex align-items-center">
                                            <div class="checkbox my-auto mr-4">
                                                <template v-if="source.logo !== null">
                                                    <img :src="source.logo" alt="" width="30">
                                                </template>
                                                <template v-else>
                                                    <img src="{{ asset('Dashboard/img/backup.jpg') }}" width="30" alt=""/>
                                                </template>
                                            </div>
                                            <div>
                                                <span class="font-600 mr-2 my-auto d-block text-capitalize">
                                                    <% source.name %>
                                                </span>
                                            </div>
                                            <span class="chips chips_green new-job-chips my-auto mr-2 d-none"></span>
                                        </div>
                                        <div class="col-sm-3 my-auto job-title d-flex justify-content-between text-center">
                                            <a class="rounded-2 link-modal-job mx-auto">
                                                <% source.applies %>
                                            </a>
                                        </div>

                                        <div class="col-sm-2 my-auto source-cost text-center">
                                            <span><% (source.applies > 0) ? (source.spend / source.applies).toFixed(2) : 0 %>€</span>
                                        </div>

                                        <div class="col-sm-3 my-auto apply-scoring text-center">
                                            <span><% (source.spend).toFixed(2) %> €</span>
                                        </div>
                                        <div class="col-3 col-xl-2 my-auto d-flex align-items-center justify-content-between sourceConnected">
                                            <div>
                                                <div>
                                                    <i class="far fa-link d-none d-xl-inline" v-if="source.status === 1 || source.name === 'Golden Bees'"></i>
                                                    <span class="small chips_green px-2 border-rounded-50 ml-1" v-if="source.status === 1 || source.name === 'Golden Bees'">&nbsp;spend&nbsp;connected</span>
                                                    <i class="far fa-unlink d-none d-xl-inline" v-if="source.status === 0 && source.name !== 'Golden Bees'"></i>
                                                    <span class="small ml-1 chips_red px-2 border-rounded-50" v-if="source.status === 0 && source.name !== 'Golden Bees'">&nbsp;spend&nbsp;disconnected</span>
                                                </div>
                                                <div>
                                                    <i class="far fa-link d-none d-xl-inline" v-if="source.applies > 0 || source.name === 'Golden Bees'"></i>
                                                    <span class="small chips_green px-2 border-rounded-50 ml-1" v-if="source.applies > 0 || source.name === 'Golden Bees'">&nbsp;applies&nbsp;connected</span>
                                                    <i class="far fa-unlink d-none d-xl-inline" v-if="source.applies === 0 && source.name !== 'Golden Bees'"></i>
                                                    <span class="small ml-1 chips_red px-2 border-rounded-50" v-if="source.applies === 0 && source.name !== 'Golden Bees'">&nbsp;applies&nbsp;disconnected</span>
                                                </div>
                                            </div>
                                            <span class="showSourceApiLastData" @click="showReceivedDataFromApi(source)">
                                                <i data-tippy-content="show last received data for API" class="far fa-eye"></i>
                                            </span>
                                        </div>
                                        <div class="col-sm-1 position-relative align-self-center pl-0 d-none d-xl-block">
{#                                        <div class="d-flex position-absolute"#}
{#                                             style="min-width: 100px; top: 50%; transform: translate(-50%, -50%)">#}
{#                                           <span class="span-icon" @click="showHidden(source.id)">#}
{#                                                <i class="fal fa-pencil"></i>#}
{#                                            </span>#}
{#                                        </div>#}

                                            <span class="badge badge-job" style="margin-left: -15px;"></span>
{#                                            <div class="slider-icon-group position-absolute" @click="showHidden(source.id)">#}
                                            <div class="slider-icon-group position-absolute" >
                                                <div class="slider-icon">
                                                    <i class="far fa-angle-down"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-5" style="display: none;"
                                     :id="source.id">
                                    <div class="col-sm-12 row mt-3">

                                        <div class="col-md-8 col-xl-7 pl-xl-4" style="border-right: 0.5px dashed #e4e4e4">

                                            <div class="d-flex mb-4">
                                                <div class="col-md-7 col-sm-12">
                                                    <span class="mb-2 d-block font-600"><i
                                                                class="fal fa-clock mr-2"></i>Period</span>
                                                </div>
                                                <div class="col-md-4 col-sm-12 px-0">
                                                    <span class="mb-2 d-block font-600"><i
                                                                class="fal fa-badge-percent mr-2"></i> Media Spend</span>

                                                </div>
                                                <div class="col-md-1 col-sm-12 px-0">
                                                </div>
                                            </div>
                                            <template v-if="source.spendRows.length > 8 ">
                                                <div v-for="n in Math.ceil(source.spendRows.length / 8)"
                                                     :id="'block-' + n"
                                                     :style="n !== pageCurrentSpend ? { 'display': 'none' } : '' ">
                                                    <template v-for="(spend, index) in source.spendRows"
                                                              v-if="(index >= ((n -1) * 8)) && (index < (n * 8))">

                                                        <div class="d-flex py-2 bg-light chips_purple mb-1" :id="'spend-' + spend.spendId"
                                                             :style="source.status === 1 ? {'background-color': '#f1f1f1 !important','color': '#c3c3c3 !important'} : '' ">
                                                            <div class="px-2">
                                                                <div v-if="formatDate(Date.now()) < spend.end"
                                                                     style="margin-top: 5px;">
                                                                    <i class="fad fa-scrubber"
                                                                       style="color: #60FF62; font-size: 10px;"></i>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-5 col-sm-12 pl-0">

                                                                <div class="my-auto">
                                                                    <ul class="list-unstyled mb-0">
                                                                        <li class="mb-1 d-flex pl-0">
                                                                            <div class="pl-0 span-text-icon">From <span
                                                                                        class="ml-2 font-400"><% spend.start %></span>
                                                                            </div>
                                                                            <div class="ml-2 span-text-icon">To <span
                                                                                        class="ml-2 font-400"><% spend.end %></span>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                    <small class="font-italic font-600 text-capitalize text-info text-monospace small d-block text-center">
                                                                        <% spend.interval %> days
                                                                    </small>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 px-0 d-block my-auto text-center">
                                                                <div v-for="label in spend.labels">
                                                                   <span :style="{'background': hexToRgba(label.color, 0.2), 'color': label.color}"
                                                                         class="px-2 mr-2 mb-2 rounded-30 small font-600"
                                                                         style="padding-bottom: 1px; padding-top: 1px;">
                                                                       <% label.name %>
                                                                   </span>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 col-sm-12 px-0 my-auto">
{#                                                                <div class="px-2 chips_purple">#}
{#                                                                    <div class="cover">#}
{#                                                                        <span class="px-2 py-1 ml-2 font-500 chips_purple"><% spend.amount.toFixed(2) %> €</span>#}
{#                                                                    </div>#}
{#                                                                </div>#}
                                                                <span class="px-2 py-1 ml-2 font-500 chips_purple"><% spend.amount.toFixed(2) %>&nbsp;€</span>
                                                            </div>
                                                            <div class="col-md-3 col-sm-12 text-right my-auto pr-4">
                                                                <span class="span-icon opacity-06"
                                                                     @click="showComment('spend-comment-' + spend.spendId)"
                                                                     v-if="spend.comment" style="cursor: pointer">
                                                                  <i class="fal fa-comments"></i>
                                                                </span>
                                                                <span class="span-icon opacity-06"
                                                                      @click="modifySpend(spend, sourceIndex)"
                                                                      style="cursor: pointer">
                                                                    <i class="fal fa-pencil"></i>
                                                                </span>
                                                                <span class="span-icon opacity-06 text-danger"
                                                                      @click="confirmDeleteSpend(spend)"
                                                                      v-if="source.name !== 'Golden Bees' && !spend.api"
                                                                      style="cursor: pointer">
                                                                    <i class="fal fa-trash-alt"></i>
                                                                </span>
                                                                <span class="span-icon opacity-06 text-success" v-else title="spend pushed through API">
                                                                    <i class="fal fa-link"></i>
                                                                </span>

                                                                <div class="modal fade"
                                                                     :id="'spend-comment-' + spend.spendId"
                                                                     tabindex="-1" role="dialog"
                                                                     aria-labelledby="comment" aria-hidden="true">
                                                                    <div class="modal-dialog bg-light rounded-2 animate-bottom">
                                                                        <div class="modal-content" style="color: #4F6DAC;">
                                                                            <div class="modal-header py-4 border-0 bg-light">
                                                                                <h4 class="modal-title px-3 border-0">
                                                                                    {# <i class="far fa-comment mr-2"></i> #}
                                                                                    <i class="fal fa-comments"></i>
                                                                                    <span>Comment</span>
                                                                                </h4>
                                                                                <div class="slider-icon mr-3 cursor-pointer"
                                                                                     @click="closeCommentModal('spend-comment-' + spend.spendId)">
                                                                                    <i class="far fa-times fa-1x"
                                                                                       aria-hidden="true"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="modal-body justify-content-center p-5 d-flex pb-0 flex-column">
                                                                                <div class="col-md-12 d-flex">
                                                                                 <span class="d-block mb-4">
                                                                                  <% spend.comment %>
                                                                                </span>
                                                                                </div>
                                                                            </div>
                                                                            <div class="modal-footer border-0">
                                                                                <button class="btn btn-light"
                                                                                        @click="closeCommentModal('spend-comment-' + spend.spendId)">
                                                                                    Close
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <template v-for="(spend, index) in source.spendRows">
                                                    <div class="d-flex py-2 bg-light chips_purple mb-1"
                                                         :id="'spend-' + spend.spendId"
                                                         :style="source.status === 1 ? {'background-color': '#f1f1f1 !important','color': '#c3c3c3 !important'} : '' ">

                                                        <div class="px-2">
                                                            <div v-if="formatDate(Date.now()) < spend.end"
                                                                 style="margin-top: 5px;">
                                                                <i class="fad fa-scrubber"
                                                                   style="color: #60FF62; font-size: 10px;"></i>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-5 col-sm-12 pl-0">
                                                            <div class="my-auto">
                                                                <ul class="list-unstyled mb-0">
                                                                    <li class="d-flex pl-0">
                                                                        <div class="pl-0 span-text-icon">From <span
                                                                                    class="ml-2 font-400"><% spend.start %></span>
                                                                        </div>
                                                                        <div class="ml-2 span-text-icon">To <span
                                                                                    class="ml-2 font-400"><% spend.end %></span>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                                <small class="font-italic font-600 text-capitalize text-info text-monospace small d-block text-center">
                                                                    <% spend.interval %> days
                                                                </small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 px-0 d-block my-auto text-center">
                                                            <span v-for="label in spend.labels" :style="{'background': hexToRgba(label.color, 0.2), 'color': label.color}"
                                                                  class="px-2 mr-2 mb-2 rounded-30 small font-600"
                                                                  style="padding-bottom: 1px; padding-top: 1px;">
                                                               <% label.name %>
                                                           </span>
                                                        </div>
                                                        <div class="col-md-2 col-sm-12 px-0 my-auto">
                                                            <span class="px-2 py-1 ml-2 font-500 chips_purple"><% spend.amount.toFixed(2) %> €</span>
                                                        </div>
                                                        <div class="col-md-3 col-sm-12 text-right my-auto pr-4">
                                                            <span class="span-icon opacity-06" @click="showComment('spend-comment-' + spend.spendId)" v-if="spend.comment" style="cursor: pointer">
                                                                <i class="fal fa-comments"></i>
                                                            </span>
                                                            <span class="span-icon opacity-06" @click="modifySpend(spend, sourceIndex)" style="cursor: pointer">
                                                                <i class="fal fa-pencil"></i>
                                                            </span>
                                                            <span class="span-icon opacity-06 text-danger"
                                                                  @click="confirmDeleteSpend(spend)"
                                                                  style="cursor: pointer"
                                                                  v-if="source.name !== 'Golden Bees' && !spend.api">
                                                                <i class="fal fa-trash-alt"></i>
                                                            </span>
                                                            <span class="span-icon opacity-06 text-success" v-else title="spend pushed through API">
                                                                <i class="fal fa-link"></i>
                                                            </span>

                                                            <div class="modal fade" :id="'spend-comment-' + spend.spendId" tabindex="-1"
                                                                 role="dialog" aria-labelledby="comment" aria-hidden="true">
                                                                <div class="modal-dialog bg-light rounded-2 animate-bottom">
                                                                    <div class="modal-content" style="color: #4F6DAC;">
                                                                        <div class="modal-header py-4 border-0 bg-light">
                                                                            <h4 class="modal-title px-3 border-0">
                                                                                <i class="fal fa-comments"></i>
                                                                                <span>Comment</span>
                                                                            </h4>
                                                                            <div class="slider-icon mr-3 cursor-pointer" @click="closeCommentModal('spend-comment-' + spend.spendId)">
                                                                                <i class="far fa-times fa-1x"
                                                                                   aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-body justify-content-center p-5 d-flex pb-0 flex-column">
                                                                            <div class="col-md-12 d-flex">
                                                                             <span class="d-block mb-4">
                                                                              <% spend.comment %>
                                                                            </span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer border-0">
                                                                            <button class="btn btn-light" @click="closeCommentModal('spend-comment-' + spend.spendId)">
                                                                                Close
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                            </template>

                                            <div class="spend-pagination col-12 text-center mt-4"
                                                 v-if="source.spendRows.length > 8">
                                               <span class="span-icon mr-2 span-text-icon span-icon font-700 chips_purple"
                                                     style="padding: 6px 11px; cursor: pointer;"
                                                     @click="switchPageArrow('back', source)">
                                                   <i class="fa fa-angle-left"></i>
                                               </span>

                                                <template v-for="n in Math.ceil(source.spendRows.length / 8)">
                                                    <span class="span-icon mr-2 span-text-icon span-icon font-700"
                                                          style="padding: 6px 10px; cursor: pointer;" @click="switchPage(n)"
                                                          :class="(n === pageCurrentSpend) ? 'chips_green' : ''"><% n %></span>
                                                </template>

                                                <span class="span-icon mr-2 span-text-icon span-icon font-700 chips_purple"
                                                      style="padding: 6px 11px; cursor: pointer;"
                                                      @click="switchPageArrow('next', source)">
                                                    <i class="fa fa-angle-right"></i>
                                               </span>
                                            </div>

                                            <div class="py-2 mt-3 text-center">
                                                <div v-if="source.showSpendForm"
                                                     class="p-5 rounded-2 text-left badge col-md-7 col-sm-10 mx-auto"
                                                     :id="'listSpendForm-' + source.id"
                                                     style="display: none; box-shadow: -1px 3px 10px 0px rgba(21, 63, 237, 0.18) !important;">

                                                    <div class="loader" style="left: 41%; display: none;"></div>

                                                    <span class="span-icon position-absolute bg-white"
                                                          style="cursor: pointer; top: -10px; right: -10px; box-shadow: rgba(21, 63, 237, 0.18) -1px 3px 10px 0px;"
                                                          @click="closeModalSpend(sourceIndex)">
                                                       <i class="fa fa-times" style="font-weight: 300 !important;"></i>
                                                    </span>
                                                    <span class="font-500 d-block mx-auto mt-4 mb-3" v-if="!source.api">
                                                        <i class="fal fa-calendar-day mr-3 opacity-06"></i> Select the period
                                                    </span>

                                                    <div class="form-group" v-if="!source.api">
                                                        <v-date-picker :model-config="modelConfig" v-model="source.selectedDate" locale="en" is-range is-expanded/>
                                                    </div>

                                                    <div class="form-group" v-if="(source.isCampaignLinked && source.api) || (!source.isCampaignLinked && !source.api)">
                                                        <label for="mediaSpend" class="font-500"><i
                                                                    class="fal fa-coins mr-3 opacity-06"></i>Media Spend
                                                            <i class="font-weight-light">(.euro / €)</i></label>
                                                        <input type="number" class="form-control" id="mediaSpend"
                                                               placeholder="Enter the spend" v-model.number="source.media">
                                                    </div>

                                                    <div class="form-group mt-5">
                                                        <label for="" class="font-500">Labels</label>
                                                        {# <input type="text" class="form-control" name="planet"> #}
                                                        <span class="small chips_purple ml-3 p-1 text-underline" @click="addLabelClick()" style="cursor: pointer">
                                                           add a label
                                                           <i>(<% source.labelCounter - 1 %>)</i>
                                                       </span>
                                                    </div>
                                                    <div class="tags-bag row pb-4 px-4">
                                                        <div v-if="source.selectedLabels.length > 0"
                                                             v-for="label in source.selectedLabels">
                                                           <span :style="{'background': hexToRgba(label.color, 0.2) , 'color': label.color}"
                                                                 class="px-2 mr-2 mb-2 rounded-30 d-block small font-600"
                                                                 style="padding-bottom: 1px; padding-top: 1px;">
                                                               <% label.name %>
                                                                    <i class="fal fa-times ml-1" style="cursor: pointer" v-if="label.type != 'campaign'"
                                                                       @click="removeLabel(label.name, label.color, label.id, sourceIndex, $event)"></i>
                                                           </span>
                                                        </div>
                                                        <div v-else>
                                                            <small>
                                                                No label selectionned
                                                            </small>
                                                        </div>
                                                    </div>
                                                    <div class="dropdown-menu dropdown-source-label p-4"
                                                         style="cursor: auto !important;">
                                                        <div class="small-loader" style="display: none;"></div>
                                                        <div class="p-4 position-relative row tags-span-list"
                                                             v-if="labels.length > 0">
                                                           <span v-for="tag in labels.filter(label => label.type !== 'campaign')" v-if="!(source.selectedLabelsId.includes(tag.id))"
                                                                 :style="{'background': hexToRgba(tag.color, 0.25), 'color': tag.color}"
                                                                 class="px-2 mr-2 mb-1 rounded-30 d-inline span-tag cursor-pointer"
                                                                 style="padding-bottom: 5px; padding-top: 5px;"
                                                                 @click="selectionLabel(tag.name, tag.color, tag.id, sourceIndex, $event)"
                                                                 :class="source.selectedLabels.length >= source.labelCounter ? 'selectionned' : '' ">
                                                                <% tag.name %>
                                                               <i class="fal fa-times ml-1"></i>
                                                            </span>
                                                        </div>
                                                        <div v-else>
                                                            <span class="small d-block text-center mb-5 mt-3 text-info">No tag created</span>
                                                        </div>
                                                        <hr class="my-3">
                                                        <span class="small text-underline text-right d-block cursor-pointer"
                                                              @click="showLabelCreateWrapper(source.id + 'newLabel')">create a new label</span>

                                                        <div :id="source.id + 'newLabel'" style="display: none;">
                                                            <div class="form-group row mt-4">
                                                                <label for="titleLabel" class="col-sm-2 col-form-label">Title</label>
                                                                <div class="col-sm-10">
                                                                    <input type="text" class="form-control"
                                                                           v-model="label" placeholder="...">
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="colorLabel" class="col-sm-2 col-form-label">Color</label>
                                                                <div class="col-sm-10 my-auto">
                                                                   <span class="span-color-label mr-1"
                                                                         @click="getColor('#FF5733', '1' )"
                                                                         style="background-color: #FF5733;"
                                                                         :class="'span-color' + '1'">
                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#33FFBE', '2' )"
                                                                          style="background-color: #33FFBE;"
                                                                          :class="'span-color' + '2'">
                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label  mr-1"
                                                                          @click="getColor('#FF6078', '3' )"
                                                                          style="background-color: #FF6078;"
                                                                          :class="'span-color' + '3'">
                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#3386FF', '4' )"
                                                                          style="background-color: #3386FF;"
                                                                          :class="'span-color' + '4'">
                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#60FF62', '5' )"
                                                                          style="background-color: #60FF62;"
                                                                          :class="'span-color' + '5'">
                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#FF3393', '6' )"
                                                                          style="background-color: #FF3393;"
                                                                          :class="'span-color' + '6'">
                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#A660FF', '7' )"
                                                                          style="background-color: #A660FF;"
                                                                          :class="'span-color' + '7'">
                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                    <span class="span-color-label mr-1"
                                                                          @click="getColor('#FFC060', '8' )"
                                                                          style="background-color: #FFC060;"
                                                                          :class="'span-color' + '8'">
                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"
                                                                           style="font-weight: 400 !important;"></i>
                                                                   </span>
                                                                </div>
                                                            </div>

                                                            <button id="create-label"
                                                                    class="btn chips_green px-5 rounded-30 d-block mx-auto mt-5"
                                                                    @click="createLabel(label, source.id)">create
                                                            </button>
                                                        </div>

                                                    </div>


                                                    <div class="form-group">
                                                        <label for="comment" class="font-500">Comments</label>
                                                        <textarea name="comments" id="comment" rows="3"
                                                                  class="form-control"
                                                                  v-model="source.spendComment"></textarea>
                                                    </div>

                                                    <button class="btn font-700 chips_green px-5 rounded-30 d-block mx-auto mt-5"
                                                            id="add-register" style="cursor: pointer"
                                                            @click="registerPeriod(source.id)">
                                                        register
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="col-12 d-block mb-4 mt-5 text-center" v-if="source.idSource !== 1">
                                                <span class="chips_green border border-success mt-2 px-4 py-2 rounded-30 font-500" :id="'spendForm' + source.id" @click="addSpendFormCall(sourceIndex)" style="cursor: pointer">
                                                    add spend
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xl-5 pl-xl-4">
                                            <div class="position-relative mt-4 d-flex flex-column" v-if="source.token">
                                                <div class="col-md-12 mx-auto">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="small">API KEY</span>
                                                        <div class="d-block text-right cursor-pointer mb-2 api-copy" @click="apiCopy(source)">
                                                            <span class="chips_purple position-relative small font-400 bg-white ">copy</span>
                                                            <span class="span-icon ml-2 chips_purple" style="padding: 5px 9px;">
                                                                <i class="fad fa-copy position-static"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="py-2 px-3 chips_purple font-600 d-flex justify-content-between" :id="'apiKeyForm_' + source.id">
                                                        <span style="word-break: break-all; font-weight: 300; font-size: .9rem; color: rgba(80, 140, 193, .77);"><% source.token %></span>
{#                                                        <i class="fal fa-lock-alt"></i>#}
                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-xl-8 mt-5 mx-auto">
                                                    <div class="info p-5 chips_purple bg-white"
                                                         style="box-shadow: -1px 3px 10px 0px rgba(21, 63, 237, 0.18) !important; border-radius: 10px;">
                                                        <div class="mb-3 d-block">
                                                            <img src="{{ asset('Dashboard/img/bulle_info.png') }}"
                                                                 alt="goldenbees" class="mx-auto d-block" width="150"/>
                                                        </div>
                                                        <span class="d-block mb-4">
                                                            You will find the appropriate documentation to build a connexion with the Golden Bees REST API services with the following link
                                                       </span>
                                                        <a href="https://app.swaggerhub.com/apis-docs/goldenbees/GoldenApi/1" target="_blank"
                                                           class="text-underline text-black-50 text-center d-block m-auto" style="width: fit-content;">Documentation</a>
                                                    </div>
                                                </div>

                                                <div class="mt-3" v-if="source.custom && source.status === 0" @click="confirmDeleteSource(source)" style="cursor: pointer">
                                                    <div>
                                                        <span class="span-icon opacity-06 text-danger">
                                                            <i class="fal fa-trash-alt"></i>
                                                        </span>
                                                         <span class="text-underline">Remove this source</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white d-flex flex-column align-items-center justify-content-around py-5" v-if="sources.length === 1">

                        <img src="{{ asset('Ats/img/undraw_completed_tasks.png') }}" alt="" width="196" height="165" class="mb-5">

                        <p class="text-secondary">Vous n'avez pas encore ajouté vos sources.</p>

                        <button title="add a new source"
                                type="button"
                                class="btn btn-primary rounded-30 d-block px-4 py-2 mt-5 mx-auto"
                                :disabled="loading"
                                @click="showModalOnboarding">
                            <span class="h6">add a new source</span>
                            <i class="ml-3 far fa-angle-right"></i>
                        </button>

                    </div>

                    <button title="add a new source"
                            type="button"
                            class="btn btn-primary rounded-30 d-block px-4 py-2 mt-5 mx-auto"
                            :disabled="loading"
                            @click="showModalOnboarding"
                            v-if="sources.length > 1">
                        <span class="h6">add a new source</span>
                        <i class="ml-3 far fa-angle-right"></i>
                    </button>

                </div>

                <div id="page-overview-roi" data-target="#panel-2" class="panel-roi-body invisible">
                    <div class="loader d-none"></div>
                    <div class="col-12 main-data-table px-0">
                        <div class="main-data-table-content mb-4 p-2" style="background: rgba(255,255,255,.53);">
                            <div class="simple-data-table d-flex flex-column px-0 col-md-12 col-lg-12 col-sm-12">
                                <div class="table-headers px-3 py-4 rounded-2 bg-white">
                                    <div class="col-md-12 col-sm-12 row justify-content-between d-flex">
                                        <div class="col-md-4 text-left">
                                            <div id="select-date" class="">
                                                <div class="date d-flex">
                                                    <div class="ml-0">
                                                        <div class="date-option">
                                                            <div id="select-date" class="">
                                                                <div class="date d-flex">
                                                                    <div class="ml-3">
                                                                        <div class="date-option"
                                                                             @click="openSelectPeriodDate()">
                                                                            <span class="chips cursor-pointer chips_bordered"
                                                                                  id="select-date-option">
                                                                                <span :id="'modal-date-text-'"
                                                                                      class="text-primary"
                                                                                      style="color: #2A3550 !important;">
                                                                                    <% periods[selectedPeriod] %>
                                                                                </span>
                                                                                <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                                            </span>
                                                                        </div>
                                                                        <ul class="dropdown-select-menu list-unstyled rounded-2"
                                                                            style="display: none; margin-top: 10px;max-width: 250px;"
                                                                            id="dropdown-date">
                                                                            <li v-for="(period, key) in periods"
                                                                                class="date-option-item border-0 text-primary period-item"
                                                                                @click="changeLineChartPeriod('stats', key, $event)"
                                                                                :class="selectedPeriod === key ? 'text-success clicked chips_green': 'text-primary' ">
                                                                                <% period %>
                                                                                <i class="fal fa-check mr-4 d-none float-right"></i>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="ml-3">
                                                        <div class="category-option" @click="openSelectCategory()">
                                                            <span class="chips cursor-pointer chips_bordered"
                                                                  id="select-date-option">
                                                                <span v-if="selectedCategory !== null">
                                                                 <% categories[selectedCategory].domain %>
                                                                </span>
                                                                <span v-else>
                                                                 Select a category (default : All)
                                                                </span>
                                                                <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                            </span>
                                                        </div>


                                                        <ul class="dropdown-select-menu list-unstyled rounded-2"
                                                            style="display: none; margin-top: 10px;max-width: 250px;"
                                                            id="dropdown-category">
                                                            <li v-for="(category, key) in categories"
                                                                class="date-option-item border-0 category-item"
                                                                @click="changeLineChartCategory('stats', key, $event)"
                                                                :class="selectedCategory === key ? 'text-success clicked chips_green': 'text-primary' ">
                                                                <% category.domain %>
                                                                <i class="fal fa-check mr-4 d-none float-right"></i>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 text-right">
                                            <div id="select-labels-chart">
                                                <div class="date">
                                                    <div class="ml-0">
                                                        <div class="date-option">
                                                              <span class="chips cursor-pointer chips_bordered"
                                                                    id="select-date-option" @click="openSelectLabels()">
                                                                  <span :id="'modal-date-text-'" class="text-primary"
                                                                        style="color: #2A3550 !important;">
                                                                        select labels
                                                                  </span>
                                                                  <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                              </span>
                                                        </div>
                                                        <div class="dropdown-select-menu row rounded-2 ml-auto position-absolute bg-white w-100 p-4"
                                                             style="display: none; margin-top: 10px; z-index: 99; box-shadow: -1px 3px 10px 0px rgba(21, 63, 237, 0.18);"
                                                             id="dropdown-labels">
                                                            <div class="small-loader" style="display: none;"></div>
                                                            <div class="date-option-item border-0 text-primary labels-item px-4 py-3 text-left col-md-12">
                                                                <template v-if="labels.length > 0">
                                                                    <span :style="{'background': hexToRgba(tag.color, 0.1), 'color': tag.color}"
                                                                          class="px-2 mr-2 mb-2 rounded-30 small font-600 tag-roi d-inline-flex cursor-pointer"
                                                                          style="padding-bottom: 1px; padding-top: 1px;" v-for="tag in labels" @click="selectRoiLabel(tag.color, tag.id, $event)">
                                                                        <% tag.name %>
                                                                        <i class="fal fa-check ml-1 d-none my-auto" style="font-size: 10px; pointer-events: none !important;"></i>
                                                                    </span>
                                                                </template>
                                                                <template v-else>
                                                                    <span class="text-center">No labels available</span>
                                                                </template>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 rounded-2 bg-white mt-2 py-2 line-animation">
                                <div class="col-12 pt-3 row pr-0 pb-3">
                                    <div class="col-sm-6">
                                        TOTAL APPLIES
                                    </div>
                                    <div class="col-sm-6 text-right">
                                        <span class="text-underline d-none">export <i
                                                    class="fa fa-external-link text-primary small"></i></span>
                                    </div>
                                </div>
                                <div class="col-12 position-relative">
                                    <line-chart-roi advertiser-id="{{ advertiser.id }}"
                                                    chart-label="appliesStats"></line-chart-roi>
                                    {# <line-chart chart-label="stats" type="forms" advertiser-id="155"></line-chart> #}
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="title-page col-12 text-left px-0 d-flex my-2 pt-4 pb-2">
                        <div class="col-md-6 px-0 d-flex">
                            <span class="mr-2"><b>Average By</b></span>
                            <div class="ml-3">
                                <span class="chips text-primary px-3 py-2 cursor-pointer position-relative"
                                      style="margin-right: -35px;"
                                      :class="roiQualifApply === false ? 'bg-white pointer-events-none' : 'chips_purple' "
                                      @click="roiQualifApply = !roiQualifApply">Application</span>
                                <span class="mr-3 chips text-primary px-3 py-2 cursor-pointer pl-5"
                                      :class="roiQualifApply === false ? 'chips_purple' : 'bg-white pointer-events-none' "
                                      @click="roiQualifApply = !roiQualifApply">Qualified applications</span>
                            </div>
                        </div>
                        <div class="col-md-6 px-0 text-right">

                            <span class="mr-2"><b>Source</b></span>
                            <span class="chips status-form bg-white text-primary px-3 py-2 panel-roi cursor-pointer"
                                  @click="selectRoiSource()">
                                <span v-if="getNewAverage === true">
                                    <template v-for="(sourceSelected, n) in average.slice(0, 3)"> <i class="pr-1"><% sourceSelected.name %> </i></template>
                                </span>
                                <span v-else>
                                   Default sources
                                </span>
                                <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                            </span>
                            <ul class="dropdown-menu p-4 rounded-2" id="dropdown_roi"
                                style="right: 0; min-width: 40%; left: unset;">
                                <li v-for="source in dataAverage" class="cursor-pointer li-source-roi "
                                    @click="selectionSourceRoi(source, $event)">
                                    <% source.name %>
                                    <i class="fal fa-check mr-4 d-none float-right"></i>
                                </li>
                            </ul>

                        </div>
                    </div>

                    <div class="section-chart-overview-all-1 col-lg-12 col-md-12 col-sm-12 d-flex px-0 mb-4">
                        <div class="col-md-12 col-sm-12 col-lg-6 card-chart card chart-line1 border-0 rounded-2 d-flex p-4"
                             style="max-height: 300px;">
                            <div class="card-chart-header">
                                <div class="titles d-flex justify-content-between mb-2">
                                    <span>CPA</span>
                                </div>
                            </div>
                            <line-chart-simple advertiser-id="{{ advertiser.id }}"
                                               chart-label="cpaStats"></line-chart-simple>
                        </div>


                        <div class="col-md-12 col-sm-12 col-lg-6 px-lg-0 chart-donut-1">
                            <div class="card-chart card border-0 ml-lg-2 mx-md-0 rounded-2 p-4 d-flex justify-content-between flex-column"
                                 style="max-height: 300px;">
                                <div class="card-chart-header col-md-3">
                                    <div class="titles d-flex justify-content-between mb-2">
                                        <span>Average CPA</span>
                                    </div>
                                </div>
                                <div class="row p-0 m-0">
                                    <div class="small-loader" style="display: none;"></div>
                                    <template>
                                        <div class="col-lg-4" v-for="(cpa, n) in average.slice(0, 3)">
                                            <div class="card-chart-header pb-4 text-center">
                                                <span class="small">
                                                    <i class="fad fa-scrubber mr-1" style="font-size: 9px;"
                                                       :style="{color: colorsAverage[n] }"></i><% cpa.name  %>
                                                </span>
                                            </div>
                                            <div class="chart-content-circle mx-auto"
                                                 style="width: 100px; height: 100px; border-radius: 50%; border: 4px solid;"
                                                 :style="{borderColor: colorsAverage[n]}">
                                                <span style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px;"
                                                      class="font-700">
                                                    <% (Math.floor(cpa.cpa * 100) / 100).toFixed(2) %>€
                                                </span>
                                            </div>
                                            <div class="card-chart-bottom d-flex justify-content-between px-4">
                                                <span>Total <br><small>Applications</small></span>
                                                <span class="my-auto"><b><% cpa.applies%></b></span>
                                            </div>
                                        </div>
                                    </template>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="add_new_source" tabindex="-1" role="dialog" aria-labelledby="addNewSource"
                     aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered rounded-2 animate-bottom" role="document">
                        <div class="modal-content bg-light">
                            <div class="modal-header py-4 border-0 bg-light">
                                <h4 class="modal-title px-3 border-0">
                                    <i class="far fa-share-alt mr-2"></i>
                                    <span>Add a new source</span>
                                </h4>
                                <div class="slider-icon mr-3 cursor-pointer" @click="closeModal('addSource')">
                                    <i class="far fa-times fa-1x" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="modal-body justify-content-center px-5 pt-5 d-flex pb-0 flex-column">
                                <div class="col-md-12 d-flex">
                                    <div class="col-md-12">
                                        <div class="login">

                                            <div class="" id="source-name" style="display: none">
                                                <span class="font-300">Source : </span>
                                                <span class="font-700"><% selected %></span>
                                            </div>

                                            <div class="form-label-group position-relative input-login"
                                                 id="input-source">
                                                <label for="name" class="labelInput">{{ 'name source'|trans }}</label>
                                                <input type="text" id="username" name="_namesource" class="form-control"
                                                       placeholder="{{ 'Name Source'|trans }}" v-model="selected"
                                                       @focus="showListSource" autocomplete="off"
                                                       @input="inputSourceHandler" required>
                                                <i class="fal fa-angle-down"></i>
                                            </div>

                                            <ul class="dropdown-select list-unstyled py-4 px-3 rounded-2 bg-white"
                                                id="select-source" style="display: none">

                                                <li class="text-right bg-transparent py-0 cursor-pointer"
                                                    @click="closeList" style="background: none !important;"><i
                                                            class="fa fa-times position-relative fa-1x font-weight-light top right"></i>
                                                </li>
                                                <li v-for="source in sourceNotSelected" class="mb-2 cursor-pointer d-flex align-items-center"
                                                    @click="fillValue(source.id, source.name)" style="height: 45px">

                                                    <img v-if="source.logo !== 'NULL'" :src="source.logo" :alt="source.name + ' logo'" width="30" class="my-auto mr-3">
                                                    <img v-else src="{{ asset('Dashboard/img/backup.jpg') }}" :alt="source.name + ' logo'" width="30" class="my-auto mr-3">

                                                    <% source.name %>
                                                </li>
                                                {# <li class="position-relative"> #}
                                                {# <input type="search" id="search" name="_password" class="form-control badge-job" placeholder="{{'Search'|trans}}" required> #}
                                                {# <i class="fal fa-search" style="top: 38%;"></i> #}
                                                {# </li> #}
                                            </ul>

                                            <div v-if="idNewSourceAdded" class="form-label-group position-relative input-login mt-5"
                                                 id="api-key-post" style="display: none;">
                                                <div class="d-flex mb-2 justify-content-between">
                                                    <span class="small">API KEY</span>
                                                    <div class="d-block text-right cursor-pointer" @click="apiCopy(newSource)">
                                                        <span class="chips_purple position-relative small font-400 bg-white ">copy</span>
                                                        <span class="span-icon ml-2 chips_purple" style="padding: 5px 9px;">
                                                            <i class="fad fa-copy position-static"></i>
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="d-flex">
                                                    {# <input type="text" id="inputPassword" name="_password" class="form-control" placeholder="{{'Api Token'|trans}}" required :value="newSource.token" disabled> #}
                                                    {# <textarea type="text" id="inputPassword" name="_password" rows="4" class="form-control small" placeholder="{{'Api Token'|trans}}" required :value="newSource.token" disabled style="font-size: .9rem; color: rgba(17,31,60, 0.6)"> #}
                                                    {# </textarea> #}

                                                    <span style="font-size: .9rem; color: rgba(108,141,210, 0.6); word-break: break-all"
                                                          class="chips_purple py-2 px-3" :id="'apiKeyForm_' + newSource.id">
                                                        <% newSource.token %>
                                                    </span>
                                                </div>

                                                <div class="info p-4 chips_purple bg-white mt-4"
                                                     style="box-shadow: -1px 3px 10px 0px rgba(21, 63, 237, 0.18) !important; border-radius: 10px;">
                                                    <div class="mb-3 d-block text-center py-3">
                                                        <i class="fad fa-info-circle fa-3x position-relative"
                                                           style="right: unset; font-size: 3em;"></i>
                                                    </div>
                                                    <span class="d-block mb-4">
                                                        You will find the appropriate documentation to build a connexion with the Golden Bees REST API services with the following link
                                                    </span>
                                                    <a href="https://app.swaggerhub.com/apis-docs/goldenbees/GoldenApi/1"
                                                       class="text-underline text-black-50 text-center m-auto" style="width: fit-content;">Documentation</a>
                                                </div>

{#                                                <div class="col-md-12 mt-3 px-0 ">#}
{#                                                    <span class="chips text-underline cursor-pointer" @click="addSpend">add a spend</span>#}
{#                                                </div>#}
                                            </div>

                                        </div>
{#                                        <div v-if="idNewSourceAdded" class="" id="listSpend" style="display: none">#}

{#                                            <span class="font-500 d-block mx-auto mt-4 mb-3">Select the period </span>#}

{#                                            <div class="form-group">#}
{#                                                <v-date-picker :model-config="modelConfig" v-model="newSource.selectedDate" locale="en" is-range is-expanded/>#}
{#                                            </div>#}

{#                                            <div class="form-group">#}
{#                                                <label for="mediaSpend" class="font-500">Media Spend <i#}
{#                                                            class="font-weight-light">(.euro / €)</i></label>#}
{#                                                <input type="number" class="form-control" id="mediaSpend"#}
{#                                                       placeholder="Enter the spend" v-model.number="newSource.media">#}
{#                                            </div>#}

{#                                            <div class="form-group mt-5">#}
{#                                                <label for="" class="font-500">Add a label</label>#}
{#                                                <input type="text" class="form-control" name="planet">#}
{#                                            </div>#}
{#                                            <div class="form-group mt-5">#}
{#                                                <label for="" class="font-500">Labels</label>#}
{#                                                #}{# <input type="text" class="form-control" name="planet"> #}
{#                                                <span class="small chips_purple ml-3 p-1 text-underline" @click="addLabelClick()" style="cursor: pointer">#}
{#                                                           add a label#}
{#                                                           <i>(<% newSource.labelCounter - 1 %>)</i>#}
{#                                                       </span>#}
{#                                            </div>#}
{#                                            <div class="tags-bag row pb-4 px-4">#}
{#                                                <div v-if="newSource.labels.length > 0"#}
{#                                                     v-for="label in newSource.selectedLabels">#}
{#                                                           <span :style="{'background': hexToRgba(label.color, 0.2) , 'color': label.color}"#}
{#                                                                 class="px-2 mr-2 mb-2 rounded-30 d-block small font-600"#}
{#                                                                 style="padding-bottom: 1px; padding-top: 1px;">#}
{#                                                               <% label.name %>#}
{#                                                                    <i class="fal fa-times ml-1" style="cursor: pointer"#}
{#                                                                       @click="removeLabel(label.name, label.color, label.id, newSourceIndex, $event)"></i>#}
{#                                                           </span>#}
{#                                                </div>#}
{#                                                <div v-else>#}
{#                                                    <small>#}
{#                                                        No label selectionned#}
{#                                                    </small>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <div class="dropdown-menu dropdown-source-label p-4"#}
{#                                                 style="cursor: auto !important;">#}
{#                                                <div class="small-loader" style="display: none;"></div>#}
{#                                                <div class="p-4 position-relative row tags-span-list"#}
{#                                                     v-if="newSource.labels.length > 0">#}
{#                                                    <template v-for="tag in newSource.labels" v-if="!(newSource.selectedLabelsId.includes(tag.id))">#}
{#                                                               <span :style="{'background': hexToRgba(tag.color, 0.25), 'color': tag.color}"#}
{#                                                                     class="px-2 mr-2 mb-1 rounded-30 d-inline span-tag cursor-pointer"#}
{#                                                                     style="padding-bottom: 5px; padding-top: 5px;"#}
{#                                                                     @click="selectionLabel(tag.name, tag.color, tag.id, newSourceIndex, $event)"#}
{#                                                                     :class="newSource.selectedLabels.length >= newSource.labelCounter ? 'selectionned' : '' ">#}
{#                                                                    <% tag.name %>#}
{#                                                                   <i class="fal fa-times ml-1"></i>#}
{#                                                                </span>#}
{#                                                    </template>#}
{#                                                </div>#}
{#                                                <div v-else>#}
{#                                                    <span class="small d-block text-center mb-5 mt-3 text-info">No tag created</span>#}
{#                                                </div>#}
{#                                                <hr class="my-3">#}
{#                                                <span class="small text-underline text-right d-block cursor-pointer"#}
{#                                                      @click="showLabelCreateWrapper(newSource.id + 'newLabel')">create a new label</span>#}

{#                                                <div :id="newSource.id + 'newLabel'" style="display: none;">#}
{#                                                    <div class="form-group row mt-4">#}
{#                                                        <label for="titleLabel" class="col-sm-2 col-form-label">Title</label>#}
{#                                                        <div class="col-sm-10">#}
{#                                                            <input type="text" class="form-control"#}
{#                                                                   v-model="label" placeholder="...">#}
{#                                                        </div>#}
{#                                                    </div>#}
{#                                                    <div class="form-group row">#}
{#                                                        <label for="colorLabel" class="col-sm-2 col-form-label">Color</label>#}
{#                                                        <div class="col-sm-10 my-auto">#}
{#                                                                   <span class="span-color-label mr-1"#}
{#                                                                         @click="getColor('#FF5733', '1' )"#}
{#                                                                         style="background-color: #FF5733;"#}
{#                                                                         :class="'span-color' + '1'">#}
{#                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#33FFBE', '2' )"#}
{#                                                                  style="background-color: #33FFBE;"#}
{#                                                                  :class="'span-color' + '2'">#}
{#                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label  mr-1"#}
{#                                                                  @click="getColor('#FF6078', '3' )"#}
{#                                                                  style="background-color: #FF6078;"#}
{#                                                                  :class="'span-color' + '3'">#}
{#                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#3386FF', '4' )"#}
{#                                                                  style="background-color: #3386FF;"#}
{#                                                                  :class="'span-color' + '4'">#}
{#                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#60FF62', '5' )"#}
{#                                                                  style="background-color: #60FF62;"#}
{#                                                                  :class="'span-color' + '5'">#}
{#                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#FF3393', '6' )"#}
{#                                                                  style="background-color: #FF3393;"#}
{#                                                                  :class="'span-color' + '6'">#}
{#                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#A660FF', '7' )"#}
{#                                                                  style="background-color: #A660FF;"#}
{#                                                                  :class="'span-color' + '7'">#}
{#                                                                        <i class="fa fa-check text-white mt-1 d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                            <span class="span-color-label mr-1"#}
{#                                                                  @click="getColor('#FFC060', '8' )"#}
{#                                                                  style="background-color: #FFC060;"#}
{#                                                                  :class="'span-color' + '8'">#}
{#                                                                        <i class="fa fa-check text-white mt-1  d-none mx-auto"#}
{#                                                                           style="font-weight: 400 !important;"></i>#}
{#                                                                   </span>#}
{#                                                        </div>#}
{#                                                    </div>#}

{#                                                    <button id="create-label"#}
{#                                                            class="btn chips_green px-5 rounded-30 d-block mx-auto mt-5"#}
{#                                                            @click="createLabel(label, newSource.id)">create#}
{#                                                    </button>#}
{#                                                </div>#}
{#                                            </div>#}

{#                                            <div class="form-group mt-5">#}
{#                                                <label for="" class="font-500">Comments</label>#}
{#                                                <textarea name="comments" id="comment" rows="3" class="form-control"#}
{#                                                          v-model="newSource.spendComment"></textarea>#}
{#                                            </div>#}

{#                                            <button class="btn font-700 chips_green px-5 rounded-30 d-block mx-auto mt-5"#}
{#                                                    id="add-register"#}
{#                                                    @click="registerPeriod(newSource.id); registerSource()">register#}
{#                                            </button>#}
{#                                        </div>#}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 text-center mx-auto mt-5">
                                <button class="btn font-700 chips_purple px-5 rounded-30" id="add-button"
                                        @click="addSource()"
                                        :style="[newSourceFilled ? {'display': 'initial'} : {'display': 'none'} ]">ADD
                                </button>
                            </div>
                            <div class="modal-footer border-0 d-flex justify-content-around px-5 pb-5">
                                <button class="btn font-700 chips_purple px-5 rounded-30" id="register-source"
                                        @click="registerSource" style="display: none;">Close
                                </button>
                                <button class="btn btn-light ml-auto" @click="closeModal('addSource')" id="close-modal-source">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="confirm_delete_spend" role="dialog" aria-hidden="true">
                    <div class="modal-dialog bg-light rounded-2 animate-bottom">
                        <div class="modal-content">
                            <div class="modal-header py-4 border-0 bg-light">
                                <h4 class="modal-title px-3 border-0">
                                    <i class="far fa-share-alt mr-2"></i>
                                    <span>Confirm delete spend</span>
                                </h4>
                                <div class="slider-icon mr-3 cursor-pointer" @click="closeModal('deleteSpend')">
                                    <i class="far fa-times fa-1x" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="modal-body justify-content-center px-5 py-5 d-flex pb-0 flex-column">
                                <div class="col-md-12 d-flex">
                                    <div class="col-md-12">
                                        <h5 class="text-center">Do you really want to delete this spend ?</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-0 d-flex justify-content-around px-5 pb-5">
                                <button class="btn btn-danger" @click="deleteSpend(true)">Delete</button>
                                <button class="btn btn-light" @click="deleteSpend(false)">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="confirm_delete_source" role="dialog" aria-hidden="true">
                    <div class="modal-dialog bg-light rounded-2 animate-bottom">
                        <div class="modal-content">
                            <div class="modal-header py-4 border-0 bg-light">
                                <h4 class="modal-title px-3 border-0">
                                    <i class="far fa-share-alt mr-2"></i>
                                    <span>Confirm delete source</span>
                                </h4>
                                <div class="slider-icon mr-3 cursor-pointer" @click="closeModal('deleteSource')">
                                    <i class="far fa-times fa-1x" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="modal-body justify-content-center px-5 py-5 d-flex pb-0 flex-column">
                                <div class="col-md-12 d-flex">
                                    <div class="col-md-12">
                                        <h5 class="text-center">Do you really want to delete this source ?</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-0 d-flex justify-content-around px-5 pb-5">
                                <button class="btn btn-danger" @click="deleteSource(true)">Delete</button>
                                <button class="btn btn-light" @click="deleteSource(false)">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="last_received_spend_applies" role="dialog" aria-hidden="true">
                    <div class="modal-dialog bg-light rounded-2 animate-bottom modal-lg">
                        <div class="modal-content">
                            <div class="modal-header py-4 border-0 bg-light">
                                <h4 class="modal-title px-3 border-0">
                                    <i class="far fa-share-alt mr-2"></i>
                                    <span>Last entries received from API</span>
                                </h4>
                                <div class="slider-icon mr-3 cursor-pointer" @click="closeModal('lastReceivedData')">
                                    <i class="far fa-times fa-1x" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="modal-body px-5 py-5 pb-0">
                                <div>
                                    <h5 class="mb-4">Last spend received</h5>

                                    <div class="row my-2 py-2 bg-light" v-if="sourceLastReceivedSpend.length > 0" v-for="(spend, index) in sourceLastReceivedSpend" :key="index">
                                        <div class="col-4">
                                            Received date : <span class="chips_purple p-1"><% spend.createdAt %></span>
                                        </div>
                                        <div class="col-3">
                                            Amount : <span class="chips_purple p-1"><% spend.amount.toFixed(2) %></span>
                                        </div>
                                        <div class="col-5">
                                            Date : <span class="chips_purple p-1">From <% spend.start %> to <% spend.end %></span>
                                        </div>
                                    </div>

                                    <span class="small ml-1 chips_red px-2 border-rounded-50" v-if="sourceLastReceivedSpend.length === 0">
                                        No spend received yet
                                    </span>
                                </div>
                                <div class="mt-5">
                                    <h5 class="mb-4">Last applies received</h5>

                                    <div class="row my-2 py-2 bg-light" v-if="sourceLastReceivedApplies.length > 0" v-for="(apply, index) in sourceLastReceivedApplies" :key="index">
                                        <div class="col-4">
                                            Received date : <span class="chips_purple p-2"><% apply.tdate %></span>
                                        </div>
                                        <div class="col-8">
                                            Job title : <span class="chips_purple p-2"><% apply.name %></span>
                                        </div>
                                    </div>

                                    <span class="small ml-1 chips_red px-2 border-rounded-50"v-if="sourceLastReceivedApplies.length === 0">
                                        No applies received yet
                                    </span>
                                </div>
                            </div>
                            <div class="modal-footer border-0 d-flex justify-content-around px-5 pb-5">
                                <button class="btn btn-light" @click="closeModal('lastReceivedData')">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="onboarding_modal" class="modal fade" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered rounded-2 animate-bottom modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header py-4 border-0 justify-content-end">
                                <div class="slider-icon mr-3 cursor-pointer" @click="closeModal('onBoardingModal')">
                                    <i class="far fa-times fa-1x" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="modal-body px-5 mx-5">
                                <h5 class="text-center">Comment cela se passe ?</h5>
                                <div class="row my-5">
                                    <div class="col-12 col-lg-3 d-flex flex-column justify-content-between align-items-center">
                                        <p>
                                            En ajoutant une nouvelle source, une clé api est générée. Il vous suffit
                                            alors de partager cette clé ainsi que la doc API goldenbees avec la source
                                            pour lui permettre de se connecter.
                                        </p>
                                        <img src="{{ asset('Ats/img/undraw_Reviewed_docs.png') }}" alt="" width="186" height="103">
                                    </div>
                                    <div class="d-none d-lg-flex align-items-center justify-content-center col-md-1">
                                        <i class="far fa-long-arrow-alt-right fa-3x text-primary"></i>
                                    </div>
                                    <div class="col-12 col-lg-4 d-flex flex-column justify-content-between align-items-center">
                                        <p>Une fois la connexion établit, la source peut envoyer ses dépenses et les candidatures reçues <br>
                                            (remarque : si la source n'est pas en mesure de fournir les dépenses, vous pouvez les saisir manuellement)
                                        </p>
                                        <span class="chips_green py-1 pl-2 pr-3 border-rounded-50 ml-1 text-white bg-success">
                                            <i class="far fa-link text-white"></i>&nbsp;connected
                                        </span>
                                        <img src="{{ asset('Ats/img/undraw_split_testing.png') }}" alt="" width="149" height="128">
                                    </div>
                                    <div class="d-none d-lg-flex align-items-center justify-content-center col-md-1">
                                        <i class="far fa-long-arrow-alt-right fa-3x text-primary"></i>
                                    </div>
                                    <div class="col-12 col-lg-3 d-flex flex-column justify-content-between align-items-center">
                                        <p>Et vous pouvez dès lors explorer et comparer les différentes sources.</p>
                                        <img src="{{ asset('Ats/img/ats.png') }}" alt="" width="151" height="117">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-0 px-5 pb-5">
                                <button class="btn btn-success col-1" @click="showModalNewSource(true)">next</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="onboarding_panel_steps" class="bg-white rounded-2 animate-bottom position-fixed shadow-lg pb-5 roiOnboardingPanel"
                     v-show="showOnboardingStepPanel">
                    <div class="modal-header py-4 border-0 justify-content-end">
                        <div class="slider-icon mr-3 cursor-pointer" @click="closeOnboardingPanelStep">
                            <i class="far fa-times fa-1x" aria-hidden="true"></i>
                        </div>
                    </div>

                    <img class="d-none d-xl-block" src="{{ asset('Ats/img/undraw_fill_form.png') }}" alt="" width="326" height="197">

                    <h4 class="text-center my-5">Following those steps</h4>

                    <div class="container pb-3 pl-4 pr-2 d-flex d-xl-block">
                        <div class="row align-items-center">
                            <span :class="[!onBoardingSteps.first ? 'text-primary' : 'text-secondary', 'col-2 d-block font-weight-bold text-right']"
                                  style="font-size: 4rem;">1</span>
                            <p :class="[!onBoardingSteps.first ? 'h5 text-primary' : 'text-secondary', 'col-8 pt-2']"
                               style="transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;">
                                Step 1.<br>
                                Fill the name of the source.
                            </p>
                            <div v-show="onBoardingSteps.first" class="col-2 animate-bottom">
                                <span class="rounded-circle d-block bg-success text-center" style="height: 25px; width: 25px">
                                    <i class="far fa-check fa-sm text-white" style="vertical-align: text-bottom"></i>
                                </span>
                            </div>

                        </div>

                        <div class="d-flex flex-column justify-content-center align-items-center my-4">
                            <span class="rounded-circle p-1 bg-primary m-1"></span>
                            <span class="rounded-circle p-1 bg-secondary m-1"></span>
                            <span class="rounded-circle p-1 bg-secondary opacity-06 m-1"></span>
                        </div>

                        <div class="row align-items-center">

                            <span :class="[onBoardingSteps.first && !onBoardingSteps.second ? 'text-primary' : 'text-secondary',
                                           onBoardingSteps.first && onBoardingSteps.second ? 'text-secondary' : '',
                                           'col-2 d-block font-weight-bold text-right']"
                                  style="font-size: 4rem;">2</span>

                            <p :class="[onBoardingSteps.first && !onBoardingSteps.second ? 'h5 text-primary' : 'text-secondary',
                                    onBoardingSteps.first && onBoardingSteps.second ? 'text-secondary' : '', 'col-8 pt-2']"
                               style="transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;">
                                Step 2. <br>
                                Copy the apikey generated <br>
                                into ...
                            </p>

                            <div v-show="onBoardingSteps.second" class="col-2 animate-bottom">
                                <span class="rounded-circle d-block bg-success text-center" style="height: 25px; width: 25px">
                                    <i class="far fa-check fa-sm text-white" style="vertical-align: text-bottom"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/easypiechart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/suggestags@1.16.0/js/jquery.amsify.suggestags.min.js"></script>
    <script src='https://unpkg.com/v-calendar'></script>
    <script type="text/javascript">

        let vs;

        $(document).ready(function () {
            eventHub.$emit('roiBarChartUpdate', {label: "stats", period: "last30days", category: "insurance"});

            $('#select-date-option, .date-option-item').on('click', function () {
                $('#dropdown-date').fadeToggle("d-none");
            });

            if ($("#panel-2").hasClass('active')) {
                $("#btn_new_source").removeClass("d-none");
            } else {
                $("#btn_new_source").addClass("d-none");
            }

            if ($("#panel-1").hasClass('active')) {

                $("#panel-1").addClass("bg-white").removeClass("chips_purple text-primary");

            } else {
                $("#panel-1").addClass("chips_purple text-primary").removeClass("bg-white");
            }

            $(".login input").focus(function () {
                $("label.labelInput").removeClass("focusInput");
                $("input").removeClass("no-placeholder");
                if ($(this).siblings().find("label.labelInput")) {
                    $(this).siblings().addClass("focusInput");
                    $(this).addClass("no-placeholder");
                }
            });

            Vue.use(VueToast);

            if (window.CSS.registerProperty instanceof Function) {
                window.CSS.registerProperty({
                    name: "--p",
                    syntax: "<integer>",
                    initialValue: 0,
                    inherits: true
                });
            }

            $('#chart-donut-first').easyPieChart({
                barColor: '#D4008D',
                trackColor: '#e6e9eb',
                scaleColor: false,
                lineCap: 'round', // butt, round and square
                lineWidth: 5,
                trackWidth: 5,
                size: 80, //180
                rotate: 0,
                animate: 1000,
                easing: 'easeOutBounce',
                scaleLength: true,
            });

            vs = new Vue({
                el: '#source-app',
                delimiters: ['<%', '%>'],
                data: {
                    dataAverage: {},
                    colorsAverage: ["#D4008D", "#FFC929", "#5289FF"],
                    average: [],
                    tmpAverage: [],
                    getNewAverage: false,
                    loading: false,
                    selected: "",
                    idSourceSelected: -1,
                    spendMedia: 0,
                    media: 0,
                    spendComment: "",
                    spendPeriod: "",
                    dateStart: '',
                    dateEnd: '',
                    selectedDate: {
                        start: new Date(),
                        end: new Date()
                    },
                    pagesSpend: 0,
                    pageCurrentSpend: 1,
                    counterSelectedSource: 0,
                    api: "",
                    name: "",
                    dateTo: "",
                    dateFrom: "",
                    label: "",
                    color: "",
                    labelSelected: {
                        id: "",
                        name: "",
                        color: ""
                    },
                    labelCounter: 3,
                    labels: [],
                    labelsId: [],
                    labelClicked: {
                        id: ""
                    },
                    tmpSpend: {},
                    sources: [],
                    tagList: [],
                    tagsRoiSelected: [],
                    advertiser: {{ app.request.get('id') }},
                    availableSources: [],
                    errors: [],
                    selectedPeriod: "last7days",
                    roiQualifApply: false,
                    selectedCategory: 0,
                    periods: {
                        "today": "Today",
                        "yesterday": "Yesterday",
                        "last7days": "Last 7 days",
                        "last30days": "Last 30 days",
                        "thismonth": "This month",
                        "lastmonth": "Last month",
                        "thisquarter": "This quarter",
                        "lastquarter": "Last quarter",
                        "thisyear": "This Year",
                        "lastyear": "Last Year"
                    },
                    categories: [{
                        id: 0, domain: "All"
                    }],
                    appliesChart: [],
                    cpaChart: [],
                    modelConfig: {
                        type: 'string',
                        mask: 'YYYY-MM-DD',
                    },
                    idNewSourceAdded: false,
                    isRowSpendModified: false,
                    isSourcesModified: false,
                    spendRowToDelete: null,
                    sourceToDelete: null,
                    sourceToShowReceivedData: null,
                    showOnboardingStepPanel: false,
                    onBoardingSteps: {
                        first: false,
                        second: false
                    }
                },
                async created() {
                    $(".loader").fadeIn(900);

                    await this.getSources()
                    this.getJobCategoriesFromApplies()
                    this.getData()
                    this.getAvailableSource()
                },
                async mounted() {
                    // set event to modal
                    $("#add_new_source").on("hidden.bs.modal", () => {
                        this.closeModal('addSource')
                    })
                    $("#confirm_delete_spend").on("hidden.bs.modal", () => {
                        this.closeModal('deleteSpend')
                    })
                    $("#confirm_delete_source").on("hidden.bs.modal", () => {
                        this.closeModal('deleteSource')
                    })
                    $("#last_received_spend_applies").on("hidden.bs.modal", () => {
                        this.closeModal('lastReceivedData')
                    })
                },
                methods: {
                    setDataForSources() {
                        const sourcesClientExtraData = {
                            selectedDate: {start: new Date(), end: new Date()},
                            spendComment: '',
                            media: 0,
                            showSpendForm: false,
                            spendIdToModify: undefined,
                            selectedLabels: [],
                            selectedLabelsId: [],
                            labelCounter: this.labelCounter,
                            api: false
                        }

                        this.sources = this.sources.map(el => {
                            return Object.assign({}, el, sourcesClientExtraData)
                        })
                    },
                    updateChart() {
                        eventHub.$emit('lineChartRoi', {
                            label: "stats",
                            period: this.selectedPeriod,
                            category: this.selectedCategory,
                            tags: this.tagsRoiSelected
                        });
                        eventHub.$emit('lineChartUpdate', {label: "stats", period: this.selectedPeriod});
                        eventHub.$emit('camembertChartUpdate', {label: "stats", period: "all"});
                        eventHub.$emit('lineChartSimpleUpdate', {
                            label: "stats",
                            cpaChart: this.cpaChart,
                            roiQualifApply: this.roiQualifApply
                        });
                        eventHub.$emit('roiBarChartUpdate', {label: "stats", appliesChart: this.appliesChart});
                    },
                    getJobCategoriesFromApplies() {
                        let self = this;
                        $.ajax({
                            method: "POST",
                            url: "/ajax/ats/roi/applies/job_categories/list/" + {{ advertiser.id }},
                        }).done(function (response) {
                            if (response) {
                                self.categories = self.categories.concat(response.listAppliesJobCategories);
                            }
                        });
                    },
                    selectRoiLabel: function (color, id, event) {

                        $(".loader").fadeIn(900);
                        $('.small-loader').fadeIn(100);

                        if ($(event.target).hasClass("clicked")) {

                            let index = this.tagsRoiSelected.findIndex(function (item) {
                                return item === id;
                            });

                            if (index !== -1) {
                                this.tagsRoiSelected.splice(index, 1);
                            }

                            $(event.target).css({
                                'background': this.hexToRgba(color, 0.1),
                            });
                            $(event.target).removeClass('clicked');

                        } else {
                            $(event.target).addClass('clicked');
                            $(event.target).css({
                                'background': this.hexToRgba(color, 0.4),
                            });

                            this.tagsRoiSelected.push(id);
                        }

                        this.getData()
                    },
                    openSelectCategory: function () {
                        $("#dropdown-category").fadeToggle(100);
                    },
                    openSelectPeriodDate: function () {
                        $('#dropdown-date').fadeToggle(100);
                    },
                    openSelectLabels: function () {
                        $('#dropdown-labels').fadeToggle(100);
                    },
                    changeLineChartPeriod: function (label, period, event) {
                        if (this.selectedPeriod !== period) {
                            $(".loader").fadeIn(900);
                            $(".small-loader").fadeIn(100);

                            this.selectedPeriod = period;
                            this.getData();

                            $(".period-item").each(function () {
                                if ($(this).hasClass('clicked')) {
                                    $(this).removeClass('clicked chips_green text-success');
                                }
                            });

                            if (event !== null) {
                                if ($(event.target).hasClass('clicked')) {
                                    $(event.target).removeClass('clicked chips_green text-success');
                                } else {
                                    $(event.target).addClass("chips_green clicked text-success");
                                }
                            }
                        }
                        $('#dropdown-date').fadeOut(100);
                    },
                    changeLineChartCategory: function (label, category, event) {
                        $(".loader").fadeIn(900);
                        $(".small-loader").fadeIn(100);

                        this.selectedCategory = category;
                        this.getData();

                        $(".category-item").each(function () {
                            if ($(this).hasClass('clicked')) {
                                $(this).removeClass('clicked chips_green text-success');
                            }
                        });

                        if (event !== null) {
                            if ($(event.target).hasClass('clicked')) {
                                $(event.target).removeClass('clicked chips_green text-success');
                            } else {
                                $(event.target).addClass("chips_green clicked text-success");
                            }
                        }

                        $("#dropdown-category").fadeOut(100);
                    },
                    selectionSourceRoi: function (source, event) {

                        let self = this;

                        if (self.counterSelectedSource < 3) {

                            if ($(event.target).hasClass('clicked')) {
                                $(event.target).removeClass('clicked chips_green source-clicked');
                                self.counterSelectedSource--;

                                let index = self.tmpAverage.findIndex(function (item) {
                                    return item.id === source.id;
                                });

                                if (index !== -1) {
                                    self.tmpAverage.splice(index, 1);
                                }
                                self.getNewAverage = true;

                                if (self.tmpAverage.length === 0) {
                                    self.getNewAverage = false;
                                }

                            } else {
                                $(event.target).addClass("chips_green clicked source-clicked");
                                self.tmpAverage.push(source);
                                self.getNewAverage = true;
                                self.counterSelectedSource++;
                            }
                        } else {
                            if ($(event.target).hasClass('clicked')) {
                                $(event.target).removeClass('clicked chips_green source-clicked');
                                self.counterSelectedSource--;
                            }
                        }

                        if ($("li.source-clicked").length === 3) {

                            $(".li-source-roi").each(function () {
                                if (!$(this).hasClass('clicked')) {
                                    $(this).addClass('pointer-events-none text-black-50');
                                }
                            });
                            self.counterSelectedSource = 0;
                        } else {
                            $(".li-source-roi").each(function () {
                                if ($(this).hasClass('pointer-events-none')) {
                                    $(this).removeClass('pointer-events-none text-black-50');
                                }
                            });
                        }

                        // self.getUpdateAverage(source);
                        $(".small-loader").fadeIn(200);
                        self.average = self.dataAverage;

                        if (self.getNewAverage === true ) {
                            self.average = self.tmpAverage;
                        }
                        $(".small-loader").fadeOut(200);

                        // if (!($(event.target).hasClass('clicked'))) {
                        //     $(event.target).addClass("chips_green clicked");
                        // }
                    },
                    selectRoiSource: function () {
                        $("#dropdown_roi").fadeIn("100")
                    },
                    getData: async function () {
                        let self = this;
                        this.loading = true

                        $.ajax({
                            method: "POST",
                            url: "/ajax/ats/roi/overview/" + {{ advertiser.id }},
                            data: {
                                period: this.selectedPeriod,
                                category: this.categories[this.selectedCategory].id,
                                labels: this.tagsRoiSelected,
                                sources: this.sources.map(el => {
                                    return { id: el.id, name: el.name, color: el.color }
                                })
                            },
                        }).done(function (response) {
                            if (response) {
                                self.appliesChart = response.appliesChart
                                self.cpaChart = response.cpaChart
                                self.average = response.cpaData
                                self.dataAverage = response.cpaData
                                self.updateChart()
                            }
                            self.loading = false
                            $(".loader").fadeOut(100)
                            $('.small-loader').fadeOut(100)
                        })
                    },
                    getSources: function () {
                        $.ajax({
                            url: "{{ path('ajax_ats_roi_advertiser_sources', { 'advertiser': advertiser.id }) }}",
                            method: "GET",
                            data: {},
                            async: false
                        }).done((data) => {
                            this.sources = data.sources;
                            this.labels = data.labels;

                             // Add custom data fields for sources (needed for front logic)
                            this.setDataForSources();
                        })
                    },
                    showModalNewSource: function (isOnboarding) {
                        if (isOnboarding) {
                            $('#onboarding_modal').modal('hide')
                        }
                        this.idNewSourceAdded = false

                        if (this.availableSources.length === 0 || this.isSourcesModified) {
                            this.getAvailableSource().then(() => {
                                $('#input-source').fadeIn(100);
                                $('#add_new_source').modal('show');
                                this.showOnboardingStepPanel = isOnboarding
                            })
                        } else {
                            $('#input-source').fadeIn(100);
                            $('#add_new_source').modal('show');
                            this.showOnboardingStepPanel = isOnboarding
                        }
                    },
                    getAvailableSource(){
                        return new Promise(resolve => {
                            $.ajax({
                                url: "{{ path('ajax_ats_roi_sources_available', { 'advertiser': advertiser.id }) }}",
                                method: "GET",
                                data: {}
                            }).done(data => {
                                this.availableSources = data.sources;
                                resolve(true)
                            })
                        })
                    },
                    closeModalSpend: function (sourceIndex) {
                        $('#listSpendForm-' + this.sources[sourceIndex].id).slideToggle(300);
                        $('#spendForm' + this.sources[sourceIndex].id).fadeIn(300);
                        setTimeout(() => {
                            this.sources[sourceIndex].showSpendForm = false
                        }, 350)
                    },
                    addSpend: function () {
                        $(".login").addClass("animate__slideOutDown").fadeOut(100);
                        $("#register-source").fadeOut(300);
                        $("#listSpend").fadeIn(300);
                    },
                    confirmDeleteSpend(spendRow) {
                        this.spendRowToDelete = spendRow
                        $('#confirm_delete_spend').modal('show')
                    },
                    deleteSpend: function (action) {

                        if (action) {
                            let self = this;

                            $('.loader').fadeIn(400);

                            $.ajax({
                                url: "/ajax/ats/roi/spend/remove/" + this.advertiser,
                                method: "POST",
                                data: {
                                    id: this.spendRowToDelete.idSourceAdvertiser,
                                    spendRowId: this.spendRowToDelete.spendId,
                                }
                            }).done(function (data) {

                                if (data.success === true) {
                                    Vue.$toast.info("Spend removed successfully", {
                                        position: 'top',
                                        duration: 3000,
                                        dismissible: true,
                                    });
                                    self.getListSpend(self.spendRowToDelete.idSourceAdvertiser);
                                    self.isRowSpendModified = true
                                    $('#spend-' + self.spendRowToDelete.spendId).fadeOut(100);
                                }

                                self.spendRowToDelete = null
                                $(".loader").fadeOut(600);
                                $('#confirm_delete_spend').modal('hide')

                            });
                        } else {
                            $('#confirm_delete_spend').modal('hide')
                        }

                    },
                    async modifySpend(spend, sourceIndex) {

                        let spendFormOpened = false

                        // reset calendar if is showed
                        if (this.sources[sourceIndex].showSpendForm) {
                            this.sources[sourceIndex].showSpendForm = false
                            spendFormOpened = true
                            await this.$nextTick()
                        }

                        this.sources[sourceIndex].selectedDate.start = new Date(spend.start).toISOString();
                        this.sources[sourceIndex].selectedDate.end = new Date(spend.end).toISOString();

                        this.sources[sourceIndex].showSpendForm = true

                        $("#spendForm" + this.sources[sourceIndex].id).fadeIn(100);

                        let selectedLabels = [];
                        let selectedLabelsId = [];

                        spend.labels.forEach(function (sp) {
                            selectedLabels.push(JSON.parse(JSON.stringify(sp)));
                            selectedLabelsId.push(sp.id);
                        });

                        this.sources[sourceIndex].selectedLabels = selectedLabels;
                        this.sources[sourceIndex].selectedLabelsId = selectedLabelsId;
                        this.sources[sourceIndex].labelCounter = this.labelCounter - selectedLabels.length;

                        this.sources[sourceIndex].media = spend.media;
                        this.sources[sourceIndex].spendComment = spend.comment;
                        this.sources[sourceIndex].media = spend.amount;
                        this.sources[sourceIndex].spendIdToModify = spend.spendId
                        this.sources[sourceIndex].api = spend.api
                        this.sources[sourceIndex].isCampaignLinked = spend.isCampaignLinked

                        this.$nextTick(() => {
                            if (spendFormOpened) {
                                $("#listSpendForm-" + this.sources[sourceIndex].id).fadeIn(200);
                            } else {
                                $("#listSpendForm-" + this.sources[sourceIndex].id).slideDown(300);
                            }
                            $(".loader").fadeOut(100);
                        })
                    },
                    getSpendById: function (idSpend, idSource) {
                        let spend = {};

                        $.ajax({
                            url: "{{ path('ajax_ats_spend', { 'advertiser': advertiser.id }) }}",
                            method: "GET",
                            data: {
                                idSpend: idSpend,
                                idSource: idSource,
                            }
                        }).done(function (data) {
                            spend = data;
                        });
                    },
                    showLabelCreateWrapper: function (id) {

                        $("#" + id).fadeToggle(400);
                        this.labelSelected.id = '';
                        this.labelSelected.name = '';
                        this.labelSelected.color = '';

                    },
                    selectionLabel: function (name, color, id, sourceIndex, event) {
                        if (this.sources[sourceIndex].selectedLabels.length <= this.sources[sourceIndex].labelCounter) {
                            this.sources[sourceIndex].labelCounter--;
                            const newLabel = {id: id, name: name, color: color,};
                            this.sources[sourceIndex].selectedLabelsId.push(newLabel.id);
                            this.sources[sourceIndex].selectedLabels.push(newLabel);
                            this.deselectionningLabels();
                        }
                        // if (this.labels.length === 3) {
                        //     $("span.span-tag").each(function () {
                        //         if (! ($(this).hasClass("selectionned"))) {
                        //             $(this).css({
                        //                 "background": "rgba(162, 170, 181, .25)",
                        //                 "color": "rgb(183, 186, 189)",
                        //                 "pointer-events": "none"
                        //             });
                        //         }
                        //     });
                        // }
                    },
                    removeLabel: function (name, color, id, sourceIndex, event) {
                        this.labelSelected.id = "";
                        this.labelSelected.name = "";
                        this.labelSelected.color = "";
                        this.labelClicked.id = id;

                        let index = this.sources[sourceIndex].selectedLabels.findIndex(function (item) {
                            return item.id === id;
                        });

                        if (index !== -1) {
                            this.sources[sourceIndex].selectedLabels.splice(index, 1);
                        }

                        let labelSelectionned = this.sources[sourceIndex].selectedLabelsId.findIndex(function (item) {
                            return item === id;
                        });

                        if (labelSelectionned !== -1) {
                            this.sources[sourceIndex].selectedLabelsId.splice(labelSelectionned, 1);
                        }
                        this.sources[sourceIndex].labelCounter++;
                    },
                    deselectionningLabels: function () {
                        $(".selectionned").each(function () {
                            $(this).removeClass("selectionned");
                        });
                    },
                    createLabel: function (label, id) {

                        let self = this;

                        $('.small-loader').fadeIn(600);

                        $.ajax({
                            url: "/ajax/ats/roi/label/add/" + self.advertiser,
                            method: 'POST',
                            data: {
                                label: label,
                                color: self.color,
                            }
                        }).done(function (data) {

                            $('.small-loader').fadeOut(500);
                            if (data.success === true) {

                                self.getTagsList(id);
                                self.label = "";
                                self.color = "";
                                $("#" + id + "newLabel").fadeOut(100);

                                $('.span-color-label').each(function () {
                                    let elt = $(this).find('i');

                                    elt.removeClass('d-table').addClass('d-none');
                                });

                                Vue.$toast.success("label created !", {
                                    position: 'top',
                                    duration: 3000,
                                    dismissible: true,
                                });

                                // $("#" + id).fadeOut(400);
                                //  $('.dropdown-source-label').fadeOut(100);

                            } else if (data.error) {
                                Vue.$toast.error(data.error, {
                                    position: 'top',
                                    duration: 3000,
                                    dismissible: true,
                                });
                            }
                        });
                        $('.small-loader').fadeOut(500);
                    },
                    addLabelClick: function () {
                        $('.dropdown-source-label').fadeIn(100);
                    },
                    getColor: function (color, id) {

                        $('.span-color-label').each(function () {
                            let elt = $(this).find('i');

                            elt.removeClass('d-table').addClass('d-none');
                        });
                        let check = $('.span-color' + id).find("i");

                        if ($(check).hasClass('d-none')) {

                            $(check).removeClass('d-none').addClass('d-table');
                        } else {
                            $(check).removeClass('d-none').addClass('d-table');
                        }

                        this.color = color;

                        return this.color;
                    },
                    getTagsList: function () {

                        let self = this;

                        $('.small-loader').fadeIn(500);

                        $.ajax({
                            url: '/ajax/ats/roi/label/list/' + self.advertiser,
                            method: 'GET',
                            data: {}
                        }).done(function (data) {

                            if (data.success === true) {
                                self.labels = data.labelList;
                            }
                        });

                        $('.small-loader').fadeOut(400);
                    },
                    showComment: function (id) {
                        $('#' + id).addClass("d-block").removeClass("fade d-none");
                    },
                    closeCommentModal: function (id) {
                        $('#' + id).removeClass("d-block").addClass("fade d-none");
                    },
                    async addSpendFormCall(sourceIndex) {
                        let spendFormOpened = false

                        if (this.sources[sourceIndex].showSpendForm) {
                            spendFormOpened = true
                            this.sources[sourceIndex].showSpendForm = false
                            await this.$nextTick()
                        }

                        // Reset values
                        this.sources[sourceIndex].selectedLabels = [];
                        this.sources[sourceIndex].selectedLabelsId = [];
                        this.sources[sourceIndex].labelCounter = this.labelCounter;
                        this.sources[sourceIndex].media = 0
                        this.sources[sourceIndex].selectedDate = {end: null, start: null}
                        this.sources[sourceIndex].spendComment = ""
                        this.sources[sourceIndex].spendIdToModify = undefined
                        this.sources[sourceIndex].showSpendForm = true
                        this.sources[sourceIndex].api = false

                        this.$nextTick(() => {
                            if (spendFormOpened) {
                                $("#listSpendForm-" + this.sources[sourceIndex].id).fadeIn(300);
                            } else {
                                $("#listSpendForm-" + this.sources[sourceIndex].id).slideDown(300);
                            }
                            $("#spendForm" + this.sources[sourceIndex].id).fadeOut(300);
                        })
                    },
                    closeSpendFormCall: function (text, id) {
                        $("#" + text + id).fadeOut(300);
                    },
                    closeModal: function (modal) {
                        switch (modal) {
                            case 'addSource':
                                this.selected = ''

                                $("#username").fadeIn(100);
                                $("#api-key-post").fadeOut(100);
                                $("#source-name").fadeOut(100);
                                $("#listSpend").fadeOut(300);
                                $("#register-source").fadeOut(300);
                                $("#input-source").fadeIn(100);
                                $("#add_new_source").modal("hide");
                                this.closeOnboardingPanelStep()
                                break

                            case 'deleteSource':
                                this.sourceToDelete = null
                                $("#confirm_delete_source").modal("hide");
                                break

                            case 'deleteSpend':
                                this.spendRowToDelete = null
                                $("#confirm_delete_spend").modal("hide");
                                break
                            case 'lastReceivedData':
                                setTimeout(() => this.sourceToShowReceivedData = null, 200)
                                $("#last_received_spend_applies").modal("hide");
                                break

                            case 'onBoardingModal':
                                $('#onboarding_modal').modal('hide')
                                break
                        }
                    },
                    verifyPeriod (data) {
                        if (!(data.media > 0)) {
                            return 'The spend must be a positive value'
                        } else if (data.spendComment !== null && data.spendComment.length !== 0 && data.spendComment.length <= 2) {
                            return 'The comment length must be greater than 2 characters'
                        } else {
                            return ''
                        }
                    },
                    registerPeriod: function (sourceId) {

                        let self = this;

                        this.labelSelected.id = "";
                        this.labelSelected.name = "";
                        this.labelSelected.color = "";

                        const source = Object.values(this.sources).find(el => el.id === sourceId)
                        const url = source.spendIdToModify !== undefined ? '/ajax/ats/roi/spend/edit/' : '/ajax/ats/roi/spend/add/'
                        const id = source.spendIdToModify !== undefined ? source.spendIdToModify : sourceId

                        this.errors = [];
                        $('.loader').fadeIn(100);

                        const error = this.verifyPeriod(source)

                        if (error !== '') {
                            $('.loader').fadeOut(600);

                            Vue.$toast.error(error, {
                                position: 'top',
                                duration: 3000,
                                dismissible: true,
                            });
                            return false
                        }

                        $.ajax({
                            url: url + this.advertiser,
                            method: "POST",
                            data: {
                                id: id,
                                start: self.formatDate(source.selectedDate.start),
                                end: self.formatDate(source.selectedDate.end),
                                spend: source.media,
                                comment: source.spendComment,
                                labelsId: source.selectedLabelsId,
                            }
                        }).done(function (data) {

                            if (data.success === true) {
                                Vue.$toast.success("Spend added successfully", {
                                    position: 'top',
                                    duration: 3000,
                                    dismissible: true,
                                });
                                self.getListSpend(sourceId);
                                self.isRowSpendModified = true
                            } else {
                                if (data.error) {
                                    Vue.$toast.error(data.error, {
                                        position: 'top',
                                        duration: 3000,
                                        dismissible: true,
                                    });
                                    self.errors = self.errors.push(data.error);
                                } else {

                                    Vue.$toast.error("An error has encountered", {
                                        position: 'top',
                                        duration: 3000,
                                        dismissible: true,
                                    });
                                }
                            }

                        }).always(() => {
                            $('.loader').fadeOut(600);
                            this.closeSpendFormCall('listSpendForm-',sourceId)
                        });

                        $('#spendForm' + sourceId).fadeIn(300);
                    },
                    getListSpend: function (idSource) {
                        let self = this;

                        $.ajax({
                            url: "/ajax/ats/roi/spend/list/" + this.advertiser,
                            method: "GET",
                            data: {
                                id: idSource,
                            },
                        }).done(function (data) {
                            self.sources.forEach(function (source) {
                                if (source.id === idSource) {
                                    source.spendRows = data.spendList;
                                    source.spend = data.spend
                                }
                            })
                        })
                    },
                    registerSource: function () {
                        $(".login").removeClass("animate__slideOutDown").addClass("animate__slideInUp").fadeIn(100);
                        $("#listSpend").fadeOut(300);
                        this.closeModal();
                        $('.loader').fadeOut(100);
                    },
                    registerNewPeriod: function (text, id) {

                        $(".loader").fadeIn(100);

                        if (this.spendMedia === null || this.dateTo === null || this.dateFrom === null) {

                            $(".loader").fadeOut(600);
                            Vue.$toast.error('Please, fill those fields !', {
                                position: 'top',
                                duration: 3000,
                                dismissible: true,
                            });

                            return;
                        }

                        $("#" + text + id).fadeOut(300);
                        $("#spendForm" + id).fadeIn(300);

                        $("#spendLine").fadeIn(300);
                    },
                    closeList: function () {
                        $("#select-source").fadeOut(100);
                    },
                    activePanel: function (event) {

                        if (this.loading) {
                            $(".loader").fadeIn(100);
                        }

                        $(".panel-roi").removeClass('active');
                        $(".panel-roi-body").removeClass('active invisible');

                        if (!event.target.classList.contains('active')) {
                            event.target.classList.add('active');
                            let idPanel = "#" + event.target.id;

                            $('[data-target = ' + idPanel + ']').addClass('active');
                            $(".panel-roi-body").addClass('d-none');
                            if ($(`[data-target = ${idPanel}]`).hasClass('d-none')) {
                                $('[data-target = ' + idPanel + ']').removeClass('d-none');
                            }
                        }

                        if ($("#panel-2").hasClass('active')) {
                            $("#btn_new_source").removeClass("d-none");
                            $("#panel-2").addClass("bg-white").removeClass("chips_purple text-primary");
                        } else {
                            $("#btn_new_source").addClass("d-none");
                            $("#panel-2").addClass("chips_purple text-primary").removeClass("bg-white");
                        }

                        if ($("#panel-1").hasClass('active')) {
                            $("#panel-1").addClass("bg-white").removeClass("chips_purple text-primary");
                        } else {
                            $("#panel-1").addClass("chips_purple text-primary").removeClass("bg-white");
                        }

                        // reload data if spend is modified
                        if (this.isRowSpendModified || this.isSourcesModified) {
                            this.getData()
                            this.isSourcesModified = false
                            this.isRowSpendModified = false
                        }

                        $(".loader").fadeOut(700);

                        event.preventDefault();
                    },
                    fillmedia: function () {
                        $("#select-media-spend").fadeToggle(300);
                    },
                    apiCopy: function (source) {
                        let apiKeyForm = $("#apiKeyForm_" + source.id)

                        apiKeyForm.css("transform", "scale(1.05)").css("transition", "transform 0.2s ease-in-out");

                        window.setTimeout(function () {
                            apiKeyForm.css("transform", "scale(1)");
                        }, 200);

                        // Create and delete input element to do the copy clipboard process
                        let tmpInput = document.createElement('textarea')
                        tmpInput.value = source.token

                        // special case for modal new source (issue with Bootstrap modal)
                        if ($("#add_new_source").is(':visible')) {
                            $("#add_new_source").append(tmpInput)
                        } else {
                            document.body.appendChild(tmpInput)
                        }

                        tmpInput.select()
                        document.execCommand("copy");

                        if ($("#add_new_source").is(':visible')) {
                            $("#add_new_source").remove(tmpInput)
                        } else {
                            document.body.removeChild(tmpInput)
                        }

                        Vue.$toast.info('ApiKey copied', {
                            position: 'top',
                            duration: 3000,
                            dismissible: true,
                        });

                        if (source.id === this.idNewSourceAdded) {
                            this.onBoardingSteps.second = true
                        }
                    },
                    fillValue: function (id, name) {
                        this.selected = name;
                        this.idSourceSelected = id;
                        $("#select-source").fadeOut(100);

                        return this.idSourceSelected;
                    },
                    checkInputNewSource() {
                        // check first source name is in source not selected
                        this.sourceNotSelected.forEach(el => {
                            if (el.name.toLowerCase() === this.selected.toLowerCase()) {
                                this.idSourceSelected = el.id
                            }
                        })
                        // if source not found, check in source available to check if source custom source already exist
                        if (this.idSourceSelected === -1) {
                            this.availableSources.forEach(el => {
                                if (el.name.toLowerCase() === this.selected.toLowerCase()) {
                                    this.idSourceSelected = el.id
                                }
                            })
                        }
                    },
                    addSource: function () {
                        let self = this;

                        this.checkInputNewSource()

                        const customID = self.idSourceSelected === -1 ? 1 : 0;
                        const id = self.idSourceSelected !== -1 ? self.idSourceSelected : -1

                        $(`.loader`).fadeIn(200)

                        $.ajax({
                            url: "/ajax/ats/roi/source/add/" + this.advertiser,
                            method: "POST",
                            data: {
                                id: id,
                                name: self.selected,
                                custom: customID,
                            }
                        }).done(function (data) {

                            if (data.success) {
                                self.idNewSourceAdded = data.source.id
                                self.idSourceSelected = -1;
                                self.getSources();
                                self.isSourcesModified = true
                                self.onBoardingSteps.first = true

                                self.$nextTick(() => {
                                    $("#source-name").fadeIn(300);
                                    $("#add-spend").fadeIn(300);
                                    $("#register-source").fadeIn(300);
                                    $("#api-key-post").fadeIn(300);
                                    $("#add-button").fadeOut(200);
                                    $("#input-source").fadeOut(300);
                                    $(`#close-modal-source`).fadeOut(400);

                                    Vue.$toast.success('Source created', {
                                        position: 'top',
                                        duration: 4000,
                                        dismissible: true,
                                    });
                                })
                            } else {
                                Vue.$toast.error(data.error, {
                                    position: 'top',
                                    duration: 4000,
                                    dismissible: true,
                                });
                            }

                        }).always(function () {
                            $(".loader").fadeOut(100);
                        })
                    },
                    showHidden: function (ev, id) {
                        let path = ev.path || (ev.composedPath && ev.composedPath())

                        if (path && path.filter(el => el.classList !== undefined && el.classList.contains('showSourceApiLastData')).length === 0) {
                            $('#' + id).slideToggle(300)
                        }
                    },
                    showListSource: function () {
                        if (this.sourceNotSelected.length > 0) {
                            $("#select-source").fadeIn(300);
                        }
                    },
                    formatDate: function (date) {

                        var d = new Date(date),
                            month = '' + (d.getMonth() + 1),
                            day = '' + d.getDate(),
                            year = d.getFullYear();

                        if (month.length < 2)
                            month = '0' + month;
                        if (day.length < 2)
                            day = '0' + day;

                        return [year, month, day].join('-');
                    },
                    hexToRgba: function (hex, opacity) {

                        let c;
                        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
                            c = hex.substring(1).split('');
                            if (c.length == 3) {
                                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
                            }
                            c = '0x' + c.join('');
                            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
                        }
                        throw new Error('Bad Hex');

                    },
                    camelize: function (str) {
                        return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
                            return index === 0 ? word.toLowerCase() : word.toUpperCase();
                        }).replace(/\s+/g, '');
                    },
                    switchPage: function (n) {
                        this.pageCurrentSpend = n;
                        return this.pageCurrentSpend;
                    },
                    switchPageArrow(direction, source) {
                        if (direction === 'back' && this.pageCurrentSpend > 1) {
                            this.pageCurrentSpend -= 1
                        }

                        if (direction === 'next' && this.pageCurrentSpend < Math.ceil(source.spendRows.length / 8)) {
                            this.pageCurrentSpend += 1
                        }
                    },
                    inputSourceHandler() {
                        this.idSourceSelected = -1
                        $("#select-source").fadeOut(100);
                    },
                    confirmDeleteSource(source) {
                        if (source.custom && !source.active) {
                            this.sourceToDelete = source
                            $('#confirm_delete_source').modal('show')
                        }
                    },
                    deleteSource(action) {
                        if (action && this.sourceToDelete.custom && !this.sourceToDelete.active) {
                            $('.loader').fadeIn(400);

                            $.ajax({
                                url: "/ajax/ats/roi/source/delete/" + this.advertiser,
                                method: "POST",
                                data: {
                                    source: this.sourceToDelete,
                                }
                            }).done(resp => {

                                if (resp.success) {
                                    $('#' + this.sourceToDelete.id).slideToggle(300);

                                    const sourceIndexToRemove = this.sources.findIndex(el => el.id === this.sourceToDelete.id)
                                    this.$delete(this.sources, sourceIndexToRemove)
                                    this.isSourcesModified = true
                                    this.sourceToDelete = null

                                    Vue.$toast.success('Source removed', {
                                        position: 'top',
                                        duration: 4000,
                                        dismissible: true,
                                    });
                                    $('#confirm_delete_source').modal('hide')
                                } else {
                                    Vue.$toast.error(resp.error, {
                                        position: 'top',
                                        duration: 4000,
                                        dismissible: true,
                                    });
                                }

                                $('.loader').fadeOut(600);
                            })
                        } else {
                            this.sourceToDelete = null
                            $('#confirm_delete_source').modal('hide')
                        }
                    },
                    showReceivedDataFromApi(source) {
                        this.sourceToShowReceivedData = source
                        $('#last_received_spend_applies').modal('show');
                    },
                    showModalOnboarding() {
                        this.showOnboardingStepPanel = false
                        $('#onboarding_modal').modal('show');
                    },
                    closeOnboardingPanelStep() {
                        $('#onboarding_panel_steps').fadeOut(200)

                        setTimeout(() => {
                            this.showOnboardingStepPanel = false
                            this.onBoardingSteps = {first: false, second: false}
                        }, 300)
                    }
                },
                computed: {
                    newSource() {
                        return this.idNewSourceAdded ? this.sources.find(el => el.id === this.idNewSourceAdded) : {}
                    },
                    newSourceIndex() {
                        return this.idNewSourceAdded ? this.sources.findIndex(el => el.id === this.idNewSourceAdded) : 0
                    },
                    formattedSelectedDate: function () {
                        return {
                            start: (this.selectedDate !== "") ? this.formatDate(this.selectedDate.start) : null,
                            end: (this.selectedDate !== "") ? this.formatDate(this.selectedDate.end) : null
                        }
                    },
                    sourceNotSelected() {
                        return this.availableSources.filter(el => {
                            return this.sources.find(a => {
                                return a.idSource === el.id
                            }) === undefined
                        })
                    },
                    newSourceFilled: function () {
                        return this.selected.length > 2
                    },
                    sourceLastReceivedSpend() {
                        if (this.sourceToShowReceivedData !== null) {

                            let spendRows = this.sourceToShowReceivedData.spendRows.filter(el => {
                                return el.api && el.createdAt !== null
                            })

                            if (spendRows.length > 0) {
                                spendRows = spendRows.sort((a,b) => {
                                    return Date.parse(a.createdAt) - Date.parse(b.createdAt)
                                }).slice(0, 5)
                            }

                            return spendRows
                        } else {
                            return []
                        }
                    },
                    sourceLastReceivedApplies() {
                        if (this.sourceToShowReceivedData !== null) {
                            return this.sourceToShowReceivedData.lastApplies
                        } else {
                            return []
                        }
                    }
                },
                watch: {
                    roiQualifApply: function (newVal) {
                        eventHub.$emit('lineChartSimpleUpdate', {
                            label: "stats",
                            cpaChart: this.cpaChart,
                            roiQualifApply: newVal
                        });
                    }
                }
            });
        });
    </script>

{% endblock %}