{% extends 'extends/layout.html' %}
{% load static %}
{% load countries %}
{% block content %}
    {% get_countries as countries %}
    {% block styles %}
        <!-- DataTables css -->
        <link href="{% static 'sacco/assets/plugins/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"
              type="text/css"/>
        <link href="{% static 'sacco/assets/plugins/datatables/buttons.bootstrap4.min.css' %}" rel="stylesheet"
              type="text/css"/>
    {% endblock %}
    {% block scripts %}
        <!-- Datatable js -->
        <script src="{% static 'sacco/assets/plugins/datatables/jquery.dataTables.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.buttons.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/jszip.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/pdfmake.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/vfs_fonts.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.html5.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.print.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.colVis.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.responsive.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/responsive.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/js/custom/custom-table-datatable.js' %}"></script>
        <script>
            $(function () {

                $('#search').keyup(function () {

                    $.ajax({
                        type: "POST",
                        url: "{% url 'search_member' %}",
                        data: {
                            'search_text': $('#search').val(),
                            'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                        },
                        success: searchSuccess,
                        dataType: 'html'
                    });
                });
            });

            function searchSuccess(data, textStatus, jqXHR) {
                document.getElementById("search-results").innerHTML = data;
            }
        </script>
        <script>
            function showDetails(worker) {
                var workerType = worker.getAttribute("data-worker-id");
                var member = '/namayingo/delete-the-group/' + workerType + '/';
                if (confirm("Are you sure you want to delete this item")) {
                    location.href = member
                }
            }
        </script>
        <script>
            $("textarea").each(function () {
                this.setAttribute("style", "height:" + (80) + "px;min_height:100px;overflow-y:hidden;");
            }).on("input", function () {
                this.style.height = "auto";
                this.style.height = (this.scrollHeight) + "px";
            });

            const handleShowEditOfficer = (group_id, group_officer_id) =>{
                // show the modal
                $('#updateOfficerModal').modal('show')
                console.log('group_officer_id', group_officer_id)
                //set default acc number
                if (group_officer_id === 'None'){
                    document.querySelector('#the_officer_select').value = ''
                }else{
                    document.querySelector('#the_officer_select').value = group_officer_id.toString()
                }

                //set the action of for
                document.querySelector('#update_officer_group_id').value = group_id.toString()
            }
        </script>

        <script>
        document.addEventListener('DOMContentLoaded', function () {
        // Configuration for forms and their submit buttons
        const formConfigs = [
            {
                formSelector: '#updateOfficerForm',
                submitBtnSelector: '#updateOfficerBtn',
                loadingText: 'Updating ...'
            },
            /*
            {
                formSelector: '#addGuarantorForm',
                submitBtnSelector: '#addGuarantorSubmit',
                loadingText: 'Adding...'
            }

             */
        ];

        // Reset all buttons on page load/back navigation
        function resetAllButtonsOnPageLoad() {
            formConfigs.forEach(config => {
                const button = document.querySelector(config.submitBtnSelector);
                if (button) {
                    // Check if button is in loading state (contains spinner)
                    if (button.querySelector('.spinner-border')) {
                        button.disabled = false;
                        // Restore original text based on button ID or use default
                        const defaultText = getDefaultButtonText(config.submitBtnSelector);
                        button.innerHTML = defaultText;
                    }
                }
            });
        }

        // Get default button text based on button selector
        function getDefaultButtonText(selector) {
            const buttonTexts = {
                '#guarantorMessageSubmit': 'Send Message',
                '#loginSubmitBtn': 'Log in'
            };
            return buttonTexts[selector] || 'Submit';
        }

        // Create spinner HTML template
        function createSpinnerHTML(loadingText = 'Submitting...') {
            return `
                <div style="display: flex; min-height: 20px; align-items: center; justify-content: center;">
                    <div class="spinner-border" style="width: 16px; height: 16px;" role="status" aria-hidden="true">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <span class="ms-2">${loadingText}</span>
                </div>
            `;
        }

        // Handle form submission with spinner
        function handleFormSubmission(formSelector, submitBtnSelector, loadingText) {
            const form = document.querySelector(formSelector);

            if (!form) {
                console.warn(`Form ${formSelector} not found in DOM`);
                return;
            }

            const submitBtn = document.querySelector(submitBtnSelector);
            if (!submitBtn) {
                console.warn(`Submit button ${submitBtnSelector} not found in DOM`);
                return;
            }

            // Store original button content in dataset for persistence
            if (!submitBtn.dataset.originalContent) {
                submitBtn.dataset.originalContent = submitBtn.innerHTML;
                submitBtn.dataset.originalDisabled = submitBtn.disabled.toString();
            }

            form.addEventListener('submit', function (event) {
                // Disable button and show spinner
                submitBtn.disabled = true;
                submitBtn.innerHTML = createSpinnerHTML(loadingText);

                // Optional: Add timeout to re-enable button if submission takes too long
                const timeout = setTimeout(() => {
                    resetButton(submitBtn);
                    console.warn('Form submission timeout - button re-enabled');
                }, 30000); // 30 second timeout

                // Store timeout ID for potential cleanup
                submitBtn.dataset.timeoutId = timeout;
            });

            // Listen for form reset or page unload to cleanup
            form.addEventListener('reset', () => {
                resetButton(submitBtn);
            });
        }

        // Reset button to original state
        function resetButton(button) {
            const originalContent = button.dataset.originalContent;
            const originalDisabled = button.dataset.originalDisabled === 'true';

            if (originalContent) {
                button.disabled = originalDisabled;
                button.innerHTML = originalContent;
            }

            // Clear timeout if it exists
            if (button.dataset.timeoutId) {
                clearTimeout(parseInt(button.dataset.timeoutId));
                delete button.dataset.timeoutId;
            }
        }

        // Handle browser back/forward navigation
        window.addEventListener('pageshow', function(event) {
            // Reset buttons when page is shown (including back navigation)
            resetAllButtonsOnPageLoad();
        });

        // Also handle visibility change (when tab becomes visible again)
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible') {
                resetAllButtonsOnPageLoad();
            }
        });

        // Reset buttons on initial page load
        resetAllButtonsOnPageLoad();

        // Initialize all forms
        formConfigs.forEach(config => {
            handleFormSubmission(
                config.formSelector,
                config.submitBtnSelector,
                config.loadingText
            );
        });

        // Optional: Global function to manually reset buttons (useful for AJAX forms)
        window.resetFormButton = function(submitBtnSelector) {
            const button = document.querySelector(submitBtnSelector);
            if (button) {
                resetButton(button);
            }
        };
    });
</script>

    {% endblock %}
    <div class="card">
        <div class="card-body">
            <form method="get">
                <div class="row">
                    {% if show_business_filters %}
                    <div class="col-md-2 form-group" >
                        <select class="form-control form-control-sm" name="business_filter" id="business_filter">
                            <option value="" >Select branch</option>
                            <option value="all_branches" {% if business_filter == 'all_branches' %}selected{% endif %}>All branches</option>

                            {% for branch in businesses_list_filter %}
                                <option value="{{ branch.business.id }}" {% if business_filter == branch.business.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                    <div class="col-md-2 form-group" id="group_name_filter">
                        <input type="text" class="form-control form-control-sm" name="group_name" value='{{ group_name }}' placeholder="Enter group's name">
                    </div>

                    <div class="col-md-2">
                        <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-filter"></i>
                            Filter
                        </button>
                        <a href="{% url 'sacco_groups' %}"><button class="btn btn-secondary btn-sm" type="button"><i class="fa fa-filter"></i>
                            Reset
                        </button></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        {#        ------------------------------------------- update officer ----------------------------------------#}
        <div class="modal fade" id="updateOfficerModal" tabindex="-1" role="dialog"
             aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleStandardModalLabel">Update officer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form method="post" id="updateOfficerForm" action="{% url 'update_group_loan_officer' %}">
                        {% csrf_token %}
                        <div class="modal-body">

                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="the_officer_select">Officer *</label>
                                <select class="form-control" name="the_officer"
                                        id="the_officer_select">
                                    <option value="" selected disabled>Select Officer</option>
                                    {% for the_staff_officer in all_staff %}
                                        <option value="{{ the_staff_officer.id }}">{{ the_staff_officer.biodata.name }}</option>
                                    {% endfor %}
                                </select>

                            </div>
                            <input type="hidden" class="form-control" id="update_officer_group_id"
                                       name="update_officer_group_id" value=""/>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button type="submit" id="updateOfficerBtn" name="add_account" class="btn btn-primary">Update officer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
{#        ------------------------------------------- end update officer ----------------------------------------#}
        <!-- Start col -->
        <div class="col-lg-12">

            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                        </div>
                        <div class="col-md-4" style="display: flex;justify-content: flex-end">
                            <div>
                            <button type="button" class="btn btn-blue btn-outline-success pull-right mr-3"
                                    onclick="location.href='{% url 'export_groups' %}?group_name={{ group_name }}&business_filter={{ business_filter }}'">
                                <i class="feather icon-file-text mr-2" title="Upload Members"></i>Export to Excel
                            </button>
                            </div>
                            {% if not show_business_filters %}
                                {% if can_add_group %}
                                    {% if am_namayingo is False %}
                                        <div class="ms-2">
                                        <button type="button" class="btn btn-dark pull-right mr-3"
                                                onclick="location.href='{% url 'create_group' %}'"><i
                                                class="feather icon-file-plus mr-2"
                                                title="Upload Members"></i>Add Group
                                        </button>
                                        </div>
                                    {% else %}
                                        <div class="ms-2">
                                        <button type="button" class="btn btn-dark pull-right mr-3"
                                                onclick="location.href='{% url 'namayingo_create_group' %}'"><i
                                                class="feather icon-file-plus mr-2"
                                                title="Upload Members"></i>Add Group
                                        </button>
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        </div>

                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Name</th>
                                <th>Members</th>
                                <th>Accounts</th>
                                {% if show_business_filters %}
                                    <th>Branch</th>
                                {% endif %}
                                <th>Officer</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for group in group_list %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ group.name|default_if_none:'' }}</td>
                                    <td>{{ group.mems|default_if_none:'' }}</td>
                                    <td>{{ group.accs|default_if_none:'' }}</td>
                                    {% if show_business_filters %}
                                        <td>{{ group.branch__name|default_if_none:'' }}</td>
                                    {% endif %}
                                    <td>{{ group.group_officer_name|default_if_none:'N/A' }}</td>
                                    <td>
                                        <button class="btn btn-blue btn-success"
                                                onclick="location.href='{% url 'group_detail' group.id %}'"><i
                                                class="feather icon-eye mr-2"></i>View
                                        </button>
                                        {% if not show_business_filters %}
                                        {% if group.accs > 0 %}
                                            <button class="btn btn-blue btn-primary-rgba"
                                                    onclick="location.href='{% url 'member_withdraw' group.id %}'"><i
                                                    class="fa fa-credit-card-alt mr-2"></i>Withdraw
                                            </button>
                                            <button class="btn btn-blue btn-outline-primary"
                                                    onclick="location.href='{% url 'member_deposit' group.id %}'"><i
                                                    class="fa fa-credit-card mr-2"></i>Deposit
                                            </button>
                                            <button class="btn btn-blue btn-warning"
                                                onclick="location.href='{% url 'member_loans' group.id %}'"
                                        ><i class="fa fa-money mr-2"></i>Loans
                                        </button>
                                        {% endif %}
                                            <button class="btn btn-blue btn-secondary" onclick="handleShowEditOfficer('{{ group.id }}', '{{ group.group_officer_id }}')">
                                                <i class="fa fa-money mr-2"></i>
                                                Edit officer
                                            </button>


                                        {% if can_delete_group %}
                                            <button class="btn btn-blue btn-danger" id="worker-{{ group.id }}"
                                                    onclick="showDetails(this)" data-worker-id="{{ group.id }}"><i
                                                    class="feather icon-trash mr-2"></i>Delete
                                            </button>
                                        {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <p>Members yet</p>

                            {% endfor %}
                            </tbody>
                            
                        </table>
                    </div>
                    {% if group_list.has_other_pages %}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination mb-0">
                                        {% if group_list.has_previous %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ group_list.previous_page_number }}&group_name={{ group_name }}&business_filter={{ business_filter }}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-hidden="true">&laquo;</span>
                                            </li>
                                        {% endif %}

                                        {% for num in group_list.paginator.page_range %}
                                            {% if group_list.number == num %}
                                                <li class="page-item active">
                                    <span class="page-link">
                                        {{ num }}
                                        <span class="sr-only">(current)</span>
                                    </span>
                                                </li>
                                            {% elif num > group_list.number|add:'-3' and num < group_list.number|add:'3' %}
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       href="?page={{ num }}&group_name={{ group_name }}&business_filter={{ business_filter }}">{{ num }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        {% if group_list.has_next %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ group_list.next_page_number }}&group_name={{ group_name }}&business_filter={{ business_filter }}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-hidden="true">&raquo;</span>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                            <div class="col-md-6 text-md-right mt-3 mt-md-0">
                                <p class="text-muted mb-0">
                                    Page {{ group_list.number }} of {{ group_list.paginator.num_pages }}
                                </p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}