{% extends 'data_grid.html' %}
{% load i18n static %}
{% block main_body %}
  <div class="layui-row layui-col-space15" style="margin-bottom: 0px">
    <div class="layui-col-md10">
      <table id="id_grid_{{ model_name }}" class="layui-hide" lay-filter="{{ model_name }}"></table>
      <script type="text/html" id="{{ model_name }}_toolbar">
        <div class="layui-btn-container grid-toolbar" style="">
          <ul class="layui-nav"></ul>
        </div>
      </script>
    </div>
    <div class="layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header" style="background-color: #e7e7e7">{% trans 'attendance_capture' %}</div>
        <div class="layui-card-body">
          <div>
            <div style="padding: 5px" align="center">
              <img id="id_employeeCapture" class="transaction-capture" src='/media/images/userImage.gif'
                   onerror="this.src='/media/images/userImage.gif';" alt="">
            </div>
            <div>
              <table id="capture-detail" class="captureRowPanel">
                <tbody>
                <tr>
                  <th>{% trans 'transaction_field_employeeCode' %}</th>
                  <td>
                    <div id="empCodePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_firstName' %}</th>
                  <td>
                    <div id="firstNamePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_lastName' %}</th>
                  <td>
                    <div id="lastNamePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_department' %}</th>
                  <td>
                    <div id="departmentPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_position' %}</th>
                  <td>
                    <div id="positionPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_punchDate' %}</th>
                  <td>
                    <div id="punchDatePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_punchTime' %}</th>
                  <td>
                    <div id="punchTimePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_area' %}</th>
                  <td>
                    <div id="areaPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_terminalSN' %}</th>
                  <td>
                    <div id="terminalSNPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'transaction_field_uploadTime' %}</th>
                  <td>
                    <div id="uploadTimePanel">-</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block grid_opt_update %}
  var cols = res['grid_opts']['cols'][0];
  var payload = {};
  cols.forEach(function(col, index){
    payload[col.field] = col;
  });
{% endblock %}
{% block actionAfterTableRender %}
  layui.use(['table', 'form'], function(){
  var table = layui.table, form=layui.form;
  form.render();
  setTimeout(function () {
     table.on('row({{ model_name }})', function(obj){
        var data = obj.data;
        var dd = data.transaction_punch_date;
        var dt = data.transaction_punch_time;
        var dtStr = dd.replace(/-/g, '') + dt.replace(/:/g, '');
        var seconds = (Date.parse(dtStr)) / 1000;
        punch_time_of_epoch = data.punch_time_of_epoch
        if (data.terminal_sn === "App"){
          var url = "/files/upload/" + dd.replace(/-/g, '').substring(0, 6) + "/" + data.terminal_sn.replace(/:/g, "-") + "/" + punch_time_of_epoch + "-" +
            data.emp_code +".jpg";
        } else {
          var url = "/files/upload/" + dd.replace(/-/g, '').substring(0, 6) + "/" + data.terminal_sn.replace(/:/g, "-") + "/" + dtStr + "-" + data.emp_code + ".jpg";
        }
        $("#id_employeeCapture").attr('src', url);
        $("#empCodePanel").html(data.emp_code);
        $("#firstNamePanel").html(data.employee_name);
        $("#lastNamePanel").html(data.employee_last_name);
        $("#departmentPanel").html(data.employee_department);
        $("#positionPanel").html(data.employee_position);
        $("#punchDatePanel").html(data.transaction_punch_date);
        $("#punchTimePanel").html(data.transaction_punch_time);
        $("#areaPanel").html(data.area_alias);
        $("#terminalSNPanel").html(data.terminal_sn);
        $("#uploadTimePanel").html(data.upload_time);
        });
  }, 500);
  })
{% endblock %}

