{% 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">
    <div class="modal-background closeAddUser"></div>
    <div class="modal-content">
      <form action="{% url 'admin_panel:customersAdd' %}" class="columns is-mobile is-multiline" method="post">
        {% csrf_token %}  
        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">نام ونام خانوادگی</label>
          <div class="control">
            <input required name="an_name" class="input an_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 name="an_address" class="input an_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="phone1" id="phone-1" class="input an_phone" type="text" placeholder="تلفن 1">
            <input name="phone2" id="phone-2" class="input an_phone" type="text" placeholder="تلفن 2">
            <input name="phone3" id="phone-3" class="input an_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" id="persianDateP" class="input 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="DcreateCS" value="ایجاد مشتری" type="submit">
        </div>

      </form>


    </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 jsEnd %}
  <script>
$(document).ready(function() {

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


    $("#createCS").click(function(){
      var u_name = $(".addNewUser").find('.an_name').val();
      var u_address = $(".addNewUser").find('.an_address').val();
      var u_phone1 = $(".addNewUser").find('#phone-1').val();
      var u_phone2 = $(".addNewUser").find('#phone-2').val();
      var u_phone3 = $(".addNewUser").find('#phone-3').val();
      var u_installDate = $(".addNewUser").find('.installDate').val();
      alert("Ok send To server");
      $(".addNewUser").removeClass("is-active");

      $(".addNewUser").find('.an_name').val('');
      $(".addNewUser").find('.an_address').val('');
      $(".addNewUser").find('#phone-1').val('');
      $(".addNewUser").find('#phone-2').val('');
      $(".addNewUser").find('#phone-3').val('');
      $(".addNewUser").find('.installDate').val('');
      //Refresh page

    });
    $(".modal-close, .modal-background").click(function(){
        $(".mEdit1").removeClass("is-active")
    });
    $(".closeSearch").click(function(){
      $(".SearchBox").removeClass("is-active")
    });
    $(".closeAddUser").click(function(){
        $(".addNewUser").removeClass("is-active");
        $(".addNewUser").find('.an_name').val('');
        $(".addNewUser").find('.an_address').val('');
        $(".addNewUser").find('#phone-1').val('');
        $(".addNewUser").find('#phone-2').val('');
        $(".addNewUser").find('#phone-3').val('');
        $(".addNewUser").find('.installDate').val('');
    });
    

    $("#addNewUser").click(function(){
      $(".addNewUser").addClass("is-active")
    });
    $("#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 %}