@extends('dashboard.layouts.default')
@section('content')
<section class="top-section to-do-student">
  <div class="container">
    <div class="card mb-3">
      <div class="card-body">
        <h2 class="card-title">Upcoming Tasks</h2>
        <table class="table table-hover display" id="dataTables" style="width:100%">
          <thead>
            <tr>
              @if($st_type!='Tutor')
              <th style="width:15%" class="text-start fw-semibold border-bottom border-dark border-2 border-opacity-10">Teacher Name</th>
              @endif
              <th style="width:10%" class="text-start fw-semibold border-bottom border-dark border-2 border-opacity-10">Task Name</th>
              <!--<th class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Tasks</th> -->
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Subject</th>
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Notes</th>
              <th style="width:15%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Action</th>
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Due Date</th>
              <th style="display:none;" class="fw-semibold">Due Date</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Past Tasks</h2>
        <a onclick="showPastTasks();" class="btn btn-primary">Completed/Past Tasks</a>
        <table class="table table-hover" id="pastDataTables" style="display:none;width:100%">
          <thead>
            <tr>
              @if($st_type!='Tutor')
              <th style="width:15%" class="text-start fw-semibold border-bottom border-dark border-2 border-opacity-10">Teacher Name</th>
              @endif
              <th style="width:10%" class="text-start fw-semibold border-bottom border-dark border-2 border-opacity-10">Task Name</th>
              <!--<th class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Tasks</th>-->
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Subject</th>
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Notes</th>
              <th style="width:15%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Action</th>
              <th style="width:10%" class="fw-semibold border-bottom border-dark border-2 border-opacity-10">Due Date</th>
              <th style="display:none;" class="fw-semibold">Due Date</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<!-- include('layout.bottom-ads') -->
@include('student.tasks.more_topic_view_modal')
<!--suppress JSUnusedLocalSymbols -->

<div class="modal fade" id="noteViewModal" tabindex="-1" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><b>Notes</b></h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
			</div>
      <div class="modal-body">
				<div class="wrapword" id="noteViewData"></div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('innerscripts')
<script>

  $(function () {