{% 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; }

  /* استایل اختصاصی شناسه صیادی */
  .sayyad-code {
    font-family: monospace, monospace;
    letter-spacing: 1px;
    font-weight: 700;
    color: #1e293b;
    background-color: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
  }

  /* تنظیمات جدول جهت حفظ حالت سطری و عدم به‌هم‌ریختگی */
  .table th {
    vertical-align: middle !important;
    background-color: #f8fafc;
    white-space: nowrap;
  }
  .table td {
    vertical-align: middle !important;
    white-space: nowrap;
  }
  .price-preview {
    font-size: 0.85rem;
    color: #2563eb;
    font-weight: 600;
    margin-top: 4px;
    display: block;
  }

  /* کانتینر اسکرول افقی واکنش‌گرا در موبایل */
  .table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid #eaeaea;
  }

  @media screen and (max-width: 768px) {
    .table th, .table td {
      padding: 0.5em 0.6em !important;
      font-size: 0.85rem;
    }
  }
</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-responsive-wrapper shadow-sm mb-4">
            <table class="table m-auto has-text-centered is-bordered is-striped is-narrow is-fullwidth is-hoverable mojodiTB mb-0" id="sarresidTable">
              <thead class="has-background-light">
                <tr>
                  <th style="width: 40px;">#</th>
                  <th>مبلغ (تومان)</th>
                  <th>نام مشتری</th>
                  <th>نوع سند</th>
                  <th>وضعیت</th>
                  <th>عملیات</th>
                  <th>تکمیل اطلاعات چک</th>
                  <th>سررسید</th>
                  <th>تاریخ ثبت</th>
                  <th>ردیف چک</th>
                  <th>شناسه صیادی</th>
                  <th>صاحب حساب (تلفن)</th>
                  <th>توضیحات</th>
                </tr>
              </thead>
              <tbody id="listPrds">
                {% for sarresid in all_sarresid %}
                <tr class="IteamPrd">
                  <td>{{ forloop.counter }}</td>
                  
                  <td>
                    <span class="bedehkar toCurrency has-text-weight-bold is-size-6">{{ sarresid.price }}</span>
                  </td>
                  
                  <td>
                    <a target="_blank" href="{% url 'admin_panel:customerNew' sarresid.customer.id %}" class="has-text-link has-text-weight-semibold">
                      {{ sarresid.customer.name_family }}
                    </a>
                  </td>
                  
                  <td>
                    {% if sarresid.type == 'check' %}<span class="tag is-info is-light has-text-weight-bold">چک</span>{% endif %}
                    {% if sarresid.type == 'nesiye' %}<span class="tag is-warning is-light has-text-weight-bold">نسیه</span>{% endif %}
                  </td>
                  
                  <td>
                    {% if sarresid.payStatus == "true" %}<span class="has-text-success has-text-weight-bold is-size-7"><i class="fas fa-check-circle ml-1"></i>پرداخت شده</span>{% endif %}
                    {% if sarresid.payStatus == "false" %}<span class="has-text-danger has-text-weight-bold is-size-7"><i class="fas fa-clock ml-1"></i>پرداخت نشده</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>

                  <td>
                    {% if sarresid.type == 'check' %}
                      <button class="button is-small is-info is-light has-text-weight-bold btn-update-check"
                              data-id="{{ sarresid.id }}"
                              data-row="{{ sarresid.check_row_number|default:'' }}"
                              data-sayyad="{{ sarresid.check_sayyad_id|default:'' }}"
                              data-owner="{{ sarresid.check_owner_name|default:'' }}"
                              data-phone="{{ sarresid.check_owner_phone|default:'' }}">
                        <span class="icon is-small"><i class="fas fa-edit"></i></span>
                        <span>افزودن اطلاعات</span>
                      </button>
                    {% else %}
                      <span class="has-text-grey-light">-</span>
                    {% endif %}
                  </td>

                  <td class="has-text-danger-dark has-text-weight-semibold">{{ sarresid.sarresidDT | toJalali }}</td>
                  <td class="has-text-grey is-size-7">{{ sarresid.createdDT | toJalali }}</td>
                  
                  <td class="has-text-weight-semibold">
                    {{ sarresid.check_row_number|default:"-" }}
                  </td>
                  
                  <td>
                    {% if sarresid.check_sayyad_id %}
                      <span class="sayyad-code">{{ sarresid.check_sayyad_id }}</span>
                    {% else %}
                      -
                    {% endif %}
                  </td>

                  <td>
                    {% if sarresid.check_owner_name %}
                      <div class="has-text-dark has-text-weight-semibold is-size-7">{{ sarresid.check_owner_name }}</div>
                      {% if sarresid.check_owner_phone %}
                        <div class="has-text-grey is-size-7 mt-1" dir="ltr">{{ sarresid.check_owner_phone }}</div>
                      {% endif %}
                    {% else %}
                      <span class="has-text-grey-light">-</span>
                    {% endif %}
                  </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 mt-1">فاکتور شماره {{ sarresid.factor.id }}</span>
                    {% endif %}
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="13" 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 modalUpdateCheck" method="post" action="" id="updateCheckForm">
  {% csrf_token %}
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">تکمیل اطلاعات چک صیادی</p>
      <button type="button" class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      
      <div class="field">
        <label class="label">شماره ردیف / سریال چک <span class="has-text-danger">*</span></label>
        <div class="control">
          <input id="up_check_row" name="check_row_number" class="input reset_input" type="text" required placeholder="مثال: 123456">
        </div>
      </div>

      <div class="field">
        <label class="label">شناسه صیادی (۱۶ رقم) <span class="has-text-danger">*</span></label>
        <div class="control">
          <input id="up_check_sayyad" name="check_sayyad_id" class="input reset_input" type="text" required inputmode="numeric" pattern="[0-9]{16}" minlength="16" maxlength="16" placeholder="فقط اعداد ۱۶ رقمی" title="لطفاً دقیقاً ۱۶ رقم وارد کنید">
        </div>
      </div>

      <div class="field">
        <label class="label">نام و نام‌خانوادگی صاحب حساب <span class="has-text-danger">*</span></label>
        <div class="control">
          <input id="up_check_owner" name="check_owner_name" class="input reset_input" type="text" required placeholder="نام مالک چک">
        </div>
      </div>

      <div class="field">
        <label class="label">تلفن مالک چک (اختیاری)</label>
        <div class="control">
          <input id="up_check_phone" name="check_owner_phone" class="input reset_input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="11" placeholder="مثال: 09123456789">
        </div>
      </div>

    </section>
    <footer class="modal-card-foot">
      <button type="submit" class="button is-info">
        <i class="fas fa-check ml-1"></i> ذخیره اطلاعات
      </button>
      <span class="button cancellBTNSR">لغو</span>
    </footer>
  </div>
</form>

<form class="modal nesiyeModal" method="post" action="{% url 'admin_panel:pardakhtNesiye' 9101010101 %}" id="pardakhtNesiyeForm">
  {% csrf_token %}
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">نسیه</p>
      <button type="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 has-text-weight-bold" 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">مبلغ پرداختی فعلی <span class="has-text-danger">*</span></label>
        <div class="control">
          <input id="formattedNextPriceInput" required class="input reset_input comma-separator" type="text" inputmode="numeric" placeholder="مبلغ واریزی (تومان)">
          <input type="hidden" name="next_sarresidPrice" id="realNextPriceInput" class="reset_input">
          <span class="price-preview" id="nextPriceInWords"></span>
        </div>
      </div>

      <div class="field">
        <label class="label">نحوه پرداخت <span class="has-text-danger">*</span></label>
        <div class="control">
          <div class="select is-fullwidth">
            <select required class="reset_input" name="nahvePardakht">
              <option value=""></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">سررسید بعدی <span class="has-text-danger">*</span></label>
        <div class="control">
          <input required class="input reset_input" id="NextSarResid" type="text" autocomplete="off" readonly style="cursor: pointer;" placeholder="برای انتخاب تاریخ کلیک کنید">
        </div>
      </div>

      <div class="field">
        <label class="label">توضیحات</label>
        <div class="control">
            <textarea name="desc_sar" class="input reset_input" rows="2"></textarea>
        </div>
      </div>

      <input type="hidden" name="next_sarresidDateTime" id="NextSarResidVal" class="reset_input">
    </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();

  // ----------------------------------------------------
  // فرمت‌بندی اعداد (سه رقم سه رقم)
  // ----------------------------------------------------
  function formatNumber(num) {
    return num.toString().replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  $(document).on('input', '.comma-separator', function() {
    let val = $(this).val();
    let rawVal = val.replace(/,/g, '');
    
    if (rawVal && !isNaN(rawVal)) {
      $(this).val(formatNumber(rawVal));
      if ($(this).attr('id') === 'formattedNextPriceInput') {
        $('#realNextPriceInput').val(rawVal);
        $('#nextPriceInWords').text(formatNumber(rawVal) + ' تومان');
      }
    } else {
      $(this).val('');
      $('#realNextPriceInput').val('');
      $('#nextPriceInWords').text('');
    }
  });

  // ----------------------------------------------------
  // بستن مودال‌ها
  // ----------------------------------------------------
  $(".modal-background, .delete, .cancellBTNSR").click(function(){
    $(".modal").removeClass("is-active");
    $('.reset_input').val('');
    $('#nextPriceInWords').text('');
  });

  // ----------------------------------------------------
  // رویداد باز کردن مُدال ویرایش چک (جدید)
  // ----------------------------------------------------
  $(".btn-update-check").click(function(){
    let sarresidId = $(this).data('id');
    let rowNum = $(this).data('row');
    let sayyadId = $(this).data('sayyad');
    let ownerName = $(this).data('owner');
    let ownerPhone = $(this).data('phone');

    // مقداردهی فرم با اطلاعات قبلی
    $("#up_check_row").val(rowNum !== 'None' ? rowNum : '');
    $("#up_check_sayyad").val(sayyadId !== 'None' ? sayyadId : '');
    $("#up_check_owner").val(ownerName !== 'None' ? ownerName : '');
    $("#up_check_phone").val(ownerPhone !== 'None' ? ownerPhone : '');

    // تنظیم آدرس (Action) فرم برای این آیدی خاص
    $("#updateCheckForm").attr('action', '/panel/sarresid/update-check-info/' + sarresidId);

    // باز کردن مُدال
    $(".modalUpdateCheck").addClass("is-active");
  });

  // ----------------------------------------------------
  // تقویم شمسی
  // ----------------------------------------------------
  $("#NextSarResid").pDatepicker({
    initialValue: false,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar: {
        persian: { locale: 'fa' }
    },
    onSelect: function(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 !== null ){ // اگر کاربر لغو نکرد
              $.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(formatNumber(price));
      $("#sr_articlID").val(articlID);
    }
  });

  // ----------------------------------------------------
  // ارسال فرم پرداخت نسیه
  // ----------------------------------------------------
  $("#pardakhtNesiyeForm").submit(function(e){
    if(!$("#NextSarResidVal").val()){
      alert("لطفاً تاریخ سررسید بعدی را انتخاب کنید.");
      e.preventDefault();
      return false;
    }
    var actionUrl = $(this).attr('action');
    $(this).attr('action', actionUrl.replace("9101010101", csid ));
  });

});
</script>
{% endblock %}
{% endif %}