{% 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="mt-6 mb-6">
                <form method="GET" class="columns is-mobile is-multiline is-centered">

                    <div class="field column is-2-desktop is-12-mobile m-0">
                        <label class="label">نوع</label>
                        <div class="select is-fullwidth">
                            <select id="nahvepardakht" name="nahvepardakht" required id="actionChangeUser" class="">
                            <option value="">انتخاب کنید</option>

                            {% for type_par in nahvePardakhat %}
                                <option value="{{ type_par.en }}">{{ type_par.fa }}</option>
                            {% endfor %}


                            </select>
                        </div>
                    </div>

                    <div class="field column is-2-desktop is-12-mobile m-0">
                        <label class="label">کاربر</label>
                        <div class="select is-fullwidth">
                            <select id="userlist" name="user" required id="actionChangeUser" class="">
                            <option value="">نام کاربر را انتخاب کنید</option>

                             {% for auser in userHa %}
                                 <option value="{{ auser.username }}">{{ auser.first_name }} {{ auser.last_name }}</option>
                              {% endfor %}


                            </select>
                        </div>
                    </div>

                    <div class="field column is-2-desktop is-6-mobile m-0">
                        <label class="label">از تاریخ</label>
                        <div class="control">
                          <input type="text" class="input dateTimeActionList pwt-datepicker-input-element">
                          <input name="azTarikh" id="dateTimeActionListAlt" name="dateTimeActionListAlt" required type="text" class="input is-hidden dateTimeActionListAlt">
                        </div>
                    </div>

                    <div class="field column is-2-desktop is-6-mobile m-0">
                        <label class="label">تاتاریخ</label>
                        <div class="control">
                          <input type="text" class="input dateTimeTa pwt-datepicker-input-element">
                          <input name="taTarikh" id="dateTimeTaAlt" name="dateTimeTaAlt" required type="text" class="input is-hidden dateTimeTaAlt">
                        </div>
                    </div>

                    <div class="field column is-2-desktop is-6-mobile m-0">
                        <div class="control">
                            <label class="label">-</label>
                          <input type="submit" class="button is-danger" value="گزارش گیری">
                        </div>
                    </div>

                </form>
            </div>

            <p class="has-text-centered">
              <span>جمع:</span>
              <span class="toCurrency">{{  sum_credit.credit__sum }}</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 aricles %}
                  <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>
                صفحه
                {{ aricles.number }}
                از
                {{ aricles.paginator.num_pages }}

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

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

            </p>

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

{% endblock %}

{% block jsEnd %}
<script>

        var azDateTime = function(){
            azDateTimeAlt = $("#dateTimeActionListAlt").val();
        }

        var taChangeDateTime = function(){
            taDateTimeAlt = $("#dateTimeTaAlt").val();
        }
        var dateTimePickerAnjam = $(".dateTimeActionList").pDatepicker({
        altField: '.dateTimeActionListAlt',
        initialValue: false,
        initialValueType: 'persian',
        autoClose: true,
        format: 'YYYY/MM/DD',
        onHide: azDateTime,
        calendar:{
            persian: {
                locale: 'fa'
            }
        },
        timePicker: {
            enabled: false,
            second:{
            enabled: false,
            }
        },
        });

        var dateTimePickerTaTarikh = $(".dateTimeTa").pDatepicker({
        altField: '.dateTimeTaAlt',
        initialValue: true,
        initialValueType: 'persian',
        autoClose: true,
        format: 'YYYY/MM/DD',
        onHide: taChangeDateTime,
        calendar:{
            persian: {
                locale: 'fa'
            }
        },
        timePicker: {
            enabled: false,
            second:{
            enabled: false,
            }
        },
        });

        {% if unixADT %}
        dateTimePickerAnjam.setDate({{ unixADT }});
        {% endif %}
        $("#actionChangeUser").change(function(){
            var user_id = $(this).val();
        });
        {% if u_id %}
        $("#actionChangeUser").val({{ u_id }})
        {% endif %}
        {% if status %}
        $("#actionStatus").val('{{ status }}')
        {% endif %}

        {% if query_data %}
            $("#nahvepardakht").val('{{ query_data.nahvePardakht }}')
            $("#userlist").val('{{ query_data.user }}')
        {% endif %}
    </script>
  <script>
$(document).ready(function() {
} );
  </script>
  {% endblock %}
{% endif %}