@extends('dashboard.layouts.default')
@section('content')
<div id="subheader" class="d-flex align-items-center">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-between">
      <div class="col d-flex align-items-center">
        <h5 class="sub-title">Manage Students</h5>
      </div>
      <div class="col-auto"> 
        <div class="tools overflow-auto">
     <!-- <button type="button" class="btn btn-info" onClick="javascript:window.open('{{ url('sample/How to set up your school account.pdf')}}', '_blank');"><i class="bx bxs-info-circle me-1"></i>How to set up school account</button>-->
          <button type="button" class="btn btn-reset" onclick="changePassword(null)"><i class="bx bxs-key me-1"></i>Reset Password</button>
          <button type="button"   class="btn btn-class"  onclick="moveToClass(null,null)"><i class="bx bxs-chevrons-right me-1"></i>Change Class</button> 
        <!--  <button type="button" class="btn btn-edit" onclick="editStudent(null)"><i class="bx bxs-edit-alt me-1"></i>Edit Student</button> -->
          <button type="button"   class="btn btn-import"  @if($wonde_id ) disabled @else onclick="importStudent(null)" @endif><i class="bx bx-import me-1"></i>Import Students</button>
          <button type="button" class="btn btn-export d-none"  @if($wonde_id ) disabled @else onclick="exportStudent()" @endif><i class="bx bx-export me-1"></i>Export Students</button>
          <button type="button" class="btn btn-add  "   onclick="addStudent(null)" ><i class="bx bxs-plus-circle me-1"></i>Add New Student</button>
          <button type="button" class="btn btn-delete"  @if($wonde_id ) disabled @else onclick="softDelete(null)" @endif><i class="bx bxs-trash me-1"></i>Delete Students</button>
        </div>
      </div>
    </div>
  </div>
</div>
<section class="top-section settings">
  <div class="container-fluid">
    <div class="row g-3">
      @include('layout.top-ads')
      <div class="col-lg-12">
        <div class="manage-sec">
          <a class="btn btn-manage active" href="{{ url('teacher/student') }}"><i class="bx bxs-group me-1"></i>Manage Students</a>
          <a class="btn btn-manage" href="{{ url('teacher/class') }}"><i class="bx bxs-copy-alt me-1"></i>Manage Classes</a>
          <a class="btn btn-manage" href="{{ url('teacher/teacher') }}"><i class="bx bxs-user-account me-1"></i>Manage Teachers</a>
        </div>
        <div class="card border-rad-left-0">
          <div class="card-body">
            <div class="d-flex align-items-center overflow-auto">
              @foreach($years_filter as $key=>$year)
              <input type="checkbox" class="btn-check checkyear" name="year_id[]" value="{{ $year->id }}" id="year_id-{{ $year->id }}" onclick="setYear(this.value)" autocomplete="off">
              <label class="btn btn-year me-1 mb-1 checkyear" for="year_id-{{ $year->id }}">{{ $year->year }}</label>
              @endforeach
              <input type="hidden" id="year_fil" value=""/>
            </div>
            <div class="d-flex align-items-center overflow-auto mb-2">
              <div class="class-head"></div>
              <input type="hidden" id="class_fil" value=""/>
            </div>
            <table class="table table-striped table-hover " id="dataTables" style="width:100%">
              <thead>
                <tr>
                  <th class="no-export fw-semibold"><input class="form-check-input" type="checkbox" name="selectall" id="selectall"/></th>
                  <th class="no-export fw-semibold" style="display: none;">stud Name</th>
                  <th class="text-start fw-semibold">First Name</th>
                  <th class="text-start fw-semibold">Last Name</th>
                  <th class="no-export text-start fw-semibold" style="display: none;">Name</th>
                  @if($wonde_id )
                  <th class="no-export text-start fw-semibold">Username / Password</th>
                  @else
                  <th class="text-start fw-semibold">Username / Password</th>
                  @endif
                   <th class="text-start fw-semibold">Email</th>
                  <th class="fw-semibold" width="10%">Year</th>
                  <th class="no-export text-start fw-semibold" style="display: none;">Class Name</th>
                  <th class="fw-semibold" width="10%">Class</th>
                  @if($wonde_id )
                  <th class="text-start fw-semibold" style="display: none;">UPI</th>
                  @else
                  <th class="no-export text-start fw-semibold" style="display: none;">UPI</th>
                  @endif
                  <!--   <th>Group</th> -->
                  <!--  <th>Status</th> -->
                  <th class="no-export fw-semibold" width="auto">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            <input type="hidden" name="searched_value" id="searched_value" value=""/>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
          </div>
        </div>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@include('teacher.students.reset_password_modal')
@include('teacher.students.student_modal')
@include('teacher.students.password')
@include('teacher.students.student_import_modal')
@include('teacher.students.move_class_modal')
@include('teacher.students.view_modal')
@endsection
@section('pagecss')
<style>
.custom-disabled-button {
  background-color: #ccc !important; 
  opacity: 0.3 !important;
  cursor: not-allowed !important; 
  pointer-events:none;
}
.disabled-button {
  background-color: #ccc !important; 
  opacity: 0.3 !important;
  cursor: not-allowed !important; 
}
</style>
@endsection
@section('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
  $(".custom-disabled-button").on('mouseenter', function() { 
       showAlert('Sorry you cant use this feature as your data is being synched from wonde', "error", 1000);
  });
  $(function () {