<style>
.meal_multi_select {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.meal_multi_select input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.meal_multi_select:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.meal_multi_select input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.meal_multi_select input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.meal_multi_select .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
    .removable {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.close-btn {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
</style> 



<div class="modal fade" id="mealsModal" tabindex="-1" role="dialog" aria-labelledby="fareRuleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Meals</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <!-- Modal content goes here -->
            <?php
            $flight_det = json_decode($flight_details);
          $connect = 0;
           // 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;
               
                  
                  
                 // $ssrinfo = $flight_det->tripInfos[0];
                  $segment_info = $flight_det->tripInfos[0]->sI;
                //  print_r($segment_info);
                  
            ?>
            <!-- traveller addon baggage -->
            <div class="review-flight py-3">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <!-- add baggage details flight depart -->
                            <div class="theme-box-shadow theme-border-radius bg-light mb-3 pb-0">
                                <div class="tab-content" id="pills-tabContent">
                                    <!-- flight departure baggage addon -->
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="row g-0 mb-3">
                                            <div class="col-12 border-bottom">
                                                <div class="d-flex flex-column p-3">
                                                    <span class="fw-bold">Select your prefered meal(s)</span>
                                                    <span class="font-medium">Delhi - Kochi</span>
                                                </div>
                                            </div>
                        
                                            
                             <div data-id="1" class="removable float-start rounded theme-bg-secondary theme-text-white font-medium px-2 ms-5">
                                                        item 1<button class="close-btn" onclick="removeSpan(this)">Close</button></div>
                                            <div data class="removablefloat-start rounded theme-bg-secondary theme-text-white font-medium px-2 ms-5">
                                                        item 2<button class="close-btn" onclick="removeSpan(this)">Close</button></div>
                                            
                                            
                                           
                      <?php if(!empty($segment_info)) { foreach($segment_info as $segment){ ?>
                       <div class="col-12 p-3">                        
                         <table border="">
                          <tr>
                              <th>Passenger</th>
                              <th>Meal</th>
                              <th>Amount</th>
                          </tr>
                         <hr>
                            <?php for ($i = 1; $i <= $adultCount; $i++) : ?>
                              <tr onclick="selectMeal(<?=$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_meal_<?=$i?>"></span>
                                      <input type="" id="<?=$connect?>_adult_meal_<?=$i?>" name="">
                                  </td>
                                  <td>
                                      <span id="<?=$connect?>_view_adult_fee_<?=$i?>"></span>
                                      <input type="" id="<?=$connect?>_adult_fee_<?=$i?>" name="">
                                  </td>
                                      
                              </tr>
                            <?php endfor; ?>

                            <?php for ($j = 1; $j <= $childCount; $j++) : ?>
                                <tr onclick="selectMeal(<?=$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_meal_<?=$j?>"></span>
                                         <input type="" id="<?=$connect?>_child_meal_<?=$j?>" name="">
                                    </td>
                                    <td>
                                        <span id="<?=$connect?>_view_child_fee_<?=$j?>"></span>
                                        <input type="" id="<?=$connect?>_child_fee_<?=$j?>" name="">
                                    </td>
                                      
                               </tr>
                            <?php endfor; ?>

                            <!-- No row for infants -->
                        
                          </table> 
                                            </div>
                                            <?php
                                               $ssrinfo = $segment->ssrInfo;
                                               $meals_details=  $ssrinfo->MEAL;
                                               //print_r($meals_details);
                                                $j = 1; foreach($meals_details as $meal){
                                                //print_r($meal); 
                                                ?>
                                              <div class="col-12 p-3">    
                                             <ul class="d-md-flex justify-content-between pt-3">
                                                    <li class="pb-3">
                                                        <img src="<?php echo base_url(); ?>assets/front/assets/images/icons/veg-meal.png" class="img-fluid"
                                                            alt="">
                                                        <span class="ms-2 font-medium"><?= isset($meal->desc) ? $meal->desc : ''; ?></span>
                                                    </li>
                                                    <li class="pb-3">
                                                        <div class="d-flex align-items-center justify-content-end">
                                                            
                                                            <i class="bi bi-currency-rupee"></i>
                                                            <span class="font-medium me-3 fw-bold"><?= isset($meal->amount) ? $meal->amount : '0'; ?></span>
                                                            <div class="add-btn-wrap">
                                                                <div class="input-group">
                                                                    <span class="input-group-btn">
                                                                        <button type="button"
                                                                            class="btn btn-default btn-number" data-type="minus" data-connect="<?=$connect?>" data-count="<?=$j?>"
                                                                            data-field="quant_<?=$connect?>_<?=$j?>" onclick="decrement(this)">
                                                                            <span class="bi bi-dash"></span>
                                                                        </button>
                                                                    </span>
                                                                    <input id="quant_<?=$connect?>_<?=$j?>" type="text" name="quant_<?=$connect?>_<?=$j?>"
                                                                        class="form-control input-number text-center border-0"
                                                                        value="0">
                                                                    
                                                                    <input type="hidden" value="<?= isset($meal->code) ? $meal->code : ''; ?>" name="mealcode_<?=$connect?>" id="mealcode_<?=$connect?>">
                                                                    
                                                                     <input type="hidden" value="<?= isset($meal->amount) ? $meal->amount : ''; ?>" name="mealamount_<?=$connect?>" id="mealamount_<?=$connect?>">
                                                                    
                                                                    <span class="input-group-btn">
                                                                        <button type="button"
                                                                            class="btn btn-default btn-number"
                                                                            data-type="plus" data-connect="<?=$connect?>" data-count="<?=$j?>" onclick="increment(this)" data-field="quant_<?=$connect?>_<?=$j?>">
                                                                            <span class="bi bi-plus"></span>
                                                                        </button>
                                                                    </span>
                                                                    
                                                                </div>
                                                                
                                                            </div>
                                                            
                                                        </div>
                                                        
                                                    </li>
                                                 <li class="pb-3">
                                                 <!--     <button type="button" data-connect="<?=$connect?>"  data-code="<?= isset($meal->code) ? $meal->code : ''; ?>" data-amount="<?= isset($meal->amount) ? $meal->amount : '0'; ?>" data-desc="<?= isset($meal->desc) ? $meal->desc : ''; ?>" class="btn btn-primary" onclick="assignMeal(this)">Select</button>-->
                                                     <label class="meal_multi_select">
                                                          <input data-connect="<?=$connect?>"  data-code="<?= isset($meal->code) ? $meal->code : ''; ?>" data-amount="<?= isset($meal->amount) ? $meal->amount : '0'; ?>" data-desc="<?= isset($meal->desc) ? $meal->desc : ''; ?>" id="sel_<?=$connect?>_<?=$j?>" onclick="assignMeal(this)" type="checkbox">
                                                          <span class="checkmark"></span>
                                                        </label>
                                                 </li>
                                                </ul>
                                                </div>
                                             <?php $j++; }  $connect++;  } }else{
                                                echo 'No meal information available ';
                                            } ?>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <script src="<?php echo base_url(); ?>assets/front/assets/js/bootstrap.bundle.min.js"></script>
      <script src="<?php echo base_url(); ?>assets/front/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--This page JavaScript -->
    <script src="<?php echo base_url(); ?>assets/front/js/owl.carousel.min.js"></script>
    <!--Data Calendar js -->
    <script src="<?php echo base_url(); ?>assets/front/js/jquery-ui.js"></script>
    <!--Traveler counter js -->
    <script src="<?php echo base_url(); ?>assets/front/js/counter.js"></script>
    <script src="<?php echo base_url(); ?>assets/front/js/main.js"></script>
    <!-- animation aos library -->
    <script src="<?php echo base_url(); ?>assets/front/js/aos.js"></script>

<script>
    function increment(btn) {
        var fieldName = $(btn).data('field');
        var mealCount = $("input[name=" + fieldName + "]");
        var connect = $(btn).data('connect');
        var count = $(btn).data('count');
        var currentVal = parseInt($("input[name=" + fieldName + "]").val(), 10);

        if (!isNaN(currentVal)) {
            $("input[name=" + fieldName + "]").val(currentVal + 1);
        } else {
            $("input[name=" + fieldName + "]").val(0);
        }
       mealSelection(connect,count,mealCount);  
    }

    function decrement(btn) {
        var fieldName = $(btn).data('field');
        var mealCount = $("input[name=" + fieldName + "]");
        var connect = $(btn).data('connect');
        var count = $(btn).data('count');
        var currentVal = parseInt($("input[name=" + fieldName + "]").val(), 10);

        if (!isNaN(currentVal) && currentVal > 0) {
            $("input[name=" + fieldName + "]").val(currentVal - 1);
        } else {
            $("input[name=" + fieldName + "]").val(0);
        }
         mealSelection(connect,count,mealCount);
    }
    function selectMeal(conn,type,count){
        
    }
    function assignMeal(sel){
        
      var code = $(sel).data('code');  
      var amount = $(sel).data('amount');  
      var conn = $(sel).data('connect');  
      var desc = $(sel).data('desc');
        
      var Passengers = document.getElementsByName(conn +'_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_meal = conn+"_"+type+"_meal_"+count;
            var id_fee = conn+"_"+type+"_fee_"+count;
           
            
            
            $('#'+id_meal).val(desc);
            $('#'+id_fee).val(amount);
          
          // alert("Selected Radio count: " + radioButtons[i].getAttribute('data-count'));
          break;  // Break the loop once a selected radio button is found
        }
      }  
        
    }
    function mealSelection(connect,count,mealCount) {
        
    var mealCountValue = parseInt(mealCount.val(), 10);
    if (!isNaN(mealCountValue) && mealCountValue > 0) {
       $('#sel_'+connect+'_'+count).prop('checked', true);
    } else {
        $('#sel_'+connect+'_'+count).prop('checked', false);
    }
    }
    function removeSpan(button) {
    // Get the parent span of the clicked button
    var span = button.parentNode;

    // Get the data-id attribute value
    var dataId = span.getAttribute('data-id');

    // Remove the span
    span.remove();

    // You can use the dataId as needed (e.g., send it to the server, perform some action, etc.)
    console.log('Removed span with data-id:', dataId);
}
</script>