@extends('layouts.app')

@section('title', 'Create Report | ')

@section('content')


        <!-- Page Content -->
        <div class="content container-fluid" style="background: #fff">                    
          <!-- Content Starts -->
          <div class="row">
            <div class="col-sm-12">                             
                
              {{ Form::open(array('url' => '/report/save', 'files' => true,'name'=>'reportForm','id'=>'reportForm')) }}

                <div class="col-sm-8 offset-sm-2">
                    
                  <div class="" style="padding: 25px 0; min-height: 770px; ">
                  <h3 class=" text-center" style="margin-bottom: 20px;">Submit your work report </h3>
                  <p class="text-center text-danger">Make sure your report detail should be clear and relevant to the task.</p>
                  <!-- row -->
                  <div class="row">  </div>
                 
                  <!-- row -->
                  <div style="padding: 10px; border:1px solid #ddd;">                 
                    <div class="row">
                      
                      <!--  -->
                      <div class="col-sm-12">
                          <div class="form-group text-center">
                          <p style="font-size: 18px; ">Reporting Date : </p> 
                          <label class="text-danger">{{date('d-m-Y')}}</label>                 
                          </div>
                      </div> 
                      
                    </div>
                  </div>
                  <div class="row">
                        <!-- show error -->
                        <div class="col-sm-12 errorContainer hide">
                          <p style="margin-bottom: 0; margin-top: 6px;" class=" text-danger text-center error ">Please enter the required data.</p>
                        </div>
                      <!-- .show error -->
                  </div>
                  <input type='hidden' class='num_project' value="1">
                  <span class="projectReportList"> </span>                                    
                 
                  <span class="otherReport " style=''>
                  <div class="row ">
                      <div class="col-sm-12">
                        <div class="form-group">
                          <label style="font-size: 16px; margin-top: 20px;">Your work detail </label>
                          {!! Form::textarea('other_description', null, ['class' => 'form-control summernote2', 'placeholder' => 'Report description...']) !!}
                          @if ($errors->has('description')) <div class="text-danger">{{ $errors->first('description') }}</div> @endif    
                        </div>
                      </div>                    
                  </div>                  
                  <div class="row ">
                    <div class="col-sm-12">
                      <p style="font-size: 18px;margin-bottom: 2px;">Attachment</p>
                      <hr style='margin-top: 4px;'>
                      <a class="btn-link clickSelectFile" add-id='1' style="color: #0056b3; font-size: 16px; " href="javascript:;"><i class="fa fa-plus"></i> Add file</a>
                      <input type="file" id="fileupload-1" class="fileupload" name="file" style="display:none"/>
                      <div class="row" id="fileUploadProcess" style="min-height: 20px;">
                      </div>
                      <div class="row" id="fileResult-1" style="min-height: 30px; margin-top: 20px;"></div>
                    </div>
                  </div>
                  </span>
                  <!--  -->
                  <div class="submit-section ">
                    <button id="submitReport" class="btn btn-primary submit-btn">Submit</button>
                  </div>   
                                                              
                  </div>                  
                  {!! Form::close() !!}
                  
                </div>
              
              </div>              
            </div>
          </div>
          <!-- /Content End -->          
     </div>
    <!-- /Page Content -->
<style type="text/css">
 .removeProject {
  color: red;
  background: #fff;
}
.removeProject:hover {
    background-color: red;
    border-color: red;
    color: #fff;
}
</style>
<!-- show error -->
<div class="notification-popup hide">
  <p>
      <span class="task"></span>
      <span class="notification-text"></span>
  </p>
</div>
<!--  -->
@stack('scripts')

<script type="text/javascript">
//
$(document).ready(function() {

$('.summernote2').summernote({height: 280});

var notificationTimeout;
//Shows updated notification popup 
var updateNotification = function(task, notificationText, newClass){
    var notificationPopup = $('.notification-popup ');
    notificationPopup.find('.task').text(task);
    notificationPopup.find('.notification-text').text(notificationText);
    notificationPopup.removeClass('hide success');
    // If a custom class is provided for the popup, add It
    if(newClass)
        notificationPopup.addClass(newClass);
    // If there is already a timeout running for hiding current popup, clear it.
    if(notificationTimeout)
        clearTimeout(notificationTimeout);
    // Init timeout for hiding popup after 3 seconds
    notificationTimeout = setTimeout(function(){
        notificationPopup.addClass('hide');
    }, 5000);
};
//remove project section

$(document).on('click','.removeProject',function(){ 
    $(this).closest('div.projectReport').remove();
});
// on checked report type
$(document).on('click','.report_type',function(){ 
  var selectedType = $(this).val();

});
//

//
$(document).on('click','.clickSelectFile',function(){ 
  curNum = $(this).attr('add-id');
  $('.fileupload').trigger('click');

});


$(document).on('change','.fileupload',function(e){ 
    
  uploadFile(curNum);

});

//submit form
$(document).on('click', '#submitReport', function (event) {
    event.preventDefault();
    var isFormValid = true;
    var selVal  = $('.report_type:checked').val();
    //
    if(selVal == 'other'){

      var chckData = $('.summernote2').summernote('isEmpty');
        if(chckData) {
            
            $('.errorContainer').addClass('show');
            $('.errorContainer').removeClass('hide');
            
            isFormValid = false;
            updateNotification('', 'Please enter requried data.', 'danger');
            return false;
        }
                
    }
   
    //
    if(isFormValid){
      $('#reportForm').submit();
    }

});


});
//

function initializeSel()
{
    // init searchbox
  $('.associated_project_list').select2({
      placeholder: "Search project...",
      minimumInputLength: 2,
      ajax: {
          url: '/project/user/find',
          dataType: 'json',
          data: function (params) {
              return {
                  q: $.trim(params.term)
              };
          },
          processResults: function (data) {
              return {
                  results: data
              };
          },
          cache: true
      }
  });
} 

function uploadFile(dynamicID){

$("#fileUploadProcess").html("<img src='{{asset('images/process-horizontal.gif')}}' >"); 

var fd = new FormData();
var file = $('.fileupload')[0].files[0];
fd.append('file',file);
fd.append('_token', '{{csrf_token()}}');
//
$.ajax({
      type: 'POST',
      url: "{{ url('/report/upload/file') }}",
      data: fd,
      processData: false,
      contentType: false,
      success: function(data) {
        console.log(data);
        if (data.fail == false) {
        //reset data
        $('.fileupload').val("");
        $("#fileUploadProcess").html("");
        //append result
        $("#fileResult-"+dynamicID).prepend("<div class='image-area'><img src='"+data.filePrev+"'  alt='Preview'><a class='remove-image' href='javascript:;' style='display: inline;'>&#215;</a><input type='hidden' name='fileID[]' value='"+dynamicID+'-'+data.file_id+"'><p style='font-size:12px;'>"+data.filename+"</p></div>");
        } else {
          $("#fileUploadProcess").html("");
          alert("Please upload valid file! allowed file type, Image, PDF, Doc, Xls and Txt etc. ");
          console.log("file error!");
          
        }
      },
      error: function(error) {
          console.log(error);
          // $(".preview_image").attr("src","{{asset('images/file-preview.png')}}"); 
      }
  });
  
  return false;
}
                  
</script>             

@endsection