<main class="common_margin" id="main"> 
  <div class="main-wrap">
    <div class="my-info-inner">   
      <div class="breadcrumb-section">
        <ol class="breadcrumb breadcrumb-back"> 
          <a href="<?php echo base_url()?>student/bus-facility">   
            <li class="breadcrumb-item"> Back</li>  
          </a>
        </ol>
      </div>
      <form id="bus_fee_form" method="POST" action="<?php echo base_url()?>student/bus-fee">
      <div class="subject_lhead"> Choose your stop</div>
      <?php 
          $paymet_types = array('Full Payment','Payable in 2 parts','Payable in 4 parts','Payable in 6 parts');
          $payment_method_total=$decode_installment='';
          if (isset($installment) && !empty($installment)) {

            $decode_installment = json_decode($installment['due_amount_date']);
           $payment_method_total = count((array)$decode_installment);

          } 
      ?>
      <div class="bus_wrap">
         <div class="bus_form_wrap">
             <div class="bus_formArea">
                  <div class="form-group assign_subject">
                      <label>Select Route  </label>
                      <select   class="form-control selectpicker" id="select_route" name="route_name">
                        <?php if (isset($route_name) && !empty($route_name)) {
                          $i = 1;
                          foreach ($route_name as $key => $value) {
                            if ($i==1) { ?>
                              <option value="<?php echo $value['id'] ?>" selected><?php echo $value['route_name']; ?></option> 
                          <?php }else{ ?>
                              <option value="<?php echo $value['id'] ?>"><?php echo $value['route_name']; ?></option> 
                           <?php }
                          $i++;
                         }
                        } ?>
                          
                      </select>
                      <label id="course_id-error" class="error" for="course_id"></label>
                  </div>
              </div>
              <div class="bus_formArea">
                  <div class="form-group assign_subject">
                      <label>Select Stop </label>
                      <select   class="form-control selectpicker " id="select_stop" name="stop_name">
                          
                      </select>
                      <label id="course_id-error" class="error" for="course_id"></label>
                  </div>
              </div>
         </div>
         <div class="bus_details">
             <ul class="bus_details_list">
                 <!-- <li>
                     <label>Route name:</label><span class="route_name_show"></span>
                 </li> -->
                 <li>
                     <label>Bus Fee Total:</label><span><?php echo $bus_fee ? $bus_fee['amount'] : 'Fees not found' ?></span>
                     <input type="hidden" name="totol_bus_fee" value="<?php echo $bus_fee ? $bus_fee['amount'] : '' ?>">
                     <input type="hidden" name="course_fee_id" id="course_fee_id" value="<?php echo $bus_fee ? $bus_fee['course_fee_id'] : '' ?>">
                     <input type="hidden" name="fee_type_id" value="<?php echo $bus_fee ? $bus_fee['fees_type']: '' ?>">
                 </li>
                 <li>
                     <label>Payment Method:</label>
                     <span>
                         <div class="form-group assign_subject"> 
                              <select   class="form-control selectpicker " id="Payment_mode" name="mode_payment">
                                <option value="">--- Select --- </option>
                                <?php if (isset($payment_method_total) && !empty($payment_method_total)) {
                                  for ($i=0; $i < $payment_method_total ; $i++) { 
                                    ?>
                                      <option value="<?php echo $i+1 ?>"> <?php echo $paymet_types[$i]; ?></option>
                                      
                                   <?php 
                                  }
                                } ?>
                                  
                              </select>
                              <label id="course_id-error" class="error" for="course_id"></label>
                          </div>
                     </span>
                 </li>
                 <li>
                     <label>Payment Dates:</label>
                     <span>
                        <ul class="sele-sub-opt-two" style="list-style-type: none;">
                        </ul>
                     </span>
                 </li>
             </ul>
         </div>
         
        <!-- <div class="hostel_btn">
            <button class="join-class-btn">Continue</button> 
        </div> -->
      </div>     
    </form>
    </div>
  </div>  
<style type="text/css">
  .error{
    color: red;
  }
</style>
<script>

  $(document).ready(function() {
      get_route_stop_list($('#select_route :selected').val());


  });

  $('#Payment_mode').change(function(){
      var course_id = $('#course_fee_id').val();
      var id = $('#Payment_mode :selected').val();
      $.ajax({
          url: '<?php echo base_url() . 'student/get_bus_payment_json/' ?>' + id +'/'+ course_id,
          type: 'POST',
          dataType: 'json',
          success: function(result) {            
            var view_pay_details = '';var i = 1;
            $.each(result, function(index, value) {
                if (i == 1) {
                  view_pay_details += '<li><div class="outter-pay-wrap" style="display: flex;"><div class="outter-check green-pay"><i class="fa fa-check"></i></div><p class="paid-para"> Rs '+ value['amount'] +'</p></div><div class="paid-space"> Due on: '+ value['due_date'] +' </div><button  class="fees-pay-btn text-white" type="submit">Pay Now</button></li><input type="hidden" name="paying_amount" value="'+ value['amount'] +'"><input type="hidden" name="due_amount_date" value="'+ value['due_date'] +'">';
                }else{
                view_pay_details += '<li><div class="outter-pay-wrap" style="display: flex;"><div class="outter-check"><i class="fa fa-check"></i></div><p class="paid-para">Rs '+ value['amount'] +'</p></div><div class="paid-space"> Due on: '+ value['due_date'] +' </div></li>';
              }
              i++;
            });

            $('.sele-sub-opt-two').html(view_pay_details);
            $('.fees-pay-btn').css('width','76px');
          }
      });
  });

  $('#select_route').change(function(){
      // alert($('#select_route :selected').val());
      get_route_stop_list($('#select_route :selected').val());
  });

  function get_route_stop_list(id)
  {    
    $.ajax({
          url: '<?php echo base_url() . 'student/get_bus_stops_name/' ?>' + id,
          type: 'POST',
          dataType: 'json',
          success: function(result) {
      
            var stops = '';
            stops = '<option value="" selected> -------Select---------</option>';
            $.each(result, function(index, value) {
                stops += '<option value="'+ value['id']+'">'+ value['place_name'] +'</option>';
            });
            
            $('#select_stop').html(stops);
          }
      });

  }


    $("#bus_fee_form").validate({
        ignore: ":hidden",
        rules: {
            route_name : {
                required : true,
                
            },
            stop_name : {
                required : true,
                
            },
            mode_payment:{
              required:true
            }


        },
        messages: {

            route_name : {
                required : 'Select Route Name'
            },
            stop_name : {
                required : 'Please Select Stop Name'
            },
            mode_payment:{
                required : 'Select Mode of Paymet'
            },

        },
        submitHandler: function(form) {
                         
                form.submit();
            }
        });
</script>

</main>