{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}
{% import "popup/popup.html.twig" as popupTemplate %}

{% block title %}
    INSTALL BOIS
{% endblock %}

{% block head %}
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Administration des popups
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    {% set colorByStatus = {
        'Brouillon': '#E59EDD',
        'En cours': '#92D050',
        'En pause': 'red',
        'Programmée': '#46B1E1',
        'Finalisée': '#E97132',
    } %}
    <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div>
                <div class="box-header with-border">
                    <a href="{{ path("popup_new") }}">
                        <button type="button" class="boutonAction" style="float:right;">
                            Ajouter une popup
                        </button>
                    </a>
                </div>
                {% for key,popups in arrayPopups %}
                    <h5>Pop-ups
                    {% if key === 'in-progress' %}
                        en cours
                    {% elseif key === 'incoming' %}
                        à venir
                    {% else %}
                        passées
                    {% endif %}
                    </h5>
                    <table id="popup-list-{{ key }}" class="hover row-border" style="padding:1%;width:100%">
                        <thead>
                        <tr>
                            <th>Date de création</th>
                            <th>Date de début</th>
                            <th>Date de fin</th>
                            <th>Titre de la popup</th>
                            <th>Cible</th>
                            <th>Sondage</th>
                            <th>Vues</th>
                            <th>Nb clients ciblés</th>
                            <th>Statut</th>
                            <th style="text-align: center;">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for popup in popups %}
                            <tr>
                                <td>{{ popup.createdAt|date('d/m/Y') }}</td>
                                <td>{{ popup.dateStart|date('d/m/Y') }}</td>
                                <td>{{ popup.dateEnd|date('d/m/Y') }}</td>
                                <td style="width: 25%">{{ popup.title }}</td>
                                <td>
                                    {% for role in popup.roles %}
                                        {{ role }}
                                        {% if not loop.last %},{% endif %}
                                    {% endfor %}
                                </td>
                                <td>{{ 'non' }}</td>
                                <td>{{ popup.numberOfView }}</td>
                                <td>{{ nbTargetByPopup[popup.id] }}</td>
                                <td style="color:white;background-color: {{ colorByStatus[popup.statusReadable] }}">{{ popup.statusReadable }}</td>
                                <td style="display: flex;align-items: center;justify-content: center;text-align: center;">
                                    <div data-toggle="modal" data-target="#popup-template-{{ popup.id }}" style="cursor:pointer;padding:8px">
                                        <img alt="Visualiser" src="{{ asset('install-bois/icon/tab_action_consulter.svg') }}">
                                    </div>
                                    {{ popupTemplate.popup(popup) }}
                                    <a href="{{ path('popup_edit', {'id': popup.id}) }}" style="color:white;">
                                        <img alt="Modifier" src="{{ asset('install-bois/icon/tab_action_modifier.svg') }}"/>
                                    </a>
                                    <a type="button" class="boutonAction" style="background-color: transparent!important;width: 25px;padding: 0"
                                       data-toggle="modal" data-target="#popup-delete" onclick="initDeletePopupForm({{ popup.id|json_encode|raw }})">
                                        <img alt="Supprimer" src="{{ asset('install-bois/icon/tab_action_supprimer.svg') }}"/>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% endfor %}
            </div>
        </div>
    </div>
    {{ macro.popup("danger", "popup-delete", path('popup_delete', {'id': 'POPUPID'}), 'popup-delete') }}
    {% set popupSample = {id:'sample',title:'Sample',link:null,labelLink:null,text:'sample',image:null} %}
    {{ popupTemplate.popup(popupSample) }}
    <script type="application/javascript">
        const baseUrl = '{{ url('home') }}';
        const colorsByStatus = {{ colorByStatus|json_encode|raw }};
        let popupLoaded = [];
        let columns = [
            {
                data: "createdAt",
                name: "createdAt",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "startDate",
                name: "startDate",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "endDate",
                name: "endDate",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "title",
                name: "title",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "target",
                name: "target",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "poll",
                name: "poll",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "views",
                name: "views",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "targetedCustomers",
                name: "targetedCustomers",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "status",
                name: "status",
                orderable: false,
                render: function (data) {
                    return '<strong>' + data + '</strong>';
                },
                createdCell: function (td, cellData) {
                    $(td).css({
                        'color': 'white',
                        'background-color': colorsByStatus[cellData]
                    });
                }
            },
            {
                data: "id",
                name: "actions",
                orderable: false,
                render: function (data, type, full) {
                    const btnDelete = '<a type="button" class="boutonAction" style="background-color: transparent!important;width: 25px;padding: 0"' +
                        'data-toggle="modal" data-target="#popup-danger-popup-delete" onclick="initDeletePopupForm(' + data + ')">' +
                        '<img alt="Supprimer" src="{{ asset('install-bois/icon/tab_action_supprimer.svg') }}"/>' +
                    '</a>';

                    const urlEdit = '{{ path('popup_edit', {'id': 'POPUPID'}) }}';
                    const btnEdit = '<a href="' + urlEdit.replace('POPUPID', data) + '" style="color:white;">' +
                        '<img alt="Modifier" src="{{ asset('install-bois/icon/tab_action_modifier.svg') }}"/>' +
                    '</a>';

                    popupLoaded.push({id:data, infos: full.infosDisplay});
                    const btnShow = '<div data-toggle="modal" data-target="#popup-template-sample" style="cursor:pointer;padding:8px"' +
                        'onclick="loadPopupContent(' + data + ')">' +
                        '<img alt="Visualiser" src="{{ asset('install-bois/icon/tab_action_consulter.svg') }}">' +
                    '</div>';

                    return btnShow + btnEdit + btnDelete;
                },
                createdCell: function (td) {
                    $(td).css({
                        'display': 'flex',
                        'align-items': 'center',
                        'justify-content': 'center',
                        'text-align': 'center'
                    });
                }
            }
        ];
        $('#popup-list-passed').DataTable({
            "processing": true,
            "serverSide": true,
            responsive: true,
            searching: false,
            "ajax": "{{ path('popup_datatable') }}",
            orderMulti: false,
            "bLengthChange": false,
            info: true,
            paging: true,
            language: {
                url: '/localisation/fr_FR.json'
            },
            order: [],
            deferRender: true,
            columns: columns
        });

        const initDeletePopupForm = (id) => {
            let url = '{{ path('popup_delete', {'id': 'POPUPID'}) }}';
            url = url.replace('POPUPID', id);
            $('#popup-delete').attr('action', url);
        }

        const loadPopupContent = (id) => {
            const popup = popupLoaded.find(popup => popup.id === id).infos;

            $('#popup-template-sample .popup-template-title').text(popup.title);
            $('#popup-template-sample .popup-message').html(popup.text);

            let imageElement = $('#popup-template-sample .popup-image');
            if (popup.image != null) {
                imageElement.parent().show();
                imageElement.attr('src', baseUrl + popup.image);
            } else {
                imageElement.parent().hide();
            }
            if (popup.link != null && popup.labelLink != null && popup.linkPosition != null) {
                let linkTop = $('#popup-template-sample .popup-template-link-top');
                let linkBottom = $('#popup-template-sample .popup-template-link-bottom');
                linkTop.text(popup.labelLink);
                linkBottom.text(popup.labelLink);
                linkTop.attr('href', popup.link);
                linkBottom.attr('href', popup.link);
                if (popup.linkPosition === 'top') {
                    linkTop.show();
                    linkBottom.hide();
                } else if (popup.linkPosition === 'bottom') {
                    linkBottom.show();
                    linkTop.hide();
                } else {
                    linkBottom.hide();
                    linkTop.hide();
                }
            }
        }
    </script>
{% endblock %}