{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    <!-- Start row -->
    <div class="row">
    <!-- Start col -->
    <div class="col-lg-12 col-xl-12">
        <!-- Start row -->
        <div class="row">
            <!-- Start col -->
            <div class="col-lg-12 col-xl-12">
                <div class="card m-b-15 border border-primary">
                    <div class="card-header mb-2">
                        <div class="row justify-content-between">
                            <div class="col-md-6">
                                <h5 class="card-title mb-0 text-uppercase">Expense transactions</h5>
                            </div>
                            <div class="col-md-6">
                                <div class="button-list d-flex justify-content-end">
                                    <button class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3"
                                            onclick="location.href='{% url 'expense_excel' %}'">
                                        <i class="mdi mdi-file-excel"></i> Export Excel
                                    </button>
                                    <button class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3 d-none">
                                        <i class="fa fa-file-pdf-o"></i> Export PDF
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body py-0 pl-0 pr-2">
                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Reference</th>
                                <th>Amount</th>
                                <th>Expense Account</th>
                                <th>Narration</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for expense in transactions %}
                                <tr>
                                    <td>{{ expense.tx_date|date:"d/m/Y" }}</td>
                                    <td><a href=""><strong>#{{ expense.receipt }}</strong></a></td>
                                    <td>{{ currency.currency }} {{ expense.reporting_amount|intcomma }}</td>
                                    <td>{{ expense.account_dr.name }}</td>
                                    <td>{{ expense.narration }}</td>
                                    <td>
                                        <div class="button-list">
                                            <button class="btn btn-sm btn-outline-info" data-bs-toggle="modal"
                                                    href="#editTrans{{ expense.id }}">
                                                <i class="fa fa-edit"></i> Edit
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                                    href="#deleteTrans{{ expense.id }}">
                                                <i class="fa fa-trash"></i> Delete
                                            </button>
                                        </div>
                                    </td>
                                    <!-- edit transaction Modal -->
                                    <div aria-hidden="true" aria-labelledby="editModalLabel" class="modal fade"
                                         id="editTrans{{ expense.id }}"
                                         role="dialog" tabindex="-1">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <form method="post" action="{% url 'edit_expense' expense.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="transferringModalLabel">
                                                            Edit {{ expense.account_dr.name }} Expense</h5>
                                                        <button aria-label="Close" class="close"
                                                                data-bs-dismiss="modal"
                                                                type="button">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label class="col-form-label" for="exp-date">Transaction
                                                                Date *</label>
                                                            <input class="form-control" type="date"
                                                                   value="{{ expense.tx_date|date:"Y-m-d" }}"
                                                                   id="exp-date" name="exp_date" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-form-label" for="exp-ref">Transaction
                                                                Reference *</label>
                                                            <input class="form-control" type="text"
                                                                   value="{{ expense.receipt }}" id="exp-ref"
                                                                   name="exp_ref" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-form-label" for="exp-amount">Transaction
                                                                Amount *</label>
                                                            <input class="form-control" type="number"
                                                                   value="{{ expense.reporting_amount }}"
                                                                   id="exp-amount" name="exp_amount" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-form-label" for="narrative">Transaction
                                                                Narration *</label>
                                                            <textarea class="form-control" name="narration"
                                                                      id="narrative"
                                                                      rows="3">{{ expense.narration }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-secondary" data-bs-dismiss="modal"
                                                                type="button">Close
                                                        </button>
                                                        <button class="btn btn-primary" id="transfer-btn"
                                                                type="submit">Save Changes
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Delete transaction modal -->
                                    <div aria-hidden="true" aria-labelledby="deleteModalLabel"
                                         class="modal fade bd-example-modal-sm" id="deleteTrans{{ expense.id }}"
                                         role="dialog" tabindex="-1">
                                        <div class="modal-dialog modal-sm">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">
                                                        Delete {{ expense.account_dr.name }}</h5>
                                                    <button aria-label="Close" class="close" data-bs-dismiss="modal"
                                                            type="button">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <h5>Are you sure to delete <code>{{ expense.receipt }}</code>
                                                        transaction?</h5>
                                                </div>
                                                <div class="modal-footer">
                                                    <button class="btn btn-secondary" data-bs-dismiss="modal"
                                                            type="button">
                                                        Close
                                                    </button>
                                                    <a href="{% url 'delete_expense' expense.id %}">
                                                        <button class="btn btn-danger" type="button">Delete</button>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- End col -->
            </div>
            <!-- End row -->
        </div>
        <!-- End col -->
    </div>
    <!-- End row -->
    <!-- End Contentbar -->
{% endblock %}