<?php
// print_r($seatRows[0][0]['isBooked']);die;
$seatLabelThumb = $seatRows[0][0]['isBooked'] ? 'booked' : 'available';
// print_r($seatRows[0]);die;
?>
<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;">
    <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.com/backend/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.com/backend/public/image/seatbooked.svg' : 'https://busvalley.com/backend/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="">
        <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
            $i=0;
            $k=0;
            $l=4;
            $forthseat = 0;
            $seetTotal = $fleetTotalSeat - 4;
            foreach($seatRows as $seatRow){
                if($i==0){
                    $sliceArray = array_slice($seatRow,1);
                }else{
                    $sliceArray = $seatRow;
                }
                foreach($sliceArray  as  $sheet){
                    if(is_array($sheet)){
                        $seatLabel = $sheet['seatName'];
                        $seatLabelThumb = $sheet['isBooked'] ? 'booked' : 'available';
                        
                ?>
                            
                            <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
                            if($k == 1 && $forthseat == 1){
                                ?>
                                <li style="cursor: pointer; margin: auto; position: relative; user-select: none;"></li>
                                <?php
                            }
                            ?>
                            <?php
                            if($k==2){
                            ?>
                                <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">Door</li>
                            <?php
                            }
                            if($k == $l && $l!=$seetTotal){
                            ?>
                                <li style="cursor: pointer; margin: auto; position: relative; user-select: none;"></li>
                            <?php
                            $l+=3;
                            }
                            $k++;
                        }
                }
            $i++;
            
            }
            ?>
           
        </ul>
      
    </div>
</div>