{% 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-6-desktop {% endif %}">
{% endwith %}

    {% if customer %}
    <div class="box mb-5 has-background-white-ter" style="border: 1px solid #e0e0e0; box-shadow: none; border-radius: 6px;">
      <form method="GET" action="{% url 'admin_panel:customerAction' customer.id %}">
        <div class="columns is-mobile is-multiline is-vcentered m-0">
          
          <div class="column is-4-desktop is-12-mobile pb-0">
            <div class="field">
              <label class="label is-small">نوع اقدام</label>
              <div class="control">
                <div class="select is-fullwidth is-small">
                  <select name="actionType">
                    <option value="all" {% if filter_type == 'all' %}selected{% endif %}>همه موارد</option>
                    <option value="bazdid" {% if filter_type == 'bazdid' %}selected{% endif %}>بازدید</option>
                    <option value="nasb" {% if filter_type == 'nasb' %}selected{% endif %}>نصب</option>
                    <option value="vosol" {% if filter_type == 'vosol' %}selected{% endif %}>وصول مطالبات</option>
                    <option value="hamahangi" {% if filter_type == 'hamahangi' %}selected{% endif %}>هماهنگی</option>
                    <option value="inCall" {% if filter_type == 'inCall' %}selected{% endif %}>تماس ورودی</option>
                    <option value="outCall" {% if filter_type == 'outCall' %}selected{% endif %}>تماس خروجی</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          
          <div class="column is-4-desktop is-12-mobile pb-0">
            <div class="field">
              <label class="label is-small">وضعیت انجام</label>
              <div class="control">
                <div class="select is-fullwidth is-small">
                  <select name="status">
                    <option value="all" {% if filter_status == 'all' %}selected{% endif %}>همه وضعیت‌ها</option>
                    <option value="waite" {% if filter_status == 'waite' %}selected{% endif %}>در انتظار (باز)</option>
                    <option value="finish" {% if filter_status == 'finish' %}selected{% endif %}>انجام شده</option>
                    <option value="cancell" {% if filter_status == 'cancell' %}selected{% endif %}>لغو شده</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-4-desktop is-12-mobile mt-4 has-text-left pb-0">
            <button type="submit" class="button is-info is-small px-4">اعمال فیلتر</button>
            <a href="{% url 'admin_panel:customerAction' customer.id %}" class="button is-light is-small">حذف فیلتر</a>
          </div>

        </div>
      </form>
    </div>
    <span id="showActionBox" class="button is-info mb-5">ایجاد وظیفه جدید</span>
    {% endif %}

    {% if not actions and not actionPr %}
        <div class="notification is-warning is-light has-text-centered">
            هیچ اقدامی با مشخصات انتخاب‌شده یافت نشد!
        </div>
    {% 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 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 %}

    {% 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 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-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 value="">انتخاب کنید</option>
                  <option value="bazdid">بازدید</option>
                  <option value="nasb">نصب</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 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 value="">انتخاب کنید</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>
                  <option value="6">خدمات پس از فروش</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">
        <button type="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,
        }	
      },
    });
  </script>