<?php
// connection to db
$con = mysqli_connect('localhost', 'root', '', 'mexyon_monaj');
if (mysqli_connect_errno($con)){
    echo 'Failed to connect to MySQL: ' . mysqli_connect_error();
}
// connectio nto db end

$query = mysqli_query($con, "SELECT *, right(visit_color_code,3) ordering FROM customer_visit_colors order by id_visit_colors;");
$colors = [];
while($row = mysqli_fetch_object($query)){
    array_push($colors, ['color'=> $row->visit_color_code, 'id'=> $row->id_visit_colors, 'type'=>$row->visit_color_type]);
}

$dhtml=[];
$lhtml=[];
echo "<table><thead><tr><th style='width: 100px; height: 30px; text-align: center; padding-top: 10px;'>Dark</th><th style='width: 100px; height: 30px; text-align: center; padding-top: 10px; '>Light</th></tr></thead><tbody>";
foreach($colors as $color){
    if($color['type']==='Dark'){
        array_push($dhtml,'<td style="float: left; width: 100px; height: 30px; text-align: center; padding-top: 10px; color: #fff; background: '.$color['color'].';">'.$color['id'].' '.$color['color']. '</td>');
    } else {
        array_push($lhtml,'<td style="float: left; width: 100px; height: 30px; text-align: center; padding-top: 10px; color: #000; background: '.$color['color'].';">'.$color['id'].' '.$color['color']. '</td>');
    }
}

for($x=0; $x<sizeof($lhtml);$x++){
    if($x< sizeof($dhtml)){
        echo "<tr>".$dhtml[$x].$lhtml[$x]."</tr>";
    } else {
        echo "<tr><td style='float: left; width: 100px; height: 30px; text-align: center; padding-top: 10px; color: #fff; background: #fff;'></td>".$lhtml[$x]."</tr>";
    }
}

echo "</tbody></table>";



echo "<table><thead><tr><th>colors</th></tr></thead><tbody>";
foreach($colors as $color){
    echo '<tr><td style="float: left; width: 100px; height: 30px; text-align: center; padding-top: 10px; color: #fff; background: '.$color['color'].';">'.$color['id'].' '.$color['color']. '</td></tr>';
}
echo "</tbody></table>";