{% load custom_tags %}
{% load static %}
{% with url_name=request.resolver_match.url_name %}
<div id="action" class="column is-12-mobile {% if url_name == 'customerAction' %}is-12-desktop{% else %} is-12-desktop {% endif %}">
{% endwith %}

    {% if customer %}
    <!--<span id="showActionBox" class="button is-info mb-5">ایجاد وظیفه جدید</span>!-->
    {% endif %}
    {% for action in actions %}
    <div customer_id='{{ action.customer.id }}' action_id='{{ action.id }}' class="columns is-mobile is-multiline is-gapless actionBox {{ bgBox }}">
      <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 'nasb' %}نصب{% endifequal %}{% 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 class="pr-4 pl-4 pb-4 pt-4 ">
          <span class="is-result" style="background-color: #fff;">نظر مشتری:</span>
          <span>{% if action.nazar %} {{ action.nazar }} {% else %}هنوز گزارش یا نتیجه ای ثبت نشده!{% endif %}</span>
        </div>

        <div class="pr-4 pl-4 pb-4 pt-4 actionBoxBorder">
          <span >امتیاز :</span>
          <span>{% if action.grade %} {{ action.grade }} {% 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-8-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-12-mobile is-4-desktop is-hidden-mobile">
        <div class="has-text-centered	 p-3">
            <span>{{ action.forUser.first_name }} {{ action.forUser.last_name }}</span>
        </div>
        
      </div>
    </div>
    {% endfor %}
    {% if actionPr %}
    <hr>
    <p style="
    text-align: center;
    margin-bottom: 20px;
    color: #d90000;
    font-size: 18px;
"> کارهای مانده از روزهای قبل</p>
    
    {% for action in actionPr %}
    <div customer_id='{{ action.customer.id }}' action_id='{{ action.id }}' class="columns is-mobile is-multiline is-gapless actionBox {{ bgBox }}">
      <div class="column is-12-mobile is-12-desktop actionBoxDesc actionBoxOpenB">
        <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 'nasb' %}نصب{% endifequal %}{% 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 actionBoxOpenB">
        <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-8-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-12-mobile is-4-desktop is-hidden-mobile">
        <div class="has-text-centered	 p-3">
            <span>{{ action.forUser.first_name }} {{ action.forUser.last_name }}</span>
        </div>
        
      </div>
    </div>
    {% endfor %}
    {% endif %}
  
  </div>
  
  {% if customer %}
  <form id="ActionBox" class="modal" method="post" action="{% url 'admin_panel:customerNewAction' customer.id %}">
  {% else %}
  <form id="ActionBox" class="modal" method="post" action="">
  {% endif %}
  
    {% 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 id="actionType" required name="actionType" style="width: 100%;">
                  <option>انتخاب کنید</option>
                  <option value="bazdid">بازدید</option>
                  <option value="nasb">نصب</option>
                  <option value="vosol">وصول مطالبات</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 id="dateTimeAnjam" 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 id="desc" 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 id="userID" required name="userID" style="width: 100%;">
                  <option>انتخاب کنید</option>
                  {% if perms.admin_panel.ViewStore %}
                  {% for auser in allUsers %}
                  <option value="{{ auser.id }}">{{ auser.first_name }} {{ auser.last_name }}</option>
                  {% endfor %}
                  {% else %}
                  <option value="{{ request.user.id }}">{{ request.user.first_name }} {{ request.user.last_name }}</option>
                  {% endif %}
                </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="actionResult" class="textarea" placeholder="نتیجه فعالیت انجام شده را بنویسید"></textarea>
            </div>
          </div>
  
  
          
        </div>
      </section>
      <footer class="modal-card-foot">
        <span class="button">حذف</span>
        <span class="button">لغو</span>
        <!-- 
        <button class="button closeActionBox">بستن</button>!-->
        <input id="sabtBtn05" 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");
      {% if customer %}
      var NewActionUrl ="{% url 'admin_panel:customerNewAction' customer.id %}";
      $("#ActionBox").prop("action", NewActionUrl);
      {% endif %}
      $("#actionType").val('');
      $("#desc").val('');
      $("#userID").val('');
      $("#checkIsDone").prop('checked', false);
      $(".showWhenDone").addClass("is-hidden");
      $("#actionResult").val('');
      dateTimePickerAnjam.setDate();
      dateTimePickerFinish.setDate();
      $("#sabtBtn05").val("ثبت");
    });
  
    $("#checkIsDone").change(function() {
      if(this.checked) {
        $(".showWhenDone").removeClass("is-hidden");
      }else{
        $(".showWhenDone").addClass("is-hidden");
      }
    });

    $(".actionBoxOpenB").click(function(){
      $("#sabtBtn05").val("ویرایش");
      var actionEditUrl = "{% url 'admin_panel:customerEditAction' 1111 2222 %}";
      var action_id = $(this).parent().attr("action_id");
      var customer_id = $(this).parent().attr("customer_id");
      actionEditUrl = actionEditUrl.replace('1111', customer_id);
      actionEditUrl = actionEditUrl.replace('2222', action_id);
      $("#ActionBox").prop("action", actionEditUrl);
      $.getJSON('/panel/ActionJson/'+action_id, function(data) {
        ActionParseData = JSON.parse(data);
        console.log(ActionParseData)
        var actionDateTime0 = new Date(ActionParseData[0]['fields']['actionDateTime']);
        var finishDateTime = null;
        if(ActionParseData[0]['fields']['finishDateTime'] != null){
          finishDateTime = Math.floor( new Date(ActionParseData[0]['fields']['finishDateTime']).getTime() );
        }
        actionDateTime0 = Math.floor(actionDateTime0.getTime());
        dateTimePickerAnjam.setDate(actionDateTime0);
        if(finishDateTime != null){
          dateTimePickerFinish.setDate(finishDateTime);
        }
        $("#ActionBox").addClass("is-active");
        $("#actionType").val(ActionParseData[0]['fields']['actionType']);
        $("#desc").val(ActionParseData[0]['fields']['desc']);
        $("#userID").val(ActionParseData[0]['fields']['forUser']);
        if(ActionParseData[0]['fields']['status'] == 'finish'){
          $("#checkIsDone").prop('checked', true);
          $(".showWhenDone").removeClass("is-hidden");
        }else{
          $("#checkIsDone").prop('checked', false);
          $(".showWhenDone").addClass("is-hidden");
        }
        $("#actionResult").val(ActionParseData[0]['fields']['result']);
      });
    });
  
    var dateTimePickerFinish = $(".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,
        }	
      },
    });
  
    var dateTimePickerAnjam = $(".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>