{% load common_tags %}

<!-- Modal for Instance Info -->
<div class="modal fade" id="{{ modal_id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">اطلاعات درخواست {{ instance.code }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row g-4">
          
          <!-- Well Information -->
          {% if well %}
          <div class="col-12">
            <div class="card border-0 bg-light">
              <div class="card-header bg-label-primary text-white py-2">
                <h6 class="mb-0">
                  <i class="bx bx-water me-2"></i>اطلاعات چاه
                </h6>
              </div>
              <div class="card-body pt-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-droplet text-primary me-2"></i>
                      <strong>شماره اشتراک آب:</strong>
                      <span class="ms-2">{{ well.water_subscription_number|default:"-" }}</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-bolt text-warning me-2"></i>
                      <strong>شماره اشتراک برق:</strong>
                      <span class="ms-2">{{ well.electricity_subscription_number|default:"-" }}</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-barcode text-info me-2"></i>
                      <strong>سریال کنتور:</strong>
                      <span class="ms-2">{{ well.water_meter_serial_number|default:"-" }}</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-barcode-reader text-secondary me-2"></i>
                      <strong>سریال قدیمی:</strong>
                      <span class="ms-2">{{ well.water_meter_old_serial_number|default:"-" }}</span>
                    </div>
                  </div>
                  {% if well.water_meter_manufacturer %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-factory text-success me-2"></i>
                      <strong>سازنده کنتور:</strong>
                      <span class="ms-2">{{ well.water_meter_manufacturer.name }}</span>
                    </div>
                  </div>
                  {% endif %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-tachometer text-danger me-2"></i>
                      <strong>قدرت چاه:</strong>
                      <span class="ms-2">{{ well.well_power|default:"-" }}</span>
                    </div>
                  </div>
                  {% if well.utm_x and well.utm_y %}
                  <div class="col-12">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-map text-info me-2"></i>
                      <strong>مختصات:</strong>
                      <span class="ms-2">X: {{ well.utm_x }}, Y: {{ well.utm_y }}</span>
                      {% if well.utm_zone %}<span class="text-muted ms-2">(Zone: {{ well.utm_zone }})</span>{% endif %}
                    </div>
                  </div>
                  {% endif %}
                  {% if well.county %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-map-pin text-warning me-2"></i>
                      <strong>شهرستان:</strong>
                      <span class="ms-2">{{ well.county }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if well.affairs %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-building text-primary me-2"></i>
                      <strong>امور:</strong>
                      <span class="ms-2">{{ well.affairs }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if well.reference_letter_number %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-file text-secondary me-2"></i>
                      <strong>شماره معرفی نامه:</strong>
                      <span class="ms-2">{{ well.reference_letter_number }}</span>
                      {% if well.reference_letter_date %}
                        <span class="text-muted ms-2">({{ well.reference_letter_date|to_jalali }})</span>
                      {% endif %}
                    </div>
                  </div>
                  {% endif %}
                  {% if well.representative_letter_file %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-file text-secondary me-2"></i>
                      <strong>فایل نامه نمایندگی:</strong>
                      <a href="{{ well.representative_letter_file.url }}" class="ms-2">دانلود</a>
                    </div>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          {% endif %}

          <!-- Representative Information -->
          {% if representative %}
          <div class="col-12">
            <div class="card border-0 bg-light">
              <div class="card-header bg-label-success text-white py-2">
                <h6 class="mb-0">
                  <i class="bx bx-user me-2"></i>اطلاعات نماینده
                </h6>
              </div>
              <div class="card-body pt-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-user-circle text-primary me-2"></i>
                      <strong>نام و نام خانوادگی:</strong>
                      <span class="ms-2">{{ representative.get_full_name|default:representative.username }}</span>
                    </div>
                  </div>
                  {% if representative.profile.national_code %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-id-card text-info me-2"></i>
                      <strong>کد ملی:</strong>
                      <span class="ms-2">{{ representative.profile.national_code }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.phone_number_1 %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-phone text-success me-2"></i>
                      <strong>تلفن اول:</strong>
                      <span class="ms-2">{{ representative.profile.phone_number_1 }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.phone_number_2 %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-phone text-success me-2"></i>
                      <strong>تلفن دوم:</strong>
                      <span class="ms-2">{{ representative.profile.phone_number_2 }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.bank_name %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-credit-card text-warning me-2"></i>
                      <strong>بانک:</strong>
                      <span class="ms-2">{{ representative.profile.get_bank_name_display }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.card_number %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-credit-card-alt text-secondary me-2"></i>
                      <strong>شماره کارت:</strong>
                      <span class="ms-2">{{ representative.profile.card_number }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.account_number %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-wallet text-info me-2"></i>
                      <strong>شماره حساب:</strong>
                      <span class="ms-2">{{ representative.profile.account_number }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if representative.profile.address %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-start mb-2">
                      <i class="bx bx-map text-danger me-2 mt-1"></i>
                      <div>
                        <strong>آدرس:</strong>
                        <p class="mb-0 ms-2 text-wrap">{{ representative.profile.address }}</p>
                      </div>
                    </div>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          {% endif %}

          <!-- Process Information -->
          <div class="col-12">
            <div class="card border-0 bg-light">
              <div class="card-header bg-label-info text-white py-2">
                <h6 class="mb-0">
                  <i class="bx bx-cog me-2"></i>اطلاعات فرآیند
                </h6>
              </div>
              <div class="card-body pt-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-list-ul text-primary me-2"></i>
                      <strong>نوع فرآیند:</strong>
                      <span class="ms-2">{{ instance.process.name }}</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-calendar text-success me-2"></i>
                      <strong>تاریخ ایجاد:</strong>
                      <span class="ms-2">{{ instance.jcreated }}</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-check-circle text-info me-2"></i>
                      <strong>وضعیت:</strong>
                      <span class="ms-2 badge bg-label-primary">{{ instance.get_status_display }}</span>
                    </div>
                  </div>
                  {% if instance.current_step %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                      <i class="bx bx-step-forward text-primary me-2"></i>
                      <strong>مرحله فعلی:</strong>
                      <span class="ms-2 badge bg-label-success">{{ instance.current_step.name }}</span>
                    </div>
                  </div>
                  {% endif %}
                  {% if instance.description %}
                  <div class="col-md-6">
                    <div class="d-flex align-items-start mb-2">
                      <i class="bx bx-note text-secondary me-2 mt-1"></i>
                      <div>
                        <strong>توضیحات:</strong>
                        <p class="mb-0 ms-2 text-wrap">{{ instance.description }}</p>
                      </div>
                    </div>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
      </div>
    </div>
  </div>
</div>
