<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;">
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0px; border-bottom: 1px solid rgb(217 217 217)">
        <img src="<?php echo base_url('public/image/steering.svg') ?>" alt="" style="max-width: 42px; height: 65px; width: 100%; margin-left: 12px" />
        <div style="position: relative">
            <img src="<?php echo base_url('public/image/arrow-left.png') ?>" alt="" style="height: 60px; width: 60px; display: block; transition: all 0.4s ease 0s; margin-right: 12px" />
            <p style="padding: 0px; margin: 0px; position: absolute; left: 40%; top: 54%; text-transform: uppercase; transform: translate(-50%, -50%); transition: all 0.4s ease 0s; font-size: 13px; color: rgb(68, 68, 68); font-weight: 700">Door</p>
        </div>
        
    </div>

    <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
        $count = 0;
        foreach ($seatRows as $singleRow) : ?>
            <?php 
            $count++;
            if(!in_array($count,[6])){ ?>
                <?php if($count == count($seatRows) && count($seatRows[$count - 1]) != count($seatRows[1])){ 
                    $singleRow = array_values(array_filter($singleRow, fn($item) => isset($item['seatName'])));
                    ?>
                    <ul style="display: grid; grid-template-columns: repeat(<?php echo count($singleRow);?>, 1fr); align-items: flex-start; -webkit-box-pack: center; justify-content: center; list-style: none; margin: 0px; padding: 5px 0px">
                <?php }else { ?>
                <ul style="display: grid; grid-template-columns: repeat(<?php echo count($singleRow);?>, 1fr); align-items: flex-start; -webkit-box-pack: center; justify-content: center; list-style: none; margin: 0px; padding: 5px 0px">
                    <?php }
                    foreach ($singleRow as $singleSeat) : ?>
                        <?php 
                        // print_r($singleSeat);die();
                            if (is_array($singleSeat)) :
                                $seatLabel = $singleSeat['seatName'];
                                $seatLabelThumb = $singleSeat['isBooked'] ? 'booked' : ((isset($singleSeat['isHold']) && $singleSeat['isHold']) ? 'hold' : (((isset($singleSeat['isBlock']) && $singleSeat['isBlock']) || !empty($singleSeat['isBlocked'])) ? 'blocked' : 'available'));
                                $isSeatClickable = ($seatLabelThumb === 'available');
                                $liSeatInteract = $isSeatClickable ? 'cursor: pointer;' : 'cursor: not-allowed; pointer-events: none; opacity: 0.55;';
                               ?>
                                <li style="<?php echo $liSeatInteract; ?> margin: auto; position: relative; user-select: none;">
                                    <div <?php if ($isSeatClickable): ?>onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>"<?php endif; ?> data-seatnumber="<?php echo $seatLabel; ?>">
                                        <?php if ($seatLabelThumb === 'blocked' || $seatLabelThumb === 'hold'): ?>
                                        <img src="<?php echo base_url("public/image/seatBlocked.jpeg") ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s" />
                                        <?php else: ?>
                                        <img src="<?php echo base_url("public/image/seat{$seatLabelThumb}.svg") ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s" />
                                        <?php endif; ?>
                                        <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: ?>
                                <li style="cursor: pointer; margin: auto; position: relative"></li>
                            <?php endif; ?>
                    <?php endforeach; ?>

                </ul>
            <?php } else { ?>
                <ul style="display: grid; grid-template-columns: repeat(<?php echo count($singleRow);?>, 1fr); align-items: flex-start; -webkit-box-pack: center; justify-content: center; list-style: none; margin: 0px; padding: 5px 0px">
                    <?php
                    foreach ($singleRow as $index => $singleSeat) : ?>
                        <?php 
                        // print_r($singleSeat);die();
                        // echo $index;
                                if (is_array($singleSeat)) :
                                    $seatLabel = $singleSeat['seatName'];
                                    $seatLabelThumb = $singleSeat['isBooked'] ? 'booked' : ((isset($singleSeat['isHold']) && $singleSeat['isHold']) ? 'hold' : (((isset($singleSeat['isBlock']) && $singleSeat['isBlock']) || !empty($singleSeat['isBlocked'])) ? 'blocked' : 'available'));
                                    $isSeatClickable = ($seatLabelThumb === 'available');
                                    $liSeatInteract = $isSeatClickable ? 'cursor: pointer;' : 'cursor: not-allowed; pointer-events: none; opacity: 0.55;';
                                   ?>
                                   <?php if(in_array($index,[3])): ?>
                                        <li style="cursor: pointer; margin: auto; position: relative; user-select: none;grid-column: span 1 /-1;">
                                            <div style="position: relative">
                                                <?php if (isset($seatinfo) && $seatinfo['wc']): ?>
                                                <p style="padding: 7px; margin: 0px; position: absolute; left: 40%; top: 54%; text-transform: uppercase; transform: translate(-50%, -50%); transition: all 0.4s ease 0s; font-size: 13px; color: rgb(68, 68, 68); font-weight: 700; border: 1px solid; display: inline-block;">WC</p>
                                                <?php endif; ?>
                                            </div>
                                        </li>
                                    <?php endif; ?>
                                   <?php if(in_array($index,[0,1,3,4])): ?>
                                        <li style="<?php echo $liSeatInteract; ?> margin: auto; position: relative; user-select: none;">
                                            <div <?php if ($isSeatClickable): ?>onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>"<?php endif; ?> data-seatnumber="<?php echo $seatLabel; ?>">
                                                <?php if ($seatLabelThumb === 'blocked' || $seatLabelThumb === 'hold'): ?>
                                                <img src="<?php echo base_url("public/image/seatBlocked.jpeg") ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s" />
                                                <?php else: ?>
                                                <img src="<?php echo base_url("public/image/seat{$seatLabelThumb}.svg") ?>" alt="" style="width: 35px; display: block; transition: all 0.4s ease 0s" />
                                                <?php endif; ?>
                                                <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 endif; ?>
                                   <?php if(in_array($index,[4])): ?>
                                        <li style="cursor: pointer; margin: auto; position: relative; user-select: none;grid-column: span 1/-1;">
                                            <div style="position: relative">
                                                <img src="<?php echo base_url('public/image/arrow-right.png') ?>" alt="" style="height: 60px; width: 60px; display: block; transition: all 0.4s ease 0s; margin-right: 12px" />
                                                <p style="padding: 0px; margin: 0px; position: absolute; left: 40%; top: 54%; text-transform: uppercase; transform: translate(-50%, -50%); transition: all 0.4s ease 0s; font-size: 13px; color: rgb(68, 68, 68); font-weight: 700">DOWN</p>
                                            </div>
                                        </li>
                                    <?php endif; ?>
                                <?php endif; ?>
                    <?php endforeach; ?>

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