{% extends 'staff/report/base.html' %}
{% load i18n %}
{% block opts_modify %}
   var baseCols = [
    {field:'emp_code', width:120, title: "{% trans 'report_column_empCode' %}", sort: true}
    ,{field:'first_name', title: "{% trans 'report_column_firstName' %}", width:120}
    ,{field:'last_name', title: "{% trans 'report_column_lastName' %}", width:120}
    ,{field:'nick_name', title: "{% trans 'report_column_nickName' %}", width:80}
    ,{field:'gender', width:80, title: "{% trans 'report_column_gender' %}", width:60}
    ,{field:'dept_code', title: "{% trans 'report_column_departmentCode' %}", width:60}
    ,{field:'dept_name', width:140, title: "{% trans 'report_column_departmentName' %}", width:120}
    ,{field:'position_code', title: "{% trans 'report_column_positionCode' %}", width:60}
    ,{field:'position_name', title: "{% trans 'report_column_positionName' %}", width:120}
    ,{field:'att_date', width:80, title: "{% trans 'report_column_attendanceDate' %}", sort: true, width:100}
    ,{field:'timetable', title: "{% trans 'report_column_timetable' %}", width:120}
    ,{field:'total_time', title: "{% trans 'report_column_summaryTotalTimeDuration' %}", width:120}
  ];
  var _cols = $.extend(true, [], baseCols);
  var periodCount = 1;
    $.ajax({
        type: "get",
        url: '/att/api/mulTransactionReport/period_count/',
        cache:false,
        async:false,
        dataType: "json",
        success: function(response, xhr){
            periodCount = response.data;
        }
    });
    _cols = $.extend(true, [], baseCols);
    for(var i=0; i < periodCount; i ++){
      _cols.push({field:'clock_in'+i, title: "{% trans 'report_column_clockInTime' %}", width:100});
      _cols.push({field:'clock_out'+i, title: "{% trans 'report_column_clockOutTime' %}", width:100});
      _cols.push({field:'total_time'+i, title: "{% trans 'report_column_totalTimeDuration' %}", width:100});
    }
    _cols.push({field:'total_all', title: "{% trans 'report_column_totalWorkedDuration' %}", width:120});
  $.extend(opts, {
      cols: [_cols]
      ,method: "get"
      ,url: "/att/api/mulTransactionReport/"
  });
{% endblock %}
{% block columns_modify %}
    var cols = [], urlStr = '/att/multipletransactioncolumns/';
    var periodCount = 1;
    $.ajax({
        type: "get",
        url: '/att/api/mulTransactionReport/period_count/',
        data: c,
        cache:false,
        async:false,
        dataType: "json",
        success: function(response, xhr){
            periodCount = response.data;
        }
    });
   _cols = $.extend(true, [], baseCols);
    for(var i=0; i < periodCount; i ++){
      _cols.push({field:'clock_in'+i, title: "{% trans 'report_column_clockInTime' %}", width:100});
      _cols.push({field:'clock_out'+i, title: "{% trans 'report_column_clockOutTime' %}", width:100});
      _cols.push({field:'total_time'+i, title: "{% trans 'report_column_totalTimeDuration' %}", width:100});
    }
    _cols.push({field:'total_all', title: "{% trans 'report_column_totalWorkedDuration' %}", width:120});
    $.extend(opts, {
        cols: [_cols]
        ,method: "get"
        ,url: "/att/api/mulTransactionReport/"
        ,where:c
        ,page: {curr: 1}
    });
    var _tb = table.reload(tb.config.id, opts)
    var export_headers =[];
    var report_headers = _cols;
    var url = '/att/api/mulTransactionReport/export/?';
    report_headers.forEach(function (item) {
        if (item.hide === false)
            export_headers.push(item.field)
    })
    url += 'start_date=' + c.start_date + '&end_date=' + c.end_date
        +'&export_headers=' + export_headers;
    $("#{{model_name}}_fluid" + " div.grid-toolbar").actions({
        container: "#{{model_name}}_fluid",
        actionContainer: "#{{model_name}}_fluid" + " div.grid-toolbar",
        model: "{{model_name}}",
        table: table,
        tableId: "id_grid_{{model_name}}",
        form: form,
        element: element,
        curTable: tb,
        gridOpts: "",
        actions: "",
        export_url: url,
        disabled_fields_url: "",
        init_disabled_fields: [],
        dimension: {height: "auto", width: "auto"},
        disabled_action_panel_east: ["history"],
        prefer_best_fit_op: 'best_fit',
        callback: {}
      });
    form.on("submit({{ model_name }}-search)", function (data) {
                refreshReport('');
            });
{% endblock %}
