{% extends 'admin/layouts/base.html.twig' %}
{% block title %}View Affiliate{% endblock %}
{% set active = 'app_admin_affiliate' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title':'Affiliate Management',
    },
    {
        'link': path('app_admin_affiliate'), 'title': 'Affilliate',
    },
    {
        'title': 'View',
    }
]%}
{% block content %}
    <div class="row">
        <h1>{{ user.getFirstName ~ ' '~ user.getLastName }}</h1>
        <div class="col-lg-3">
            <!-- Members online -->
            <div class="card bg-teal text-white">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h6>Partner</h6>
                            <h5>{{ numberOfAffiliate is not null ? numberOfAffiliate : 0}}</h5>
                        </div>
                        <div class="col">
                            <i class="ph ph-users-four" style="font-size: 40px"></i>
                        </div>
                        <div class="col">
                            <h6>Clients</h6>
                            <h5>{{ numberOfUserCustomer is not null ? numberOfUserCustomer : 0}}</h5>
                        </div>
                    </div>
                </div>

                <div class="rounded-bottom overflow-hidden mx-3" id="members-online"></div>
            </div>
            <!-- /members online -->
        </div>

        <div class="col-lg-3">
            <!-- Direct Revenue -->
            <div class="card bg-pink text-white">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <i class="ph ph-hand-deposit" style="font-size: 40px"></i>
                        </div>
                        <div class="col">
                            <h6>Direct Sales</h6>
                            <h5>{{ directRevenue is not null ? directRevenue|number_format(2,',','.') : 0}}<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>
            <!-- /Direct Revenue -->
        </div>

        <div class="col-lg-3">
            <!-- Team Revenue -->
            <div class="card bg-gradient 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">
                            <h6>Team Sales</h6>
                            <h5>{{ totalTeamRevenue is not null ? totalTeamRevenue|number_format(2,',','.') : 0}}<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>
            <!-- /Total Revenue -->
        </div>

        <div class="col-lg-3">
            <!-- Total Commission -->
            <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">
                            <h6>Total Commission</h6>
                            <h5>{{ totalCommission is not null ? totalCommission|number_format(2,',','.') : 0}}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h5>
                        </div>
                    </div>
                </div>
                <div class="rounded-bottom overflow-hidden" id="today-revenue"></div>
            </div>
            <!-- /Total Commission -->
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card card-body">
                <h6 class="fw-semibold">Affiliate Details</h6>
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a href="#profile" class="nav-link active" data-bs-toggle="tab">
                            Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#customer" class="nav-link" data-bs-toggle="tab">
                            Customer
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#affiliate" class="nav-link" data-bs-toggle="tab">
                            Affiliate
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#payout" class="nav-link" data-bs-toggle="tab">
                            Payout
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#commission" class="nav-link" data-bs-toggle="tab">
                            Commissions
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="profile">
                        <div class="table-responsive">
                            <div class="table">
                                <table class="table border-1">
                                    <tbody>
                                    <tr>
                                        <th class="w-25">Id</th>
                                        <td class="w-75">{{ user.id }}</td>
                                    </tr>
                                    <tr>
                                        <th class="w-25">Username</th>
                                        <td class="w-75">
                                            {{ user.firstname ~ ' ' ~ user.lastname }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25">Email</th>
                                        <td class="w-75">
                                            {% if user.email is empty %}
                                                N/A
                                            {% else %}
                                                {{ user.email }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25">Mobile Number</th>
                                        <td class="w-75">
                                            {% if user.mobileno is empty %}
                                                N/A
                                            {% else %}
                                                {{ user.mobileno }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25">Country</th>
                                        <td class="w-75">
                                            {% if user.country is empty %}
                                                N/A
                                            {% else %}
                                                {{ user.country.name }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="customer">
                        <div class="raw">
                            <h1>Referral</h1>
                            <div class="card">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Product</th>
                                            <th>Product Amount</th>
                                            <th>Commission Amount</th>
                                            <th>Date</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for userCustomer in userCustomers %}
                                            {% include 'admin/affiliate/customer_row.html.twig' %}
                                        {% else %}
                                            <tr class="w-100 text-center">
                                                <td class="border-none" colspan="6">No Records found</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': userCustomers}) }}
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="affiliate">
                        <div class="row">
                            <h1>Affiliate</h1>
                            <div class="col-md-12">
                                <table class="table table-striped border">
                                    <tbody>
                                    <tr>
                                        <th style="width: 5%"></th>
                                        <th scope="col" style="width: 11.11%">User Name</th>
                                        <th scope="col" style="width: 11.11%">Client</th>
                                        <th scope="col" style="width: 11.11%">Partner</th>
                                        <th scope="col" style="width: 11.11%">Feedback/Rating</th>
                                        <th scope="col" style="width: 11.11%">Rank</th>
                                        <th scope="col" style="width: 11.11%">Running AI/Product</th>
                                        <th scope="col" style="width: 11.11%">Total Sale</th>
                                        <th scope="col" style="width: 11.11%">Incoming</th>
                                        <th scope="col" style="width: 11.11%">This Month</th>
                                    </tr>
                                    </tbody>
                                    </hr>
                                </table>
                                {% if user_tree is not empty  %}
                                    {% for user in user_tree %}
                                        {% set rootLevel = user.level %}
                                        {{ include('admin/affiliate/network_tree_row.html.twig') }}
                                    {% endfor %}
                                {% else %}
                                    <table class="table table-striped border text-center">
                                        <tbody>
                                        <tr>
                                            <th scope="col" colspan="8">Record not found !</th>
                                        </tr>
                                        </tbody>
                                    </table>
                                {% endif %}
                                {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': user_tree}) }}
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="payout">
                        <div class="card-body pb-0">
                            <div class="row text-center">
                                <div class="col-3">
                                    <div class="mb-3">
                                        <h2 class="mb-0">{{ totalCommission is not null ? totalCommission|number_format(2,',','.') : 0}}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h2>
                                        <div class="text-muted fs-lg">Total Commission</div>
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="mb-3">
                                        <h2 class="mb-0">{{ paidCommission is not null ? paidCommission|number_format(2,',','.') : 0 }}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h2>
                                        <div class="text-muted fs-lg">Paid Commission</div>
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="mb-3">
                                        <h2 class="mb-0">{{ unpaidCommission is not null ? unpaidCommission|number_format(2,',','.') : 0 }}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h2>
                                        <div class="text-muted fs-lg">Unpaid Commission</div>
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="mb-3">
                                        <h2 class="mb-0">{{ rejectedCommission is not null ? rejectedCommission|number_format(2,',','.') : 0 }}<i class="ph ph-currency-eur" style="font-size: 25px"></i></h2>
                                        <div class="text-muted fs-lg">Rejected Commission</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="commission">
                        <div class="row">
                            <div class="col-md-6">
                                <h1>Commissions</h1>
                            </div>
                            <div class="col-md-6 text-end">
                                <select id="status" class="form-select d-inline-block w-auto">
                                    <option value="">Select Status</option>
                                    <option value="paid">Paid</option>
                                    <option value="unpaid">Unpaid</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                                <button id="updateButton" class="btn btn-secondary d-inline-block ms-2">Update</button>
                            </div>
                        </div>
                        <div class="raw mt-3">
                            <div class="card">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" name="select_all" id="select_all"></th>
                                            <th>#ID</th>
                                            <th>Name</th>
                                            <th>Product</th>
                                            <th>Product Amount</th>
                                            <th>Commission Amount</th>
                                            <th>Level</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for userCommision in userCommisions %}
                                            {% include 'admin/affiliate/commission_row.html.twig' %}
                                        {% else %}
                                            <tr class="w-100 text-center">
                                                <td class="border-none" colspan="7">No Records found</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': userCommisions}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock  %}
{% block javascripts %}
    <script>
      $(document).ready(function () {
            // Handle select all checkbox
            $('#select_all').on('click', function () {
                $('input[name="paid_unpaid_check[]"]').prop('checked', this.checked);
            });

            // Handle individual checkbox click
            $('input[name="paid_unpaid_check[]"]').on('click', function () {
                if (!this.checked) {
                    $('#select_all').prop('checked', false);
                }
            });

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

            // Update button click
            $('#updateButton').on('click', function () {
                var status = $('#status').val();
                var selectedCommissions = $('input[name="paid_unpaid_check[]"]:checked').map(function () {
                    return $(this).val();
                }).get();

                if (selectedCommissions.length < 1) {
                    Swal.fire({
                        title: 'Please select at least one data.',
                        icon: 'warning',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn btn-success',
                            cancelButton: 'btn btn-danger'
                        }
                    });
                    return;
                }

                if (!status) {
                    Swal.fire({
                        title: 'Please select a status.',
                        icon: 'warning',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn btn-success',
                            cancelButton: 'btn btn-danger'
                        }
                    });
                    return;
                }

                Swal.fire({
                    title: 'Are you sure you want to change the status of the selected commission(s)?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, update it!',
                    cancelButtonText: 'No, cancel!',
                    buttonsStyling: false,
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "{{ path('app_admin_update_commission_status') }}",
                            type: 'POST',
                            data: {
                                status: status,
                                commission_ids: JSON.stringify(selectedCommissions)
                            },
                            success: function (response) {
                                Swal.close();
                                if (response.error) {
                                    Swal.fire({
                                        title: 'Failed!',
                                        text: response.error,
                                        icon: 'error',
                                        showConfirmButton: true,
                                        customClass: {
                                            confirmButton: 'btn btn-success',
                                            cancelButton: 'btn btn-danger'
                                        }
                                    });
                                } else {
                                      // Show error notification
                                    new Noty({
                                        text: response.message,
                                        type: 'success'
                                    }).show();

                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1500); // Give time for the toast to show
                                }
                            },
                            error: function (xhr, status, error) {
                                Swal.fire({
                                    title: 'Failed!',
                                    text: 'There was an error updating the status.',
                                    icon: 'error',
                                    showConfirmButton: true,
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
{% endblock  %}