<table id="kt_datatable_column_rendering" class="table table-striped table-row-bordered gy-5 gs-7" style="width: 1500px; position: relative; left: 4px; top: -400px;">
    <thead>
    <tr>
        <th>PO Number</a></th>
        <th>Contract Number</a></th>
        <th>Item Number</a></th>
        <th>Description</th>
        <th>Fabrication</th>
        <th>Color</a></th>
        <th>Size </a></th>
        <th class="text-center">Order Qty</a></th>
        <th class="text-right">Factory FOB</th>
        <th class="text-right">Dis. Factory</th>
        <th class="text-right">Buyer FOB</th>
        <th class="text-right">Dis. Buyer</th>
        <th style="color: orange;" class="text-right"><strong>Total Factory Value<b></th>
        <th style="color: orange;" class="text-right"><strong>Total Buyer Value<b></th>
        <th>Action </a></th>
    </tr>
</thead>
<tbody>
        @php
            $grandTotalBuyer = 0;
            $grandTotalFactory = 0;
        @endphp

        @if ($iteminformation->count() > 0)
            @foreach ($iteminformation as $key => $row)
                <tr data-item-id="{{ $row->id }}">
                <td name="ponumber">{{ $row->ponumber }}</td>
                <td name="connumber">{{ $row->connumber }}</td>
                <td name="itemnumber">{{ $row->itemnumber }}</td>
                <td name="description">{{ $row->description }}</td>
                <td name="fabrication">{{ $row->fabrication }}</td>
                <td name="colors">{{ $row->colors }}</td>
                <td name="size">{{ $row->size }}</td>
                <td name="size">{{ $row->orderqty }}</td>
                <td name="size">{{ $row->facfob }}</td>
                <td name="size">{{ $row->disfac}}</td>
                <td name="size">{{ $row->bufob }}</td>
                <td name="size">{{$row->disbu}}</td>
                <td style="color: orange;" class="text-right">{{ number_format(($row->orderqty * $row->facfob) * (1 - ($row->disfac / 100)), 2) }}</td>

                <td style="color: orange;" class="text-right"><strong>{{ number_format($row->orderqty * $row->bufob, 2) }}</strong></td>

                <td>
                <button type="button" class="btn btn-sm btn-warning edit-old-row-button" onclick="editRow(this)">
                    <i class="fas fa-pen-square"></i> <!-- Use "fas" for solid icons -->
                </button>

                <button class="btn btn-sm btn-success save-old-row-button" onclick="saveRow(this)">
                    <i class="fas fa-save"></i>
                </button>
                <input type="hidden" name="item_id" value="{{ $row->id }}">
                
                </button>
                    <button type="button" class="btn btn-sm btn-danger remove-old-row-button" onclick="cancelRow(this)" style="display: none;">
                    <i class="fa-solid fa-xmark"></i>
                </button>
                
                </td>
                </tr>
                @php
                    $grandTotalFactory += ($row->orderqty * $row->facfob);
                @endphp
                </tr>
                @php
                    $grandTotalBuyer += ($row->orderqty * $row->bufob);
                @endphp
            @endforeach
        @endif
     
        <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2" class="text-right"><strong>Grand Total:</strong></td>
                <td></td>
                <td></td>
                <td style="color: orange;" class="text-right"><strong>{{number_format($grandTotalFactory,2 )}}</strong></td>
                <td style="color: orange;" class="text-right"><strong>{{number_format( $grandTotalBuyer, 2) }}</strong></td>
            <td></td>
       
        </tr>
    </tbody>
    <script>

function editRow(button) {
    const row = button.closest('tr');
    const cells = row.querySelectorAll('td:not(:last-child)'); // Exclude the last cell with buttons

    // Loop through the cells in the row and replace their content with input fields
    cells.forEach(cell => {
        const text = cell.textContent;
        const input = document.createElement('input');
        input.type = 'text';
        input.value = text;
        input.style.width = cell.offsetWidth + 'px';
        cell.innerHTML = '';
        cell.appendChild(input);
    });

    // Show the "Save" button, hide the "Edit" button
    row.querySelector('.edit-old-row-button').style.display = 'none';
    row.querySelector('.save-old-row-button').style.display = 'inline-block';
    row.querySelector('.remove-old-row-button').style.display = 'inline-block';
}

function saveRow(button) {
    const row = button.closest('tr');
    const cells = row.querySelectorAll('td:not(:last-child)'); // Exclude the last cell with buttons
    const item_id = row.getAttribute('data-item-id'); // Get the item ID from a data attribute
    const data = {};
    cells.forEach((cell, index) => {
        const editedValue = cell.querySelector('input').value;
        const columnName = cell.getAttribute('name'); // Get the column name from a data attribute
        // Store the edited value with the corresponding column name
        data[columnName] = editedValue;
    });
    fetch(`/update-item/${item_id}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}', // Add the CSRF token here
        },
        body: JSON.stringify(data),
    })
        .then(response => response.json())
        .then(result => {
            // Handle the response as needed (e.g., show a success message)
            console.log(result.message);
        })
        .catch(error => {
            // Handle any errors (e.g., show an error message)
            console.error(error);
        });
    // Revert the cells back to text and update the button visibility
    cells.forEach(cell => {
        const input = cell.querySelector('input');
        cell.textContent = input.value;
    });
    // Show the "Edit" button and hide the "Save" button
    row.querySelector('.edit-old-row-button').style.display = 'inline-block';
    row.querySelector('.save-old-row-button').style.display = 'none';
}
    function cancelRow(button) {
        const row = button.closest('tr');
        const cells = row.querySelectorAll('td:not(:last-child)'); // Exclude the last cell with buttons

        cells.forEach(cell => {
            const input = cell.querySelector('input');
            cell.textContent = input.value;
        });

        // Show the "Edit" button, hide the "Save" and "Remove" buttons
        row.querySelector('.edit-old-row-button').style.display = 'inline-block';
        row.querySelector('.save-old-row-button').style.display = 'none';
        row.querySelector('.remove-old-row-button').style.display = 'none';
    }
</script>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>