@extends('dashboard.layouts.default')
@section('content')
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
<section class="top-section set-task">
  <div class="container-fluid">
    <div class="row g-3">
      @include('layout.top-ads')
      <div class="col-md-3">
        <div class="card summary-list sticky-top">
          <div class="card-header bg-white border-0 pt-3 pb-0"><h5 class="unit-title">Summary</h5></div>
          <div class="card-body overflow-hidden">
            <div class="mb-2">
							<a href="{{ URL::previous() }}">
								<button type="submit" class="btn btn-sm btn-primary" id="nextbtn">Update Questions</button>
							</a>
            </div>
            <div class="h-100 overflow-auto pe-2" id="summaryDiv">
              @if(!$students)
              @forelse($classes as $key=>$class)
              <div class="selected-text">{{ $class->name }}</div>
              @empty
              @endforelse
              @else    
              @forelse($students as $key=>$student)
              <div class="selected-text">{{ $student->name }}</div>
              @empty
              @endforelse
              @endif
              @foreach($units as $key=>$unit)
              <div class="selected-text">{{ $unit->name }} 
                {{ (($check_videos != null) && (in_array($unit->id, $check_videos))) ? '' : '' }}
                {{ (($check_quizs != null) && (in_array($unit->id, $check_quizs))) ? '' : '' }}
              </div>
              @endforeach 
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="card mb-3 sec-header sticky-top">
          <div class="card-body p-2">
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                <!--<a class="btn btn-back" href="{{ URL::previous() }}"><i class="bx bx-chevron-left" ></i></a>-->
                <h5 class="sub-title">Reset Task > Choose Questions > Assign Tasks</h5>
              </div>
              <div id="" class="">
                <!-- <button type="button" class="btn btn-primary" id="nextbtn"></button> -->
              </div>
            </div>
          </div>
        </div>
				
        <form method="post" class="form" novalidate="novalidate" id="taskform" name="taskform" action="{{ url('teacher/tasks/assign-resettask') }}" enctype="multipart/form-data">
          {{ csrf_field() }}
          <div class="card shadow-sm">
            <div class="card-body">
          
              <div class="row g-3">
                <div class="col-6">
                  <label for="startdate" class="form-label fs-6 fw-semibold"><small>Start Date</small></label>
                  <div class="input-group">
                    <input type="text" name="start_date" class="form-control" id="startdate" onkeydown="return false" placeholder="" autocomplete="off" aria-describedby="startdate-label">
                    <span class="input-group-text" id="startdate-label"><i class='bx bxs-calendar' ></i></span>
                  </div>
                </div>
                <div class="col-6">
                  <label for="enddate" class="form-label fs-6 fw-semibold"><small>End Date</small></label>
                  <div class="input-group">
                    <input type="text" name="end_date" class="form-control" id="enddate" onkeydown="return false" placeholder="" autocomplete="off" aria-describedby="enddate-label">
                    <span class="input-group-text" id="enddate-label"><i class='bx bxs-calendar' ></i></span>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="row g-3">
                    <div class="col-md-12">
                      <label for="task_name" class="form-label fs-6 fw-semibold"><small>Task Name</small></label>
                      <input type="text" name="task_name" class="form-control" id="task_name" placeholder="" autocomplete="off">
                    </div>
                    {{-- PDF, PPT, Word, CSV, XLS, jpeg --}}
                    <div class="col-md-12">
                      <label for="customFile" class="form-label fs-6 fw-semibold"><small>Upload files</small></label>
                      <input class="form-control custom-file-input" type="file" id="customFile" name="task_files[]" multiple accept="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,application/pdf,.jpeg,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.ppt,.pptx,application/vnd.ms-excel">
                    </div>
                    <input type="text" name="removing_file" id="removing_files" style="display:none;">
                    <div class="col-md-12">
                      <output id="Filelist2" class="form-control">
                        <div class="thumb-Images2" id="imgList2"></div>
                      </output>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="note" class="form-label fs-6 fw-semibold"><small>Task Notes</small></label>
                  <textarea class="form-control" name="note" id="note" class="form-control" style="height:124px"></textarea>
                </div>
                <div class="col-12 qstn-btn-wrapper">
                  <button type="submit" id="tasksubmitbtn" class="btn btn-primary nextbtn">Assign Tasks</button>
                </div>
              </div>
             
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
  // Wait for the DOM to be ready
  var selectedFiles = [];
  var removingFiles = [];
  var removeFile = [];
  $(document).ready(function() 
  {
      $(".custom-file-input").change(function ()
      {
          
          selectedFiles = [];
          for(var i = 0 ; i < this.files.length ; i++){
            var fileItem = this.files[i];
            selectedFiles.push(fileItem);
          }
          appendNewlySelectedFiles();
      });
      
      $(document).on("click",".close",function()
      {
          var selectedId = $(this).data('id');
          var selectedNm = $(this).data('nm');
          var selectedtype = $(this).data('type');
  
          if(selectedtype == 'Y')
          {
              removeFile.push(selectedId);
              $("#removingfile").val(removeFile);
              $('#li_files_'+selectedId).remove();
          }
  
          // Removing an item that exists in array
          var foundPosition = -1;
          for(i = 0 ; i < selectedFiles.length ; i++)
          {
              if(selectedFiles[i].name == selectedNm)
              {
                  foundPosition = i;
              }
          }
  
          if(foundPosition > - 1)
          {
              removingFiles.push(selectedNm);
              $("#removing_files").val(removingFiles);
              $('#li_files_'+selectedId).remove();
              selectedFiles.splice(foundPosition, 1);
              appendNewlySelectedFiles();
          }                
      });
  }); 
  
  function appendNewlySelectedFiles(){
      if(selectedFiles.length > 0)
      {
          $('#Filelist2').show();
         // $('#imgList2').html("");   
          var appendHtml = "";
          for(i = 0 ; i < selectedFiles.length ; i++){
              appendHtml = appendHtml+'<div id="li_files_'+i+'"><div class="pdf-wrap"><span class="close" data-id="'+i+'" data-nm="'+selectedFiles[i].name+'"><a class="close_text">×</a></span><span class="uploaded_files_name">'+selectedFiles[i].name+'</span> </div></div>';
          }
          $('#imgList2').append(appendHtml);                      
      }
      else {
          $('#Filelist2').hide();
          $('.custom-file-label').html('');
      }
  }

  
  $('#startdate').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  autoUpdateInput: false,
  format: 'dd-mm-yyyy',
  startDate: new Date(),
  autoApply: true,
  autoclose: true
  }).on("apply.daterangepicker", function (e, picker) {
        picker.element.val(picker.startDate.format('DD-MM-YYYY'));
  });

   
  $('#enddate').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  autoUpdateInput: false,
  format: 'dd-mm-yyyy',
  startDate: new Date(),
  autoApply: true,
  autoclose: true
  }).on("apply.daterangepicker", function (e, picker) {
        picker.element.val(picker.startDate.format('DD-MM-YYYY'));
  });
  
  /***
  document.addEventListener('DOMContentLoaded', function (e) {
      FormValidation.formValidation(
          document.getElementById('taskform'),
          {
              fields: {
                  task_name: {
                      validators: {
                          notEmpty: {
                              message: 'Please enter task name'
                          }
                      }
                  },
                  start_date: {
                      validators: {
                          notEmpty: {
                              message: 'Please enter start date'
                          }
                      }
                  },
                  end_date: {
                      validators: {
                          notEmpty: {
                              message: 'Please enter end date'
                          }
                      }
                  },
  
              },
              plugins: {
                  trigger: new FormValidation.plugins.Trigger(),
                  bootstrap: new FormValidation.plugins.Bootstrap(),
                  submitButton: new FormValidation.plugins.SubmitButton(),
                  trigger: new FormValidation.plugins.Trigger(),
  
                  // icon: new FormValidation.plugins.Icon({
                  //     valid: 'fa fa-check',
                  //     invalid: 'fa fa-times',
                  //     validating: 'fas fa-refresh'
                  // }),
              },
          }
      ).on('core.form.valid', function () {
  
          var form = $("#taskform");
          form.submit();
  
  
      });
  
  });*/

  $(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='taskform']").validate({
       fields: {
            task_name: {
               validators: {
                   notEmpty: {
                       message: 'Please enter task name'
                   }
               }
           },
          start_date: {
               validators: {
                   notEmpty: {
                       message: 'Please enter start date'
                   }
               }
           },
           end_date: {
               validators: {
                   notEmpty: {
                       message: 'Please enter end date'
                   }
               }
           }, 
  
       },
       plugins: {
           trigger: new FormValidation.plugins.Trigger(),
           bootstrap: new FormValidation.plugins.Bootstrap(),
           submitButton: new FormValidation.plugins.SubmitButton(),
           trigger: new FormValidation.plugins.Trigger(),
  
           // icon: new FormValidation.plugins.Icon({
           //     valid: 'fa fa-check',
           //     invalid: 'fa fa-times',
           //     validating: 'fas fa-refresh'
           // }),
       },
   }
  ).on('core.form.valid', function () {
   var form = $("#taskform");
   form.submit();
  
  
  });
  
  });
  
  
  
</script>
@endsection