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

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

{% block body %}
    {% set breadcrumb_nav = "home" %}
    <main class="row main mx-0 min-vw-100">
        {{ include('Includes/aside_ats.html.twig') }}
        <section class="content-area p-r-l-6">
            <div id="app" v-cloak>
            </div >
            <div class="row px-3">
                <div class="title-page col-12 text-left pb-4 mb-2 pl-0">
                    <h2 class="lead font-300">{{ 'Forms List'|trans }}</h2>
                </div>
            </div>

            {#            START SIMPLE DATA TABLES FOR FORMS       #}
            <div class="row pb-4 mb-2 px-3 heading-title">
                <div class="col-md-6 text-left font-weight-bold text-uppercase px-0">
                    forms
                </div>
                <div class="col-md-6 text-right px-0">
                    <span class="pr-5">{{ 'Total forms'|trans }}</span>
                    <span class="font-weight-bold"> {{ dafInstances | length }}</span>
                </div>
            </div>
            <div class="simple-data-table d-flex flex-column px-0 col-12 mb-5">
                <div class="table-headers px-3 py-4 rounded-2">
                    <div class="col-md-8 row justify-content-between d-flex">
                        <div class="col-md-4 text-left">
                            <span>{{ 'Form'|trans }}</span>
                        </div>
                        <div class="col-md-4 text-center">
                            <span>{{ 'Status'|trans }}</span>
                        </div>
                        <div class="col-md-3 text-right">
                            <span>{{ 'Applies'|trans }}</span>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                </div>
                <div id="table-data">
                    {% set counter = dafInstances|length %}
                    {% if  counter == 0 %}
                        <div class="alert alert-info mt-5 text-center">
                            {{ 'There is no form'|trans }}
                        </div>
                    {% else %}
                        <div class="table-content">

                            {% for dafInstance in dafInstances %}
                                {% set counter = counter + 1 %}
                                <div class="simple-line-data col-12 bg-white d-flex justify-content-between py-3 mt-2 rounded-2">
                                    <div class="col-md-8 row d-flex">
                                        <div class="col-md-4">
                                            <a href="{{ path('ats_form_overview', {'advertiser': advertiser.id, 'dafInstance': dafInstance.idDafInstance }) }}"  class="title-form">{{ dafInstance.nameInstance|title }}</a>
                                        </div>
                                        <div class="col-md-4 text-center">
                                        <span class="chips status-form my-auto {{ (dafInstance.active == 1) ? 'chips_green' : 'chips_red' }} ">
                                            {{ (dafInstance.active == 1) ? 'active' : 'inactive' }}
                                        </span>
                                        </div>
                                        <div class="col-md-4 text-right">
                                            <div class="numbers-form-applies">
                                                <a href="{{ path('ats_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.idDafInstance}) }}">
                                                    <b>{{ dafInstance.nb }}</b>
                                                    applies
                                                </a>
                                                {% if dafInstance.nbNew > 0 %}<span class="chips chips_green">{{ dafInstance.nbNew }} unread</span>{% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row col-1 justify-content-between">
                                        <a href="{{ path('ats_form_settings', {'advertiser': advertiser.id, 'dafInstance': dafInstance.idDafInstance}) }}">
                                    <span class="span-icon" data-tippy-content="modifier le formulaire">
                                        <i class="fal fa-pen"></i>
                                    </span>
                                        </a>
                                        <a href="{{ path('ats_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.idDafInstance}) }}" class="mx-2">
                                    <span class="span-icon" data-tippy-content="Voir les candidatures">
                                        <i class="fal fa-clipboard-user"></i>
                                    </span>
                                        </a>
                                        {#                                                                   <a href="" >#}
                                        {#                                                                   <span class="span-icon" data-tippy-content="Voir les statistiques">#}
                                        {#                                                                       #}
                                        {#                                                                   </span>#}
                                        {#                                                                   </a>#}
                                    </div>
                                    <div class="col-1 text-right">
                                   <span @click="showPreview('{{ dafInstance.token }}', '{{ dafInstance.idJobgroup }}', '{{ advertiser.id }}')">
                                       <button class="button button-rounded-4 button-md ">{{ 'preview'|trans }}</button>
                                   </span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}


                    {#                   <div class="table-content" v-for="(instance, i) in instances">#}
                    {#                       <div class="simple-line-data col-12 bg-white d-flex justify-content-between py-3 mt-2 rounded-2">#}
                    {#                           <div class="col-md-8 row d-flex">#}
                    {#                               <div class="col-md-4">#}
                    {#                                   {% set instanceId = <% instance.idDafInstance %> %}#}
                    {#                                   <a href="{{ path('ats_form_overview', {'advertiser': advertiser.id, 'dafInstance': instance.idDafInstance }) }}"  class="title-form"><% instance.name %></a>#}
                    {#                               </div>#}
                    {#                               <div class="col-md-4 text-center">#}
                    {#                                        <span class="chips status-form my-auto" :class="(instance.active == 1) ? 'chips_green' : 'chips_red'">#}
                    {#                                            <% (instance.active == 1) ? 'active' : 'inactive' %>#}
                    {#                                        </span>#}
                    {#                               </div>#}
                    {#                               <div class="col-md-4 text-right">#}
                    {#                                   <div class="numbers-form-applies">#}
                    {#                                       <a href="{{ path('ats_form_applies', {'advertiser': advertiser.id, 'dafInstance': instance.idDafInstance }) }}">#}
                    {#                                           <b>{{ instance.nb }}</b>#}
                    {#                                           applies#}
                    {#                                       </a>#}
                    {#                                       <span class="chips chips_yellow">12 news</span>#}
                    {#                                   </div>#}
                    {#                               </div>#}
                    {#                           </div>#}
                    {#                           <div class="d-flex flex-row col-1 justify-content-between">#}
                    {#                               <a href="{{ path('ats_form_settings', {'advertiser': advertiser.id, 'dafInstance': instance.idDafInstance }) }}">#}
                    {#                                    <span class="span-icon" data-tippy-content="modifier le formulaire">#}
                    {#                                        <i class="fal fa-pen"></i>#}
                    {#                                    </span>#}
                    {#                               </a>#}
                    {#                               <a href="{{ path('ats_form_applies', {'advertiser': advertiser.id, 'dafInstance': instance.idDafInstance }) }}" class="mx-2">#}
                    {#                                    <span class="span-icon" data-tippy-content="Voir les candidatures">#}
                    {#                                        <i class="fal fa-clipboard-user"></i>#}
                    {#                                    </span>#}
                    {#                               </a>#}
                    {#                           </div>#}
                    {#                           <div class="col-1 text-right">#}
                    {#                               <a href="{{ path('ats_form_overview', {'advertiser': advertiser.id, 'dafInstance': instance.idDafInstance }) }}">#}
                    {#                                   <button class="button button-rounded-4 button-md ">preview</button>#}
                    {#                               </a>#}
                    {#                           </div>#}
                    {#                       </div>#}
                    {#                   </div>#}
                    <div class="col-md-12 text-left d-flex data-options bg-white rounded-2 mb-5 mt-3 py-3" v-if="nbrItems > pageLimit" >
                        <div class="pagination pr-4 mx-auto">
                            <span class="">Page <b> <% page %></b> of <% Math.ceil(nbrItems / 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>
            </div>

            {#            END SIMPLE DATA TABLES FOR FORMS        #}
        </section>
    </main>

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

            // Pie chart
            $('#chart-donut').easyPieChart({
                barColor:'#D4008D',
                trackColor: '#e6e9eb',
                scaleColor: false,
                scaleLength: false,
                lineCap: 'round', // butt, round and square
                lineWidth: 5,
                size: 120, //180
                rotate: 0,
                animate: 1000,
            });
            //  $('.chart-donut').data('easyPieChart').update(90);

            var vmt = new Vue({
                el: '#table-data',
                delimiters: ['<%', '%>'],
                data: {
                    nbrItems : {{ counter }},
                    pageLimit: 15,
                    page: 1,
                    instances: [],
                    idAdvertiser: {{ idAdvertiser }}
                },
                mounted: function () {
                },
                methods: {
                    getForms: function (idAdvertiser, pageLimit) {
                        self = this;
                        $.ajax({
                            url: "{{ path('ajax_ats_forms_instances') }}",
                            method: "POST",
                            data: {
                                idAdvertiser: self.idAdvertiser,
                                page: self.page,
                                pageLimit: self.pageLimit,
                            }
                        }).done(function (data) {
                            self.instances = data.dafInstances;
                        }).always(function () {
                            $(".loader").fadeOut(400);
                        });
                    },
                    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);
                        });
                    },
                }
            });

        });
    </script>

{% endblock %}