{% load custom_tags %}
{% comment %}
   کارت پروفایل مشتری — ستون سمت راست صفحهٔ مشتری.
   تک‌منبع (DRY): هم customerBase.html و هم customerBaseNew.html این را include می‌کنند
   تا ساختار، استایل و اسکریپت ویرایش/شماره‌ها در همهٔ صفحات مشتری یکسان بماند.
   شناسه‌های موردنیاز جاوااسکریپت:
   #formcsEdit, #enEdit, #editCs, #cancelEdit, #del_customer, #showUserDT, #userDT
{% endcomment %}
<form action="{% url 'admin_panel:customerEdit' customer.id %}" id="formcsEdit" class="has-background-white brad5" method="post">
  {% csrf_token %}

  <div class="buttons m-0 level p-2 is-hidden-tablet">
    <p class="level-item">{{ customer.name_family }}</p>
    <span id="showUserDT" class="button level-item">مشاهده مشخصات</span>
  </div>

  <div id="userDT" class="is-hidden-mobile">

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">نام ونام خانوادگی</label>
      <div class="control">
        <input required disabled value="{{ customer.name_family }}" name="an_name" class="input an_name" type="text" placeholder="نام نام خانوادگی">
      </div>
    </div>

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">آدرس</label>
      <div class="control">
        <input disabled name="an_address" value="{{ customer.address }}" class="input an_address" type="text" placeholder="آدرس کامل">
      </div>
    </div>

    {% include "./_customer_phones.html" with phones_editable=1 %}

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">تاریخ نصب</label>
      <div class="control">
        <input disabled name="installDate" value="{{ customer.installDate | toJalali }}" id="persianDateP" class="input ss02 installDate" type="text" placeholder="مثل: 1400/06/01">
      </div>
    </div>

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">کدشناسایی</label>
      <div class="control">
        <input disabled value="{{ customer.idCode }}" name="idnCode" class="input idnCode ss02" type="text" placeholder="">
      </div>
    </div>

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">توضیحات</label>
      <div class="control">
        <textarea disabled name="notes" class="textarea ss02 an_notes" rows="4" placeholder="یادداشت آزاد">{{ customer.notes }}</textarea>
      </div>
    </div>

    <div class="field column is-12-desktop is-12-mobile m-0">
      <label class="label">لغو بازدید</label>
      <div class="control">
        <select name="laghv_bazdid" style="width: 100%" class="select" id="LaghvBazdid">
            <option value="false" {% if not customer.laghv_bazdid %}selected{% endif %}>خیر</option>
            <option value="true" {% if customer.laghv_bazdid %}selected{% endif %}>بله</option>
        </select>
      </div>
    </div>

    <div class="field column is-12-desktop is-12-mobile m-0">
      {% if perms.admin_panel.DelCustomer %}
      <span class="button is-danger" id="del_customer">حذف مشتری</span>
      {% endif %}
      <span class="button is-success" id="enEdit">ویرایش</span>
      <span class="button is-light is-hidden" id="cancelEdit">انصراف</span>
      <input class="button is-danger is-hidden" id="editCs" value="ثبت" type="submit">
    </div>

  </div>
</form>

<script>
  // اسکریپت مشترک کارت پروفایل مشتری: ویرایش/انصراف، افزودن و حذف شماره،
  // باز/بستن در موبایل و حذف مشتری. (یک‌بار bind می‌شود.)
  (function () {
    if (window.__customerInfoCardInit) { return; }
    window.__customerInfoCardInit = true;

    // --- ورود به حالت ویرایش ---
    $(document).on('click', '#enEdit', function () {
      $('#formcsEdit').find('input, textarea, select').prop('disabled', false);
      $('#formcsEdit').find('.remove-phone-btn, .add-phone-btn').prop('disabled', false);
      $('#enEdit').addClass('is-hidden');
      $('#cancelEdit').removeClass('is-hidden');
      $('#editCs').removeClass('is-hidden');
    });

    // --- انصراف: بارگذاری مجدد؛ تغییرات ذخیره‌نشده دور ریخته می‌شود ---
    $(document).on('click', '#cancelEdit', function () {
      window.location.reload();
    });

    // --- افزودن شماره (در حالت ویرایش) ---
    $(document).on('click', '.add-phone-btn', function () {
      var phoneRow = `
      <div class="field has-addons mt-2 ss02">
        <div class="control" style="width: 30%;">
          <input name="phone_titles" class="input" type="text" placeholder="عنوان">
        </div>
        <div class="control is-expanded">
          <input name="phones" class="input an_phone" type="text" placeholder="شمارهٔ تماس جدید">
        </div>
        <div class="control">
          <button type="button" class="button is-danger remove-phone-btn">-</button>
        </div>
      </div>`;
      $('#dynamic-phones-edit').append(phoneRow);
    });

    // --- حذف شماره (حداقل یک شماره باید بماند) ---
    $(document).on('click', '.remove-phone-btn', function () {
      if ($('#dynamic-phones-edit .field.has-addons').length > 1) {
        $(this).closest('.field.has-addons').remove();
      } else {
        window.alert('حداقل یک شمارهٔ تماس باید وجود داشته باشد.');
      }
    });

    // --- باز/بستن مشخصات در موبایل ---
    $(document).on('click', '#showUserDT', function () {
      var $btn = $(this);
      if ($btn.text().trim() === 'مشاهده مشخصات') {
        $btn.text('مخفی کردن');
        $('#userDT').removeClass('is-hidden-mobile');
      } else {
        $btn.text('مشاهده مشخصات');
        $('#userDT').addClass('is-hidden-mobile');
      }
    });

    // --- حذف مشتری ---
    $(document).on('click', '#del_customer', function () {
      if (window.confirm('با حذف مشتری، تمام سوابق، فاکتورها و اطلاعات از سیستم حذف می‌شود، مطمئن هستید؟')) {
        window.location.href = '/panel/customer/{{ customer.id }}/del';
      }
    });
  })();
</script>