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

{% block body %}
    <div id="app-subscriptions">
        <main class="row main mx-0 fade-in fade-in" id="main-content" v-cloak>
            <div :class="[showModifyPanel || showCreatePanel ? 'show' : '', 'modal-backdrop']"
                 style="visibility: visible !important;"
                 id="modal-backdrop" ref="modalBackdrop" v-show="showModifyPanel || showCreatePanel"></div>
            <section class="content-area p-r-l-6">
                <div class="simple-data-headers bg-white py-3 rounded-2 mb-3 row">
                    <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                        <div class="pagination pr-4 my-auto align-items-center">
                            <span>Page <b><% page %></b> {{ 'of'|trans }} <% nbrPages %></span>
                            <div class="pl-4 d-flex">
                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('backward')"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('prev')"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2"
                                   :class="{disabled: page === nbrPages || loading}" @click="navigatePage('next')"></i>
                                <i class="fas fa-step-forward" :class="{disabled: page === nbrPages ||loading}"
                                   @click="navigatePage('forward')"></i>
                            </div>
                        </div>
                        <p class="m-0">
                            {{ 'TotalSubscription'|trans }}:
                            <span class="chips chips_purple py-2"><% subscriptionsCount %></span>
                        </p>
                    </div>
                    <div class="col-md-6 col-sm-12 section-search text-right d-flex align-items-center">
                        <div class="col-md-8 px-0 d-inline-block ml-auto">
                            <div class="input-group">
                                <input type="search" class="form-control border"
                                       v-model="searchValue"
                                       @keyup.enter="filteredSubscriptions()"
                                       placeholder="{{ 'Search user name company or jobgroup'|trans }}">
                                <span class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button">
                                        <i class="fal fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <button class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer my-auto ml-3"
                                @click="openCreatePanel()">{{ 'Create subscription'|trans }}
                        </button>
                    </div>
                </div>
                <div class="row main-data-table">
                    <div class="main-data-table-content mb-5 pb-3 col-12 px-0">
                        <div class="simple-data-table">
                            <div class="table-headers px-3 py-4 rounded-2">
                                <div class="row px-3">
                                    <div class="col-1 my-auto">
                                        <b>#</b>
                                    </div>
                                    <div class="col-2 my-auto text-left">
                                        <b>{{ 'Subscription user'|trans }}</b>
                                    </div>
                                    <div class="col-2 my-auto text-left">
                                        <b>{{ 'Subscription company'|trans }}</b>
                                    </div>
                                    <div class="col-1 my-auto text-center">
                                        <b>{{ 'Subscription frequency'|trans }}</b>
                                    </div>
                                    <div class="col-2 my-auto text-center">
                                        <b>{{ 'Subscription jobgroup'|trans }}</b>
                                    </div>
                                    <div class="col-1 my-auto text-center">
                                        <b>Action</b>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <template>
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                                 v-for="(subscription, key) in filteredSubscriptions" :key="subscription.id">
                                <div class="row px-3" :id="'subscription-row-'+subscription.id">
                                    <div class="col-1 border-right">
                                        <% subscription.id %>
                                    </div>
                                    <div class="col-2 border-right" style="word-wrap:break-word">
                                        <span><% subscription.user?.completeName %></span>
                                    </div>
                                    <div class="col-2 border-right" style="word-wrap:break-word">
                                        <span><% subscription.user?.company %></span>
                                    </div>
                                    <div class="col-1 border-right" style="word-wrap:break-word">
                                        <span><% subscription.mailSub %></span>
                                    </div>
                                    <div class="col-2 border-right" style="word-wrap:break-word">
                                        <span><% subscription.jobgroupFilter?.name %></span>
                                    </div>
                                    <div class="my-auto d-flex justify-content-around px-0 col-md-1">
                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                              data-tippy-content="{{ 'Modify subscription'|trans }}"
                                              style="width: 30px; height: 30px"
                                              @click="openModifyPanel(subscription.id)">
                                            <i class="fal fa-pen"></i>
                                        </span>
                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                              data-tippy-content="{{ 'Remove subscription'|trans }}"
                                              style="width: 30px; height: 30px"
                                              @click="openDeleteModal(subscription.id)">
                                            <i class="fa fa-times"></i>
                                        </span>
                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                              data-tippy-content="{{ 'Show history'|trans }}"
                                              style="width: 30px; height: 30px"
                                              @click="showCustomHistory(subscription.id, subscription.user.completeName)">
                                            <i class="fa fa-history"></i>
                                        </span>

                                        {#                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center" #}
                                        {#                                              data-tippy-content="{{ 'history'|trans|capitalize }}" #}
                                        {#                                              style="width: 30px; height: 30px" #}
                                        {#                                              @click="showHistories(subscription.id)" #}
                                        {#                                              :data-id="subscription.id"> #}
                                        {#                                            <i class="fal fa-history"></i> #}
                                        {#                                        </span> #}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="modal fade"
                     id="delete-modal"
                     role="dialog"
                     aria-labelledby="confirmDeleteModal"
                     aria-hidden="true"
                     style="z-index: 1042">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="d-flex justify-content-end mb-2 cursor-pointer" @click="closeModalDelete">
                                    <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="mt-4 mb-4 d-flex">
                                    <i class="fa-trash-alt fal text-danger fa-2x mx-auto"></i>
                                </div>
                                <div class="mb-4 mx-auto text-center w-75">
                                    {{ 'Do you really want to delete this subscription?'|trans }}
                                </div>
                                <div class="d-flex justify-content-between pt-4">
                                    <button data-dismiss="modal" class="bg-light btn text-primary"
                                            @click="closeModalDelete">{{ 'Cancel'|trans }}</button>
                                    <button class="btn btn-danger text-white"
                                            @click="confirmDelete">{{ 'Delete'|trans }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{ include('CvLibrary/DafSubscription/edit.html.twig') }}
        </main>
    </div>
    <span class="d-none invisible twig-data-daf-id"
          data-daf-id="{{ dafInstance.id }}"></span>
    <span class="d-none invisible twig-data-dafinstances"
          data-dafinstances="{{ dafInstances|json_encode }}"></span>
    <span class="d-none invisible twig-data-daf-token"
          data-daf-token="{{ dafInstance.token }}"></span>
    <span class="d-none invisible twig-data-daf"
          data-daf="{{ daf|json_encode }}"></span>
    <span class="d-none invisible twig-data-subscriptions"
          data-subscriptions="{{ subscriptions|json_encode }}"></span>
    <span class="d-none invisible twig-data-users"
          data-users="{{ users|json_encode }}"></span>
    <span class="d-none invisible twig-data-jobgroups"
          data-jobgroups="{{ jobgroups|json_encode }}"></span>
    <span class="d-none invisible twig-data-path-current-route"
          data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'dafInstance': ':did' }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-upsert"
          data-pathajaxupsert="{{ path('daf_subscription_ajax_upsert', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id})}}"></span>
    <span class="d-none invisible twig-data-path-ajax-delete"
          data-pathajaxdelete="{{ path('daf_subscription_ajax_delete', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id})}}"></span>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-daf-subscription-index') }}
    {{ encore_entry_script_tags('cvlibrary-daf-selector-header') }}
{% endblock %}