{literal}
<script type="text/javascript">
 
$(document).ready(function () {
    $(document).on('click', '.edit_cell', function() {
        if ($(this).find('input').length > 0) return;

        let cell = $(this);
        let currentValue = cell.text().trim();
        let id = cell.data('id');
        let col = cell.data('column');

      
        cell.html('<input type="text" class="form-control" value="' + currentValue + '" ' +
                  'style="width:100%; height:26px; text-align:center; border:1.5px solid #337ab7; border-radius:4px; font-weight:bold;">');
        
        let input = cell.find('input');
        input.focus().select();

       
        input.on('blur keypress', function(e) {
            if (e.type === 'keypress' && e.which != 13) return;

            let newValue = $(this).val().trim();
            if (newValue === currentValue) {
                cell.text(currentValue);
                return;
            }

            console.log({id: id, column: col, value: newValue}); 

            $.ajax({
                url: 'employeesreport.php?do=ajax_update',
                type: 'POST',
                data: {id: id, column: col, value: newValue},
                success: function(response) {
                    response = response.trim();
                    if (response === "success") {
                        cell.text(newValue);
                        cell.css('background-color','#d4edda');
                        setTimeout(()=>cell.css('background-color',''),700);
                        calculateTotalDeductions(id);
                    } else {
                        alert("حدث خطأ: " + response);
                        cell.text(currentValue);
                    }
                },
                error: function(xhr, status, error) {
                    alert("خطأ في الاتصال بالسيرفر: " + error);
                    cell.text(currentValue);
                }
            });
        });
    });

  
    function calculateTotalDeductions(id) {
        let earn_j  = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="earn_j"]').text()) || 0;
        let earn_q  = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="earn_q"]').text()) || 0;
        let stamp_j = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="stamp_j"]').text()) || 0;
        let stamp_q = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="stamp_q"]').text()) || 0;
        let s_j     = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="s_j"]').text()) || 0;
        let s_q     = parseFloat($('.edit_cell[data-id="'+id+'"][data-column="s_q"]').text()) || 0;

        let total = (earn_j + earn_q/100) + (stamp_j + stamp_q/100) + (s_j + s_q/100);
        $('#total_deduct_' + id).text(total.toFixed(2));
    }
});

  $(document).ready(function () {
        $('#example').dataTable({
            "bPaginate": false,
            "bStateSave": true,
            "sDom": 'TCR<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
                    "copy",
                    "print",
                   
                    {
                        "sExtends": "collection",
                        "sButtonText": "حفظ",
                        "aButtons": ["csv", "xls"]
                    }
                ]
            }
        });
    });
$(document).ready(function () {

    function loadFilteredData() {
        var year = $('#yearFilter').val();
        var employee_id = $('#employeeFilter').val();

        if (year === '' || employee_id === '') {
            $('#tableBody').html(
                '<tr><td colspan="13" style="text-align:center;padding:30px;">اختر الموظف والسنة لعرض البيانات</td></tr>'
            );
            return;
        }

        $.ajax({
            url: 'employeesreport.php?do=show&ajax=1',
            type: 'GET',
            data: {
                year: year,
                employee_id: employee_id
            },
            success: function (response) {
                $('#tableBody').html(response);
            },
            error: function () {
                alert('حدث خطأ أثناء تحميل البيانات');
            }
        });
    }

    $('#yearFilter, #employeeFilter').on('change', function () {
        loadFilteredData();
    });

});
</script>
{/literal}
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> شئون العاملين</a></li>
            <li><a href="employeesreport.php?do=show">تقرير موظف</a></li>
            <li class="active">عرض</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading" style="padding:5px 15px 15px">
                <h3 class="panel-title" style="display: inline-block;">عرض</h3>
                <a href="{$youtubes[47]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>
                <a href="employeesreport.php" class="hidden-print"><input type="button"  id="submit" style="margin-left: 12px" class="btn btn-primary pull-left " value="اضافة جديد"/></a>
            </div>
            <div class="panel-body">
                <div id="outputString" class="alert alert-block alert-success fade in" style="display:none">
                    <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <p id="outputStringValue">{$outputString}</p>
                    <div class="clearfix"></div>
                </div>
            </div>
            <hr/>

            <!-- Table -->
   <!-- الموظف -->
  


<input type="hidden" id="yearSelector" value="{$currentYear}">
<form id="uploadForm" action="employeesreport.php?do=importExcel" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="year" id="hiddenYear">
      <select id="employeeFilter" name="employee_id" class="form-control" style="width:250px; display:inline-block;">
        <option value="">-- اختر الموظف --</option>

        {foreach $employees as $emp}
            <option value="{$emp.id}"
                {if $currentEmployee == $emp.id}selected{/if}>
                {$emp.name}
            </option>
        {/foreach}
    </select>
            
  <select id="yearFilter" class="form-control" style="width:200px; display:inline-block;">
        <option value="">-- اختر السنة --</option>

        {for $y=2020 to 2050}
            <option value="{$y}"
                {if $currentYear == $y}selected{/if}>
                {$y}
            </option>
        {/for}
    </select>

    <input type="file" name="employeessheet" id="file_up" style="display:none;" onchange="submitWithYear()">
    
    <button type="button" onclick="checkYearBeforeUpload()" style="background: #2196F3; color: white; padding: 10px 20px; border: none; border-radius:5px; font-weight: bold;">
       <i class="fa fa-file-excel-o"></i> اضافة ملف اكسيل
    </button>
</form>

<script>
function checkYearBeforeUpload() {
    let year = $('#yearFilter').val();

    if (!year) {
        alert("من فضلك اختر السنة أولاً");
        return;
    }

    $('#file_up').click();
}

function submitWithYear() {
   
    let year = $('#yearFilter').val();
    document.getElementById('hiddenYear').value = year;
    document.getElementById('uploadForm').submit();
};

</script>
<table border="1" style="border-collapse:collapse; width:100%; text-align:center; direction:rtl; font-family:Arial;" >
<tbody id="tableBody">
        {if $showData}
            {include file="employeesreportview/table_rows.html"}
        {/if}
</tbody>
</table>