{% load i18n %}
<div id="staff_training_add" style="padding: 20px">
    <form action="" method="post" class="layui-form" lay-filter="staff_training_add">
        {% csrf_token %}
        <input type="hidden" name="employee" class="layui-hide" value="{{ user.pk }}">
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'staff_overtime_startTime' %}<span class="required">*</span></label>
            <div class="layui-input-block">
              <input id="id_start_time" type="text" name="start_time" lay-verify="start_time" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'staff_overtime_endTime' %}<span class="required">*</span></label>
            <div class="layui-input-block">
              <input id="id_end_time" type="text" name="end_time" lay-verify="end_time" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'staff_training_trainingCategory' %}<span class="required">*</span></label>
            <div class="layui-input-block">
              <select id="id_category" name="category" lay-search="" lay-verify="training_category" autocomplete="off" placeholder="" class="layui-input"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'staff_training_applyReason' %}</label>
            <div class="layui-input-block">
              <input type="text" id="id_apply_reason" name="apply_reason" lay-verify="apply_reason" autocomplete="off" placeholder="" class="layui-textarea" maxlength="200">
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'laydate'], function(){
        var form = layui.form, laydate=layui.laydate;
        laydate.render({
            elem: '#id_start_time'
            ,type: 'datetime'
            ,lang: 'en'
        });
        laydate.render({
            elem: '#id_end_time'
            ,type: 'datetime'
            ,lang: 'en'
        });
        $.ajax({
            url: "/att/api/trainingcategorys/?page_size=1000"
            ,type: "GET"
            , async: false
            ,dataType: "json"
            ,success: function(response){
                var data = response.data;
                var html = "";
                for(var i=0; i<data.length; i++){
                    html+='<option value="'+data[i]['id']+'">'+data[i]['category_name']+'</option>';
                }
                $("#id_category").append(html);
                form.render();
            }
            ,error: function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest.status)
            }
        });
        form.render();
    })
</script>