{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_admin_dashboard' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_account'), 'title': 'Home'
    },
    {
        'title': 'Dashboard',
    }
]%}
{% block content %}
    <style>
        .toggle-button{
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
    </style>
     <h1>Dashboard</h1>
    {% if is_granted('ROLE_AFFILIATE') %}
        <div class="row">
            <div class="col-md-3">
                <div class="card border-success">
                    <div class="card-header cursor-pointer">
                        <div class="row">
                            <div class="text-danger col">
                                <i class="ph ph-currency-eur" style="font-size: 40px"></i> <!-- Adjust font-size as needed -->
                            </div>
                            <div class="text-section col">
{#                                {% if app.request.server.get('WHITE_LABLE_CLIENT') == 'ai_growth' %}#}
{#                                    <h5 class="mb-0">AI - Wallet</h5>#}
{#                                {% elseif app.request.server.get('WHITE_LABLE_CLIENT') == 'luma_signals' %}#}
                                    <h5 class="mb-0">Wallet</h5>
{#                                {% endif %}#}
                                <h5 class="mb-0">{{ user.wallet.amount is defined and user.wallet.amount is not null ? user.wallet.amount|number_format(2,',','.') : 0 }} EUR</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="text-danger col">
                                <h5 class="mb-0 text-dark">Last Transaction</h5>
                                <h5 class="mb-0 text-dark">{{last_transaction is not null ? last_transaction.amount|number_format(2,',','.')  : 0 }} EUR <span class="text-secondary">Deposit</span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick stats boxes -->
        <div class="row">
            <h1>Network</h1>
            <div
                    class="col-lg-4">
                <!-- Members online -->
                <div class="card bg-teal text-white">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-5">
                                <h4>Direct Partner</h4>
                                <h5>{{ direct_partners }}</h5>
                            </div>
                            <div class="col">
                                <i class="ph ph-users-four" style="font-size: 40px"></i>
                            </div>
                            <div class="col-5">
                                <h4>Direct Clients</h4>
                                <h5>{{ direct_clients ?? 'N/A' }}</h5>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-bottom overflow-hidden mx-3" id="members-online"></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-bar" style="font-size: 40px"></i>
                            </div>
                            <div class="col">
                                <h4>Total Profit</h4>
                                <h5>{{ saleTotal is defined ?  saleTotal|number_format(2, ',', '.') : "0,00"}}<i class="ph ph-currency-eur" style="font-size: 25px"></i>
                                </h5>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-bottom overflow-hidden" 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-pie-slice" style="font-size: 40px"></i>
                            </div>
                            <div class="col">
                                <h4>Total Commission</h4>
                                <h4>{{ getCommissionThisMonthTotal.total is defined ? getCommissionThisMonthTotal.total|number_format(2, ',', '.') : "0,00" }}<i class="ph ph-currency-eur" style="font-size: 25px"></i>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-bottom overflow-hidden" id="today-revenue"></div>
                </div>
                <!-- /today's revenue -->

            </div>
        </div>
        <!-- /quick stats boxes -->

        <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="selectedYearText" class="mb-0 text-dark text-center">Commission </h5>
                        <div class="dropdown">
                            <select id="yearSelect" 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="myChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    {% endif %}
    <div class="row">
{#        {% if app.request.server.get('WHITE_LABLE_CLIENT') == "ai_growth"%}#}
{#            <h1>Running AI</h1>#}
{#        {% else %}#}
            <h1>My Order</h1>
{#        {% endif %}#}
        <div class="card col-md-12 overflow-auto">
            {% if(user) %}
            <table class="table table-striped text-center">
                <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th style="width: 150px">Start Date</th>
                    <th style="width: 150px">End Date</th>
                    <th scope="col">Product</th>
                    <th scope="col">Trial Time</th>
                    <th scope="col"> Status </th>
{#                    <th scope="col">Daily Running</th>#}
                    <th style="width: 200px">Period of Time</th>
                    <th scope="col">Auto Renewal</th>
{#                    <th scope="col">Config</th>#}
                </tr>
                </thead>
                <tbody>
                {% for subscription in subscriptions %}
                <tr>
                    <th scope="row">
                        <p>#{{ subscription.paymentid.orderid.id }}</p>
                    </th>
                    <td>
                        {{ subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' }}
                    </td>
                    <td>
                        {{ subscription.enddate ? subscription.enddate|date('Y-m-d') : 'N/A' }}
                    </td>
                    <td>
                        {% if subscription.paymentid.orderid.productid %}
                            {% set hasProduct = true %}
                            {{ subscription.paymentid.orderid.productid.name }}
                        {% else %}
                            N/A
                        {% endif %}
                    </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>
                        {% if subscription.paymentid.orderid.productid.role == "saas" and subscription.userid.connectwithappaigrowth == 1 %}  
                            <span class="badge badge bg-success">Completed</span>
                        {% elseif subscription.paymentid.orderid.productid.role == "mother_child" %}
                            <span class="badge badge bg-success">Completed</span>
                        {% elseif subscription.paymentid.orderid.productid.role == "basic_pro_expert" %}
                            <span class="badge badge bg-success">Completed</span>
                        {% else %}
                            <span class="badge badge bg-warning">Waiting for your actions</span>
                        {% endif %}
                    </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>
                        {% set currentDate = "now"|date("Y-m-d") %}
                        {% set isExpired = subscription.enddate and subscription.enddate|date("Y-m-d") < currentDate %}
                        {% if subscription.autorenewal == 1 %}
                            {% if subscription.getWordpressSubscriptionId is empty %}
                                <div class="toggle-button bg-success bg-opacity-10 text-success lh-1 rounded-pill p-2 me-3 text-center"
                                    data-toggle="on"
                                    data-subscription-id="{{ subscription.id }}"
                                    {% if subscription.status == 'cancelled' or isExpired or subscription.status == 'failed' or subscription.status == 'pending' or subscription.paymentid.orderid.productid.getRegularPrice() == 0 %}
                                        style="pointer-events: none; opacity: 0.5;"
                                        title="Subscription is cancelled"
                                    {% endif %}
                                >
                                    <i class="ph-clock"></i><span class="toggle-status">ON</span>
                                </div>
                            {% else %}
                                    <div class=" 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>
                            {% endif %}
                        {% else %}
                            {% if subscription.getWordpressSubscriptionId is empty %}
                                <div class="toggle-button bg-danger bg-opacity-10 text-danger lh-1 rounded-pill p-2 me-3 text-center"
                                    data-toggle="off"
                                    data-subscription-id="{{ subscription.id }}"
                                    {% if subscription.status == 'cancelled' or isExpired or subscription.status == 'failed' or subscription.status == 'pending' or subscription.paymentid.orderid.productid.getRegularPrice() == 0 %}
                                        style="pointer-events: none; opacity: 0.5;"
                                        title="Subscription is cancelled"
                                    {% endif %}
                                >
                                    <i class="ph-clock"></i><span class="toggle-status">OFF</span>
                                </div>
                            {% else %}
                                    <div class="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 %}
                        {% endif %}
                    </td>

                    {#{% if app.request.server.get('WHITE_LABLE_CLIENT') == "ai_growth" %}
                        {% if subscription.paymentid.orderid.productid.role == "saas" %}
                            <td>
                                <a href="{{app.request.server.get('LOGIN_WITH_SAAS_URL')}}" class="btn btn-secondary {{ isExpired or subscription.status == 'failed' ? 'disabled' : '' }}" data-bs-popup="tooltip" data-bs-original-title="Login With Saas" style="display: inline-flex; align-items: center; text-decoration: none; border-radius: 14px; color: #fff;">
                                    <i class="ph ph-user" style="font-size: 30px; margin-right: 10px;"></i> <!-- Adjust size as needed -->
                                    Login with SaaS
                                </a>
                            </td>
                        {% elseif subscription.paymentid.orderid.productid.role == "mother_child" %}
                            <td>
                                <a href="{{path("app_front_ai_channel_mother_child_forms",{ 'user_id': subscription.userid.id })}}" class="btn btn-secondary {{ isExpired or subscription.status == 'failed' ? 'disabled' : '' }}" data-bs-popup="tooltip" data-bs-original-title="Ai-Channel-Mother-Child" style="display: inline-flex; align-items: center; text-decoration: none; border-radius: 14px; color: #fff;">
                                    <i class="fa fa-bullhorn" style="font-size: 30px; margin-right: 10px;"></i> <!-- Adjust size as needed -->
                                    AI Channel Mother Child
                                </a>
                            </td>
                        {% elseif subscription.paymentid.orderid.productid.role == "basic_pro_expert" %}
                            <td>
                                <a href="{{path("app_front_ai_channel_growth_forms",{ 'user_id': subscription.userid.id })}}" class="btn btn-secondary {{ isExpired or subscription.status == 'failed' ? 'disabled' : '' }}" data-bs-popup="tooltip" data-bs-original-title="Ai-Channel-Growth" style="display: inline-flex; align-items: center; border-radius: 14px; color: #fff;">
                                    <i class="fa fa-bullhorn" style="font-size: 30px; margin-right: 10px;"></i> <!-- Adjust size as needed -->
                                AI Channel Growth
                                </a>
                            </td>
                        {% else %}
                            <td>
                                <center><i class="ph ph-gear" style="font-size: 30px; margin-right: 10px;"></i></center>
                            </td>
                        {% endif %}
                    {% else %}
                        <td>
                                <i class="ph ph-gear" style="font-size: 30px;"></i>
                        </td>
                    {% endif %}#}
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <script>
        $(document).ready(function(){
            $(document).on('click', '.toggle-button', function(e) {
                e.preventDefault();
                // Show a loading modal before sending the request
                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                var $button = $(this);
                var subscriptionId = $button.data('subscription-id');
                var currentStatus = $button.attr('data-toggle');
                var newStatus = currentStatus === 'off' ? 'on' : 'off';
                var autoRenewal = newStatus === 'on' ? 1 : 0;
                $.ajax({
                    url: '{{ path('toggle_autoRenewal') }}',
                    type: 'POST',
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token('toggle_autoRenewal') }}'
                    },
                    data: JSON.stringify({
                        subscriptionId: subscriptionId,
                        autoRenewal: autoRenewal
                    }),
                    success: function(response) {
                        if (response.success) {
                            $button.find('.toggle-status').text(newStatus.toUpperCase());
                            $button.attr('data-toggle', newStatus);
                            if (newStatus === 'on') {
                                $button.removeClass('bg-danger text-danger').addClass('bg-success text-success');
                            } else {
                                $button.removeClass('bg-success text-success').addClass('bg-danger text-danger');
                            }
                            // Hide loading modal on success
                            Swal.close();
                        } else {
                            // Handle errors during subscription creation
                            Swal.fire({
                                title: 'Error',
                                text: 'Failed to update autoRenewal payment.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });

            // Override Noty defaults
            Noty.overrideDefaults({
                theme: 'limitless',
                layout: 'topRight',
                timeout: 3500
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            // Get the canvas context
            var ctx = document.getElementById('myChart').getContext('2d');

            // Initialize an empty chartData object
            var chartData = {};

            // Initialize an empty chart variable
            var myChart;

            // Add event listener to the year select dropdown
            const yearSelect = document.getElementById('yearSelect');
            const selectedYearText = document.getElementById('selectedYearText'); // Get the element to display selected year
            const currentYear = new Date().getFullYear();
            yearSelect.value = currentYear;
            selectedYearText.textContent = 'Commission ' + currentYear;
            yearSelect.addEventListener('change', function() {
                const selectedYear = yearSelect.value;
                fetchCommissionChartData(selectedYear); // Fetch chart data for the selected year
                selectedYearText.textContent = 'Commission ' + selectedYear;
            });

            // Function to fetch commission chart data via AJAX
            function fetchCommissionChartData(selectedYear) {
                const userId = {{ user.id }};
                fetch('{{ path('app_front_get_commission_chart_data_ajax') }}?year=' + selectedYear + '&userId=' + userId, {
                    method: 'GET'
                })
                    .then(response => response.json())
                    .then(data => {
                        // Update chartData with the received data
                        chartData = data;

                        // Update the chart with the received data
                        if (myChart) {
                            myChart.destroy(); // Destroy existing chart before creating a new one
                        }
                        myChart = new Chart(ctx, {
                            type: 'bar',
                            data: chartData,
                            options: {
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }]
                                }
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching commission chart data:', error);
                    });
            }

            // Initial chart rendering when the page loads
            const initialYear = yearSelect.value; // Get the initially selected year
            fetchCommissionChartData(initialYear); // Fetch chart data for the initial year
        });
    </script>
{% endblock %}