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

{% block title %}{% trans %} My dashboard | Promotip {% endtrans %}{% endblock %}

{% block body %}
    <div class="container xs-mb10">
        <div class="mb-3">
            {{ form_start(form) }}
            <div class="row gap-1 overview-dashboard-index align-items-center">
                <div class="col-md-5">
                    {{ form_row(form.month) }}
                </div>
                <div class="col-md-5">
                    {{ form_row(form.paymentStatus) }}
                </div>
                <div class="col-auto">
                    <button class="btn btn-pink btn-sm">Filter</button>
                </div>
            </div>
            {{ form_widget(form) }}

            {{ form_end(form) }}
            <div class="w-100 mt-3"></div>
            {% if 'ROLE_ROOT' in app.user.roles and invoices|length > 0 %}
                <a href="{{ path('admin_payouts', app.request.query.all|merge({download: true})) }}">
                    <i class="fas fa-file-pdf"></i> Download alle facturen
                </a>
            {% endif %}
        </div>

        {% if invoices|length > 0 %}
            <form method="POST" action="{{ path('mark_as_paid') }}" id="markPaidForm">
                <div id="markPaidButtonContainer" style="display: none;">
                    <button type="submit" class="btn btn-pink btn-sm" id="markAsPaidButton">{{ 'Mark as Paid'|trans }}</button>
                </div>
                <table class="table styled-table">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>UUID</th>
                        <th style="width: 38.717%;">Factuurnummer</th>
                        <th style="width: 38.717%;">Datum</th>
                        <th>Amount</th>
                        <th style="width: 40%;">Status</th>
                        <th style="width: 38.717%;"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for invoice in invoices %}
                        <tr>
                            <td>
                                {% if invoice.status == 0 %}
                                    <input type="checkbox" class="invoiceCheckbox" name="invoices[]"
                                           value="{{ invoice.id }}">
                                {% endif %}
                            </td>
                            <td>{{ invoice.user.id }}</td>
                            <td>{{ get_front_invoice_number_payout(invoice) }}</td>
                            <td>{{ invoice.createdAt|date("d/m/Y") }}</td>
                            <td>{{ invoice.totalAmount }} €</td>
                            <td>
                                {% if invoice.status == 0 %}
                                    <span style="color: red;">Unpaid</span>
                                {% else %}
                                    <span style="color: green;">Paid ({{ invoice.paidAt|date("d/m/Y") }})</span>

                                {% endif %}
                            </td>
                            <td style="word-break: normal;">
                                <a href="{{ path('admin_download_payout_invoice', {'invoice' : invoice.id}) }}">
                                    <strong><span style="color:#8C4968">Factuur downloaden</span> <i
                                                class="fas fa-file-pdf"></i></strong>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </form>
        {% else %}
            <div class="text-center text-black-50 font-italic">Geen factuur gevonden</div>
        {% endif %}
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>

        const checkboxes = document.querySelectorAll('.invoiceCheckbox');
        const markPaidButtonContainer = document.getElementById('markPaidButtonContainer');
        const selectAllCheckbox = document.getElementById('selectAll');

        function toggleMarkPaidButton() {
            const selectedCheckboxes = document.querySelectorAll('.invoiceCheckbox:checked');
            if (selectedCheckboxes.length > 0) {
                markPaidButtonContainer.style.display = 'block';
            } else {
                markPaidButtonContainer.style.display = 'none';
            }
        }

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', toggleMarkPaidButton);
        });
        selectAllCheckbox.addEventListener('change', (event) => {
            checkboxes.forEach(checkbox => {
                checkbox.checked = event.target.checked;
            });
            toggleMarkPaidButton();
        });

        $('#markAsPaidButton').on('click', function (event) {
            const confirmation = confirm("{{ 'confirmation_payout_paid'|trans }}");
            if (!confirmation) {
                event.preventDefault();
            }
        });

    </script>
{% endblock %}