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

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

{% block javascripts %}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Gérer les abonnements récurrents
        </h4>
    </div>
{% endblock %}
{% block page_content %}
    <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div>
                <input id="isOnlyActive" type="checkbox">
                <label for="isOnlyActive">Afficher uniquement les abonnements actifs</label>
                <table id="subscription-list" class="hover row-border" style="padding:1%;width: 100%">
                    <thead>
                    <tr>
                        <th class="align_center">Client</th>
                        <th class="align_center">Id Mollie</th>
                        <th class="align_center">Date création</th>
                        <th class="align_center">Date début</th>
                        <th class="align_center">Date prochain prélèvement</th>
                        <th class="align_center">Montant (€)</th>
                        <th class="align_center validIB">Statut</th>
                        <th class="align_center">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="box-footer"></div>
            </div>
            <script type="application/javascript">
                // $(document).ready(function () {
                const STATUS_LABEL_FR = {
                    "pending": "En attente",
                    "active": "Actif",
                    "suspended": "Suspendu",
                    "completed": "Terminé",
                    "canceled": "Annulé",
                    "expired": "Expiré"
                }
                let dt = $('#subscription-list').DataTable({
                    // dom: 'Bfrtip',
                    "processing": true,
                    "serverSide": true,
                    responsive: true,
                    searching: true,
                    orderMulti: false,
                    "bLengthChange": false,
                    info: false,
                    paging: false,
                    language: {
                        url: '/localisation/fr_FR.json'
                    },
                    order: [[0, "ASC"]],
                    "ajax": "{{ path('mollie_subscription_list') }}",
                    "fnCreatedRow": function (nRow, aData, iDataIndex) {
                        $(nRow).attr('id', aData.id);
                        $(nRow).attr('data-customer', aData.customerId);
                        ;

                    },
                    "columnDefs": [
                        {
                            "targets": 5,
                            createdCell: function (td, cellData, rowData, row, col) {
                                switch (rowData.status) {
                                    case 'active':
                                        $(td).css('background-color', '#FFF2CC');
                                        break;
                                    case 'canceled':
                                        $(td).css('background-color', '#FFC000');
                                        $(td).css('color', 'white');
                                        break;
                                    default:
                                        $(td).css('background-color', '#BF9000');
                                        $(td).css('color', 'white');
                                        break;
                                }
                            }
                        }
                    ],
                    columns: [
                        {
                            data: "customerName",
                            name: "customerName",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "customerId",
                            name: "customerId",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "createdAt",
                            name: "createdAt",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "startDate",
                            name: "startDate",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "nextPaymentDate",
                            name: "nextPaymentDate",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {

                                return '<strong>' + data != null ? data : "" + '</strong>';
                            }
                        },
                        {
                            data: "amount",
                            name: "amount",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return data;
                            }
                        },
                        {
                            data: "status",
                            name: "status",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return '<strong>' + STATUS_LABEL_FR[data] + '</strong>';
                            }
                        },
                        {
                            data: "id",
                            name: "id",
                            width: "1%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                if (full.status === "active") {
                                    let btnEdit = '<button onclick="$(`#modal-are-you-sur-to-edit`).modal();initVar(' + full.id + ')">' + '<img src = "{{ asset('install-bois/icon/tab_action_modifier.png') }}" alt = "Modifier" / ></button>'
                                    let btnStop = '<button onclick="$(`#modal-are-you-sur-to-delete`).modal();initVar(' + full.id + ')">' + '<img src = "{{ asset('install-bois/icon/tab_action_supprimer.png') }}" alt = "Supprimer" / ></button>'
                                    let containerBtns = '<div id="containerBtns">' + btnEdit + btnStop + '</div>'

                                    let btnEditValid = '<div class="btn btn-sm btn-default" onclick="editLineValid()">' + '<span class="fa fa-check-circle"> </span></div>'
                                    let btnEditCancel = '<div class="btn btn-sm btn-default" style=width:35px; onclick="editCancel(' + full.id + ')">' + '<span class="fa fa-times-circle"> </span></div>'
                                    let containerBtnsEdit = '<div id="containerBtnsEdit" style="display: none">' + btnEditValid + btnEditCancel + '</div>'

                                    return containerBtns + containerBtnsEdit;
                                }
                                return ""
                            }
                        },
                    ],
                    "oLanguage": {
                        "sSearch": "Rechercher un client : "
                    }
                });
                dt
                    .columns(5)
                    .search('active')
                    .draw();
                $('#isOnlyActive')[0].addEventListener('change', function () {
                    if (this.checked) {
                        dt
                            .columns(5)
                            .search('active')
                            .draw();
                    } else {
                        dt
                            .columns(5)
                            .search('')
                            .draw();
                    }

                });
                dt.on('draw', function () {
                    let search = dt.data().ajax.json().search;
                    let error = dt.data().ajax.json().moreThan5Subscriptions;
                    switch (true) {
                        case !error && !search:
                            $('#sentenceInfo').text('5 derniers abonnements créés')
                            break;
                        case error && search:
                            $('#sentenceInfo').text('Précisez la recherche car plus de 5 résultats ont été trouvés')
                            break;
                        default:
                            $('#sentenceInfo').text('')
                            break;
                    }
                });
            </script>
            {{ include('mollie_subscription/modal/_form_are_you_sure_to_edit.html.twig') }}
            {{ include('mollie_subscription/modal/_form_are_you_sur_to_stop.html.twig') }}
            <script type="text/javascript"
                    src="{{ asset('install-bois/subscription/main.js') }}"></script>
            <script type="application/javascript"
                    src="{{ asset('install-bois/subscription/request.js') }}"></script>
        </div>
    </div>
{% endblock %}