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

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

{% block pageheader %}OFFERS ATS{% endblock %}

{% block body %}
    <div id="appOffers" v-cloak>
        <main class="row main mx-0 min-vw-100">
            {{ include('Includes/aside_ats.html.twig') }}
            <section class="content-area p-r-l-6 pb-5">

                {% if not isProfileComplete and not isAdvertiserPending %}
                    <div class="alert alert-danger text-center">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span>{{ 'Your profile is not complete'|trans }}</span>
                        <a href="{{ path('ats_advertiser_edit', { 'id': advertiser.id }) }}"
                           class=" py-2 px-2 font-600 text-underline rounded-2 cursor-pointer">
                            {{ 'Please complete your company profile'|trans }}
                        </a>
                    </div>

                {% elseif isAdvertiserPending and advertiserPending.status == "pending" %}
                    <div class="alert alert-warning text-center">
                        <i class="fad fa-hourglass-half"></i>
                        <span class="">{{ 'Your profile is waiting for validation'|trans }}</span>

                    </div>
                {% elseif isAdvertiserPending and advertiserPending.status == "reported" %}
                    <div class="alert alert-danger text-center d-flex justify-content-center">
                        <i class="fad fa-exclamation-circle fa-2x mr-2"></i>
                        <span class="my-auto ">{{ 'Your profile was reported !'|trans }} </span>
                        <a href="{{ path('ats_advertiser_edit', { 'id': advertiser.id }) }}"
                           class=" py-2 px-2 font-600 text-underline rounded-2 cursor-pointer d-block">
                            {{ 'Please update your company profile'|trans }}
                        </a>
                    </div>
                {% endif %}

                <div class="d-flex justify-content-between">
                    <div class="title-page text-left  pb-4 mb-2 pl-0 d-flex">
{#                        {% if not is_granted('ROLE_SAAS') %}#}
{#                            {{ 'Offers'|trans }} |#}
{#                            <div class="ml-2 font-weight-bold"> {{ dafInstance.nameInstance }}#}
{#                            </div>#}
{#                            {% if  dafInstance.active == 0 %}#}
{#                                <span class="chips status-form ml-5 chips_red ">#}
{#                                {{ 'inactive'|trans }}#}
{#                            </span>#}
{#                            {% endif %}#}
{#                        {% endif %}#}
                    </div>
                    <div class="my-auto">
                        <span class="btn btn-primary rounded-30 px-4 py-2 border border-primary my-4 cursor-pointer"
                              @click="createOffer()">{{ 'Create an offer'|trans }}</span>
                    </div>
                </div>

                <div class="row pb-2 mb-2 px-3 heading-title">
                    <div class="col-md-6 text-left font-weight-bold text-uppercase px-0">
                        {{ 'Offers'|trans }}
                    </div>
                    <div class="col-md-6 text-right px-0">
                        <span class="pr-5">{{ 'Total offers'|trans }}</span>
                        <span class="font-weight-bold"> <% totalOffers %></span>
                    </div>
                </div>

                <div class="simple-data-headers d-flex bg-white py-3 rounded-2 mb-3">
                    <div class="col-md-6 col-sm-12 text-left d-flex data-options" v-if="{{ not is_granted('ROLE_SAAS') }}">
                        <div class="pagination pr-4 my-auto">
                            <span>Page <b><% page %></b> of <% Math.ceil(totalOffers / pageLimit) %></span>
                            <div class="pl-4">
                                <i class="pr-2 fas fa-step-backward mr-2" @click="navigatePage('backward')"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" @click="navigatePage('prev')"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2" @click="navigatePage('next')"></i>
                                <i class="fas fa-step-forward" @click="navigatePage('forward')"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12 section-search text-right">
                        <div class="col-md-6 px-0 d-inline-block">
                            <div class="input-group">
                                <input type="search" class="form-control border border-right-0 my-auto"
                                       v-model.lazy="filterJob"
                                       @keyup.enter="getJobPendingList()"
                                       placeholder="search">
                                <span class="input-group-append p-0 border-0">
                                <button class="border-left-0 border" type="button">
                                    <i class="fal fa-search"></i>
                                </button>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 py-4 table-headers" style="box-shadow: none">
                    <div class="pr-0 justify-content-between">
                        <div class="col-sm-9 pr-0 d-flex">
                            <!--<div class="d-none">
                                <input class="inp-cbx" type="checkbox" @change="checkAll" v-model="allOffersChecked"/>
                            </div>-->
                            <div class="col-4 my-auto user-profile p-0">
                               <span>
                                   <b class="mr-2">{{ 'Job title'|trans }}</b>
                                </span>
                            </div>
{#                            <div class="col-2 my-auto job-title text-center">#}
{#                                <b>{{ 'Category'|trans }}</b>#}
{#                            </div>#}
                            <div class="col-4 text-center my-auto job-location ">
                                <span>
                                    <b>{{ 'Offer location'|trans }}</b>
                                </span>
                            </div>

                            <div class="col-4 my-auto job-location text-center">
                                <span>
                                    <b>{{ 'Contract type'|trans }}</b>
                                </span>
                            </div>
                            <!--<div class="col-2 my-auto job-location ">
                                <b></b>
                            </div>
                            <div class="col-1 my-auto job-location ">
                                <b></b>
                            </div>-->
                        </div>
                    </div>
                </div>

                <template v-if="Object.keys(offers).length > 0">
                    <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 py-2 line-animation" v-for="(offer, index) in offers" :key="offer.idExt" v-if="offer.active === '1'">
                        <div class="pr-0 d-flex justify-content-between content-line" style="min-height: 50px;" >
                            <!--<div class="checkbox my-auto d-none">
                                <input class="inp-cbx" :id="'check-' + index" type="checkbox"
                                       style="display: none;" :value="index"
                                       v-model="checkedOffers"
                                       @change="allOffersChecked = (Object.keys(offers).length == checkedOffers.length);"/>
                                <label class="cbx" :for="'check-' + index">
                                    <span>
                                        <svg width="10px" height="10px" viewbox="0 0 10 10">
                                          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                        </svg>
                                    </span>
                                </label>
                            </div>-->
                            <div class="col-sm-9 pr-0 d-flex main-line-content">
                                <div class=" col-sm-4 my-auto user-profile p-0 d-flex" @click="expandLineApply(index)">
                                    <div>
                                        <span class="font-600 mr-2 my-auto d-block" v-if="offer.name !== null"> <% humanizeText(offer.name) %>
                                        </span>
                                    </div>
                                </div>

{#                                <div class=" col-sm-3 my-auto job-title d-flex ">#}
{#                                    <a class="rounded-2 link-modal-job"><% offer.domain %>#}
{#                                    </a>#}
{#                                </div>#}

                                <div class="col-sm-4 my-auto job-location text-center" @click="expandLineApply(index)">
                                    <span v-if="offer.city !== null"><% humanizeText(offer.city) %></span>
                                    <span v-else-if="offer.state !== null"><% humanizeText(offer.state) %></span>
                                    <span v-else-if="offer.region !== null"><% humanizeText(offer.region) %></span>
                                    <span v-else><% humanizeText(offer.country) %></span>
                                </div>
                                <div class="col-sm-4 my-auto job-location text-center overflow-hidden" @click="expandLineApply(index)">
                                    <span><% offer.contractType %></span>
                                </div>
                                {#                            <div class="col-sm-2 my-auto job-location text-center" v-on:click="expandLineApply(index)">#}
                                {#                             <span class="badge badge-job" style="margin-left: -15px;">#}
                                {#                                Last Updated 10Days#}
                                {#                            </span>#}
                                {#                            </div>#}
                            </div>
                            <div class="col-sm-2 px-0 my-auto d-flex">

                                <span class="chips chips_yellow cursor-pointer px-2" @click="showModeration(index)"
                                      v-if="offer.status === 'pending'" data-tippy-content="{{ 'Offer being validated'|trans }}">
                                    {{ 'pending'|trans }}
                                    <span class="">
                                        <i class="fal fa-hourglass-start"></i>
                                    </span>
                                </span>

                                <span class="chips chips_red cursor-pointer px-2" @click="showModeration(index)"
                                      v-if="offer.status === 'reported'" data-tippy-content="{{ 'The offer has not been validated'|trans }}">
                                    {{ 'not validated'|trans }}
                                    <span class="">
                                        <i class="fal fa-eye"></i>
                                    </span>
                                </span>

                                {% if is_granted('ROLE_SAAS') %}
                                    <a class="chips chips_green cursor-pointer px-2"
                                       href="{{ path('ats_form_applies', { dafInstance: dafInstance.id, advertiser: advertiser.id }) }}" target="_blank"
                                       v-if="offer.status !== 'reported' && offer.status !== 'pending' && offer.applies > 0">
                                        <% offer.applies %> {{ 'applies'|trans }}
                                        <span class="">
                                                <i class="fal fa-external-link-alt"></i>
                                        </span>
                                    </a>
                                {% endif %}

                            </div>
                            <div class="col-sm-1 px-0 my-auto d-flex justify-content-end align-items-center">
{#                                {% if is_granted('ROLE_SAAS') %}#}

                                <template v-if="offer.link !== null">
                                    <div class="" data-tippy-content="preview Offer" v-if="offer.status !== 'reported' && offer.status !== 'pending'">
                                        <a class="cursor-pointer" :href="offer.link" target="_blank">
                                        <span class="span-icon">
                                            <i class="fal fa-eye"></i>
                                        </span>
                                        </a>
                                    </div>
                                </template>
                                <template v-else-if="offer.dafRedirect !== null">
                                    <div class="" data-tippy-content="preview Offer" v-if="offer.status !== 'reported' && offer.status !== 'pending'">
                                        <a class="cursor-pointer" :href="offer.dafRedirect" target="_blank">
                                        <span class="span-icon">
                                            <i class="fal fa-eye"></i>
                                        </span>
                                        </a>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="" data-tippy-content="preview Offer" v-if="offer.status !== 'reported' && offer.status !== 'pending'">
{#                                        <a class="cursor-pointer" :href="offer.dafRedirect" target="_blank">#}
{#                                        <span class="span-icon">#}
{#                                            <i class="fal fa-eye"></i>#}
{#                                        </span>#}
{#                                        </a>#}
                                    </div>
                                </template>
{#                                {% else %}#}

{#                                {% endif %}#}

                                <template v-if="offer.source !== 'manual' ">
                                    <span class="chips chips_purple px-2 text-center">
                                        {{ 'From flux'|trans }}
                                    </span>
                                </template>

                                <template v-else>
                                    <div data-tippy-content="{{ 'Modify offer'|trans }}" v-if="offer.status !== 'pending' || !offer.status">
                                        <span :class="[offer.source === 'manual' ? 'cursor-pointer' : 'cursor-not-allowed disabled', 'span-icon']"
                                              v-on="offer.source === 'manual' ? { click: () => modifyOffer(index) } : {}">
                                            <i class="fal fa-pen"></i>
                                        </span>
                                    </div>

                                    <div v-if="offer.status !== 'pending' || !offer.status" data-tippy-content="{{ 'Delete offer'|trans }}">
                                        <span :class="[offer.source === 'manual' ? 'cursor-pointer' : 'cursor-not-allowed disabled', 'span-icon']"
                                              v-on="offer.source === 'manual' ? { click: () => deleteOffer(index) } : {}">
                                            <i class="fal fa-trash-alt"></i>
                                        </span>
                                    </div>
                                </template>
                            </div>

                            {#                        <div class="col-sm-1 position-relative align-self-center pl-0">#}
                            {#                            <div class="slider-icon-group position-absolute" v-on:click="SliderFunction(index)"#}
                            {#                                 :data-target="'#' + index" :id="'id-' + index">#}
                            {#                                <div class="slider-icon" :href="'#' + index">#}
                            {#                                    <i class="far fa-angle-down"></i>#}
                            {#                                </div>#}
                            {#                            </div>#}
                            {#                        </div>#}

                        </div>
                        <!-- <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-3" :class="'div-' + index" :data-id="index"
                             style="display: none;">
                            <div class="col-sm-12 d-flex mt-3">
                                <div class="col-sm-6">
                                </div>
                                <div class="col-sm-6 pl-4 d-flex" style="border-left: 0.5px dashed #e4e4e4">

                                </div>
                            </div>
                            <div class="text-right d-block pr-0 col-sm-12">

                            </div>
                        </div>-->
                    </div>
                </template>

                <template v-else>
                    <div class="alert alert-info mt-4 text-center border-0 text-info">
                        {{ 'No offer created yet'|trans }}
                        <span @click="createOffer()" class="font-italic text-underline font-600 ml-4 text-info cursor-pointer">{{ 'Create an offer'|trans }}</span>
                    </div>
                </template>

                <div class="bottom-bar-info fixed-bottom " v-if="checkedOffers.length > 0">
                    <div class="col-12 row py-4 px-4 bg-primary text-white bar-info mx-auto border-rounded-50 shadow-1 mb-4" >
                        <div class="col-sm-4" style="display: -webkit-inline-box;">
                                    <span class="icon-circle mr-3">
                                        <% checkedOffers.length %>
                                    </span>
                            {{ 'selected'|trans }}
                            <div class="chips-bottom ml-2 d-block" @click="resetSelectOffers()">
                                <i class="fal fa-times"></i>
                                <span class="ml-1">{{ 'reset'|trans }}</span>
                            </div>
                        </div>
                        <div class="col-sm-8 justify-content-end d-flex">
                            <div class="text-white bg-danger chips cursor-pointer" @click="deleteCheckedOffers(checkedOffers)">
                                <i class="far fa-trash-alt"></i>
                                <span class="ml-1" title="delete">{{ 'Delete'|trans }}</span>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </main>

        <div id="check-full-profil"
             class="modal-info shadow-1 position-absolute my-auto mx-auto p-4 bg-white d-none center-50"
             style="z-index: 9999;">
            <div class="d-flex justify-content-end mb-2 cursor-pointer" @click="closeModalCheckProfile">
                <i class="fal fa-times"></i>
            </div>
            <div class="mt-4 mb-4 d-flex">
                <i class="fa-info-circle fal text-warning fa-3x mx-auto"></i>
            </div>
            <div class="font-300 mb-4 mx-auto text-center text-info w-75">
                {{ 'You have not completely completed your profile'|trans }}
            </div>

            <a href="{{ path('ats_advertiser_edit', { 'id': advertiser.id }) }}"
               class="bg-light d-block py-2 px-2 text-center font-600 border rounded-2 cursor-pointer">{{ 'Complete your company profile'|trans }}
            </a>
        </div>

        <div id="newOffer" class="bg-white newOffer form-campaign px-5 pt-4 pb-5 d-none" style="height: auto !important;">
            <div class="w-100 mb-5 pb-4">
                <div class="header d-flex flex-column pl-2 mb-5">
                    <div class="slider-icon-group active ml-auto cursor-pointer" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeModalNewOffer()">
                        <div class="slider-icon">
                            <i class="fal fa-times text-white"></i>
                        </div>
                    </div>

                    <div class="title mt-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                            <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                  d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                  transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                        </svg>
                        <h5 class="ml-3 text-primary font-weight-bold d-inline">{{ 'New offer'|trans }}</h5>
                    </div>
                </div>

                <div class="body-form mt-2" v-if="handle">
                    <div class="text-center alert-danger alert" v-if="offers.length >= 20 && isRoleSaas">{{ 'You cannot create more offers (20 max)'|trans }}</div>
                    <div id="step-1" class="step-1">
                        <div class="title-step d-flex align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">1</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer informations'|trans }}
                            </div>
                        </div>
                        <div class="body-step">

                            <div class="col pl-4 mt-4">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="jobTitle" class="labelInput focusInput font-500">{{ 'Job title'|trans }} (H/F) *</label>
                                    <input type="text" id="jobTitle" name="_jobTitle" placeholder="{{ 'Job title'|trans }}"
                                           required="required" class="form-control no-placeholder" v-model="job.name">
                                </div>
                            </div>

                            <div class="d-flex ml-4 mt-3">
                                <div class="col pl-4 pr-0">
                                    <job-input-dropdown v-model="job.contractType" placeholder="Choose..." label="{{ 'Contract type'|trans }}" :data="contracts" key-option="value" id="_contract" :required="true"></job-input-dropdown>
                                </div>
                                <div class="col">
                                    <job-input-dropdown v-model="job.education" placeholder="Choose..." label="{{ 'Education'|trans }}" :data="educations" key-option="value" id="_education" :required="true"></job-input-dropdown>
                                </div>
                            </div>

                            <div class="d-flex ml-4 mt-3">
                                <div class="col pl-4 pr-0">
                                    <job-input-dropdown v-model="job.experience" placeholder="Choose..." label="{{ 'Experience'|trans }}" :data="experiences" key-option="value" id="_experience" :required="true"></job-input-dropdown>
                                </div>
                                <div class="col">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="salaire" class="labelInput focusInput font-500">{{ 'Salary'|trans }}</label>
                                        <input type="text" id="salaire" name="_salaire" placeholder="Salaire"
                                               required="required" class="form-control no-placeholder position-relative" v-model="job.salary">
                                    </div>
                                </div>
                            </div>

                            <div class="col pl-4 mt-3">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="linkCurrentJob" class="labelInput focusInput font-500">{{ 'Job link'|trans }}</label>
                                    <input type="text" id="linkCurrentJob" name="_linkCurrentJob" placeholder="{{ 'Job link'|trans }}"
                                           class="form-control no-placeholder" v-model="job.link">
                                </div>
                            </div>

                            <template v-if="job.idExt.length <= 1">
                                <div class="col pl-4 mt-3">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <label for="idExtCurrentJob" class="labelInput focusInput font-500">{{ 'Job id'|trans }}</label>
                                        <input type="text" id="idExtCurrentJob" name="_idExtCurrentJob" placeholder="{{ 'Job id'|trans }}"
                                               class="form-control no-placeholder" v-model="job.idExt[0]">
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div v-for="(city, i) in job.city" class="d-flex ml-4 mt-3" v-for="(city, i) in job.city" :key="i">
                                    <div class="col pl-4 pr-0">
                                        <div  class="form-label-group position-relative input-login">
                                            <label :for="'idExtCurrentJob'+i" class="labelInput focusInput font-500">{{ 'Job id'|trans }}</label>
                                            <input type="text" :id="'idExtCurrentJob'+i" name="_idExtCurrentJob" placeholder="{{ 'Job id'|trans }}"
                                                   class="form-control no-placeholder" v-model="job.idExt[i]">
                                        </div>
                                    </div>
                                    <div class="col d-flex justify-content-start align-items-end">
                                        <span class="mr-2 mb-2">{{ 'for the localisation'|trans }} :</span>
                                        <span class="tag-rule rounded-30 label label-default pl-2 pr-2 chips chips_purple py-2 border mr-1 mb-1 d-inline-block">
                                            <span><% city.value %></span>
                                        </span>
                                    </div>
                                </div>
                            </template>

                        </div>
                    </div>

                    <div id="step-2" class="step-2 mt-5">
                        <div class="title-step d-flex pt-4 align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">2</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer location'|trans }}
                            </div>
                        </div>

                        <div class="body-step">
                            <div class="d-flex ml-4 mt-3">
                                <div class="col pl-4 pr-0">
                                    <div class="mb-3">
                                        <span v-for="(city, i) in job.city" class="tag-rule rounded-30 label label-default pl-2 pr-1 chips chips_purple py-2 border mr-1 mb-1 d-inline-block" :key="i">
                                            <span><% city.value %></span>
                                            <span class="mr-1 ml-1 cursor-pointer" @click="removeCity(i)"><i class="fa fa-times-circle"></i></span>
                                        </span>
                                    </div>
                                    <job-input-dropdown @input="addCity" @typing="getCities" placeholder="{{ 'City or Zip code'|trans }}" label="{{ 'City (max 5)'|trans }}"
                                                        :data="filteredCities" id="_city" :required="true" :remove-on-input="true" :return-raw-option="true" :disabled="job.city.length == 5"></job-input-dropdown>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="step-3" class="step-2 mt-5">
                        <div class="title-step d-flex pt-4 align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">3</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer description'|trans }}
                            </div>
                        </div>

                        <div class="body-step">
                            <div class="col pl-4 mt-3 d-flex flex-column">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="newOfferTextareaCompany" class="labelInput focusInput font-500">
                                        <i class="fal fa-building mr-2"></i> {{ 'Describe your company'|trans }} *
                                    </label>

                                    <vue-editor name="newOfferTextareaCompany" id="newOfferTextareaCompany" v-model="job.descriptionCompany" :editor-toolbar="editorCustomToolbar"></vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="newOfferTextareaCompanyRemainContent"><% remainNewJobCompanyDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>
                                </div>

                                <div class="form-label-group position-relative input-login ml-4 mt-5">
                                    <label for="newOfferTextareaJob" class="labelInput focusInput font-500">
                                        <i class="fal fa-suitcase mr-2"></i> {{ 'Describe the job'|trans }} *
                                    </label>
                                    <vue-editor name="newOfferTextareaJob" id="newOfferTextareaJob" v-model="job.descriptionJob" :editor-toolbar="editorCustomToolbar"></vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="newOfferTextareaJobRemainContent"><% remainNewJobMissionDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>
                                </div>

                                <div class="form-label-group position-relative input-login ml-4 mt-5">
                                    <label for="newOfferTextareaProfile" class="labelInput focusInput font-500">
                                        <i class="fal fa-user-graduate mr-2"></i> {{ 'Describe the profile'|trans }} *
                                    </label>
                                    <vue-editor name="newOfferTextareaProfile" id="newOfferTextareaProfile" v-model="job.descriptionProfile" :editor-toolbar="editorCustomToolbar"></vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="newOfferTextareaProfileRemainContent"><% remainNewJobProfileDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>

                                </div>
                            </div>
                            <div class="col pl-4 mt-5 d-flex justify-content-end mx-4 ">
                                <button id="create_new_offer_btn" class="btn btn-primary rounded-30 px-4" @click="validateCreateOffer()" :disabled="!enableCreateOfferBtn">{{ 'Create offer'|trans }}</button>
                            </div>
                            <div class="alert alert-danger errorCreate mt-4 ml-4" v-if="errorCreate.customError">
                                <ul>
                                    <li v-for="err in errorCreate.customMessage"><% err %></li>
                                </ul>
                            </div>
                            <div class="alert alert-danger errorModify mt-4 ml-4" v-if="errorCreate.error">
                                <p><% errorCreate.message %></p>
                            </div>
                        </div>
                    </div>

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

        <div id="modifyOffer" class="bg-white newOffer form-campaign px-5 pt-4 pb-5 d-none" style="height: auto !important;">
            <div class="w-100 mb-5 pb-4">
                <div class="header d-flex flex-column pl-2 mb-5">
                    <div class="slider-icon-group active ml-auto cursor-pointer" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeModalModifyOffer">
                        <div class="slider-icon">
                            <i class="fal fa-times text-white"></i>
                        </div>
                    </div>

                    <div class="title mt-3">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                      d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                      transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                            </svg>
                            <h5 class="ml-3 text-primary font-700 d-inline">{{ 'Modify offer'|trans }}</h5></div>
                    </div>
                </div>

                <div class="body-form mt-2" v-if="currentOffer.name">
                    <div id="step-1" class="step-1">
                        <div class="title-step d-flex align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">1</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer informations'|trans }}
                            </div>
                        </div>
                        <div class="body-step">
                            <div class="col pl-4 mt-4">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="nameCurrentJob" class="labelInput focusInput font-500">{{ 'Job title'|trans }} (H/F) *</label>
                                    <input type="text" id="nameCurrentJob" name="_nameCurrentJob" placeholder="{{ 'Job title'|trans }}"
                                           required="required" class="form-control no-placeholder" v-model="currentOffer.name">
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-3">
                                <div class="col pl-4 pr-0">
                                    <job-input-dropdown v-model="currentOffer.contractType" placeholder="Choose..." label="{{ 'Contract type'|trans }}" :data="contracts" key-option="value" :init-value="currentOffer.contractType" id="_current-contract" :required="true"></job-input-dropdown>
                                </div>
                                <div class="col">
                                    <job-input-dropdown v-model="currentOffer.education" placeholder="Choose..." label="{{ 'Education'|trans }}" :data="educations" key-option="value" :init-value="currentOffer.education" id="_current-education" :required="true"></job-input-dropdown>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-3">
                                <div class="col pl-4 pr-0">
                                    <job-input-dropdown v-model="currentOffer.experience" placeholder="Choose..." label="{{ 'Experience'|trans }}" :data="experiences" key-option="value" :init-value="currentOffer.experience" id="_current-experience" :required="true"></job-input-dropdown>
                                </div>
                                <div class="col">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="current-salaire" class="labelInput focusInput font-500">{{ 'Salary'|trans }}</label>
                                        <input type="text" id="current-salaire" name="_current-salaire" placeholder="Salaire"
                                               required="required" class="form-control no-placeholder position-relative" v-model="currentOffer.salary">
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-3">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="linkCurrentJob" class="labelInput focusInput font-500">{{ 'Job link'|trans }}</label>
                                    <input type="text" id="linkCurrentJob" name="_linkCurrentJob" placeholder="{{ 'Job link'|trans }}"
                                           class="form-control no-placeholder" v-model="currentOffer.link">
                                </div>
                            </div>
                            <div class="col pl-4 mt-3">
                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="idExtCurrentJob" class="labelInput focusInput font-500">{{ 'Job id'|trans }}</label>
                                    <input disabled="disabled" type="text" id="idExtCurrentJob" name="_idExtCurrentJob" placeholder="{{ 'Job id'|trans }}"
                                           class="form-control no-placeholder" v-model="currentOffer.idExt">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="step-2" class="step-2 mt-5">
                        <div class="title-step d-flex pt-4 align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">2</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer location'|trans }}
                            </div>
                        </div>

                        <div class="body-step">

                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <job-input-dropdown v-model="currentOffer.city" v-on:typing="getCities" placeholder="{{ 'City or Zip code'|trans }}" label="{{ 'City'|trans }}" :data="cities" id="_current-city" :init-value="currentOffer.city" :required="true"></job-input-dropdown>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div id="step-3" class="step-2 mt-5">
                        <div class="title-step d-flex pt-4 align-items-center">
                            <div class="slider-icon-group active"
                                 style="top: unset; left: unset; transform: unset; background-color: rgb(127, 239, 0);">
                                <div class="slider-icon"><span class="text-white font-weight-bold">2</span></div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Offer description'|trans }}
                            </div>
                        </div>

                        <div class="body-step">
                            <div class="col pl-4 mt-3 d-flex flex-column">

                                <div class="form-label-group position-relative input-login ml-4">
                                    <label for="modifyOfferTextareaCompany" class="labelInput focusInput font-500">
                                        <i class="fal fa-building mr-2"></i> {{ 'Describe your company'|trans }}
                                    </label>
                                    <vue-editor name="modifyOfferTextareaCompany" id="modifyOfferTextareaCompany" v-model="currentOffer.descriptionCompany" :editor-toolbar="editorCustomToolbar">
                                        <% currentOffer.descriptionCompany %>
                                    </vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="modifyOfferTextareaCompanyRemainContent"><% remainModifiedJobCompanyDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>
                                </div>

                                <div class="form-label-group position-relative input-login ml-4 mt-5">
                                    <label for="modifyOfferTextareaJob" class="labelInput focusInput font-500">
                                        <i class="fal fa-suitcase mr-2"></i> {{ 'Describe the job'|trans }}
                                    </label>
                                    <vue-editor name="modifyOfferTextareaJob" id="modifyOfferTextareaJob" v-model="currentOffer.descriptionJob" :editor-toolbar="editorCustomToolbar">
                                        <% currentOffer.descriptionJob %>
                                    </vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="modifyOfferTextareaJobRemainContent"><% remainModifiedJobMissionDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>
                                </div>

                                <div class="form-label-group position-relative input-login ml-4 mt-5">
                                    <label for="modifyOfferTextareaProfile" class="labelInput focusInput font-500">
                                        <i class="fal fa-user-graduate mr-2"></i> {{ 'Describe the profile'|trans }}
                                    </label>
                                    <vue-editor name="modifyOfferTextareaProfile" id="modifyOfferTextareaProfile" v-model="currentOffer.descriptionProfile" :editor-toolbar="editorCustomToolbar">
                                          <% currentOffer.descriptionProfile %>
                                    </vue-editor>
                                    <p class="small text-right">
                                        <span class="font-700" id="modifyOfferTextareaProfileRemainContent"><% remainModifiedJobProfileDescription %></span>
                                        {{ 'remaining characters'|trans }}
                                    </p>
                                </div>
                            </div>

                            <div class="col pl-4 mt-5 d-flex justify-content-end mx-4 ">
                                <button class="btn btn-primary rounded-30 px-4" @click="validateModifyOffer" id="modify_offer_btn" :disabled="!enableModifyOfferBtn">{{ 'Modify offer'|trans }}</button>
                            </div>

                            <div class="alert alert-danger errorModify mt-4 ml-4" v-if="errorModify.customError">
                                <ul>
                                    <li v-for="err in errorModify.customMessage"><% err %></li>
                                </ul>
                            </div>
                            <div class="alert alert-danger errorModify mt-4 ml-4" v-if="errorModify.error">
                                <p><% errorModify.message %></p>
                            </div>
                        </div>
                    </div>

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

        <div id="deleteOffer"
             class="modal-info shadow-1 position-absolute my-auto mx-auto p-4 bg-white d-none center-50"
             style="z-index: 9999;">
            <div class="d-flex justify-content-end mb-2 cursor-pointer" @click="closeModalDeleteOffer">
                <i class="fal fa-times"></i>
            </div>
            <div class="mt-4 mb-4 d-flex">
                <i class="fa-trash-alt fal text-danger fa-2x mx-auto"></i>
            </div>
            <div class="mb-4 mx-auto text-center w-75">
                {{ 'Do you really want to delete this offer?'|trans }}
            </div>
            <div class="d-flex justify-content-between pt-4">
                <span class="bg-light btn text-primary" @click="closeModalDeleteOffer">{{ 'Cancel'|trans }}</span>
                <a class="btn btn-danger text-white" @click="confirmDeleteOffer">{{ 'Delete'|trans }}</a>
            </div>
        </div>

        <div id="moderationModal" class="bg-white newOffer form-campaign px-5 pt-4 pb-5 d-none" style="min-height: 100% !important; height: auto !important; right: 0 !important;">
            <div class="w-100 mb-5 pb-4">
                <div class="header d-flex flex-column pl-2 mb-5">
                    <div class="slider-icon-group active ml-auto cursor-pointer" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeModalModeration()">
                        <div class="slider-icon">
                            <i class="fal fa-times text-white"></i>
                        </div>
                    </div>
                </div>

                <div class="body-form">
                    <div class="card card-header-actions h-100 border-0">
                        <div class="card-header border">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical text-gray-300">
                                <circle cx="12" cy="12" r="1"></circle>
                                <circle cx="12" cy="5" r="1"></circle>
                                <circle cx="12" cy="19" r="1"></circle>
                            </svg> MODERATIONS
                        </div>
                        <div class="card-body">
                            <template v-if="currentOffer.status === 'pending'">
                                <div class="alert alert-warning text-center">
                                    Votre offre est en cours de modération
                                    <i class="fal fa-hourglass-half"></i>
                                </div>
                            </template>
                            <template v-if="currentOffer.status === 'reported'">

                                <span class="font-600 my-4 d-block">
                                    Voici les motifs de rejet pour cette offre:
                                </span>
                                <div class="px-4 py-3" v-for="(error, index) in currentOffer.errorInfo">
                                    <div class="d-flex justify-content-between">
                                        <div class="w-100 mb-3">
                                            <span class="text-primary font-700">
                                               <% index + 1 %>.
                                            </span>
                                            <span class="text-primary font-600 text-underline">
                                                <% error.field %>
                                            </span>
                                        </div>
                                        <div class="w-100 border bg-light text-right">
                                            <span class=" px-2 py-1 font-700 rounded-2 text-primary text-right d-flex justify-content-end ml-auto">
                                                 <% error.reason %>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="border rounded-2">
                                        <p class="font-italic px-3 py-3 mb-3 font-400 chips_red">
                                            <% error.comment %>
                                        </p>
                                        <p class="px-2 my-3">
                                            <% currentOffer[camelize(replaceCharacterBy(error.field, '_', ' '))] %>
                                        </p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="modal-backdrop" class="fade modal-backdrop d-none"></div>

    </div>

    <script>
        Vue.component('job-input-dropdown', {
            delimiters: ['<%', '%>'],
            props: {
                label: String,
                initValue: String,
                data: {type: [Array, Object], default: []},
                required: {type: Boolean, default: false},
                placeholder: {type: String, default: function () { return this.label }},
                id: String,
                name: {type: String, default: function () { return this.id }},
                keyOption: {type: String, default: "key"},
                returnRawOption: {type: Boolean, default: false},
                removeOnInput: {type: Boolean, default: false},
                disabled: {type: Boolean, default: false},
            },
            data: function () {
                return {
                    show: false,
                    oldValue: (this.initValue) ? this.initValue : "",
                    selectedValue: (this.initValue) ? this.initValue : ""
                }
            },
            watch: {
                show: function (newVal) {
                    if (!newVal) {
                        document.removeEventListener('mouseup', this.closeDropdownListener)
                        this.oldValue = this.selectedValue;
                    } else {
                        document.addEventListener('mouseup', this.closeDropdownListener)
                    }
                }
            },
            methods: {
                selectOption: function (option) {
                    this.show = false;
                    this.oldValue = !this.removeOnInput ? option.value : '';
                    this.selectedValue = !this.removeOnInput ? option.value : '';
                    if (this.returnRawOption) this.$emit('input', option)
                    else {
                        if (this.keyOption === "key") this.$emit('input', option.key);
                        else this.$emit('input', option.value);
                    }
                },
                closeDropdownListener(e) {
                    if (e.target !== this.$refs.dropdownElement) {
                        this.show = false
                    }
                }
            },
            template: `<div class="form-label-group position-relative input-login">
                            <label :for="name" class="labelInput focusInput font-500"><% label %> <% (required) ? '*' : '' %></label>
                            <input type="text" :id="id" :name="name"
                                   :required="required"
                                   :placeholder="placeholder"
                                   @click="show=!show"
                                   @keyup="$emit('typing', $event.target.value); show=true"
                                   autocomplete="off"
                                   :disabled="disabled"
                                   class="form-control no-placeholder position-relative" v-model="oldValue">
                            <i class="fal fa-chevron-down cursor-pointer position-absolute small" style="top: 40px; right: 10px" @click="show=!show"></i>
                            <div :class="{'d-none': !show}" class="position-absolute bg-white p-4 dropdown-select-list w-100 shadow-1 rounded-2 mt-2 overflow-auto"
                                 style="z-index: 999999; max-height: 300px;" ref="dropdownElement">
                                <div class="bg-white d-flex flex-column overflow-auto" style="z-index: 999998;">
                                    <span class="py-2 px-4 cursor-pointer" v-for="(value, key) in data" :key="key" @click="selectOption({key:key, value:value})"><% value %></span>
                                </div>
                            </div>
                        </div>`
        })

        Vue.use(VueToast);




        vmt = new Vue({
            el: '#appOffers',
            delimiters: ['<%', '%>'],
            data: {
                pageLimit: 30,
                page: 1,
                handle: true,
                editorCustomToolbar: [
                    [{ header: [false, 1, 2, 3, 4, 5, 6] }],
                    ["bold", "italic", "underline", "strike"],
                    [
                        { align: "" },
                        { align: "center" },
                        { align: "right" },
                        { align: "justify" }
                    ],
                    ["blockquote", "code-block"],
                    [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
                    [{ indent: "-1" }, { indent: "+1" }],
                    [{ color: [] }, { background: [] }],
                    ["clean"]
                ],
                job: {
                    name: "",
                    contractType: "",
                    experience: "",
                    education: "",
                    city: [],
                    descriptionCompany: "",
                    descriptionJob: "",
                    descriptionProfile: "",
                    salary: "",
                    link: '',
                    idExt: [""]
                },
                defaultJob: {},
                offers: [],
                totalOffers: {{ jobCount }},
                filterJob: '',
                allOffersChecked: false,
                checkedOffers: [],
                profileCompleteCheck: {% if not isProfileComplete %}false{% else %}true{% endif %},
                currentOffer: {},
                currentIndexOffer: null,
                isNewJob: false,
                experiences: {{ experiences|json_encode|raw }},
                educations: {{ educations|json_encode|raw }},
                contracts: {{ contracts|json_encode|raw }},
                cities: [],
                error_infos: [
                    {"field":"descrfiption_company",
                        "comment":"le contenu est probl\u00e8meatique",
                        "reason":"Contenu de l\u2019offre trop vague"
                    },
                    {"field":"description_job",
                        "comment":"veuillez preciser si c'est pour une femme ou un homme",
                        "reason":"Offre genr\u00e9e"
                    },

                    {"field":"description_profile",
                        "comment":"gros probl\u00e8me",
                        "reason":"Autre"
                    },
                    {"field":"salary",
                        "comment":"benevolat?",
                        "reason":"Autre"
                    },
                    {"field":"education",
                        "comment":"test test",
                        "reason":"Mentions discriminatoires dans l\u2019offre"
                    },
                    {"field":"experience",
                        "comment":"pas compris",
                        "reason":"Offre r\u00e9dig\u00e9e en langue \u00e9trang\u00e8re"
                    }
                ],
                errorCreate: {
                    error: false,
                    message: [],
                    customError: false,
                    customMessage: ""
                },
                errorModify: {
                    error: false,
                    message: [],
                    customError: false,
                    customMessage: ""
                },
                loading: false,
                isRoleSaas: {{ is_granted('ROLE_SAAS') ? 'true' : 'false' }}
            },
            components: {
                checkbox: {
                    template:
                        `<input class="inp-cbx" :value="val" type="checkbox" style="display: none;"  v-model="checked" @change="onChangeReasons"/>`,
                    props: ['value', 'val'],
                    data: function () {
                        return {
                            checkedProxy: false
                        }
                    },
                    computed: {
                        checked: {
                            get: function () {
                                return this.value
                            },
                            set: function (val) {
                                this.checkedProxy = val
                            }
                        }
                    },
                    methods: {
                        onChangeReasons: function (e) {
                            this.$emit('input', this.checkedProxy)
                        }
                    }
                },
            },

            computed: {
                remainNewJobCompanyDescription() {
                  return ( 5000 - this.job.descriptionCompany.replace(/<\/?[^>]+>/ig, " ").length );
                },
                remainNewJobProfileDescription() {
                    return ( 5000 - this.job.descriptionProfile.replace(/<\/?[^>]+>/ig, " ").length );
                },
                remainNewJobMissionDescription() {
                    return ( 5000 - this.job.descriptionJob.replace(/<\/?[^>]+>/ig, " ").length );
                },
                remainModifiedJobCompanyDescription() {
                    return ( 5000 - this.currentOffer.descriptionCompany.replace(/<\/?[^>]+>/ig, " ").length );
                },
                remainModifiedJobMissionDescription() {
                    return ( 5000 - this.currentOffer.descriptionJob.replace(/<\/?[^>]+>/ig, " ").length );
                },
                remainModifiedJobProfileDescription() {
                    return ( 5000 - this.currentOffer.descriptionProfile.replace(/<\/?[^>]+>/ig, " ").length );
                },
                enableCreateOfferBtn() {
                    return (this.job.name !== '' && this.job.contractType !== '' && this.job.experience && this.job.education !== ''
                        && this.job.city.length > 0 && this.job.descriptionCompany !== '' && this.job.descriptionJob !== ''
                        && this.job.descriptionProfile !== '') === true
                },
                enableModifyOfferBtn() {
                    return (this.currentOffer?.name !== '' && this.currentOffer?.contractType !== '' && this.currentOffer?.experience !== ''
                        && this.currentOffer?.education !== '' && this.currentOffer?.city !== '' && this.currentOffer?.descriptionCompany !== ''
                        && this.currentOffer?.descriptionJob !== '' && this.currentOffer?.descriptionProfile !== '') === true
                },
                filteredCities() {
                    let filteredCities = {}
                    for (const [key, value] of Object.entries(this.cities)) {
                        if (this.job.city.find(el => el.key == key) === undefined) filteredCities[key] = value
                    }
                    return filteredCities
                }
            },
            mounted: function() {
                this.defaultJob = JSON.parse(JSON.stringify(this.job));
                this.getJobPendingList();
            },
            methods: {
                getJobPendingList: function() {
                    $(".loader").fadeIn(450);

                    $.ajax({
                        url: "{{ path('get_job_pending', {'id': advertiser.id}) }}",
                        method: "POST",
                        data: {
                            page: this.page,
                            pageLimit: this.pageLimit,
                            filter: this.filterJob
                        }
                    }).success((data) => {
                        if (data) {
                            this.offers = data.allJobs;
                            this.totalOffers = data.jobCount;
                        }
                        this.reloadTippy();
                    }).always(() => $(".loader").fadeOut(450));
                },
                getCities: function (search) {
                    if (window.xhrAtsOfferCities) window.xhrAtsOfferCities.abort();
                    if (window.timeoutAtsOfferCities) clearTimeout(window.timeoutAtsOfferCities);
                    window.timeoutAtsOfferCities = setTimeout(() => {
                        if (search !== null && search.trim().length > 2) {
                            window.xhrAtsOfferCities = $.post("{{ path('job_search_city') }}", {search: search}).done((data) => {
                                this.cities = data;
                                window.xhrAtsOfferCities = null;
                                window.timeoutAtsOfferCities = null;
                            })
                        }
                    }, 500);
                },
                checkAll: function () {
                    this.checkedOffers = [];

                    if (this.allOffersChecked) {
                        this.offers.forEach((offer) => {
                            this.checkedOffers.push(offer.id);
                        });
                    }

                },
                navigatePage: function (direction) {
                    if (direction === 'forward') {
                        this.page = Math.ceil(this.totalOffers / this.pageLimit);
                        this.getJobPendingList();
                    } else if (direction === 'backward') {
                        this.page = 1;
                        this.getJobPendingList();
                    } else if (direction === 'next' && this.page < Math.ceil(this.totalOffers / this.pageLimit)) {
                        this.page++;
                        this.getJobPendingList();
                    }
                    else if (direction === 'prev' && this.page > 1) {
                        this.page--;
                        this.getJobPendingList();
                    }
                },
                humanizeText: function (str) {
                    return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
                },
                SliderFunction: function (id) {
                    $('.div-' + id).slideToggle(600);
                    $("#id-" + id).toggleClass("active");
                },
                expandLineApply: function (id) {
                    this.SliderFunction(id);
                },
                timeAgo: function (date) {
                    return ($.timeago(date));
                },

                checkProfile: function (id) {
                    $("#modal-backdrop").addClass('show').removeClass('d-none');
                    $("#check-full-profil").removeClass('d-none');

                    this.profileCompleteCheck = true;
                },

                closeModalCheckProfile: function () {
                    $("#modal-backdrop").addClass('d-none').removeClass('show');
                    $("#check-full-profil").addClass('d-none');
                },

                createOffer: function () {
                   /* if (this.profileCompleteCheck === false) {
                        this.checkProfile();
                    } else {
                        $("#modal-backdrop").addClass('show').removeClass('d-none');
                        $("#newOffer").removeClass("d-none").addClass("active");
                        $(".main").addClass("position-fixed");
                        this.isNewJob = true;
                    }*/

                    $("#modal-backdrop").addClass('show').removeClass('d-none');
                    $("#newOffer").removeClass("d-none").addClass("active");
                    $(".main").addClass("position-fixed");
                    this.isNewJob = true;
                },
                closeModalNewOffer: function () {
                    this.isNewJob = false;
                    $("#modal-backdrop").addClass('d-none').removeClass('show');
                    $("#newOffer").addClass("d-none").removeClass("active");
                    $(".main").removeClass("position-fixed");
                    this.resetErrors('Create')
                },
                validateCreateOffer: function () {
                    let self = this

                    if (!self.loading) {
                        self.loading = true
                        self.resetErrors('Create')

                        $(".loader").fadeIn(450);
                        $.ajax({
                            url: "{{ path('new_pending_job', {'id': advertiser.id}) }}",
                            method: "post",
                            data: {
                                newOffer: this.job
                            }
                        }).done(function (data) {

                            if (data.success) {
                                self.offers.unshift(...data.success);
                                self.$forceUpdate();

                                Vue.$toast.open({
                                    message: 'Votre offre a été créée !',
                                    type: 'success',
                                    position: 'top'
                                });

                                Object.assign(self.job, JSON.parse(JSON.stringify(self.defaultJob)));

                                self.closeModalNewOffer();
                                self.handle = false;
                                self.$nextTick(function () {
                                    self.handle = true;
                                })

                            } else if (data.error) {
                                self.errorCreate.error = true
                                self.errorCreate.message = data.error
                                vmt.$toast.open({
                                    message: data.error,
                                    type: 'error',
                                    position: 'top'
                                });

                            } else if (data.customError) {
                                self.errorCreate.customError = true
                                self.errorCreate.customMessage = data.customError
                                let message = data.customError.join('<br>')
                                vmt.$toast.open({
                                    message: message,
                                    type: 'error',
                                    position: 'top'
                                });

                            } else if (data.maxLimitReachedOffer) {
                                self.errorCreate.error = true
                                self.errorCreate.message = "Vous ne pouvez pas créer plus d'offres (20 offres maximum)"
                            } else {
                                vmt.$toast.open({
                                    message: 'Something went wrong!',
                                    type: 'error',
                                    position: 'top'
                                });
                            }
                        }).always(function () {
                            self.loading = false
                            $(".loader").fadeOut(500);
                        });
                    }
                },
                resetErrors(type) {
                    this[`error${type}`].error = false
                    this[`error${type}`].message = []
                    this[`error${type}`].customError = false
                    this[`error${type}`].customMessage = ""
                },
                fillJob: function (key, value, type, typeKey) {

                   this.job[type] = value;
                   this.job[typeKey] = key;

                    $("#dropdown-select-list-country").addClass("d-none");

                    $("#dropdown-select-list-contract").addClass("d-none");
                    $("#dropdown-select-list-education").addClass("d-none");
                    $("#dropdown-select-list-experience").addClass("d-none");

                },
                modifyOffer: function (index) {
                    this.isNewJob = false;
                    this.currentIndexOffer = index;
                    this.currentOffer = [];
                    this.$nextTick(() => {
                        this.currentOffer = JSON.parse(JSON.stringify(this.offers[index]));
                        $("#modal-backdrop").addClass('show').removeClass('d-none');
                        $("#modifyOffer").removeClass("d-none").addClass("active");
                        $('main').addClass('position-fixed');
                    })
                },
                closeModalModifyOffer: function () {
                    this.isNewJob = false;
                    $("#modal-backdrop").addClass('d-none').removeClass('show');
                    $("#modifyOffer").addClass("d-none").removeClass("active");
                    $('main').removeClass('position-fixed');
                    this.currentOffer = []
                    this.resetErrors('Modify')
                },
                validateModifyOffer: function() {
                    let self = this

                    if (self.loading) return;

                    self.loading = true;
                    self.resetErrors('Modify')

                    $.ajax({
                        url: "{{ path('modify_job', {'id': advertiser.id}) }}",
                        method: "post",
                        data: {
                            modifyOffer: this.currentOffer
                        }
                    }).done(function (data) {
                        if (data.successModifyValidated) {
                            self.offers[self.currentIndexOffer] = data.successModifyValidated;
                            self.getJobPendingList();
                            self.closeModalModifyOffer();

                            Vue.$toast.open({
                                message: 'Votre offre a été modifiée!',
                                type: 'success',
                                position: 'top'
                            });

                        } else if (data.successModifyPending) {
                            self.offers[self.currentIndexOffer] = data.successModifyPending;
                            self.getJobPendingList();
                            self.closeModalModifyOffer();

                            Vue.$toast.open({
                                message: 'Votre offre a été modifiée!',
                                type: 'success',
                                position: 'top'
                            });

                        } else if (data.error) {
                            self.errorModify.error = true
                            self.errorModify.message = data.error

                            Vue.$toast.open({
                                message: 'Unexpected error !',
                                type: 'error',
                                position: 'top'
                            });
                        }  else if (data.customError) {
                            self.errorModify.customError = true
                            self.errorModify.customMessage = data.customError
                            Vue.$toast.open({
                                message: data.error,
                                type: 'error',
                            });

                        }

                    }).always(function () {
                        $(".loader").fadeOut(450);
                        self.loading = false;
                    });
                },
                deleteOffer: function (index) {
                    this.currentIndexOffer = index;
                    this.currentOffer = this.offers[index];
                    $("#modal-backdrop").addClass('show').removeClass('d-none');
                    $("#deleteOffer").removeClass("d-none").addClass("active");
                    $('main').addClass('position-fixed');
                },
                deleteCheckedOffers: function (offers) {

                    $(".loader").fadeIn();
                    this.resetSelectOffers();
                    $(".loader").fadeOut(600);

                },
                resetSelectOffers: function () {
                    this.checkedOffers = [];
                },
                closeModalDeleteOffer: function () {
                    $("#modal-backdrop").addClass('d-none').removeClass('show');
                    $("#deleteOffer").addClass("d-none").removeClass("active");
                    $('main').removeClass('position-fixed');
                    this.currentOffer = {};
                },
                confirmDeleteOffer: function () {

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

                    $("#modal-backdrop").addClass('d-none').removeClass('show');
                    $("#deleteOffer").addClass("d-none").removeClass("active");

                    let self = this
                    $.ajax({
                        url: "{{ path('delete_job_pending', {'id': advertiser.id}) }}",
                        method: "post",
                        data: {
                            offerToDelete: this.currentOffer
                        }
                    }).success(function (data) {
                        if (data) {
                            self.offers.splice(self.currentIndexOffer, 1);
                            self.$forceUpdate();

                            Vue.$toast.open({
                                message: 'Votre offre a été supprimée!',
                                type: 'success',
                                position: 'top'
                            });


                        } else {

                            Vue.$toast.open({
                                message: 'Unexpected error!',
                                type: 'error',
                                position: 'top'
                            });
                        }
                    });

                    this.closeModalDeleteOffer();
                    $(".loader").fadeOut(450);
                },
                experiencePicker: function () {
                    $("#dropdown-select-list-experience").toggleClass("d-none");

                    $("#dropdown-select-list-education").addClass("d-none");
                    $("#dropdown-select-list-contract").addClass("d-none");

                },
                educationPicker: function () {

                    $("#dropdown-select-list-education").toggleClass("d-none");

                    $("#dropdown-select-list-experience").addClass("d-none");
                    $("#dropdown-select-list-contract").addClass("d-none");
                },
                contractPicker: function () {
                    $("#dropdown-select-list-contract").toggleClass("d-none");
                    $("#dropdown-select-list-education").addClass("d-none");
                    $("#dropdown-select-list-experience").addClass("d-none");
                },
                countryPicker: function () {

                    $("#dropdown-select-list-country").toggleClass("d-none");

                    $("#dropdown-select-list-contract").addClass("d-none");
                    $("#dropdown-select-list-education").addClass("d-none");
                    $("#dropdown-select-list-experience").addClass("d-none");

                },

                showModeration: function (index) {

                    let self = this;

                    self.currentIndexOffer = index;
                    self.currentOffer = [];

                    self.$nextTick(() => {
                        self.currentOffer = self.offers[index];
                        $("#moderationModal").removeClass("d-none");
                        $("#modal-backdrop").removeClass("d-none").addClass("show");
                    })
                },

                closeModalModeration: function () {
                    $("#moderationModal").addClass("d-none");
                    $("#modal-backdrop").addClass("d-none").removeClass("show");
                },

                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, '');
                },
                replaceCharacterBy: function (str, char1, char2) {
                    return str.replace(char1, char2);
                },
                addCity(city) {
                    if (this.job.city.find(el => el.key === city.key) === undefined && this.job.city.length <= 5) {
                        this.job.city.push(city)
                        if (this.job.city.length > 1) {
                            this.job.idExt.push("")
                        }
                    }
                },
                removeCity(i) {
                    this.job.city.splice(i, 1)
                    if (this.job.idExt.length > 1) {
                        this.job.idExt.splice(i, 1)
                    } else {
                        this.job.idExt.splice(i + 1, 1)
                    }
                },
                reloadTippy() {
                    this.$nextTick(() => {
                        tippy('[data-tippy-content]', {
                            arrow: true,
                            animation: 'scale',
                            animateFill: false,
                            maxWidth: 240,
                            duration: 0
                        })
                    })
                }
                /*      CheckInputValue: function () {
                          /!* return this.titleJob.length > 0
                               && this.cityField.length > 0
                               && this.contractField.length > 0
                               && this.educationField.length > 0
                               && this.experienceField.length > 0
                               && this.companyDescription.length > 0
                               && this.profileDescription.length > 0
                               && this.missionDescription.length > 0*!/
                      },*/
            }
        });

    </script>
{% endblock %}