<?= $this->extend('layouts/form.php') ?>

<?= $this->section('content') ?>
<?php
$boardname = '';
$admin_userid = '';
if(isset($boards)) {
	$boardname = $boards[0]['boardname'];
	$admin_userid = $boards[0]['admin_userid'];
	foreach($boarduser as $userid) {
		$qboarduser[]=$userid['userid'];
	}
}
?>
<div class="form-body">
	<h3 class="card-title">Board Editor</h3>
	<hr>
	<?php 
	if(isset($validation)) {
	?>
		<div class='alert alert-danger alert-dismissible'>
			<?= $validation->listErrors(); ?>
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
		</div>
	<?php
	}
	?>
	<form method='post' id='myForm'>
		<input type='hidden' name='boardid' value='<?=$boardid;?>'/>
		<div class='row mb-3'>
		<div class='col-2'>Board name</div>
			<div class='col-10'><input class='form-control form-control-sm' type='text' name='boardname' value='<?=$boardname;?>' /></div>
		</div>
		<div class='row mb-3'>
			<div class='col-2'>Board admin</div>
			<div class='col-10'>
				<select class='form-control form-control-sm select2' type='text' name='admin_userid' />
					<?php
					foreach($users as $data) {
						$quserid = $data['userid'];
						$qusername = $data['firstname'].' '.$data['lastname'];
						if($admin_userid!='') {
							if($quserid == $admin_userid) { echo "<option value='$quserid' selected>$qusername</option>"; }
							else { echo "<option value='$quserid'>$qusername</option>"; }
						} else {
							if($quserid == $_SESSION['userid']) { echo "<option value='$quserid' selected>$qusername</option>"; }
							else { echo "<option value='$quserid'>$qusername</option>"; }
						}
						
					}
					?>
				</select>
			</div>
		</div>
		<div class='row mb-3'>
			<div class='col-2'>Board users</div>
			<div class='col-10'>
				<select id='boarduser' class='form-control form-control-sm' type='text' name='boarduser[]' multiple />
					<?php
					foreach($users as $data) {
						$userid = $data['userid'];
						$username = $data['firstname'].' '.$data['lastname'];
						if(isset($boarduser)) {
							if(in_array($userid,$qboarduser)) { echo "<option value='$userid' selected>$username</option>"; }
							else { echo "<option value='$userid'>$username</option>"; }
						} else {
							if($userid == $_SESSION['userid']) { echo "<option value='$userid' selected>$username</option>"; }
							else { echo "<option value='$userid'>$username</option>"; }
						}
					}
					?>
				</select>
			</div>
		</div>
		<h4>Board List</h4>
		<input id='listid_delete' type='hidden' name='listid_delete' value=''>
		<div class='row '>
			<div class='col-2'>New List</div>
			<div class='col-10'>
				<div class='input-group'>
					<input id='listname' class='form-control form-control-sm' placeholder='new list name ...' />
					<div class='input-group-append'>
						<button class="btn btn-sm btn-success" type="button" onclick='list_add()'> <i class="fa-solid fa-plus"></i> </button>	
					</div>
				</div>
			</div>
		</div>
		<table class='table'>
			<tbody id='listTable'>
			<?php
			if(isset($lists)) {
				foreach($lists as $list) {
					$qlistname = $list['listname'];
					$qlistid = $list['listid'];
			?>
			<tr> 
				<td class='input-group'>
					<input class='form-control form-control-sm' type='text' name='lists[]' value='<?=$qlistname;?>' /> <input type='hidden' name='listid[]' value='<?=$qlistid;?>'>
					<button type='button' class='btn btn-sm btn-dark text-white mx-1' onclick='rowDn(this)'><i class='fa-solid fa-down-long'></i></button>	
					<button type='button' class='btn btn-sm btn-dark text-white mx-1' onclick='rowUp(this)'><i class='fa-solid fa-up-long'></i></button>
					<button type='button' class='btn btn-sm btn-danger mx-1' onclick='list_del(this, 0)'> <i class='fa-solid fa-x'></i> </button> 
				</td> 
			</tr>
			<?php
				}
			}
			?>
			</tbody>
		</table>
		<button type="button" class="btn btn-dark float-start" onclick="window.close()">Cancel</button>
		<button type="submit" class="btn btn-success text-white float-end"> <i class="fa fa-check"></i> Submit</button>
	</form>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
function list_del(e, listid) {
	if(confirm('Are you sure?')) {
		e.parentNode.parentNode.remove();
		var listid = listid.toString();
		if(listid != 0) {
			var d = $('#listid_delete');
			d.val(d.val()+' '+listid);
			console.log(d.val());
		}
	}
}

// add new list
function list_add() {
	var newList = $('#listname');
	console.log(newList.val());
	// add new row on table
	/*
	var newRow = "<tr> <td><input class='form-control form-control-sm' type='text' name='lists[]' value='"+newList.val()+"' /> <input type='hidden' name='listid[]' value='0'> </td>"+
		"<td> <button type='button' class='btn btn-sm btn-dark text-white' onclick='rowDn(this)'><i class='fa-solid fa-down-long'></i></button> "+
		"<button type='button' class='btn btn-sm btn-dark text-white' onclick='rowUp(this)'><i class='fa-solid fa-up-long'></i></button> "+
		"<button type='button' class='btn btn-sm btn-danger' onclick='list_del(this, 0)'> <i class='fa-solid fa-x'></i> </button> </td> </tr> \r\n";
	*/
	var newRow = "<tr> <td class='input-group'>"+
		"<input class='form-control form-control-sm' type='text' name='lists[]' value='"+newList.val()+"' /> <input type='hidden' name='listid[]' value='0'>"+
		"<button type='button' class='btn btn-sm btn-dark text-white' onclick='rowDn(this)'><i class='fa-solid fa-down-long'></i></button> "+
		"<button type='button' class='btn btn-sm btn-dark text-white' onclick='rowUp(this)'><i class='fa-solid fa-up-long'></i></button> "+
		"<button type='button' class='btn btn-sm btn-danger' onclick='list_del(this, 0)'> <i class='fa-solid fa-x'></i> </button> </td> </tr> \r\n";
	if(newList.val() != '') {
		$("#listTable").append(newRow);
		newList.val('');
	}
}


function rowUp(row){
	var row = row.parentNode.parentNode;
	var tableBody = row.parentNode;
	var previousRow = row.previousElementSibling;
	if (previousRow) { tableBody.insertBefore(row,previousRow);	} 
}

function rowDn(row){
	var row = row.parentNode.parentNode;
	var tableBody = row.parentNode;
	var nextRow = row.nextElementSibling;
	if (nextRow) { tableBody.insertBefore(nextRow,row); } 
}

$(document).ready(function () {
	var AllowClear = $.fn.select2.amd.require('select2/selection/allowClear');
	var _handleKeyboardClearOriginal = AllowClear.prototype._handleKeyboardClear;

	AllowClear.prototype._handleKeyboardClear = function(_, evt, container) {
		if (this.$element.prop('multiple')) { return; }
		_handleKeyboardClearOriginal.call(this, _, evt, container);
	};
	
	$('#boarduser').select2({
		tags: true,
		tokenSeparators: [',', ' '],
		closeOnSelect: true,
		allowClear: true,
		placeholder: '',
	});

	$(".up").click(function() {
		var row = $(this).parent().parent(); // Get the parent row
		var previousRow = row.prev(); // Get the previous row

		if (previousRow.length) {
			row.insertBefore(previousRow);
		} else {
			alert("This row is already at the top!");
		}
	});

	$(".down").click(function() {
		var row = $(this).parent().parent(); // Get the parent row
		var nextRow = row.next(); // Get the next row

		if (nextRow.length) {
			nextRow.insertBefore(row);
		} else {
			alert("This row is already at the bottom!");
		}
	});
	
	// prevent enter
	document.getElementById("myForm").addEventListener("keydown", function(event) {
		if (event.key === "Enter") { event.preventDefault(); }
	});
	
	// enter list_add
	document.getElementById("listname").addEventListener("keydown", function(event) {
		if (event.key === "Enter") { event.preventDefault(); list_add(); }
	});
});
</script>
<?= $this->endSection() ?>