<main class="common_margin" id="main">
  <div class="main-wrap">
    <div class="calendar-section">
      <div class="calendar-section-wrap"> 
        <div class="calendar-main">
          <div class="class-head">
            <h3 class="common-heading">Calendar</h3>
          </div>

          <div class="po-calendar">
            <input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker">
            <i class="fas fa-calendar-alt cal-icon"></i>
          </div>
          
        </div>
        <div class="upcoming-section-wrap">
          <div class="class-head">
            <h3 class="common-heading"><span><?php echo date("d/m/Y", strtotime($curr_date)); ?></span></h3> 
          </div>
          <div class="upcoming-cover">

            <?php if($subject_names){ ?>

              <?php foreach ($subject_names as $key => $value) { 

                $pday =  date("l");
                $sessionDay = $value['day'];
                
                $s = $value['start'];
                    // $s = "15:03";
                $p = date("H:i");
                
                $mins  = (strtotime($s)-strtotime($p)) / 60;

                $duration = $value['duration'];
                $end = date('H:i', strtotime($s) + ($duration * 60));                
                
                $now = new Datetime("now");
                $begintime = new DateTime($s);
                $endtime = new DateTime($end);

                $teacher_info = array_key_exists('teacher_name',$value) ? 'By: <span>'.$value["teacher_name"].'</span>' : 'Teacher not assigned';

                ?>

                <div class="upcoming-tab">
                  <div class="upcoming-sub-img"><img src="<?= base_url(); ?>assets_admin/images/icons/<?= $value["icon"] ?>"></div>
                  <div class="upcoming-subject">
                    <h4><?php echo $value['subject_name'] ?></h4>

                    <p class="class_tr_name"><?php echo $teacher_info ?></p>
                  </div>
                  <!-- <div class="upcoming-date">
                    <span>Today, 11.00 am</span>
                  </div> -->
                  <div class="upcoming-date">
                   <?php  if(strtolower($pday) === strtolower($sessionDay) && ($now >= $begintime && $now <= $endtime))
                   { ?>
                    <div class="my-class-btn-wrap"> <a target="_blank" href = "<?php echo $value['join_link'];  ?>"> <button class="join-class-btn">Join Class</button></a></div>
                  <?php } else { ?>
                    <span><?php echo date('h:i a',strtotime($value['start'])); ?></span>
                  <?php } ?>
                </div>
              </div> 
            <?php }  
          } else {
            echo '<div class="upcoming-tab">No Sessions scheduled </div>';
          } ?>
        </div>
      </div> 
    </div> 
  </div> 
</div>
</main> 

<script>

  $('#nepali-datepicker').nepaliDatePicker({
    language : 'english',
    ndpYear: true,
    ndpMonth: true,
    ndpYearCount: 10,
    onChange: function(data) {
      console.log(data.bs)
      showsessions(data.bs);
    }
  });


  function showsessions(dateval){
       
       $.ajax({
        type : 'POST',
        url : "<?= base_url(); ?>Student/ajax_get_sessions_from_date",
        data:{dateval:dateval},
        success:function(resposne){
          
          if(resposne != 'failed'){
              $('.upcoming-section-wrap').html(resposne);
          } else {
            let msg = 'No classes scheduled for selected date';
            $('.upcoming-section-wrap').html(msg);
          }
         
       }
     }); 
     }


   </script>