{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_commission_user' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {   
        'title':'Commission Management',
    },
    {
        'title': 'User Commission',
    }
]%}

{% block content %}
    <div class="row">
        <!-- Left Section -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Search</h6>
                </div>
                <div class="card-body">
                    <form action="{{ path('app_admin_commission_user') }}" method="get">
                        <div class="form-row">
                            <div class="form-group col-12 col-md-3" style="float:left; padding:5px">
                                <input type="text" class="form-control" name="search_value" id="search_value" placeholder="Search by Affiliate Name / Customer Name / Product " value="{{ app.request.query.get('search_value') }}">
                            </div>
                            <div class="form-group col-md-9" style="float:right; padding:5px;">
                                <div class="input-group datepicker-range">
                                    <input type="text" class="form-control" name="startDate" id="startDate" placeholder="Start Date" value="{{ app.request.query.get('start') }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text custom-label rounded-0">To</span>
                                    </div>
                                    <input type="text" class="form-control rounded-start-0 rounded" name="endDate" id="endDate" placeholder="End Date" value="{{ app.request.query.get('end') }}">
                                    <div class="input-group-append col-12 col-sm-2 d-flex justify-content-center mt-2 mt-sm-0" style="float:right; margin-left: 10px;">
                                        <button class="btn btn-primary me-2" name="is_filter" type="submit" value="true">Search</button>
                                        <a class="btn btn-secondary" href="{{ path('app_admin_commission_user') }}">Reset</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Right Section -->
    </div>
    <div class="col-md-12 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 class="raw mt-3">
        <div class="card">
            <div class="table-responsive">
                <table class="table table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th><input type="checkbox" name="select_all" id="select_all"></th>
                            <th>#ID</th>
                            <th>Affiliate Name</th>
                            <th>Customer 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/commission/user_commision/row.html.twig' %}
                        {% else %}
                            <tr class="w-150 text-center">
                                <td class="border-none" colspan="10">No Records found</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': userCommisions}) }}
        </div>
    </div>
              
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <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  %}