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

{% block body %}
    <div id="vue_app_publisher_ats" v-cloak>
        <main id="main-content" class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6 w-100">
                <div class="main-data-table px-0">

                    <div class="data-table-headers bg-white py-3 rounded-2 col-sm-12 d-flex">
                        <div class="col-sm-12">
                            <input v-model="searchedATS" id="searchTable" type="search" class="form-control input-sm col-sm-3 float-right" placeholder="Search" aria-controls="search-table">
                        </div>
                    </div>

                    <div class="main-data-table-content mb-5 pb-3">
                        <div class="main-data-table-line col-12 rounded-2 mt-2 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <div class="col-12 row px-0 mx-0 align-items-center">
                                <div class="col-md-1 text-center">
                                    <span class="font-700">{{ 'ID'|trans }}</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('api_id', 'Number')"
                                       :class="{'fa-sort-alt': atsOrder.option !== 'api_id',
                                               'fa-sort-amount-down-alt': atsOrder.option === 'api_id' && atsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': atsOrder.option === 'api_id' && atsOrder.direction === 'DESC' }"></i>
                                </div>
                                <div class="col-md-2 text-center border-left">
                                    <span class="font-700">{{ 'Name'|trans }}</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('name', 'String')"
                                       :class="{'fa-sort-alt': atsOrder.option !== 'name',
                                               'fa-sort-amount-down-alt': atsOrder.option === 'name' && atsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': atsOrder.option === 'name' && atsOrder.direction === 'DESC' }"></i>
                                </div>
                                <div class="col-md-4 text-center border-left">
                                    <span class="font-700">
                                        Period from <i><% periodAts.startDate %></i> to <i><% periodAts.endDate %></i>
                                    </span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Applies Status</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Custom Questions</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Success</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('successTotal', 'Number')"
                                       :class="{'fa-sort-alt': atsOrder.option !== 'successTotal',
                                               'fa-sort-amount-down-alt': atsOrder.option === 'successTotal' && atsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': atsOrder.option === 'successTotal' && atsOrder.direction === 'DESC' }"></i>
                                    <div class="successStatus text-success font-700"><% overAllStats.success %>  (<% overAllStats.successPercentage %>)</div>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Error</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('errorTotal', 'Number')"
                                       :class="{'fa-sort-alt': atsOrder.option !== 'errorTotal',
                                               'fa-sort-amount-down-alt': atsOrder.option === 'errorTotal' && atsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': atsOrder.option === 'errorTotal' && atsOrder.direction === 'DESC' }"></i>
                                    <div class="failedStatus text-danger font-700"><% overAllStats.error %> (<% overAllStats.errorPercentage %>)</div>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Filtered</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('filteredTotal', 'Number')"
                                       :class="{'fa-sort-alt': atsOrder.option !== 'filteredTotal',
                                               'fa-sort-amount-down-alt': atsOrder.option === 'filteredTotal' && atsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': atsOrder.option === 'filteredTotal' && atsOrder.direction === 'DESC' }"></i>
                                    <div class="filteredStatus text-warning font-700"><% overAllStats.filtered %> (<% overAllStats.filteredPercentage %>)</div>
                                </div>
                            </div>
                        </div>

                        <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation" :id="'custom-import-row-'+data.api_id"
                             v-for="(data, index) in filteredAts" :key="index">
                            <div class="col-12 row px-0 mx-0">
                                <div class="col-md-1 d-flex justify-content-center align-items-center">
                                    <% data.api_id %>
                                </div>
                                <div class="col-md-2 d-flex justify-content-center align-items-center border-left">
                                    <img :src="data.logoUrl" :alt="data.name" width="25" class="mr-2">
                                    <% data.name %>
                                </div>
                                <div class="col-md-4 border-left">
                                    <bar-vertical-chart v-if="isDataChartNotEmpty(data.dataChart)"
                                                        :chart-data="data.dataChart">
                                    </bar-vertical-chart>
                                    <span v-else class="d-flex align-items-center justify-content-center" style="height: 80px;">
                                        {{ 'No data available'|trans }}
                                    </span>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                    <i v-if="data.getApplieStatus === 1" title="Yes" class="fa fa-check-circle" style="color: green" aria-hidden="true"></i>
                                    <i v-else style="color: red" class="fa fa-times-circle" data-toggle="tooltip" title="No"></i>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                    <% data.customFiled %>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                    <% data.successTotal %>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                    <% data.errorTotal %>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                    <% data.filteredTotal %>
                                    <!--
                                    <div class="slider-icon-group position-absolute" style="left: 99%;">
                                            <span data-tippy-content="{{ 'See more' | trans }}"
                                                  class="span-icon small cursor-pointer d-flex justify-content-center align-items-center float-right"
                                                  @click="openModaleAts(index, data.api_id)"
                                                  style="width: 30px; height: 30px;" >
                                                <i class="fa fa-heartbeat"></i>
                                            </span>
                                    </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


            {# Modale ats Details #}
<!--            <transition name="slide-right">
                <div class="bg-white form-campaign px-5 pt-4 pb-5 active" id="modaleATSShow" v-if="isSidePanelOpen">
                    <div class="small-loader" style="display: none;"></div>
                    <div class="cover-white bg-white h-100 w-100 position-fixed opacity-06" style="z-index: 9998; display: none; overflow: unset;" id="cover-white"></div>
                    <div class="w-100">
                        <div class="header d-flex flex-column pl-2 mb-5">
                            <div v-show="!loading" class="slider-icon-group active ml-auto" id="closeModale"  style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()">
                                <div class="slider-icon">
                                    <i class="fal fa-times text-white"></i>
                                </div>
                            </div>
                            <div class="title mt-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                    <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                          d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                          transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                                </svg>
                                <h5 class="ml-3 text-primary font-weight-bold d-inline">
                                    <template>
                                        {{ 'Details'|trans }} ATS: <% atsToShow.name %> (<% atsToShow.id %>)
                                    </template>
                                </h5>
                            </div>
                        </div>

                        <div class="body mt-2">
                                <div class="row">
                                    <div class="col-md-2 col-sm-6">
                                        <label for="atsPeriod">Period</label>
                                        <select name="atsPeriod" id="atsPeriod" class="form-control input-sm" v-model="customDataAts.selectedAtsPeriod" @change="getValuePeriodSelected">
                                            {% for key, value in periods %}
                                                <option value="{{ key }}">{{ value }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div v-show="customDataAts.selectedAtsPeriod == 'specific'" class="col-md-2 col-sm-6">
                                        <label for="datepicker-start">Start date</label>
                                        <div class="specific-period-container">
                                            <div class="input-group date">
                                                <input type="text" id="datepicker-start" name="datepicker-start" class="form-control input-sm"
                                                       placeholder="Start Date" title="Specific Start Date"
                                                       v-model="customDataAts.specificAtsStartDate">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-show="customDataAts.selectedAtsPeriod == 'specific'" class="col-md-2 col-sm-6">
                                        <label for="datepicker-end">End date</label>
                                        <div class="specific-period-container">
                                            <div class="input-group date">
                                                <input type="text" id="datepicker-end" name="datepicker-end" class="form-control input-sm"
                                                       placeholder="End Date" title="Specific End Date"
                                                       v-model="customDataAts.specificAtsEndDate">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-6">
                                        <label for="atsPeriod">Date format</label>
                                        <select name="atsDateFormat" id="atsDateFormat" class="form-control input-sm" v-model="customDataAts.selectedTableDateAts">
                                            <option value="dafCheck">Send to ATS</option>
                                            <option value="dafApplies">Applies received</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 col-sm-6">
                                        <button type="button" class="btn btn-primary btn-sm" @click="loadNewDataAts" :disabled="loading">Submit</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 text-center">
                                        <h2>Histo Applies <template v-if="customDataAts.selectedAtsPeriod === 'specific'"> from <b><% customDataAts.specificAtsStartDate %></b> to <b><% customDataAts.specificAtsEndDate %></b></template><template v-else><% customDataAts.selectedValueDate %></template></h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="panel panel-default">
                                            <div class="panel-heading"></div>
                                            <div class="panel-body">
                                                <canvas id="barChartAts"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" v-if="tabAtsStatus.tabHistoApplies.withoutErrors.length !== 0 && tabAtsStatus.tabHistoApplies.errors.length !== 0">
                                    <div class="col-sm-6">
                                        <canvas id="pieChartAts"></canvas>
                                    </div>
                                    <div class="col-sm-6 bottom">
                                        <div class="row">
                                            <h3>Sum-up for connection with the ATS</h3>
                                        </div>
                                        <br>
                                        <div class="row">
                                            <div>
                                                <h4>
                                                    <span>Nb Valid Applies:</span>
                                                    <strong><span id="nbAppliesValid"><% tabAtsStatus.appliesInstanceCount.nbValid %> (<% tabAtsStatus.appliesInstanceCount.success %>%)</span></strong>
                                                </h4>
                                            </div>
                                            <div>
                                                <h4>
                                                    <span>Nb Error Applies:</span>
                                                    <strong><span id="nbAppliesError"><% tabAtsStatus.appliesInstanceCount.nbAppliesError %> (<% tabAtsStatus.appliesInstanceCount.error %>%)</span></strong>
                                                </h4>
                                            </div>
                                            <div>
                                                <h4>
                                                    <span>Nb Filtered:</span>
                                                    <strong><span id="nbAppliesFiltered"><% tabAtsStatus.appliesInstanceCount.nbFiltered %> (<% tabAtsStatus.appliesInstanceCount.filtered %>%)</span></strong>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <br>
                                </div>
                                <hr>
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#errorsType" aria-controls="errorsType" role="tab" data-toggle="tab">Type of errors</a></li>
                                    <li role="presentation"><a href="#searchApplies" aria-controls="searchApplies" role="tab" data-toggle="tab">Search applies</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="errorsType">
                                        <div class="row">
                                            <div class="col-sm-12 text-center">
                                                <h2>TYPES OF ERRORS</h2>
                                            </div>
                                        </div>
                                    <div role="tabpanel" class="tab-pane fade in b-margin" id="searchApplies">
                                        <div class="row well">
                                            <div class="row">
                                                <div class="form-group col-sm-6">
                                                    <label for="searchLastname">Candidate lastname</label>
                                                    <input id="searchLastname" type="text" class="form-control" v-model="tabAtsStatus.lastErrorsAts.search.lastname">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label for="searchFirstname">Candidate firstname</label>
                                                    <input id="searchFirstname" type="text" class="form-control" v-model="tabAtsStatus.lastErrorsAts.search.firstname">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label for="searchMail">Candidate mail</label>
                                                    <input id="searchMail" type="text" class="form-control" v-model="tabAtsStatus.lastErrorsAts.search.mail">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label for="searchJobName">Job Title</label>
                                                    <input id="searchJobName" type="text" class="form-control" v-model="tabAtsStatus.lastErrorsAts.search.jobName">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label for="searchStatus">Status</label>
                                                    <select name="searchStatus" class="form-control" v-model="tabAtsStatus.lastErrorsAts.search.status">
                                                        <option value="all"></option>
                                                        <option value="success">Success</option>
                                                        <option value="failed">Failed</option>
                                                        <option value="filtered">Filtered</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <button class="btn btn-primary pull-right r-margin" @click="searchLastAppliesAts" :disabled="loading">Begin search</button>
                                            </div>
                                        </div>
                                        <div class="row t-margin" v-if="tabAtsStatus.lastErrorsAts.dataSearch !== null">
                                            <div class="row b-margin">
                                                <div class="col-md-4 col-md-offset-8">
                                                    <template v-if="tabAtsStatus.lastErrorsAts.search.status === 'all'">
                                                        <label for="getFailedStatus">Failed status</label>
                                                        <input type="checkbox" id="getFailedStatus" class="from-control" v-model="tabAtsStatus.lastErrorsAts.getFailedStatus" :disabled="tabAtsStatus.lastErrorsAts.getSuccessStatus || tabAtsStatus.lastErrorsAts.getAll" @change="addListToRepush('failed')">

                                                        <label for="getFailedStatus" class="l-margin">Success status</label>
                                                        <input type="checkbox" id="getSuccessStatus" class="from-control r-margin" v-model="tabAtsStatus.lastErrorsAts.getSuccessStatus" :disabled="tabAtsStatus.lastErrorsAts.getFailedStatus || tabAtsStatus.lastErrorsAts.getAll" @change="addListToRepush('success')">
                                                    </template>
                                                    <label for="getFailedStatus" class="l-margin">All status</label>
                                                    <input type="checkbox" id="getAll" class="from-control" v-model="tabAtsStatus.lastErrorsAts.getAll" :disabled="tabAtsStatus.lastErrorsAts.getSuccessStatus || tabAtsStatus.lastErrorsAts.getFailedStatus" @change="addListToRepush('all')">
                                                    <button type="button" class="btn btn-primary l-margin" @click="submitRepush" :disabled="loading">Repush errors</button>
                                                </div>
                                            </div>
                                            <table class="table table-hover table-bordered table-striped">
                                                <thead>
                                                <th>Id check (id apply)</th>
                                                <th>Id daf</th>
                                                <th>Source</th>
                                                <th>Job name (id)</th>
                                                <th>Candidat</th>
                                                <th>Candidat mail</th>
                                                <th>Date <span v-if="customDataAts.selectedTableDateAts === 'dafCheck'">(daf check)</span><span v-else>(daf applies)</span></th>
                                                <th>Status</th>
                                                <th>Api Log</th>
                                                <th>Repush</th>
                                                </thead>
                                                <tbody>
                                                <tr v-for="search in tabAtsStatus.lastErrorsAts.dataSearch">
                                                    <td><% search.id %> (<% search.applyId %>)</td>
                                                    <td><a :href="'/daf/edit/'+search.instanceId+'#edit'" :title="search.nameInstance + ' (' + search.advName + ')'"><% search.instanceId %></a></td>
                                                    <td><% search.source %></td>
                                                    <td><% search.jobName %> (<strong><% search.idJob %></strong>)</td>
                                                    <td><% search.lastname %> <% search.firstname %></td>
                                                    <td><% search.email %></td>
                                                    <td><% search.dateCheck %></td>
                                                    <td class="filteredStatus" v-if="search.apiStatus==='filtered'"><strong>Filtered</strong></td>
                                                    <td :class="[search.apiStatus === 'failed' ? 'failedStatus' : 'successStatus']" v-else><strong><% search.apiStatus %></strong></td>
                                                    <td>
                                                        <a class="btn btn-primary btn-xs" title="Show" @click='showApiLog(search.apiLog)'>
                                                            <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
                                                        </a>
                                                        <template v-if="search.apiStatus === 'failed'">
                                                            <i class="glyphicon glyphicon-question-sign tooltipColorDco"
                                                               data-toggle="tooltip" data-placement="bottom"
                                                               :title="'Code: ' + search.codeError + ' => ' + search.patternError"></i>
                                                        </template>
                                                    </td>
                                                    <td><input type="checkbox" :id="search.apiStatus + '-id-' + search.id" :data-status="search.apiStatus" name="repushApplies" @change="addToRepush($event, search.id)"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                    <div class="modal fade" id="lastErrorsATS" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                        <div class="modal-dialog" role="document" style="width: 80%">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title">API LOG</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <pre><code><% tabAtsStatus.lastErrorsAts.currentApiLog %></code></pre>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button class="btn btn-primary" @click="copyClipboard($event)">Copy to clipboard</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>-->
        </main>
    </div>

{#        <div :class="[isSidePanelOpen ? 'show' : '', 'modal-backdrop']" style="visibility: visible !important;"#}
{#             id="modal-backdrop" ref="modalBackdrop" v-show="isSidePanelOpen"></div>#}

    <span class="d-none invisible twig-data-list-ats" data-list-ats="{{ tabAts | json_encode }}"></span>
    <span class="d-none invisible twig-data-period-ats" data-period-ats="{{ periodAts | json_encode }}"></span>
    <span class="d-none invisible twig-data-path-ajax-ats-infos-get" data-path-ajax-ats-infos-get="{{ path('ajax_get_ats_infos', {'dafApi': ':dafApi'}) }}"></span>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-ats-index') }}
{% endblock %}