<?php
// print_r($seatRows[0][0]['isBooked']);die;
$seatLabelThumb = $seatRows[0][0]['isBooked'] ? 'booked' : 'available';
?>
<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="<?php echo base_url('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'] ? base_url('public/image/seatbooked.svg') : base_url('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
            $seatLabelThumb = $seatRows[0][1]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="2">
                    <img src="<?php echo $seatRows[0][1]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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][1]['seatName'] ?></p>
                </div>
            </li>
            <?php
            $seatLabelThumb = $seatRows[0][2]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="3">
                    <img src="<?php echo $seatRows[0][2]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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][2]['seatName'] ?></p>
                </div>
            </li>
            <?php
            $seatLabelThumb = $seatRows[0][3]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="4">
                    <img src="<?php echo $seatRows[0][3]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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][3]['seatName'] ?></p>
                </div>
            </li>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;"><?php echo lang('Localize.bus_door'); ?></li>
            <?php
            $seatLabelThumb = $seatRows[0][5]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="5">
                    <img src="<?php echo $seatRows[0][5]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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][5]['seatName'] ?></p>
                </div>
            </li>
            <?php
            /*
            $seatLabelThumb = $seatRows[0][5]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="6">
                    <img src="<?php echo $seatRows[0][5]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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][5]['seatName'] ?></p>
                </div>
            </li>
            <?php*/
            $seatLabelThumb = $seatRows[1][0]['isBooked'] ? 'booked' : 'available';
            ?>
            <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="6">
                    <img src="<?php echo $seatRows[1][0]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[1][0]['seatName'] ?></p>
                </div>
            </li>
        </ul>
        <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
            $seatLabelThumb = $seatRows[1][1]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="7">
                    <img src="<?php echo $seatRows[1][1]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[1][1]['seatName'] ?></p>
                </div>
            </li>
             <?php
            $seatLabelThumb = $seatRows[1][2]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="8">
                    <img src="<?php echo $seatRows[1][2]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[1][2]['seatName'] ?></p>
                </div>
            </li>
            <li style="cursor: pointer; margin: auto; position: relative"></li>
             <?php
            $seatLabelThumb = $seatRows[1][3]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="9">
                    <img src="<?php echo $seatRows[1][3]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[1][3]['seatName'] ?></p>
                </div>
            </li>
            <?php
            $seatLabelThumb = $seatRows[1][5]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="10">
                    <img src="<?php echo $seatRows[1][5]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[1][5]['seatName'] ?></p>
                </div>
            </li>
        </ul>
        <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
            $seatLabelThumb = $seatRows[2][0]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="11">
                    <img src="<?php echo $seatRows[2][0]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[2][0]['seatName'] ?></p>
                </div>
            </li>
             <?php
            $seatLabelThumb = $seatRows[2][1]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="12">
                    <img src="<?php echo $seatRows[2][1]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[2][1]['seatName'] ?></p>
                </div>
            </li>
             <?php
            $seatLabelThumb = $seatRows[2][2]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="13">
                    <img src="<?php echo $seatRows[2][2]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[2][2]['seatName'] ?></p>
                </div>
            </li>
             <?php
            $seatLabelThumb = $seatRows[2][3]['isBooked'] ? 'booked' : 'available';
            ?>
            <li style="cursor: pointer; margin: auto; position: relative; user-select: none;">
                <div onclick="<?php echo "seacClick(this, $subTripId, '$seatLabelThumb');"; ?>" data-seatnumber="14">
                    <img src="<?php echo $seatRows[2][3]['isBooked']? base_url('public/image/seatbooked.svg') : base_url('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[2][3]['seatName'] ?></p>
                </div>
            </li>
        </ul>
    </div>
</div>