@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">
      <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('teacher/tasks/'.$task[0]->id.'/edit/questions') }}">
								<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(count($summary->student_filter)<=0)
							@foreach($summary->classes_filter as $key=>$class)
              <div class="selected-text">{{ $class->name }}</div>
              @endforeach
              @else
							@foreach($summary->student_filter as $key=>$student)
              <div class="selected-text">{{ $student->name }}</div>
              @endforeach
              @endif
              @foreach($summary->units_filter 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">Edit 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/edit/step-3/update') }}" enctype="multipart/form-data">
                            {{ csrf_field() }}
        <input type="hidden" name="task_id" id="task_id" value="{{$task[0]->id}}"/>
         <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" value="{{$task[0]->name}}" 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">
												@if($taskFiles)
                        <div class="thumb-Images2" id="imgList2">
													@foreach($taskFiles as $files)  
													<div id="li_files_{{$files->id}}">
														<div class="pdf-wrap"> 
															<span class="close">
															<a class="close_text" onclick="deleteFile('{{$files->id}}')">×</a>
															</span>
															<span class="uploaded_files_name">
															{{$files->new_original_name}}
															</span>
														</div>
													</div>
													@endforeach
												</div>
												@endif
                      </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">{{$task[0]->note}}</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
  function deleteFile(id){
  
  Swal.fire({
  title: "Are you sure?",
  text: "The selected file will be deleted",
  icon: "warning",
  showCancelButton: true,
  confirmButtonText: "Yes. Delete it!",
  confirmButtonColor: '#e85f5d',
  }).then(function(result) {
  if (result.value) {
  $.ajax({
    url: "{{ url('teacher/tasks/remove_task_file') }}", 
    type: "POST", 
    dataType: "JSON",
    data : {
      id : id
    }
  })
  .done(function (data) {
      if(data == 1){
              $('#li_files_'+id).remove(); 
            showAlert("Deleted", "success");
        }else{
            showAlert("Error", "error");
        }   
    }).fail(function () {
            showAlert("Somthing went wrong!", "error");
  });        
  } else if (result.dismiss === "cancel") {
  Swal.fire(
      "Cancelled",
      "",
      "error"
  )
  }
  }); 
  }
  
  
  // $(function() {
  //   // Initialize form validation on the registration form.
  //   // It has the name attribute "registration"
  //   $("form[name='taskform']").validate({
  //     // Specify validation rules
  //     rules: {
  //       // The key name on the left side is the name attribute
  //       // of an input field. Validation rules are defined
  //       // on the right side
  //       task_name: "required",
  //       lastname: "requireclassFormemail should be validated
  //         // by the built-in "email" rule
  //         email: true
  //       },
  //       password: {
  //         required: true,
  //         minlength: 5
  //       }
  //     },
  //     // Specify validation error messages
  //     messages: {
  //         task_name: "Please enter your firstname",
  //       lastname: "Please enter your lastname",
  //       password: {
  //         required: "Please provide a password",
  //         minlength: "Your password must be at least 5 characters long"
  //       },
  //       email: "Please enter a valid email address"
  //     },
  //     // Make sure the form is submitted to the destination defined
  //     // in the "action" attribute of the form when valid
  //     submitHandler: function(form) {
  //       form.submit();
  //     }
  //   });
  // });
  
  
  // $("#dateSelector").datepicker("setDate", "10/12/2012");
  // "setDate", "  
  // var start_date  = '{{ date("d-m-Y", strtotime($task[0]->start_date)) }}';
  // var end_date = '{{ date("d-m-Y", strtotime($task[0]->end_date)) }}';
  var start_date = '';
  @if($task[0]->start_date != null)
      start_date  = '{{ date("d-m-Y", strtotime($task[0]->start_date)) }}';
      $('#startdate').val(start_date);
  @endif
  
  var end_date = '';
  @if($task[0]->end_date != null)
      end_date = '{{ date("d-m-Y", strtotime($task[0]->end_date)) }}';
      $('#enddate').val(end_date);

  @endif
  // alert(end_date)

  $('#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'));
  });
  
  //$('#startdate').datepicker('setDate', start_date).datepicker('fill');
  
 // $('#enddate').datepicker('setDate', end_date).datepicker('fill');
  
 /***  $('#startdate').datepicker().on('changeDate', function (selected) {
      var minDate = new Date(selected.date.valueOf());
      $('#enddate').datepicker('setStartDate', minDate);
  });
  $('#startdate').datepicker().on('changeDate', function (selected) {
      var minDate = new Date(selected.date.valueOf());
      $('#enddate').datepicker('setStartDate', minDate);
  });*/
  
 /*** 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() {

  $("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();
  
  
  });
  
  });
  

  
  
  var selectedFiles = [];
  var removingFiles = [];
  $(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');
          // 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();
          }
          /*if ($.inArray(selectedNm, selectedFiles) > -1) {
              selectedFiles.splice($.inArray(selectedNm, selectedFiles), 1);
          }*/
          ////
      });
      ////
  }); 
  
  function appendNewlySelectedFiles(){
         ////
          $('#Filelist2').show();
          /////
          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);                      
          ////
      
  }
</script>
@endsection