{% set menuLeft = 'Facture.Demat.index' %}
{% set menuActive = 'Facture' %}

{% do setAriane(0, 'Gestion des Factures entrantes' | trad) %}
{% extends 'layout.twig' %}

{% block body %}

<section class="contenu" style="min-height: 150vh">

    <header class="bs-row">
        <h1 class="bs-col">{{ 'Factures électroniques entrantes' | trad }}</h1>
        <div class="bs-col text-right">
            <button class="button principal mr-0" type="button" 
                onclick="exportMainTable()"
            >{{ 'Exporter' | trad }}</button>
            <script>
                function exportMainTable() {
                    ajaxSimple(
                        {{ path('Facture.Demat.export') | json }},
                        new FormData(document.getElementById('maintable-form-filtre')),
                        () => {
                            activePopupInfo(
                                {{ 'Informations' | trad | json }},
                                {{ "Votre document est en cours de téléchargement, vous allez recevoir un mail contenant votre document." | trad | json }},
                                'modal_small'
                            );
                        }
                    );
                }
            </script>
        </div>
    </header>
    {{ ariane() }}
    
    <div class="bs-row">
        <div class="bs-col"> 
    {% embed '@EtatStatistiques/Tableau/_gestable.twig' with {
            table: {
                id: 'maintable',
                listCol: [
                    {
                        name: 'TYPE_NEW',
                        label: 'Type' | trad,
                        filter: {type: 'select'},
                        format: 'labelmap',
                        labelmap: {
                            A: 'Avoir' | trad,
                            F: 'Facture' | trad,
                            C: 'Facture d’acompte' | trad,
                        },
                        sortable: true,
                    },
                    {
                        name: 'SocRs',
                        label: 'Société' | trad,
                        filter: {type: 'text'},
                        sortable: true,
                    },
                    {
                        name: 'FouRs',
                        label: 'Fournisseur' | trad,
                        filter: {type: 'text'},
                        sortable: true,
                    },
                    {
                        name: 'FACT_FOU',
                        label: 'Référence facture' | trad,
                        filter: {type: 'text'},
                        sortable: true,
                    },
                    {
                        name: 'DATE_FAFO',
                        label: 'Date de la facture' | trad,
                        format: 'date',
                        sortable: true,
                    },
                    {
                        name: 'TOTAL_HT',
                        label: 'Total HT' | trad,
                        filter: {type: 'text'},
                        format: 'amount',
                        amountDevise: 'DEVISE',
                    },
                    {
                        name: 'TotalTva',
                        label: 'Total TVA' | trad,
                        format: 'amount',
                        amountDevise: 'DEVISE',
                    },
                    {
                        name: 'TOTAL_TTC',
                        label: 'Total TTC' | trad,
                        filter: {type: 'text'},
                        format: 'amount',
                        amountDevise: 'DEVISE',
                    },
                    {
                        name: 'CREATED',
                        label: 'Date de prise en charge' | trad,
                        format: 'date',
                        sortable: true,
                    },
                    {
                        name: 'STATUS',
                        label: 'Statut' | trad,
                        filter: {type: 'select'},
                        format: 'enum',
                        enum: 'Entity\\Model\\Enum\\EFacDematFlowStatus',
                        sortable: true,
                    },
                    {
                        name: 'integrable',
                        label: 'Intégrée' | trad,
                        filter: {type: 'select', listChoice: {
                            'N': 'Non' | trad,
                            'O': 'Oui' | trad,
                        }},
                    },
                    {
                        name: 'routage',
                        label: 'Routage' | trad,
                        filter: {type: 'select', listChoice: {
                            'O': 'Oxalys' | trad,
                        }},
                    },
                    {name: 'icon'}
                ],
                listRow: listRow,
                pagination: pagination,
                action: true,
            },
            post: post,
        } %}
            {% block tr_attr %}{{ attr({
                'data-visu-fact-path': path('Facture.Demat.visual', {id: item.ID})
            }) }}{% endblock %}
            {% block pre_form %}
                {# TODO : factorize #}
                <div class="bs-row box-form">
                    <div class="bs-col filtre">
                        {{ formInput({
                            type: 'SELECT',
                            name: 'filter_PARTN_ID',
                            choices: mapPartenaire,
                            bulle: true,
                        }, post, 'Plateforme agréée' | trad) }}
                    </div>
                    <div class="bs-col filtre">
                    </div>
                    <div class="bs-col text-right">
                        <button class="secondaire button ajout" id="buttonCollapseFA" data-toggle="collapse" href="#filtre_avances" >
                            {{ 'Filtres avancés' | trad }}
                        </button>
                        <input type="hidden" id="retract" value="{{'Rétracter' | trad}}">
                        <input type="hidden" id="advancedFilters" value="{{ 'Filtres avancés' | trad }}">

                        <button type="submit" 
                            class="principal button btn_filtre"
                        >{{ 'Filtrer' | trad }}</button>
                    </div>
                </div>
                <div id="filtre_avances" class="collapse clearfix">
                    {{ filtreAvance(post, filtreAvance, initFiltreAvance) }}
                </div>
            {% endblock %}
            {% block cell_STATUS %}
                <td>
                    {{- item.Status | enumToLabel() -}}
                    {% if item.RefusReason %}
                        <span class="incidents ml-tiny white-tooltip" style="vertical-align: bottom;">
                            <span class="infos_tooltip">
                                {{ item.RefusReason | enumToLabel() }}
                            </span>    
                        </span>
                    {% endif %}
                </td>
            {% endblock %}
            {% block cell_integrable %}
                <td>
                    {% if not item.hasValidError %}
                        {{ 'Oui' | trad }}
                    {% else %}
                        {{ 'Non' | trad }}
                        <a class="incidents ml-tiny" style="vertical-align: bottom;"
                            href="javascript:{{ ajaxPopup(
                                'Erreur' | trad,
                                'Facture.Demat.popupErrorValidation',
                                {id: item.ID}
                            ) | e('html_attr') }}"></a>
                    {% endif %}
                </td>
            {% endblock %}
            {% block cell_routage %}<td>Oxalys</td>{% endblock %}
            {% block cell_icon %}
                <td>
                {% if item.FIC_LISIBLE %}
                    <a href="{{ path('Facture.Demat.visual', {id: item.ID}) }}"
                        target="_blank" class="pdf white-tooltip"
                    >
                        <span class="infos_tooltip top-left">
                            {{ 'Image facture.' | trad }}
                        </span>
                    </a> 
                {% endif %}
                </td>
            {% endblock %}
        {% endembed %}
        </div>
        <div id="wrapper-visu-facture" class="bs-col-auto"
            style="width: 0; transition: .5s; overflow: hidden; z-index: 1"
            data-followscroll
        >
            <div style="top:0; width: 25vw" class="box-form px-0">
                <button type="button" class="btn-reset"
                    onclick="hideVisuFacImg()"
                >
                    <img src="{{ baseUrl('IconeV2/Misc/Collapse.png') }}" style="width: 3em;"/>
                </button>
                <iframe src="" style="width: 100%; height: calc(100vh - 35px/* btn hide height*/); border: none; ">
                </iframe>
            </div>
        </div>
    </div>
</section>
<script>
function showPopupFactureValidation(error) {
    activePopupInfo(
        {{ 'Erreur de validation' | trad | json }},
        error
    );
}

addGlobalEventListener('click', '#maintable tr[data-visu-fact-path] *', (event) => {
    // Exclude menu contextuel
    if (event.target.closest('td').classList.contains('parametrage')) return;
    // Exclude link
    if (event.target.closest('a')) return;

    showVisuFacImg(event.target.closest('tr'));
})

function showVisuFacImg(tr) {
    const wrapper = document.getElementById('wrapper-visu-facture');
    wrapper.style.width = '25vw';

    const ifram = wrapper.querySelector('iframe');
    const path = tr.getAttribute('data-visu-fact-path');
    // Reset table selection
    document.querySelectorAll('.tr_selected').forEach((tr) => {
        tr.classList.remove('tr_selected');
    });
    tr.classList.add('tr_selected');
    if (! ifram.src.endsWith(path)) ifram.src = path;
}
function hideVisuFacImg() {
    // Reset table selection
    document.querySelectorAll('.tr_selected').forEach((tr) => {
        tr.classList.remove('tr_selected');
    });
    
    // collapse right panel
    document.getElementById('wrapper-visu-facture').style.width = '0';
}


window.addEventListener('scroll-echo', function (event) {
	let el = document.querySelector('[data-followscroll]');

    if (el.getBoundingClientRect().top < 0 ) {
        el.children[0].style.position = 'fixed';
    } else {
        el.children[0].style.position = 'relative';
    }
    
});

</script>
{% endblock %}