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

{% block body %}
    <main class="row main mx-0">
        <section class="content-area p-r-l-8">
            <div id="appEdit" v-cloak>
                <div class="row">
                    <div class="col-md-8 col-sm-12 mx-auto">
                        <div class="py-3 d-flex mb-2 justify-content-between">
                            <div class="title my-auto">
                                <i class="fal fa-building mr-2"></i>
                                {% if is_granted('ROLE_BACKEND') %}
                                    <span class="font-700">{{ 'Advertiser edit'|trans }}</span>
                                {% else %}
                                    <span class="font-700">{{ 'Complete my profile'|trans }}</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="pb-4 mb-3 container-fluid rounded-2 px-0 page-header">
                            <div class="border-bottom position-relative d-flex nav nav-tabs">
                                <a :class="[activePanel === 'advertiser' ? 'active' : '', 'btn-tab nav-link']"
                                   id="advertiser-tab" @click="activePanel = 'advertiser'" href="#advertiser">
                                    {{ 'Advertiser'|trans }}
                                </a>
                                {% if is_granted('ROLE_BACKEND') %}
                                    <a :class="[activePanel === 'settings' ? 'active' : '', 'btn-tab nav-link']"
                                       id="settings-tab" @click="activePanel = 'settings'" href="#settings">
                                        {{ 'Settings'|trans }}
                                    </a>
                                    <a :class="[activePanel === 'datorama' ? 'active' : '', 'btn-tab nav-link']"
                                       id="datorama-tab" @click="activePanel = 'datorama'" href="#datorama">
                                        Datorama
                                    </a>
                                    {% if is_granted('ROLE_IT') %}
                                    <a :class="[activePanel === 'fees' ? 'active' : '', 'btn-tab nav-link']"
                                       id="datorama-tab" @click="activePanel = 'fees'" href="#fees">
                                        {{ 'External fees'|trans }}
                                    </a>
                                    {% endif %}
                                {% endif %}
                                {% if is_granted('ROLE_SAAS') or is_granted('ROLE_DAF') %}
                                    <a :class="[activePanel === 'mail' ? 'active' : '', 'btn-tab nav-link']"
                                       id="mail-tab" @click="activePanel = 'mail'" href="#mail">
                                        {{ 'Mail'|trans }}
                                    </a>
                                {% endif %}
                            </div>
                        </div>

                        <div class="d-block">
                            {% for message in app.flashes('success') %}
                                <div class="alert alert-success" role="alert">{{ message|trans }}</div>
                            {% endfor %}
                            {% for message in app.flashes('error') %}
                                <div class="alert alert-danger" role="alert">{{ message|trans }}</div>
                            {% endfor %}
                            {% if errors|length > 0 %}
                                <div class="alert alert-danger">
                                    {{ errors[0].message }}
                                </div>
                            {% endif %}
                        </div>

                        <form method="post" class="form form-advertiser bg-white rounded p-5 mb-3"
                              enctype="multipart/form-data" @keydown.enter.prevent="">
                            <div v-show="activePanel === 'advertiser'">
                                {% if not is_granted('ROLE_BACKEND') and advertiserPending.id is not null and advertiserPending.status == 'pending' %}
                                    <div class="alert alert-warning">{{ 'Your profile is waiting for validation'|trans }}</div>
                                {% endif %}
                                {% if advertiserPending.id is not null and advertiserPending.status == 'reported' %}
                                    <div class="alert alert-danger">
                                        {{ 'Your profile has some errors'|trans }} :
                                        <ul>
                                            {% for err in advertiserPending.errorInfo %}
                                                <li>
                                                    {{ err.field|trans }} :
                                                    {% if err.comment != "" %}
                                                        {{ err.comment }}
                                                    {% else %}
                                                        {{ err.reason|trans }}
                                                    {% endif %}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endif %}

                                <div class="row mb-3">
                                    <div class="form-label-group col-md">
                                        <label for="name" class="labelInput font-500">{{ 'Company name'|trans }}</label>

                                        <input type="text" id="name" name="_name" class="form-control"
                                               placeholder="{{ 'Company name'|trans }}" required
                                               value="{{ advertiserPending.name != null ? advertiserPending.name : advertiser.name }}">
                                    </div>

                                    <div class="form-label-group col-md">
                                        <label for="siret" class="labelInput font-500">{{ 'N° SIRET'|trans }}</label>

                                        <input type="text" id="siret" name="_siret" class="form-control"
                                               placeholder="{{ 'N° SIRET'|trans }}"
                                               {% if not is_granted('ROLE_BACKEND') %}disabled{% endif %}
                                               value="{{ advertiser.siret }}">
                                    </div>
                                    <div class="form-label-group col-md">
                                        <label for="fcmsIdentifier"
                                               class="label-input font-500">{{ 'FCMS Identifier'|trans }}</label>
                                        <input type="text" id="fcmsIdentifier" name="_fcmsIdentifier" class="form-control"
                                               placeholder="{{ 'FCMS Identifier'|trans }}"
                                               {% if not is_granted('ROLE_BACKEND') %}disabled{% endif %}
                                               value="{{ advertiser.fcmsIdentifier }}">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <input-dropdown v-model="jobSector" placeholder="{{ 'Choose'|trans }}..." key="jobSector"
                                                        label="{{ 'Industry'|trans }}" :data-list="jobsSector"
                                                        id="jobSector" :init-value="jobSector"></input-dropdown>
                                    </div>
                                    <input type="hidden" :value="jobSector" name="_job-sector">
                                </div>

                                {% if is_granted('ROLE_BACKEND') %}
                                    <div class="row mb-3">
                                        <div class="form-label-group col-md-6">
                                            <input-dropdown v-model="currency" placeholder="{{ 'Choose'|trans }}..." key="currency"
                                                            label="{{ 'Currency'|trans }}" :data-list="currencies"
                                                            id="currency" :init-value="currency"
                                                            props-return-value="codeIso"></input-dropdown>
                                            <input type="hidden" :value="currency" name="_currency">
                                        </div>

                                        <div class="form-label-group col-md-6">
                                            <div>
                                                <input-dropdown v-model="agency" placeholder="{{ 'Choose'|trans}}..." key="agency"
                                                                label="{{ 'Agency'|trans }}" :data-list="agencies"
                                                                id="agency" :init-value="agency">
                                                    <template #prepend>
                                                        <div class="input-group-prepend">
                                                            <button class="btn btn-outline-secondary" type="button"
                                                                    @click="showAddAgency = true"
                                                                    title="{{ 'Add an agency'|trans }}">
                                                                <i class="fa fa-plus small"></i>
                                                            </button>
                                                        </div>
                                                    </template>
                                                </input-dropdown>
                                            </div>
                                            <input type="hidden" :value="agency" name="_agency">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-mb-2 pl-4 mt-4">
                                            <input id="active" type="checkbox" class="inp-cbx d-none" name="_active"
                                                   {% if advertiser.active %}checked{% endif %}>
                                            <label for="active"
                                                   class="cbx d-flex align-items-center ml-4 w-fit-content font-500">
                                                <span class="bg-white mr-2">
                                                    <svg width="10px" height="10px" viewBox="0 0 10 10"><polyline
                                                                points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                                </span>
                                                <span>{{ 'Active'|trans }}</span>
                                            </label>
                                        </div>
                                    </div>
                                {% endif %}

                                <div class="form-label-group mb-3 mt-5">
                                    <label for="_logo" class="labelInput font-500">{{ 'Logo'|trans }}</label>
                                    {% if advertiserPending.logo is not null %}
                                        <img src="{{ advertiserPending.logo }}" alt="" height="80"
                                             class="mx-auto d-block my-3" id="logo">
                                    {% elseif advertiser.logo is not null %}
                                        <img src="{{ advertiser.logoPath }}" alt="" height="80"
                                             class="mx-auto d-block my-3" id="logo">
                                    {% endif %}

                                    {% if advertiserPending.id is null and advertiser.logo is null %}
                                        <span class="font-700 mt-4 d-block text-center mb-3"
                                              id="text-logo-default">{{ 'You don\'t have a logo ?'|trans }} <br> {{ 'Choose the default one !'|trans }}</span>
                                        <div class="d-block text-center">
                                            <i class="fa fa-check-circle position-relative text-success fa-2x d-none"
                                               style="right: -38px;top: 24px;"></i>
                                            <img src="{{ asset('Dashboard/img/company.png') }}" height="96px"
                                                 alt="wan2bee logo " id="logo"
                                                 class="img-fluid logoDefault mx-auto mb-5 p-3 bg-light border rounded-2 d-block cursor-pointer"
                                                 style="width: 96px;"/>
                                        </div>
                                        <input type="hidden" id="_logoDefaut" name="logoDefaut" value="">
                                    {% endif %}

                                    <input type="file" id="_logo" class="form-control" name="_logo"
                                           accept="image/jpeg,image/png" placeholder="Logo"
                                           style="height: calc(1.5em + 1.7rem + 2px) !important;"
                                           @change="onFileSelected($event)">
                                    <small>({{ 'max size'|trans }} : 600px, {{ 'only'|trans }} jpg/png )</small>
                                </div>
                            </div>

                            {% if is_granted('ROLE_BACKEND') %}
                                <div v-show="activePanel === 'settings'">
                                    <div class="row mb-3">
                                        <div class="form-label-group col-md-4">
                                            <label for="ttdid"
                                                   class="labelInput font-500">The Trade Desk ID</label>
                                            <input type="text" id="ttdid" name="_ttdid"
                                                   class="form-control no-placeholder"
                                                   placeholder="The Trade Desk ID"
                                                   value="{{ gbAdvertiserMapping.ttdAdvertiserId }}">
                                        </div>

                                        <div class="form-label-group col-md-4">
                                            <label for="fbid"
                                                   class="labelInput font-500">Facebook ID</label>
                                            <input type="text" id="fbid" name="_fbid" class="form-control"
                                                   placeholder="Facebook ID"
                                                   value="{{ gbAdvertiserMapping.fbAdvertiserId }}">
                                        </div>

                                        <div class="form-label-group col-md-4">
                                            <input-dropdown v-model="tier" placeholder="{{ 'Choose'|trans}}..." key="tier"
                                                            label="{{ 'Tier'|trans }}" :data-list="[{id:'1',name:'1'},{id:'2',name:'2'},{id:'3',name:'3'}]"
                                                            id="tier" :init-value="tier"></input-dropdown>
                                            <input type="hidden" :value="tier" name="_tier">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="form-label-group col-md-8">
                                            <label for="Url" class="labelInput font-500">{{ 'Url'|trans }}</label>
                                            <bootstrap-tags-input v-model="url"
                                                                  placeholder="{{ 'Url'|trans }}"></bootstrap-tags-input>
                                            <input type="hidden" :value="url" name="_url">
                                        </div>

                                        <div class="form-label-group col-md-4">
                                            <label for="static-path"
                                                   class="labelInput font-500">{{ 'Static path'|trans }}</label>
                                            <input type="text" id="static-path" name="_static-path"
                                                   class="form-control no-placeholder"
                                                   placeholder="{{ 'Static path'|trans }}"
                                                   value="{{ advertiser.staticpath }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="form-label-group col-md-8">
                                            <label for="feedlabel"
                                                   class="labelInput font-500">{{ 'Feed label'|trans }} <i class="fa fa-question-circle cursor-pointer" title="{{ 'Default label feed mainly used for Talent if not configured at campaign level'|trans }}"></i></label>
                                            <input type="text" id="feedlabel" name="_feedlabel" class="form-control"
                                                   placeholder="{{ 'Feed label'|trans }}"
                                                   value="{{ feedLabel }}">
                                        </div>
                                        <div class="form-label-group col-md-4 mb-2">
                                            <label for="selffees" class="labelInput font-500">{{ 'Fees'|trans }} Self</label>
                                            <div class="input-group">
                                                <input type="number" id="selffees" name="_selffees"
                                                       class="form-control no-placeholder" min="0" max="100"
                                                       placeholder="{{ 'fees'|trans }}"
                                                       value="{{ selfFees|number_format(0) }}" required>
                                                <div class="input-group-append">
                                                        <span class="input-group-text"><i
                                                                    class="fa fa-percent small"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-3 pl-4 mt-4">
                                            <input id="s2s-advertiser" type="checkbox" class="inp-cbx d-none"
                                                   name="_s2s-advertiser"
                                                   {% if infosAdvertiser['s2s_applies'] is defined and infosAdvertiser['s2s_applies'] %}checked{% endif %}>
                                            <label for="s2s-advertiser"
                                                   class="cbx d-flex align-items-center ml-4 w-fit-content font-500">
                                                <span class="bg-white mr-2">
                                                    <svg width="10px" height="10px" viewBox="0 0 10 10"><polyline
                                                                points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                                </span>
                                                <span>S2S {{ 'Advertiser'|trans }}</span>
                                            </label>
                                        </div>
                                        <div class="col-md-3 pl-4 mt-4">
                                            <input id="s2s-publisher" type="checkbox" class="inp-cbx d-none"
                                                   name="_s2s-publisher"
                                                   {% if infosAdvertiser['s2s_publishers'] is defined and infosAdvertiser['s2s_publishers'] %}checked{% endif %}>
                                            <label for="s2s-publisher"
                                                   class="cbx d-flex align-items-center ml-4 w-fit-content font-500">
                                                <span class="bg-white mr-2">
                                                    <svg width="10px" height="10px" viewBox="0 0 10 10"><polyline
                                                                points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                                </span>
                                                <span>S2S {{ 'Publisher'|trans }}</span>
                                            </label>
                                        </div>
                                        {% if is_granted('ROLE_IT') %}
                                        <div class="col-md-3 pl-4 mt-4">
                                            <label for="nb_days_self_conso"
                                                   class="d-flex align-items-center ml-4 w-fit-content font-500">

                                                <span>{{ 'Force middle_self_conso'|trans }}</span>
                                            </label>
                                            <div class="input-group">

                                                <a class="btn btn-primary btn-xs inl" id="triggerConso" title="{{ 'Force middle_self_conso'|trans }}" @click="triggerMiddleSelfConso()" >
                                                    <span class="fal fa-play" aria-hidden="true" style="color:white;"></span>
                                                </a>
                                                <input type="number" id="nb_days_self_conso" name="_nb_days_self_conso"
                                                       class="form-control no-placeholder" min="1"
                                                       placeholder="{{ 'nb days'|trans }}"
                                                       value="3" required>
                                                <div class="input-group-append">
                                                        <span class="input-group-text">{{ 'days'|trans }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if is_granted('ROLE_BACKEND') %}
                                <div v-show="activePanel === 'datorama'">
                                    <draggable v-model="datoramaUrls" ghost-class="moving-card" :animation="250"
                                               @start="drag=true" @end="checkMoveItem">
                                        <div class="row mb-3" v-for="(url, u) in datoramaUrls">
                                            <div class="col mb-2">
                                                <div class="card">
                                                    <div class="card-header d-flex justify-content-between">
                                                        <h5 class="card-title">{{ 'Page'|trans }} <% u + 1 %></h5>
                                                        <button class="btn btn-primary btn-xs"
                                                                @click="deleteUrl($event, u)"
                                                                title="{{ 'Remove this url'|trans }}">
                                                            <i class="fa fa-trash small"></i>
                                                        </button>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row mb-3">
                                                            <div class="col-md-6">
                                                                <label class="font-500" :for="'titleUrl' + u">{{ 'Page title'|trans }}</label>
                                                                <input type="text" :id="'titleUrl' + u"
                                                                       class="form-control" v-model="url.title">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="font-500" :for="'userlist' + u">{{ 'User filter'|trans }}</label>
                                                                <multi-select-dropdown v-model="url.users" :data="users"
                                                                                       placeholder="{{ 'Pick users'|trans }}"
                                                                                       id="userlist"
                                                                                       :init-value="url.users"
                                                                                       label-key="name"
                                                                                       input-value-text="{{ 'Users'|trans }}"
                                                                                       :disabled="loading"
                                                                                       :limit="50"
                                                                                       key="userlist"></multi-select-dropdown>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col">
                                                                <label class="font-500" :for="'url' + u">{{ 'URL'|trans }}</label>
                                                                <input type="text" :id="'url' + u" class="form-control"
                                                                       v-model="url.url">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                    <button class="btn btn-outline-secondary btn-block px-4 py-2 cursor-pointer"
                                            @click="addNewDatoramaUrl" title="{{ 'Add Datorama URL'|trans }}"><i
                                                class="fa fa-plus small"></i> {{ 'Add URL'|trans }}
                                    </button>
                                    <input type="hidden" :value="datoramaUrlsJson"
                                           name="_datorama-url">
                                </div>
                            {% endif %}

                            {% if is_granted('ROLE_IT') %}
                                <div v-show="activePanel === 'fees'">
                                    <div class="row">
                                        {% for externalAggregator in externalAggregators %}
                                            <div class="form-label-group col-md-6 mb-2">
                                                <label for="external_{{ externalAggregator.publisher_id }}"
                                                       class="labelInput font-500">{{ externalAggregator.name }}</label>
                                                <div class="input-group">
                                                    <input type="number"
                                                           id="external_{{ externalAggregator.publisher_id }}"
                                                           name="_external_{{ externalAggregator.publisher_id }}"
                                                           class="form-control no-placeholder" min="0" max="100"
                                                           placeholder="{{ 'fees'|trans }}"
                                                           value="{{ externalAggregator.fees }}">
                                                    <div class="input-group-append">
                                                            <span class="input-group-text"><i
                                                                        class="fa fa-percent small"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if is_granted('ROLE_SAAS') or is_granted('ROLE_DAF') %}
                            <div v-show="activePanel === 'mail'"
                                 class="form form-advertiser bg-white rounded">
                                <h5 class="title-page mb-4 text-underline">
                                    {{ "On candidate apply"|trans }}
                                </h5>
                                <div class="col-6">
                                    <label for="advertiserEmailTemplateConfirm"
                                           class="labelInput font-500">{{ 'Subject'|trans }}</label>
                                    <input type="text"
                                           id="confirm-subject"
                                           name="_confirm-subject"
                                           class="form-control no-placeholder"
                                           value="{{ advertiserEmailTemplate.confirm.subject }}">
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="advertiserEmailTemplateConfirm"
                                           class="labelInput font-500">{{ 'Content'|trans }}</label>
                                    <editor v-model="advertiserEmailTemplate.confirm.message"
                                            :value="advertiserEmailTemplate.confirm.message"
                                            @update="($event)=>{advertiserEmailTemplate.confirm.message = $event}"
                                            :showLimit="false"
                                            :active-buttons="editorTools"
                                    ></editor>
                                    <input type="hidden"
                                           id="_confirm-message"
                                           name="_confirm-message" :value="advertiserEmailTemplate.confirm.message"/>
                                </div>
                                <div class="col-6 pl-0">
                                    <h5 class="title-page mt-5 mb-4 text-underline">
                                        {{ "On candidate reject"|trans }}
                                    </h5>
                                </div>
                                <div class="col-6">
                                    <label for="advertiserEmailTemplateReject"
                                           class="labelInput font-500">{{ 'Subject'|trans }}</label>
                                    <input type="text"
                                           id="reject-subject"
                                           name="_reject-subject"
                                           class="form-control no-placeholder"
                                           value="{{ advertiserEmailTemplate.reject.subject }}">
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="advertiserEmailTemplateReject"
                                           class="labelInput font-500">{{ 'Content'|trans }}</label>
                                    <editor v-model="advertiserEmailTemplate.reject.message"
                                            :value="advertiserEmailTemplate.reject.message"
                                            @update="($event)=>{advertiserEmailTemplate.reject.message = $event}"
                                            :showLimit="false"
                                            :active-buttons="editorTools">
                                    </editor>
                                    <input type="hidden"
                                           id="reject-message"
                                           name="_reject-message" :value="advertiserEmailTemplate.reject.message"/>
                                </div>
                            </div>
                            {% if advertiserPending.id is null or advertiserPending.status == 'reported' or is_granted('ROLE_BACKEND') %}
                                <button id="_submit" name="_submit"
                                        class="btn btn-lg btn-primary btn-block btn-login rounded-30 mx-auto mt-5"
                                        type="submit" style="max-width: 310px;" :disabled="loading">
                                    {{ 'Save'|trans }}
                                </button>
                            {% endif %}
                            {% endif %}
                        </form>
                    </div>
                </div>

                {% if is_granted('ROLE_BACKEND') %}
                    <modal-confirmation id-modal="addAgency" :show="showAddAgency"
                                        @confirmation="confirmationAddAgency">
                        <template #header>
                            <span>{{ 'New agency'|trans }}</span>
                        </template>
                        <template #modal-body>
                            <input type="text" class="form-control" v-model="newAgency" placeholder="An agency name...">
                        </template>
                        <template #confirm-btn>
                            {{ 'Add'|trans }}
                        </template>
                    </modal-confirmation>
                {% endif %}
            </div>
            <span class="d-none invisible twig-data-logo" data-logo="{{ logo }}"></span>
            <span class="d-none invisible twig-data-jobsector" data-jobsector="{{ jobsSector }}"></span>
            <span class="d-none invisible twig-data-jobsector-id"
                  data-jobsector-id="{{ advertiser.jobSectorId }}"></span>
            {% if is_granted('ROLE_BACKEND') %}
                <span class="d-none invisible twig-data-currencies" data-currencies="{{ currencies }}"></span>
                <span class="d-none invisible twig-data-currency"
                      data-currency="{{ advertiser.currency ?? "EUR" }}"></span>
                <span class="d-none invisible twig-data-agencies" data-agencies="{{ agencies }}"></span>
                <span class="d-none invisible twig-data-agency-id"
                      data-agency-id="{{ advertiser.agenceId ?? "" }}"></span>
                <span class="d-none invisible twig-data-url" data-url="{{ advertiser.url ?? "" }}"></span>
                <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id ?? "" }}"></span>
                <span class="d-none invisible twig-data-datorama-url"
                      data-datorama-url="{{ advertiser.datoramaDashboardUrl ?? "[]" }}"></span>
                <span class="d-none invisible twig-data-users" data-users="{{ users }}"></span>
                <span class="d-none invisible twig-data-tier"
                      data-tier="{{ advertiser.tier ?? "3" }}"></span>
            {% endif %}

            <span class="d-none invisible twig-data-path-ajax-agency-add"
                  data-path-ajax-agency-add="{{ path('ajax_agency_add') }}"></span>
            <span class="d-none invisible twig-data-advertiser-email-template"
                  data-advertiser-email-template="{{ advertiserEmailTemplate|json_encode }}"></span>
        </section>
    </main>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('advertiser-edit') }}
{% endblock %}