@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('page-content')
    <section class="content-header">
        <h1>جرد المخازن
        </h1>
    </section>
    <section class="content">
        <div class="table-responsive">
            <table id="items_table" class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>اسم المنتج</th>
                    <th>الباركود</th>
                    <th>الكمية الحالية</th>
                    <th>الكمية الموجودة</th>
                </tr>
                </thead>
                <tbody id="product_form">
                                </tbody>
                <tfooter>
                    <tr>
                        <td colspan="5">
                            <button class="btn btn-primary " id="save_button"><i class="fa fa-water"></i> حفظ وتسوية
                            </button>
                        </td>
                    </tr>
                </tfooter>
            </table>
        </div>
    </section>
@stop
@section('js')
    <script>
        $(document).ready(function () {
            let transferQtyValues = {};
            $('#items_table').DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "searching": true,
                "ajax": {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('stocktaking.getItemsByStoreId') }}",
                    type: 'POST',
                    data: function (d) {
                        d.store_id = {{ $transaction->store_id }};
                    }
                },
                "columnDefs": [{
                    "targets": "_all",
                    "defaultContent": ""
                }],
                "columns": [
                    {"data": "DT_RowIndex", "orderable": false, "searchable": false},
                    {"data": "item_name"},
                    {"data": "bar_code"},
                    {"data": "qty"},
                    {
                        "data": "transfer_qty",
                        "render": function (data, type, row) {
                            const itemQtyValue = getStoredValue(data, 'transfer-qty');
                            return '<input type="text" autocomplete="off" value="' + itemQtyValue + '" class="transfer-qty" data-id="' + data + '">';

                        }
                    }

                ]
            });
            // Event handlers for input changes
            $('#items_table').on('input', '.transfer-qty', function () {
                const rowId = $(this).attr('data-id');
                transferQtyValues[rowId] = $(this).val();
            });

            // Helper function to get the stored value
            function getStoredValue(rowId, className) {
                if (className === 'transfer-qty') {
                    return transferQtyValues[rowId] || '';
                }
                return '';
            }

            $('#save_button').on('click', function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: '