{% set grid_layout = 'datagrid.html.twig' %}

<div class="hidden-print">
    {{ grid_top(grid) }}
    <div class="text-center">
        <button type="button" class="btn btn-info btn-sm" id="export">Export</button>
    </div>
    <hr />
</div>

<div class="report">
    <div class="report-header">
        <div class="report-title">PT. Galatech Jaya Abadi</div>
        <div class="report-title">Laporan Pengeluaran Kas / Bank</div>
        <div>
            {% set startDate = grid.searchVals['expenseHeader']['transactionDate'][1]|default %}
            {% set endDate = grid.searchVals['expenseHeader']['transactionDate'][2]|default %}
            {{ startDate ? startDate|date('j F Y') }} &nbsp;&ndash;&nbsp; {{ endDate ? endDate|date('j F Y') }}
        </div>
    </div>

    <br />

    <table class="report-data">
        <thead class="border-top-solid-bold border-bottom-solid-bold">
            <tr>
                <th class="text-center">Pengeluaran #</th>
                <th class="text-center">Tanggal</th>
                <th class="text-center">Kas / Bank</th>
                <th class="text-center">Note</th>
            </tr>
            <tr>
                <td colspan="4">
                    <table>
                        <thead>
                            <tr>
                                <th class="text-center">Nama Akun</th>
                                <th class="text-center">Deskripsi</th>
                                <th class="text-center">Memo</th>
                                <th class="text-center">Jumlah</th>
                            </tr>
                        </thead>
                    </table>
                </td>
            </tr>
        </thead>
        <tbody class="border-top-solid-bold border-bottom-solid-bold">
            {% for expenseHeader in grid.data %}
                <tr data-field-id="{{ expenseHeader.id }}">
                    <td class="text-left">{{ expenseHeader.codeNumber|default }}</td>
                    <td class="text-left">{{ expenseHeader.transactionDate|default ? expenseHeader.transactionDate|date('j F Y') }}</td>
                    <td class="text-left">{{ expenseHeader.account.name|default }}</td>
                    <td class="text-left">{{ expenseHeader.note|default }}</td>
                </tr>
                <tr class="border-bottom-dotted-bold">
                    <td colspan="4">
                        <table>
                            <tbody>
                                {% for expenseDetail in expenseHeader.expenseDetails %}
                                    <tr>
                                        <td class="text-left">{{ expenseDetail.account.name|default }}</td>
                                        <td class="text-left">{{ expenseDetail.description|default }}</td>
                                        <td class="text-left">{{ expenseDetail.memo|default }}</td>
                                        <td class="text-right">{{ expenseDetail.amount|default|number_format(2) }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="hidden-print">
    <br />
    {{ grid_bottom(grid) }}
</div>

<script>
    jQuery(function($) {
        $("#export").click(function() {
            var url = "{{ path('report_expense_header_export') }}";
            var data = {{ grid.params|json_encode|raw }};
            $.redirect(url, data);
        });
    });
</script>
