<script type="text/javascript" charset="utf-8">


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

</script>

<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> الشئون الادارية</a></li>
            <li><a href="outandin.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="outandin.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 -->
            {literal}
            <form method="post" action="outandin.php?do=show" onsubmit="if (Spry.Widget.Form.validate(this)) {
                        return true;
                    } else {
                        return false;
                    }">
                {/literal}
                
       <div class="filter-bar" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px; background: #f9f9f9; padding: 15px; border-radius: 8px;">
        
             <div style="display: flex; align-items: center; gap: 5px;">
                <label style="font-weight: bold; white-space: nowrap; margin: 0;">المستلم</label>
                <select id="receiver_name" class="form-control" style="width: 220px; height: 34px;">
                    <option value="">كل الأعضاء</option>
                    {foreach $allNames as $name}
                        <option value="{$name.name}" {if $smarty.get.receiver_name == $name.name}selected{/if}>
                            {$name.name}
                        </option>
                    {/foreach}
                </select>
            </div>
                <div style="display: flex; align-items: center; gap: 5px;">
                    <label style="font-weight: bold; white-space: nowrap; margin: 0;">الإدارة</label>
                    <select id="adminstration" class="form-control" style="width: 180px; height: 34px;">
                        <option value="">كل الإدارات</option>
                        {foreach $allAdministrations as $admin}
                            <option value="{$admin.id}" {if $smarty.get.adminstration == $admin.id}selected{/if}>
                                {$admin.administration}
                            </option>
                        {/foreach}
                    </select>
                </div>
    <div style="display: flex; align-items: center; gap: 10px;">
        <label style="margin: 0; white-space: nowrap; font-weight: bold;">من تاريخ:</label>
        <input type="date" id="from_date" class="form-control" style="width: 160px;" value="{$smarty.get.from_date}">
    </div>

    <div style="display: flex; align-items: center; gap: 10px;">
        <label style="margin: 0; white-space: nowrap; font-weight: bold;">إلى تاريخ:</label>
        <input type="date" id="to_date" class="form-control" style="width: 160px;" value="{$smarty.get.to_date}">
    </div>
       </div>
<div>
    <button type="button" onclick="filterData()" class="btn btn-primary" style="padding: 6px 20px;">
        <i class="fa fa-filter"></i> عرض النتائج
    </button>

    <a href="outandin.php?do=show" class="btn btn-default" style="text-decoration: none;">إظهار الكل</a>
</div>
                <table class="display table-black" id="example">
                    <thead>
                        <tr>
                            <th>الرقم</th>
                            <th class="hidden-print">الموضوع</th>
                            <th class="hidden-print">النوع</th>
                            <th class="hidden-print">رقم الصادر</th>
                            <th class="hidden-print">رقم الوارد</th>
                            <th class="hidden-print"> التاريخ</th>
                            <th class="hidden-print">عدد المرفقات</th>
                            <th class="hidden-print">تعليق</th>
                            <th>اسم المستخدم</th>
                            <th>تاريخ الاضافة/التعديل</th>
                            <th class="hidden-print">تعديل</th>

                        </tr>
                    </thead>
                    <tbody>

                        {foreach $showData as $data}
                        <tr>
                            <td>{$data.id}</td>
                            <td>{$data.subject}</td>
                            <td>
                                {if $data.type == in}
                                    وارد 
                                {elseif $data.type == out}
                                   صادر
                                {/if}
                            </td>
                            <td class="edit_cell" data-id="{$data.id}" data-column="ord_num">{$data.ord_num}</td>
                            <td class="edit_cell" data-id="{$data.id}" data-column="incoming">{$data.incoming}</td>
                            <td>{$data.date}</td>  
                            <td>{$data.num}</td>
                            <td>{$data.comment}</td>
                            <td>{$data.employeename}</td>
                            <td>{$data.sys_date}</td>
                            <td class="hidden-print"> <a href="outandin.php?do=edit&id={$data.id}" class="btn btn-default btn-lg editicon"></a> </td>
                        </tr>
                        {/foreach}

                    </tbody>

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

            </form>
        </div>

    </div>
</div>
{literal}
<script type="text/javascript">
    var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {isRequired: false, invalidValue: "-1"});
    
function filterData() {
    var receiver = document.getElementById('receiver_name').value;
    var from = document.getElementById('from_date').value;
    var to = document.getElementById('to_date').value;
    var adminstration = document.getElementById('adminstration').value;
var url = "outandin.php?do=show";
    
    if (receiver) {
        url += "&receiver_name=" + encodeURIComponent(receiver);
    }
    if (adminstration) {
        url += "&adminstration=" + encodeURIComponent(adminstration);
    }
    if (from || to) {
        if (from && to) {
            url += "&from_date=" + from + "&to_date=" + to;
        } else {
            alert("عند البحث بالتاريخ، يجب اختيار 'من تاريخ' و 'إلى تاريخ' معاً.");
            return;
        }
    }
    
if (!receiver && !adminstration && !from && !to) {
            alert("برجاء اختيار محدد بحث واحد على الأقل للفلترة");
        return;
    }
    
    window.location.href = url;
};
$(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: 'outandin.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);
                        
                    } else {
                        alert("حدث خطأ: " + response);
                        cell.text(currentValue);
                    }
                },
                error: function(xhr, status, error) {
                    alert("خطأ في الاتصال بالسيرفر: " + error);
                    cell.text(currentValue);
                }
            });
        });
    });
});
</script>
{/literal}