<?php
$bg  = ConfigurationData::getByPreffix("rest_bg")->val;
$user = UserData::getById($_SESSION["user_id"]);
$col_limit = 5;
$items = ItemData::getAll();
$n_items=  count($items);
$rows = floor($n_items/$col_limit);
if($n_items%$col_limit!=0){$rows++;}
?>



                <section class="content-header">
                       		<h1>Monitor</h1>

                </section>

<div class="content">
<div class="row">
	<div class="col-md-12">


		<div class="clearfix"></div>

<div class="row">
<section class="col-lg-12">

<div class="panel panel-default">
<div class="panel-heading">
        Mesas
</div>

<div style="height:600px;background: url(storage/configuration/<?php echo $bg;?>) no-repeat;"></div>

<?php foreach($items as $it):

?>

    <div id="it-<?php echo $it->id;?>" style="position:absolute;top:<?php echo $it->y;?>px;left:<?php echo $it->x;?>px" class="item">
    <span style="position:relative;top:0px;left:25px;"><?php echo $it->name;?></span>
    <img src="img/not-busy.png" style="width:40px;">
    </div>
<?php endforeach;?>

</div>


</section>

</div>
	</div>
</div>
</div>
<script type="text/javascript">
    $(".item").draggable({
        stop: function(event, ui) {

        // Show dropped position.
        var pos = $(this).position();
        //$("div#stop").text("STOP: \nLeft: "+ pos.left + "\nTop: " + pos.top);
        //console.log(this.id+"-"+pos.left+","+pos.top);
        $.get("./?action=updpos&id="+this.id+"&left="+pos.left+"&top="+pos.top,function(data){
            console.log(data);
        });
        }

    });
</script>