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

{% block content %}
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header bg-secondary cursor-pointer">
                    <h6 class="mb-0 text-white">Filter Section</h6>
                </div>
                <div id="filer-section" class="collapse show">
                    <div class="card-body">
                        {{ form_start(walletWithdrawalFilterForm) }}
                        <div class="row mt-3">
                            <div class="col-md-4">
                                {{ form_row(walletWithdrawalFilterForm.search) }}
                            </div>
                            <div class="col-md-3">
                                {{ form_row(walletWithdrawalFilterForm.start_date) }}
                            </div>
                            <div class="col-md-3">
                                {{ form_row(walletWithdrawalFilterForm.end_date) }}
                            </div>
                            <div class="col-md-1 mt-4">
                                <button class="btn btn-secondary w-100" type="submit">Filter</button>
                            </div>
                            <div class="col-md-1 mt-4">
                                <a href="{{ path('app_admin_wallet_withdrawal') }}" class="btn btn-light w-100">Clear</a>
                            </div>
                        </div>
                        {{ form_end(walletWithdrawalFilterForm) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-2 mt-1">
                    <label>Select Bulk Action :</label>
                </div>
                <div class="col-lg-8  mb-1">
                    <select class="form-control multiselect" id="status_code" required>
                        <option selected disabled value>-- Select Action --</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <div class="col-lg-2 text-end">
                    <input type="submit" value="Submit" class="btn btn-primary" id="change-status" disabled>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                    <th class="text-center"><input type="checkbox" id="select-all" name="select-all"></th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Id', 'ww.id') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'User Name', 'u.first_name') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'User Email', 'u.email') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Amount', 'ww.amount') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Charge Amount', 'ww.getway_charges') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Payment Method', 'ww.payment_method') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Status', 'ww.status') }}</th>
                    <th>{{ knp_pagination_sortable(wallet_withdrawal_data, 'Date', 'ww.created_at') }}</th>
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for wallet_withdrawal in wallet_withdrawal_data %}
                    {% include 'admin/wallet_setting/wallet_withdrawal_row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="10">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div id="change_wallet_withdrawal_status_popup" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="" method="post" id="change_wallet_withdrawal_status_form">
                        <div class="modal-header bg-info">
                            <h6 class="modal-title text-white">Change Users Withdrawal Status</h6>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to Change Status for <strong id="wallet_withdrawal_change_status_modal"></strong> Wallet Withdrawal ?</p>
                            <input type="hidden" class="_csrf_token_wallet_withdrawal_user_delete" name="_csrf_token_wallet_withdrawal_user_delete" id="_csrf_token_wallet_withdrawal_user_delete" value="{{ csrf_token("wallet_withdrawal_csrf") }}">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn bg-info approve-the-change-status-for-wallet-withdrawal btn-ladda btn-ladda-spinner ladda-button" data-style="zoom-in" data-spinner-size="16" data-spinner-color="#fff">Approve To Change Status</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': wallet_withdrawal_data}) }}
    </div>
    <div id="delete_user_popup" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="" method="post" id="delete_user_form">
                    <div class="modal-header bg-danger">
                        <h6 class="modal-title text-white">Delete role</h6>
                        <button aria-label="Close" class="btn-close btn-close-white" data-bs-dismiss="modal"><span aria-hidden="true"></span></button></div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete <strong id="user_delete_modal_user_email"></strong> role ?</p>
                        <hr>
                        <h6 class="font-weight-semibold">Please enter the slug of role, which You want to delete.</h6>
                        <input type="text" class="confirm-user-email form-control"/>
                        <span class="validation-invalid-label incorrect_code d-none text-danger">You entered the incorrect slug</span>
                        <span class="validation-invalid-label generic_error d-none text-danger">Something went wrong</span>
                        <input type="hidden" class="_csrf_token_user_delete" name="_csrf_token_user_delete" id="_csrf_token_user_delete" value="{{ csrf_token("usercsrf") }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn bg-danger approve-the-deletion-for-user text-white" data-style="zoom-in" data-spinner-size="16" data-spinner-color="#fff">Approve the Deletion</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
     <!-- Info modal -->
	<div id="walletWithdrawalModal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content" id="withdrawalModelContent">
				<div class="modal-header bg-info text-white border-0">
					<h6 class="modal-title" id="walletWithdrawalModalTitle">Info header</h6>
                    <div id="withdrawalModelStatus"></div>
					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
				</div>
				<div class="modal-body">
                    <center>
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </center>
                </div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /info modal -->
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <script>
        var selectAll = document.getElementById("select-all");
        var checkboxes = document.querySelectorAll(".checkboxName");
        var walletWithdrawalUserIds = [];

        selectAll.addEventListener("click", function () {
            checkboxes.forEach((cb) => {
                cb.checked = this.checked;
                setCheckedValues()
            });
        });

        checkboxes.forEach((cb) => {
            cb.addEventListener("click", function () {
                selectAll.checked = isCheckedAll();
                setCheckedValues();
            });
        });

        function isCheckedAll() {
            var isCheckedAll = true;
            checkboxes.forEach((cb) => {
                if (!cb.checked) {
                    isCheckedAll = false;
                }
            });
            return isCheckedAll;
        }

        function setCheckedValues () {
            checkboxes.forEach((cb) => {
                console.log(cb);
                if (cb.checked) {
                    if (!walletWithdrawalUserIds.includes(cb.value)) {
                        walletWithdrawalUserIds.push(cb.value);
                    }
                } else {
                    if (walletWithdrawalUserIds.includes(cb.value)) {
                        var index = walletWithdrawalUserIds.indexOf(cb.value);
                        if (index > -1) {
                            walletWithdrawalUserIds.splice(index, 1);
                        }
                    }
                }
            });
            setChangeStatusAttr();
        }

        function setChangeStatusAttr() {
            document.getElementById("change-status").disabled = walletWithdrawalUserIds.length <= 0;
        }

        var change_wallet_withdrawal_status = document.getElementById('change-status');
        var change_status_withdrawal_popup = new bootstrap.Modal(document.getElementById('change_wallet_withdrawal_status_popup'), {});
        var selector_withdrawal_status_form = document.getElementById('change_wallet_withdrawal_status_form');
        change_wallet_withdrawal_status.addEventListener('click', function (e) {
            e.preventDefault();
            var withdrawal_status = document.getElementById("status_code").value;
            if (withdrawal_status.trim() === "") {
                // Create a message element
                var errorMessage = document.createElement('div');
                errorMessage.textContent = "Please select a status.";
                errorMessage.style.color = 'red';

                // Check if error message already exists, if not, insert it
                if (!document.getElementById('status_error_message')) {
                    var selectElement = document.getElementById('status_code');
                    errorMessage.id = 'status_error_message';
                    selectElement.parentNode.insertBefore(errorMessage, selectElement.nextSibling);
                }

                return; // Stop form submission
            }
            var errorMessageElement = document.getElementById('status_error_message');
            if (errorMessageElement) {
                errorMessageElement.remove();
            }
            document.getElementById("wallet_withdrawal_change_status_modal").innerText = walletWithdrawalUserIds;
            var l = Ladda.create(document.querySelector('.approve-the-change-status-for-wallet-withdrawal'));
            document.querySelector('.ladda-label').classList.add('text-white');
            change_status_withdrawal_popup.show();
            selector_withdrawal_status_form.addEventListener("submit", function (e) {
                e.preventDefault();
                var csrf_token = document.getElementById("_csrf_token_wallet_withdrawal_user_delete").value;
                var change_wallet_withdrawal_status_url = "{{ path("app_admin_wallet_withdrawal_bulk_action_status") }}";
                var formData = new FormData();

                formData.append('csrf', csrf_token);
                formData.append('walletWithdrawalUsersId', walletWithdrawalUserIds);
                formData.append('status', withdrawal_status);
                l.start();
                fetch(change_wallet_withdrawal_status_url, {
                    method: 'POST',
                    body: formData
                }).then(function (response) {
                    return response.json();
                }).then(function (json) {
                    l.stop();
                    if (json.status) {
                        change_status_withdrawal_popup.hide();
                        window.location.reload();
                    } else {
                        document.getElementById('genericErrorStatus').innerHTML = json.errorMessage;
                        document.getElementById('genericErrorStatus').classList.remove('d-none');
                        setTimeout(function() {
                            document.getElementById('genericErrorStatus').classList.add('d-none');
                        }, 2500)
                    }
                });
            });
        });

       
       // Display Wallet Withdrawal Data in model
        $('.view-wallet-withdrawal').on('click', function(e) {
            e.preventDefault();
            var url = $(this).data('url');
            var id = $(this).data('id');
            $("#walletWithdrawalModalTitle").html("Request");
            $("#withdrawalModelStatus").html("");

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                beforeSend: function() {
                    $(".spinner-border").show();
                    $('#walletWithdrawalModal').modal('show');
                },
                success: function(response) {
                    $("#withdrawalModelContent").html(response)
                    $('#walletWithdrawalModal').modal('show');
                     
                    $(".spinner-border").hide();
                },
                error: function(xhr, status, error) {
                    // Handle error response here
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
{% endblock  %}