{% load i18n common %}
<div style="padding: 10px;height: 150px; width: 850px">
  <form class="layui-form" action="">
    {% csrf_token %}
    <div class="layui-hide">{{ form.employee }}</div>
    <div class="layui-hide"><input type="text" name="_id" value="{{ form.instance.pk|default:'' }}"></div>
    <div class="layui-form-item">
      {% layui_inline form.certification %}
      {% layui_inline form.expire_on %}
    </div>
    <div class="layui-form-item" >
      <span onblur="disableMyText()">{% layui_inline form.email_alert %}</span>
      {% layui_inline form.before %}
      <span style="margin-left: -20px;">days</span>
    </div>
    <div class="layui-form-item">
      {% layui_inline form.certificate %}
    </div>

  </form>
</div>

<script>
    function disableMyText()
    {
        d = document.getElementById("id_email_alert").value
        if (d == 'True'){

            document.getElementById("id_before").disabled = false;
        }
        else {

            document.getElementById("id_before").disabled = true;
        }
    }
    var email_alert = document.getElementById("id_email_alert").value;
      if(email_alert == 'False'){
            document.getElementById("id_before").disabled = true;
        }
  layui.use(['form', 'laydate'],  function () {
      var form = layui.form, laydate = layui.laydate;
      form.render();
      $("form.layui-form input.layui-date").each(function () {
        laydate.render({
          elem: this,
          type: 'date'
        });
      });
  })
</script>