<style>
 label.error {
     color: red;
 }
</style>
<main class="common_margin" id="main"> 
 <div class="main-wrap">
    <div class="my-info-inner"> 

        <?php if($this->session->flashdata('failed')) { ?> 
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <p><?php echo $this->session->flashdata('failed') ?></p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div> 
        <?php } ?>

        <?php if(empty($hostel_fees)) {
            echo '<p>Hostel Fees has not been created for this student\'s batch or course</p>';
        } else { ?>

            <div class="payment-selection-wrap"> 
                <form action="<?php base_url() ?>get_hostel_details" id="hostel-form" method="post">
                    <div class="hostel_details_wrap">
                        <h4 class="payment_subhead">Select Hostel Plan</h4>
                        <ul class="hostel_details_info">
                            <input type="hidden" id="fee_name" name="feetype_name">
                            <?php foreach ($hostel_fees as $key => $value) { ?>
                                <li>
                                    <div class="radio_btn">
                                        <input type="radio" onclick="getInstallments(this)" value="<?= $value['cf_id'] ?>" name="course_fee_id" class="radio_b">
                                        <span class="checkmark"></span>
                                    </div>
                                    
                                    ₹<?= $value['amount'] ?>/Year - <?= $value['fee_values'] ?> 

                                    <div class="installment-container">

                                    </div>
                                </li>
                            <?php } ?>

                        </ul>

                        <label id="course_fee_id-error" class="error" for="course_fee_id"></label>

                        <div class="hostel_btn">
                            <button type="submit" class="join-class-btn">Continue</button>
                        </div>
                    </div>
                </form>
            </div> 
        </div>
    </div>  
</main>

<?php } ?>



<script>

 $(document).ready(function() {
    $("#hostel-form").validate({

       rules: {
          course_fee_id : "required",
          installment_type : "required"
      },
      messages: {

          course_fee_id : "Please choose 1 Hostel Plan",
          installment_type : "Please choose 1 installment type",



      },
      submitHandler: function(form) {

          form.submit();

      }
  });
})


 const getInstallments = function(ele) {
    $('.installment-container').empty();
    let course_fee_id = ele.value;

    let installmentContainer = $(ele).parent().siblings('.installment-container');

    $.ajax({
       type : 'POST',
       url : "<?php echo base_url(); ?>student/ajax_get_hostel_installments",
       data : {
          id : course_fee_id
      },
      success:function(response){
          if(!response) {
             $(installmentContainer).append('<p style="color:red">Installments have not been created for this fees. Please contact administrator for further service</p>');
         } else {
             $(installmentContainer).append(response);
         }

     },
 });
}
</script>