<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script>
    {literal}
        $(document).ready(function() {
            $('#report').DataTable({
                lengthMenu: [
                    [50, 100, 200, 500, -1],
                    [50, 100, 200, 500, "Wszystkie"]
                ],
                pageLength: 200,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/Polish.json'
                },
                scrollX: true,
                scrollY: "60vh",
                scrollCollapse: true,
                order: [[ 8, "desc" ]]
            });
        });
    {/literal}
</script>
<style>
    {literal}
        div.dataTables_wrapper {
            width: 95vw;
            height: 50vw;
            margin: 0 auto;
        }
    {/literal}
</style>
<br />
<table id="report" class="display nowrap hover" style="width:100%">
    <thead>
        <tr>
            <th>Data zamówienia</th>
            <th>Indeks produktu</th>
            <th>Nazwa</th>
            <th>Rozmiar</th>
            <th>Rodzaj</th>
            <th>Marka</th>
            <th>Etykieta</th>
            <th>Klient</th>
            <th>Numer ZS</th>
            <th>Ilość</th>
            <th>Termin realizacji</th>
            <th>Miesiąc</th>
            <th>Status</th>
            <th>Wartość</th>
            <th>Uwagi</th>
        </tr>
    </thead>
    <tbody>
        {foreach from=$data key="key" item="item" name="components"}
            <tr>
                <td>{$item.documentDate}</td>
                <td>{$item.pCode}</td>
                <td>{$item.pName}</td>
                <td>{$item.pSize}</td>
                <td>{$item.pKind}</td>
                <td>{$item.pBrand}</td>
                <td>{$item.pLabel}</td>
                <td>{$item.aName}</td>
                <td>{$item.documentNo}</td>
                <td>{$item.quantity}</td>
                <td>{$item.sendDate}</td>
                <td>{$item.sendMonth}</td>
                <td>{$item.status}</td>
                <td>{$item.totalNetto}</td>
                <td>
                    <span id="edit-{$item.positionId}" class="ui-icon ui-icon-pencil"
                        onclick="editComment('{$item.positionId}')" style="display: inline-block;"></span>
                    <span id="save-{$item.positionId}" class="ui-icon ui-icon-check"
                        onclick="saveComment('{$item.positionId}')" style="display: none;"></span>
                    <span id="description-{$item.positionId}" style="display: inline-block; width: 300px;">{$item.description}</span>
                    <input id="descriptionInput-{$item.positionId}" type="text" value="{$item.description}"
                        style="width: 300px; display: none;" />
                </td>
            </tr>
        {/foreach}
    </tbody>
</table>
<script>
    {literal}
        function editComment(positionId) {
            $("#edit-" + positionId).css("display", "none");
            $("#description-" + positionId).css("display", "none");
            $("#descriptionInput-" + positionId).css("display", "inline-block");
            $("#descriptionInput-" + positionId).select();
            $("#save-" + positionId).css("display", "inline-block");
        }
        function saveComment(positionId) {
            $("#edit-" + positionId).css("display", "inline-block");
            $("#description-" + positionId).css("display", "inline-block");
            $("#descriptionInput-" + positionId).css("display", "none");
            $("#save-" + positionId).css("display", "none");
            $.ajax({
				type : "POST",
				url : "index.php?module=EcmSales&action=javahelper&to_pdf=1",
                data : {
                    job: "saveSaleItemDescription",
                    saleItemId: positionId,
                    description: $("#descriptionInput-" + positionId).val()
                },
				success : function(data) {
					$("#description-" + positionId).html($("#descriptionInput-" + positionId).val());
				},
			});		
        }
    {/literal}
</script>