<?php
// print_r($seatRows[0][0]['isBooked']);die;
$seatLabelThumb = $seatRows[0][0]['isBooked'] ? 'booked' : ((isset($seatRows[0][0]['isHold']) && $seatRows[0][0]['isHold']) ? 'hold' : (((isset($seatRows[0][0]['isBlock']) && $seatRows[0][0]['isBlock']) || (!empty($seatRows[0][0]['isBlocked']))) ? 'blocked' : '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;border-bottom: 1px solid rgb(217 217 217);">
        <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>
        <?php
                $isFirstSeatClickable = $seatLabelThumb === 'available';
                $firstLiStyle = $isFirstSeatClickable
                    ? 'cursor: pointer; margin: auto; position: relative; user-select: none;'
                    : 'cursor: not-allowed; pointer-events: none; opacity: 0.55; margin: auto; position: relative; user-select: none;';
                $firstSeatStyle = "";
                if (!$isFirstSeatClickable) {
                    $firstSeatStyle .= 'pointer-events: none; opacity: 0.5;';
                }
                ?>
        <li style="<?php echo $firstLiStyle; ?>">
                <div
                    <?php if ($isFirstSeatClickable): ?>
                        onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>"
                    <?php endif; ?>
                    data-seatnumber="1"
                    style="<?php echo $firstSeatStyle; ?>"
                >
                    <img src="<?php echo $seatRows[0][0]['isBooked']
                        ? 'https://busvalley.com/backend/public/image/seatbooked.svg'
                        : (isset($seatRows[0][0]['isHold']) && $seatRows[0][0]['isHold']
                            ? base_url("public/image/seathold.svg")
                            :(((isset($seatRows[0][0]['isBlock']) && $seatRows[0][0]['isBlock']) || !empty($seatRows[0][0]['isBlocked']))
                            ? base_url("public/image/seatBlocked.jpeg")
                            : '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'];
                        $secseatLabelThumb = $seatLabelThumb = $sheet['isBooked'] ? 'booked' : 'available';
                        // $secseatLabelThumb = $seatLabelThumb = $sheet['isBooked'] ? 'booked' : ((isset($sheet['isHold'] && $seatRows[0][0]['isHold'])) ? 'hold' : 'available');
                        // $secseatLabelThumb = $seatLabelThumb = $sheet['isBooked'] ? 'booked' : ((isset($sheet['isHold']) && $sheet['isHold']) || (isset($seatRows[0][0]['isHold']) && $seatRows[0][0]['isHold']) ? 'hold' : 'available');
                        $seatLabelThumb = $sheet['isBooked'] ? 'booked' : ((isset($sheet['isHold']) && $sheet['isHold']) ? 'hold' : (((isset($sheet['isBlock']) && $sheet['isBlock']) || !empty($sheet['isBlocked'])) ? 'blocked' :'available'));



                        $style = "";
                        if(isset($seatinfo['forth_seat']) && $seatinfo['forth_seat'] == 1 && $seatLabel == 4){
                            $style = "pointer-events: none;opacity: 0.5";
                        }
                        if(isset($seatinfo['lastSheet']) && $seatinfo['lastSheet'] == 1 && $seatLabel == 13){
                            $style = "pointer-events: none;opacity: 0.5";
                        }
                ?>
                            
                            <?php
                                        $isClickable = $seatLabelThumb === 'available';
                                        $liSeatStyle = $isClickable
                                            ? 'cursor: pointer; margin: auto; position: relative;margin-bottom: 10px; user-select: none;'
                                            : 'cursor: not-allowed; pointer-events: none; opacity: 0.55; margin: auto; position: relative;margin-bottom: 10px; user-select: none;';
                                        $finalStyle = $style;
                                        if (!$isClickable) {
                                            $finalStyle .= 'pointer-events: none; opacity: 0.5;';
                                        }
                                        ?>
                            <li style="<?php echo $liSeatStyle; ?>">
                                    <div <?php if ($isClickable): ?>
                                                    onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>"
                                                <?php endif; ?>
                                                data-seatnumber="<?php echo $seatLabel; ?>"
                                                style="<?php echo $finalStyle; ?>"
                                    >
                                    <?php if ($seatLabelThumb == "blocked"){?>
                                        <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 }?>
                                    <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;margin-bottom: 10px; user-select: none;"></li>
                                <?php
                            }
                            ?>
                            <?php
                            if($k==2){
                            ?>
                                <!-- <li style="cursor: pointer; margin: auto; position: relative;margin-bottom: 10px; user-select: none;">Door</li> -->
                                <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>
                            <?php
                            }
                            if($k == $l && $l!=$seetTotal){
                            ?>
                                <li style="cursor: pointer; margin: auto; position: relative;margin-bottom: 10px; user-select: none;"></li>
                            <?php
                            $l+=3;
                            }
                            $k++;
                        }
                }
            $i++;
            
            }
            ?>
           
        </ul>
      
    </div>
</div>