{% extends "./customerBaseNew.html" %}
{% load custom_tags %}
{% load static %}

{% block BodyCustomer1 %}

{% include 'admin_panel/customerActionInc.html' with show_delete=True %}

<!-- 
<div id="action" class="column is-12-mobile is-12-desktop ">

  <span id="showActionBox" class="button is-info mb-5">ایجاد وظیفه جدید</span>
  {% for action in actions %}
  <div action_id='10' class="columns is-mobile is-multiline is-gapless actionBox">
    <div class="column is-12-mobile is-12-desktop actionBoxDesc">
      <div class="pr-4 pl-4 pb-4 pt-4">
        {% ifequal action.status 'finish' %}
        <img class="" style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/check.png' %}">
        {% endifequal %}
        
        {% ifequal action.status 'waite' %}
        <img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/time1.png' %}">
        {% endifequal %}

        {% ifequal action.status 'cancell' %}
        <img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/cancell.png' %}">
        {% endifequal %}

        <span class="is-bazdid">{% ifequal action.actionType 'bazdid' %}بازدید{% endifequal %}{% ifequal action.actionType 'vosol' %}وصول مطالبات{% endifequal %}{% ifequal action.actionType 'hamahangi' %}هماهنگی{% endifequal %}{% ifequal action.actionType 'inCall' %}تماس ورودی{% endifequal %}{% ifequal action.actionType 'outCall' %}تماس خروجی{% endifequal %}</span>
        <span class="pr-3">{{ action.desc }}</span>
      </div>
    </div>
    <div class="column is-12-mobile is-12-desktop">
      <div class="pr-4 pl-4 pb-4 pt-4 actionBoxBorder">
        <span class="is-result">نتیجه</span>
        <span>{% if action.result %} {{ action.result }} {% else %}هنوز گزارش یا نتیجه ای ثبت نشده!{% endif %}</span>
      </div>

    </div>
    <div class="column is-4-mobile is-4-desktop">
      <div class="has-text-centered	 p-3">
        <span class="ss02">{{ action.actionDateTime | toJalali }}</span>
      </div>
      
    </div>
    <div class="column is-4-mobile is-4-desktop">
      <div class="has-text-centered	actionBoxFtBox p-3">
        <a href="{% url 'admin_panel:customerNew' action.customer.id  %}">
          <span>{{ action.customer.name_family }}</span>
        </a>
      </div>
    </div>
    <div class="column is-4-mobile is-4-desktop">
      <div class="has-text-centered	 p-3">
          <span>{{ action.forUser.first_name }} {{ action.forUser.last_name }}</span>
      </div>
      
    </div>
  </div>
  {% endfor %}

</div>

<form id="ActionBox" class="modal" method="post" action="{% url 'admin_panel:customerNewAction' customer.id %}">
  {% csrf_token %}
  <div class="modal-background closeActionBox"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title is-hidden">ایجاد وظیفه</p>
      <button class="delete closeActionBox" aria-label="close"></button>
    </header>
    <section class="modal-card-body">

      <div class="columns is-mobile is-multiline">
        <div class="field column is-6-desktop is-12-mobile m-0">
          <label class="label">نوع اقدام</label>
          <div class="control">

            <div class="select" style="width: 100%;">
              <select required name="actionType" style="width: 100%;">
                <option>انتخاب کنید</option>
                <option value="bazdid">بازدید</option>
                <option value="vosol">وصل مطالبات</option>
                <option value="hamahangi">هماهنگی با مشتری</option>
                <option value="inCall">تماس ورودی</option>
                <option value="outCall">تماس خروجی</option>
              </select>
            </div>

          </div>
        </div>

        <div class="field column is-6-desktop is-12-mobile m-0">
          <label class="label">تاریخ و ساعت انجام کار</label>
          <div class="control">
            <input type="text" class="input dateTimePickerAnjam">
            <input name="dateTimeAnjam" required type="text" class="input is-hidden dateTimePickerAnjam-alt">
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <div class="control">
            <label class="label mb-0">توضیحات:</label>
            <p class="is-size-7	">راجب کاری که میخواهید انجام دهید توضیحاتی را بنویسید</p>
            <textarea required name="desc" class="textarea " placeholder="مثلا: بامشتری تماس بگیرم برای هماهنگی تعویض فیلتر دستگاه"></textarea>

          </div>
        </div>

        <div class="field column is-6-desktop is-12-mobile m-0">
          <label class="label">توسط</label>
          <div class="control">

            <div class="select" style="width: 100%;">
              <select required name="userID" style="width: 100%;">
                <option>انتخاب کنید</option>
                {% for auser in allUsers %}
                <option value="{{ auser.id }}">{{ auser.first_name }} {{ auser.last_name }}</option>
                {% endfor %}
              </select>
            </div>

          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <div class="control">

            <label class="checkbox">
              <input name="is_done" id="checkIsDone" type="checkbox">
              این کار انجام شده
            </label>

          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0 showWhenDone is-hidden">
          <label class="label">تاریخ و ساعت اتمام کار</label>
          <div class="control">
            <input id="FinishDateTime" type="text" class="input dateTimePickerFinish">
            <input name="FinishDateTime" type="text" class="input dateTimePickerFinish-alt is-hidden">
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0 showWhenDone is-hidden">
          <div class="control">
            <label class="label mb-0">نتیجه</label>
            <p class="is-size-7	" >نتیجه کار یا پیگیری که انجام داده اید را بنویسید</p>
            <textarea name="result" id="actionDesc" class="textarea" placeholder="نتیجه فعالیت انجام شده را بنویسید"></textarea>
          </div>
        </div>


        
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button">حذف</button>
      <button class="button">لغو</button>
      <button class="button closeActionBox">بستن</button>
      <input type="submit" class="button is-success" value="ثبت"/>
      
    </footer>
  </div>
</form>

<script>
  $(".closeActionBox").click(function(){
    $("#ActionBox").removeClass("is-active");
  });

  $("#showActionBox").click(function(){
    $("#ActionBox").addClass("is-active");
  });

  $("#checkIsDone").change(function() {
    if(this.checked) {
      $(".showWhenDone").removeClass("is-hidden");
    }else{
      $(".showWhenDone").addClass("is-hidden");
    }
  });

  $(".dateTimePickerFinish").pDatepicker({
    altField: '.dateTimePickerFinish-alt',
    initialValue: true,
    initialValueType: 'persian',
    format: 'YYYY/MM/DD    HH:mm',
    calendar:{
        persian: {
            locale: 'fa'
        }
    },
    timePicker: {
      enabled: true,
      second:{
        enabled: false,
      }	
    },
  });

  $(".dateTimePickerAnjam").pDatepicker({
    altField: '.dateTimePickerAnjam-alt',
    initialValue: true,
    initialValueType: 'persian',
    format: 'YYYY/MM/DD    HH:mm',
    calendar:{
        persian: {
            locale: 'fa'
        }
    },
    timePicker: {
      enabled: true,
      second:{
        enabled: false,
      }	
    },
  })
  //.setDate(1382976091100);


</script>
!-->
{% endblock %}