@extends('layouts.app')

@section('title', 'Edit 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/update', 'files' => true)) }}

                <div class="col-sm-8 offset-sm-2">
                    
                  <div class="" style="padding: 25px 0; ">

                    <h3 class=" text-center" style="margin-bottom: 20px;">Edit your work report <small></small></h3>
                    <p class="text-center text-danger">Make sure your report detail should be clear and relevant to task.</p>
                    
                    </div>
                    <!-- row -->
                    <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group ">
                        <label>Report date : {{date('d-m-Y',strtotime($result->report_date))}}</label>
                                                
                      </div>
                    </div>                    
                    </div>
                    <!-- row -->
                    <!-- row -->
                    <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label style="font-size: 16px;">Your work detail </label>
                        
                        <textarea name="description" class="form-control summernote2">{{ $result->report_data }}</textarea>
                        
                        @if ($errors->has('description')) <div class="text-danger">{{ $errors->first('description') }}</div> @endif    
                      </div>
                    </div>                    
                    </div>

                     <!-- files -->
                     <div class="col-sm-12">  
                      
                      <p style="font-size: 18px;">Attachment:  </p>
                      <hr>
                    </div> 

                    <a class="btn-link" id="clickSelectFile" style="color: #0056b3; font-size: 16px; " href="javascript:;"><i class="fa fa-plus"></i> Add file</a>

                      <input type="file" id="fileupload" name="file" style="display:none"/> 
                      
                      <div class="row" id="fileUploadProcess" style="min-height: 20px;">
                        <!-- <img src="" class="preview_image"> -->                        
                      </div>

                    <div class="row" id="fileResult" style="min-height: 120px; margin-top: 20px;">
                                         
                        @if(count($files) > 0)
                          @foreach($files as $item)

                            <div class='image-area'>
                               <a  href="{{ url('/').'/upload/work-report-files/'.$item->file_name }}" download>
                                <img src="{{Techsaga::getReportFilePrev($item->file_name)}}"  alt='Preview'>
                              </a>
                              <a class='remove-image' href='javascript:;' data-id="{{$item->id}}" style='display: inline;'>&#215;</a>
                              <input type='hidden' class="files_id" name='fileID[]' value="{{$item->id}}">
                              <p style='font-size:12px;'>{{$item->file_name}}</p>
                            </div>

                          @endforeach
                        @endif
                                            
                    </div>
                                                                                    
                  <!--  -->
                  <div class="submit-section">
                    <input type="hidden" name="report_id" value="{{ Request::segment(3) }}">
                    <button class="btn btn-primary submit-btn">Update</button>
                  </div>                                    
                  
                  {!! Form::close() !!}
                  
                </div>
              
              </div>
              
            </div>
          </div>
          <!-- /Content End -->          
     </div>
    <!-- /Page Content -->
<!--  -->    

@stack('scripts')

<script type="text/javascript">
//
$(document).ready(function() {
//
$(document).on('click','#clickSelectFile',function(){ 

    $('#fileupload').trigger('click');
    
});

$(document).on('click','.remove-image',function(){ 
    
    $('#fileupload').val("");
    $(this).parent('.image-area').detach();
    
    var files_id = $(this).attr('data-id'); 

    console.log(files_id); 

    $.ajax({
            url:"{{ url('/report/remove/file') }}",
            type:'POST',
            data:{"file_id":files_id,"_token": "{{ csrf_token() }}"},   
            success: function(data) {
                //update users
                console.log(data);    
                if(data.status == 'ok')
                {
                   
                }
            }
    });

});

$(document).on('change','#fileupload',function(e){ 
// alert('test');
//show process 
// $("").html("Uploading...");
$("#fileUploadProcess").html("<img src='{{asset('images/process-horizontal.gif')}}' >"); 

var fd = new FormData();
var files = $('#fileupload')[0].files[0];
fd.append('file',files);
fd.append('_token', '{{csrf_token()}}');
fd.append('report_id',"{{ Request::segment(3) }}");
//
  $.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").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='"+data.file_id+"'><p style='font-size:12px;'>"+data.filename+"</p></div>");

            } else {

              $("#fileUploadProcess").html("");
              alert("please upload valida file! allowed file type , Image, PDF, Doc, Xls and txt ");
              console.log("file error!");
              
            }
          },
          error: function(error) {
              console.log(error);
              // $(".preview_image").attr("src","{{asset('images/file-preview.png')}}"); 
          }
      }); 
    return false;

});

//
$(document).on('change','#project_name', function (e){    
 
 var project_id = $('#project_name option:selected').val();

    $.ajax({
            url:'/projectModules',
            type:'POST',
            data:{"project_id":project_id,"_token": "{{ csrf_token() }}"},   
            success: function(data) {
                //update users
                console.log(data);    
                if(data.status == 'ok')
                {
                    //alert('test ok');
                    $('select[name="module_id"]').empty();
                    $('select[name="module_id"]').append('<option value="">Select a module</option>');
                    $.each(data.modules, function(key, value) {

                    $('select[name="module_id"]').append('<option value="'+ value.id +'">'+ value.title +'</option>');

                    });
                }
            }
    });
  
   //load project users
      $.ajax({
                url:'/projectUsers',
                type:'POST',
                data:{"project_id":project_id,"_token": "{{ csrf_token() }}"},   
                success: function(data) {
                    //update users
                    console.log(data);    
                    if(data.status == 'ok')
                    {
                        //alert('test ok');
                        $('select[name="assign_user"]').empty();
                        $('select[name="assign_user"]').append('<option value="">Select an user</option>');
                        $.each(data.users, function(key, value) {

                        $('select[name="assign_user"]').append('<option value="'+ value.id +'">'+ value.full_name +'</option>');

                        });
                    }
                }
             });
  //
  return false; // required to block normal submit since you used ajax

});

// Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").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
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "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();
    }
  });

});
                  
</script>             
<style type="text/css">

</style>

@endsection