<style>
      .seat_div {
            
   /* -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);*/
    @media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}    
}
.seat-selection {
     width: 28px;
     height:28px;
     padding: 10px;
    }
input[type=radio].flight_seats {
display: none;
}
.seat-selection:hover {
     opacity:0.6;
     cursor: pointer;
   }                                                                    
.seat-selection:active {
   opacity:0.4;
   cursor: pointer;
 }
input[type=radio]:checked + label > .seat-selection {
    border: 2px solid rgb(228, 207, 94);
    background-size: 650%;
    background-position: 20% 0%;
    } 
    .choosen_seat{
    border: 2px solid rgb(228, 207, 94);
    background-size: 650% !important;
    background-position: 20% 0% !important; 
    }   
</style>                                                                   
<!-- seat modal -->
<?php if(!empty($seat_map_info)) {
    $seat_info = json_decode($seat_map_info); 
   
    $seat_det = $seat_info->tripSeatMap->tripSeat;
    $seat_det = json_decode(json_encode($seat_det),true);
    // print_r($flight_details);
    foreach($seat_det as $d){
        //echo 'df';
    }
   // $key = array_key_first($seat_det); // for php >7.3
    $key = array_keys($seat_det)[0];
    $rows = $seat_det[$key]['sData']['row'];
    $columns = $seat_det[$key]['sData']['column'];
    $columns = $columns+1;
   // $columns = $seat_det->sData->column;
    $s_info = $seat_det[$key]['sInfo'];
   // print_r($s_info);
    //$key = array_search('1E', array_column($s_info, 'seatNo'));
    //echo $key;
} ?>  

  <div class="modal" id="seat_map_modal" style="">
    <div class="modal-dialog modal-lg" >
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Select Seats</h4>
         <!-- <button type="button" class="close" data-dismiss="modal">&times;</button>-->
            <div class="align-self-center px-2">
                <ul class="d-flex flex-wrap">
                   <li class="me-2">
                       <div class="seat seatP assign"></div>
                           <span class="font-small">Assigned</span>
                   </li>
                   <li class="me-2">
                       <div class="seat seatP free"></div>
                          <span class="font-small">Free Seat</span>
                   </li>
                   <li class="me-2">
                       <div class="seat seatP occupied"></div>
                           <span class="font-small">Booked</span>
                   </li>
                   <li class="me-2">
                         <div class="seat seatP"></div>
                            <span class="font-small">Asile seat or extra leg space</span>
                   </li>

               </ul>
            </div>
        </div>
        <!-- Modal body -->
          <?php
          $connect = 0;
          $flight_det = json_decode($flight_details); 
           // print_r($flight_details);
            if(!empty($flight_det)):
            $fly_info = $flight_det->tripInfos[0]->sI; 
           endif;
          $search_data = $flight_det->searchQuery;
          $adultCount = $search_data->paxInfo->ADULT;
          $childCount = $search_data->paxInfo->CHILD;
          ?>
            <div class="seatMapBox" id="" style="">
                 <div class="aircraftWrap">
                      <div class="flooraaa">
                          
                           
                          <?php
                          if(!empty($seat_det)){
                          foreach($seat_det as $seatt) {  echo '<br/>'; ?>
                           <!---------city name ------------->
                           <ul class="d-flex nav nav-pills addons-tab" id="pills-tab" role="tablist">
                                <li class="nav-item ms-0 ms-sm-3" role="presentation">
                                    <div class="p-2 border theme-border-radius d-flex align-items-center"
                                        id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
                                        role="tab" aria-controls="pills-profile" aria-selected="false">
                                      
                                        <div class="flex-grow-1 ms-2">
                                            <div class="fw-bold"><?=$fly_info[$connect]->da->code?> - <?=$fly_info[$connect]->aa->code?></div>
                                           <!-- <div class="font-small text-danger">Selection pending</div>-->
                                        </div>
                                    </div>
                                </li>
                                  <table border="1">
                          <tr>
                              <th>Passenger</th>
                              <th>Seat</th>
                              <th>Fee</th>
                          </tr>
                         <hr>
                            <?php for ($i = 1; $i <= $adultCount; $i++) : ?>
                              <tr onclick="selectSeat(<?=$connect?>,'adult',<?=$i?>)">  
                                  <td><input type="radio" data-connect="<?=$connect?>" data-type="adult" data-count="<?=$i?>" name="<?=$connect?>_passenger" <?php echo ($i === 1) ? 'checked' : ''; ?>> Adult <?php echo $i; ?></td>
                                  <td>
                                      <span id="<?=$connect?>_view_adult_seat_<?=$i?>"></span>
                                      <input type="" id="<?=$connect?>_adult_seat_<?=$i?>" name="">
                                  </td>
                                  <td>
                                      <span id="<?=$connect?>_view_adult_fee_<?=$i?>"></span>
                                      <input type="" id="<?=$connect?>_adult_fee_<?=$i?>" name="">
                                  </td>
                                      
                              </tr><hr>
                            <?php endfor; ?>

                            <?php for ($j = 1; $j <= $childCount; $j++) : ?>
                                <tr onclick="selectSeat(<?=$connect?>,'child',<?=$j?>)">
                                    <td><input type="radio" data-connect="<?=$connect?>" data-type="child" data-count="<?=$j?>" name="<?=$connect?>_passenger" <?php echo ($j === 1) ? 'checked' : ''; ?>>Child <?php echo $j; ?></td>
                                    <td>
                                        <span id="<?=$connect?>_view_child_seat_<?=$j?>"></span>
                                         <input type="" id="<?=$connect?>_child_seat_<?=$j?>" name="">
                                    </td>
                                    <td>
                                        <span id="<?=$connect?>_view_child_fee_<?=$j?>"></span>
                                        <input type="" id="<?=$connect?>_child_fee_<?=$j?>" name="">
                                    </td>
                                      
                               </tr><hr>
                            <?php endfor; ?>

                            <!-- No row for infants -->
                        
                          </table>
                            </ul>
                       
                          <!----------- seats----------->
                            <ul class="seats ml20">                       
                            <?php for ($m = 1; $m <= $columns; $m++) { 
                            // $alph = array('A','B','C','D','E','F','G','H','I');
                             $alph = range('A', 'Z'); 
                             $n = $alph[$m-1]; ?>
               <!--  <li class="seat-list numRow"><?=$n?></li>-->
                            <?php } ?>
                             </ul>
                   <?php $position =0;  for ($l = 1; $l <= $rows; $l++) { ?>
            <ul class="seats seat_div" id="" data-line="">
                     <span class="seat_div" ><?=$l?></span>
                       <?php for ($m = 1; $m <= $columns; $m++) { 
                        // $alph = array('A','B','C','D','E','F','G','H','I');
                         $alph = range('A', 'Z');
                         $n = $alph[$m-1];
                         $seat_number_gen = $l.''.$n;
                         //$seat_number_org = $s_info[$position]['seatNo'];
                         $key = array_search($seat_number_gen, array_column($s_info, 'seatNo'));
                    if(is_numeric($key)){
                         $display = '';
                        if (isset($s_info[$key]['amount'])) {
                             $amount = $s_info[$key]['amount']; 
                        }else{
                             $amount ='';   
                        } 
                        if (isset($s_info[$key]['isBooked'])) {
                             $booked =  $s_info[$key]['isBooked'];
                        }else{
                            $booked ='';
                        }
                        if (isset($s_info[$key]['isAisle'])) {
                             $asile = $s_info[$key]['isAisle'];
                        }else{
                            $asile = '';
                        }
                        if (isset($s_info[$key]['isLegroom'])) {
                             $leg_space = $s_info[$key]['isLegroom'];
                        }else{
                            $leg_space='';
                        }
                    }else{
                         $booked=$asile=$leg_space=$amount='';
                         $display='none'; 
                         } ?>  
             <li class="seat-list" style="display:<?=$display?>">
                   <?php if($l==1){ ?>
                 <label class="seat_div" data-html="true" data-toggle="tooltip" data-placement="bottom" title="" for="" style="padding-right:10px;"><?=$n?>
                 </label>
              <?php } if(is_numeric($key) && $amount >0 && $booked=='') { ?>
                   <input type="radio" class="flight_seats <?=$connect?>_<?=$seat_number_gen?>" onclick="assignSeat('<?=$connect?>', '<?=$seat_number_gen?>', '<?=$amount?>')" title="ttttt" name="<?=$connect?>_choice" id="choose-<?=$l?>_<?=$m?>_<?=$connect?>" value="<?=$seat_number_gen?>"/>
                 <label data-html="true" data-toggle="tooltip" data-placement="bottom" title="<?=$seat_number_gen?> <?=$amount?>" for="choose-<?=$l?>_<?=$m?>_<?=$connect?>">     
                    <div class="seat seatE seat-selection" id="div_<?=$connect?>_<?=$seat_number_gen?>"></div>
                 </label>
              <?php } elseif(is_numeric($key) && $amount ==0 && $booked=='') { ?>
                     <input type="radio" class="flight_seats <?=$connect?>_<?=$seat_number_gen?>" onclick="assignSeat('<?=$connect?>', '<?=$seat_number_gen?>', '<?=$amount?>')" title="ttttt" name="<?=$connect?>_choice" id="choose-<?=$l?>_<?=$m?>_<?=$connect?>" value="<?=$seat_number_gen?>"/>
                 <label data-html="true" data-toggle="tooltip" data-placement="bottom" title="<?=$seat_number_gen?> <?=$amount?>" for="choose-<?=$l?>_<?=$m?>_<?=$connect?>">     
                    <div class="seat seatE free seat-selection" id="div_<?=$connect?>_<?=$seat_number_gen?>"></div>
                  </label>
                 <?php } else { ?>
                  <input type="radio" class="flight_seats <?=$connect?>_<?=$seat_number_gen?>"  title="ttttt" name="<?=$connect?>_choice" id="choose-<?=$l?>_<?=$m?>_<?=$connect?>" value="<?=$seat_number_gen?>"/ disabled>
                 <label data-html="true" data-toggle="tooltip" data-placement="bottom" title="<?=$seat_number_gen?> <?=$amount?>" for="choose-<?=$l?>_<?=$m?>_<?=$connect?>">     
                     <div class="seat seatE occupied seat-selection"></div>
                  </label>
                 <?php } ?>
                 </li>
                   <?php $position++; }  ?>                 
            </ul>
              <?php } $connect++; }} else{
                              if(isset($error_msg)){
                                echo $error_msg;  
                              }
                              
                          } ?>
                          
                          
                          
                          
                          
                   </div>
                 </div>
              </div>   
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
<script>

function selectSeat(conn,type,count){
    
   var id=conn+"_"+type+"_seat_"+count;
    var selected_seat_no = $('#'+id).val();
    var selectedseat = document.getElementsByClassName(conn+'_'+selected_seat_no);

    for (var i = 0; i < selectedseat.length; i++) {
      selectedseat[i].disabled = false;
    /* var sel_divId =  'div_' + conn + '_' + selected_seat_no;
        var sel_div = document.getElementById(sel_divId); 
        if (sel_div) {
           // sel_div.classList.remove('choosen_seat');
        }*/
      
    }
     var new_seat = document.getElementsByName(conn +'_choice');
      for (var i = 0; i < new_seat.length; i++) {
    if (new_seat[i].checked) {
        new_seat[i].disabled = true;

        // Get the value of the checked radio button
        var seat_num = new_seat[i].value;

        // Add a class to the corresponding div
        var divId = 'div_' + conn + '_' + seat_num;
        var div = document.getElementById(divId);
        if (div) {
            div.classList.add('choosen_seat');
        }

        break; // Break the loop once a selected radio button is found
    }
}

     // Perform other actions with the provided parameters (conn, type, count) if needed
   
} 
    function assignSeat(connection,seat_no,amount){
     var Passengers = document.getElementsByName(connection +'_passenger');
      for (var i = 0; i < Passengers.length; i++) {
        if (Passengers[i].checked) {
            var type = Passengers[i].getAttribute('data-type');
            var count = Passengers[i].getAttribute('data-count');
            var id_seat = connection+"_"+type+"_seat_"+count;
            var id_fee = connection+"_"+type+"_fee_"+count;
            
            
            //remove selection for old seat
            var id=connection+"_"+type+"_seat_"+count;
            var old_seat_no = $('#'+id).val();
            
            var old_sel_divId =  'div_' + connection + '_' + old_seat_no;
            var sel_div = document.getElementById(old_sel_divId); 
            if (sel_div) {
            sel_div.classList.remove('choosen_seat');
            }
            
            
            $('#'+id_seat).val(seat_no);
            $('#'+id_fee).val(amount);
          
          // alert("Selected Radio count: " + radioButtons[i].getAttribute('data-count'));
          break;  // Break the loop once a selected radio button is found
        }
      }
        
    }
</script>