{% 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;
            }
        }
    </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="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-2 col-md-12">
                        <label class="form-label" for="upload">Upload a File</label>
                        <input type="file" class="form-control" id="upload" name="member_data"
                               placeholder="Upload Files" accept=".xlsx, .xls" required/>
                    </div>

                    <div class="mb-2 col-md-12">
                        <label class="form-label" for="account">Payment Mode</label>
                        <select class="form-control" name="account"
                                id="account" required>
                            {% for item in grp_accounts %}
                                <option value="{{ item.id }}">
                                    {{ item.bio_name|title }}'s Group Account
                                </option>
                            {% endfor %}
                            {% for other_acc  in other_accounts %}
                                <option value="{{ other_acc.id }}">
                                    {{ other_acc.name }}
                                </option>
                            {% endfor %}

                        </select>
                    </div>

                    <div class="mb-2 col-md-12">
                        <label class="form-label" for="trans_date">Transactions date</label>
                        <input type="date" class="form-control" id="trans_date" name="trans_date"
                               placeholder="Transactions date" required/>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" name="new_member" class="btn btn-primary">Submit</button>
                </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 id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>UploadID</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 }}.</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 class="text-black">{{ upload.created_at|default_if_none:'' }}</td>#}
                                    <td class="text-black">{{ upload.transactions_date|default_if_none:'' }}</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>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if member_uploads.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">begin</span>
                                    </a>
                                </li>
                            {% endif %}
                            {% for n in member_uploads.paginator.page_range %}
                                {% if member_uploads.number == n %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
                                    </li>
                                {% elif n > member_uploads.number|add:'-3' and n < member_uploads.number|add:'3' %}
                                    <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                {% endif %}
                            {% endfor %}

                            {% if member_uploads.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ member_uploads.paginator.num_pages }}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">end</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}