var nextRowId=1;

function getNextRowId() {
	return nextRowId;
}

function renumberTableRows(){
    var row_no=1;
    var table = document.getElementById("tabbody");
    for (var i = 0, row; row = table.rows[i]; i++) {
//	row.cells[0].innerHTML=row_no++;
    }
}

function deleteTableRow(rowId){

	alert (rowId);
    var target = document.getElementById("upload-target"+rowId);
    var children = target.children;

    // delete all uploaded elements
    for (var i = 0; i < children.length; i++) {
	var tmp = children[i].getAttribute("data-id");
	$K.ajax.post({
	    url: 'delete.php',
	    data: 'id='+tmp,
	    before: function(xhr) {},
	    success: function(response) {},
	    error: function(response) {}
	});
    }
    

    // delete the row from table
    var element = document.getElementById("trow"+rowId);
    element.parentNode.removeChild(element);
    renumberTableRows();
//    alert(rowId);
    
}

function addTableRow(){

    var $node = $K.dom('#tabbody');
    // create a new table row with id
    var element = document.createElement('tr');
    element.setAttribute("id", "trow"+nextRowId);


	var a_type = document.getElementById("a_type").value; 
	var a_date = document.getElementById("a_date").value; 
	var a_description = document.getElementById("a_description").value; 
	var a_amount = document.getElementById("a_amount").value; 
	var a_currency = document.getElementById("a_currency").value; 

/*	a_type = "Hello";*/

    var e="";

    // add column for position no
    e += `<td>${a_type}</td>`;

    // add coluemn for a_type (Auslagenart)
//    e += `<td><textarea name="desc[${nextRowId}]" rows="2"></textarea> </td>`;
    e += `<td>${a_date}</td>`;

    // add column for date
//    e += `<td><input name="date[${nextRowId}]" type="date"/></td>`;
    e += `<td>${a_description}</td>`;

    // add column for num
    e += `<td>${a_amount}</td>`;

    // add column for file upload
/*    e+= `
	<td data-kube="">
	<div class="form-item">
	<div class="upload"
    data-kube="upload"
    data-type="file" data-multiple="true"
    data-target="#upload-target${nextRowId}"
    data-url="upload.php?row=${nextRowId}" data-url-remove="delete.php"
    data-progress="true">
	</div>
	<div id="upload-target${nextRowId}" class="upload-target"></div>
	</div>
    </td>
*/
	e += `<td>${a_currency}</td>`;	
	
//	`;
    // add delete bnutton
    e +=
	`<td><span
    onclick="deleteTableRow(${nextRowId})"
    class="close is-large">
	</span></td>`;
    
    
    $node.append(element);
    element.innerHTML=(e);
    renumberTableRows();
    nextRowId++;
}


function setUploadField()
{
    	var e = $K.dom('#uploadfield');
	var uf =`<div class="upload"
		data-kube="upload"
		data-type="file" data-multiple="true"
		data-target="#upload-target${nextRowId}"
		data-url="upload.php?row=${nextRowId}" data-url-remove="delete.php"
		data-progress="true">Beleg hochladen 
		</div>
		<div id="upload-target${nextRowId}" class="upload-target small"></div>
		</div>



		`;
	document.getElementById("uploadfield").innerHTML=uf; 
}

$K.add('module', 'kaform', {
	init: function(app, context)
        {
            this.app = app;
        },
	// catch event
        onmessage: {
            tabs: {
                opened: function(sender)
                {
                    console.log('Tab box is ',sender.getActiveBox());
                }
            }
        },
	

    });

$K.init({
    observer: true
});


// startup is here



// on startup clear session on server
$K.ajax.get({
    url: 'clear.php',
    data: '', // or key=value object
    before: function(xhr) {},
    success: function(response) {},
    error: function(response) {}
});

setUploadField();



// add on table row
//addTableRow();