<?php
	include('views/_header.tpl.php');
?>

<style>
	body { background:#f9f9f9; }
	.spacer { padding-top:45px; }
	#mmen { display:none; }
    .form-profile { padding:20px; }
    table { background:#fff; }
    p, td { font-weight:200; }
    table td { padding: 5px; } 
    td.qrcol { max-width:120px; width:130px; }
    
	.admintable td,
	.admintable th {
		padding: 10px;
		border: solid #eee 1px;
		text-align: center;
		font-size:17px;
	}
	
	.btn,
	.btn a,
	.btn a:active,
	.btn a:visited {
		background:#aaa; 
		color:#fff;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 14px !important;
		font-weight: 300 !important;
		height: 30px !important;
		line-height: 30px !important;
		min-width: 60px;
		width:auto;
		padding: 5px 20px !important;
	}

	a.btn:hover {
		background:#006ab7;
	}	
	
	input.btn-small { 
		background:#aaa; 
		color:#fff;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 12px !important;
		font-weight: 300 !important;
		height: 30px !important;
		min-width: 60px;
		width:auto;
		padding:0 15px;
	 }
	input.btn-small:hover { 
		background:#bbb;
	}
	
	input[type="submit"], .submit { border:0px; }
	input[type="submit"]:hover { background:#006ab7; }
	
	/* label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"]	*/

	.btn-red {
		font-size: 14px; 
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}

	.btn-blue {
		background: #005493;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	
	.delete-admin {
		background: #cd1000;
	}

	.adminred {
		background: #cd1000;
		color: #fff;
	}

	.nonadmin {
		background: #ddd;
		color: #aaa;
	}

	.pagination {
		list-style-type: none;
		padding: 10px 0;
		display: inline-flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.pagination li {
		box-sizing: border-box;
		padding-right: 10px;
	}

	.pagination li a {
		box-sizing: border-box;
		background-color: #e2e6e6;
		padding: 8px;
		text-decoration: none;
		font-size: 12px;
		font-weight: bold;
		color: #616872;
		border-radius: 4px;
	}

	.pagination li a:hover {
		background-color: #d4dada;
	}

	.pagination .next a,
	.pagination .prev a {
		text-transform: uppercase;
		font-size: 12px;
	}

	.pagination .currentpage a {
		background-color: #518acb;
		color: #fff;
	}

	.pagination .currentpage a:hover {
		background-color: #518acb;
	}

	.searching {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: start;
		gap: 10px;
		align-items: center;
	}

	.search {
		padding: 10px;
	}

	.submit {
		background-color: #005493;
	}
	.ut-header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}	
	
	.blockit, .blockithalf, .blockitlabel { float:left; display:inline-block; width: 200px; padding-right:10px; }
	.viewall { margin-left:15px; }
	
/* ################################### */
/*                        MOBILE STYLES                      */
/* ################################### */

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
        .form-profile {
            padding: 20px 0px;
            width: 85%;
        }        
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 586px) {
	.spacer { padding-top:55px; }
	.form-profile { padding-top:0px; }	
	.tablescroll { height: 500px; overflow-x:scroll; }
	.blockit { width:100%; display:block; background:none;  text-align:center; margin-bottom:10px; }
	.blockithalf { float:left; width:50%; display:inline-block; background:none; text-align:center; margin-bottom:10px; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }	
	.right { padding-right:0px; }
	.viewall { margin-left:0px; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
	.spacer { padding-top:15px; }
	.form-profile { padding-top:0px; }
	.tablescroll { height: 500px; overflow-x:scroll; }
	.blockit { width:100%; display:block; background:none; text-align:center; margin-bottom:10px; }	
	.blockithalf { float:left; width:50%; display:inline-block; background:none; text-align:center; margin-bottom:10px; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.right { padding-right:0px; }
	.viewall { margin-left:0px; }
}    

@media (max-width: 320px) {
	.tablescroll { height: 300px; overflow-x:scroll; }
}    
</style>

<div class="form form-profile aif" style='width:auto'>

	<h1 style="text-align:center;">
		<a href="/admin/dash"><i class="fa fa-sliders" aria-hidden="true" style=""></i></a>&nbsp; Tables / Areas / Stations / Etc
		<a href="/admin/tables"><img src="/static/client/scroll_hands.png" style="height:30px;" alt="<>" /></a>				
	</h1>     
		
	<div class="tablescroll" style="background:#fff;">
    <table class="admintable" style="width:100%; overflow:hidden;">
        <tr>
        	<th style="max-width:50px">ID</th>
        	<th style="max-width:130px !important">QR Code</th>
            <th style="max-width:100px">Table/Station</th>
            <th style="max-width:100px">Type</th>
            <th>Link</th>
            <th style="max-width:50px">Actions</th>
        </tr>
        <?php
        foreach ($tables as $table) {
        	$imgfix = "onerror=\"this.src='/static/system/qr_code_reverse_scan_border.png'\"";
        	$qrcode = "<div style='background:url(/static/system/qr_code_reverse_scan_border.png) no-repeat center top; height:120px; width:120px; 
        	text-align:center; margin:0 auto; border:0px solid red; background-size:contain'><img src='{$table['qrcode_img']}' 
        	alt='QR Code' {$imgfix} style='height:100px; margin:10px;' /></div>";
        	
            echo "<tr>
            <td style='padding:10px;'>{$table['id']}</td>
            <td class='qrcol' style='padding:10px; text-align:center; max-width:130px !important; word-wrap: break-word;'>{$qrcode}</td>
			<td style='padding:10px;'><a href='{$table['qrcode_img']}'
			title='Open QR Code Img'>{$table['tableno']}</a></td>
            <td style='padding:10px;'>{$table['type']}</td>
			<td style='padding:10px;'>{$table['qrcode_img']} <a href='{$table['qrcode_img']}' 
			title='Open QR Code Img'><i class='fa fa-external-link-alt' aria-hidden='true'></i></a></td> 
            <td style='padding:10px; max-width:75px; text-align:center;'><a href='/admin/?table&edit={$table['id']}'>edit</a><br /><br />
            <a href='/admin/?table&delete={$table['id']}' class='confirm' style='font-size:17px; color:#ee0000'>delete</a></td></tr>";
        }
        ?>
    </table>
    </div>
    <div class="clear"></div>
    <br />
    <div style="margin:0px;">
        <a href='/admin/?table&add' class='btn btn-blue' style='width:auto; display:block;'>Add New</a>
    </div>
    <div class="clear"></div>
    <br />
    
    <div style="font-size:17px; line-height:27px; font-weight:300; text-align:center; color:#000;">
	    
    </div>
    <div class="clear"></div>
	<br /><br /><br /><br /><br /><br />

</div>

<style>
	.admintable td,
	.admintable th {
		padding: 3px;
		border: solid #eee 1px;
	}
</style>

<?php
	include 'views/_footer.tpl.php';
?>