{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_wallet' %}
{% set withdrawal = app.session.get('payment_setting') %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': 'My Wallet',
    }
] %}
{% block content %}
    <div class="row">
        <div class="card col-lg-12">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h1 class="fw-semibold mb-0">My Wallet</h1>
                <h1 class="text-muted mb-0">Balance: {{ total_wallet_balance|number_format(2, ',', '.') }} Є</h1>
            </div>

                <div class="card-body">
                <div class="d-lg-flex">
                    <ul class="nav nav-tabs nav-tabs-vertical nav-tabs-vertical-start wmin-lg-200 me-lg-3 mb-3 mb-lg-0">
                        <li class="nav-item">
                           <a href="#transactions" class="nav-link {% if (active_tab.main_transaction_tab is defined and active_tab.main_transaction_tab == 'transaction') or (active_tab.main_active_tab is defined and active_tab.main_active_tab == 'transaction') %}active{% endif %}" data-bs-toggle="tab">
                                <i class="ph ph ph-swap me-2" style="font-size: 24px;"></i>
                                <span style="font-weight: bold;">Transactions</span>
                            </a>

                        </li>
                        <li class="nav-item">
                            <a href="#withdrawal" class="nav-link {% if active_tab.main_active_tab is defined and active_tab.main_active_tab == 'withdrawal' %}active{% endif %}" data-bs-toggle="tab">
                                <i class="ph ph-hand-withdraw me-2" style="font-size: 24px;"></i>
                                <span style="font-weight: bold;">Withdrawal</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content flex-lg-fill">
                        <div class="tab-pane fade {% if (active_tab.transaction_child_content is defined and active_tab.transaction_child_content == 'transaction_content') or (active_tab.child_active_tab_content is defined and active_tab.child_active_tab_content == 'transaction_content') %}show active{% endif %}" id="transactions">
                            <div class="raw">
                                <div class="card">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped text-center">
                                            <thead>
                                                <tr>
                                                    <th>{{ knp_pagination_sortable(withdrawal_transaction_record, 'Id', 'wt.id') }}</th>
                                                    <th>{{ knp_pagination_sortable(withdrawal_transaction_record, 'User', 'wt.user') }}</th>
                                                    <th>{{ knp_pagination_sortable(withdrawal_transaction_record, 'Amount', 'wt.amount') }}</th>
                                                    <th>{{ knp_pagination_sortable(withdrawal_transaction_record, 'Status', 'wt.status') }}</th>
                                                    <th>{{ knp_pagination_sortable(withdrawal_transaction_record, 'Date', 'wt.created_at') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for withdrawal_transaction in withdrawal_transaction_record %}
                                                    {% include 'frontend/wallet/transaction_row.html.twig' %}
                                                {% else %}
                                                    <tr class="w-100 text-center">
                                                        <td class="border-none" colspan="6"><center>No Records found</center></td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': withdrawal_transaction_record}) }}
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade {% if (active_tab.main_withdrawal_tab is defined and active_tab.main_withdrawal_tab == 'withdrawal') or (active_tab.main_active_tab is defined and active_tab.main_active_tab == 'withdrawal') %}show active{% endif %}" id="withdrawal">
                            <div class="row">
                                <div class="col-lg-12">
                                    <ul class="nav nav-tabs mb-3 rounded">
                                        <li class="nav-item">
                                            <a href="#withdraw-request" class="nav-link {% if (active_tab.child_withdrawal_tab is defined and active_tab.child_withdrawal_tab == 'withdrawal_request') or (active_tab.child_active_tab is defined and active_tab.child_active_tab == 'withdrawal_request') %}active{% endif %}" data-bs-toggle="tab">
                                                <span style="font-weight: bold;">Withdraw Request</span>
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <a href="#approved-requests" class="nav-link {% if (active_tab.child_withdrawal_tab is defined and active_tab.child_withdrawal_tab == 'approval_request') or (active_tab.child_active_tab is defined and active_tab.child_active_tab == 'approval_request') %}active{% endif %}" data-bs-toggle="tab">
                                                <span style="font-weight: bold;">Approved Requests</span>
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <a href="#cancelled-requests" class="nav-link {% if (active_tab.child_withdrawal_tab is defined and active_tab.child_withdrawal_tab == 'canceled_request') or (active_tab.child_active_tab is defined and active_tab.child_active_tab == 'canceled_request') %}active{% endif %}" data-bs-toggle="tab">
                                                <span style="font-weight: bold;">Cancelled Requests</span>
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <a href="#payment-settings" class="nav-link {% if (active_tab.child_withdrawal_tab is defined and active_tab.child_withdrawal_tab == 'payment_setting') or (active_tab.child_active_tab is defined and active_tab.child_active_tab == 'payment_setting') %}active{% endif %}" data-bs-toggle="tab">
                                                <span style="font-weight: bold;">Payment Settings</span>
                                            </a>
                                        </li>
                                    </ul>


                                    <div class="tab-content">
                                        <div class="tab-pane fade {% if (active_tab.child_withdrawal_tab_content is defined and active_tab.child_withdrawal_tab_content == 'withdrawal_request_content') or (active_tab.child_active_tab_content is defined and active_tab.child_active_tab_content == 'withdrawal_request_content') %}show active{% endif %}" id="withdraw-request">
                                            <div class="card col-12 col-sm-12 col-md-3 mb-3" style="float:right;">
                                                <button typle="button" class="btn btn-info cursor-pointer" data-bs-toggle="modal" data-bs-target="#withdrawalRequestModel"><h6 class="mb-0 text-white">Send Withdrawal Request</h6></button>
                                            </div>

                                            <!-- Email Modal -->
                                            <div class="modal fade" id="withdrawalRequestModel" tabindex="-1" aria-labelledby="withdrawalRequestModelLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header bg-info mb-0 text-white">
                                                            <h5 class="modal-title" id="withdrawalRequestModelLabel">Send Withdrawal Request</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form id="user_withdrawal_request_form" action="{{ path('app_front_withdrawal_request') }}" method="POST">
                                                                <div class="mb-3">
                                                                    <label for="" class="form-label">Withdrawal Amount:</label>
                                                                    <input type="text" class="form-control" id="withdrawal_amount" name="withdrawal_amount" placeholder="Enter withdrawal amount">
                                                                    <input type="hidden" name="withdrawal_max_amount" id="withdrawal_max_amount" value="{{maximum_amount}}">
                                                                    <input type="hidden" name="withdrawal_min_amount" id="withdrawal_max_amount" value="{{minimum_amount}}">
                                                                    <input type="hidden" name="wallet_amount" id="wallet_amount" value="{{total_wallet_balance}}">
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                                                                    <button type="submit" class="btn btn-md btn-info my-1 me-2 mt-2">Save changes</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row col-lg-12">
                                                <div class="card">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-striped text-center">
                                                            <thead>
                                                                <tr>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_request_data, 'Id', 'ww.id') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_request_data, 'User', 'ww.user') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_request_data, 'Amount', 'ww.amount') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_request_data, 'Status', 'ww.status') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_request_data, 'Date', 'ww.created_at') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for withdrawal_request in withdrawal_request_data %}
                                                                    {% include 'frontend/wallet/withdrawal_request_row.html.twig' %}
                                                                {% else %}
                                                                    <tr class="w-100 text-center">
                                                                        <td class="border-none" colspan="6"><center>No Records found</center></td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': withdrawal_request_data}) }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade {% if (active_tab.child_withdrawal_tab_content is defined and active_tab.child_withdrawal_tab_content == 'approval_request_content') or (active_tab.child_active_tab_content is defined and active_tab.child_active_tab_content == 'approval_request_content') %}show active{% endif %}" id="approved-requests">
                                            <div class="raw">
                                                <div class="card">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-striped text-center">
                                                            <thead>
                                                                <tr>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_approval_data, 'Id', 'ww.id') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_approval_data, 'User', 'ww.user') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_approval_data, 'Amount', 'ww.amount') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_approval_data, 'Status', 'ww.status') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_approval_data, 'Date', 'ww.created_at') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for withdrawal_approval in withdrawal_approval_data %}
                                                                    {% include 'frontend/wallet/withdrawal_approved_row.html.twig' %}
                                                                {% else %}
                                                                    <tr class="w-100 text-center">
                                                                        <td class="border-none" colspan="6"><center>No Records found</center></td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': withdrawal_approval_data}) }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade {% if (active_tab.child_withdrawal_tab_content is defined and active_tab.child_withdrawal_tab_content == 'canceled_request_content') or (active_tab.child_active_tab_content is defined and active_tab.child_active_tab_content == 'canceled_request_content') %}show active{% endif %}" id="cancelled-requests">
                                            <div class="raw">
                                                <div class="card">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-striped text-center">
                                                            <thead>
                                                                <tr>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_rejected_data, 'Id', 'ww.id') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_rejected_data, 'User', 'ww.user') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_rejected_data, 'Amount', 'ww.amount') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_rejected_data, 'Status', 'ww.status') }}</th>
                                                                    <th>{{ knp_pagination_sortable(withdrawal_rejected_data, 'Date', 'ww.created_at') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for withdrawal_rejected in withdrawal_rejected_data %}
                                                                    {% include 'frontend/wallet/withdrawal_rejected_row.html.twig' %}
                                                                {% else %}
                                                                    <tr class="w-100 text-center">
                                                                        <td class="border-none" colspan="6"><center>No Records found</center></td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': withdrawal_rejected_data}) }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade {% if (active_tab.child_withdrawal_tab_content is defined and active_tab.child_withdrawal_tab_content == 'payment_setting_content') or (active_tab.child_active_tab_content is defined and active_tab.child_active_tab_content == 'payment_setting_content') %}show active{% endif %}" id="payment-settings">
                                            <div class="card">
                                                <div class="card-body">
                                                        <div>
                                                        <h6>Coinpayments-USDC.BEP20</h6>
                                                    </div>
                                                    <form action="{{ path('app_front_user_payment_setting') }}" method="post" id="user_payment_setting_form">
                                                        <div>
                                                            <label class="form-label">Wallet Address</label>
                                                            <input type="text" class="form-control" placeholder="Wallet Address" name="wallet_address" id="wallet_address" value="{{ wallet_payment_setting.getWalletPaymentAddress ?? null }}" />
                                                            <button type="submit" class="btn btn-md btn-info my-1 me-2 mt-2">Save Changes</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script>

        // validation for payment setting form.
        const validator = $('#user_payment_setting_form').validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            success: function(label) {
                label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            },
            // Different components require proper error label placement
            errorPlacement: function(error, element) {
                // Input group, form checks and custom controls
                if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                wallet_address: {
                    required: true,
                },
            },
        });


        // Validation for withdrawal request form
        const withdrawalValidator = $('#user_withdrawal_request_form').validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            success: function(label) {
                label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            },
            // Different components require proper error label placement
            errorPlacement: function(error, element) {
                // Input group, form checks and custom controls
                if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                withdrawal_amount: {
                    required: true,
                    number: true, // Validate as a number
                    min:{{ minimum_amount|default(0) }},
                    max:{{ maximum_amount|default(1000) }},
                    maxWalletValue: true // Use custom validation method
                },
            },
        });


        // Add custom validation method to check if withdrawal amount is greater than wallet value
        $.validator.addMethod("maxWalletValue", function(value, element) {
            // Get the current wallet value
            var walletValue = {{ total_wallet_balance|number_format(2, '.', ',') }};

            // Convert withdrawal amount to float
            var withdrawalAmount = parseFloat(value);

            // Check if withdrawal amount is greater than wallet value
            return withdrawalAmount <= walletValue;
        }, "Withdrawal amount cannot exceed wallet value.");
        $(document).ready(function() {  
       $('#user_withdrawal_request_form').on('submit', function(e) {
                    // Check if the form is valid
                    if ($(this).valid()) {
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        this.submit();
                    }
                });
    });
    </script>
     <script src="{{ asset('assets/js/timezone.js') }}"></script>
{% endblock %}