{% extends '_base.html' %}
{% load static %}
{% load processes_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' %}">
{% endblock %}

{% block content %}
{% include '_toasts.html' %}

<!-- Instance Info Modal -->
{% instance_info_modal instance %}

<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">
        <div>
          <h4 class="mb-1">{{ step.name }}: {{ instance.process.name }}</h4>
          <small class="text-muted d-block">
            {% instance_info instance %}
          </small>
        </div>
        <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">
          <i class="bx bx-chevron-right bx-sm ms-sm-n2"></i>
            بازگشت
        </a>
      </div>

      <div class="bs-stepper wizard-vertical vertical mt-2">
        {% stepper_header instance step %}
        
        <div class="bs-stepper-content">
          <form>
            {% csrf_token %}
            <div class="content active dstepper-block">
              <div class="content-header mb-3">
                <h6 class="mb-0">{{ step.name }}</h6>
                <small>{{ step.description|default:' ' }}</small>
              </div>
              
              <div class="row g-3">
                {% if existing_quote %}
                <div class="col-12 mb-3">
                  <div class="alert alert-info">
                    <h6>پیش‌فاکتور موجود</h6>
                    <span class="mb-1">{{ existing_quote.name }} | </span>
                    <span class="mb-1">مبلغ کل (با احتساب مالیات): {{ existing_quote.final_amount|floatformat:0|intcomma:False }} ریال | </span>
                    <span class="mb-0">وضعیت: {{ existing_quote.get_status_display_with_color|safe }}</span>
                  </div>
                </div>
                {% endif %}
                
                <div class="col-12">
                  {% if is_broker or existing_quote %}
                  <div class="table-responsive">
                    <table class="table table-sm align-middle">
                      <thead>
                        <tr>
                          <th style="width:40px"></th>
                          <th>آیتم</th>
                          <th>قیمت واحد</th>
                          <th style="width:140px">تعداد</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for item in items %}
                        {% with selected_qty=existing_quote_items|get_item:item.id %}
                        <tr>
                          <td>
                            <input class="form-check-input quote-item-check" type="checkbox"
                                   data-item-id="{{ item.id }}"
                                   data-is-default="{% if item.is_default_in_quotes %}1{% else %}0{% endif %}"
                                   {% if selected_qty %}checked{% elif item.is_default_in_quotes %}checked{% endif %}
                                   {% if item.is_default_in_quotes or not is_broker %}disabled{% endif %}
                                   {% if item.is_default_in_quotes %}title="آیتم پیش‌فرض است و قابل حذف نیست"{% elif not is_broker %}title="فقط کارگزار مجاز به تغییر اقلام است"{% endif %}>
                          </td>
                          <td>
                            <div class="d-flex flex-column">
                              <span class="fw-semibold">{{ item.name }}
                                {% if item.is_default_in_quotes %}
                                <span class="badge bg-label-primary me-2">پیش‌فرض</span>
                              {% endif %}
                              </span>
                              {% if item.description %}<small class="text-muted">{{ item.description }}</small>{% endif %}
                            </div>
                          </td>
                          <td>{{ item.unit_price|floatformat:0|intcomma:False }} ریال</td>
                          <td>
                            <input type="number" class="form-control form-control-sm quote-item-qty" min="1"
                                   data-item-id="{{ item.id }}"
                                   value="{% if selected_qty %}{{ selected_qty }}{% else %}{{ item.default_quantity }}{% endif %}"
                                   {% if not is_broker %}disabled title="فقط کارگزار مجاز به تغییر تعداد است"{% endif %}>
                          </td>
                        </tr>
                        {% endwith %}
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% else %}
                  <div class="alert alert-warning mb-0">شما دسترسی به ثبت اقلام ندارید.</div>
                  {% endif %}
                </div>
                
                <div class="col-12 d-flex justify-content-between">
                  {% if previous_step %}
                    <a href="{% url 'processes:step_detail' instance.id previous_step.id %}" 
                       class="btn btn-label-secondary">
                      <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                      <span class="align-middle d-sm-inline-block d-none">قبلی</span>
                    </a>
                  {% else %}
                    <span></span>
                  {% endif %}
                  
                  
                  {% if is_broker %}
                    {% if step_instance.status == 'completed' %}
                      {% if next_step %}
                      <div class="d-flex justify-content-end mt-3">
                        <button type="button" class="btn btn-primary" id="btnCreateQuote">
                          {% if existing_quote %}بروزرسانی پیش‌فاکتور{% else %}ثبت پیش‌فاکتور{% endif %}
                          و بعدی
                          <i class="bx bx-chevron-left bx-sm me-sm-n2"></i>
                        </button>
                      </div>
                      {% else %}
                        <button class="btn btn-success" type="button">اتمام</button>
                      {% endif %}
                    {% else %}
                    <button type="button" class="btn btn-primary" id="btnCreateQuote">
                      {% if existing_quote %}بروزرسانی پیش‌فاکتور{% else %}ثبت پیش‌فاکتور{% endif %}
                      و بعدی
                      <i class="bx bx-chevron-left bx-sm me-sm-n2"></i>
                    </button>
                    {% endif %}
                  {% else %}
                    {% if next_step %}
                      <a href="{% url 'processes:step_detail' instance.id next_step.id %}" class="btn btn-primary">
                        مرحله بعد
                        <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>
{% endblock %}

{% block script %}
<script src="{% static 'assets/vendor/libs/bs-stepper/bs-stepper.js' %}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Quote creation
    const btnCreateQuote = document.getElementById('btnCreateQuote');
    if (btnCreateQuote) {
      btnCreateQuote.addEventListener('click', function() {
        const selections = [];
        document.querySelectorAll('.quote-item-check').forEach(chk => {
          if (chk.checked) {
            const id = chk.getAttribute('data-item-id');
            const isDefault = chk.getAttribute('data-is-default') === '1';
            const qtyInput = document.querySelector(`.quote-item-qty[data-item-id="${id}"]`);
            const qty = qtyInput ? parseInt(qtyInput.value || '1', 10) : 1;
            selections.push({ id, qty, isDefault });
          }
        });
        if (selections.length === 0) {
          showToast('حداقل یک آیتم را انتخاب کنید', 'danger');
          return;
        }
        const payload = new FormData();
        payload.append('csrfmiddlewaretoken', document.querySelector('input[name=csrfmiddlewaretoken]').value);
        payload.append('items', JSON.stringify(selections));
        
        btnCreateQuote.disabled = true;
        fetch('{% url "invoices:create_quote" instance.id step.id %}', {
          method: 'POST',
          body: payload
        }).then(r => r.json()).then(resp => {
          if (resp.success) {
            showToast('پیش‌فاکتور با موفقیت ثبت شد', 'success');
            if (resp.redirect) {
              window.location.href = resp.redirect;
            } else {
              setTimeout(() => { window.location.reload(); }, 800);
            }
          } else {
            showToast(resp.message || 'خطا در ثبت پیش‌فاکتور', 'danger');
            btnCreateQuote.disabled = false;
          }
        }).catch(() => {
          showToast('خطا در ارتباط با سرور', 'danger');
          btnCreateQuote.disabled = false;
        });
      });
    }
  });
</script>


{% endblock %}