{% extends 'extends/layout.html' %}
{% load static %}
{% load custom_tags %}
{% load humanize %}
{% block scripts %}
    <script>
        const handleChangeIsFinal = () => {
            let isFinal = document.querySelector('#is_final_transaction').value
            if (isFinal === 'yes') {
                document.querySelector('#alert_no_more').style.display = 'block'
            } else {
                document.querySelector('#alert_no_more').style.display = 'none'
            }
        }


    </script>

{% endblock %}
{% block content %}
    <div class="row">
        <div class="modal fade" id="addFinancialYear" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Transfer money</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{% url 'make_final_transactions' %}">
                            {% csrf_token %}
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="name">Account DR*</label>
                                <select class="form-control select2" name="account_dr" id="gl_dr" required>
                                    <option selected disabled>Select account</option>
                                    {% for acc in debit_accounts %}
                                        <option value={{ acc.id }}>{{ acc.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="name">Account CR*</label>
                                <select class="form-control" name="account_cr" id="gl_cr" required>
                                    <option selected disabled>Select account</option>
                                    {% for acc in cred_accounts %}
                                        <option value={{ acc.id }}>{{ acc.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="name">Transaction Amount*</label>
                                <input type="text" class="form-control" data-type="currency" name="amount"
                                       placeholder="Transaction Amount" required>
                            </div>
                            <div class="mb-2 col-md-12">
                                <label>Transaction Date</label>
                                <input type="date" name="date" class="form-control" placeholder="Enter Transaction Date"
                                       id="txdate" required>
                            </div>
                            <div class="mb-2 col-md-12">
                                <label>Transaction Narrative</label>
                                <textarea class="form-control" name="narration"
                                          placeholder="Narrative (Optional)"></textarea>
                            </div>
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="name">Is final transfer for the day*</label>
                                <select class="form-control select2" name="is_final_transaction"
                                        id="is_final_transaction" onchange="handleChangeIsFinal()" required>
                                    <option value="" selected disabled>Select option</option>
                                    <option value="yes">Yes</option>
                                    <option value="no">No</option>
                                </select>
                            </div>
                            <div class="alert alert-warning" role="alert" style="display: none;" id="alert_no_more">
                                <span><span style="font-weight: bold;margin-right: 5px;">Note:</span><span>Once submitted there will be no more transfers allowed for today</span></span>
                            </div>


                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                </button>
                                <button type="submit" name="add_fin" class="btn btn-primary">Make transfer</button>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>
        <!-- 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">
                            {% if not can_login_overtime %}
                                {% if is_past_3_30_pm %}
                                    <div class="alert alert-warning" role="alert">
                                        <span><span style="font-weight: bold;">Note:</span><span>It is almost 5.00pm. Please reconcile your transactions and transfer money to the reserves</span></span>
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>

                        <div class="col-md-4 d-flex justify-content-between align-items-center">
                            <div class="">
                                <!-- Add date filter -->
                                <form method="get" class="form-inline">
                                    <div class="input-group input-group-sm">
                                        <input type="date" name="filter_date" class="form-control"
                                               value="{{ current_date|date:'Y-m-d' }}">
                                        <button type="submit" class="btn btn-primary">Filter</button>
                                    </div>
                                </form>
                            </div>

                            <div class="d-flex justify-content-end align-items-end">
                                <!-- {% if not view_all_daily_transactions %}
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addFinancialYear"
                                    {% if check_final %}disabled{% endif %}>
                                    Transfer money
                                </button>
                                {% endif %} -->

                                {% if not show_business_filters %}
                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#addFinancialYear" {% if check_final %}disabled{% endif %}>
                                        Transfer money
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">

                    <table id="" class="table dt-responsive nowrap w-100">
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Date recorded</th>
                            <th>Transaction</th>
                            <th>Debit account</th>
                            <th>Credit account</th>

                            <!-- --- If has affiliated account --- -->

                            <th>Amount</th>
                            <th>Added by</th>
                            <!-- <th>Reference number</th> -->
                            <th>Narration</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for trans in all_tran_today %}
                            <tr>
                                <td>{{ forloop.counter }}.</td>
                                <!-- <td>{{ account.name|default_if_none:'' }}</td> -->

                                <td>{{ trans.tx_date }}</td>
                                <td>{{ trans.transaction_type }}</td>
                                <td>
                                    {% if trans.account_dr.member is None %}
                                        <span>{{ trans.account_dr.display_name }}</span>
                                    {% else %}
                                        <span>{{ trans.account_dr.bio_name }}({{ trans.account_dr.member.acc_number }})</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if trans.account_cr.member is None %}
                                        <span>{{ trans.account_cr.display_name }}</span>
                                    {% else %}
                                        <span>{{ trans.account_cr.bio_name }}({{ trans.account_cr.member.acc_number }})</span>
                                    {% endif %}
                                </td>

                                <td>{{ trans.reporting_amount }}</td>
                                <td>{{ trans.added_by.biodata.name }}</td>

                                <!-- display account -->
                                <!-- <td>{{trans.reference}}</td> -->
                                <td>{{ trans.narration }}</td>
                                <td>
                                    <button type="button" id="worker-{{ gl.gl.id }}"
                                            onclick="deleteTransaction('{{ trans.id }}')"
                                            data-worker-id="{{ gl.gl.id }}"
                                            class="btn btn-danger btn-sm"
                                            title="Delete this transaction" {% if check_final %}disabled{% endif %}><i
                                            class="fa-solid fa-xmark"></i>
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>


                    <!-- Add pagination -->
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if all_tran_today.has_previous %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?page=1{% if request.GET.filter_date %}&filter_date={{ request.GET.filter_date }}{% endif %}">&laquo;
                                        First</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page=


                                            {{ all_tran_today.previous_page_number }}{% if request.GET.filter_date %}&filter_date={{ request.GET.filter_date }}{% endif %}">Previous</a>
                                </li>
                            {% endif %}

                            <li class="page-item active">
                                <span class="page-link">
                                    Page {{ all_tran_today.number|default:0 }} of {{ all_tran_today.paginator.num_pages|default:0 }}
                                </span>
                            </li>

                            {% if all_tran_today.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=


                                            {{ all_tran_today.next_page_number }}{% if request.GET.filter_date %}&filter_date={{ request.GET.filter_date }}{% endif %}">Next</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page=


                                            {{ all_tran_today.paginator.num_pages }}{% if request.GET.filter_date %}&filter_date={{ request.GET.filter_date }}{% endif %}">Last
                                        &raquo;</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>

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

{% endblock %}