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

{% if perms.admin_panel.ViewReportMali %}
{% block bodyPage %}
<style>
  .risk-card { transition: transform 0.2s, box-shadow 0.2s; border-radius: 8px; border: 1px solid #eee; }
  .risk-card:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  .border-danger { border-bottom: 4px solid #f14668 !important; }
  .border-warning { border-bottom: 4px solid #ffdd57 !important; }
  .border-info { border-bottom: 4px solid #3e8ed0 !important; }
  .border-dark { border-bottom: 4px solid #363636 !important; }
  .filter-tabs { margin-bottom: 1.5rem; }
</style>

<div class="container is-fluid mt-4 mb-6">
  <div class="columns m-0 is-multiline">
      <div class="column is-12">
          
          {% if page_name == 'sarresidShodeha' %}
            <div class="mb-5">
              <h2 class="title is-5 mb-4 has-text-grey-dark">📊 حسابداری | سررسید شده ها</h2>
              
              <div class="columns is-multiline is-mobile">
                
                <div class="column is-6-mobile is-3-desktop">
                  <div class="box risk-card border-dark has-text-centered p-4 h-100">
                    <p class="heading has-text-grey">کل مطالبات سررسید شده</p>
                    <p class="title is-size-4 is-size-5-mobile has-text-dark toCurrency">{{ sum_sarresid }}</p>
                  </div>
                </div>

                <div class="column is-6-mobile is-3-desktop">
                  <div class="box risk-card border-info has-text-centered p-4 h-100">
                    <p class="heading has-text-grey">تأخیر ناچیز (۱ تا ۳۰ روز)</p>
                    <p class="title is-size-4 is-size-5-mobile has-text-info toCurrency">{{ minor_sum }}</p>
                  </div>
                </div>

                <div class="column is-6-mobile is-3-desktop">
                  <div class="box risk-card border-warning has-text-centered p-4 h-100">
                    <p class="heading has-text-grey">پرخطر (۳۱ تا ۹۰ روز)</p>
                    <p class="title is-size-4 is-size-5-mobile has-text-warning-dark toCurrency">{{ high_sum }}</p>
                  </div>
                </div>

                <div class="column is-6-mobile is-3-desktop">
                  <div class="box risk-card border-danger has-text-centered p-4 h-100">
                    <p class="heading has-text-grey">بحرانی (بیش از ۹۰ روز)</p>
                    <p class="title is-size-4 is-size-5-mobile has-text-danger toCurrency">{{ critical_sum }}</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="tabs is-toggle is-fullwidth filter-tabs is-small-mobile">
              <ul>
                <li class="{% if current_filter == 'all' or not current_filter %}is-active{% endif %}">
                  <a href="?risk_level=all">همه معوقات</a>
                </li>
                <li class="{% if current_filter == 'minor' %}is-active{% endif %}">
                  <a href="?risk_level=minor" class="has-text-info">تأخیر ناچیز</a>
                </li>
                <li class="{% if current_filter == 'high' %}is-active{% endif %}">
                  <a href="?risk_level=high" class="has-text-warning-dark">پرخطر</a>
                </li>
                <li class="{% if current_filter == 'critical' %}is-active{% endif %}">
                  <a href="?risk_level=critical" class="has-text-danger">بحرانی</a>
                </li>
              </ul>
            </div>
          {% endif %}

          {% if page_name == 'sarresidNaShodeha' %}
            <p class="toCurrency has-text-centered is-size-5 mb-4">سررسید نشده ها: {{ sarresidNashode }}</p>
          {% endif %}
          {% if page_name == 'checkPass' %}
            <p class="has-text-centered is-size-5 mb-4">چک های پاس شده</p>
          {% endif %}
          {% if page_name == 'checkPassFaild' %}
            <p class="has-text-centered is-size-5 mb-4">
              چک های برگشتی: {{ count_check_passfail }} فقره | جمع مبلغ: <span class="toCurrency">{{ sum_check_passfail }}</span>
            </p>
          {% endif %}

          <div class="table-container column is-12-desktop is-12-mobile m-0 shadow-sm" style="border-radius: 8px; border: 1px solid #eaeaea;">
            <table class="table m-auto has-text-centered is-bordered is-striped is-narrow is-fullwidth is-hoverable mojodiTB">
              <thead class="has-background-light">
                <tr>
                  <th style="min-width: 150px;">مبلغ (تومان)</th>
                  <th style="min-width: 150px;">نام مشتری</th>
                  <th style="min-width: 100px;">نوع سند</th>
                  <th style="min-width: 120px;">سررسید</th>
                  <th style="min-width: 120px;">تاریخ ثبت</th>
                  <th style="min-width: 300px;">توضیحات</th>
                  <th style="min-width: 100px;">وضعیت</th>
                  <th style="min-width: 100px;">عملیات</th>
                </tr>
              </thead>
              <tbody id="listPrds">
                {% for sarresid in all_sarresid %}
                <tr class="IteamPrd">
                  <td>
                      <span class="bedehkar toCurrency has-text-weight-bold">{{ sarresid.price }}</span>
                  </td>
                  <td>
                    <a target="_blank" href="{% url 'admin_panel:customerNew' sarresid.customer.id %}" class="has-text-link">
                      {{ sarresid.customer.name_family }}
                    </a>
                  </td>
                  <td>
                    {% if sarresid.type == 'check' %}<span class="tag is-light is-rounded">چک</span>{% endif %}
                    {% if sarresid.type == 'nesiye' %}<span class="tag is-white is-rounded border">نسیه</span>{% endif %}
                  </td>
                  <td class="has-text-danger-dark">{{ sarresid.sarresidDT | toJalali  }}</td>
                  <td class="has-text-grey is-size-7">{{ sarresid.createdDT | toJalali  }}</td>
                  <td class="desc is-size-7" style="text-align: right;">
                    {% if sarresid.desc %}{{ sarresid.desc }}<br>{% endif %}
                    {% if sarresid.factor %}
                      <span class="tag is-light is-info">فاکتور شماره {{ sarresid.factor.id }}</span>
                    {% endif %}
                  </td>
                  <td>
                    {% if sarresid.payStatus == "true" %}<span class="has-text-success">پرداخت شده</span>{% endif %}
                    {% if sarresid.payStatus == "false" %}<span class="has-text-danger">پرداخت نشده</span>{% endif %}
                  </td>
                  <td>
                    {% if sarresid.payStatus == "false" %}
                      <button class="button is-danger is-small is-outlined VosolButton" csid="{{ sarresid.customer.id }}" price="{{ sarresid.price }}" type="{{ sarresid.type }}" articlID="{{ sarresid.id }}">وصول شد</button>
                    {% else %}
                      <span class="icon has-text-success"><i class="fas fa-check-circle"></i> بله</span>
                    {% endif %}
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="8" class="has-text-grey p-5">هیچ سندی در این محدوده یافت نشد.</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          <div class="mt-4 is-flex is-justify-content-center">
            <div class="buttons">
              {% if all_sarresid.has_previous %}
                  <a href="?page={{ all_sarresid.previous_page_number }}&risk_level={{ current_filter|default:'all' }}" class="button is-light">صفحه قبل</a>
              {% endif %}
              {% if all_sarresid.has_next %}
                  <a href="?page={{ all_sarresid.next_page_number }}&risk_level={{ current_filter|default:'all' }}" class="button is-light">صفحه بعد</a>
              {% endif %}
            </div>
          </div>

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

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <form>
        <input type="text" class="is-hidden" name="articlID">
      </form>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<form class="modal nesiyeModal" method="post" action="{% url 'admin_panel:pardakhtNesiye' 9101010101 %}">
  {% csrf_token %}
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">نسیه</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">مانده از این نسیه</label>
        <div class="control">
          <input id="priceBedehi" disabled class="input reset_input" type="text" placeholder="واحد تومان">
        </div>
      </div>
      <input name="sr_articlID" id="sr_articlID" class="input reset_input is-hidden" type="text">
      <div class="field">
        <label class="label">مبلغ پرداختی فعلی</label>
        <div class="control">
          <input name="next_sarresidPrice" required class="input reset_input" type="text" placeholder="واحد تومان">
        </div>
      </div>
      <div class="field">
        <label class="label">نحوه پرداخت</label>
        <div class="control">
          <div class="select is-fullwidth">
            <select required class="reset_input" name="nahvePardakht">
              <option></option>
              <option value="check">چک</option>
              <option value="naghd">نقد</option>
              <option value="kartbekart">کارت به کارت</option>
              <option value="kartkhan">کارت خوان</option>
              <option value="takhfif">تخفیف</option>
            </select>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label">سررسید بعدی</label>
        <div class="control">
          <input name="xxxxxaaaa" required class="input reset_input" id="NextSarResid" type="text">
        </div>
      </div>
      <div class="field">
        <label class="label">توضیحات</label>
        <div class="control">
            <textarea name="desc_sar" class="input"></textarea>
        </div>
      </div>
      <input required type="text" class="is-hidden reset_input" name="next_sarresidDateTime" id="NextSarResidVal">
    </section>
    <footer class="modal-card-foot">
      <input type="submit" class="button is-success" value="ثبت">
      <span class="button cancellBTNSR">لغو</span>
    </footer>
  </div>
</form>

{% endblock %}

{% block jsEnd %}
<script>
$(document).ready(function() {
  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

  $(".modal-background").click(function(){
    $(".modal").removeClass("is-active");
    $('.reset_input').val('');
  })
  
  $(".cancellBTNSR").click(function(){
    $(".modal").removeClass("is-active");
    $('.reset_input').val('');
  })

  $("#NextSarResid").pDatepicker({
    initialValue: false,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar:{
        persian: { locale: 'fa' }
    },
    onSelect: (unix)=>{
      $("#NextSarResidVal").val(unix)
    }
  });

  var csid = null
  $(".VosolButton").click(function(){
    var articlID = $(this).attr("articlID")
    var type = $(this).attr("type")
    var price = $(this).attr("price")
    csid = $(this).attr("csid")

    if(type=="check"){
      if( confirm('چک وصول شده؟') ){
          var prompt_desc = prompt('لطفا توضیحات را وارد کنید و تایید کنید')
          var url_check = '/panel/passCheck/'+articlID;
          if( prompt_desc ){
              $.ajax({
                  url: url_check,
                  type: 'post',
                  data: { message: prompt_desc },
                  headers: {'X-CSRFToken': csrftoken },
                  success: function (data) {
                      window.location.reload();
                  }
              });
          }
      }
    } else {
      var actionUrl = $(".nesiyeModal").attr('action')
      $(".nesiyeModal").addClass("is-active");
      $("#priceBedehi").val(price);
      $("#sr_articlID").val(articlID)
    }
  });

  $("form").submit(function(e){
    var actionUrl = $(".nesiyeModal").attr('action')
    $(".nesiyeModal").attr('action', actionUrl.replace("9101010101", csid ) )
  });
});
</script>
{% endblock %}
{% endif %}