
{% extends 'layout.twig' %}

{% block body %}

	<div class="contenu clearfix">
	
    	<h1>{{ 'Facture' | trad }}</h1>
    	
		{{ ariane() }}

        <div class="clearfix padding15">
            <div class="colonne2" style="width: 65%;" id="refreshRejected">
                {% for key, SECTO in listePDF %}
                    {% if key %}
                        <h4>
                            {{ key }}
                            <span id="showHide{{key}}" class="open" onClick="showHideTable('{{ key }}');">›</span>    
                        </h4>
                    {% endif %}
                    <table class="table table-hover tableV2" id="table{{ key }}">
                        <thead class="thead-dark" style="display: none;">
                            <th scope="col" colspan="3"></th>
                        </thead>
                        <tbody>
                            {% for rejected in SECTO %}
                                <tr id="rej_{{key}}_{{loop.index}}">
                                    <td style="cursor:pointer;" width="25%" onClick="changeIframe('{{ rejected.file }}', '{{ key }}');">{{ rejected.file }}</td>
                                    <td style="cursor:pointer;" onClick="changeIframe('{{ rejected.file }}', '{{ key }}');">{{ rejected.rejected }}</td>
                                    <td>
                                        {{ hover_action('rej_'~key~'_'~loop.index, 'Supprimer_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'"~rejected.file~"\', \'"~path('Facture.Zedoc.ajaxActionRejected', {secto:key? key:null,action:'DELETED'})~"\', \'"~('Etes-vous sûr de vouloir supprimer la facture' | trad |e('js')|raw)~" ?\', \'refreshRejected\')", 'float: right;margin-right:5px;', 'Supprimer' | trad) }}
                                        {% if rejected.MOTIF != 'OVERSIZED' and rejected.MOTIF != 'OVERPAGES' %}
                                            {{ hover_action('rej_'~key~'_'~loop.index, 'refresh_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\',  \'"~rejected.file~"\', \'"~path('Facture.Zedoc.ajaxActionRejected', {secto:key? key:null,action:'RECYCLED'})~"\', \'"~('Etes-vous sûr de vouloir recycler la facture' | trad |e('js')|raw)~" ?\', \'refreshRejected\')", 'float: right;margin-right:5px;', 'Recycler' | trad) }}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% endfor %}
            </div>
            <div class="colonne2 last" style="width: 30% !important;">
                <iframe id="objectFicLad" src="" height="550px;" style="position:fixed;top:270px;width: 30%;"></iframe>
            </div>
        </div>
    </div>
    <style>
        #refreshRejected h4 {
            position:relative;
        }
        .open {
            cursor:pointer;
            font-size: 30px;
            position: absolute;
            right: 10px;
            top: -12px;
            font-weight: bold;
            transform: rotate(90deg);
        }
    </style>
    <script>
        function showHideTable(id)
        {
            if($('#table'+id).is(':visible')) {
                $('#table'+id).hide();
                $('#showHide'+id).css("transform", "rotate(0deg)");
                $('#showHide'+id).css("right", "15px");
            } else {
                $('#table'+id).show();
                $('#showHide'+id).css("transform", "rotate(90deg)");
                $('#showHide'+id).css("right", "10px");
            }
        }

        function changeIframe(file, secto)
        {
            var params = 'file='+encodeURI(file)+'&secto='+encodeURI(secto)+'&tokenCSRF='+$('#tokenCSRF').val();
            var xhr = new XMLHttpRequest();

            xhr.open('POST', '{{ path('Facture.Zedoc.affichagPDFJRejected') }}');
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = handler;
            xhr.responseType = 'blob';
            xhr.send(params);

        }

        function handler() {
            if (this.readyState === this.DONE) {
                if (this.status === 200) {
                // this.response is a Blob, because we set responseType above
                var data_url = URL.createObjectURL(this.response);
                document.querySelector('#objectFicLad').src = data_url;
                } else {
                console.error('no pdf :(');
                }
            }
        }
    </script>
{% endblock %}