shafafiyat/installations/templates/installations/installation_report_step.html

{% extends '_base.html' %}
{% load static %}
{% load processes_tags %}
{% load common_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>
  /* Red styling for removal checkboxes when checked */
  .removal-checkbox:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
  }
  
  .removal-checkbox:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
  }
</style>
{% endblock %}

{% block content %}
{% include '_toasts.html' %}
<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.well.water_subscription_number|default:"-" }}
            | نماینده: {{ instance.representative.profile.national_code|default:"-" }}
          </small>
        </div>
        <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">بازگشت</a>
      </div>

      <div class="bs-stepper wizard-vertical vertical mt-2">
        {% stepper_header instance step %}
        
        <div class="bs-stepper-content">
          {% if report and not edit_mode %}
          <div class="card mb-3 border">
            <div class="card-header d-flex justify-content-between align-items-center">
              <div class="d-flex gap-2">
                {% if request.user|is_installer %}
                  <a href="?edit=1" class="btn btn-primary">ویرایش گزارش نصب</a>
                {% else %}
                  <button type="button" class="btn btn-primary" disabled>ویرایش گزارش نصب</button>
                {% endif %}
              </div>
            </div>
            <div class="card-body">
              {% if step_instance and step_instance.status == 'rejected' and step_instance.get_latest_rejection %}
              <div class="alert alert-danger d-flex align-items-start" role="alert">
                <i class="bx bx-error-circle me-2"></i>
                <div>
                  <div><strong>این گزارش رد شده است.</strong></div>
                  <div class="mt-1 small">علت رد: {{ step_instance.get_latest_rejection.reason }}</div>
                </div>
              </div>
              {% endif %}
              <div class="row">
                <div class="col-md-6">
                  <p class="text-nowrap mb-2"><i class="bx bx-calendar-event bx-sm me-2"></i>تاریخ مراجعه: {{ report.visited_date|to_jalali|default:'-' }}</p>
                  <p class="text-nowrap mb-2"><i class="bx bx-purchase-tag bx-sm me-2"></i>سریال جدید: {{ report.new_water_meter_serial|default:'-' }}</p>
                  <p class="text-nowrap mb-2"><i class="bx bx-lock-alt bx-sm me-2"></i>شماره پلمپ: {{ report.seal_number|default:'-' }}</p>
                </div>
                <div class="col-md-6">
                  <p class="text-nowrap mb-2"><i class="bx bx-help-circle bx-sm me-2"></i>کنتور مشکوک: {{ report.is_meter_suspicious|yesno:'بله,خیر' }}</p>
                  <p class="text-nowrap mb-2"><i class="bx bx-map bx-sm me-2"></i>UTM X: {{ report.utm_x|default:'-' }}</p>
                  <p class="text-nowrap mb-2"><i class="bx bx-map-pin bx-sm me-2"></i>UTM Y: {{ report.utm_y|default:'-' }}</p>
                </div>
              </div>
              {% if report.description %}
              <div class="mt-2">
                <p class="mb-0"><i class="bx bx-text bx-sm me-2"></i><strong>توضیحات:</strong></p>
                <div class="text-muted">{{ report.description|default:'-' }}</div>
              </div>
              {% endif %}
              <hr>
              {% if request.user|is_manager or request.user|is_admin %}
              <hr>
              {% endif %}
              <h6>عکس‌ها</h6>
              <div class="row">
                {% for p in report.photos.all %}
                  <div class="col-6 col-md-3 mb-2"><img class="img-fluid rounded border" src="{{ p.image.url }}" alt="photo"></div>
                {% empty %}
                  <div class="text-muted">بدون عکس</div>
                {% endfor %}
              </div>
              <hr>
              <div class="row g-3">
                <div class="col-12">
                  <h6 class="mb-2">اقلام</h6>
                  <div class="table-responsive">
                    <table class="table table-sm align-middle">
                      <thead>
                        <tr>
                          <th style="width:40px">نوع</th>
                          <th>آیتم</th>
                          <th>تعداد</th>
                          <th>قیمت واحد</th>
                          <th>قیمت کل</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for ch in report.item_changes.all %}
                        <tr>
                          <td>{% if ch.change_type == 'add' %}<span class="text-success"><i class="bx bx-plus"></i></span>{% else %}<span class="text-danger"><i class="bx bx-minus"></i></span>{% endif %}</td>
                          <td>{{ ch.item.name }}</td>
                          <td>{{ ch.quantity }}</td>
                          <td>{% if ch.unit_price %}{{ ch.unit_price|floatformat:0|intcomma:False }}{% else %}-{% endif %}</td>  
                          <td>
                            {% if ch.total_price %}
                              {{ ch.total_price|floatformat:0|intcomma:False }}
                            {% elif ch.unit_price %}
                              {{ ch.unit_price|floatformat:0|intcomma:False }}
                            {% else %}-{% endif %}
                          </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="5" class="text-center text-muted">تغییری ثبت نشده است</td></tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </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 user_can_approve %}
              <div class="d-flex gap-2">
                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#approveModal" {% if step_instance and step_instance.status == 'completed' %}disabled{% endif %}>تایید</button>
                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#rejectModal">رد</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 %}
          <!-- Persistent nav in edit mode (outside cards) -->
          <div class="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">قبلی</a>
            {% else %}
              <span></span>
            {% endif %}
            {% if next_step %}
              <a href="{% url 'processes:step_detail' instance.id next_step.id %}" class="btn btn-primary">بعدی</a>
            {% endif %}
          </div>
          {% else %}
          {% if not request.user|is_installer %}
          <div class="alert alert-warning">شما مجوز ثبت/ویرایش گزارش نصب را ندارید. اطلاعات به صورت فقط خواندنی نمایش داده می‌شود.</div>
          {% endif %}
          <form method="post" enctype="multipart/form-data" id="installation-report-form">
            {% csrf_token %}
            <div class="mb-3">
              <div class="">
                <div class="row g-3">
                  <div class="col-md-3">
                    <label class="form-label">تاریخ مراجعه</label>
                    <input type="text" id="id_visited_date_display" class="form-control" placeholder="انتخاب تاریخ" {% if not request.user|is_installer %}disabled{% endif %} readonly required value="{% if report and edit_mode and report.visited_date %}{{ report.visited_date|date:'Y/m/d' }}{% endif %}">
                    <input type="hidden" id="id_visited_date" name="visited_date" value="{% if report and edit_mode and report.visited_date %}{{ report.visited_date|date:'Y-m-d' }}{% endif %}">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">سریال کنتور جدید</label>
                    <input type="text" class="form-control" name="new_water_meter_serial" value="{% if report and edit_mode %}{{ report.new_water_meter_serial|default_if_none:'' }}{% endif %}" {% if not request.user|is_installer %}readonly{% endif %}>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">شماره پلمپ</label>
                    <input type="text" class="form-control" name="seal_number" value="{% if report and edit_mode %}{{ report.seal_number|default_if_none:'' }}{% endif %}" {% if not request.user|is_installer %}readonly{% endif %}>
                  </div>
                  <div class="col-md-3 d-flex align-items-end">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="is_meter_suspicious" id="id_is_meter_suspicious" {% if not request.user|is_installer %}disabled{% endif %} {% if report and edit_mode and report.is_meter_suspicious %}checked{% endif %}>
                      <label class="form-check-label" for="id_is_meter_suspicious">کنتور مشکوک است</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">UTM X</label>
                    <input type="number" step="0.000001" class="form-control" name="utm_x" value="{% if report and edit_mode and report.utm_x %}{{ report.utm_x }}{% elif instance.well.utm_x %}{{ instance.well.utm_x }}{% endif %}" {% if not request.user|is_installer %}readonly{% endif %}>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">UTM Y</label>
                    <input type="number" step="0.000001" class="form-control" name="utm_y" value="{% if report and edit_mode and report.utm_y %}{{ report.utm_y }}{% elif instance.well.utm_y %}{{ instance.well.utm_y }}{% endif %}" {% if not request.user|is_installer %}readonly{% endif %}>
                  </div>
                </div>
                <div class="my-3">
                  <label class="form-label">توضیحات (اختیاری)</label>
                  <textarea class="form-control" rows="3" name="description" {% if not request.user|is_installer %}readonly{% endif %}>{% if report and edit_mode %}{{ report.description|default_if_none:'' }}{% endif %}</textarea>
                </div>
                <div class="mb-3">
                  <div class="d-flex justify-content-between align-items-center">
                    <label class="form-label mb-0">عکس‌ها</label>
                    {% if request.user|is_installer %}
                      <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddPhoto"><i class="bx bx-plus"></i> افزودن عکس</button>
                    {% endif %}
                  </div>
                  {% if report %}
                  <div class="row mt-2">
                    {% for p in report.photos.all %}
                      <div class="col-6 col-md-3 mb-2" id="existing-photo-{{ p.id }}">
                        <div class="position-relative border rounded p-1">
                          <img class="img-fluid rounded" src="{{ p.image.url }}" alt="photo">
                          {% if request.user|is_installer %}
                            <button type="button" class="btn btn-sm btn-danger position-absolute" style="top:6px; left:6px;" onclick="markDeletePhoto('{{ p.id }}')" title="حذف/برگردان"><i class="bx bx-trash"></i></button>
                          {% endif %}
                          <input type="hidden" name="del_photo_{{ p.id }}" id="del-photo-{{ p.id }}" value="0">
                        </div>
                      </div>
                    {% empty %}
                    {% endfor %}
                  </div>
                  {% endif %}
                  <div class="row mt-2" id="photosPreview"></div>
                  <div id="photoInputs" class="d-none"></div>
                </div>
              </div>
            </div>

            <div class="card border">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">اقلام</h5>
              </div>
              <div class="card-body">
                <div class="row g-3">
                  <div class="col-12 mb-4">
                    <h6 class="mb-2">اقلام انتخاب‌شده قبلی <small class="text-muted">(برای حذف در نصب تیک بزنید)</small></h6>
                    <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 qi in quote_items %}
                          <tr>
                            <td>
                              <input type="checkbox" class="form-check-input removal-checkbox" name="rem_{{ qi.item.id }}_type" value="remove" title="حذف در نصب" {% if removed_qty|get_item:qi.item.id %}checked{% endif %}>
                              <input type="hidden" name="rem_{{ qi.item.id }}_qty" value="{% if removed_qty|get_item:qi.item.id %}{{ removed_qty|get_item:qi.item.id }}{% else %}{{ qi.quantity }}{% endif %}">
                            </td>
                            <td>
                              <div class="d-flex flex-column">
                                <span class="fw-semibold">{{ qi.item.name }}</span>
                                {% if qi.item.description %}<small class="text-muted">{{ qi.item.description }}</small>{% endif %}
                              </div>
                            </td>
                            <td>{{ qi.unit_price|floatformat:0|intcomma:False }} تومان</td>
                            <td>
                              <span class="text-muted">{% if removed_qty|get_item:qi.item.id %}{{ removed_qty|get_item:qi.item.id }}{% else %}{{ qi.quantity }}{% endif %}</span>
                            </td>
                          </tr>
                          {% empty %}
                          <tr><td colspan="4" class="text-center text-muted">اقلامی ثبت نشده است</td></tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <hr>
                  <div class="col-12">
                    <h6 class="mb-2">افزودن اقلام جدید</h6>
                    <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 it in all_items %}
                          <tr>
                            <td>
                              {% with add_entry=added_map|get_item:it.id %}
                              <input type="checkbox" name="add_{{ it.id }}_type" value="add" class="form-check-input" {% if add_entry %}checked{% endif %}>
                              <input type="hidden" name="add_{{ it.id }}_price" value="{{ it.unit_price }}">
                              {% endwith %}
                            </td>
                            <td>
                              <div class="d-flex flex-column">
                                <span class="fw-semibold">{{ it.name }}</span>
                                {% if it.description %}<small class="text-muted">{{ it.description }}</small>{% endif %}
                              </div>
                            </td>
                            <td>{{ it.unit_price|floatformat:0|intcomma:False }} تومان</td>
                            <td>
                              {% with add_entry=added_map|get_item:it.id %}
                              <input class="form-control form-control-sm" type="number" min="1" name="add_{{ it.id }}_qty" value="{% if add_entry %}{{ add_entry.qty }}{% endif %}">
                              {% endwith %}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              
            </div>
          </form>

          <div class="mt-3 d-flex justify-content-between">
            {% if previous_step %}
              <a href="{% url 'processes:step_detail' instance.id previous_step.id %}" class="btn btn-label-secondary">قبلی</a>
            {% else %}
              <span></span>
            {% endif %}
            <div class="d-flex gap-2">
              {% if request.user|is_installer %}
                <button type="submit" class="btn btn-primary" form="installation-report-form">ثبت گزارش</button>
              {% else %}
                <button type="button" class="btn btn-primary" disabled>ثبت گزارش</button>
              {% endif %}
              {% if next_step %}
                <a href="{% url 'processes:step_detail' instance.id next_step.id %}" class="btn btn-success">بعدی</a>
              {% endif %}
            </div>
          </div>
          {% endif %}

        </div>
      </div>
    </div>
  </div>
</div>


<!-- Approve Modal  -->
<div class="modal fade" id="approveModal" 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">
          آیا از تایید این گزارش اطمینان دارید؟
        </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 -->
<div class="modal fade" id="rejectModal" 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 %}
<!-- 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>
  // Persian datepicker for visited_date (exact pattern like sample: display + altField)
  (function(){
    function convertPersianToEnglishNumbers(str) {
      const persianNumbers = '۰۱۲۳۴۵۶۷۸۹';
      const englishNumbers = '0123456789';
      return String(str || '').split('').map(function(char){
        const index = persianNumbers.indexOf(char);
        return index !== -1 ? englishNumbers[index] : char;
      }).join('');
    }

    if (window.$ && $.fn.persianDatepicker && $('#id_visited_date_display').length) {
      try {
        var $display = $('#id_visited_date_display');
        var $hidden = $('#id_visited_date');

        // Prefill from hidden Gregorian to visible Jalali
        var initialGregorian = $hidden.val();
        if (initialGregorian) {
          try {
            var initialJalali = new window.persianDate(new Date(initialGregorian)).format('YYYY/MM/DD');
            $display.val(initialJalali);
          } catch (e) {}
        }

        // Initialize datepicker with altField exactly like the sample
        var picker = $display.persianDatepicker({
          calendarType: 'persian',
          altField: '#id_visited_date',
          format: 'YYYY/MM/DD',
          altFormat: 'YYYY-MM-DD',
          observer: true,
          autoClose: true,
          initialValue: false,
          calendar:{ persian: { leapYearMode: 'astronomical' } },
          onSelect: function (unixDate) {
            var g = new window.persianDate(unixDate).toCalendar('gregorian').format('YYYY-MM-DD');
            g = convertPersianToEnglishNumbers(g);
            $hidden.val(g);
          }
        });
      } catch (e) { console.error('Error initializing Persian Date Picker:', e); }
    }
  })();

  // Require date and show success toast on submit (persist across redirect)
  (function(){
    const form = document.querySelector('form[enctype]') || document.querySelector('form');
    if (!form) return;
    form.addEventListener('submit', function(ev){
      const display = document.getElementById('id_visited_date_display');
      const hidden = document.getElementById('id_visited_date');
      if (!display || !hidden) return;
      if (!display.value || !hidden.value) {
        ev.preventDefault(); ev.stopPropagation();
        showToast('تاریخ مراجعه را انتخاب کنید', 'danger');
        display.scrollIntoView({behavior:'smooth', block:'center'});
        return false;
      }
      try { sessionStorage.setItem('install_report_saved', '1'); } catch(_) {}
    }, false);
    // on load, if saved flag exists, show toast
    try {
      if (sessionStorage.getItem('install_report_saved') === '1') {
        sessionStorage.removeItem('install_report_saved');
        showToast('گزارش نصب با موفقیت ثبت شد', 'success');
      }
    } catch(_) {}
  })();

  // Dynamic photo add/remove
  (function(){
    const photoInputs = document.getElementById('photoInputs');
    const photosPreview = document.getElementById('photosPreview');
    const btnAddPhoto = document.getElementById('btnAddPhoto');
    let photoCounter = 0;
    function createPhotoInput() {
      photoCounter += 1;
      const input = document.createElement('input');
      input.type = 'file';
      input.name = 'photos';
      input.accept = 'image/*';
      input.className = 'd-none';
      input.dataset.key = String(photoCounter);
      input.addEventListener('change', function(){
        const file = input.files && input.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(){
          const col = document.createElement('div');
          col.className = 'col-6 col-md-3 mb-2';
          col.id = 'photo-preview-' + input.dataset.key;
          col.innerHTML = `
            <div class="position-relative border rounded p-1">
              <img src="${reader.result}" class="img-fluid rounded" alt="photo">
              <button type="button" class="btn btn-sm btn-danger position-absolute" style="top:6px; left:6px;" data-key="${input.dataset.key}"><i class=\"bx bx-trash\"></i></button>
            </div>
          `;
          photosPreview.appendChild(col);
          col.querySelector('button').addEventListener('click', function(ev){
            const key = ev.currentTarget.getAttribute('data-key');
            const preview = document.getElementById('photo-preview-' + key);
            if (preview) preview.remove();
            const inp = photoInputs.querySelector(`input[data-key="${key}"]`);
            if (inp) inp.remove();
          });
        };
        reader.readAsDataURL(file);
      });
      photoInputs.appendChild(input);
      input.click();
    }
    if (btnAddPhoto) btnAddPhoto.addEventListener('click', createPhotoInput);
  })();

  // Mark delete for existing photos
  function markDeletePhoto(id){
    const hidden = document.getElementById('del-photo-' + id);
    const wrap = document.getElementById('existing-photo-' + id);
    if (hidden && wrap){
      // toggle behavior
      if (hidden.value === '1') {
        hidden.value = '0';
        wrap.style.opacity = '1';
        // update button title back to delete
        const btn = wrap.querySelector('button');
        if (btn) btn.title = 'حذف';
      } else {
        hidden.value = '1';
        wrap.style.opacity = '0.5';
        wrap.style.position = 'relative';
        // update button title to undo
        const btn = wrap.querySelector('button');
        if (btn) btn.title = 'انصراف از حذف';
      }
    }
  }
</script>
{% endblock %}