{% extends 'baseRelatorio.html.twig' %}

{# Nome Relatório #}
{% block nome_relatorio %}
    <h3 style="text-transform: uppercase; color: gray; font-weight: bold">{{nomeRelatorio}}  </h3>
{% endblock %}

{% block title %}
    <h3 style="text-transform: uppercase">{{nomeRelatorio}}</h3>
{% endblock %}

{# Filtros Relatório #}
{% block filtros %}
    {% for f in filtros %}
        {% if 'Filtrado' in f %}
            {{f}}&emsp;&emsp;
        {% else %}
            Periodo: {{f}}&emsp;&emsp;
        {% endif %}
    {% endfor %}
{% endblock %}

{% block body %}
    <style>
        .tblRelMovEs {
            width: 100%;
            border: 2px solid gray;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .tblRelMovEs thead tr th,
        .tblRelMovEs tbody tr td {
            border: 1px solid gray;
            padding: 2px 5px;
            text-align: center;
        }

        .tblRelMovEs tbody {
            border: 2px solid gray;
        }

        .tblRelMovEs caption {
            color: black;
        }

        .tblRelMovEs tr th:nth-child(4),
        .tblRelMovEs tr td:nth-child(4){
            text-align: left;
            padding: 2px 5px 2px 20px;
        }

        .tblRelMovEs tr th:nth-child(1),
        .tblRelMovEs tr th:nth-child(2),
        .tblRelMovEs tr th:nth-child(6) {
            width: 120px;
        }

        .tblRelMovEs tr th:nth-child(5),
        .tblRelMovEs tr th:nth-child(7) {
            width: 130px!important;
        }

        @media print {

            body {
                font: 8pt Georgia, "Arial", Verdana, sans-serif;
                color: #000;
                margin:0;
                padding:0;
                /*line-height: 1.4em;*/
            }

            table {
                page-break-after: auto;
            }

            .tblRelMovEs tbody,
            .tblRelMovEs {
                border: 1px solid gray;
            }


            .tblRelMovEs thead tr th,
            .tblRelMovEs tbody tr td {
                padding: 1px;
                font: 8pt Georgia, "Arial", Verdana, sans-serif;
            }


            .tblRelMovEs tr th:nth-child(1),
            .tblRelMovEs tr th:nth-child(2),
            .tblRelMovEs tr th:nth-child(6),
            .tblRelMovEs tr th:nth-child(7) {
                width: 80px!important;
            }

            .tblRelMovEs tr th:nth-child(5),
            .tblRelMovEs tr th:nth-child(7) {
                width: 130px!important;
            }

            * {
                background:transparent !important;
                color:#000 !important;
                text-shadow:none !important;
                filter:none !important;
                -ms-filter:none !important;
            }

            @page {
                size: A4 landscape;
                margin-top: 0.5cm;
                margin-bottom: 0.5cm;
            }

            .btnExcel {
                display: none;
            }
        }

    </style>
    <div class="box box-default">
        <div class="box-body">
            {% if dados %}
                {% for item in dados %}
                    <a href="#" class="btnExcel btn btn-block btn-social btn-success" style="width: 200px" onClick="javascript:relatorioExcel();">
                        <i class="fa fa-file-excel-o"></i> Exportar XLS
                    </a>
                <table class="tblRelMovEs">
                    <caption>Estoque: {{ item.local }}</caption>
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Hora</th>
                            <th>Produto</th>
                            <th>Histórico</th>
                            <th>Usuário</th>
                            <th>Quantidade</th>
                            <th>Saldo Atual</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mov in item.produtos %}
                            <tr>
                                <td>{{ mov.data|date('d/m/Y') }}</td>
                                <td>{{ mov.data|date('H:i') }}</td>
                                <td>{{ mov.descricaoProduto | capitalize }}</td>
                                <td>{{ mov.historico | capitalize }}</td>
                                <td>{{ mov.usuario }}</td>
                                {% if mov.tipo == 1 %}
                                    <td>{{'+' ~ mov.quantidade }}</td>
                                {% elseif mov.tipo == 2 %}
                                    <td>{{'-'~ mov.quantidade}}</td>
                                {% endif %}
                                <td>{{ mov.saldo }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>

                </table>
                {% endfor %}
            {% else %} <!-- Não tem nenhuma movimentação para o período -->
                <h5 class="text-center">{{ msgVazio }}</h5>
            {% endif %}
        </div>
    </div>

    <script>
        const nomeRelatorio = "{{nomeRelatorio}}";
        const relatorioExcel = () => {
            let tab_text = `
                    <html xmlns:x="urn:schemas-microsoft-com:office:excel">
                        <head>
                        <meta charset="UTF-8">
                        <xml>
                            <x:ExcelWorkbook>
                                <x:ExcelWorksheets>
                                    <x:ExcelWorksheet>
                                        <x:Name>${nomeRelatorio}</x:Name>
                        <x:WorksheetOptions>
                            <x:Panes></x:Panes>
                        </x:WorksheetOptions>
                        </x:ExcelWorksheet>
                            </x:ExcelWorksheets>
                                </x:ExcelWorkbook>
                        </xml>
                        </head>
                        <body>
                        <table border='1px'>${$('.tblRelMovEs').html()}
                        </table>
                        </body>
                    </html>
            `;

            let data_type = 'data:application/vnd.ms-excel';

            let ua = window.navigator.userAgent;
            let msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
                if (window.navigator.msSaveBlob) {
                    var blob = new Blob([tab_text], {
                        type: "application/csv;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, `${nomeRelatorio}.xls`);
                }
            } else {
                $('.btnExcel').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
                $('.btnExcel').attr('download', `${nomeRelatorio}.xls`);
            }

        }
    </script>
{% endblock %}