<link rel="stylesheet" href="<?php echo admin_css() ?>dist/css/calendar-gc.min.css">
 <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">My Attandence</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Report</a></li>
              <li class="breadcrumb-item active">My Attandence</li>

            </ol>
          </div>
        </div>
      </div>
    </div>

    <section class="content">
      <div class="container-fluid">
        <div class="card card-default">
          <div class="card-body">
            <div id="calendar" style="padding: 1rem;"></div>
          </div>
        </div>
      </div>
    </section>
  </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="<?php echo admin_css(); ?>dist/js/calendar-gc.min.js"></script>
<?php
$user_id = user()->user_id;
$this->db->where('inst_att_user_id', $user_id);
$this->db->group_by('DATE(inst_att_date_time)');
$all_att = $this->db->get('instructor_attendance')->result();
?>
<script>
  $(function (e) {
    var calendar = $("#calendar").calendarGC({
      dayBegin: 0,
      prevIcon: '&#x3c;',
      nextIcon: '&#x3e;',
      onPrevMonth: function (e) {
        console.log("prev");
        console.log(e)
      },
      onNextMonth: function (e) {
        console.log("next");
        console.log(e)
      },
      events: [
        <?php foreach ($all_att as $key => $date):?>
        {
          date: new Date("<?php echo date('Y-m-d', strtotime($date->inst_att_date_time))?>"),
          eventName: "Attendant",
          className: "badge bg-success",
          onclick(e, data) {
            console.log(data);
          },
          dateColor: "success"
        },
        <?php endforeach; ?>
      ],
      onclickDate: function (e, data) {
        var date_details = convert(data.datejs);
        $.ajax({
          beforeSend: function() {
              $(".loader").show();
          },
          type: "POST",
          url: '<?php echo base_url(); ?>/admin/course/get_all_study_note',
          data: {date : date_details}, 
          success: function(data)
          {
            $('#note_modal').modal('show');
            $('#note').html(data);
            $(".loader").hide();
          }
        });
        
      }
    });
  });
  function convert(str) {
  var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
  return [date.getFullYear(), mnth, day].join("-");
}

</script>
<style>
.month
{
  display:block;
}
</style>
<div class="modal fade" id="note_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">All Notes</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="note"></div>
      </div>
    </div>
  </div>
</div>