<div style="border-width: 8px; border-style: solid; border-color: rgb(119, 119, 119) rgb(211 213 215) rgb(195 195 195); max-width: 320px; width: 100%; height: 100%; margin: 0px auto; background-color: #fff;">
<?php
// print_r($seatRows[0][0]['isBooked']);die;
$seatLabelThumb = $seatRows[0][0]['isBooked'] ? 'booked' : 'available';
// print_r($seatRows[1][5]);die; 
?>
<ul style="display: grid; grid-template-columns: repeat(4, 1fr); align-items: flex-start; -webkit-box-pack: center; justify-content: center; list-style: none; margin: 0px; padding: 5px 0px">
        <img src="https://busvalley.citytech.in/public/image/steering.svg" alt="" style="max-width: 42px; height: 65px; width: 100%; margin-left: 12px">
        <li style="cursor: pointer; margin: auto; position: relative"></li>
        <li style="cursor: pointer; margin: auto; position: relative"></li>
        <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
            <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="1">
                <img src="<?php echo $seatRows[0][0]['isBooked'] ? 'https://busvalley.citytech.in/public/image/seatbooked.svg' : 'https://busvalley.citytech.in/public/image/seatavailable.svg'  ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s">
                <p style="padding: 0px; margin: 0px; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); transition: all 0.4s ease 0s; font-size: 10px; color: rgb(68, 68, 68); font-weight: 900"><?php echo $seatRows[0][0]['seatName'] ?></p>
            </div>
        </li>
    </ul>
    <div style="border-bottom: 1px solid rgb(217 217 217); padding: 5px 0px">
        <input type="hidden" id="<?php echo 'seatnumber' . $subTripId; ?>" name="<?php echo 'seatnumber' . $subTripId; ?>[]" value="">
        
       <?php
        $i = 0; 
    foreach ($seatRows as $singleRow) : ?>
    <ul style="display: grid; grid-template-columns: repeat(4, 1fr); align-items: flex-start; -webkit-box-pack: center; justify-content: center; list-style: none; margin: 0px; padding: 5px 0px">
        <?php
        //foreach (array_slice($singleRow, 1) as $singleSeat) :$i++; 
        foreach ($singleRow as $singleSeat) :$i++; ?>
            
            <?php 
            if($i != 1){
            
                $seatLabel = $singleSeat['seatName'];
                $seatLabelThumb = $singleSeat['isBooked'] ? 'booked' : 'available';
                if(!empty($seatLabel)){
                
               ?>
                <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                    <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="<?php echo $seatLabel; ?>">
                        <img src="<?php echo base_url("public/image/seat{$seatLabelThumb}.svg") ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s" />
                        <p style="padding: 0px; margin: 0px; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); transition: all 0.4s ease 0s; font-size: 10px; color: rgb(68, 68, 68); font-weight: 900"><?php echo $seatLabel; ?></p>
                    </div>
                </li>
            <?php
                }else{
                    if($i == 5){
                        ?>
                        <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">Door</li>
                        <?php
                    }else{
                        ?>
                <li style="cursor: pointer; margin: auto; position: relative; user-select: none;"></li>
                        <?php
                    }
                   
                }
            ?>
                   
            

        <?php
            }
        
        endforeach; ?>
    </ul>
<?php endforeach; ?>


        
        
        
        
        
        
    </div>
</div>