{% extends "./base.html" %}
{% load custom_tags %}

{% if perms.admin_panel.ViewReportMali %}
{% block bodyPage %}
  <div class="">
    <div class="columns m-0">
        <div class="column is-12">
            <div class="buttons">
              {% with url_name=request.resolver_match.url_name %}
              <a href="{% url 'admin_panel:bedehi' %}" class="button is-info {% if url_name == 'bedehi' %}is-active{% else %}is-outlined{% endif %} is-rounded mr-0">همه</a>
              <a href="{% url 'admin_panel:bedehiKhadamat' %}" class="button is-info {% if url_name == 'bedehiKhadamat' %}is-active{% else %}is-outlined{% endif %} is-rounded mr-0">خدمات</a>
              <a href="{% url 'admin_panel:bedehiNasb' %}" class="button is-info {% if url_name == 'bedehiNasb' %}is-active{% else %}is-outlined{% endif %} is-rounded mr-0">نصب</a>
              {% endwith %}
            </div>

            <p class="has-text-centered">
              <span>مانده:</span>
              <span class="toCurrency">{{  mandehesabKP }}</span>
            </p>

            <div class="table-container column is-12-desktop is-12-mobile m-0">
              <table class="table m-auto has-text-centered table is-bordered is-striped is-narrow is-fullwidth mojodiTB ">
                <thead>
                  <tr>
                    <th style="min-width: 80px;">بدهکار</th>
                    <th style="min-width: 80px;">بستانکار</th>
                    <th style="min-width: 80px;">نام</th>
                    <th style="min-width: 400px;">توضیحات</th>
                    <th  style="min-width: 40px;">تاریخ</th>
                    <th  style="min-width: 60px;">نوع</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th class="toCurrency" style="min-width: 80px;">بدهکار</th>
                    <th class="toCurrency" style="min-width: 80px;">بستانکار</th>
                    <th style="min-width: 80px;">نام</th>
                    <th style="min-width: 400px;">توضیحات</th>
                    <th style="min-width: 40px;">تاریخ</th>
                    <th  style="min-width: 60px;">نوع</th>
                  </tr>
                </tfoot>
                <tbody id="listPrds">

                  {% for articl in articls %}
                  <tr class="IteamPrd">
                    <td>
                        <span class="bedehkar toCurrency">{{ articl.debit }}</span>
                        <span class=" is-hidden"></span>
                    </td>
                    <td class="bestankar toCurrency">{{ articl.credit }}</td>
                    <td class="name">
                      <a target="_blank" href="{% url 'admin_panel:customer' articl.customer.id  %}">
                        {{ articl.customer.name_family }}
                      </a>
                    </td>
                    <td class="desc">{{ articl.desc }} {% if articl.nahvePardakht %} | {{ articl.nahvePardakht }} {% endif %}</td>
                    <td class="action" >{{ articl.createdDT | toJalali }}</td>
                    <td class="action" >{% if articl.typePy == 'khadamat' %}خدمات{% elif articl.typePy == 'nasb' %}نصب{% endif %}</td>             
                  </tr>
                  {% endfor %}

                </tbody>
              </table>
            </div>
            <p>
                صفحه
                {{ articls.number }}
                از
                {{ articls.paginator.num_pages }}

                {% if articls.has_previous %}
                    <a class="button" href="?page=1">&laquo; صفحه اول </a>
                    <a class="button" href="?page={{ articls.previous_page_number }}">صفحه قبل</a>
                {% endif %}

                {% if articls.has_next %}
                    <a class="button" href="?page={{ articls.next_page_number }}">صفحه بعد</a>
                    <a class="button" href="?page={{ articls.paginator.num_pages }}"> صفحه آخر &raquo;</a>
                {% endif %}

            </p>
        </div>
    </div>
  </div>

{% endblock %}

{% block jsEnd %}
  <script>
$(document).ready(function() {
} );
  </script>
  {% endblock %}
{% endif %}