{% load i18n static common %}
<!--suppress ContinueStatementJS -->
<div style="padding: 10px;min-height: 350px;max-height: 485px;width: 750px">
  <form id="attschedule_addattschedule" action="" class="layui-form action-form" lay-filter="shiftForm">
    <div class="">
      {% with form.form as f %}
        <div class="layui-row">
          <div class="layui-col-md3">
            <div id="{{ model_name }}-tree-container" class="layui-card">
              <div id="{{ model_name }}-dept-tree-control" class="layui-card-header"
                   style="background-color: #f2f2f2">
                <span class="" name="all"><a href="javascript:void(0);" title="{% trans 'department_tree_selectAll' %}"><i
                  class="fa fa-fw fa-check-square-o"></i></a></span>
                <span class="selected" name="mul"><a href="javascript:void(0);"
                                                     title="{% trans 'department_tree_multipleSelect' %}"><i
                  class="fa fa-fw fa-list"></i></a></span>
                <span name="sub"><a href="javascript:void(0);" title="{% trans 'department_tree_selectSubDepartment' %}"><i
                  class="fa fa-fw fa-sitemap"></i></a></span>
              </div>
              <div class="layui-card-body">
                <div id="idObjectContainer" class="layui-hide"></div>
                <ul id="{{ model_name }}-tree" class="ztree ztree-pure" style="height: 350px;overflow-y: auto"></ul>
              </div>
            </div>
          </div>
          <div class="layui-col-md9" style="padding-left: 5px;border-left: 1px solid rgba(0, 0, 0, 0)">
            <div class="layui-row">
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-body schedule-add-form">
                    <input type="hidden" id="id_model_pk" name="pk" value="{{ object_id }}"/>
                    <input type="hidden" id="id_days" name="days" class="layui-hide">
                    {% csrf_token %}
                    <div class="layui-form-item">
                      {% layui_inline form.form.start_date %}
                      {% layui_inline form.form.end_date %}
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-header" style="padding: 0;">
                    <div class="layui-form">
                      <div class="layui-form-item">
                        <div class="layui-inline">
                          <div class="layui-input-inline" style="width: 160px">
                            <input id="id_frameShiftSearch" type="text" placeholder="{% trans 'shiftList_search_shift' %}" name="frame-shift-search" autocomplete="off"
                                   class="layui-input">
                          </div>
                        </div>
                        <div class="layui-inline">
                          <div lay-submit="" lay-filter="ShiftSearch" style="padding: 0 0 0 15px;">
                            <i class="fa fa-fw fa-search"></i>
                          </div>
                        </div>
                        <!--TODO implement add shift
                        <div class="layui-inline">
                          <div lay-submit="" lay-filter="ShiftAdd">
                            <i class="fa fa-fw fa-plus"></i>
                          </div>
                        </div>
                        -->
                        <div class="layui-inline">
                          <div lay-submit="" lay-filter="ShiftRefresh">
                            <i class="fa fa-fw fa-refresh"></i>
                          </div>
                        </div>
                      </div>
                      <div class="layui-hide">{% layui_inline form.form.shift %}</div>
                    </div>
                  </div>
                  <div class="layui-card-body">
                    <table id="schedule_shift" class="layui-hide" lay-filter="scheduleShift"></table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endwith %}
    </div>
  </form>
</div>
<!--suppress JSUnfilteredForInLoop -->
<script>
  $(function () {
    layui.use(['form', 'laydate', 'table', 'tablePlug'], function () {
      var table = layui.table, tablePlug = layui.tablePlug, form = layui.form, laydate = layui.laydate;
      tablePlug.smartReload.enable(true);
      var zTree = null;
      function refreshDepartment() {
          var nodes = zTree.getCheckedNodes(true);
          var objs = [];
          nodes.forEach(function (item) {
            objs.push('<input name="schd_department" value="'+item.id+'"/>');
          });
          $("#idObjectContainer").html(objs.join(','));
      }
      function onClick(event, treeId, treeNode) {
          zTree.checkNode(treeNode, !treeNode.checked, false, false);
          refreshDepartment();
      }
      function onCheck(event, treeId, treeNode) {
          refreshDepartment();
      }
      function department_tree() {
        var setting = {
          view: {
            dblClickExpand: false,
            showIcon: false,
            showLine: true
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          check: {
            enable: true,
            chkboxType: {"Y": "", "N": ""},
            chkStyle: 'checkbox',
            radioType: "all"
          },
          callback: {
            onClick: onClick
            , onCheck: onCheck
          }
        };
        $.ajax({
          url: "{% url 'biotime:personnel_department_tree_nodes' %}",
          type: "GET",
          dataType: "json",
          success: function (nodes) {
            zTree = $.fn.zTree.init($("#{{ model_name }}-tree"), setting, nodes);
          }
        });
      }
      department_tree();
      $("#{{ model_name }}-dept-tree-control span").click(function () {
        var name = $(this).attr('name');
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
          if (name === 'all') {
            if (zTree.setting.check.chkStyle === 'checkbox') {
              zTree.checkAllNodes(false);
              refreshDepartment();
            }
          } else if (name === 'mul') {
            var nodes = zTree.getCheckedNodes(true);
            zTree.checkAllNodes(false);
            if (nodes.length > 0) {
              zTree.checkNode(nodes[0], true, false, true);
            }
            zTree.setting.check.chkStyle = 'radio';
          } else if (name === "sub") {
            zTree.setting.check.chkboxType = {"Y": "", "N": ""};
          }
        } else {
          $(this).addClass('selected');
          if (name === 'all') {
            if (zTree.setting.check.chkStyle === 'checkbox') {
              zTree.checkAllNodes(true);
              refreshDepartment();
            }
          } else if (name === 'mul') {
            zTree.setting.check.chkStyle = 'checkbox';
          } else if (name === "sub") {
            zTree.setting.check.chkboxType = {"Y": "s", "N": "s"};
          }
        }
        zTree.refresh();
      });
      var shiftOpts = {
        elem: "#schedule_shift"
        , height: 305
        , text: {none: gettext('none_data')}
        , request: {
          pageName: 'page',
          limitName: 'page_size'
        }
        , page: {
          layout: ['count', 'prev', 'page', 'next', 'limit']
          , limit: 50
          , limits: [20, 50, 80, 100, 200]
          , groups: 1
        }
        , cols: [[
          {field: 'id', type: 'radio'}
          , {field: 'alias', title: "{% trans 'attShift_field_alias' %}"}
          , {field: 'shift_timetable', title: "{% trans 'timeInterval_field_alias' %}"}
          , {field: 'cycle_unit', title: "{% trans 'attShift_field_cycleUnit' %}"}
          , {field: 'shift_cycle', title: "{% trans 'attShift_field_cycle' %}"}
          , {field: 'auto_shift', title: "{% trans 'attShift_field_autoShift' %}"}
        ]]
        , url: '/att/api/attshifts/'
      };
      var shiftTable = table.render(shiftOpts);
      form.render();
      var cur = moment(new Date());
      var startDate = laydate.render({
        elem: '#id_start_date'
        , type: 'date'
        , value: cur.startOf('month').format('YYYY-MM-DD')
      });
      var endDate = laydate.render({
        elem: '#id_end_date'
        , type: 'date'
        , value: cur.endOf('month').format('YYYY-MM-DD')
      });

      form.val('shiftForm', {
        cycle_unit: 1
        ,shift_cycle: 1
      });
      form.on('submit(ShiftSearch)', function () {
        var alias = $("#id_frameShiftSearch").val();
        table.reload(shiftTable.config.id, {where: {alias__icontains: alias}});
      });
      form.on('submit(ShiftRefresh)', function () {
        $("#id_frameShiftSearch").val("");
        table.reload(shiftTable.config.id, {where: {alias__icontains: ""}});
      });
      table.on('radio(scheduleShift)', function (obj) {
        $("#id_shift").val(obj.data.id);
      });
    });
  });
</script>
