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

  <div class="">
    <div class="columns m-0">

        <div class="column is-12">
            <div class="buttons">
              <a href="#" id="openSearchBox" class="button is-info is-outlined  is-rounded mr-0">جستجو</a>
            </div>
            <div class="table-container">
                <table class="table has-text-centered is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                <!-- Your table content -->
                <thead>
                    <tr style="
                    background: #33b5d3;
                ">
                        <th >ردیف</th>
                        <th style="min-width: 200px;">نام و نام خانودگی</th>
                        <th >آخرین بازدید</th>
                        <th >تلفن</th>
                        <th style="min-width: 400px;">آدرس</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                      <td>{{ forloop.counter }}</td>
                      <td>
                          <input class="is-hidden fid fidv-20" value="20">
                          <a target="_blank" href="{% url 'admin_panel:customerAction' customer.id  %}" class="tdvl name">
                               {% if customer.name_family|length >= 2 %}  {{ customer.name_family }} {% else %} نامعلوم {% endif %}
                          </a>
                      </td>
                      <td>
                          <div class="tdvl lastView">
                              {{ customer.last_bazdid_dt | toJalali  }}
                          </div>
                      </td>

                      <td>
                          <div class="tdvl mobile_1">
                              {{ customer.phone1  }}
                          </div>
                          <div class="tdvl is-hidden mobile_2">
                            09384999655
                        </div>
                        <div class="tdvl is-hidden mobile_3">
                            {{ customer.phone2 }}
                      </div>
                      </td>
                      <td>
                          <div class="tdvl address">
                              {{ customer.address  }}
                          </div>
                      </td>
                  </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
                      <div class="">
                      {% if customers.has_previous %}
                          <a class="button is-danger" href="?{% if searchVal %}searchVal={{ searchVal }}&searchOn={{ searchOn }}{% endif %}&page={{ customers.previous_page_number  }}">صفحه قبل</a>
                      {% endif %}

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

                      {% endif %}

              </div>
        </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>
            </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 BazdidF">
    <div class="modal-background closeBazdidF"></div>
    <div class="modal-content">
      <div class="columns is-mobile is-multiline">
        
        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">نام ونام خانوادگی</label>
          <div class="control">
            <input class="input rf_name" id="bz_name" 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 class="input rf_mobile" id="phone-1" 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="bazdidDateTime" id="persianDateP" class="input bz_DateTime" type="text" placeholder="">
          </div>
        </div>
  


        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">توسط</label>
          <div class="select">
            <select>
              <option>کدام خدمات؟</option>
              <option>خدمات 1</option>
              <option>خدمات 2</option>
              <option>خدمات 3</option>
            </select>
          </div>
        </div>

        <div class="field column is-4-desktop is-12-mobile m-0">
          <label class="label">زمان مراجعه</label>
          <div class="select">
            <select>
              <option>زمان را انتخاب کنید</option>
              <option>صبح</option>
              <option>ظهر</option>
              <option>بعد از ظهر</option>
              <option>غروب</option>
              <option>شب</option>
            </select>
          </div>
        </div>

        <div class="field column is-8-desktop is-12-mobile m-0">
          <label class="label">توضیحات</label>
          <div class="control">
            <textarea class="textarea" placeholder="توضیحات"></textarea>          </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 closeBazdidF" aria-label="close"></button>
  </div>
{% endblock %}
{% block jsEnd %}
  <script>
$(document).ready(function() {

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

    $(".closeBazdidF").click(function(){
        $(".BazdidF").removeClass("is-active")
    });

    $("#openSearchBox").click(function(){
      $(".SearchBox").addClass("is-active")
    });

    $(".closeSearch").click(function(){
      $(".SearchBox").removeClass("is-active")
    });

    $(".openRow").click(function(){
        var id = $(this).parent().parent().find('.fid').val().trim();
        var name = $(this).parent().parent().find('.name').text().trim();
        var mobile_1 = $(this).parent().parent().find('.mobile_1').text().trim();
        
        var address = $(this).parent().parent().find('.address').text().trim();
        //alert(id)
        $(".BazdidF").find('#bz_name').val(name);
        $(".BazdidF").find('#phone-1').val(mobile_1);

        //$("#bedehiStatus").val('وضعیت')

        $(".BazdidF").addClass("is-active")
    });
} );
  </script>
{% endblock %}