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

Question

我很难使用来自api的响应在网页中绘制座位结构。

以下是响应数组，包含每个席位的seat-number，row和column位置

从此我想绘制结构看起来像这样

<?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'];
}
?>

以下是该座位结构的一些条件

1.Layout只包含5行

2.列数可能会有所不同。

3.除最后一个座位外，第三行将为空。

以下是此行的输出

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

更新

当前结构

<?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>';
?>

风格

.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;
}

此代码的结果如下所示