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

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

{% block dashboard %}
    <link rel="stylesheet" href="{{ asset('assets/datatable/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/datatable/buttons.dataTables.min.css') }}">

    <style>
        .chart-container {
            position: relative;
            width: 100%;
            height: auto;
            max-width: 800px;
            margin: 0 auto;
        }

        canvas {
            display: block;
            max-width: 100%;
            height: auto;
        }
    </style>


    <div class="container-fluid profile-page-container">
        {% include 'affiliate/earnings.html.twig' %}
        <br>
        <h4>Performance Data</h4>
        <ul class="nav nav-tabs itemral-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="daily-tab" data-toggle="tab" href="#daily-tab-pane" role="tab"
                   aria-controls="daily-tab-pane" aria-selected="true">
                    {{ 'Daily'|trans }}
                </a>
            </li>


            <li class="nav-item" role="presentation">
                <a class="nav-link" id="weekly-tab" data-toggle="tab" href="#weekly-tab-pane" role="tab"
                   aria-controls="weekly-tab-pane" aria-selected="false">
                    {{ 'Weekly'|trans }}
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="monthly-tab" data-toggle="tab" href="#monthly-tab-pane" role="tab"
                   aria-controls="monthly-tab-pane" aria-selected="false">
                    {{ 'Monthly'|trans }}
                </a>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="daily-tab-pane" role="tabpanel" aria-labelledby="daily-tab">
                <div class="chart-container">
                    <canvas id="dailyChart"></canvas>
                </div>
            </div>

            <div class="tab-pane fade" id="weekly-tab-pane" role="tabpanel" aria-labelledby="weekly-tab">
                <div class="chart-container">
                    <canvas id="weeklyChart"></canvas>
                </div>
            </div>

            <div class="tab-pane fade" id="monthly-tab-pane" role="tabpanel" aria-labelledby="monthly-tab">
                <div class="chart-container">
                    <canvas id="monthlyChart"></canvas>
                </div>
            </div>
        </div>
        <br>
        <h4>Commission Information</h4>

        <div class="table-responsive">
            <table id="affiliateTable" class="table table-hover"
                   style="max-width: 100%; overflow-x: auto;font-size: small;">
                <thead>
                <tr>
                    <th>{{ 'Date' | trans }}</th>
                    <th>{{ 'Products' | trans }}</th>
                    <th>{{ 'Sold' | trans }}</th>
                    <th>{{ 'Program' | trans }}</th>
                    <th>{{ 'RevShare' | trans }}</th>
                    <th>{{ 'Total Revenue(€)' | trans }}</th>
                    <th>{{ 'Net Earnings(€)' | trans }}</th>
                    <th>{{ 'Status' | trans }}</th>
                    <th>{{ 'Client ID' | trans }}</th>
                </tr>

                </thead>
                <tbody>
                {% for item in all_affiliate_commission_entries %}
                    <tr>
                        <td>{{ item.affiliateCommission.createdAt|date('Y-m-d') }}</td>
                        <td>
                            {% if item.affiliateCommission.commissionType=='credit' %}
                                Credits
                            {% elseif item.affiliateCommission.commissionType=='advert' %}
                                Advert
                            {% elseif item.affiliateCommission.commissionType=='pps' %}
                                PPS 20
                            {% endif %}
                        </td>
                        <td>1</td>
                        <td>
                            {% if item.affiliateCommission.planType=='temporary_commission' %}
                                Temporary
                            {% elseif item.affiliateCommission.planType=='life_time_commission' %}
                                Life Time
                            {% elseif item.affiliateCommission.planType=='pps_20' %}
                                PPS 20
                            {% endif %}
                        </td>
                        <td>
                            {% if item.affiliateCommission.planType=='temporary_commission' %}
                                30%
                            {% elseif item.affiliateCommission.planType=='life_time_commission' %}
                                15%
                            {% elseif item.affiliateCommission.planType=='pps_20' %}
                                20€
                            {% endif %}
                        </td>
                        <td>
                            {% if item.affiliateCommission.commissionType=='advert' or item.affiliateCommission.commissionType=='credit' %}
                                € {{ item.transaction.amount }}
                            {% else %}
                                € {{ 50 }}
                            {% endif %}
                        </td>
                        <td> € {{ item.affiliateCommission.commission|round(2) }}</td>
                        <td>
                            {% if item.affiliateCommission.paidStatus==1 %}
                                Paid
                            {% else %}
                                Pending Payment
                            {% endif %}
                        </td>
                        <td>{{ item.affiliateCommission.userId }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/charts.js') }}"></script>
    <script src="{{ asset('assets/datatable/jquery-3.6.4.min.js') }}"></script>
    <script src="{{ asset('assets/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/datatable/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/datatable/buttons.html5.min.js') }}"></script>
    {% include 'affiliate/performance/chartjs.html.twig' %}

    <script>
        $('#affiliateTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'csv',
                    text: 'Download CSV',
                    filename: 'affiliate_commissions_' + new Date().toISOString(),
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excel',
                    text: 'Download Excel',
                    filename: 'affiliate_commissions_' + new Date().toISOString(),
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ]
        });
    </script>
{% endblock %}