{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: 'representationallowances.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 loadFilteredData() {
        var year = $('#yearFilter').val();

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

        $.ajax({
            url: 'representationallowances.php?do=show&ajax=1',
            type: 'GET',
            data: { year: year },
            success: function (response) {
              
                $('#tableBody').html(response);
                if ($.fn.DataTable.isDataTable('#example')) {
                    $('#example').DataTable().destroy();
                }
                $('#example').DataTable({ "bPaginate": false, "bStateSave": true, "scrollX": true });
            },
            error: function () {
                alert('حدث خطأ أثناء تحميل البيانات');
            }
        });
    }

    $('#yearFilter').on('change', function () {
        loadFilteredData();
    });
    if ($('#yearFilter').val() !== "") {
        loadFilteredData();
    }
});
</script>
{/literal}
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> شئون العاملين</a></li>
            <li><a href="representationallowances.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="representationallowances.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="representationallowances.php?do=importExcel" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="year" id="hiddenYear">
            
  <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="representationallowancessheet" 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 class="table table-bordered table-striped" id="example" style="direction: rtl; text-align: center; border: 2px solid #000;">
<thead>
    <tr>
            <th colspan="2"></th>
            <th style="vertical-align: middle; border: 1px solid #ddd; text-align:center;" colspan="8">الاستحقاقات</th>
            <th style="vertical-align: middle; border: 1px solid #ddd; text-align:center;" colspan="10">الاستقطاعات</th>

        </tr>
         <tr style="background-color: #f5f5f5; color: #333;"> <th style="vertical-align: middle; border: 1px solid #ddd;" rowspan="2">م</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" rowspan="2" >الاسم</th>
            <th  style="text-align: center; border: 1px solid #ddd;" colspan="2"></th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2">بدل حضور جلسة </th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2">بدل انتقال</th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2">قيمة المستحق</th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2"> </th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2"> </th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2"> </th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2"> </th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2">دمغة عادية</th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2" >جملة المستقطع</th>
            <th  style="text-align: center; border: 1px soli d#ddd;" colspan="2" >الصافي المستحق</th>
            <th  style="vertical-align: middle; border: 1px solid #ddd;" rowspan="2">اضافات اخري</th>
            <th  style="vertical-align: middle; border: 1px solid #ddd;" rowspan="2">خصومات اخري</th>
            <th  style="vertical-align: middle; border: 1px solid #ddd;" rowspan="2">العمليات</th>
        </tr>
           <tr>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ق</th>
            <th style="vertical-align: middle; border: 1px solid #ddd;" >ج</th>
            
           

        </tr>
</thead>
<tbody id="tableBody">
        {if $showData}
            {include file="representationallowancesview/table_rows.html"}
        {/if}
</tbody>
</table>