{% extends 'admin/layouts/base.html.twig' %}

{% block title %}Dashboard | {{ app_name }}{% endblock %}
{% set active = "app_admin_dashboard" %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home',
    },
    {
        'title': 'Dashboard'
    }
] %}
{% block stylesheets %}
   <style>
       .navigation {
           margin: 0 0 15px 20px;
       }
   </style>
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-lg-4">

            <!-- Members online -->
            <div class="card bg-teal text-white">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <i class="ph ph-handshake" style="font-size: 40px"></i>
                        </div>
                        <div class="col">
                            <h4>Total Affiliate</h4>
                            <h3>{{ numberOfAffiliate is not null ? numberOfAffiliate : 'N/A'}}</h3>
                            </h4>
                        </div>
                    </div>
                </div>

                <div class="container-fluid">
                    <div id="members-online"></div>
                </div>
            </div>
            <!-- /members online -->

        </div>

        <div class="col-lg-4">

            <!-- Current server load -->
            <div class="card bg-pink text-white">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <i class="ph ph-chart-pie-slice" style="font-size: 40px"></i>
                        </div>
                        <div class="col">
                            <h4>Total Commission</h4>
                            <h3>{{ userCommissionsAmount is not null ? userCommissionsAmount|number_format(2,',','.',) : '0'}}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h3>
                            </h4>
                        </div>
                    </div>
                </div>

                <div id="server-load"></div>
            </div>
            <!-- /current server load -->

        </div>

        <div class="col-lg-4">

            <!-- Today's revenue -->
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <i class="ph ph-chart-bar" style="font-size: 40px"></i>
                        </div>
                        <div class="col">
                            <h4>Total Sales</h4>
                            <h3>{{ totalSales is not null ? totalSales|number_format(2,',','.') : '0'}}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h3>
                            </h5>
                        </div>
                    </div>
                </div>
                <div id="today-revenue"></div>
            </div>
            <!-- /today's revenue -->
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card border-success">
                <div class="card-header cursor-pointer d-flex justify-content-between align-items-center">
                    <h5 id="selectedMonthText" class="mb-0 text-dark text-center">Total Sales </h5>
                    <div class="dropdown">
                        <select id="monthSelect" class="form-select" aria-label="Default select example">
                            <option>Select Months</option>
                            {% for month in allMonths %}
                                {% if month == currentMonth %}
                                    <option value="{{ month }}" selected>{{ month }}</option>
                                {% else %}
                                    <option value="{{ month }}">{{ month }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="card-body">
                    <div style="width: 100%;">
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card border-success">
                <div class="card-header cursor-pointer d-flex justify-content-between align-items-center">
                    <h5 id="selectedYearTextss" class="mb-0 text-dark text-center">Payout </h5>
                </div>
                <div class="card-body">
                    <div style="width: 51.7%; margin: 0 auto;">
                        <canvas id="pieChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-success">
                <div class="card-header cursor-pointer d-flex justify-content-between align-items-center">
                    <h5 id="selectedYearTexts" class="mb-0 text-dark text-center">Total Commission </h5>
                    <div class="dropdown">
                        <select id="yearSelects" class="form-select" aria-label="Default select example">
                            <option>Select year</option>
                            {% for year in commissionYears %}
                                <option value="{{ year }}">{{ year }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="card-body">
                    <div style="width: 100%;">
                        <canvas id="barChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 card overflow-auto">
            <div class="card-header">
{#                {% if app.request.server.get('WHITE_LABLE_CLIENT') == "ai_growth"%}#}
{#                    <h1>Running AI</h1>#}
{#                {% else %}#}
                    <h1>My Order</h1>
{#                {% endif %}#}
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        {% if(user) %}
                            <table class="table table-striped text-center">
                                <thead>
                                <tr>
                                    <th scope="col">Order</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">End Date</th>
                                    <th scope="col">Product</th>
                                    <th scope="col">Duration</th>
                                    <th scope="col">Trial Time</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Daily Running</th>
                                    <th scope="col">Period of Time</th>
                                    <th scope="col">Auto Renewal</th>
                                    <th scope="col">Config</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for subscription in subscriptionWithPagination %}
                                    <tr>
                                        <th scope="row">
                                            <p>#{{ subscription.paymentid.orderid.id }}</p>
                                            <p>{{ subscription.userid.firstname }} {{ subscription.userid.lastname }}</p>
                                            
                                        </th>
                                        <td>
                                            {{ subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' }}
                                        </td>
                                        <td>
                                            {% set nextSubscriptionDate = 'N/A' %}
                                            {% set duration = subscription.duration %}
                                            {% if duration > 0 %}
                                                {% set nextSubscriptionDate = subscription.startdate|date_modify('+' ~ duration ~ ' months')|date('Y-m-d') %}
                                            {% endif %}
                                            {{ nextSubscriptionDate }}
                                        </td>
                                        <td>
                                            {% if subscription.paymentid.orderid.productid %}
                                                {% set hasProduct = true %}
                                                {{ subscription.paymentid.orderid.productid.name }}
                                            {% else %}
                                                N/A
                                            {% endif %}
                                        </td>
                                        <td>
                                            {{ subscription.duration ? (subscription.duration == 1 ? subscription.duration ~ ' Month' : subscription.duration ~ ' Months') : 'N/A' }}
                                        </td>
                                        <td>
                                            {% set trialDaysLeft = subscription.trialDaysLeft %}
                                            {% set hasTrials = subscription.hasTrials %}
                                            {% set status = subscription.status %}
                                            {% if hasTrials %}
                                                {% if trialDaysLeft > 0 and subscription.status|lower == 'trialing'  %}
                                                    <span class="badge bg-primary bg-opacity-10 text-primary">
                                                        {{ trialDaysLeft }} days left
                                                    </span>
                                                {% elseif trialDaysLeft == 0 and status|lower == 'trialing' %}
                                                    <span class="badge bg-warning bg-opacity-10 text-warning">
                                                         Today is the last day of your trial
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-danger bg-opacity-10 text-danger">
                                                        Trial period ended
                                                    </span>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-indigo bg-opacity-10 text-indigo">
                                                        No trial period
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge badge bg-warning">Waiting for your actions</span>
                                        </td>
                                        <td>
                                            {% set startDate = subscription.startdate %}
                                            {% set duration = subscription.duration %}

                                            {% if duration > 0 %}
                                                {% set currentDate = "now"|date("Y-m-d") %}
                                                {% set subscriptionEndDate = startDate|date_modify('+' ~ duration ~ ' months') %}

                                                {% set timeElapsed = currentDate|date_modify('midnight')|date_modify('midnight')|date('U') - startDate|date_modify('midnight')|date_modify('midnight')|date('U') %}
                                                {% set totalTime = subscriptionEndDate|date_modify('midnight')|date_modify('midnight')|date('U') - startDate|date_modify('midnight')|date_modify('midnight')|date('U') %}

                                                {% if timeElapsed > 0 %}
                                                    {% set completionPercentage = (timeElapsed / totalTime) * 100 %}
                                                    {{ (completionPercentage < 100 ) ? completionPercentage|round : 100 }}%
                                                {% else %}
                                                    0%
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% set startDate = subscription.startDate|date("Y-m-d") %}
                                            {% set endDate = startDate|date_modify('+' ~ subscription.duration ~ ' months') %}

                                            {% set currentDate = "now"|date("Y-m-d") %}

                                            {% set totalDays = (endDate|date("U") - startDate|date("U")) / (24 * 60 * 60) %}
                                            {% set currentDays = (currentDate|date("U") - startDate|date("U")) / (24 * 60 * 60) %}

                                            {% set totalWeeks = (totalDays / 7)|round(0, 'floor') %}
                                            {% set currentWeek = (currentDays / 7)|round(0, 'floor') %}
                                            <i class="ph ph-calendar-blank"></i>
                                            Week
                                            {{ currentWeek < totalWeeks ? currentWeek ~ ' / ' ~ totalWeeks : totalWeeks ~ ' / ' ~ totalWeeks }}
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar" style="width: {{ (currentWeek < totalWeeks ) ? (currentWeek / totalWeeks) * 100  : 100 }}%;" aria-valuenow="{{ currentWeek }}" aria-valuemin="0" aria-valuemax="{{ totalWeeks }}"></div>
                                            </div>
                                        </td>
                                        <td>
                                            {% if subscription.autorenewal == 1 %}
                                                <div class="toggle-button bg-success bg-opacity-10 text-success lh-1 rounded-pill p-2 me-3 text-center" data-toggle="on">
                                                    <i class="ph-clock"></i><span class="toggle-status">ON</span>
                                                </div>
                                            {% else %}
                                                <div class="toggle-button bg-danger bg-opacity-10 text-danger lh-1 rounded-pill p-2 me-3 text-center" data-toggle="off">
                                                    <i class="ph-clock"></i><span class="toggle-status">OFF</span>
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <i class="ph ph-gear" style="font-size: 30px;"></i> <!-- Adjust size as needed -->
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="navigation">
                {{ knp_pagination_render(subscriptionWithPagination) }}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var ctx = document.getElementById('lineChart').getContext('2d');
            var lineChart;
            const monthSelect = document.getElementById('monthSelect');
            const selectedMonthText = document.getElementById('selectedMonthText'); // Get the element to display selected year
            const currentYear = new Date().getFullYear();
            let currentMonth = '{{ currentMonth }}';
            monthSelect.value = currentMonth;
            selectedMonthText.textContent = 'Total Sales ' + currentMonth;
            monthSelect.addEventListener('change', function() {
                const selectedMonth = monthSelect.value;
                // Fetch chart data for the selected year
                fetchCommissionsChartData(selectedMonth);
                selectedMonthText.textContent = 'Total Sales ' + selectedMonth;
            });

            function fetchCommissionsChartData(selectedMonth) {
                const userId = {{ user.id }};
                const initialMonth = '{{ currentMonth }}'; // Get the default month from Twig
                fetch('{{ path('app_admin_get_commission_chart_data_ajax') }}?month=' + selectedMonth, {
                    method: 'GET'
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (lineChart) {
                            lineChart.destroy();
                        }
                        lineChart = new Chart(ctx, {
                            type: 'line',
                            data: data,
                            options: {
                                plugins: {
                                    tooltip: {
                                        callbacks: {
                                            label: function(context) {
                                                const datasetLabel = context.dataset.label || ''; // Dataset label
                                                const value = context.raw; // Access the raw value
                                                return `${datasetLabel}: €${value.toLocaleString()}`; // Add Euro sign and format
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    xAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }],
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }]
                                },
                                elements: {
                                    line: {
                                        borderColor: '#2ecc71',
                                    }
                                }
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching commission chart data:', error);
                    });
            }

            const initialYear = monthSelect.value;
            fetchCommissionsChartData(initialYear); // Fetch chart data for the initial year
        });

        document.addEventListener('DOMContentLoaded', function () {
            var ctx = document.getElementById('barChart').getContext('2d');
            var chartData = {};
            var barChart;
            const yearSelects = document.getElementById('yearSelects');
            const selectedYearTexts = document.getElementById('selectedYearTexts');
            const currentYear = new Date().getFullYear();
            yearSelects.value = currentYear;
            selectedYearTexts.textContent = 'Total Commission ' + currentYear;
            yearSelects.addEventListener('change', function() {
                const selectedYear = yearSelects.value;
                fetchCommissionChartData(selectedYear);
                selectedYearTexts.textContent = 'Total Commission ' + selectedYear;
            });

            function fetchCommissionChartData(selectedYear) {
                const userId = {{ user.id }};
                fetch('{{ path('app_front_get_commissions_chart_data_ajax') }}?year=' + selectedYear, {
                    method: 'GET'
                })
                    .then(response => response.json())
                    .then(data => {
                        chartData = data;

                        if (barChart) {
                            barChart.destroy();
                        }
                        barChart = new Chart(ctx, {
                            type: 'bar',
                            data: chartData,
                            options: {
                                plugins: {
                                    tooltip: {
                                        callbacks: {
                                            label: function(context) {
                                                const datasetLabel = context.dataset.label || ''; // Dataset label
                                                const value = context.raw; // Access the raw value
                                                return `${datasetLabel}: €${value.toLocaleString()}`; // Add Euro sign and format
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }]
                                }
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching commission chart data:', error);
                    });
            }

            const initialYear = yearSelects.value;
            fetchCommissionChartData(initialYear);
        });


        document.addEventListener('DOMContentLoaded', function () {
            var ctx = document.getElementById('pieChart').getContext('2d');
            var pieChart;

            function fetchCommissionChartData() {
                fetch('{{ path('app_front_get_commissionss_chart_data_ajax') }}', {
                    method: 'GET'
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (pieChart) {
                            pieChart.destroy();
                        }
                        pieChart = new Chart(ctx, {
                            type: 'pie',
                            data: data,
                            options: {
                                plugins: {
                                    tooltip: {
                                        callbacks: {
                                            label: function(context) {
                                                const datasetLabel = context.dataset.label || ''; // Dataset label
                                                const value = context.raw; // Access the raw value
                                                return `${datasetLabel}: €${value.toLocaleString()}`; // Add Euro sign and format
                                            }
                                        }
                                    }
                                },
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching commission chart data:', error);
                    });
            }

            fetchCommissionChartData(); // Removed currentMonthIndex parameter
        });
    </script>
{% endblock %}