{% extends 'extends/layout.html' %}
{% load static %}
{% load custom_tags %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const checkboxes = document.querySelectorAll('[id^="money-checkbox"]');

                checkboxes.forEach(checkbox => {
                    const idSuffix = checkbox.id.replace('money-checkbox', '');
                    const wrapper = document.getElementById(`money-input-wrapper${idSuffix}`);
                    const input = document.getElementById(`recovery-amount${idSuffix}`);

                    checkbox.addEventListener('change', function () {
                        if (this.checked) {
                            wrapper.style.display = 'block';
                            input.setAttribute('required', 'required');
                        } else {
                            wrapper.style.display = 'none';
                            input.removeAttribute('required');
                        }
                    });
                });
            });

            function checkAmount(value, balance, id) {
                const notEnoughMsg = document.getElementById(`not-enough-msg${id}`);
                const enoughMsg = document.getElementById(`enough-msg${id}`);

                // Replace with your actual account balance logic
                const accountBalance = parseFloat(balance);  // Example static balance

                if (parseFloat(value) > accountBalance) {
                    notEnoughMsg.style.display = 'block';
                    enoughMsg.style.display = 'none';
                } else {
                    notEnoughMsg.style.display = 'none';
                    enoughMsg.style.display = 'block';
                }
            }
        </script>
        <script>
            function validateForm(memberId) {
                const notEnoughMsg = document.getElementById(`not-enough-msg${memberId}`);
                return !(notEnoughMsg && notEnoughMsg.style.display !== 'none');
            }
        </script>

    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">

            <div class="card m-b-30">
                <div class="card-body">
                    <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Account Name</th>
                            <th>Account Number</th>
                            <th>Account Type</th>
                            {% if request.user.staff.biodata.business.does_deposit == 1 %}
                                <th>Balance</th>
                            {% endif %}
                            <th>On Portal</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for account in dormant_accounts %}
                            <tr>
                                <td>{{ forloop.counter }}.</td>
                                <td>
                                    {% if account.members.is_group %}
                                        <button class="btn btn-header"
                                                onclick="location.href='{% url 'group_detail' account.members.id %}'"
                                                title="Click to go to {{ account.members.name }}'s profile">
                                            {{ account.members.name|default_if_none:'' }}
                                            <i class="fa fa-external-link"> </i>
                                        </button>
                                    {% else %}
                                        <button class="btn btn-header"
                                                onclick="location.href='{% url 'member_detail' account.members.id %}'"
                                                title="Click to go to {{ account.members.biodata.name }}'s profile">
                                            {{ account.members.biodata.name|default_if_none:'' }}
                                            <i class="fa fa-external-link"> </i>
                                        </button>
                                    {% endif %}
                                </td>
                                <td>{{ account.the_account.acc_number|default_if_none:'' }}</td>
                                <td>{{ account.the_account.account_type.name|default_if_none:'' }}</td>
                                {% if request.user.staff.biodata.business.does_deposit == 1 %}
                                    <td>
                                        <strong>{{ account.the_account.balance|intcomma|default_if_none:'' }}</strong>
                                    </td>
                                {% endif %}
                                <td>{{ account.members.portal }}</td>
                                <td>
                                    <button class="btn btn-outline-primary btn-sm"
                                            id="recover-btn-{{ account.id }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#recoverAccountModal{{ account.members.id }}"

                                            title="Click to recover Account">
                                        Recover Account
                                    </button>
                                </td>
                            </tr>


                            {#                            ACCOUNT RECOVERY MODEL STARTS HERE#}
                            <div class="modal fade" id="recoverAccountModal{{ account.members.id }}" tabindex="-1"
                                 aria-labelledby="recoverAccountModalLabel{{ account.members.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <form method="POST" action="{% url 'recover_member' %}"
                                                {#                                              onsubmit="return validateForm({{ account.members.id }})"#}
                                        >
                                            {% csrf_token %}
                                            <div class="modal-header">
                                                <h5 class="modal-title"
                                                    id="recoverAccountModalLabel{{ account.members.id }}">
                                                    Confirm Account Recovery
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <span>Are you sure you want to recover this account?
                                                </span>
                                                <p>This action will reactivate the account and restore the member’s
                                                    details.</p>

                                                <input type="hidden" name="account_id" id="modal-account-id"
                                                       value="{{ account.id }}">

                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox"
                                                           id="money-checkbox{{ account.members.id }}"
                                                           name="money_checkbox_{{ account.members.id }}"
                                                    >
                                                    <label class="form-check-label"
                                                           for="money-checkbox{{ account.members.id }}">
                                                        Include recovery fee?
                                                    </label>
                                                </div>

                                                <div class="mb-3" id="money-input-wrapper{{ account.members.id }}"
                                                     style="display: none;">
                                                    <label for="recovery-amount{{ account.members.id }}"
                                                           class="form-label">Amount</label>
                                                    <input type="number" class="form-control"
                                                           id="recovery-amount{{ account.members.id }}"
                                                           name="recovery_amount" min="1"
                                                            {#                                                           oninput="checkAmount(this.value, {{ account.the_account.balance }}, {{ account.members.id }})"#}
                                                    >

                                                    <p id="not-enough-msg{{ account.members.id }}"
                                                       class="text-danger" style="display: none;">
                                                        Account balance is not enough to cater for account recovery
                                                        charges. You need to deposit some money to recover this account.
                                                        The
                                                        account balance is <span
                                                            class="fw-bold">{{ account.the_account.balance }}</span>
                                                    </p>

                                                    <p id="enough-msg{{ account.members.id }}" class="text-success"
                                                       style="display: none;">
                                                        Account balance is enough to cater for account recovery
                                                        charges
                                                    </p>

                                                    <label for="payment_mode"
                                                           class="mt- form-label">Mode of Payment</label>
                                                    <select class="form-control"
                                                            name="payment_mode">
                                                        {% for acc in accounts %}
                                                            <option value="{{ acc.id }}">{{ acc.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    Cancel
                                                </button>
                                                <button type="submit" class="btn btn-success float-end">Confirm
                                                    Recovery
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            {#                            ACCOUNT RECOVERY MODEL ends HERE#}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}