@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 Classes</h5>
      </div>
      <div class="col-auto">
        <div class="tools overflow-auto">
          <button type="button" class="btn btn-add" onclick="addClass(null)"><i class="bx bxs-plus-circle me-1"></i>Add New Class</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" href="{{ url('teacher/student') }}"><i class="bx bxs-group me-1"></i>Manage Students</a>
          <a class="btn btn-manage active" 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=""/>
              <input type="hidden" id="schoolid" value="{{$school_id}}">
              <input type="hidden" id="wondeid" value="{{$wonde_id}}">
            </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>
            @if(strtolower($teacher_type) == 'hod' && $wonde_id != '')
              <div class="d-flex align-items-center overflow-auto" style="margin-left: 36%;">
               <span style="font-weight: bold;font-size: 12px;">Last Wonde Sync On :  {{ $wnde_last_sync }}</span>
              </div>
            @endif
            <table class="table table-hover table-striped display" id="dataTables" style="width:100%">
              <thead>
                <tr>
                  <th class="text-start fw-semibold">Class</th>
                  <th class="text-start fw-semibold">Year</th>
                  <th class="text-start fw-semibold">Exam Board</th>
                  <th class="fw-semibold no-export">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@include('teacher.class.class_modal')
@endsection
@section('pagecss')
<style>
  .disabled-button {
  background-color: #ccc !important; 
  opacity: 0.3 !important;
  cursor: not-allowed !important; 
}
</style>
@endsection
@section('scripts')
<script>
  var table;
  $(function () {
  
      //Generate List
      table = $('#dataTables').DataTable({
  
          bSearchable: true,
          pagination: true,
          "lengthChange": false,
          // pageLength: 10,
  fixedHeader:    true,
 // scrollY:        "55vh",
 // scrollX:        true,
  //scrollCollapse: true,
  
          responsive: true,
          searchDelay: 500,
          processing: !0,
          serverSide: !0,
          "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
          "pageLength": 50,
          dom: "<'row g-2 align-items-center'<'col-auto'f><'col-auto'B>>" + "<'row'<'col-sm-12'tr>>",
          buttons: [
              {
                  extend: 'excel',
                  text: '<i class="bx bx-export fs-6"></i> Export',
                  title: 'Classes',
                  className: 'btn btn-primary btn-sm ms-2', // Margin for spacing
                  exportOptions: {
                      columns: ':not(.no-export)'
                  },
                  action: newexportaction
              },
              @if($wonde_id != '' && strtolower($teacher_type) == 'hod' && $studentCount >0 )
              {
                  text: '<i class="bx bxs-download"></i> Wonde Sync',
                  className: 'btn btn-live-tuition btn-sm ms-2 wondesyncbtn', // Margin for spacing
                  action: function (e, dt, node, config) {
                      wondeSync(null); // Call your sync function here
                  }
              },
              @endif
          ],
          ajax: {
              url: "{{ url('teacher/class/lists') }}",
              data: search
          },
          columns: [{
                  data: 'class',
                  name: 'class',
                  sClass: 'text-start'
              },
              {
                  data: 'year',
                  name: 'year',
                  sClass: 'text-start'
              },
              {
                  data: 'curriculum',
                  name: 'curriculum',
                  sClass: 'text-start'
              },
              {
                  data: 'action',
                  name: 'action',
                  sClass: 'text-start tools',
                  orderable: !1,
                  searchable: !1
              }
          ]
      });
  
  
      $(".searchs").keyup(function () {
          table.draw();
      });
  });
  
  function wondeSync() {
        var school_id = $("#schoolid").val();
        var wonde_id = $("#wondeid").val();
        $(".wondesyncbtn").css('pointer-events','none');
        if(school_id != '' && wonde_id != '') {
           teacherwondesync(wonde_id, school_id);
        }
  }

  function teacherwondesync(wonde_id,school_id) {
            alert('Wonde Sync Inprogress');  
            $(".wondesyncclass").css('display','block');
            $(".wondesyncmessage").html('Wonde Sync Inprogress');
            var token = "{{ csrf_token() }}";
            $.ajax({ 
             type: 'post',
             url: '{{ url('teacher/wonde_sync') }}',
             data: { wonde_id:wonde_id,school_id:school_id,_token:token},
             success: function(data){
                  if(data.flagError){     
                    $(".wondesyncbtn").css('pointer-events','');
                  } 
                }     
            });
            return true;
  }

  function search(value) {
      value.search_name = $('input[name=name]').val();
      value.year = $('#year_fil').val();
      value.class = $('#class_fil').val();
  }
  
  function softDelete(b) {
      Swal.fire({
          title: "Are you sure?",
          text: "Class will be deleted from the database.You won't be able to change this!",
          icon: "warning",
          showCancelButton: true,
          confirmButtonText: "Yes. Delete it!",
          confirmButtonColor: '#e85f5d',
      }).then(function(result) {
          if (result.value) {
              Swal.fire({
                      title: "Are you sure?",
                      text: "You will permanently lose the data - are you 100% sure?",
                      icon: "warning",
                      showCancelButton: true,
                      confirmButtonText: "Yes. Delete it!",
                      confirmButtonColor: '#e85f5d',
              }).then(function(result) {
                  if (result.value) {
                      $.ajax({
                          url: "{{ url('teacher/class') }}/" + b,
                          type: "DELETE",
                          dataType: "html"
                      })
                      .done(function (a) {
                          var data = JSON.parse(a);
                          if (data.flagError) {
                              showAlert(data.message, "error");
                          } else {
                              showAlert(data.message, "success");
  
                              setTimeout(function () {
                                  table.ajax.reload(null, false);
                              }, 1000);
                          }
                      }).fail(function () {
                          showAlert("Somthing went wrong!", "error");
                      });
                  } else if (result.dismiss === "cancel") {
                      Swal.fire(
                          "Cancelled",
                          "",
                          "error"
                      )
                  }
              });
          } else if (result.dismiss === "cancel") {
              Swal.fire(
                  "Cancelled",
                  "",
                  "error"
              )
          }
      });
  }
  
  function setYear(year_id) {
  
  $("#year_fil").val('');
  $('#class_fil').val('');
  
  if ($('#year_id-' + year_id).is(':checked')) {
  $('.checkyear').each(function () {
  $(this).prop('checked', false);
  });
  $("#year_fil").val(year_id);
  $('#year_id-' + year_id).prop('checked', true);
  $.ajax({
  url: "{{ url('common/getClassButtons') }}/" + year_id,
  type: "GET",
  dataType: "html"
  }).done(function (data) {
  $(".class-head").html(data);
  cur_id = $(".class-head button:first").attr('id');
  // $('#class_fil').val(cur_id);
  // $('.btn-cur').removeClass('active');
  // $('.btn-cur-'+cur_id).addClass('active');
  table.ajax.reload();
  });
  } else {
  $(".class-head").html('');
  table.ajax.reload();
  }
  
  }
  
  function setClass(class_id) {
  $('#class_fil').val(class_id);
  $('.btn-cur').removeClass('active');
  $('.btn-cur-' + class_id).addClass('active');
  table.ajax.reload();
  }
  
</script>
@endsection