Queue table using PHP / MySQL

I have a database table columns id

, date

, time

, cabinet

.

I have to generate a table with values ​​from a database, but it should look like a queue table.

   time 8,9,10,11,12,13,14,15,16
     102 -- -  +  -   -  +  - - 
     103 -+ -  -  -   -  +  - - 

      

        
        
        
      

    

if time is busy, it will be +

if available -

. So I am trying to do it with this code.

I have to change the loops .. some ideas? Thank!

Also I have a table with columns cupboards id

, cabinetNumber

, title

. I need to change my mysql query. Should be able to change the date (usege datepicker and Ajax) and change the values ​​of the table rows.

  $q = $_GET['date'];
    $query = mysql_query("SELECT date,cabinet,
       SUM(IF(ROUND(`time`)=8,1,0)) as h8,
       SUM(IF(ROUND(`time`)=9,1,0)) as h9,
       SUM(IF(ROUND(`time`)=10,1,0)) as h10,
       SUM(IF(ROUND(`time`)=11,1,0)) as h11,
       SUM(IF(ROUND(`time`)=12,1,0)) as h12,
       SUM(IF(ROUND(`time`)=13,1,0)) as h13,
       SUM(IF(ROUND(`time`)=14,1,0)) as h14,
       SUM(IF(ROUND(`time`)=15,1,0)) as h15
    FROM `schedule` WHERE date = '".$q."'
    GROUP BY cabinet") or die(mysql_error());
    ?>

<table class="table table-hover">
    <tr class=".info"><td>Cab</td><td >8:00</td><td >9:00</td><td >10:00</td><td >11:00</td><td >12:00</td><td >13:00</td><td >14:00</td><td >15:00</td></tr>
    <!--  -->
    <?php while($data=mysql_fetch_array($query)) :?>
        <tr>
            <?php  $cabinet = $data['cabinet']; ?>
            <td><?=$cabinet ?></td>
            <?php  for($j=8; $j<=15; $j++)  : ?>
                <?php
                $busy = $data['h'.$j];
                ?>
                <?php if($busy>0 && $data['date']===$q ): ?>
                    <td class="busy"><?=$busy?></td>
                <?php else: ?>
                    <td class="free"><?=$cabinet; ?>
                        <form action="1.php" method="post">
                            <input type="hidden" name="time"  value="<?= $j;?>" /><?=$data['date']?>
                            <input type="hidden" name="cabinet"  value="<?= $cabinet;?>" />
                            <input type="submit" style="free" value="" name="sub"/>
                        </form>
                    </td>
                <?php endif?>

            <?php  endfor ?>
        </tr>
    <?php endwhile ?>
</table>

 $(function() {
        $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
    });
    $( ".date" ).on('change', function(){
        var date = $('#datepicker').val();
        console.log(date);
        $.ajax({
            type:'get',
            url:'table.php',
            data : {
                'date' : date
            },
            success: function(data) {
                $('#result').html(data);
            }
        });
    });