{% load custom_tags %}
{% load static %}
<div id="action" class="column is-12-mobile is-6-desktop">

    {% 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 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 %}
  
  </div>
  

  <form id="ActionBox" class="modal" method="post" action="">
  
    {% 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 type="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-12-desktop is-12-mobile m-0">
            <div class="control" id="customerData">
              <p id="csName" class="has-text-centered is-size-4">محمد جواد فصاحت</p>
              <p class="has-text-centered is-size-5 csphones">
                <span id="csphone1"  class="is-hidden hidephone"></span>
                <span id="csphone2"  class="is-hidden hidephone"></span>
                <span id="csphone3"  class="is-hidden hidephone"></span>
              </p>
            </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="csDesc" required name="csDesc" class="textarea " placeholder="مثلا: بامشتری تماس بگیرم برای هماهنگی تعویض فیلتر دستگاه"></textarea>
            </div>
          </div>
  
          <div class="field column is-6-desktop is-6-mobile m-0">
            <label class="label">توسط</label>
            <div class="control">
  
              <div class="select" style="width: 100%;">
                <select disabled 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-6-desktop is-6-mobile m-0">
            <label class="label">امتیاز مشتری</label>
            <div class="control">
  
              <div class="select" style="width: 100%;">
                <select id="csGrade" required name="csGrade" style="width: 100%;">
                  <option value="">انتخاب کنید</option>
                  <option value="20">عالی</option>
                  <option value="15">متوسط</option>
                  <option value="10">ضعیف</option>
                  <option value="5">بد</option>
                  <option value="-1">عدم موفقیت در انجام نظرسنجی (تعویق ۳ روز)</option>
                  <option value="-2">کنسل کردن این نظرسنجی</option>
                </select>
              </div>
  
            </div>
          </div>
  
        </div>
      </section>
      <footer class="modal-card-foot">
        <span class="button closeActionBox">لغو</span>
        <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(){
      $(".hidephone").addClass("is-hidden");
      $("#csDesc").val("")
      $("#csGrade").val("")
      var actionEditUrl = "{% url 'admin_panel:rezayatEdit' 2222 %}";
      var action_id = $(this).parent().attr("action_id");
      var customer_id = $(this).parent().attr("customer_id");
      actionEditUrl = actionEditUrl.replace('2222', action_id);
      
      $.getJSON('/panel/CustomerJson/'+customer_id, function(data) {
        CustomerParseData = JSON.parse(data);
        $("#csName").html(CustomerParseData[0]['fields']['name_family']);
        var csphone1 = CustomerParseData[0]['fields']['phone1'];
        var csphone2 = CustomerParseData[0]['fields']['phone2'];
        var csphone3 = CustomerParseData[0]['fields']['phone3'];

        if(csphone1.length>4){
          $("#csphone1").html(csphone1);
          $("#csphone1").removeClass("is-hidden");
        }
        if(csphone2.length>4){
          $("#csphone2").html(csphone2);
          $("#csphone2").removeClass("is-hidden");
        }
        if(csphone3.length>4){
          $("#csphone3").html(csphone3);
          $("#csphone3").removeClass("is-hidden");
        }
      });
      $("#ActionBox").prop("action", actionEditUrl);
      $.getJSON('/panel/ActionJson/'+action_id, function(data) {
        ActionParseData = JSON.parse(data);
        $("#ActionBox").addClass("is-active");
        $("#csDesc").val(ActionParseData[0]['fields']['nazar'])
        $("#csGrade").val(ActionParseData[0]['fields']['grade'])
      });
    });
  
    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,
        }	
      },
    })
  
  </script>