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

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

{% block dashboard %}


    <div class="referral-stats-section">
        <ul class="nav nav-tabs referral-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="payout-tab" data-toggle="tab" data-target="#payout-tab-pane"
                        type="button" role="tab" aria-controls="payout-tab-pane" aria-selected="true">
                    {{ 'Payouts'|trans }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="commission-tab" data-toggle="tab" data-target="#commission-tab-pane"
                        type="button"
                        role="tab" aria-controls="commission-tab-pane" aria-selected="false">
                    {{ 'Commission Overview'|trans }}
                </button>
            </li>
        </ul>
        <br>

        <div class="tab-content text-tab-pane" id="myTabContent">
            <div class="tab-pane fade show active" id="payout-tab-pane" role="tabpanel" aria-labelledby="payout-tab"
                 tabindex="0">

                <div class="mb-3">
                    {{ form_start(form) }}
                    <div class="row">
                        <div class="col-8 col-md-8">
                            {{ form_row(form.month) }}
                        </div>
                        <div class="col-2 col-md-2 mt-4">
                            <button class="btn btn-pink btn-sm">Filter</button>
                        </div>
                    </div>
                    {{ form_end(form) }}

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

                {% if invoices|length > 0 %}
                    <table width="100%" class="overview-dashboard-index styled-table table-responsive">
                        <thead>
                        <tr>
                            <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 style="color: black;">
                        {% for invoice in invoices %}
                            <tr>
                                <td>{{ get_front_invoice_number_payout(invoice) }}</td>
                                <td>{{ invoice.createdAt|date("d/m/Y") }}</td>
                                <td>{{ invoice.totalAmount|round(2) }} €</td>
                                <td>
                                    {% if invoice.status == 0 %}
                                        <span style="color: red;">Unpaid</span>
                                    {% else %}
                                        <span style="color: green;">Paid</span>
                                    {% endif %}
                                </td>
                                <td style="word-break: normal;"><a
                                            href="{{ path('affiliate_facturen_download', {'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>

                {% else %}
                    <div class="text-center text-black-50 font-italic">Geen factuur gevonden</div>
                {% endif %}
            </div>

            <div class="tab-pane fade" id="commission-tab-pane" role="tabpanel" aria-labelledby="commission-tab"
                 tabindex="0">
                {% if commissions|length > 0 %}
                    <table width="100%" class="overview-dashboard-index styled-table table-responsive">
                        <thead>
                        <tr>
                            <th style="width: 20.717%;">{{ 'Period'|trans }}</th>
                            <th style="width: 28.717%;">{{ 'Unpaid'|trans }} (€)</th>
                            <th style="width: 18.717%;">{{ 'Total Commission'|trans }} (€)</th>
                            <th style="width: 40%;">{{ 'Status'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody style="color: black;">
                        {% for commission in commissions %}
                            <tr>
                                <td>{{ commission.month_year }}</td>
                                <td>
                                    This Month: € {{ commission.commission|round(2) }}
                                    <br>
                                    {% if commission.carry_amount > 0  %}
                                        Carried-over Amount: € {{ commission.carry_amount|round(2)  }}
                                    {% endif %}
                                </td>
                                <td>€ {{ commission.total_commission|round(2) }}</td>
                                <td>
                                    {% if commission.total_commission < threshold_amount %}
                                        <span style="color: red;">Below Threshold</span>
                                    {% else %}
                                        <span style="color: green;">Completed and Paid</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="text-center text-black-50 font-italic">Geen factuur gevonden</div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}