<style type="text/css">
.class-det {
  padding: 5px 20px ;
}
</style>
<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($cur_date)); ?></span></h3> 
          </div>
          <div class="upcoming-cover">
            <?php if($subjects != ''){ foreach($subjects as $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);

              ?>
              <div class="upcoming-tab upcoming-classes-tab next-class">
                <div class="class-Sec">
                  <h4 class="mb-2"><?= $value['classroom_name'] ?></h4>
                  <img class="mb-1" src="<?= base_url(); ?>assets_admin/images/icons/<?= $value['subject_icon'] ?>">
                </div>
                <div class="class-det">
                  <div class="class-det-head">
                    <h5><?= $value['subject_name'] ?></h5>
                    
                    <div class="class-time">
                      <div class="time"><i class="far fa-clock"></i><span><?= $value['duration'] ?> min</span></div>
                    </div>
                  </div>

                  <p><?= $value['batch_name'] ?></p>
                  <?php  if(strtolower($pday) === strtolower($sessionDay) && ($now >= $begintime && $now <= $endtime))
                  { ?>
                    <div class="start-btn-wrap">
                      <a class="join-class-btn" href="<?= $value['start_link'] ?>" target="_blank">Start</a>
                    </div>
                  <?php } else { ?>
                    <p class="mt-3"><b><?= date('h:i a', strtotime($s)) ?></b></p>
                    
                  <?php } ?>
                </div> 
              </div>
            <?php }
          } else { ?>
            <div class="upcoming-tab">No Sessions scheduled </div>
          <?php } ?>
          
        </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(); ?>teacher/ajax_get_teacher_calendar_from_date",
    data:{dateval:dateval},
    success:function(response){
      
      if(response != 'failed'){
        $('.upcoming-section-wrap').html(response);
      } else {
        let msg = 'No classes scheduled for selected date';
        $('.upcoming-section-wrap').html(msg);
      }
      
    }
  }); 
 }
 
 
</script>