{% extends 'base.html.twig' %}
{% block facture %}
    <link rel="stylesheet"
          href="{{ asset('assets/styles/css/facture.min.css') }}" />
{% endblock %}
{% block title %}Toutes les factures{% endblock %}
{% block body %}
    <div style="display: flex;">
    <div class="tbl-container tbl-container-formateur" id="main_div">
        <table class="action_new_table">
            <div style="background:#fff">
                <thead class="tbl-header">
                    <tr class="tbl-row-header">
                        <th>Code facture</th>
                        <th>Date facture</th>
                        <th>Code Action</th>
                        <th>Date encaissement</th>
                        <th>Montant</th>
                        <th>Paiement</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </div>
            <tbody class="tbl-body">
                {% for facture in factures %}
                    <tr class="tbl-body-rows">
                        <td>
                            {%  if facture.code_facture != " " %}
                                <a class="facture-show_link"  href="{{path('see_bill', {'id': facture.id})}}">
                                    {{ facture.code_facture }}
                                </a>
                            {% else %}
                                <a class="facture-show_link"  href="{{path('see_bill', {'id': facture.id})}}" style="color:#c0392b">
                                    <i>Sans code</i>
                                </a>
                            {% endif %}
                        </td>
                        <td>{{ facture.date_creation ? facture.date_creation|date('d/m/Y') : ""  }}</td>
                        <td>{{ facture.codeAction }}</td>
                        <td>{{ facture.date_encaissement ? facture.date_encaissement|date('d/m/Y') : ""  }}</td>
                        <td>{{ facture.total_ht }}€</td>
                        <td class='facture-list-listing'>{{ facture.paiement ? "<i class=\"action-edit_link fad fa-check-square fa-lg\"></i>" : "<i class=\"action-edit_link fad fa-times-square fa-lg\"></i>"  }}</td>
                        <td>
                            <div class="action_d">
                                <a class="collection-edit btn btn-sm"
                                   href="{{path('facture_edit' , {'id': facture.id} )}}">
                                    <i class=" far fa-edit"></i>
                                </a>
                                <p>
                                    {{ include('dossier_financier/_delete_form.html.twig') }}
                                </p>
                            </div>
                        </td>
                    </tr>
                     {% else %}
                        <tr>
                            <td colspan="7">
                                La requête n'a retourné aucune données.
                            </td>
                        </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
        <script>
            let action_id;
            const targetNode = document
            const config = { attributes: false, childList: true, subtree: true};
            const callback = function(mutationsList, observer) {
                for(let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        let links_redirect = [...document.getElementsByClassName('action-edit_link')]
                        links_redirect.forEach(el => {
                            el.addEventListener('click', e => {
                                el.innerHTML = "<i class=\"action-edit_link fad fa-check-square fa-lg\"></i>";
                            })
                        })
                    }
                }
            };

            const observer = new MutationObserver(callback);
            observer.observe(targetNode, config);
            //observer.disconnect();

            function removePopup() {
                $(".popup-modal")[1].style.cssText = "top:100vh; display:none;opacity:0";
                $(".popup-background")[1].style.cssText = "height:0vh; display:none"
            }


        </script>

{% endblock %}