{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: 'loans.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": "حفظ",
                    }
                        
                ]
            }
        });
    });
</script>
{/literal}
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> شئون العاملين</a></li>
            <li><a href="loans.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="loans.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 -->
            
            
    <div style="margin-bottom: 20px; width: 300px;">
    <label>اختر شهر الرفع:</label>
    <select id="monthSelector" name="month" class="form-control">
        <option value="">-- اختر الشهر --</option>
        {for $m=1 to 12}
            <option value="{$m}" {if $currentMonth == $m}selected{/if}>شهر {$m}</option>
        {/for}
    </select>
</div>

<form id="uploadForm" action="loans.php?do=importExcel" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="month" id="hiddenMonth">
    
    <input type="file" name="loanssheet" id="file_up" style="display:none;" onchange="submitWithMonth()">
    
    <button type="button" onclick="checkMonthBeforeUpload()" 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 checkMonthBeforeUpload() {
    let month = $('#monthSelector').val();

    if (!month) {
        alert("من فضلك اختر الشهر أولاً قبل اختيار ملف الإكسيل");
        return;
    }

    // مهم جدًا
    $('#hiddenMonth').val(month);

    // فتح اختيار الملف
    $('#file_up').click();
}

function submitWithMonth() {
    let month = $('#monthSelector').val();

    if (!month) {
        alert("الشهر غير موجود");
        return;
    }

    // مهم جدًا
    $('#hiddenMonth').val(month);


    $('#uploadForm').submit();
}

$('#monthSelector').on('change', function () {
    let selectedMonth = $(this).val();

    if (selectedMonth !== "") {
        window.location.href =
            'loans.php?do=show&month=' + selectedMonth;
    }
});

</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>
            <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="salariesTableBody">
        {include file="loansview/table_rows.html"}
      
       
    </tbody>
</table>
    </div>
</div>

                
                <div class="clearfix"></div>

            </form>
        </div>

    </div>
</div>