{% extends "data_edit.html" %}
{% load i18n %}
{% block form %}
{% autoescape off %} 
<tr><td>
  <table width="100%" border="0" cellspacing="" cellpadding="3" id="tbl_iccard_edit">
	  <tr>
		  <th height="20" width="175">{{ form.SchName|field_as_label_tag }}</th>
		  <td>{{form.SchName.as_widget }}</td>
		  <td>{{form.SchName.errors }}</td>

          <th height="20" width="230">{{ form.timetable_type|field_as_label_tag }}</th>
          <td>{{form.timetable_type.as_widget }}</td>
          <td>{{form.timetable_type.errors }}</td>
	</tr>
    <tr name="normal">
         <th height="20">{{ form.CheckInTime1|field_as_label_tag }}</th>
         <td>{{form.CheckInTime1.as_widget }}</td>
         <td>{{form.CheckInTime1.errors }}</td>

         <th height="20">{{ form.CheckOutTime1|field_as_label_tag }}</th>
         <td>{{form.CheckOutTime1.as_widget }}</td>
         <td>{{form.CheckOutTime1.errors }}</td>
    </tr>
    <tr name="normal">
          <th height="20">{{ form.StartTime|field_as_label_tag }}</th>
          <td>{{form.StartTime.as_widget }}</td>
          <td>{{form.StartTime.errors }}</td>

          <th height="20">{{ form.EndTime|field_as_label_tag }}</th>
          <td>{{form.EndTime.as_widget }}</td>
          <td>{{form.EndTime.errors }}</td>
    </tr>
    <tr name="normal">
          <th height="20">{{ form.CheckInTime2|field_as_label_tag }}</th>
          <td>{{form.CheckInTime2.as_widget }}</td>
          <td>{{form.CheckInTime2.errors }}</td>

          <th height="20">{{ form.CheckOutTime2|field_as_label_tag }}</th>
          <td>{{form.CheckOutTime2.as_widget }}</td>
          <td>{{form.CheckOutTime2.errors }}</td>
    </tr>
	<tr name="normal">
	  <td height="5" colspan="8"></td>
	</tr>
    <tr name="normal">
        <th height="20">Break Time:</th>
        <td><a id='break_add' href="javascript:void(0)">{% trans '新增' %}</a></td>
    </tr>
    <tr name="normal">
        <td></td>
        <td colspan="5">
            <div style="height: 100px;border: 1px solid #d5d8d2; overflow: scroll">
                <table id="id_break_table" width="100%">
                    <thead>
                    <th></th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Break Time</th>
                    <th>Break Type</th>
                    <th>Related Operation</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </td>
    </tr>
    <tr>
	  <td height="5" colspan="8"></td>
	</tr>
	<tr name="normal">
        <th height="20">{{ form.CheckIn|field_as_label_tag }}</th>
        <td>{{form.CheckIn.as_widget }}</td>
        <td>{{form.CheckIn.errors }}</td>

        <th height="20">{{ form.CheckOut|field_as_label_tag }}</th>
        <td>{{form.CheckOut.as_widget }}</td>
        <td>{{form.CheckOut.errors }}</td>
    </tr>
	<tr name="normal">
      <th height="20">{{ form.LateMinutes|field_as_label_tag }}</th>
      <td>{{form.LateMinutes.as_widget }}</td>
      <td>{{form.LateMinutes.errors }}</td>
      
      <th height="20">{{ form.EarlyMinutes|field_as_label_tag }}</th>
      <td>{{form.EarlyMinutes.as_widget }}</td>
      <td>{{form.EarlyMinutes.errors }}</td>
    </tr>
      <tr name="normal">
          <th height="20">{{ form.IsCheckInOverTime|field_as_label_tag }}</th>
          <td>{{form.IsCheckInOverTime.as_widget }}</td>
          <td>{{form.IsCheckInOverTime.errors }}</td>

          <th id = '' height="20">{{ form.CheckInOverTime|field_as_label_tag }}</th>
          <td>{{form.CheckInOverTime.as_widget }}</td>
          <td>{{form.CheckInOverTime.errors }}</td>
      </tr>
      <tr name="normal">
          <th height="20">{{ form.IsOverTime|field_as_label_tag }}</th>
          <td>{{form.IsOverTime.as_widget }}</td>
          <td>{{form.IsOverTime.errors }}</td>

          <th id = '' height="20">{{ form.OverTime|field_as_label_tag }}</th>
          <td>{{form.OverTime.as_widget }}</td>
          <td>{{form.OverTime.errors }}</td>
      </tr>
      <tr name="flexible">
          <th height="20">{{ form.change_at|field_as_label_tag }}</th>
          <td>{{form.change_at.as_widget }}</td>
          <td>{{form.change_at.errors }}</td>

          <th height="20">{{ form.only_first_last|field_as_label_tag }}</th>
          <td>{{form.only_first_last.as_widget }}</td>
          <td>{{form.only_first_last.errors }}</td>
      </tr>
       <tr name="flexible">
          <th height="20">{{ form.shiftworktime|field_as_label_tag }}</th>
          <td>{{form.shiftworktime.as_widget }}</td>
          <td>{{form.shiftworktime.errors }}</td>
          <td colspan="3"></td>

      </tr>
      <tr name="normal">
          <th height="20">{{ form.WorkDay|field_as_label_tag }}</th>
          <td>{{form.WorkDay.as_widget }}</td>
          <td>{{form.WorkDay.errors }}</td>
      </tr>
      <tr>

      </tr>
      <tr class="displayN">
          <th height="20">{{ form.is_support_cross|field_as_label_tag }}</th>
          <td>{{form.is_support_cross.as_widget }}</td>
          <td>{{form.is_support_cross.errors }}</td>

          <th height="20">{{ form.cross_days|field_as_label_tag }}</th>
          <td>{{form.cross_days.as_widget }} （{% trans '最多 3 天'  %}）</td>
          <td>{{form.cross_days.errors }}</td>
      </tr>

      <tr name="flexible">
          <th height="20">{{ form.is_ot_ft|field_as_label_tag }}</th>
          <td>{{form.is_ot_ft.as_widget }}</td>
          <td>{{form.is_ot_ft.errors }}</td>

          <th height="20">{{ form.min_ot_time|field_as_label_tag }}</th>
          <td>{{form.min_ot_time.as_widget }}</td>
          <td>{{form.min_ot_time.errors }}</td>
      </tr>
      <tr class="displayN">
          <th height="20">{{ form.breaktimes|field_as_label_tag }}</th>
          <td>{{form.breaktimes.as_widget }}</td>
          <td>{{form.breaktimes.errors }}</td>
      </tr>
   {% for i,k in form.errors.items %}
   {{i}}{{k}}
   {% endfor %}
   

  </table>
</td></tr>


{% endautoescape %}
{% endblock %}


{% block addjs %}
$(function(){
	$("#id_SchName").css({width:"250px"});
    $("#id_CheckInTime1").attr('readonly', true);
    $("#id_StartTime").attr('readonly', true);
    $("#id_CheckInTime2").attr('readonly', true);
    $("#id_CheckOutTime1").attr('readonly', true);
    $("#id_EndTime").attr('readonly', true);
    $("#id_CheckOutTime2").attr('readonly', true);
    $("#id_change_at").attr('readonly', true);
    function type_switch(timetable_type){
        if(timetable_type == '0'){
            $("#id_edit_form input[name=break_times]").attr('disabled', false);
            $("#tbl_iccard_edit tr[name='flexible']").hide();
            $("#tbl_iccard_edit tr[name='normal']").show();
        }
        if(timetable_type == '1'){
            $("#id_edit_form input[name=break_times]").attr('disabled', true);
            $("#tbl_iccard_edit tr[name='normal']").hide();
            $("#tbl_iccard_edit tr[name='flexible']").show();
        }
    };
    function return_origin_data(timetable_type){
        if(timetable_type == '0'){
            $("#tbl_iccard_edit tr[name='flexible'] input,#tbl_iccard_edit tr[name='flexible'] select").each(function(){
                $(this).val($(this).attr('data'));
            });
        }
        if(timetable_type == '1'){
            $("#tbl_iccard_edit tr[name='normal'] input, #tbl_iccard_edit tr[name='normal'] select").each(function(){
                $(this).val($(this).attr('data'));
            });
        }
    };
    function set_origin_data(){
        $("#tbl_iccard_edit tr[name='normal'] input, #tbl_iccard_edit tr[name='normal'] select").each(function(){
            $(this).attr('data', $(this).val());
        });
        $("#tbl_iccard_edit tr[name='flexible'] input,#tbl_iccard_edit tr[name='flexible'] select").each(function(){
            $(this).attr('data', $(this).val());
        });
    };
    function interface_init(){
        var timetable_type = $("#id_timetable_type").val();
        type_switch(timetable_type);

        var elems = [[$("#id_IsOverTime"), $("#id_OverTime")], [$("#id_IsCheckInOverTime"), $("#id_CheckInOverTime")],
                     [$("#id_is_support_cross"), $("#id_cross_days")], [$("#id_is_ot_ft"), $("#id_min_ot_time")]];
        $(elems).each(function(){
            var select_elem = this[0];
            var input_elem = this[1];
            if($(select_elem).val() == '0'){
                $(input_elem).attr('disabled', true);
            }
            $(select_elem).change(function(){
                if($(select_elem).val() == '0'){
                    $(input_elem).attr('disabled', true);
                }else if($(select_elem).val() == '1') {
                    $(input_elem).attr('disabled', false);
                }
            })
        });
        set_origin_data();
        $("#id_timetable_type").change(function(){
            var timetable_type = $(this).val();
            type_switch(timetable_type);
            return_origin_data(timetable_type);
        });
    }
    interface_init();
    function pop_break_form(data){
        var breakbox = '<div id="break_pop"><form id="break_form" action="" style="margin-top: 20px"><table>'
            +'<tr><th><label for="id_break_code" class="required">Break Code:</label></th><td><input id="id_break_code" type="text" name="break_code"></td></tr>'
            +'<tr><th><label for="id_break_name" class="required">Break Name:</label></th><td><input id="id_break_name" type="text" name="break_name"></td></tr>'
            +'<tr><th><label for="id_start_time" class="required">Start Time:</label></th><td><input id="id_start_time" type="text" name="start_time" class="date" format="HH:mm" value="00:00" readonly="True"></td></tr>'
            +'<tr><th><label for="id_end_time" class="required">End Time:</label></th><td><input id="id_end_time" type="text" name="end_time" class="date" format="HH:mm" value="00:00" readonly="True"></td></tr>'
            +'<tr><th><label for="id_break_time" class="required">Break Time:</label></th><td><input id="id_break_time"  type="text" name="break_time" value="0">Mins</td></tr>'
            +'<tr><td style="text-align: right"><input id="id_auto" type="radio" name="break_type" checked="checked"></td><td>AutoDeduct</td></tr>'
            +'<tr><td style="text-align: right"><input id="id_must_punch" type="radio" name="break_type"></td><td>Must punch break in and break out</td></tr>'
            +'<tr><td style="text-align: right"><input id="id_early_choices" type="checkbox" disabled="disabled"></td><td>if come back early before <input id="id_early_over" name="early_over" type=text" value="0" disabled="disabled">Mins Forward to '
            +'<select name="early_type" id="id_early_type" disabled="disabled">'
            +'<option value="0">{% trans '正常工作' %}</option><option value="1">{% trans '平日加班' %}</option></select></td></tr>'
            +'<tr><td style="text-align: right"><input id="id_late_choices"  type="checkbox" disabled="disabled"></td><td>Break Exceed <input id="id_late_over" name="late_over" type="text" value="0" disabled="disabled">Mins Forward to '
            +'<select name="late_type" id="id_late_type" disabled="disabled">'
            +'<option value="0">{% trans '迟到' %}</option><option value="1">{% trans '早退' %}</option><option value="2">{% trans '旷工' %}</option></select></td></tr>'
            +'</table>'
            +'<input type="hidden" id="id_calc_type" name="calc_type">'
            +'<input type="hidden" id="id_is_consider_early" name="is_consider_early">'
            +'<input type="hidden" id="id_is_consider_late" name="is_consider_late">'
            +'</form>'
            +'<div id="id_pop_info" style="margin-top: 10px"></div>'
            +'<div class="btns_class">'
            +'<button class="btn" id="id_OK" type="button">OK</button>'
            +'<button class="btn" id="id_Cancel" type="button">Cancel</button>'
            +'</div></div>'
        $(breakbox).dialog({
            title:gettext("Break Time"),
            on_load:function(obj){
                var form = $("#break_form");
                var obj_id;
                if(data){
                    var elem = data.split(',');
                    obj_id = parseInt(elem[0])
                    $('#id_break_code').val(elem[1]);
                    $('#id_break_name').val(elem[2]);
                    $('#id_start_time').val(elem[3]);
                    $('#id_end_time').val(elem[4]);
                    $('#id_break_time').val(elem[5]);
                    if(parseInt(elem[6]) == 0){
                        $("#id_auto").attr('checked', true);
                    }else{
                        $("#id_must_punch").attr('checked', true);
                        $("#id_early_choices").removeAttr('disabled');
                        $("#id_late_choices").removeAttr('disabled');
                        if(parseInt(elem[7]) == 1){
                            $("#id_early_choices").attr('checked', true);
                            $("#id_early_over").val(elem[8]);
                            $("#id_early_type").val(elem[9]);
                            $("#id_early_over").removeAttr('disabled');
                            $("#id_early_type").removeAttr('disabled');
                        }
                        if(parseInt(elem[10]) == 1){
                            $("#id_late_choices").attr('checked', true);
                            $("#id_late_over").val(elem[11]);
                            $("#id_late_type").val(elem[12]);
                            $("#id_late_over").removeAttr('disabled');
                            $("#id_late_type").removeAttr('disabled');
                        }
                    }
                }
                $(form).validate({
                    rules:{
                        "break_code":{required:true},
                        "break_name":{required:true},
                        "start_time":{required:true},
                        "end_time":{required:true},
                        "break_time":{required:true, digits:true,min:0},
                        "early_over":{digits:true,min:0},
                        "late_over":{digits:true,min:0},
                    },
                    errorPlacement: function(error, element) {
                        error.appendTo(element.parent());
                    }
                });
                render_widgets(form);
                //$("#id_start_time").change(function(){
                //    var start_time = $("#id_start_time").val();
                //    var end_time = $("#id_end_time").val();
                //    var sts = start_time.split(':');
                //    var ets = end_time.split(':');
                //    var etms = ets[0]*60 + ets[1];
                //    var stms = sts[0]*60 + sts[1];
                //    var ds = Math.abs(etms - stms);
                //    $('#id_break_time').val(ds);
                //});
                //$("#id_end_time").change(function(){
                //    var start_time = $("#id_start_time").val();
                //    var end_time = $("#id_end_time").val();
                //    var sts = start_time.split(':');
                //    var ets = end_time.split(':');
                //    var stms = parseInt(ets[0])*60 + parseInt(ets[1]);
                //    var etms = parseInt(sts[0])*60 + parseInt(sts[1]);
                //    var ds = Math.abs(etms - stms);
                //    $('#id_break_time').val(ds);
                //});
                $("#id_must_punch").click(function(){
                    $("#id_early_choices").removeAttr('disabled');
                    $("#id_late_choices").removeAttr('disabled');
                });
                $("#id_auto").click(function(){
                    $("#id_early_choices").attr('disabled', 'disabled');
                    $("#id_late_choices").attr('disabled', 'disabled');
                })
                $("#id_early_choices").click(function(){
                    if($(this).attr('checked')){
                        $("#id_early_over").removeAttr('disabled');
                        $("#id_early_type").removeAttr('disabled');
                    }else{
                        $("#id_early_over").attr('disabled', 'disabled');
                        $("#id_early_over").val(0);
                        $("#id_early_type").attr('disabled', 'disabled');
                        $("#id_early_type").val(0);
                    }
                })
                $("#id_late_choices").click(function(){
                    if($(this).attr('checked')){
                        $("#id_late_over").removeAttr('disabled');
                        $("#id_late_type").removeAttr('disabled');
                    }else{
                        $("#id_late_over").attr('disabled', 'disabled');
                        $("#id_late_over").val(0);
                        $("#id_late_type").attr('disabled', 'disabled');
                        $("#id_late_type").val(0);
                    }
                })
                $("#break_pop").find("#id_OK").click(function(){
                    $("#id_pop_info").html('');
                    if($("#id_must_punch").attr('checked')){
                        $("#id_calc_type").val(1);
                        $("#id_is_consider_early").val(0);
                        if($("#id_early_choices").attr('checked')){
                            $("#id_is_consider_early").val(1)
                        }
                        $("#id_is_consider_late").val(0);
                        if($("#id_late_choices").attr('checked')){
                            $("#id_is_consider_late").val(1)
                        }
                    }else{
                        $("#id_calc_type").val(0);
                    };
                    if($(form).valid()){
                        var form_data = form.serialize();
                        var schclass_id = $("#id_model_pk").val();
                        var save_url = '/att/save_break_time/?s='+schclass_id;
                        var break_time = parseInt($("#id_break_time").val());
                        var early_over = parseInt($("#id_early_over").val());
                        var late_over = parseInt($("#id_late_over").val());
                        if (early_over > break_time){
                            $("#id_pop_info").html('<ul class="errorlist"><li>'+gettext('提早时长不能大于休息时长')+'</li></ul>');
                            return false;
                        }
                        var start_time = $("#id_start_time").val();
                        var end_time = $("#id_end_time").val();
                        var sts = start_time.split(':');
                        var ets = end_time.split(':');
                        var stms = parseInt(ets[0])*60 + parseInt(ets[1]);
                        var etms = parseInt(sts[0])*60 + parseInt(sts[1]);
                        var ds = Math.abs(etms - stms);
                        if (late_over > (ds - break_time) ){
                            $("#id_pop_info").html('<ul class="errorlist"><li>'+gettext('超出时间不能大于总时长扣除休息时长')+'</li></ul>');
                            return false;
                        }
                        if(obj_id){
                            save_url = save_url + '&k=' + obj_id;
                        }
                        $.ajax({
                            url: save_url,
                            type: 'POST',
                            dataType: 'json',
                            data: form_data,
                            success: function(callback){
                                var ret = callback['ret'];
                                if(ret == 'ok'){
                                    $("#id_close", "#break_pop").click();
                                    $(".bgiframe78").remove();
                                    init_break_table();
                                }else{
                                    var msg = callback['error'];
                                    $("#id_pop_info").html('<ul class="errorlist"><li>'+msg+'</li></ul>');
                                }
                            },
                            error: function(){
                            }
                        });
                    }
                });
                $("#break_pop").find("#id_Cancel").click(function(){
                    $("#id_close", "#break_pop").click();
                    $(".bgiframe78").remove();
                });
            }
        });
    }
    $("#break_add").click(function(){
        pop_break_form();
    });
    function init_break_table(){
        $.ajax({
            url: '/att/get_break_time_list/',
            type: 'GET',
            dataType: 'json',
            success: function(callback){
                $('#id_break_table tbody').empty();
                var schclass_id = $("#id_model_pk").val();
                var data_list = callback['ret'];
                var breaktime = $("#id_breaktimes").val();
                var bts = breaktime.split(',');
                for(var i=0; i < data_list.length; i++){
                    var data = data_list[i];
                    var break_type = '';
                    if(data[6] == 0){
                        break_type = '{% trans 'AutoDecute' %}';
                    } else{
                        break_type = '{% trans 'MustPunch' %}';
                    }
                    var ck= '';
                    for(var j=0; j < bts.length; j++){
                        if(bts[j] == data[0]){
                            ck = 'checked';
                            var input = $('<input type="hidden" name="break_times" value="'+data[0]+'">');
                            $("#id_edit_form").append(input);
                        }
                    }
                    var row = '<tr>'
                        +'<td><input type="checkbox" value="'+data[0]+'" '+ck+'></td>'
                        +'<td>'+data[1]+'</td>'
                        +'<td>'+data[2]+'</td>'
                        +'<td>'+data[3]+'</td>'
                        +'<td>'+data[4]+'</td>'
                        +'<td>'+data[5]+'</td>'
                        +'<td>'+break_type+'</td>'
                        +'<td><a href="javascript:void(0);" style="margin-right: 10px;" data="'+data+'">{% trans '编辑' %}</a>'
                        +'<a href="javascript:void(0);" style="margin-right: 10px;" ref="/att/del_break_time/?s='+schclass_id+'&k='+data[0]+'">{% trans '删除' %}</a></td>'
                        +'</tr>'
                    $('#id_break_table tbody').append(row);
                }
                $("#id_break_table").find('input[type=checkbox]').click(function(){
                    var data = $(this).val();
                    var form = $("#id_edit_form");
                    var input = $('<input type="hidden" name="break_times" value="'+data+'">');
                    if($(this).attr('checked')){
                        $(form).append(input);
                    }else{
                        $('input[name=break_times][value='+data+']').remove();
                    }
                });
                $("#id_break_table").find('a').click(function(){
                    var ref = $(this).attr('ref');
                    var data = $(this).attr('data');
                    if(data){
                        pop_break_form(data);
                    }else{
                        if(confirm(gettext("确定要删除数据吗?"))){
                            $.ajax({
                                url: ref,
                                type: 'POST',
                                dataType: 'json',
                                success: function(callback){
                                    var ret = callback['ret'];
                                    if(ret == 'failed'){
                                        var msg = callback['error']
                                        alert(msg);
                                    }
                                    init_break_table();
                                },
                                error: function(){}
                            });
                        }
                    }
                });
            },
            error: function(){
            }
        });
    };
    init_break_table();
});
{% endblock %}