{% extends 'data_grid.html' %}
{% load i18n static common %}
{% 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 filter_extra_bar %}
<div id="id_transaction_extra_bar" class="layui-inline layui-col-md10">
  <form id="transaction-search-form" action="" class="layui-form fixed-search-form att-report-search-form">

    <div class="layui-form">
      <div class="layui-input-inline" style="width: 150px;">
        <select name="timeRange" id="timeRangeSelect" lay-filter="timeRangeFilter">
          <option value="today" selected>{% trans 'Today' %}</option>
          <option value="yesterday">{% trans 'Yesterday' %}</option>
          <option value="this_week">{% trans 'This week' %}</option>
          <option value="this_month">{% trans 'This Month' %}</option>
          <option value="this_year">{% trans 'This Year' %}</option>
        </select>
      </div>
      <div class="layui-input-inline" style="width: 150px;">
        <input type="text" name="start_date" id="startDateInput" placeholder="{% trans 'Start date' %}"
          class="layui-input" autocomplete="off">
      </div>
      <div class="layui-input-inline" style="width: 150px;">
        <input type="text" name="end_date" id="endDateInput" placeholder="{% trans 'End date' %}" class="layui-input"
          autocomplete="off">
      </div>

      <div class="layui-inline">
        <div class="button-3d transaction-search" lay-submit="" lay-filter="transaction-search">
          <i class="fa fa-fw fa-search" style="top: 5px !important;"></i>
        </div>
      </div>


    </div>
  </form>
</div>
{% endblock filter_extra_bar %}


{% block grid_opt_update %}
var today = new Date();
today = today.getFullYear()+'-'+String(today.getMonth() + 1).padStart(2, '0')+'-'+String(today.getDate()).padStart(2,
'0');
data_grid_opts[data_grid_opts.table_id] = {'init_where': {_p1_punch_time__gte: today,_p1_punch_time__lte: today}};

{% endblock %}


{% block actionAfterTableRender %}
layui.use(['table', 'form', 'laydate'], function(){
var table = layui.table, form=layui.form, laydate = layui.laydate;
form.render();

// Helper function to format date as YYYY-MM-DD
function formatDate(date) {
var year = date.getFullYear();
var month = String(date.getMonth() + 1).padStart(2, '0');
var day = String(date.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}

// Helper function to get start of week (Monday)
function getStartOfWeek(date) {
var d = new Date(date);
var day = d.getDay();
var diff = d.getDate() - day + (day === 0 ? -6 : 1);
return new Date(d.setDate(diff));
}

// Function to set date range based on selected option
function setDateRange(rangeType) {
var today = new Date();
var startDate, endDate;

switch(rangeType) {
case 'today':
startDate = today;
endDate = today;
break;
case 'yesterday':
startDate = new Date(today);
startDate.setDate(today.getDate() - 1);
endDate = startDate;
break;
case 'this_week':
startDate = getStartOfWeek(today);
endDate = today;
break;
case 'this_month':
startDate = new Date(today.getFullYear(), today.getMonth(), 1);
endDate = today;
break;
case 'this_year':
startDate = new Date(today.getFullYear(), 0, 1);
endDate = today;
break;
default:
startDate = new Date(today.getFullYear(), today.getMonth(), 1);
endDate = today;
}

$('#startDateInput').val(formatDate(startDate));
$('#endDateInput').val(formatDate(endDate));
}

// Initialize laydate for start and end date inputs
var startDatePicker = laydate.render({
elem: '#startDateInput',
format: 'yyyy-MM-dd',
done: function(value, date, endDate) {

}
});

var endDatePicker = laydate.render({
elem: '#endDateInput',
format: 'yyyy-MM-dd',
done: function(value, date, endDate) {

}
});

// Function to reload table with date parameters
function reloadTableWithDates() {
var startDate = $('#startDateInput').val();
var endDate = $('#endDateInput').val();
var timeRange = $('#timeRangeSelect').val();

var filterParams = $.fn.get_filter_params('{{ model_name }}') || {};
var newWhere = $.extend({}, filterParams, {
_p1_punch_time__gte: startDate,
_p1_punch_time__lte: endDate
});


table.reload(data_grid_opts.table_id, {
where: newWhere
});
}

// Listen to time range dropdown change event
form.on('select(timeRangeFilter)', function(data){
var rangeType = data.value;
setDateRange(rangeType);
reloadTableWithDates();
});

// Listen to search button click event
form.on('submit(transaction-search)', function(data){
reloadTableWithDates();
return false; // Prevent form submission
});

// Initialize date range on page load (no reload needed, table already loaded with init_where)
setDateRange('today');

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 = "/authenticated_file/upload/" + dd.replace(/-/g, '').substring(0, 6) + "/" + data.terminal_sn.replace(/:/g,
"-") + "/" + punch_time_of_epoch + "-" +
data.emp_code +".jpg";
} else {
var url = "/authenticated_file/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 %}