{% extends "./base.html" %}
{% load custom_tags %}

{% block bodyPage %}

  <div class="">
    <div class="columns m-0">
        <div class="column is-12">
            <div class="buttons">
              {% if perms.admin_panel.AddCustomer %}
              <a href="#" id="addNewUser" class="button is-info is-active is-rounded mr-0">ایجاد مشتری جدید</a>
              {% endif %}
              <a href="#" id="openSearchBox" class="button is-info is-outlined  is-rounded mr-0">جستجو</a>
            </div>
            <a class="button is-danger is-info mb-3 {% if searchStatus %} {% else %} is-hidden {% endif %}" href="{% url 'admin_panel:customers'  %}">لغو جستجو و مشاهده همه</a>
            {% if perms.admin_panel.ViewStore or searchStatus %}
            <div class="table-container">
                <table class="table has-text-centered is-bordered is-striped is-narrow is-hoverable is-fullwidth ss02 ">
                <!-- Your table content -->
                <thead>
                    <tr style="
                    background: #33b5d3;
                ">

                        <th style="min-width: 200px;">کدشناسایی</th>
                        <th style="min-width: 200px;">نام و نام خانودگی</th>
                        <th >آخرین بازدید</th>
                        <th style="min-width: 150px;">تاریخ نصب</th>
                        <th >تلفن</th>
                        <th style="min-width: 400px;">آدرس</th>
                    </tr>
                </thead>
                <tbody>
                  {% for customer in customersD %}                  
                    <tr>
                      <td>{{ customer.idCode }}</td>
                      <td>
                          <input class="is-hidden fid fidv-{{ customer.id }}" value="{{ customer.id }}">
                          <a href="{% url 'admin_panel:customerNew' customer.id  %}" class="tdvl openRow name">
                              {% if customer.name_family|length >= 2 %}  {{ customer.name_family }} {% else %} نامعلوم {% endif %}
                          </a>
                      </td>
                      <td>
                          <div class="tdvl lastView">
                            خالی
                          </div>
                      </td>
                      <td>
                          <div class="tdvl installDate">
                            {{ customer.installDate | toJalali }} 
                          </div>
                      </td>
                      <td>
                          <div class="tdvl mobile_1">
                            {{ customer.phone1 }}
                          </div>
                          <div class="tdvl is-hidden mobile_2">
                            {{ customer.phone2 }}
                        </div>
                        <div class="tdvl is-hidden mobile_3">
                          {{ customer.phone3 }}
                      </div>
                      </td>
                      <td>
                          <div class="tdvl address">
                            {{ customer.address }}
                          </div>
                      </td>
                  </tr>
                  {% endfor %}
                </tbody>
                </table>

            <!--
                <div class="">
                      {% if customersD.has_previous %}
                          <a class="button is-danger" href="{{ full_path }}{% if searchStatus %}&{% else %}?{% endif %}page={{ customersD.previous_page_number  }}">صفحه قبل</a>
                      {% endif %}

                      {% if customersD.has_next %}
                          <a class="button is-danger" href="{{ full_path }}{% if searchStatus %}&{% else %}?{% endif %}page={{ customersD.next_page_number }}">صفحه بعد</a>
                      {% endif %}
              </div>!-->

              <div class="">
                      {% if customersD.has_previous %}
                          <a class="button is-danger" href="?{% if searchVal %}searchVal={{ searchVal }}&searchOn={{ searchOn }}{% endif %}&page={{ customersD.previous_page_number  }}">صفحه قبل</a>
                      {% endif %}

                      {% if customersD.has_next %}
                          <a class="button is-danger" href="?{% if searchVal %}searchVal={{ searchVal }}&searchOn={{ searchOn }}{% endif %}&page={{ customersD.next_page_number }}">صفحه بعد</a>

                      {% endif %}

              </div>

            </div>
            {% endif %}
        </div>
    </div>
  </div>

  <div class="modal SearchBox">
    <div class="modal-background closeSearch"></div>
    <div class="modal-content">
      <!-- -->
      <form method="get" class="columns is-mobile is-multiline">
        <div class="field column is-7-desktop is-12-mobile m-0">
          <label class="label">جستجو کنید</label>
          <div class="control">
            <input name="searchVal" class="input search" type="text" placeholder="">
          </div>
        </div>

        <div class="field column is-5-desktop is-12-mobile m-0">
          <label class="label">فیلد</label>
          <div class="select">
            <select name="searchOn">
              <option value="name">نام و نام خانوادگی</option>
              <option value="code">کدمشتری</option>
              <option value="phone">تلفن</option>
              <option value="address">آدرس</option>
              <option value="laghv">لغو بازدید</option>
            </select>
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
            <input class="button is-success" id="searchbtn" value="جستجو مشتری" type="submit">
        </div>
        <!-- -->
      </form>


    </div>
    <button class="modal-close is-large closeSearch" aria-label="close"></button>
  </div>

  <div class="modal addNewUser" role="dialog" aria-modal="true" aria-labelledby="addUserTitle">
    <div class="modal-background closeAddUser"></div>
    <div class="modal-content add-modal">
      <div class="add-modal-card">
        <header class="add-modal-head">
          <h2 class="title is-5 mb-0" id="addUserTitle">ایجاد مشتری جدید</h2>
          <button type="button" class="delete closeAddUser" aria-label="بستن"></button>
        </header>

        <form action="{% url 'admin_panel:customersAdd' %}" method="post" id="addCustomerForm">
          {% csrf_token %}
          <div class="add-modal-body">
            <div class="columns is-mobile is-multiline m-0">

              <div class="field column is-8-desktop is-12-mobile py-2 px-2">
                <label class="label" for="addName">نام و نام خانوادگی <span class="has-text-danger">*</span></label>
                <div class="control">
                  <input required name="an_name" id="addName" class="input an_name" type="text"
                         autocomplete="name" placeholder="نام و نام خانوادگی">
                </div>
              </div>

              <div class="field column is-4-desktop is-12-mobile py-2 px-2">
                <label class="label" for="addIdnCode">کدشناسایی</label>
                <div class="control">
                  <input name="idnCode" id="addIdnCode" class="input idnCode" type="text"
                         placeholder="کد شناسایی مشتری">
                </div>
              </div>

              <div class="field column is-4-desktop is-12-mobile py-2 px-2">
                <label class="label" for="persianDateP">تاریخ نصب</label>
                <div class="control">
                  <input name="installDate" id="persianDateP" class="input installDate" type="text"
                         autocomplete="off" placeholder="مثل: 1400/06/01">
                </div>
                <p class="help">مبنای محاسبهٔ یادآوری بازدید دوره‌ای.</p>
              </div>

              <div class="field column is-8-desktop is-12-mobile py-2 px-2">
                <label class="label" for="addAddress">آدرس</label>
                <div class="control">
                  <input name="an_address" id="addAddress" class="input an_address" type="text"
                         autocomplete="street-address" placeholder="آدرس کامل">
                </div>
              </div>

              <div class="field column is-12 py-2 px-2">
                <label class="label">شماره‌های تماس</label>
                <div id="dynamic-phones-add">
                  <div class="phone-row">
                    <div class="phone-row-fields">
                      <input name="phone_titles" class="input phone-title" type="text"
                             aria-label="عنوان شماره" placeholder="عنوان (مثلاً موبایل)">
                      <input name="phones" class="input phone-number an_phone" type="tel"
                             inputmode="tel" autocomplete="tel" aria-label="شماره تماس"
                             placeholder="شماره تماس">
                    </div>
                    <div class="phone-row-actions">
                      <label class="checkbox phone-primary" title="گیرندهٔ پیامک‌های این مشتری">
                        <input type="checkbox" name="phone_primary" value="0" checked> اصلی
                      </label>
                      <button type="button" class="button is-small is-danger is-light remove-phone-btn"
                              aria-label="حذف این شماره">حذف</button>
                    </div>
                  </div>
                </div>
                <button type="button" class="button is-info is-light is-small add-phone-btn"
                        data-target="#dynamic-phones-add">+ افزودن شماره</button>
                <p class="help">تیک «اصلی» یعنی گیرندهٔ پیامک‌های این مشتری (می‌تواند چند شماره باشد).</p>
              </div>

            </div>
          </div>

          <footer class="add-modal-foot">
            <button class="button is-success" id="DcreateCS" type="submit">ایجاد مشتری</button>
            <button class="button is-light closeAddUser" type="button">انصراف</button>
          </footer>
        </form>
      </div>
    </div>
    <button class="modal-close is-large closeAddUser" aria-label="close"></button>
  </div>

  <div class="modal mEdit1">
    <div class="modal-background closeAddUser"></div>
    <div class="modal-content">
      <div class="columns is-mobile is-multiline">
        
        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">نام ونام خانوادگی</label>
          <div class="control">
            <input class="input uv_name" type="text" placeholder="نام نام خانوادگی">
          </div>
        </div>
  
        <div class="field column is-8-desktop is-12-mobile m-0">
          <label class="label">آدرس</label>
          <div class="control">
            <input class="input uv_address" type="text" placeholder="آدرس کامل">
          </div>
        </div>
  
        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">تلفن همراه</label>
          <div class="control">
            <input name="phone-1" id="phone-1" class="input uv_phone" type="text" placeholder="تلفن 1">
            <input name="phone-2" id="phone-2" class="input uv_phone" type="text" placeholder="تلفن 2">
            <input name="phone-3" id="phone-3" class="input uv_phone" type="text" placeholder="تلفن 3">
          </div>
        </div>  
  
        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">تاریخ نصب</label>
          <div class="control">
            <input name="installDate" class="input uv_installDate" type="text" placeholder="مثل: 1400/06/01">
          </div>
        </div>

        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">کدشناسایی</label>
          <div class="control">
            <input name="idnCode" class="input idnCode" type="text" placeholder="">
          </div>
        </div>


        <div class="field column is-12-desktop is-12-mobile m-0">
            <input class="button is-success" id="editCS" value="ویرایش مشتری" type="submit">
        </div>

      </div>


    </div>
    <button class="modal-close is-large closeAddUser" aria-label="close"></button>
  </div>

{% endblock %}
{% block cssEnd %}
  <style>
    /* --- مودال ایجاد مشتری: کارت با سربرگ/پابرگ چسبان و بدنهٔ اسکرول‌شو --- */
    /* .add-modal همان .modal-content بولماست؛ سقف ارتفاع و max-width پیش‌فرضش را خنثی
       می‌کنیم تا کارت خودش اندازه را تعیین کند (وگرنه پابرگ بریده می‌شود). */
    .add-modal {
      overflow: visible; max-height: none; max-width: 760px;
      width: 100%; margin: 0 auto; padding: 0 .5rem;
    }
    .add-modal-card {
      display: flex; flex-direction: column;
      background: #fff; border-radius: 10px; overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      width: 100%; max-width: 720px; margin: 0 auto;
      max-height: calc(100vh - 120px);
    }
    /* فرم باید خودش ستون فلکس باشد تا بدنه بتواند اسکرول شود و پابرگ پایین بماند. */
    .add-modal-card > form {
      display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
    }
    .add-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: .5rem; padding: .75rem 1rem;
      border-bottom: 1px solid #eee; background: #fff; flex: 0 0 auto;
    }
    .add-modal-body {
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: .25rem .5rem; flex: 1 1 auto; min-height: 0;
    }
    .add-modal-foot {
      display: flex; gap: .5rem; padding: .75rem 1rem;
      border-top: 1px solid #eee; background: #fafafa; flex: 0 0 auto;
    }
    .add-modal-foot .button { min-height: 2.6em; }

    /* --- ردیف شمارهٔ تماس: دسکتاپ یک‌خطی، موبایل عمودی --- */
    .phone-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
      padding: .5rem; margin-bottom: .5rem;
      border: 1px solid #e6e6e6; border-radius: 8px; background: #fafafa;
    }
    .phone-row-fields { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 320px; min-width: 0; }
    .phone-row-fields .phone-title { flex: 0 0 140px; min-width: 0; }
    .phone-row-fields .phone-number { flex: 1 1 180px; min-width: 0; }
    .phone-row-actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
    .phone-primary { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }

    @media (max-width: 768px) {
      .add-modal-card { max-height: calc(100vh - 32px); border-radius: 8px; }
      /* dvh روی مرورگرهای موبایل نوار آدرس را هم حساب می‌کند. */
      .add-modal-card { max-height: calc(100dvh - 32px); }
      .phone-row-fields { flex: 1 1 100%; }
      .phone-row-fields .phone-title,
      .phone-row-fields .phone-number { flex: 1 1 100%; }
      .phone-row-actions { flex: 1 1 100%; justify-content: space-between; }
      .add-modal-foot { flex-direction: column-reverse; }
      .add-modal-foot .button { width: 100%; }
    }
  </style>
{% endblock %}
{% block jsEnd %}
  <script>
$(document).ready(function() {

  kamaDatepicker('persianDateP', { buttonsColor: "red", forceFarsiDigits: true });

  var PHONE_ROW = `
      <div class="phone-row">
        <div class="phone-row-fields">
          <input name="phone_titles" class="input phone-title" type="text"
                 aria-label="عنوان شماره" placeholder="عنوان (مثلاً موبایل)">
          <input name="phones" class="input phone-number an_phone" type="tel"
                 inputmode="tel" autocomplete="tel" aria-label="شماره تماس" placeholder="شماره تماس">
        </div>
        <div class="phone-row-actions">
          <label class="checkbox phone-primary" title="گیرندهٔ پیامک‌های این مشتری">
            <input type="checkbox" name="phone_primary" value="0"> اصلی
          </label>
          <button type="button" class="button is-small is-danger is-light remove-phone-btn"
                  aria-label="حذف این شماره">حذف</button>
        </div>
      </div>`;

  function reindexPhones() {
      $('#dynamic-phones-add .phone-row').each(function(i) {
          $(this).find('input[name="phone_primary"]').val(i);
      });
  }

  // همیشه دست‌کم یک شماره «اصلی» بماند (شمارهٔ اول پیش‌فرضِ گیرندهٔ پیامک است).
  function ensurePrimary() {
      var $rows = $('#dynamic-phones-add .phone-row');
      if ($rows.length && $rows.find('input[name="phone_primary"]:checked').length === 0) {
          $rows.first().find('input[name="phone_primary"]').prop('checked', true);
      }
  }

  reindexPhones();

  $(document).on('click', '.add-phone-btn', function() {
      // data-target صریح (وقتی دکمه بیرونِ ظرف است)؛ وگرنه نزدیک‌ترین ظرف شماره‌ها.
      var $target = $(this).data('target')
          ? $($(this).data('target'))
          : $(this).closest('div[id^="dynamic-phones"]');
      $target.append(PHONE_ROW);
      reindexPhones();
      $target.find('.phone-row').last().find('.phone-number').focus();
  });

  $(document).on('click', '.remove-phone-btn', function() {
      $(this).closest('.phone-row').remove();
      reindexPhones();
      ensurePrimary();
  });

  function resetAddForm() {
      $('#addCustomerForm').find('input.an_name, input.an_address, input.installDate, input.idnCode').val('');
      $('#dynamic-phones-add').empty().append(PHONE_ROW);
      reindexPhones();
      ensurePrimary();
  }

  $(".closeAddUser").click(function(){
      $(".addNewUser").removeClass("is-active");
      resetAddForm();
  });
  $(".modal-close, .modal-background").click(function(){
      $(".mEdit1").removeClass("is-active")
  });
  $(".closeSearch").click(function(){
      $(".SearchBox").removeClass("is-active")
  });

  $("#addCustomerForm").on('submit', function(){
      // جلوگیری از ارسال دوباره؛ خودِ فرم همین حالا داده‌ها را بسته است.
      $(this).find('#DcreateCS').prop('disabled', true).text('در حال ثبت…');
  });

  $("#addNewUser").click(function(){
      resetAddForm();
      $(".addNewUser").addClass("is-active");
      $('#addName').trigger('focus');
  });

  $(document).on('keydown', function(e){
      if (e.key === 'Escape' && $(".addNewUser").hasClass("is-active")) {
          $(".addNewUser").removeClass("is-active");
          resetAddForm();
      }
  });

  $("#openSearchBox").click(function(){
      $(".SearchBox").addClass("is-active")
  });
  $("#bedehiCN01").click(function(){
      var factorId = $(this).parent().parent().find(".fid").val();
      if ($("#bedehiStatus").val() == "tasfiye"){
        alert("send To server to tasfiye");
        $("tbody").find('.fidv-'+factorId).parent().parent().remove();
        $(".mEdit1").removeClass("is-active");
      }
  });
} );
  </script>
{% endblock %}