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

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

{% block pageheader %}Jobs ATS{% endblock %}

{% block body %}

    <div id="appJob" 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">
                <div class="title-page col-12 text-left  pb-4 mb-2 pl-0 d-flex">
                    {% if not is_granted('ROLE_SAAS') %}
                        Jobs |
                        <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>

                {% if ((rules != "All jobs") or (userRules != null)) %}
                    <div class="row col-md-12 py-4" v-if="rulesGroup.length > 0">
                        <span class="lead pb-4 mr-5 title-page">Filter By : </span>
                        <div v-for="(rules, i) in rulesGroup" v-if="rules !== null" class="px-5 bg-white col-md-6 rounded-2 roles-group-container">
                            <div class="containter-roles roles-wrapper">
                                <span v-if="i > 0" class="badge badge-info text-uppercase mx-auto px-2 d-inline mb-4 ml-2">and</span>
                                <template v-for="(group, j) in rules.groups">
                                        <span v-if="j > 0" class="badge badge-dark badge-job text-uppercase px-2 py-1 mb-4 ml-2"><% group.logic %></span>
                                        <div class="panel panel-default ">
                                            <div class="panel-body">
                                                <table class="table rules-table">
                                                    <tbody>
                                                    <template v-for="(groupRule, k) in group.rules">
                                                        <tr v-if="k > 0">
                                                            <td colspan="9">
                                                                <span class="badge badge-info d-inline text-uppercase mx-auto px-4"><% groupRule.logic %></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <% getAttributeLabel(groupRule.var1) %>
                                                            </td>
                                                            <td>
                                                                <% getOperatorLabel(groupRule.type) %>
                                                            </td>
                                                            <td v-if="groupRule.var1 != 'age' && groupRule.var1 != 'category'">
                                                                <span v-for="item in groupRule.var2.split(/\|\||,/g)" class="badge badge-job badge-info mx-1 mb-4 ml-2"><% item %></span>
                                                            </td>
                                                            <td v-if="groupRule.var1 == 'age'" style="width: 40%;">
                                                                <% groupRule.var2 %> days
                                                            </td>
                                                            <td v-if="groupRule.var1 == 'category'">
                                                                <span v-for="item in groupRule.var2.split(/,/g)" class="badge badge-job badge-info mx-1 mb-4 ml-2"><% getCategoryLabel(item) %></span>
                                                            </td>
                                                        </tr>
                                                    </template>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                </template>
                            </div>
                            <div class="wrapper-roles-group">
                                <div id="button-up-role-group-slider" class="slider-icon-group position-absolute" style="left: 50%;">
                                    <div class="slider-icon">
                                        <i class="fal fa-arrow-down" ></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <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">
                        {{ 'Jobs'|trans }}
                    </div>
                    <div class="col-md-6 text-right px-0">
                        <span class="pr-5">{{ 'Total Jobs'|trans }}</span>
                        <span class="font-weight-bold"> {{ appliesCount }}</span>
                    </div>
                </div>
                {#            START SIMPLE DATA TABLES FOR FORMS       #}

                <div class="simple-data-table d-flex flex-column px-0 col-12 mb-5">
                    <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">
                            <div class="pagination pr-4 my-auto">
                                <span>Page <b><% page %></b> of <% Math.ceil(totalItems / 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="filteringJob()"
                                           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="table-headers px-3 py-4 rounded-2">
                        <div class="col-12 row">
                            {% if not(is_granted('ROLE_SAAS')) %}
                                <div class="col-2">
                                    <span>{{ 'Id'|trans }}</span>
                                </div>
                            {% endif %}
                            <div class="col-2">
                                <span>{{ 'Title'|trans }}</span>
                            </div>
                            <div class="col text-center">
                                <span>{{ 'Applies'|trans }}</span>
                            </div>
                            <div class="col text-center">
                                <span>{{ 'Company'|trans }}</span>
                            </div>
                            <div class="col text-center">
                                <span>{{ 'City'|trans }}</span>
                            </div>
                            <div class="col text-center">
                                <span>{{ 'Country'|trans }}</span>
                            </div>
                            <div class="col-2">
                                <span>{{ 'Category'|trans }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-content">
                        {#                        {% for job in jobs %}#}
                        <div class="simple-line-data bg-white px-3 py-3 mt-2" v-for="(item, i) in items" v-if="items.length > 0">
                            <div class="col-12 row align-items-center">
                                {% if not(is_granted('ROLE_SAAS')) %}
                                    <div class="col-2 cursor-pointer" @click="showKanbanModal(item.id, i)">
                                        <a class="title-form">
                                            {#                                            {{ job.id }}#}
                                            <% item.idExt %>
                                        </a>
                                    </div>
                                {% endif %}
                                <div class="col-2 d-flex justify-content-between cursor-pointer" @click="showKanbanModal(item.id, i)">
                                    <div class="title-form">
                                        <% item.title %>
                                    </div>
                                    <i class="fal fa-folder-open ml-1 d-flex my-auto" data-tippy-content="see all applies for this Job" title="see the applies for this Job"></i>
                                </div>
                                <div class="col text-center">
                                    <div class="numbers-form-applies">
                                        <% item.appliesCount %>
                                        <span v-if="(item.appliesCount - item.checkCount) > 0" class="chips chips_green"><% item.appliesCount - item.checkCount %> {{ 'unread'|trans }}</span>
                                    </div>
                                </div>
                                <div class="col text-center">
                                    <% item.company %>
                                    {#                                        {{ job.company }}#}
                                </div>
                                <div class="col text-center">
                                    <% item.city %>
                                    {#                                        {{ job.city }}#}
                                </div>
                                <div class="col text-center">
                                    <% item.country %>
                                    {#                                        {{ job.country }}#}
                                </div>
                                <div class="col-2 justify-content-between d-flex">
                                    <% item.domain %>
                                   {# <a :href="item.link" target="_blank">  #}
                                    {#     <i class="far fa-external-link"></i>   #}
                                    {#  </a> #}
                                    <span class="cursor-pointer ml-2"
                                          data-tippy-content="see the job towards company siteweb or the Daf"
                                          title="see the job towards company siteweb or the Daf" @click="showDropdown(item.id)">
                                         <i class="far fa-external-link "></i>
                                    </span>
                                    <ul class="dropdown-select-menu list-unstyled rounded-2" style="display: none" :class="'dropdown-' + item.id">
                                       <li class="font-600 text-left">
                                           <a :href="'https://applies.goldenbees.fr/job/' + dafToken + '/' + item.idExt" target="_blank" class="cursor-pointer">
                                             {{ 'link to the Daf'|trans }}
                                           </a>
                                       </li>
                                        <li class="font-600 text-left">
                                            <a :href="item.link" target="_blank" class="cursor-pointer">
                                                {{ 'link to'|trans }} <% item.company %> {{ 'siteweb'|trans }}
                                            </a>
                                        </li>
                                    </ul>
                                    {#                                        {{ job.category }}#}
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div class="alert alert-info">{{ 'There is no job'|trans }}</div>
                        </div>
                        {#                        {% endfor %}#}
                    </div>
                </div>
                {#            END SIMPLE DATA TABLES FOR FORMS        #}
            </section>
            {#        {{ message }}#}

            <!--        Modals         -->
            <div class="modal fade modal-kanban-jobs" id="modal-kanban-jobs" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content py-4 px-5 border-0">
                        <button type="button" class="close text-right mb-4 position-absolute" data-dismiss="modal" style="right: 30px;">&times;</button>
                        <div class="modal-header row">
                            <div class="col-sm-4">
                                <div class="lead">
                                    <% job.title %>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="lead text-center">Location <span class="ml-3 font-600 text-primary">
                                    <% job.city %>
                                </span></div>
                            </div>
                            <div class="col-sm-4"></div>
                        </div>
                        <div class="content bg-light overflow-auto ">
                            <div class="content-columns  px-5" style="width: 2000px;">
                                <div class="draggable-content d-flex flex-row">
                                    <div class="col-md-3 bg-white px-4 pb-3 my-5 mr-3 column-draggable rounded-2">
                                        <div class="title-drag-column py-4 d-flex justify-content-between">
                                            <span class="chips toqualify chips_bordered"> {{ 'to qualify'|trans }}</span>
                                            <span><b><% toqualifyApplies.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                        </div>
                                        <div class="body-drag-column p-3 rounded-2" >
                                            <draggable :list="toqualifyApplies" ghost-class="moving-card" :animation="200" group="applies" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'toqualify'">
                                                <div class="card-draggable p-4 mb-2 bg-white" v-for="applyToQ in toqualifyApplies" :key="applyToQ.id" :data-apply-id="applyToQ.id">
                                                    <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between">
                                                        <div class="">
                                                            <div class="font-600 mr-2 my-auto d-block">
                                                                <span><% applyToQ.name %></span>
                                                            </div>
                                                            <span class="badge badge-job"><% timeAgo(applyToQ.date) %></span>
                                                        </div>

                                                        <div class="select-status">
                                                            <div class="statut-option">
                                                                <span class="chips toqualify chips_bordered"> {{ 'to qualify'|trans }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="d-flex" @click="showHistory(applyToQ)" v-if="applyToQ.reasons">
                                                            <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                            <span class="text-underline">{{ 'history'|trans }}</span>
                                                        </div>
                                                        <span class="cv ml-auto text-underline small font-700" @click="modalInfoCv(applyToQ.id, applyToQ.idDafInstance, applyToQ.ext)">{{ 'Show resume'|trans }}</span>
                                                    </div>
                                                    <div class="d-flex mt-3 text-secondary">
                                                        <div class="col-sm-12 px-0">
                                                            <ul class="list-unstyled">
                                                                <li class="mb-1" v-if="applyToQ.phoe">
                                                                    <i class="fal fa-phone-alt"></i>
                                                                    <span class="ml-2"> <span><% applyToQ.phone %></span></span>
                                                                </li>
                                                                <li class="d-flex flex-row mb-1" v-if="applyToQ.email">
                                                                    <i class="fal fa-envelope mr-2 my-auto"></i>
                                                                    <span class="ml-2"> <span><% applyToQ.email %></span></span>
                                                                </li>
                                                                <li class="d-flex flex-row" v-if="applyToQ.data">
                                                                    <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% applyToQ.data %></span>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>

{#                                                    <div class="row mt-4">#}
{#                                                        {% if dafInfos['geoDistance'] == true %}#}
{#                                                            #}
{#                                                            <div class="col-sm-6 job-card-modal ml-4 px-0" style="max-width: 100px">#}
{#                                                                <span title="Distance less than 10km" class="d-flex align-items-baseline justify-content-around my-auto float-left">#}
{#                                                   <i class="fas fa-map-marker-alt d-none" style="color: limegreen"></i>#}
{#                                                   <div class="mb-0" style="max-width: 100px;">#}
{#                                                       <div v-if="Number.isInteger(applyToQ.geoDistance) && applyToQ.geoDistance">#}

{#                                                           <span v-if=" applyToQ.geoDistance < 10" title="Distance less than 10km" class="d-flex float-left align-items-baseline justify-content-around my-auto geo-distance closeDistance ">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 10px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                           <span class="small" style="opacity: .6;">#}
{#                                                                                Very Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                           </span>#}
{#                                                           <span v-else-if="(applyToQ.geoDistance >= 10 && applyToQ.geoDistance <= 30)" title="Distance between 10 and 30km" class="float-left d-flex  geo-distance closeDistance align-items-baseline justify-content-around my-auto">#}
{#                                                               <i class="far fa-walking position-absolute" style="top: -5px; right: 30px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}
{#                                                           </span>#}
{#                                                           <span v-else-if="(applyToQ.geoDistance > 30 && applyToQ.geoDistance <= 50)"#}
{#                                                                 title="Distance between 30 and 50km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance far">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 55px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Far#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                                                    </span>#}
{#                                                           <span v-else-if="(applyToQ.geoDistance > 50 && applyToQ.geoDistance <= 100)"#}
{#                                                                 title="Distance between 50 and 100km" class="float-left d-flex align-items-baseline justify-content-around my-auto  geo-distance very-far">#}

{#                                                                                        <i class="far fa-walking position-absolute" style="top: -5px; right: 85px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                                Very Far#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                         <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="(applyToQ.geoDistance > 100 && applyToQ.geoDistance <= 1000)"#}
{#                                                                 title="Distance between 100 and 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-aera">#}

{#                                                                                         <i class="far fa-walking position-absolute" style="top: -5px; right: 105px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                                               Out of area#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                        <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="applyToQ.geoDistance > 1000"#}
{#                                                                 title="Distance greater than 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-country">#}

{#                                                                  <i class="fas fa-male position-absolute" style=" top: -5px;  right: 105px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                               Out of Country#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                  <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                       </div>#}
{#                                                   </div>#}
{#                                               </span>#}
{#                                                            </div>#}
{#                                                        {% endif %}#}
{#                                                        {% if dafInfos['scoring'] == true %}#}
{#                                                            <div class="col-sm-6 d-flex flex-column">#}
{#                                                                <span class="small mb-1 d-block ml-auto">Relevance</span>#}
{#                                                                <div class=" d-block ml-auto">#}
{#                                                                    <div class="progress" style="height: 7px; width: 100px;">#}
{#                                                                        <div data-percentage="0%" v-bind:style="{ width: applyToQ.score + '%' }" aria-valuenow=""#}
{#                                                                             class="progress-bar progress-bar-modal"#}
{#                                                                             role="progressbar"#}
{#                                                                             aria-valuemin="0"#}
{#                                                                             aria-valuemax="100"#}
{#                                                                             :data-value="applyToQ.score">#}
{#                                                                        </div>#}
{#                                                                    </div>#}
{#                                                                </div>#}
{#                                                            </div>#}
{#                                                        {% endif %}#}
{#                                                    </div>#}

                                                </div>
                                            </draggable>
                                        </div>
                                    </div>
                                    <div class="col-md-3 bg-white px-4 pb-3 my-5 mr-3 column-draggable rounded-2">
                                        <div class="title-drag-column py-4 d-flex justify-content-between">
                                            <span class="chips qualified">{{ 'qualified'|trans }}</span>
                                            <span><b><% qualifiedApplies.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                        </div>
                                        <div class="body-drag-column p-3 rounded-2" >
                                            <draggable :list="qualifiedApplies" ghost-class="moving-card" :animation="200" group="applies" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'qualified'">
                                                <div class="card-draggable p-4 mb-2 bg-white" v-for="apply in qualifiedApplies" :key="apply.id" :data-apply-id="apply.id">
                                                    <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between">

                                                        <div class="">
                                                            <div class="font-600 mr-2 my-auto d-block">
                                                                <span><% apply.name %></span>
                                                            </div>
                                                            <span class="badge badge-job"><% timeAgo(apply.date) %></span>
                                                        </div>

                                                        <div class="select-status">
                                                            <div class="statut-option">
                                                                <span class="chips qualified">{{ 'qualified'|trans }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                            <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                            <span class="text-underline">{{ 'history'|trans }}</span>
                                                        </div>
                                                        <span class="cv ml-auto text-underline small font-700 pl-2 py-2" @click="modalInfoCv(apply.id, apply.idDafInstance, apply.ext)">{{ 'Show resume'|trans }}</span>
                                                    </div>
                                                    <div class="d-flex mt-3 text-secondary">
                                                        <div class="col-sm-12 px-0">
                                                            <ul class="list-unstyled">
                                                                <li class="mb-1" v-if="apply.phone">
                                                                    <i class="fal fa-phone-alt"></i>
                                                                    <span class="ml-2"><% apply.phone %></span>
                                                                </li>
                                                                <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                                    <i class="fal fa-envelope mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% apply.email %></span>
                                                                </li>
                                                                <li class="d-flex flex-row" v-if="apply.data">
                                                                    <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% apply.data %></span>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>


{#                                                    <div class="row mt-4">#}
{#                                                        {% if dafInfos['geoDistance'] == true %}#}
{#                                                            <div class="col-sm-6 job-card-modal ml-4 px-0" style="max-width: 100px">#}
{#                                                                <span title="Distance less than 10km" class="d-flex align-items-baseline justify-content-around my-auto float-left">#}
{#                                                   <i class="fas fa-map-marker-alt d-none" style="color: limegreen"></i>#}
{#                                                   <div class="mb-0" style="max-width: 100px;">#}
{#                                                       <div v-if="Number.isInteger(apply.geoDistance) && apply.geoDistance">#}

{#                                                           <span v-if=" apply.geoDistance < 10" title="Distance less than 10km" class="d-flex float-left align-items-baseline justify-content-around my-auto geo-distance closeDistance ">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 10px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                           <span class="small" style="opacity: .6;">#}
{#                                                                                Very Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance >= 10 && apply.geoDistance <= 30)" title="Distance between 10 and 30km" class="float-left d-flex  geo-distance closeDistance align-items-baseline justify-content-around my-auto">#}
{#                                                               <i class="far fa-walking position-absolute" style="top: -5px; right: 30px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}
{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 30 && apply.geoDistance <= 50)"#}
{#                                                                 title="Distance between 30 and 50km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance far">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 55px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Far#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                                                    </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 50 && apply.geoDistance <= 100)"#}
{#                                                                 title="Distance between 50 and 100km" class="float-left d-flex align-items-baseline justify-content-around my-auto  geo-distance very-far">#}

{#                                                                                        <i class="far fa-walking position-absolute" style="top: -5px; right: 85px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                                Very Far#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                         <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 100 && apply.geoDistance <= 1000)"#}
{#                                                                 title="Distance between 100 and 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-aera">#}

{#                                                                                         <i class="far fa-walking position-absolute" style="top: -5px; right: 105px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                                               Out of area#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                        <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="apply.geoDistance > 1000"#}
{#                                                                 title="Distance greater than 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-country">#}

{#                                                                  <i class="fas fa-male position-absolute" style=" top: -5px;  right: 105px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                               Out of Country#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                  <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                       </div>#}
{#                                                   </div>#}
{#                                               </span>#}
{#                                                            </div>#}


{#                                                        {% endif %}#}
{#                                                        {% if dafInfos['scoring'] == true %}#}
{#                                                            <div class="col-sm-6 d-flex flex-column">#}
{#                                                                <span class="small mb-1 ml-auto d-block">Relevance</span>#}
{#                                                                <div class="ml-auto d-block">#}
{#                                                                    <div class="progress" style="height: 7px; width: 100px;">#}
{#                                                                        <div data-percentage="0%" v-bind:style="{ width: apply.score + '%' }" aria-valuenow=""#}
{#                                                                             class="progress-bar progress-bar-modal"#}
{#                                                                             role="progressbar"#}
{#                                                                             aria-valuemin="0"#}
{#                                                                             aria-valuemax="100"#}
{#                                                                             :data-value="apply.score">#}
{#                                                                        </div>#}
{#                                                                    </div>#}
{#                                                                </div>#}
{#                                                            </div>#}
{#                                                        {% endif %}#}
{#                                                    </div>#}



                                                </div>
                                            </draggable>
                                        </div>
                                    </div>
                                    <div class="col-md-3 bg-white px-4 pb-3 my-5 mr-3 column-draggable rounded-2">
                                        <div class="title-drag-column py-4 d-flex justify-content-between">
                                            <span class="chips hired"> {{ 'hired'|trans }}</span>
                                            <span><b><% hiredApplies.length %></b> <small>applies</small></span>
                                        </div>
                                        <div class="body-drag-column p-3 rounded-2">
                                            <draggable :list="hiredApplies" ghost-class="moving-card" :animation="200" group="applies" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'hired'">
                                                <div class="card-draggable p-4 mb-2 bg-white" v-for="applyHired in hiredApplies" :key="applyHired.id" :data-apply-id="applyHired.id">
                                                    <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between">
                                                        <div class="">
                                                            <div class="font-600 mr-2 my-auto d-block">
                                                                <span><% applyHired.name %></span>
                                                            </div>
                                                            <span class="badge badge-job"><% timeAgo(applyHired.date) %></span>
                                                        </div>

                                                        <div class="select-status">
                                                            <div class="statut-option">
                                                                <span class="chips hired"> {{ 'hired'|trans }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="d-flex" @click="showHistory(applyHired)" v-if="applyHired.reasons">
                                                            <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                            <span class="text-underline">{{ 'history'|trans }}</span>
                                                        </div>
                                                        <span class="cv ml-auto text-underline small font-700" @click="modalInfoCv(applyHired.id, applyHired.idDafInstance, applyHired.ext)">{{ 'Show resume'|trans }}</span>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="col-sm-12 px-0">
                                                            <ul class="list-unstyled">
                                                                <li class="mb-1" v-if="applyHired.phone">
                                                                    <i class="fal fa-phone-alt"></i>
                                                                    <span class="ml-2"><% applyHired.phone %></span>
                                                                </li>
                                                                <li class="d-flex flex-row mb-1" v-if="applyHired.email">
                                                                    <i class="fal fa-envelope mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% applyHired.email %></span>
                                                                </li>
                                                                <li class="d-flex flex-row" v-if="applyHired.data">
                                                                    <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% applyHired.data %></span>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>



{#                                                    <div class="row mt-4">#}
{#                                                        {% if dafInfos['geoDistance'] == true %}#}

{#                                                            <div class="col-sm-6 job-card-modal ml-4 px-0" style="max-width: 100px">#}
{#                                                                <span title="Distance less than 10km" class="d-flex align-items-baseline justify-content-around my-auto float-left">#}
{#                                                   <i class="fas fa-map-marker-alt d-none" style="color: limegreen"></i>#}
{#                                                   <div class="mb-0" style="max-width: 100px;">#}
{#                                                       <div v-if="Number.isInteger(applyHired.geoDistance) && applyHired.geoDistance">#}

{#                                                           <span v-if=" applyHired.geoDistance < 10" title="Distance less than 10km" class="d-flex float-left align-items-baseline justify-content-around my-auto geo-distance closeDistance ">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 10px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                           <span class="small" style="opacity: .6;">#}
{#                                                                                Very Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                           </span>#}
{#                                                           <span v-else-if="(applyHired.geoDistance >= 10 && applyHired.geoDistance <= 30)" title="Distance between 10 and 30km" class="float-left d-flex  geo-distance closeDistance align-items-baseline justify-content-around my-auto">#}
{#                                                               <i class="far fa-walking position-absolute" style="top: -5px; right: 30px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}
{#                                                           </span>#}
{#                                                           <span v-else-if="(applyHired.geoDistance > 30 && applyHired.geoDistance <= 50)"#}
{#                                                                 title="Distance between 30 and 50km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance far">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 55px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Far#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                                                    </span>#}
{#                                                           <span v-else-if="(applyHired.geoDistance > 50 && applyHired.geoDistance <= 100)"#}
{#                                                                 title="Distance between 50 and 100km" class="float-left d-flex align-items-baseline justify-content-around my-auto  geo-distance very-far">#}

{#                                                                                        <i class="far fa-walking position-absolute" style="top: -5px; right: 85px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                                Very Far#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                         <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="(applyHired.geoDistance > 100 && applyHired.geoDistance <= 1000)"#}
{#                                                                 title="Distance between 100 and 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-aera">#}

{#                                                                                         <i class="far fa-walking position-absolute" style="top: -5px; right: 105px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                                               Out of area#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                        <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="applyHired.geoDistance > 1000"#}
{#                                                                 title="Distance greater than 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-country">#}

{#                                                                  <i class="fas fa-male position-absolute" style=" top: -5px;  right: 105px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                               Out of Country#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                  <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                       </div>#}
{#                                                   </div>#}
{#                                               </span>#}
{#                                                            </div>#}


{#                                                        {% endif %}#}
{#                                                        {% if dafInfos['scoring'] == true %}#}
{#                                                            <div class="col-sm-6 d-flex flex-column">#}
{#                                                                <span class="small mb-1">Relevance</span>#}
{#                                                                <div class="ml-auto d-block">#}
{#                                                                    <div class="progress" style="height: 7px; width: 100px;">#}
{#                                                                        <div data-percentage="0%" v-bind:style="{ width: applyHired.score + '%' }" aria-valuenow=""#}
{#                                                                             class="progress-bar progress-bar-modal"#}
{#                                                                             role="progressbar"#}
{#                                                                             aria-valuemin="0"#}
{#                                                                             aria-valuemax="100"#}
{#                                                                             :data-value="applyHired.score">#}
{#                                                                        </div>#}
{#                                                                    </div>#}
{#                                                                </div>#}
{#                                                            </div>#}
{#                                                        {% endif %}#}
{#                                                    </div>#}



                                                </div>
                                            </draggable>

                                        </div>
                                    </div>
                                    <div class="col-md-3 bg-white px-4 pb-3 my-5 mr-3 column-draggable rounded-2">
                                        <div class="title-drag-column py-4 d-flex justify-content-between">
                                            <span class="chips unqualified"> {{ 'unqualified'|trans }}</span>
                                            <span><b><% unqualifiedApplies.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                        </div>
                                        <div class="body-drag-column p-3 rounded-2">
                                            <draggable  :list="unqualifiedApplies" ghost-class="moving-card" :animation="200" group="applies" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'unqualified'">
                                                <div class="card-draggable p-4 mb-2 bg-white" v-for="apply in unqualifiedApplies" :key="apply.id" :data-apply-id="apply.id">
                                                    <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between">
                                                        <div class="">
                                                            <div class="font-600 mr-2 my-auto d-block">
                                                                <span><% apply.name %></span>
                                                            </div>
                                                            <span class="badge badge-job"><% timeAgo(apply.date) %></span>
                                                        </div>
                                                        <div class="select-status">
                                                            <div class="statut-option">
                                                                <span class="chips unqualified"> {{ 'unqualify'|trans }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                            <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                            <span class="text-underline">{{ 'history'|trans }}</span>
                                                        </div>
                                                        <span class="cv ml-auto text-underline small font-700" @click="modalInfoCv(apply.id, apply.idDafInstance, apply.ext)">{{ 'Show resume'|trans }}</span>
                                                    </div>
                                                    <div class="d-flex mt-3">
                                                        <div class="col-sm-12 px-0">
                                                            <ul class="list-unstyled">
                                                                <li class="mb-1" v-if="apply.phone">
                                                                    <i class="fal fa-phone-alt"></i>
                                                                    <span class="ml-2"><% apply.phone %></span>
                                                                </li>
                                                                <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                                    <i class="fal fa-envelope mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% apply.email %></span>
                                                                </li>
                                                                <li class="d-flex flex-row" v-if="apply.data">
                                                                    <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                                    <span class="ml-2"><% apply.data %></span>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>



{#                                                    <div class="row mt-4">#}
{#                                                        {% if dafInfos['geoDistance'] == true %}#}
{#    #}
{#                                                            <div class="col-sm-6 job-card-modal ml-4 px-0" style="max-width: 100px">#}
{#                                                                <span title="Distance less than 10km" class="d-flex align-items-baseline justify-content-around my-auto float-left">#}
{#                                                   <i class="fas fa-map-marker-alt d-none" style="color: limegreen"></i>#}
{#                                                   <div class="mb-0" style="max-width: 100px;">#}
{#                                                       <div v-if="Number.isInteger(apply.geoDistance) && apply.geoDistance">#}

{#                                                           <span v-if=" apply.geoDistance < 10" title="Distance less than 10km" class="d-flex float-left align-items-baseline justify-content-around my-auto geo-distance closeDistance ">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 10px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                           <span class="small" style="opacity: .6;">#}
{#                                                                                Very Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance >= 10 && apply.geoDistance <= 30)" title="Distance between 10 and 30km" class="float-left d-flex  geo-distance closeDistance align-items-baseline justify-content-around my-auto">#}
{#                                                               <i class="far fa-walking position-absolute" style="top: -5px; right: 30px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Close#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                    <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}
{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 30 && apply.geoDistance <= 50)"#}
{#                                                                 title="Distance between 30 and 50km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance far">#}

{#                                                                 <i class="far fa-walking position-absolute" style="top: -5px; right: 55px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                Far#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}


{#                                                                                    </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 50 && apply.geoDistance <= 100)"#}
{#                                                                 title="Distance between 50 and 100km" class="float-left d-flex align-items-baseline justify-content-around my-auto  geo-distance very-far">#}

{#                                                                                        <i class="far fa-walking position-absolute" style="top: -5px; right: 85px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                            <span class="small" style="opacity: .6;">#}
{#                                                                                                Very Far#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                         <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="(apply.geoDistance > 100 && apply.geoDistance <= 1000)"#}
{#                                                                 title="Distance between 100 and 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-aera">#}

{#                                                                                         <i class="far fa-walking position-absolute" style="top: -5px; right: 105px;"></i>#}
{#                                                                                        <div class="progress-line">#}
{#                                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                                               Out of area#}
{#                                                                                            </span>#}
{#                                                                                        </div>#}
{#                                                                                        <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                           <span v-else-if="apply.geoDistance > 1000"#}
{#                                                                 title="Distance greater than 1000km" class="float-left d-flex align-items-baseline justify-content-around my-auto geo-distance out-of-country">#}

{#                                                                  <i class="fas fa-male position-absolute" style=" top: -5px;  right: 105px;"></i>#}
{#                                                                        <div class="progress-line">#}
{#                                                                             <span class="small" style="opacity: .6;">#}
{#                                                                               Out of Country#}
{#                                                                            </span>#}
{#                                                                        </div>#}
{#                                                                  <i class="fas fa-map-marker-alt position-absolute" style="right: -5px; top: -5px;"></i>#}

{#                                                           </span>#}
{#                                                       </div>#}
{#                                                   </div>#}
{#                                               </span>#}
{#                                                            </div>#}



{#                                                        {% endif %}#}
{#                                                        {% if dafInfos['scoring'] == true %}#}
{#                                                            <div class="col-sm-6 d-flex flex-column">#}
{#                                                                <span class="small mb-1 d-block ml-auto">Relevance</span>#}
{#                                                                <div class="d-block ml-auto">#}
{#                                                                    <div class="progress" style="height: 7px; width: 100px;">#}
{#                                                                        <div data-percentage="0%" v-bind:style="{ width: apply.score + '%' }" aria-valuenow=""#}
{#                                                                             class="progress-bar progress-bar-modal"#}
{#                                                                             role="progressbar"#}
{#                                                                             aria-valuemin="0"#}
{#                                                                             aria-valuemax="100"#}
{#                                                                             :data-value="apply.score">#}
{#                                                                        </div>#}
{#                                                                    </div>#}
{#                                                                </div>#}
{#                                                            </div>#}
{#                                                        {% endif %}#}
{#                                                    </div>#}



                                                </div>
                                            </draggable>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer py-3 bg-white border-0">
                            <button class="btn-info btn px-3 py-2 cursor-pointer" type="button" data-dismiss="modal">
                                {{ 'close'|trans }}
                            </button>
                        </div>
                    </div>

                </div>
            </div>

{#            Modal reasons #}


            <div class="modal fade" id="unqualifiedToQualified" tabindex="-1" role="dialog" aria-labelledby="UtoQ" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                        <div class="modal-header py-3 pb-4 border-0">
                            <h5 class="modal-title mx-auto" id="qualif"><% applyToMove.name %></h5>
                        </div>

                        <div class="modal-body text-center py-5">
                            <p>{{ 'This candidate has been classified into unqualified apply.'|trans }}</p>
                            <p>{{ 'Are you sure you want to change it into qualified apply?'|trans }}</p>
                            <p>{{ 'Give us one or more reason(s)'|trans }}</p>
                            <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==applyStatusIdLabel.qualified">
                                <div class="checkbox">
                                    <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                                    <label class="cbx" :for="'qualifReason'+i">
                                       <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>
                                        <span class="ml-2"><% qualif.reason %></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                                <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                            </div>
                        </div>

                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(); getAllAppliesByJob(job.id)">Close</button>
                            <button type="button" class="btn btn-primary" id="applyIsUnqualified"
                                    @click="qualifApply(applyToMove.id, 'qualified', applyToMove.idDafInstance, applyToMove.name, applyToMove.email, selectedReasons, explainReasons, '#unqualifiedToQualified')">
                                {{ 'Validate'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade modal-bg" id="unqualifiedModal" tabindex="-1" role="dialog" aria-labelledby="unqualified">
                <div class="modal-dialog" role="document">
                    <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                        <div class="modal-header py-3 pb-4 border-0">
                            <h5 class="modal-title mx-auto" id="qualif"><% applyToMove.name %></h5>
                        </div>
                        <div class="alert alert-warning text-left" v-if="!isMail"><p>{{ 'No email will be sent.'|trans }}</p>
                            <p>{{ 'You have not yet configured a message to send to unqualified candidates.'|trans }}</p></div>
                        <div class="modal-body  py-5">
                            <h5 class="text-center mb-5">{{ 'Are you sure you want to unqualify this apply?'|trans }}</h5>
                            <h6 class="d-block mt-4 mb-4"><strong>{{ 'Give us one or more reason(s)'|trans }}</strong></h6>
                            <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.unqualified" class="text-left">
                                <div class="checkbox">
                                    <checkbox v-model="selectedReasons" :val="unqualif" :id="'unqualifReason'+i"></checkbox>
                                    <label class="cbx" :for="'unqualifReason'+i">
                                       <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>
                                        <span class="ml-2"><% unqualif.reason %></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                                <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyToMove.id); getAllAppliesByJob(job.id)">{{ 'Close'|trans }}</button>
                            <button type="button" class="btn btn-primary"
                                    @click="qualifApply(applyToMove.id, 'unqualified', applyToMove.idDafInstance, applyToMove.name, applyToMove.email, selectedReasons, explainReasons, '#unqualifiedModal')">
                                {{ 'Validate'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade modal-bg" id="toQualifiedModal" tabindex="-1" role="dialog" aria-labelledby="toqualify">
                <div class="modal-dialog" role="document">
                    <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                        <div class="modal-header py-3 pb-4 border-0">
                            <h5 class="modal-title mx-auto" id="toQualify"><% applyToMove.name %></h5>
                        </div>
                        <div class="modal-body text-center py-5">
                            <h6><strong>{{ 'Are you sure you want to cancel this apply?'|trans }}</strong></h6>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyToMove.id); getAllAppliesByJob(job.id)">{{ 'Close'|trans }}</button>
                            <button type="button" class="btn btn-primary"
                                    @click="qualifApply(applyToMove.id, 'to qualify', applyToMove.idDafInstance, applyToMove.name, applyToMove.email, selectedReasons, explainReasons, '#toQualifiedModal')">
                                {{ 'Validate'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="hiredModal" tabindex="-1" role="dialog" aria-labelledby="hired">
                <div class="modal-dialog" role="document">
                    <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                        <div class="modal-header py-3 pb-4 border-0">
                            <h5 class="modal-title mx-auto" id="hired"><% applyToMove.name %></h5>
                        </div>
                        <div class="modal-body text-center pt-5 pb-2">
                            <h5 class="text-center mb-5"><strong>{{ 'Are you sure you want to change it into hired apply?'|trans }}</strong></h5>
                            {#                            <img src="{{ asset('Dashboard/img/status_hired.png') }}" alt="" class="img-fluid">#}
                            <div class="form-group mt-5">
                                <h6 class="d-block mt-4 mb-2 text-left">{{ 'Need to add something ?'|trans }}</h6>
                                <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyToMove.id); getAllAppliesByJob(job.id)">{{ 'Close'|trans }}</button>
                            <button type="button" class="btn btn-primary"
                                    @click="qualifApply(applyToMove.id, 'hired', applyToMove.idDafInstance, applyToMove.name, applyToMove.email, selectedReasons, explainReasons, '#hiredModal')">
                                {{ 'Validate'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade modal-bg"  id="qualifModal" tabindex="-1" role="dialog" aria-labelledby="qualif">
                <div class="modal-dialog" role="document">
                    <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                        <div class="modal-header py-3 pb-4 border-0">
                            <h5 class="modal-title mx-auto" id="qualif"><% applyToMove.name %></h5>
                        </div>
                        <div class="modal-body modal-qualif">
                            <h6 class="d-block mt-4 mb-4"><strong>{{ 'Give us one or more reason(s)'|trans }}</strong></h6>
                            <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==applyStatusIdLabel.qualified">
                                <div class="checkbox">
                                    <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                                    <label class="cbx" :for="'qualifReason'+i">
                                       <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>
                                        <span class="ml-2"><% qualif.reason %></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                                <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyToMove.id); getAllAppliesByJob(job.id)">{{ 'Close'|trans }}</button>
                            <button type="button" class="btn btn-primary" id="applyIsUnqualified"
                                    @click="qualifApply(applyToMove.id, 'qualified', applyToMove.idDafInstance, applyToMove.name, applyToMove.email, selectedReasons, explainReasons, '#qualifModal')">
                                {{ 'Validate'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="historicChangeStatus" tabindex="-1" role="dialog" aria-labelledby="HM">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header d-block border-0 bg-white mb-2 mt-4">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title lead">
                                <i class="fal fa-clock mr-2"></i>
                                {{ 'Status change history'|trans }}
                            </h3>
                        </div>
                        <div class="modal-body modal-other-apply bg-light px-5 pt-5">
                            <div class="col-sm-12">
                                <table class="table-bordered table table-striped table-hover">
                                    <tr>
                                        <td class="bg-white">{{ 'User'|trans }}</td>
                                        <td class="bg-white">{{ 'Date'|trans }}</td>
                                        <td class="bg-white">{{ 'Qualification'|trans }}</td>
                                        <td class="bg-white">{{ 'Reasons'|trans }}</td>
                                        <td class="bg-white">{{ 'More Infos'|trans }}</td>
                                    </tr>

                                    <template v-if="reasons">
                                        <tr v-for="reason in reasons" >
                                            <td><% reason.username %></td>
                                            <td><% reason.reasonDate %></td>
                                            <td v-if="reason.qualif == null">{{ 'To Qualify'|trans }}</td>
                                            <td v-if="reason.qualif == 0">{{ 'Unqualified'|trans }}</td>
                                            <td v-if="reason.qualif == 1">{{ 'Qualified'|trans }}</td>
                                            <td v-if="reason.qualif == 2">{{ 'Hired'|trans }}</td>
                                            <td>
                                                <ul v-for="one in reason.reasons">
                                                    <li><% one %></li>
                                                </ul>
                                            </td>
                                            <td><% reason.explainReasons %></td>
                                        </tr>
                                    </template>
                                    <tr v-else>
                                        <div class="alert alert-info text-center">{{ 'No status change yet'|trans }}</div>
                                    </tr>
                                </table>
                            </div>

                        </div>
                        <div class="modal-footer border-0 bg-light">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'Close'|trans }}</button>
                        </div>
                    </div>
                </div>
            </div>
            {#    cv modal #}
            <div class="modal fade bd-example-modal-lg" id="infoApply" tabindex="-1" role="dialog" aria-labelledby="iApply" style="overflow: auto">
                <div class="modal-dialog modal-xl bg-light rounded-2" role="document">
                    <div class="modal-content bg-light" style="min-height: 1000px;">
                        <div class="modal-header border-0 pt-5 p-r-l-6 d-flex row">
                            <div class="col-lg-3 col-md-12 col-sm-12">
                                <div class="title-page col-12 text-left pb-2 mb-2 d-flex">
                                    <h2 class="lead mr-2">{{ 'Applies'|trans }} / </h2>
                                    <h2 class="lead font-400" >{{ 'apply N°'|trans }}  <% infoApply.id %> </h2>
                                </div>
                            </div>
                            {#                    <% infoApply %>#}
                            <div class="col-lg-9 col-md-12 col-sm-12 d-flex justify-content-between">
                                <div class="lead w-50"><% infoApply.jobName %></div>
                            </div>
                            <button type="button" class="close font-300" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" style="font-size: 2rem;">&times;</span>
                            </button>
                        </div>
                        <div class="modal-iApply modal-body p-r-l-6 d-flex">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
                                <div class="col-sm-12 bg-white mb-3 pb-4 rounded" >
                                    <div class="section-title py-4 d-flex justify-content-between">
                                        <div class="">
                                            <i class="fad fa-user-tie"></i>
                                            <span class="font-600 ml-2">{{ 'Candidat'|trans }}</span>
                                            <br>
                                            <i class="font-italic small">{{ 'Applied on'|trans }} <% infoApply.date %></i>
                                        </div>
                                        <div class="status d-flex w-75 justify-content-end">
                                            <i>status</i>
                                            <div class="ml-3">
                                                <div class="statut-option">
                                                    <span v-if="infoApply.hired == 1" class="chips hired">
                                                        <span>
                                                            {{ 'hired'|trans }}
                                                        </span>
                                                    </span>
                                                    <span v-if="infoApply.qualified == 1" class="chips qualified">
                                                        <span>{{ 'qualified'|trans }}</span>
                                                    </span>
                                                    <span v-if="infoApply.unqualified == 1" class="chips unqualified">
                                                        <span>{{ 'unqualified'|trans }}</span>
                                                    </span>
                                                    <span v-if="infoApply.toQualify == 1" class="chips toqualify chips_bordered">
                                                        <span>{{ 'to qualify'|trans }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="section-body py-4">
                                        <div class="d-flex justify-content-between mb-3">
                                            <div>{{ 'Name'|trans }}
                                            </div>
                                            <span><b> <% infoApply.name %> </b></span>
                                        </div>
                                        <div class="d-flex justify-content-between  d-none mb-3">
                                            <span>{{ 'Date of birth'|trans }}</span>
                                            <span><b></b></span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>{{ 'Phone'|trans }}</span>
                                            <span><b><% infoApply.phone %></b></span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>{{ 'Mail'|trans }}</span>
                                            <span><b><% infoApply.email %></b></span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>{{ 'Location'|trans }}</span>
                                            <span><b v-if="infoApply.city !== null"><% infoApply.city %></b>
                                                <b v-else><% infoApply.state %></b>
                                            </span>
                                        </div>


{#                                        <div class="d-flex justify-content-between mt-3 mb-2" v-if="infoApply.score">#}
{#                                            {% if dafInfos['scoring'] == true %}#}
{#                                                <span>Relevance</span>#}
{#                                                <div class="">#}
{#                                                    <div class="progress" style="height: 7px; width: 100px;">#}
{#                                                        <div data-percentage="0%" v-bind:style="{ width: infoApply.score + '%' }" aria-valuenow=""#}
{#                                                             class="progress-bar progress-bar-modal"#}
{#                                                             role="progressbar"#}
{#                                                             aria-valuemin="0"#}
{#                                                             aria-valuemax="100"#}
{#                                                             :data-value="infoApply.score">#}
{#                                                        </div>#}
{#                                                    </div>#}
{#                                                    <span style="font-size: 10px; font-weight: 600" class="d-none"> <% infoApply.score %>%</span>#}
{#                                                </div>#}
{#                                            {% endif %}#}
{#                                        </div>#}
{#                                        <div class="d-flex justify-content-between mt-3 mb-2" v-if="infoApply.geoDistance">#}
{#                                            {% if dafInfos['geoDistance'] == true %}#}
{#                                                <span>Distance</span>#}
{#                                                <div class="">#}
{#                                                    <div v-if="Number.isInteger(infoApply.geoDistance) && infoApply.geoDistance" class="d-flex">#}
{#                                                    <span v-if="infoApply.geoDistance < 10" title="Distance less than 10km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                              <i class="fas fa-map-marker-alt" style="color: #54D87D"></i>#}
{#                                                              <p class="mb-0 pl-1 ">Very close</p>#}
{#                                                        </span>#}
{#                                                        <span v-else-if="(infoApply.geoDistance >= 10 && infoApply.geoDistance <= 30)"#}
{#                                                              title="Distance between 10 and 30km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                            <i class="fas fa-map-marker-alt"#}
{#                                                               style="color: greenyellow;"></i>#}
{#                                                            <p class="mb-0 mt-2 ml-2">Close</p>#}
{#                                                        </span>#}
{#                                                        <span v-else-if="(infoApply.geoDistance > 30 && infoApply.geoDistance <= 50)"#}
{#                                                              title="Distance between 30 and 50km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                            <i class="fas fa-map-marker-alt"#}
{#                                                               style="color: gold;"></i>#}
{#                                                            <p class="mb-0 mt-2 ml-2">Far</p>#}
{#                                                        </span>#}
{#                                                        <span v-else-if="(infoApply.geoDistance > 50 && infoApply.geoDistance <= 100)"#}
{#                                                              title="Distance between 50 and 100km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                            <i class="fas fa-map-marker-alt"#}
{#                                                               style="color: orange"></i>#}
{#                                                            <p class="mb-0 mt-2 ml-2">Very far</p>#}
{#                                                        </span>#}
{#                                                        <span v-else-if="(infoApply.geoDistance > 100 && infoApply.geoDistance <= 1000)"#}
{#                                                              title="Distance between 100 and 1000km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                            <i class="fas fa-map-marker-alt"#}
{#                                                               style="color: orangered"></i>#}
{#                                                            <p class="mb-0 mt-2 ml-2">Out of area</p>#}
{#                                                        </span>#}
{#                                                        <span v-else-if="infoApply.geoDistance > 1000"#}
{#                                                              title="Distance greater than 1000km" class="my-auto align-items-baseline mx-auto d-flex">#}
{#                                                            <i class="fas fa-map-marker-alt"#}
{#                                                               style="color: red"></i>#}
{#                                                            <p class="mb-0 mt-2 ml-2">Out of country</p>#}
{#                                                        </span>#}
{#                                                    </div>#}
{#                                                </div>#}
{#                                            {% endif %}#}
{#                                        </div>#}


                                        
                                    </div>
                                </div>
                                <div class="col-sm-12 bg-white pb-4 rounded" v-if="infoApply.customData">
                                    <div class="section-title py-4">
                                        <i class="fal fa-clipboard-user"></i>
                                        <span class="font-600 ml-2">{{ 'Additional Fields'|trans }}</span>
                                    </div>
                                    <div class="section-body py-4">
                                        <div class="d-flex justify-content-between mb-3">
                                            <span class="">{{ 'Desired Qualifications'|trans }}</span>
                                            <span class=""><b>{{ "Candidate's Qualifications"|trans }}</b></span>
                                        </div>

                                        <div v-if="infoApply.customData.custom">
                                            <div v-for="customData in infoApply.customData">

                                                <div class="d-flex justify-content-between mb-3" v-for="data in customData">
                                                    <span class="w-50"><% data.field_lib %></span>
                                                    <span class="w-50 text-right" style="word-break: break-word;"><b><% data.value_lib %></b></span>
                                                </div>
                                            </div>
                                            <hr class="my-2">
                                        </div>
                                        <div v-else>
                                            <div class="d-flex justify-content-between mb-3"  v-for="(custom, i) in infoApply.customData">
                                                <span class="w-50"><% i %></span>
                                                <span class="w-50 text-right" style="word-break: break-word;"><b><% custom %></b></span>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="col-sm-12 bg-white mb-3 pb-4 rounded" v-if="infoApply.info">
                                    <div class="section-title py-4">
                                        <i class="fal fa-user-graduate"></i>
                                        <span class="font-600 ml-2">{{ 'Additional Informations'|trans }}</span>
                                    </div>
                                    <div class="section-body">
                                        <p v-html="infoApply.info" class="p-3 bg-light"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-9 bg-white py-2" style="width: 100%; height: auto;" >
{#                                <div class="text-center vh-100 mt-5" v-if="modalNoCv">#}
{#                                    <div class="alert alert-warning py-3">No more apply</div>#}
{#                                </div>#}
                                <div>
                                    <iframe v-if="infoApply.linkPdf" :src="infoApply.linkPdf" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0"  style="width: 100%; height: 700px; border: none; pointer-events: all;"></iframe>
                                    <iframe v-else-if="infoApply.linkDoc" :src="infoApply.linkDoc" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0" style="width: 100%; height: 1000px;border: none; pointer-events: all;"></iframe>
                                    <div class="modal-footer border-0 d-flex">
                                        <div class="col-sm-12 text-center fixed-bottom bg-white py-3 border-top">
                                            <button class="btn btn-info d-inline py-2 px-4 rounded-30">
                                                <i class="far fa-arrow-to-bottom"></i>
                                                <a :href="infoApply.download" class="ml-1 text-white text-decoration-none" :download="infoApply.name + '_cv'">{{ 'Télécharger le cv'|trans }}</a>
                                            </button>
                                            <button type="button" class="btn btn-secondary float-right" data-dismiss="modal" @click="getAllAppliesByJob(job.id)">{{ 'Close'|trans }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#    end cv modal #}
        </main>
    </div>

    <script type="text/javascript">
        var vmt;
        $(document).ready(function () {
            $(".loader").fadeOut(500);
            $("#button-up-role-group-slider").on('click', function () {
                $(".roles-wrapper").toggleClass("containter-roles active", 1000, "easeOutSine");
                $(this).toggleClass("active");
                $(".wrapper-roles-group").toggleClass("active", 1000, "easeOutSine");
            });
        });
        Vue.use(VueToast);
            vmt = new Vue({
                el: '#appJob',
                delimiters: ['<%', '%>'],
                data: {
                    instanceId: {{ dafInstance.id }},
                    pageLimit: 30,
                    page: 1,
                    totalItems: {{ appliesCount }},
                    instances: [],
                    items: [],
                    hiredApplies: [],
                    dafToken: '{{ dafInstance.token }}',
                    applies: [],
                    infoApply: [],
                    unqualifiedApplies: [],
                    qualifiedApplies: [],
                    toqualifyApplies: [],
                    filterJob: '',
                    updateData: false,
                    titleJob: '',
                    job: {},
                    rulesGroup: [{{ rules|json_encode|raw }}, {{ userRules|json_encode|raw }}],
                    jobCategories: {{ jobCategories|json_encode|raw }},
                    attributes: [
                        { key: "id", name: "ID" },
                        { key: "company", name: "Company" },
                        { key: "category", name: "GB Category" },
                        { key: "contract", name: "Contract" },
                        { key: "title", name: "Title" },
                        { key: "description", name: "Description" },
                        { key: "link", name: "Link" },
                        { key: "domain", name: "Domain" },
                        { key: "city", name: "City" },
                        { key: "state", name: "State" },
                        { key: "zip", name: "Postal" },
                        { key: "country", name: "Country" },
                        { key: "custom", name: "Custom Data" },
                        { key: "age", name: "Age" },
                        { key: "jobgroup", name: "Job Group ID" },
                        { key: "salary", name: "Salary" }
                    ],
                    operators: [
                        { key: "eq", name: "equals", exclude: [] },
                        { key: "neq", name: "does not equal", exclude: [] },
                        { key: "gt", name: "is greater than", exclude: ["jobgroup", "category"] },
                        { key: "gte", name: "is greater than or equal to", exclude: ["jobgroup", "category"] },
                        { key: "lt", name: "is less than", exclude: ["jobgroup", "category"] },
                        { key: "lte", name: "is less than or equal to", exclude: ["jobgroup", "category"] },
                        { key: "in", name: "contains", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                        { key: "nin", name: "does not contain", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                        { key: "sw", name: "starts with", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                        { key: "ew", name: "ends with", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                        { key: "win", name: "words contains", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] }
                    ],
                    isDragging: false,
                    qualif: [],
                    resetMoveAction: false,
                    selectedReasons: [],
                    explainReasons: [],
                    dafReasons: {{ dafReasons|json_encode|raw }},
                    dafInfos: {{ dafInfos|json_encode|raw }},
                    isMail: {{ isMailAllInstance[dafInstance.id]|json_encode|raw }},
                    reasons: [],
                    msgErrorsChangeStatus: [],
                    applyToMove: [],
                    applyStatusIdLabel: {{ applyStatusIdLabel|json_encode|raw }}
                },
                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)
                            }
                        }
                    }
                },
                mounted() {
                    $("#modal-kanban-jobs").on('shown.bs.modal', () => {
                        this.showKanban();
                    });
                    this.getAllJobsApplies();
                },
                watch: {
                    isDragging (newValue) {
                        if (newValue){
                            this.delayedDragging= true
                            return
                        }
                        this.$nextTick( () =>{
                            this.delayedDragging =false
                        })
                    }
                },
                updated: function () {
                    var self = this;
                    this.chart();
                    if (self.updateData) {

                    }
                },
                methods: {
                    getAttributeLabel: function (key) {
                        var label = key;
                        this.attributes.forEach(function (v,k) {
                            if (v.key === key) {
                                label = v.name;
                                return false;
                            }
                        });
                        return label;
                    },
                    getOperatorLabel: function (key) {
                        var label = key;
                        this.operators.forEach(function (v,k) {
                            if (v.key === key) {
                                label = v.name;
                                return false;
                            }
                        });
                        return label;
                    },
                    getCategoryLabel: function (key) {
                        var label = key;
                        this.jobCategories.forEach(function (v, k) {
                            if (v.key === key) {
                                label = v.name;
                                return false;
                            }
                        });
                        return label;
                    },
                    handleDragEnd: function() {
                        this.$toast.show('dragEnd')
                        // update database here
                    },
                    onMove: function ({relatedContext, draggedContext}) {
                        const relatedElement = relatedContext.element;
                        const draggedElement = draggedContext.element;
                        return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                    },
                    showDropdown: function(id) {
                        $('.dropdown-' + id).fadeToggle("d-none");
                    },
                    resetCheckedReasons: function() {
                        this.selectedReasons = [];
                        this.explainReasons = [];
                        this.resetMoveAction = true;
                        return true;
                    },
                    confirmMoveAction: function(modal) {
                        $(modal).modal('show');
                        if (this.resetMoveAction) {
                            this.resetMoveAction = false;
                            return false;
                        } else {
                            return true;
                        }
                    },
                    getApplyById: function (id) {
                        var apply = null;
                        for (var i = 0; i < this.applies.length; i++) {
                            if (this.applies[i].id === id) {
                                apply = this.applies[i];
                                break;
                            }
                        }
                        return apply;
                    },
                    checkMove: function(evt,originalEvent) {
                        var draggedElement = this.applyToMove = this.getApplyById(evt.item.dataset.applyId);

                        var elt = evt.to;

                        if (evt.to.dataset.statut !== evt.from.dataset.statut) {
                            
                            if (($(elt).attr("data-statut") === "qualified")) {
                                $('#qualifModal').modal('show');
                            } else if (($(elt).attr("data-statut") === "toqualify")) {
                                $('#toQualifiedModal').modal('show');
                            } else if (($(elt).attr("data-statut") === "unqualified")) {
                                $('#unqualifiedModal').modal('show');
                            } else if (($(elt).attr("data-statut") === "hired")) {
                                $('#hiredModal').modal('show');
                            }
                        }
                    },
                    checkApply: function (applyId, dafId, jobId) {
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_check_new') }}",
                            method: "POST",
                            data: {
                                id: applyId,
                                instance: dafId
                            }
                        }).success(function (data) {
                            self.items.forEach(function (job) { if (job.id === jobId && job.checkCount < job.appliesCount) job.checkCount++; });
                        });
                    },
                    qualifApply: function(idApply, status, idDafInstance, name, email, selectedReasons, explainReasons, modal) {
                        var self = this;


                        if (selectedReasons.length != 0 || status == "to qualify" || status == "hired") {
                            $.ajax({
                                url: "{{ path('ajax_daf_qualif_applies') }}",
                                method: "POST",
                                data: {
                                    advertiserId: {{ advertiser.id }},
                                    email: self.applyToMove.email,
                                    name: self.applyToMove.name,
                                    dafInstanceId: idDafInstance,
                                    reasons: selectedReasons,
                                    explainReasons: explainReasons,
                                    qualifApply: self.applyToMove.id,
                                    typeApply: status
                                }
                            }).done(function (data) {
                                if (data) {
                                    self.selectedReasons = [];
                                    self.resetCheckedReasons();
                                    $(modal).modal("hide");
                                    //self.msgSuccessChangeStatus = "" ;
                                    Vue.$toast.success('status change done !', {
                                        position: 'top',
                                        duration: 3000,
                                        dismissible: true,
                                    });

                                }
                            });
                        }
                        else {
                            //self.msgErrorsChangeStatus = "You must choose a reason !";
                            Vue.$toast.error('You must choose at least one reason !', {
                                position: 'top',
                                duration: 3000,
                                dismissible: true,
                            });
                        }
                        self.resetCheckedReasons();
                    },
                    getOneApply: function(id) {
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_get_one_apply') }}",
                            method: "POST",
                            data: {
                                idApply: id
                            }
                        }).done(function (data) {
                            self.applyToMove = data;
                        });
                    },
                    modalInfoCv: function (id, idDafInstance, ext) {
                        var self = this;
                        if (ext === 'pdf') {
                            self.getApplyPdf(id, idDafInstance);
                        } else {
                            self.getSingleApplyDoc(id, idDafInstance);
                        }
                        $('#infoApply').modal('show');
                        this.checkApply(id, idDafInstance, this.job.id);
                    },
                    getApplyPdf: function(id, idDafInstance) {
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_daf_apply_pdf') }}",
                            method: "POST",
                            data: {
                                idApply: id,
                                dafId: idDafInstance
                            }
                        }).done(function (data) {
                            self.infoApply = data;
                        });
                    },
                    getSingleApplyDoc: function(id, idDafInstance) {
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_daf_apply_doc') }}",
                            method: "POST",
                            data: {
                                idApply: id,
                                dafId: idDafInstance
                            }

                        }).done(function (data) {
                            self.infoApply = data;

                        })
                    },
                    navigatePage: function (direction) {
                        if (direction === 'forward') {
                            this.page = Math.ceil(this.totalItems / this.pageLimit);
                            this.getAllJobsApplies();
                        } else if (direction === 'backward') {
                            this.page = 1;
                            this.getAllJobsApplies();
                        } else if (direction === 'next' && this.page < Math.ceil(this.totalItems / this.pageLimit)) {
                            this.page++;
                            this.getAllJobsApplies();
                        }
                        else if (direction === 'prev' && this.page > 1) {
                            this.page--;
                            this.getAllJobsApplies();
                        }
                    },
                    showKanbanModal: function(i,j) {
                        var self = this;
                        self.job = self.items[j];
                        self.getAllAppliesByJob(i);
                    },
                    showHistory: function(apply) {
                        var  self = this;
                        self.reasons = apply.reasons;
                        $('#historicChangeStatus').modal('show');

                    },
                    getAllAppliesByJob: function(idJob) {
                        $(".loader").fadeIn(300);
                        var i;
                        var j =0, k = 0, z =0, t = 0;
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_ats_job_applies') }}",
                            method: "POST",
                            data: {
                                dafId: {{ dafInstance.id }},
                                jobId: idJob,
                            }
                        }).done(function (data) {
                            self.applies = data;
                            self.toqualifyApplies = [];
                            self.hiredApplies = [];
                            self.unqualifiedApplies = [];
                            self.qualifiedApplies = [];
                            for (i = 0; i < data.length; i++ ) {
                                if (data[i].qualif === null || data[i].qualif === self.applyStatusIdLabel.toqualify) {
                                    self.toqualifyApplies.push(data[i]);
                                    j++;
                                } else if (data[i].qualif === self.applyStatusIdLabel.hired) {
                                    self.hiredApplies.push(data[i]);
                                    k++;
                                } else if (data[i].qualif === self.applyStatusIdLabel.unqualified) {
                                    self.unqualifiedApplies.push(data[i]);
                                    z++;
                                } else if (data[i].qualif === self.applyStatusIdLabel.qualified) {
                                    self.qualifiedApplies.push(data[i]);
                                    t++;
                                }
                            }
                            self.chart();

                            $('#modal-kanban-jobs').modal('show');
                        }).always(function () {
                            $(".loader").fadeOut(500);
                        });
                    },
                    getAppliesByStatus: function(applies) {
                        var self = this;
                        var i;
                        var j =0, k = 0, z =0, t = 0;
                        self.updateData = true;
                        for (i = 0; i < applies.length; i++ ) {
                            if (applies[i].qualif === null) {
                                self.toqualifyApplies[j] = applies;
                                j++;
                            }
                        }
                        self.updateData = false;
                    },

                    updateDraggableColumnHeight: function (){
                        $('[data-statut="toqualify"], [data-statut="unqualified"], [data-statut="hired"], [data-statut="qualified"]').height("auto");
                        const columnHeight = Math.max(
                            $('[data-statut="toqualify"]').height(),
                            $('[data-statut="unqualified"]').height(),
                            $('[data-statut="hired"]').height(),
                            $('[data-statut="qualified"]').height());
                        $('[data-statut="toqualify"], [data-statut="unqualified"], [data-statut="hired"], [data-statut="qualified"]').height(columnHeight);
                    },
                    showKanban: function() {
                        this.updateDraggableColumnHeight()
                    },
                    getAllJobsApplies: function () {
                        $(".loader").fadeIn(300);
                        var self = this;
                        $.ajax({
                            url: "{{ path('ajax_ats_jobs_applies') }}",
                            method: "POST",
                            data: {
                                dafId: {{ dafInstance.id }},
                                page: self.page,
                                pageLimit: self.pageLimit,
                                filterOrder: "ddesc",
                                filter: self.filterJob
                            }
                        }).done(function (data) {
                            self.items = data.jobs;
                            self.totalItems = data.totalCount;
                        }).always(function () {
                            $(".loader").fadeOut(500);
                        });

                    },
                    filteringJob: function () {
                        this.getAllJobsApplies();
                    },
                    chart: function()  {
                        var self = this;
                        var progressBars = $(".progress-bar");

                        progressBars.each(function () {
                            if ($(this).attr('data-value') <= 5) {
                                $(this).css({
                                    backgroundColor: "#F6012E",
                                })
                            } else if ($(this).attr('data-value') > 5 && $(this).attr('data-value') < 60) {
                                $(this).css({
                                    backgroundColor: "#e6b314",
                                })
                            } else if ($(this).attr('data-value') >= 60) {
                                $(this).css({
                                    backgroundColor: "#54D87D",
                                })
                            }
                        });
                    },
                    showPreview: function (token, idJg, idAdv) {
                        $.ajax({
                            method: "POST",
                            url: "{{ path('ajax_get_link_preview') }}",
                            dataType: 'json',
                            data: {token: token, idJg: idJg, idAdv: idAdv}
                        }).done(function (data) {
                            var a = document.createElement('a');
                            a.setAttribute('href', data);
                            a.setAttribute('target', '_blank');
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        });
                    },
                    timeAgo: function(date) {
                        return  ($.timeago(date));
                    },
                }
            });
    </script>
{% endblock %}