{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% load countries %}
{% block styles %}
    <link href="{% static 'sacco/assets/css/bootstrap-fileupload.min.css' %}" rel="stylesheet"/>
    <style>
        @media (min-width: 900px) {
            .modal-xlg {
                width: 850px !important;
            }

            .select2-sm + .select2-container .select2-selection--single {
                height: 32px !important;
                font-size: 0.875rem !important;
                padding: 2px 8px !important;
            }

            .select2-sm + .select2-container .select2-selection--single .select2-selection__rendered {
                line-height: 26px !important;
            }
        }
    </style>
{% endblock %}
{% block scripts %}
    <script>
        function reverseUpload(id) {
            let url = '/namayingo/reverse-group-upload/' + id;
            if (confirm("Are you sure you want to reverse this upload?")) {
                location.href = url
            }
        }
    </script>
{% endblock %}
{% block content %}
    {#    <div class="card">#}
    {#        <div class="card-body">#}
    {#            <label><strong>{{ group.name }}</strong></label>#}
    {#            <a href="{% url 'group_detail' group.id %}">#}
    {#                <button class="btn btn-dark float-end">Back to Group</button>#}
    {#            </a>#}
    {#        </div>#}
    {#    </div>#}

    <br>
    <div class="card">
        <div class="card-body">
            <form method="get">
                <div class="row">
                    {% if show_business_filters %}
                        <div class="col-md-1 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-3 form-group" id="loan_officer_filter">
                        <select class="form-control select2 select2-sm" data-toggle="select2" name="loan_officer">
                            <option selected disabled value="">Select Loan Officer</option>
                            {% if loan_officers %}
                                {% for loan_officer_ in loan_officers %}
                                    <option value="{{ loan_officer_.id|stringformat:'s' }}"
                                            {% if loan_officer|stringformat:'s' == loan_officer_.id|stringformat:'s' %}
                                            selected {% endif %}>{{ loan_officer_.biodata.name }}</option>
                                {% endfor %}
                            {% else %}
                                <option disabled>No Loan Officers</option>
                            {% endif %}
                        </select>
                    </div>
                    <div class="col-md-3 form-group" id="group_filter">
                        <select class="form-control select2 select2-sm" data-toggle="select2" name="group_filter">
                            <option selected disabled value="">Select Group</option>
                            {% if groups %}
                                {% for group in groups %}
                                    <option value="{{ group.id|stringformat:'s' }}"
                                            {% if group_filter|stringformat:'s' == group.id|stringformat:'s' %}
                                            selected {% endif %}>{{ group.name }}</option>
                                {% endfor %}
                            {% else %}
                                <option disabled>No Loan Officers</option>
                            {% endif %}
                        </select>
                    </div>
                    <div class="col-md-2 form-group" id="status_filter">
                        <select class="form-control form-control-sm border" name="status_filter">
                            <option disabled value="" {% if not status_filter %}selected{% endif %}>Select Status
                            </option>

                            <option value="PENDING" {% if status_filter == "PENDING" %}selected{% endif %}>PENDING
                            </option>
                            <option value="APPROVED" {% if status_filter == "APPROVED" %}selected{% endif %}>APPROVED
                            </option>
                        </select>
                    </div>

                    <div class="col-md-2 form-group" id="start_datee_filter">
                        <input type="date" class="form-control form-control-sm border" name="start_date"
                               value="{{ start_date }}">
                    </div>
                    <div class="col-md-2 form-group" id="end_date_ff">
                        <input type="date" class="form-control form-control-sm border" name="end_date"
                               value="{{ end_date }}">
                    </div>

                    <div class="col-md-2 mt-2">
                        <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-filter"></i>
                            Filter
                        </button>
                        <a href="{% url 'all_groups_members_data' %}">
                            <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">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>UploadID</th>
                                <th>Group</th>
                                {#                                <th>Date uploaded</th>#}
                                <th>Transactions date</th>
                                <th>Status</th>
                                <th>uploaded_by</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for upload in uploads %}
                                <tr>
                                    <td>{{ forloop.counter|add:start_number }} .</td>
                                    <td class="text-black">
                                        {% if can_approve_group_transactional_data %}
                                            <a href="{% url 'uploads_preview' upload.id %}">{{ upload.external_id }}</a>
                                        {% else %}
                                            <span>{{ upload.external_id }}</span>
                                        {% endif %}

                                    </td>
                                    <td>{{ upload.group.name }}</td>
                                    {#                                    <td class="text-black">{{ upload.created_at|default_if_none:'' }}</td>#}
                                    <td class="text-black">{{ upload.transactions_date|default_if_none:'N/A' }}</td>

                                    <td class="text-black">{{ upload.status }}</td>
                                    <td class="text-black">
                                        {{ upload.uploaded_by.biodata.name }}
                                    </td>
                                    <td>
                                        <div style="display: flex">
                                            <div>
                                                <a href="{{ upload.file_url|default_if_none:'#' }}" download="">
                                                    <button type="button" class="btn btn-primary btn-sm"
                                                            title="Download file">
                                                        <i
                                                                class="fa fa-download"></i> File
                                                    </button>
                                                </a>
                                            </div>

                                            {% if upload.failed_number > 0 %}
                                                <div class="ms-1">
                                                    <a href="{% url 'download_failed_group_uploads' upload.id %}"
                                                       target="_blank">
                                                        <button type="button" class="btn btn-warning btn-sm"
                                                                title="Download file">
                                                            <i
                                                                    class="fa fa-download"></i> Failed uploads
                                                        </button>
                                                    </a>
                                                </div>
                                            {% endif %}

                                            <div class="ms-1">
                                                <button type="button" class="btn btn-danger btn-sm"
                                                        onclick="reverseUpload('{{ upload.id }}')">
                                                    Reverse
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <p>No uploads yet</p>

                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                    <!-- Pagination -->
                    {% if uploads.has_other_pages %}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination mb-0">
                                        {% if uploads.has_previous %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?{{ query_params }}&page={{ uploads.previous_page_number }}"
                                                   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 uploads.paginator.page_range %}
                                            {% if uploads.number == num %}
                                                <li class="page-item active">
                                        <span class="page-link">
                                            {{ num }}
                                            <span class="sr-only">(current)</span>
                                        </span>
                                                </li>
                                            {% elif num > uploads.number|add:'-3' and num < uploads.number|add:'3' %}
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       href="?{{ query_params }}&page={{ num }}">{{ num }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        {% if uploads.has_next %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?{{ query_params }}&page={{ uploads.next_page_number }}"
                                                   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 {{ uploads.number }} of {{ uploads.paginator.num_pages }}
                                </p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}