{% extends "./customerBaseNew.html" %}
{% load custom_tags %}
{% load static %}

{% block BodyCustomer1 %}

<style>
  /* استایل‌های اختصاصی جدول و جستجوگر */
  .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;
  }
  
  /* تنظیمات پاسخگویی هدر */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .search-box {
    flex-grow: 1;
    max-width: 300px;
  }

  @media screen and (max-width: 768px) {
    .header-container {
      flex-direction: column;
      align-items: stretch !important;
      gap: 12px;
    }
    .header-actions {
      flex-direction: column;
      width: 100%;
    }
    .search-box {
      max-width: 100% !important;
      width: 100%;
    }
    .header-actions .button {
      width: 100%;
      justify-content: center;
    }
    .table th, .table td {
      padding: 0.5em 0.6em !important;
      font-size: 0.85rem;
    }
  }

  .table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }
</style>

<div id="hesabdari" class="column is-12-mobile is-12-desktop">
  
  <div class="is-flex is-justify-content-space-between is-align-items-center mb-4 header-container">
    <div>
      <h1 class="title is-5 has-text-weight-bold mb-0">
        مدیریت چک‌ها و نسیه‌ها
      </h1>
    </div>
    
    <div class="header-actions">
      <div class="field mb-0 search-box">
        <p class="control has-icons-left">
          <input class="input is-rounded is-small" type="text" id="checkSearchInput" placeholder="جستجو: ردیف چک یا صیادی...">
          <span class="icon is-small is-left has-text-grey">
            <i class="fas fa-search"></i>
          </span>
        </p>
      </div>

      <button class="button is-primary is-rounded is-small" id="newSarresid">
        <span class="icon"><i class="fas fa-plus"></i></span>
        <span>افزودن سند جدید</span>
      </button>
    </div>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="notification is-{{ message.tags }} is-light mt-3 py-2">
        <button class="delete"></button>
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  {% if all_sarresid %}
  <div class="table-responsive-wrapper">
    <table class="table is-bordered is-striped is-hoverable is-fullwidth has-text-centered mb-0" id="sarresidTable">
      <thead>
        <tr>
          <th style="width: 50px;">#</th>
          <th>مبلغ (تومان)</th>
          <th>نوع</th>
          <th>وضعیت</th>
          <th>عملیات</th>
          <th>تاریخ سررسید</th>
          <th>ردیف چک</th>
          <th>شناسه صیادی</th>
          <th>صاحب حساب (تلفن)</th>
          <th>توضیحات / فاکتور</th>
        </tr>
      </thead>
      <tbody>
        {% for sarresid in all_sarresid %}
        <tr class="sarresid-row">
          <td>{{ forloop.counter }}</td>
          
          <td>
            <span class="has-text-weight-bold is-size-6 bedehkar toCurrency">{{ sarresid.price }}</span>
          </td>
          
          <td>
            {% if sarresid.type == 'check' %}
              <span class="tag is-info is-light has-text-weight-bold">چک</span>
            {% elif 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"></i> وصول شد
              </span>
            {% else %}
              <span class="has-text-danger has-text-weight-bold is-size-7">
                <i class="fas fa-clock"></i> در انتظار
              </span>
            {% endif %}
          </td>

          <td>
            {% if sarresid.payStatus == "false" %}
              <button class="button is-danger is-small is-outlined VosolButton" 
                      price="{{ sarresid.price }}" 
                      type="{{ sarresid.type }}" 
                      articlID="{{ sarresid.id }}">
                وصول شد
              </button>
            {% else %}
              <span class="has-text-grey-light is-size-7">تسویه شده</span>
            {% endif %}
          </td>

          <td>{{ sarresid.sarresidDT | toJalali }}</td>
          
          <td class="search-row-num has-text-weight-semibold">
            {{ sarresid.check_row_number|default:"-" }}
          </td>
          
          <td class="search-sayyad-id">
            {% 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 %}
              -
            {% endif %}
          </td>
          
          <td class="has-text-right is-size-7">
            {% if sarresid.desc %}
              <p class="has-text-grey-dark">{{ sarresid.desc }}</p>
            {% endif %}
            {% if sarresid.factor.id %}
              <span class="tag is-small is-link is-light mt-1">فاکتور: {{ sarresid.factor.id }}</span>
            {% endif %}
          </td>

        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="notification is-warning is-light has-text-centered my-5">
    هیچ سابقه چک یا نسیه‌ای برای این مشتری ثبت نشده است.
  </div>
  {% endif %}

</div>

<form class="modal modalAddNew" method="post" action="{% url 'admin_panel:addSarresid' customer.id %}" id="addSarresidForm">
  {% 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">
          <div class="select is-fullwidth">
            <select required class="reset_input" name="n_sarresidType" id="sarresidTypeSelect">
              <option value="">انتخاب کنید...</option>
              <option value="check">چک بانکی</option>
              <option value="nesiye">نسیه / حساب دفتری</option>
            </select>
          </div>
        </div>
      </div>

      <div class="field">
        <label class="label">مبلغ (تومان) <span class="has-text-danger">*</span></label>
        <div class="control">
          <input id="formattedPriceInput" required class="input reset_input comma-separator" type="text" inputmode="numeric" placeholder="مثال: ۱,۰۰۰,۰۰۰">
          <input type="hidden" name="n_sarresidPrice" id="realPriceInput" class="reset_input">
          <span class="price-preview" id="priceInWords"></span>
        </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="NewSarResid" type="text" autocomplete="off" readonly style="cursor: pointer;" placeholder="برای انتخاب تاریخ کلیک کنید">
        </div>
      </div>

      <input type="hidden" name="n_sarresidDateTime" id="NewSarResidVal" class="reset_input">

      <div id="check_extra_fields" style="display: none; background-color: #f8fafc; padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid #cbd5e1;">
          <p class="has-text-weight-bold mb-3 has-text-info">اطلاعات چک صیادی</p>
          
          <div class="field">
            <label class="label">شماره ردیف / سریال چک <span class="has-text-danger">*</span></label>
            <div class="control">
              <input name="check_row_number" class="input reset_input is-required-check" type="text" placeholder="مثال: 123456">
            </div>
          </div>

          <div class="field">
            <label class="label">شناسه صیادی (۱۶ رقم) <span class="has-text-danger">*</span></label>
            <div class="control">
              <input name="check_sayyad_id" class="input reset_input is-required-check" type="text" 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 name="check_owner_name" class="input reset_input is-required-check" type="text" placeholder="نام مالک چک">
            </div>
          </div>

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

    </section>
    <footer class="modal-card-foot">
      <button type="submit" class="button is-success">
        <i class="fas fa-save ml-1"></i> ثبت اطلاعات
      </button>
      <span class="button cancellBTNSR">لغو</span>
    </footer>
  </div>
</form>

<form class="modal nesiyeModal" method="post" action="{% url 'admin_panel:pardakhtNesiye' customer.id %}" 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">
        </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="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;">
        </div>
      </div>

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

      <input type="hidden" name="next_sarresidDateTime" id="NextSarResidVal" class="reset_input">

    </section>
    <footer class="modal-card-foot">
      <button type="submit" class="button is-success">ثبت و بروزرسانی</button>
      <span class="button cancellBTNSR">لغو</span>
    </footer>
  </div>
</form>

<script>
  $(document).ready(function() {

    // ----------------------------------------------------
    // جستجوگر زنده (Real-time Search)
    // ----------------------------------------------------
    $("#checkSearchInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#sarresidTable tbody tr").filter(function() {
        var searchData = $(this).find('.search-row-num, .search-sayyad-id').text().toLowerCase();
        $(this).toggle(searchData.indexOf(value) > -1);
      });
    });
      
    // ----------------------------------------------------
    // فرمت‌بندی اعداد (۳ رقم ۳ رقم)
    // ----------------------------------------------------
    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') === 'formattedPriceInput') {
          $('#realPriceInput').val(rawVal);
          $('#priceInWords').text(formatNumber(rawVal) + ' تومان');
        } else if ($(this).attr('id') === 'formattedNextPriceInput') {
          $('#realNextPriceInput').val(rawVal);
          $('#nextPriceInWords').text(formatNumber(rawVal) + ' تومان');
        }
      } else {
        $(this).val('');
        $('#realPriceInput, #realNextPriceInput').val('');
        $('#priceInWords, #nextPriceInWords').text('');
      }
    });

    // ----------------------------------------------------
    // مدیریت فرم و نمایش دینامیک چک
    // ----------------------------------------------------
    $("#sarresidTypeSelect").change(function(){
      let selectedType = $(this).val();
      if(selectedType === "check") {
        $("#check_extra_fields").slideDown(250);
        $(".is-required-check").prop('required', true);
      } else {
        $("#check_extra_fields").slideUp(250);
        $(".is-required-check").prop('required', false);
        $("#check_extra_fields input").val('');
      }
    });

    // ----------------------------------------------------
    // حذف پیام‌های سیستم
    // ----------------------------------------------------
    $('.notification .delete').click(function() {
      $(this).parent().fadeOut();
    });

    // ----------------------------------------------------
    // مودال‌ها
    // ----------------------------------------------------
    $("#newSarresid").click(function(){
      $(".modalAddNew").addClass("is-active");
    });

    $(".modal-background, .delete, .cancellBTNSR").click(function(){
      $(".modal").removeClass("is-active");
      $('.reset_input').val('');
      $('#priceInWords, #nextPriceInWords').text('');
      $("#check_extra_fields").hide();
      $(".is-required-check").prop('required', false);
    });

    // ----------------------------------------------------
    // تقویم شمسی (اصلاح شده)
    // ----------------------------------------------------
    $("#NewSarResid").pDatepicker({
      initialValue: false,
      initialValueType: 'en',
      format: 'YYYY/MM/DD',
      autoClose: true,
      calendar: {
        persian: { locale: 'fa' }
      },
      onSelect: function(unix){
        $("#NewSarResidVal").val(unix);
      }
    });

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

    // ----------------------------------------------------
    // اعتبارپردازی و اطمینان از مقداردهی قبل از Submit
    // ----------------------------------------------------
    $("#addSarresidForm").on("submit", function(e) {
      if(!$("#NewSarResidVal").val()){
        alert("لطفاً تاریخ سررسید را انتخاب کنید.");
        e.preventDefault();
        return false;
      }
    });

    $("#pardakhtNesiyeForm").on("submit", function(e) {
      if(!$("#NextSarResidVal").val()){
        alert("لطفاً تاریخ سررسید بعدی را انتخاب کنید.");
        e.preventDefault();
        return false;
      }
    });

    // ----------------------------------------------------
    // عملیات وصول شد
    // ----------------------------------------------------
    $(".VosolButton").click(function(){
      var articlID = $(this).attr("articlID");
      var type = $(this).attr("type");
      var price = $(this).attr("price");

      if(type === "check"){
        if( confirm('آیا از وصول شدن این چک بانکی اطمینان دارید؟') ){
          if( confirm('با تایید شما، سند حسابداری تسویه این چک ثبت خواهد شد.') ){
            window.location.href = '/panel/passCheck/' + articlID;
          }
        }
      } else {
        $(".nesiyeModal").addClass("is-active");
        $("#priceBedehi").val(formatNumber(price));
        $("#sr_articlID").val(articlID);
      }
    });
    
  });
</script>

{% endblock %}