{% extends '_base.html' %}
{% load static %}
{% load processes_tags %}
{% load accounts_tags %}
{% load humanize %}

{% block sidebar %}
    {% include 'sidebars/admin.html' %}
{% endblock sidebar %}

{% block navbar %}
    {% include 'navbars/admin.html' %}
{% endblock navbar %}

{% block title %}{{ step.name }} - درخواست {{ instance.code }}{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'assets/vendor/libs/bs-stepper/bs-stepper.css' %}">
<!-- Persian Date Picker CSS -->
<link rel="stylesheet" href="https://unpkg.com/persian-datepicker@latest/dist/css/persian-datepicker.min.css">
<style>
@media print {
  .no-print { display: none !important; }
}
</style>
{% endblock %}

{% block content %}
{% include '_toasts.html' %}
{% csrf_token %}
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <div class="col-12 mb-4">
      <div class="d-flex align-items-center justify-content-between mb-3 no-print">
        <div>
          <h4 class="mb-1">{{ step.name }}: {{ instance.process.name }}</h4>
          <small class="text-muted d-block">
            اشتراک آب: {{ instance.well.water_subscription_number|default:"-" }}
            | نماینده: {{ instance.representative.profile.national_code|default:"-" }}
          </small>
        </div>
        <div class="d-flex gap-2">
          <a href="{% url 'invoices:quote_print' instance.id %}" target="_blank" class="btn btn-outline-secondary">
            <i class="bx bx-printer"></i> پرینت
          </a>
          <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">بازگشت</a>
        </div>
      </div>

      <div class="bs-stepper wizard-vertical vertical mt-2 no-print">
        {% stepper_header instance step %}
        <div class="bs-stepper-content">
      
          <form id="formAddPayment" enctype="multipart/form-data" onsubmit="return false;">
            {% csrf_token %}
            <div class="content active dstepper-block">
              <div class="content-header mb-3">
                <h6 class="mb-0">{{ step.name }}</h6>
                <small>ثبت فیش‌ها/چک‌های واریزی برای پیش‌فاکتور</small>
              </div>
              
              <div class="row g-3">
                {% if can_manage_payments %}
                <div class="col-12 col-lg-5">
                  <div class="card h-100 border">
                    <div class="card-header">
                      <h5 class="card-title mb-0">ثبت فیش/چک جدید</h5>
                    </div>
                    <div class="card-body">
                      <div class="mb-3">
                        <label class="form-label">مبلغ (تومان)</label>
                        <input type="number" min="1" class="form-control" name="amount" id="id_amount" required>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">تاریخ پرداخت</label>
                        <input type="text" class="form-control" id="id_payment_date" name="payment_date" placeholder="انتخاب تاریخ" readonly required>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">روش پرداخت</label>
                        <select class="form-select" name="payment_method" id="id_payment_method" required>
                          <option value="bank_transfer">انتقال بانکی</option>
                          <option value="card">کارت بانکی</option>
                          <option value="cash">نقدی</option>
                          <option value="check">چک</option>
                          <option value="other">سایر</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">شماره مرجع/چک</label>
                        <input type="text" class="form-control" name="reference_number" id="id_reference_number" placeholder="..." required>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">تصویر فیش/چک</label>
                        <input type="file" class="form-control" name="receipt_image" id="id_receipt_image" accept="image/*" required>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">توضیحات</label>
                        <textarea class="form-control" rows="2" name="notes" id="id_notes"></textarea>
                      </div>
                      <div class="d-flex justify-content-end">
                        <button type="button" id="btnAddPayment" class="btn btn-primary">افزودن فیش/چک</button>
                      </div>
                    </div>
                  </div>
                </div>
                {% endif %}
                <div class="col-12 {% if can_manage_payments %}col-lg-7{% else %}col-lg-12{% endif %}">
                  <div class="card mb-3 border">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">وضعیت پیش‌فاکتور</h5>
                    </div>
                    <div class="card-body">
                      <div class="row g-3">
                        <div class="col-6">
                          <div class="border rounded p-3">
                            <div class="small text-muted">مبلغ نهایی پیش‌فاکتور</div>
                            <div class="h5 mt-1">{{ totals.final_amount|floatformat:0|intcomma:False }} تومان</div>
                          </div>
                        </div>
                        <div class="col-6">
                          <div class="border rounded p-3">
                            <div class="small text-muted">مبلغ پرداخت‌شده</div>
                            <div class="h5 mt-1 text-success">{{ totals.paid_amount|floatformat:0|intcomma:False }} تومان</div>
                          </div>
                        </div>
                        <div class="col-6">
                          <div class="border rounded p-3">
                            <div class="small text-muted">مانده</div>
                            <div class="h5 mt-1 {% if totals.is_fully_paid %}text-success{% else %}text-danger{% endif %}">{{ totals.remaining_amount|floatformat:0|intcomma:False }} تومان</div>
                          </div>
                        </div>
                        <div class="col-6 d-flex align-items-center">
                          {% if totals.is_fully_paid %}
                            <span class="badge bg-success">تسویه کامل</span>
                          {% else %}
                            <span class="badge bg-warning text-dark">باقی‌مانده دارد</span>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card border">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <div>
                        <h5 class="card-title mb-0">فیش‌ها/چک‌های ثبت شده</h5>
                      </div>
                    </div>
                    <div class="table-responsive">
                      <table class="table table-striped mb-0">
                        <thead>
                          <tr>
                            <th>مبلغ</th>
                            <th>تاریخ</th>
                            <th>روش</th>
                            <th>شماره مرجع/چک</th>
                            <th>عملیات</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in payments %}
                          <tr>
                            <td>{{ p.amount|floatformat:0|intcomma:False }} تومان</td>
                            <td>{{ p.payment_date|date:'Y/m/d' }}</td>
                            <td>{{ p.get_payment_method_display }}</td>
                            <td>{{ p.reference_number|default:'-' }}</td>
                            <td>
                              <div class="btn-group">
                                {% if p.receipt_image %}
                                <a href="{{ p.receipt_image.url }}" target="_blank" class="btn btn-sm btn-outline-secondary" title="مشاهده" aria-label="مشاهده">
                                  <i class="bx bx-show"></i>
                                </a>
                                {% endif %}
                                {% if can_manage_payments %}
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="openDeleteModal('{{ p.id }}')" title="حذف" aria-label="حذف">
                                  <i class="bx bx-trash"></i>
                                </button>
                                {% endif %}
                              </div>
                            </td>
                          </tr>
                          {% empty %}
                          <tr>
                            <td colspan="6" class="text-center text-muted">تا کنون فیش/چکی ثبت نشده است</td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                {% if approver_statuses %}
                  <div class="card border mt-2">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h6 class="mb-0">وضعیت تاییدها</h6>
                      {% if can_approve_reject %}
                      <div class="d-flex gap-2">
                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#approvePaymentsModal2" {% if step_instance.status == 'completed' %}disabled{% endif %}>تایید</button>
                        <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#rejectPaymentsModal">رد</button>
                      </div>
                      {% endif %}
                    </div>
                    <div class="card-body py-3">
                      <div class="row g-2">
                        {% for st in approver_statuses %}
                        <div class="col-12 col-md-6 col-lg-4">
                          <div class="d-flex flex-column border rounded px-2 py-1">
                            <div class="d-flex align-items-center gap-2">
                              <span class="badge bg-light text-dark">{{ st.role.name }}</span>
                              {% if st.status == 'approved' %}
                                <span class="badge bg-success">تایید شد</span>
                              {% elif st.status == 'rejected' %}
                                <span class="badge bg-danger">رد شد</span>
                              {% else %}
                                <span class="badge bg-warning text-dark">در انتظار</span>
                              {% endif %}
                            </div>
                            {% if st.status == 'rejected' and st.reason %}
                              <div class="mt-1 small text-danger">علت: {{ st.reason }}</div>
                            {% endif %}
                          </div>
                        </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                {% endif %}

                <div class="col-12 d-flex justify-content-between mt-3">
                  {% if previous_step %}
                    <a href="{% url 'processes:step_detail' instance.id previous_step.id %}" class="btn btn-label-secondary">
                      <i class="bx bx-chevron-right bx-sm me-sm-2"></i>
                      قبلی
                    </a>
                  {% else %}
                    <span></span>
                  {% endif %}
                  {% if step_instance.status == 'completed' %}
                    {% if next_step %}
                      <a href="{% url 'processes:step_detail' instance.id next_step.id %}" class="btn btn-primary">
                        <span class="align-middle d-sm-inline-block d-none me-sm-1">بعدی</span>
                        <i class="bx bx-chevron-left bx-sm me-sm-n2"></i>
                      </a>
                    {% else %}
                      <a href="{% url 'processes:request_list' %}" class="btn btn-success">اتمام</a>
                    {% endif %}
                  {% endif %}
                </div>
              </div>
            </div>
          </form>
          
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePaymentModal" tabindex="-1" aria-labelledby="deletePaymentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deletePaymentModalLabel">تایید حذف فیش</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        آیا از حذف این فیش مطمئن هستید؟ این عمل قابل بازگشت نیست.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
        <button type="button" class="btn btn-danger" onclick="confirmDeletePayment()" data-bs-dismiss="modal">حذف</button>
      </div>
    </div>
  </div>
</div>
<!-- Removed legacy approvePaymentsModal; using approvePaymentsModal2 with form POST -->
<!-- Approve Modal 2 (direct approve button in header) -->
<div class="modal fade" id="approvePaymentsModal2" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="approve">
        <div class="modal-header">
          <h5 class="modal-title">تایید پرداخت‌ها</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if not totals.is_fully_paid %}
            <div class="alert alert-warning" role="alert">
              مبلغی از پیش‌فاکتور هنوز پرداخت نشده است.
              <div class="mt-1">مانده: <strong>{{ totals.remaining_amount|floatformat:0|intcomma:False }} تومان</strong></div>
            </div>
            آیا مطمئن هستید که می‌خواهید مرحله را تایید کنید؟
          {% else %}
            آیا از تایید این مرحله اطمینان دارید؟
          {% endif %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">انصراف</button>
          <button type="submit" class="btn btn-success">تایید</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- Reject Modal for payments step -->
<div class="modal fade" id="rejectPaymentsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="reject">
        <div class="modal-header">
          <h5 class="modal-title">رد مرحله پرداخت‌ها</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label">علت رد</label>
            <textarea class="form-control" name="reject_reason" rows="3" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">انصراف</button>
          <button type="submit" class="btn btn-danger">ثبت رد</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script>
  // Removed legacy isFullyPaid-driven approve flow; approval now via modal submit
  function buildFormData(form) {
    const fd = new FormData(form);
    fd.append('csrfmiddlewaretoken', document.querySelector('input[name=csrfmiddlewaretoken]').value);
    return fd;
  }
  const btnAddPayment = document.getElementById('btnAddPayment');
  if (btnAddPayment) btnAddPayment.addEventListener('click', function() {
    // Front-end validation
    const amount = document.getElementById('id_amount').value.trim();
    const payDate = document.getElementById('id_payment_date').value.trim();
    const method = document.getElementById('id_payment_method').value.trim();
    const ref = document.getElementById('id_reference_number').value.trim();
    const img = document.getElementById('id_receipt_image').files[0];
    const notes = document.getElementById('id_notes').value.trim();
    if (!amount || !payDate || !method || !ref || !img) {
      showToast('همه فیلدها الزامی است', 'danger');
      return;
    }
    const form = document.getElementById('formAddPayment');
    const fd = buildFormData(form);
    fetch('{% url "invoices:add_quote_payment" instance.id step.id %}', {
      method: 'POST',
      body: fd
    }).then(r => r.json()).then(resp => {
      if (resp.success) {
        showToast(resp.message || 'فیش با موفقیت ثبت شد', 'success');
        if (resp.redirect) {
          setTimeout(() => { window.location.href = resp.redirect; }, 700);
        }
      } else {
        showToast(resp.message + ':' + resp.error || 'خطا در ثبت فیش', 'danger');
      }
    }).catch(() => showToast('خطا در ارتباط با سرور', 'danger'));
  });

  let deleteTargetId = null;
  function openDeleteModal(id) {
    deleteTargetId = id;
    const modal = new bootstrap.Modal(document.getElementById('deletePaymentModal'));
    modal.show();
  }
  function confirmDeletePayment() {
    if (!deleteTargetId) return;
    const fd = new FormData();
    fd.append('csrfmiddlewaretoken', document.querySelector('input[name=csrfmiddlewaretoken]').value);
    fetch(`{% url "invoices:delete_quote_payment" instance.id step.id 0 %}`.replace('/0/', `/${deleteTargetId}/`), {
      method: 'POST',
      body: fd
    }).then(r => r.json()).then(resp => {
      if (resp.success) {
        showToast(resp.message || 'فیش با موفقیت حذف شد', 'success');
        if (resp.redirect) {
          setTimeout(() => { window.location.href = resp.redirect; }, 700);
        }
      } else {
        showToast(resp.message || resp.error || 'خطا در حذف فیش', 'danger');
      }
    }).catch(() => showToast('خطا در ارتباط با سرور', 'danger'));
  }

  function editPayment(id) {
    // برای سادگی، همین فرم را استفاده نمی‌کنیم؛ می‌توانید مدال ویرایش اضافه کنید
    alert('ویرایش فیش را بعدا با مدال تکمیل می‌کنیم. فعلا حذف و افزودن مجدد انجام دهید.');
  }

  // Legacy approve JS removed; approval handled by modal forms in header
</script>

<!-- Persian Date Picker JS -->
<script src="https://unpkg.com/persian-date@latest/dist/persian-date.min.js"></script>
<script src="https://unpkg.com/persian-datepicker@latest/dist/js/persian-datepicker.min.js"></script>
<script>
  (function initPersianDatePicker() {
    if (window.$ && $.fn.persianDatepicker && $('#id_payment_date').length) {
      try {
        $('#id_payment_date').persianDatepicker({
          format: 'YYYY/MM/DD',
          initialValue: false,
          autoClose: true,
          persianDigit: false,
          observer: true,
          calendar: { persian: { locale: 'fa', leapYearMode: 'astronomical' } },
          onSelect: function(unix) {
            const gregorianDate = new Date(unix);
            const year = gregorianDate.getFullYear();
            const month = String(gregorianDate.getMonth() + 1).padStart(2, '0');
            const day = String(gregorianDate.getDate()).padStart(2, '0');
            const gregorianDateString = `${year}-${month}-${day}`;
            if (window.persianDate) {
              const persianDate = new window.persianDate(unix);
              const persianDateString = persianDate.format('YYYY/MM/DD');
              $('#id_payment_date').val(persianDateString);
            } else {
              $('#id_payment_date').val(gregorianDateString);
            }
            $('#id_payment_date').attr('data-gregorian', gregorianDateString);
          }
        });
      } catch (e) { console.error('Error initializing Persian Date Picker:', e); }
    }
  })();
</script>

{% endblock %}