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

{% block BodyCustomer1 %}

<div id="newFactor" class="column is-12 p-2-mobile">
  <h1 class="has-text-centered has-text-weight-bold is-size-4-mobile mb-4">شماره فاکتور {{ factorO.id }}</h1>
  
  <div class="columns is-multiline">

    <div class="field column is-4-desktop is-6-tablet is-12-mobile">
      <label class="label is-small-mobile">نام شخص</label>
      <div class="control">
        <input disabled value="{{ customer.name_family }}" name="installDate" id="persianDateP" class="input is-small-mobile" type="text">
      </div>
    </div>

    <div class="field column is-4-desktop is-6-tablet is-12-mobile">
      <label class="label is-small-mobile">تاریخ فاکتور</label>
      <div class="control">
        <input disabled id="FpayDate" value="{{ factorO.create_date | toJalali }}" class="input is-small-mobile" type="text">
      </div>
    </div>

    <div class="table-container column is-12 p-0-mobile my-3">
      <table class="table m-auto has-text-centered table is-bordered is-striped is-narrow is-fullwidth mojodiTB is-size-7-mobile">
        <thead>
          <tr>
            <th style="min-width: 200px;">نام محصول</th>
            <th style="min-width: 90px;">قیمت واحد</th>
            <th style="min-width: 90px;">قیمت کل</th>
            <th>تعداد</th>
            <th>بابت</th>
            <th style="min-width: 40px;">عملیات</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>نام محصول</th>
            <th>قیمت واحد</th>
            <th>قیمت کل</th>
            <th>تعداد</th>
            <th>بابت</th>
            <th>عملیات</th>
          </tr>
        </tfoot>
        <tbody id="listPrds">
          {% for iteam in fiteam %}
          <tr class="IteamPrd">
            <td>
                <span class="product_name">{{ iteam.product_name }}</span>
                <span class="product_id is-hidden"></span>
            </td>
            <td class="product_price">{{ iteam.product.product_price }}</td>
            <td class="product_price">{{ iteam.amount }}</td>
            <td class="product_count">{{ iteam.num }}</td>
            <td class="product_count">{{ iteam.garantyEsh }}</td>
            <td><span>*</span></td>          
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="field column is-4-desktop is-6-tablet is-12-mobile">
      <label class="label is-small-mobile">جمع فاکتور</label>
      <div class="control">
        <input value="{{ factorO.amount }}" disabled name="price" id="sum_all" class="input is-small-mobile" type="text">
      </div>
    </div>

    <div class="field column is-4-desktop is-6-tablet is-12-mobile">
      <label class="label is-small-mobile">نحوه پرداخت</label>
      <div class="control">
        <div class="select is-small-mobile" style="width: 100%;">
          <select id="FpayType" disabled style="width: 100%;">
            <option value="{{ factorO.PayType }}">{{ factorO.PayType }}</option>
          </select>
        </div>
      </div>
    </div>

    <div class="field column is-4-desktop is-12-mobile" id="sarresidFild01">
      <label class="label is-small-mobile">سررسید</label>
      <div class="control">
        <input value="{% if factorO.deadline %} {{ factorO.deadline | toJalali }} {% endif %}" disabled name="sarResidDateSL" class="input is-small-mobile" type="text">
      </div>
    </div>

    <div class="field column is-12">
      <label class="label is-small-mobile">توضیحات فاکتور</label>
      <div class="control">
        <textarea id="Fdesc" disabled class="textarea is-small-mobile" rows="2">
          {{ factorO.desc }}
        </textarea>
      </div>
    </div>

    <div class="field column is-12 has-text-centered mt-4">
      {% if factorO.is_active and factorO.pay_status != 'cancell' %}
          {% if perms.admin_panel.DelFactor %}
          <button class="button is-danger has-text-weight-bold is-fullwidth-mobile py-5" id="openCancelModal">
            <i class="fas fa-exclamation-triangle m-l-5"></i> ابطال فاکتور و صدور اسناد اصلاحی
          </button>
          {% endif %}
      {% else %}
          <div class="notification is-danger is-light has-text-weight-bold is-size-6-mobile" style="border: 2px dashed #f14668;">
            <i class="fas fa-info-circle"></i> این فاکتور باطل شده است. (اسناد مالی و انبار معکوس شده‌اند)
          </div>
      {% endif %}
    </div>

  </div>
</div>

<div class="modal" id="cancelFactorModal">
    <div class="modal-background close-modal"></div>
    <div class="modal-card mx-2-mobile" style="border-radius: 8px; max-width: 700px; width: auto;">
        <header class="modal-card-head has-background-danger px-4-mobile py-3-mobile">
            <p class="modal-card-title has-text-white has-text-weight-bold is-size-5 is-size-6-mobile">
                <i class="fas fa-book-open"></i> راهنمای ابطال فاکتور {{ factorO.id }}
            </p>
            <button class="delete close-modal" aria-label="close"></button>
        </header>
        
        <section class="modal-card-body pb-5 px-3-mobile" style="direction: rtl; text-align: right;">
            
            <div class="notification is-danger is-light mb-4 py-2 px-3 is-size-7 is-size-7-mobile">
                <i class="fas fa-gavel"></i> <strong>قانون حذف فیزیکی:</strong> در سیستم‌های مالی چیزی حذف نمی‌شود؛ تایید این فرم مستقیماً اسناد معکوس در دفتر روزنامه و کاردکس انبار ثبت می‌کند. لطفاً با دقت انتخاب کنید.
            </div>

            <form id="cancelForm" method="POST" action="{% url 'admin_panel:FactorDel' c_id=customer.id f_id=factorO.id %}">
                {% csrf_token %}
                
                <div class="field mb-5">
                    <label class="label has-text-weight-bold has-text-link mb-2 is-size-6-mobile"><i class="fas fa-step-forward"></i> گام اول: ماهیت ابطال</label>
                    <div class="control">
                        
                        <label class="radio is-block mb-3 p-3" style="background: #fdfdfd; border: 1px solid #dbdbdb; border-radius: 6px; cursor: pointer; white-space: normal;">
                            <input type="radio" name="cancel_reason" value="error" checked id="reasonError">
                            <strong class="has-text-info is-size-6 is-size-7-mobile mr-1">الف) اشتباه کاربری در ثبت فاکتور</strong>
                            <div class="is-size-7 has-text-grey mt-2 pr-4">
                                <p>• <strong>اثر انبار:</strong> کالا تحت عنوان "اصلاح خطای ثبت" بازمی‌گردد.</p>
                                <p class="mt-1">• <strong>اثر مالی:</strong> مبلغ فاکتور معکوس و <span class="has-text-danger has-text-weight-bold">تمامی پرداختی‌ها لغو می‌شوند.</span></p>
                            </div>
                        </label>
                        
                        <label class="radio is-block p-3" style="background: #fdfdfd; border: 1px solid #dbdbdb; border-radius: 6px; cursor: pointer; white-space: normal;">
                            <input type="radio" name="cancel_reason" value="return" id="reasonReturn">
                            <strong class="has-text-warning-dark is-size-6 is-size-7-mobile mr-1">ب) برگشت از فروش واقعی (مرجوعی)</strong>
                            <div class="is-size-7 has-text-grey mt-2 pr-4">
                                <p>• <strong>اثر انبار:</strong> کالا رسماً تحت عنوان "برگشت از فروش" ثبت می‌شود.</p>
                                <p class="mt-1">• <strong>اثر مالی:</strong> مشتری بستانکار می‌شود. وضعیت وجه او در گام دوم مشخص می‌گردد.</p>
                            </div>
                        </label>
                    </div>
                </div>

                <div style="border-top: 1px dashed #ccc; margin: 15px 0;"></div>

                <div class="field mb-5" id="paymentActionSection">
                    <label class="label has-text-weight-bold has-text-link mb-2 is-size-6-mobile"><i class="fas fa-step-forward"></i> گام دوم: وضعیت مبالغ مالی</label>
                    
                    <div class="notification is-warning is-light p-3 is-size-7 mb-3" style="border-right: 4px solid #ffdd57;">
                        <i class="fas fa-exclamation-circle"></i> <strong>تله‌ی حسابداری:</strong> اگر پولی از مشتری گرفته نشده (یا عودت داده شده)، گزینه اول را انتخاب کنید تا از بستانکاری کاذب جلوگیری شود.
                    </div>

                    <div class="control">
                        <label class="radio is-block mb-2 p-2" style="background: #f9f9f9; border-radius: 4px; white-space: normal;">
                            <input type="radio" name="payment_action" value="reverse" checked id="payReverse">
                            <span class="is-size-6 is-size-7-mobile mr-1"><strong>سند معکوس پرداختی صادر شود</strong> <br><small class="has-text-grey">(پولی دریافت نشده بود / وجه عودت داده شد)</small></span>
                        </label>
                        
                        <label class="radio is-block p-2" style="background: #f9f9f9; border-radius: 4px; white-space: normal;" id="payKeepWrapper">
                            <input type="radio" name="payment_action" value="keep" id="payKeep">
                            <span class="is-size-6 is-size-7-mobile mr-1"><strong>پول به عنوان اعتبار در حساب بماند</strong> <br><small class="has-text-grey">(مشتری وجه را پرداخت کرده و پس نمی‌گیرد)</small></span>
                        </label>
                    </div>
                </div>

                <div class="box has-background-danger-light mt-4 p-3" style="border: 1px solid #f14668;">
                    <label class="checkbox has-text-weight-semibold is-size-7 has-text-danger-dark" style="display: flex; align-items: flex-start;">
                        <input type="checkbox" id="understandCheckbox" class="ml-2 mt-1">
                        <span>اینجانب تایید می‌کنم که راهنما را مطالعه کرده‌ام و مسئولیت ثبت این سند اصلاحیِ انبار و مالی را می‌پذیرم.</span>
                    </label>
                </div>
            </form>
        </section>
        
        <footer class="modal-card-foot is-flex-wrap-wrap is-justify-content-flex-end p-3-mobile" style="background-color: #fafafa; direction: rtl;">
            <button class="button is-danger is-fullwidth-mobile mb-2-mobile" id="submitCancelForm" disabled>تایید نهایی و صدور سند</button>
            <button class="button close-modal is-fullwidth-mobile mr-2 mr-0-mobile">انصراف</button>
        </footer>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#openCancelModal").click(function() { 
            $("#cancelFactorModal").addClass("is-active"); 
            triggerFormLogic(); 
        });

        $(".close-modal").click(function() { 
            $("#cancelFactorModal").removeClass("is-active"); 
            $("#understandCheckbox").prop('checked', false);
            $("#submitCancelForm").prop('disabled', true);
        });

        $("#understandCheckbox").change(function() {
            if($(this).is(":checked")) {
                $("#submitCancelForm").prop('disabled', false);
            } else {
                $("#submitCancelForm").prop('disabled', true);
            }
        });

        function triggerFormLogic() {
            if($("#reasonError").is(':checked')) {
                $("#payReverse").prop('checked', true);
                $("#payKeep").prop('disabled', true);
                $("#payKeepWrapper").css('opacity', '0.5');
            } else {
                $("#payKeep").prop('disabled', false);
                $("#payKeepWrapper").css('opacity', '1');
            }
        }

        $("input[name='cancel_reason']").change(function(){
            triggerFormLogic();
        });

        $("#submitCancelForm").click(function(e) {
            e.preventDefault();
            $(this).addClass('is-loading').prop('disabled', true);
            $(".close-modal").prop('disabled', true);
            $("#payKeep").prop('disabled', false);
            $("#cancelForm").submit();
        });
    });
</script>
{% endblock %}