<div class="tab-pane fade" id="attendance-and-notes" role="tabpanel" aria-labelledby="attendance-and-notes-tab">
  <div class="card tabcard average-attendance">
    <div class="card-body">
      <h3 class="setting_title">Average attendance for last 90 days</h3>
      <div class="settings">
        <div class="row row-gap-20">
          <div class="col col-block">
            <div class="attendance-box">
              <div class="full-attendance-area">
                <%=studentEventData.percentage%>%
              </div>
            </div>
          </div>
          <div class="col col-block">
            <div class="attendance-box">
              <span class="attendance-number">
                <%=studentEventData.present%>
              </span>
              <p class="student-record">Present</p>
            </div>
          </div>
          <div class="col col-block">
            <div class="attendance-box">
              <span class="attendance-number">
                <%=studentEventData.unrecorded%>
              </span>
              <p class="student-record">Unrecorded</p>
            </div>
          </div>
          <div class="col col-block">
            <div class="attendance-box">
              <span class="attendance-number">
                <%=studentEventData.absent%>
              </span>
              <p class="student-record">Student Absences</p>
            </div>
          </div>
          <div class="col col-block">
            <div class="attendance-box">
              <span class="attendance-number">
                <%=studentEventData.totalEvent%>
              </span>
              <p class="student-record">Total Events</p>
            </div>
          </div>
          <% if(loggedUserInfo.role==1) { %>
            <div class="col-12 text-right mt-2">
              <button type="button" class="btn theme-btn" data-toggle="modal" data-target="#createReport">Create
                Report</button>
            </div>
            <% } %>
        </div>
      </div>
    </div>
  </div>
  <div class="card tabcard average-attendance mt-20">
    <div class="card-body">
      <h3 class="setting_title">
        <%=currentStudent.first_name +' '+currentStudent.last_name%> records
      </h3>
      <div class="settings">
        <div class="student-attendance-records common-datatable fluid-px0">
          <div class="table-responsive">
            <table id="studentRecord" class="table" style="width:100%">
              <thead>
                <tr>
                  <th>Date & Time</th>
                  <th>Duration</th>
                  <th>Tutor</th>
                  <!-- <th>Category</th> -->
                  <th>Attendance</th>
                  <th>Notes</th>
                  <!-- <th></th> -->
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade common-modal modal-label-style create-report-modal" data-backdrop="static" id="createReport" tabindex="-1" role="dialog" aria-labelledby="createReportLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="createReportLabel">Attendance Report</h3>
        <button type="button" class="modal_close" data-dismiss="modal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
      <form method="post" action="/attendance-notes/create-report" class="modal-form-area" id="attendance-report-form">
        <input type="hidden" name="student_id" value="<%=currentStudent._id%>">
        <input type="hidden" name="student_name" value="<%=currentStudent.first_name +" "+ currentStudent.last_name%>">
        <div class="modal-body">
          <div class="form-area gap-0">
            <div class="form-group dateRangeBlock position-relative">
              <label class="cursor-none">Date Range <span class="dateQuickselect">Quick Select</span></label>
              <input type="text" name="date_range" id="dateRangeblock">
            </div>
            <div class="form-group">
              <label class="cursor-none">Include</label>
              <ul class="settinglist mt-0 ">
                <li>
                  <div class="form-check">
                    <input type="checkbox" name="note_report[]" value="1" id="studentNotesReport"
                      class="form-check-input">
                    <label class="form-check-label fw-400 mb-0" for="studentNotesReport">Student Notes</label>
                  </div>
                </li>
                <li>
                  <div class="form-check">
                    <input type="checkbox" name="note_report[]" value="2" id="parentNotes" class="form-check-input">
                    <label class="form-check-label fw-400 mb-0" for="parentNotes">Parent Notes</label>
                  </div>
                </li>
                <li>
                  <div class="form-check">
                    <input type="checkbox" name="note_report[]" value="3" id="privateNotes" class="form-check-input">
                    <label class="form-check-label fw-400 mb-0" for="privateNotes">Private Notes</label>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="btn-rightarea">
            <button type="button" data-dismiss="modal" class="btn theme-btn cancel-btn">Cancel</button>
            <button type="button" class="btn theme-btn create-report-btn">Save</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Attendance Details Modal -->
<div class="modal fade common-modal" data-backdrop="static" id="AttendanceNoteAttach" tabindex="-1" role="dialog" aria-labelledby="AttendanceNoteAttachLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="AttendanceNoteAttachLabel">Note Details</h3>
        <button type="button" class="modal_close" data-dismiss="modal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
      <form class="modal-form-area common-form" id="">
        <div class="modal-body">
          <div class="assign-tutor-block">
            <div class="assigntutoe-content st-notes common-form pl-0 pt-0">
              <h2 class="text-center">No Data Available</h2>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="btn-rightarea">
            <button type="button" data-dismiss="modal" class="btn theme-btn cancel-btn">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
  const studentId = "<%=currentStudent._id%>";
  $(document).ready(function () {
    renderStudentRecordDataTable();
  });

  $(function () {
    $('.dateQuickselect').daterangepicker({
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      alwaysShowCalendars: true,
      locale: {
        cancelLabel: 'Clear',
        applyLabel: 'Select',
      },

    }, function (start, end, label) {
      $('#dateRangeblock').val(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
    });

  $('#dateRangeblock').daterangepicker({
    opens: 'left',
    format: 'DD/MM/YYYY',
  });

  $('.student-atte-tabledate').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'), 10)
  });
  });

  function renderStudentRecordDataTable() {
    var gradeTable = $('#studentRecord').DataTable({
      "paging": true,
      "pageLength": 10,
      "language": {
        "searchPlaceholder": "Search",
        "processing": '<div><div></div><div></div><div></div><div></div></div>'
      },
      "processing": true,
      "serverSide": true,
      "ordering": false,
      'ajax': {
        'url': '/student-preferences/students-attendance-notes-datatable',
        'type': 'POST',
        'data': {
          studentId: studentId
        },
      },
      "drawCallback": function (settings) { },
      'columns': [
        {
          data: "event_id",
          "render": function (data, type, row) {
            let html = '';
            if (data) {
              let startTime = moment(data.start_time).format('h:mm A');
              let endTime = moment(data.end_time).format('h:mm A');
              let date = moment(data.start_time).format('D MMM YYYY');
              html = `<p>${date} <br/> <span>${startTime} - ${endTime}</span></p>`
            }
            return html;
          }
        },
        {
          data: "event_id",
          "render": function (data, type, row) {
            return data ? `${data.duration} min` : '';
          }
        },
        {
          data: "tutor",
          "render": function (data, type, row) {
            return data ? `${data.first_name} ${data.last_name}` : '';
          }
        },
        // {
        //     data: "event_id",
        //     "render": function (data, type, row) {
        //       return data ? `${data.event_category_id.name}` : '';
        //     }
        // },
        {
          data: "attendees",
          "render": function (data, type, row) {
            let attendance = data[0].status;
            if (attendance !== '') {
              attendance = attendance.charAt(0).toUpperCase() + attendance.slice(1);
            }
            let status = data[0].std_was_late ? 'Student was late' : data[0].std_absent_billing_option ? 'Billable' : 'Not Billable';
            return `${attendance} (${status})`;
          }
        },
        {
          data: "group_note_id",
          "render": function (data, type, row) {
            let html = 'N/A';
            if(data){
              html = `<a href="javascript:void(0)" data-id="${data}" onclick="studentsNoteAndAttachments(this)" class="attachnote" data-toggle="modal" data-target="#AttendanceNoteAttach"><img src="/images/clipboard.svg" alt=""></a>`;
            }
            return html;
          }
        },
      ],
    });
  }

  function studentsNoteAndAttachments(element) {
    let groupNoteId = $(element).data('id');
    $.ajax({
      type: "POST",
      url: '/student-preferences/students-note-attachments',
      data: {
        groupNoteId: groupNoteId
      },
      success: function (response) {
        $('.st-notes').html(response);
      }
    });
  }

  $('.btn.theme-btn').click(function () {
    $('.error, .serve-error').remove();
  });

  $(document).on('click', '.create-report-btn', function (event) {
    event.preventDefault();
    $('.error, .serve-error').remove();

    let dateRange = $('#dateRangeblock').val();
    const anyChecked = $('input[name="note_report[]"]:checked').length > 0;
    let isValid = true;

    if (dateRange == '') {
      isValid = false;
      $("#dateRangeblock").after('<span class="error" style="color:red;">Please choose date</span>');
    }

    if (!anyChecked) {
      isValid = false;
      $(".settinglist").after('<span class="error" style="color:red;">Please choose at least one checkbox</span>');
    }

    if (isValid) {
      $(".create-report-btn").prop('disabled', true).text('Generating report...');
      $.ajax({
        url: $("#attendance-report-form").attr('action'),
        method: "POST",
        data: $("#attendance-report-form").serialize(),
        success: function (response) {
          if (response.success && response.pdfUrl) {
            const link = document.createElement('a');
            link.href = response.pdfUrl;
            link.download = 'attendance_report.pdf';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link)
          } else {
            alert('Error: Unable to generate the report.');
          }
        },
        error: function (response) {
          $(".dateRangeBlock").after(`<span class="serve-error" style="color:red;margin-top: -20px;">${response.responseJSON.error}</span>`);
        },
        complete: function () {
          $(".create-report-btn").prop('disabled', false).text('Generate Report');
        }
      });
    }
  });
</script>