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

{% block dashboard %}
    <div class="container-fluid">
        {% include 'affiliate/earnings.html.twig' %}

        <h3 class="referral-stats-title">{{ 'Statistics'|trans }}</h3>
        <label hidden="hidden"> {{ 'Actively Bid Placed Advertiser'|trans }}: &nbsp;<span
                    class="badge badge-referral"> {{ total_active_paid_customer }}</span></label>

        <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="referred-tab" data-toggle="tab" data-target="#referred-tab-pane"
                            type="button" role="tab" aria-controls="referred-tab-pane" aria-selected="true">
                        {{ 'Referred Users'|trans }}
                        <span class="badge badge-referral">{{ referred|length }}</span>
                    </button>
                </li>
            </ul>

            <div class="tab-content referral-tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="referred-tab-pane" role="tabpanel"
                     aria-labelledby="referred-tab"
                     tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-hover referral-table" style="max-width: 100%; overflow-x: auto;">
                            <thead>
                            <tr>
                                <th>Gebruikers</th>
                                <th>Actief</th>
                                <th>Datum</th>
                                <th>{{ 'Tracking Url'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for refer in referred %}
                                <tr>
                                    <td>{{ refer.childUser.id }}</td>
                                    <td>{{ refer.childUser.enabled ? 'Ja' : 'Niet geactiveerd' }}</td>
                                    <td>{{ refer.createdAt|date('Y-m-d') }}</td>
                                    {% if refer.promotionMaterial %}
                                        <td>
                                            {{ app.request.schemeAndHttpHost ~ '/promotion-ref?promotion=' ~ refer.promotionMaterial.id ~ '&referral=' ~ refer.parentUser.id ~ '&plan_type=' ~ refer.planType }}
                                        </td>
                                    {% else %}
                                        <td>{{ link ? url('signup_referral', {token: link.link}) }}</td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.querySelector('.referral-copy-link').addEventListener('click', async () => {
            const link = document.querySelector('.referral-link').value;
            await navigator.clipboard.writeText(link);

            const copyIcon = document.querySelector('.referral-copy-link .fas');
            copyIcon.classList.replace('fa-copy', 'fa-check');

            setTimeout(() => {
                copyIcon.classList.replace('fa-check', 'fa-copy');
            }, 1000);
        });
    </script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}