在php中从总线api中绘制座位结构

I am struggle with drawing seat structure in a webpage using the response from the api.

Here is the response array ,contains seat-number,row and column position of each seat

From this i want to draw the structure look like this

<?php
 $seats=$this->apiservice->getLayout();    
 foreach($seats as $value)
{ 
     //seat number with row and column position
    //echo $value['id'].$value['row].$value['column'];
   //seat number
    echo $value['id'];
}
?>

Here is some condtions for that seat structure

1.Layout contains only 5 rows

2.The number of columns may vary.

3.Third row will be empty except for the last seat.

Here is this output of this line

echo 'SEAT-NO:'.$value['id'].'POSITIONS:'.$value['row'].$value['column'];

SEAT-NO:G1  POSITIONS:00
SEAT-NO:G2  POSITIONS:01
SEAT-NO:G3  POSITIONS:02
SEAT-NO:G4  POSITIONS:03
SEAT-NO:G5  POSITIONS:04
SEAT-NO:G6  POSITIONS:05
SEAT-NO:G7  POSITIONS:06
SEAT-NO:G8  POSITIONS:07
SEAT-NO:G9  POSITIONS:08
........................
........................
........................
........................
SEAT-NO:B8  POSITIONS:47
SEAT-NO:B9  POSITIONS:48
SEAT-NO:B10  POSITIONS:49

UPDATE

Current structure

<?php
  echo '<div class="bus">';
foreach($seats as $value)
    { 
       echo "<div class='seat $booked $pink' data-number='$seat' $book_seat amount='$total' uniq-id='$amount_div' data-ac='$ac' data-sleeper='$sleeper' data-lady='$ladies' data-fare='$base_fare'><img src='".base_url()."assets/images/seat.png' width='20' height='20' title='$seat'></div>";   
    }
echo '</div>';
?>

STYLE

.bus {
    width:340px;
    float:left;
    min-height:150px;
    border:1px solid #CCC;
    padding:0 0 10px 10px
}
.seat {
    background:#EFEFEF;
    float:left;
    margin:10px 10px 0 0;
    cursor:pointer;
    padding:4;
}

Result of this code look like this