{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block styles %}
        <style>
            /* Define your table styles here */
            table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
            }

            th, td {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            th {
                background-color: #f2f2f2;
            }
        </style>
    {% endblock %}
    {% block scripts %}
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        {#        <script>#}
        {#            fetch('{{ uploads.file.url }}')#}
        {#                .then(response => response.text())#}
        {#                .then(data => {#}
        {#                    const rows = data.split('\n');#}
        {#                    const table = document.getElementById('excelTable');#}
        {##}
        {#                    rows.forEach(row => {#}
        {#                        const columns = row.split(',');#}
        {#                        const tr = document.createElement('tr');#}
        {##}
        {#                        columns.forEach(column => {#}
        {#                            const td = document.createElement('td');#}
        {#                            td.textContent = column;#}
        {#                            tr.appendChild(td);#}
        {#                        });#}
        {##}
        {#                        table.appendChild(tr);#}
        {#                    });#}
        {#                });#}
        {#        </script>#}
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <div class="modal fade" id="approvalsModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content modal-xlg">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleStandardModalLabel">Approvals</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Name</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for approval in approvals %}
                                        <tr>
                                            <th scope="row">{{ forloop.counter }}</th>
                                            <td>{{ approval.admin.biodata.name }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="makeapprovalModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content modal-xlg">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleStandardModalLabel">Make Approval</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <form method="post" action="{% url 'approve_upload' uploads.id %}">
                                    {% csrf_token %}
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label for="sign_status">Approval status</label>
                                                <div class="form-spacing form-inline">
                                                    <select id="sign_status" name="status" class="form-control"
                                                            required>
                                                        <option value="">Select an option</option>
                                                        <option value="ACCEPT">Accept</option>
                                                        <option value="REJECT">Reject</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="updateFileModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content modal-xlg">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleStandardModalLabel">Update file</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <form method="post" action="{% url 'update_file' uploads.id %}"
                                      enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label for="sign_status">File</label>
                                                <div class="form-spacing form-inline">
                                                    <input type="file" name="uploaded" accept=".xlsx">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="float-start">
                        <a href="{% url 'namayingo_upload_data' uploads.group.id %}">
                            <button type="button" class="btn btn-outline-info">Back to uploads</button>
                        </a>
                        <label>Last updated on: {{ uploads.updated_at }}</label>
                    </div>
                    <div class="float-end">
                        {% if uploads.status not in 'APPROVED REJECTED' %}
                            <button type="button" data-bs-toggle="modal"
                                    data-bs-target="#approvalsModal" class="btn btn-primary">Approvals
                            </button>
                            <button type="button" data-bs-toggle="modal"
                                    data-bs-target="#makeapprovalModal" class="btn btn-secondary"
                                    {% if has_approved %}disabled{% endif %}
                            >Make approval
                            </button>
                            <button type="button" class="btn btn-dark" data-bs-toggle="modal"
                                    data-bs-target="#updateFileModal">Update file
                            </button>
                        {% else %}
                            {% if uploads.status == 'APPROVED' %}
                                <button type="button" class="btn btn-dark">Already Approved</button>
                                {% else %}
                                <button type="button" class="btn btn-danger">Already Rejected</button>
                            {% endif %}
                        {% endif %}
                        {% if uploads.file_url is not None %}
                            <a href="{{ uploads.file_url|default_if_none:'#' }}" download="">
                                <button type="button" class="btn btn-success">Download file</button>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if has_approved %}
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success" role="alert">
              You approved this upload
            </div>
        </div>
    </div>
    {% endif %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <label>Group: {{ uploads.group.name }}</label>
                </div>
            </div>
            <div class="card m-b-30">
                <div class="card-body">
                    <div class="table-responsive">
                        <table>
                            {{ data|safe }}
                            <!-- Your Excel data will be dynamically inserted here -->
                        </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 %}

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}