{% extends 'admin/layouts/base.html.twig' %}
{% block title %}View Product{% endblock %}
{% set active = 'app_admin_wallet_withdrawal_edit' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title':'Wallet Management',
    },
    {
        'link': path('app_admin_wallet_withdrawal'), 'title': 'Withdrawal'
    },
    {
        'title': 'Edit',
    }
]%}
{% block stylesheets %}
    <style>
            .amount-details-table>:not(caption)>*>* {
                border-top-width: inherit !important; /* Unset the border-top-width property */
            }
    </style>
{% endblock %}
{% block content %}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6"><h1>Withdrawal Details #{{wallet_withdrawal_data.getId}}</h1></div>
            </div>
            <div class="table-responsive">
                <div class="table">
                    <table class="table border-1">
                        <tbody>
                        <tr>
                            <th class="w-25">Payment Method</th>
                            <td class="w-75">{{ wallet_withdrawal_data.getPaymentMethod ?? "N/A" }}</td>
                        </tr>
                        <tr>
                            <th class="w-25">Date Created </th>
                            <td class="w-75">
                              {{ wallet_withdrawal_data.createdAt|default("N/A")|date('d-m-Y H:i:s') }}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Status</th>
                            {% set badgeClass = ''%}
                            {% if wallet_withdrawal_data.getStatus == "approved" %}
                                {% set badgeClass = 'badge bg-success' %}
                            {% elseif wallet_withdrawal_data.getStatus == "pending"%}
                                {% set badgeClass = 'badge bg-warning' %}
                            {% elseif wallet_withdrawal_data.getStatus == "rejected"%}
                                {% set badgeClass = 'badge bg-danger' %}
                            {% endif %}
                            <td class="w-75">
                                <span class="badge {{ badgeClass }}">{{ wallet_withdrawal_data.getStatus|upper }}</span>
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">User</th>
                            <td class="w-75">
                                {{ wallet_withdrawal_data.user ? wallet_withdrawal_data.user.firstname ~ ' ' ~ wallet_withdrawal_data.user.lastname : 'N/A' }}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
           <div class="card mt-3">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <tbody>
                            <tr>
                                <td colspan="2"><strong><h6>Payment Details</h6></strong></td>
                            </tr>
                             <tr>
                                <td><strong>Wallet Address</strong></td>
                                <td>{{ wallet_withdrawal_data.getWalletPaymentId.getWalletPaymentAddress ?? "N/A"}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-6"></div>
                <div class="col-md-6 text-end">
                    <div class="table-responsive">
                        <table class="table amount-details-table">
                            <tbody>
                                <tr>
                                    <td><strong>Requested Amount:</strong></td>
                                    <td>{{ wallet_withdrawal_data ? wallet_withdrawal_data.getAmount|number_format(2,',','.'): '0,00€'}} <i class="ph ph-currency-eur"></i></td>                                </tr>
                                <tr>
                                    <td><strong>Charged Amount:</strong></td>
                                    <td>{{ wallet_withdrawal_data ? wallet_withdrawal_data.getGetwayCharges|number_format(2,',','.'): '0,00€'}} <i class="ph ph-currency-eur"></i></td>
                                </tr>
                                <tr>
                                    <td><strong>Payable Amount:</strong></td>
                                    <td>{{wallet_withdrawal_data ? wallet_withdrawal_data.getPayableAmount|number_format(2,',','.'): '0,00€'}} <i class="ph ph-currency-eur"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% if wallet_withdrawal_data.getStatus == "approved"%}
                <p><strong>Note:</strong> This Withdrawal Request is Already Approved.</p>
            {% endif %}
            <div class="row mt-3">
                <form action="{{path('app_admin_wallet_withdrawal_action')}}" method="POST">
                    <div class="col-md-6">
                        <label for=""><h6>Withdrawal Action</h6></label>
                        <select name="withdrawal_action" id="withdrawal_action" class="form-control multiselect" onchange="toggleSubmitButton()">
                            <option disabled selected>Select Action</option>
                            <option value="approved" {% if wallet_withdrawal_data.getStatus == "approved"%} selected {% endif %}>Approve</option>
                            <option value="rejected" {% if wallet_withdrawal_data.getStatus == "rejected"%} selected {% endif %}>Reject</option>
                        </select>
                        <input type="hidden" name="wallet_withdrawal_id" id="wallet_withdrwal_id" value="{{ wallet_withdrawal_data.getId ?? ""}}">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mt-3">
                        <button type="submit" class="btn btn-info" id="updateBtn">Update</button>
                        </div>
                        <div class="col-md-6 mt-3 text-end">
                            <a href="{{ path('app_admin_wallet_withdrawal') }} " class="btn btn-primary" >Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function toggleSubmitButton() {
            var selectAction = document.getElementById('withdrawal_action');
            var updateBtn = document.getElementById('updateBtn');

            // Get the current status from the template
            var currentStatus = "{{ wallet_withdrawal_data.getStatus }}";

            // Disable the button and select if the current status is 'approved'
            if (currentStatus === 'approved') {
                selectAction.disabled = true;
                updateBtn.disabled = true;
            } else {
                // Enable the button only if 'approved' or 'rejected' is selected
                if (selectAction.value === 'approved' || selectAction.value === 'rejected') {
                    updateBtn.disabled = false;
                } else {
                    updateBtn.disabled = true;
                }
            }
        }

        // Call the function on page load to set the initial state of the button
        window.onload = function() {
            toggleSubmitButton();
        };
    </script>
{% endblock  %}