@php($version = \Illuminate\Support\Facades\Config::get('app.version'))

<link rel="stylesheet" href="{{ asset('css/conversations.css')}}?{{$version}}" />
<link href="{{asset('css/document_upload.css')}}?{{$version}}" rel="stylesheet">
<link href="{{asset('semanticui/components/modal.css')}}?{{$version}}" rel="stylesheet">

<script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}?{{$version}}"></script>
<script src="{{asset('js/plugins/layer/layer.min.js')}}?{{$version}}"></script>
<script src="{{asset('js/jquery.form.js')}}?{{$version}}"></script>

<input type="hidden" id="userQuota" value="{{$userQuota}}" >
<input type="hidden" id="accountdocuments" value="{{route('account-documents-admin')}}">
<input type="hidden" id="deleteDocument" value="{{route('deleteDocument')}}" >
<input type="hidden" id="globalCustomerID" value="{{$globalCustomerID}}" >
<input type="hidden" id="tokens" value="{{csrf_token()}}" >
<input type="hidden" id="nowMethod" value="">


<!--图片上传弹窗 start-->
<div class="ui small modal" id="upload_document_modal" style="max-height: 430px;margin-top: -15%;">
    <div class="topbar">
        <img class="closeBtn" src="{{ config('locations.systemImage.asset').'closeBtn.png'  }}" onclick="cancelUpload()">
    </div>

    <div class="content">
        <div class="ui secondary segment" id="dropArea">

            {{--image + rules--}}
            <span class="uploadImage">
                    <img src="{{ config('locations.systemImage.asset').'upload.png'  }}">

                    <div class="ui tiny header" id="dropInfo">
                        {{--{{"*"}}{{__('2MB limit on ordinary attachments')}}{{","}}<br>--}}
{{--                        {{"*"}}{{__('25MB limit on portfolio compression')}}{{","}}--}}
                    </div>

                    <div class="ui small header" id="dragLabel">
                        {{__('Drag Documents to here or')}}
                        <label for="file" class="downloadLabel">
                            {{ __('Choose from Computer') }}
                        </label>
                    </div>
                </span>

            {{--label--}}

            {{--input--}}
            <input multiple="" id="file" type="file" style="display:none" name="docUpload" required>

            {{--results--}}
            <div class="dropHolder">

            </div>
        </div>
    </div>

    <div class="actions">
        <div class="errors">
            <div class="ui tiny red header" id="dropValidation"></div>

            <div class="ui tiny red header" id="singleFileFormatValidation"></div>
            <div class="ui tiny red header" id="singleFileSizeValidation"></div>
        </div>

        <button type="submit" class="ui yellow submit button" id="upload" onclick="cancelUpload()">{{ __('Complete') }}</button>
    </div>
</div>

<!--图片上传弹窗 end-->

<!--发信弹窗 start-->
  <div class="ui modal" id="mod1">
 <!-- <i class="close icon"></i>-->
  <div class="header" style="background: #434343;" id="header_ui">
      <span style="font-size: 16px;color: white;"> {{ __('Write') }}</span> <span style="font-size: 12px;color: white;">{{ __('Write reminding') }}</span>
     
      <img src="{{config('locations.chatImage.asset').'Close.png'}}" class="soc soc1"/>
      {{--<img src="{{config('locations.chatImage.asset').'enlarge.png'}}" class="soc soc2" />--}}
      {{--<img src="{{config('locations.chatImage.asset').'hide.png'}}" class="soc soc3" />--}}
  
  </div>
  <div class="zhuc">
  <form id="createForm" action="/account/Chat/send" method="post">
  	<input type="hidden" name="isdraft" id="isdraft" value="0">
  	<input type="hidden" name="messageID" id="messageID" value=''>
  	<input type="hidden" id="documentsID" name="documentsID" value="">
  	
  	<div class="zhu">
  		<p>{{ __('Theme') }}：</p>
  		<input type="text" name="title" id="title" style="border: 1px solid #E3E3E3;margin-top: -12px;    width: 241px;height: 25px;">
  		{{ csrf_field() }}
  	</div>
  	<div class="se-Text">
  		<textarea name="body" id="bodys" style="width:855px;min-height:200px;">
        </textarea>
  	</div>
  	<div class="se-Enclosure">
  		<a class="btn">
  			<div class="button" onclick="show_upload_document_modal('send')" style="font-size:12px; color:black;">{{ __('Uploading attachments') }}</div>
  		</a>
  		<ul id="sendUl">
  		</ul>
  		
  	</div>
  	
  </div>

  <div class="actions" style="text-align: left;">
    <div class="ui yellow button" id="send">
        {{ __('Send') }}
    </div>
    <div class="ui yellow button" id="savedraft">
        {{ __('Save draft') }}
    </div>
  </div>
  </form>
</div>
<!--发信弹窗 end-->

<script>
$(document).on('click','.oneRemove',function(){
	var id = $(this).attr('data-id');
	$("#documentsID").val($("#documentsID").val().replace(','+id,''));
	$("#"+id).remove();
})
$("#createForm").validate({
    rules: {
	  title:{
		required: true,
		maxlength:40,
		minlength:2
	  },
      body: {
        required: true,
        maxlength:1200
      }
    },
    messages: {
    	  title: {
	  	required: "{{ __('Title content empty') }}",
	  	maxlength:"{{ __('Title content length') }} 2-40",
		minlength:"{{ __('Title content length') }} 2-40"
	  },
      body: {
        required: "{{ __('Reply content empty') }}",
        maxlength:"{{ __('Reply content length') }} 1200"
      }
    },
   	showErrors: function(errorMap, errorList) {  
    var msg = "";  
    $.each( errorList, function(i,v){ 
      msg += (v.message+"\r\n");  
    });  
    if(msg!="") //alert(msg);
   		layer.msg(msg, {time: 2000,icon: 2});
    },
  	onfocusout: false  
})

$("#send").click(function(){
	$('#createForm').submit();
});
$("#savedraft").click(function(){
	$("#isdraft").val('1');
	$('#createForm').submit();
});
    $('#createForm').ajaxForm(function(data) {
        var isdraft = $("#isdraft").val();
        if(data == true){
                if(isdraft == 1){
                    layer.msg("{{ __('Save success') }}", {time: 2000,icon: 1},function(){
                        window.location.reload();
                    })
                }else{
                    layer.msg("{{ __('Send success') }}", {time: 2000,icon: 1},function(){
                        window.location.reload();
                    })
                }
            ;
        }else{
        		layer.msg("{{ __('fail') }}", {time: 2000,icon: 2});
        }
    }); 



    function show_upload_document_modal(method) {
		$("#nowMethod").val(method)
        $('#upload_document_modal').modal('show');
    }

    function cancelUpload() {
        var m = $("#nowMethod").val();
        if(m == 'send'){
        		$('#mod1').modal('show')
        }
    		getDocuments();
        $('#upload_document_modal').modal('hide');
    }
    function completeUpload(){
    		$('#upload_document_modal').modal('hide');
    }
    function getDocuments(){
    		var m = $("#nowMethod").val();
    		if(m == 'send'){
    			$("#sendUl").html();
    		}else{
    			$("#iod_Three").html();
        }
        var ids = $("#documentsID").val();
        $.post('/account/Chat/ajaxDocumentsList',{
        		_token:$("#tokens").val(),
            documents:ids
        },function(result){
        		var result = JSON.parse(result);
        		if(result){
            		for(var i=0;i<result.length;i++){
            		    var filePath = result[i].thumbnailPath == null ? result[i].filePath : 'PDF_Thumbnail/'+result[i].thumbnailPath;
					if(m == 'send'){
    						var sendHtml = '<li id="'+result[i].id+'"><div class="li_div1"><img src="/customUploads/'+filePath+'" /><span>'+result[i].name+'</span</div><div class="li_div2"><span class="oneRemove" data-id="'+result[i].id+'">X</span></div></li>'
                    		$("#sendUl").append(sendHtml)
					}else{
						var sendHtml = '<div class="pli" id="'+result[i].id+'"><div class="pli_div1"><img src="/customUploads/'+filePath+'" /><span>'+result[i].name+'</span></div><div class="pli_div2 oneRemove" data-id="'+result[i].id+'">X</div></div>';
                			$("#iod_Three").append(sendHtml)
					}
                 }
//             		$(".attachment").append('<div class="clearfix"></div>');
             }
        })
    }
//to store the count of already uploaded documents
var fileCountAfterDelete=0;
//to store an accumulative file size per user attempt
var attemptFileSize=0;
//to store upload-request files by either drop or file browser
var fileArray=[];
//to store a unique index-id for each file being uploaded
var attemptFileIndex=1;
//to get the current used quota of a user from DB
var userQuota = parseInt($("#userQuota").val());
//to store rejected file names due to being oversize(over 2 MB)
var rejectedFileNameArray=[];
//to store upload request statuses
var uploadRequestStatusArray=[];
//to store accepted file extensions
var fileExtensionArray=['bmp', 'jpg', 'jpeg', 'png', 'gif','webp','pdf','doc','docx','pptx','ppt','xlsx','xls'];
//file browser section

//Drop Area Section

$('#dropArea').on('drop', function(e) {
    $('#singleFileSizeValidation, #singleFileFormatValidation').empty().css('display', 'none');
    e.preventDefault();
    $('#dropArea').removeClass('hover');
    if(fileCountAfterDelete + e.originalEvent.dataTransfer.files.length < 9 )
    {
        fileArray = Array.from(e.originalEvent.dataTransfer.files);
        attemptFileSize=0;
        $.each(fileArray, function (i, file) {
            attemptFileSize += file.size;
        });
        attemptFileSize =attemptFileSize + userQuota;

        // if (attemptFileSize < 26214400) {
            dropArea();
        {{--} else {--}}
            {{--fileArray=[];--}}
            {{--$('#dropValidation').empty().css('display', 'block').append("{{__('exceeded your 25MB quota')}}");--}}
        {{--}--}}
    }
    else
    {
        $('#dropValidation').empty().css('display', 'block').append("{{__('only 8 documents are allowed per attempt')}}");
    }
});

$('#dropArea').on('dragover', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).addClass('hover');
});
$('#dropArea').on('dragleave', function(e){
    e.preventDefault();
    $(this).removeClass('hover');
});


$('#file').on('change', function(){
  $('#singleFileSizeValidation, #singleFileFormatValidation').empty().css('display', 'none');

  if(fileCountAfterDelete + document.getElementById('file').files.length < 9 )
  {

      fileArray = Array.from(document.getElementById('file').files);
      attemptFileSize=0;
      $.each(fileArray, function (i, file) {
          attemptFileSize += file.size;
      });
      attemptFileSize =attemptFileSize + userQuota;

      // if (attemptFileSize < 26214400) {
          dropArea();
      {{--} else {--}}
          {{--fileArray=[];--}}
          {{--$('#dropValidation').empty().css('display', 'block').append("{{__('exceeded your 25MB quota')}}");--}}
      {{--}--}}
  } else {
      $('#dropValidation').empty().css('display', 'block').append("{{__('only 8 documents are allowed per attempt')}}");
  }
});

// Preparing the whole attachment (file browser and drag-drop)
function dropArea()
{
  $('#dropValidation').empty().css('display', 'none');
  $('#upload').removeClass('enabled').addClass('disabled');

  //filtering the file array by excluding oversize files
  var d=0;
  var l = fileArray.length;
  var rejectedSizeArray = [];
  var rejectedFormatArray = [];
  while(d < l) {
      var toDelete = false;
      var fileExt=((fileArray[d].name.split('.')).pop()).toLowerCase();

      if (fileExtensionArray.indexOf(fileExt) <= -1) {
          rejectedFormatArray.push(fileArray[d].name);
          toDelete = true;
      }else if(fileArray[d].size >= 26214400){
          rejectedSizeArray.push(fileArray[d].name);
          toDelete = true;
      }

      // if(!fileExtensionArray.includes(fileExt)) {
      //     rejectedFormatArray.push(fileArray[d].name);
      //     toDelete = true;
      // } else if(fileArray[d].size >= 2097152) {
      //     rejectedSizeArray.push(fileArray[d].name);
      //     toDelete = true;
      // }

      if(toDelete == true){
          fileArray.splice(d, 1);
          l--;
      } else {
          d++;
      }
  }

  //displaying the corresponding html elements of each file to be uploaded
  var uniqueIndex= attemptFileIndex;
  $.each(fileArray, function() {
      var fileName = (this.name).replace(/ /g,"&nbsp;");
      $('.dropHolder').append(' <span class="item relativeContainer" id="file_card_'+uniqueIndex+'">' + fileName + '<span class="progress-circle progress-1" id="progressBar_'+uniqueIndex+'"></span><img class="deleteCircle" id="dropFile_'+uniqueIndex+'"onclick="deleteAtDropArea('+uniqueIndex+')" src="{{ config('locations.systemImage.asset').'delete_circle.png'  }}"></span>');

      uniqueIndex=uniqueIndex+1;
  });
  //updating the file index for the next upload-request
  attemptFileIndex=attemptFileIndex+fileArray.length;
  fileCountAfterDelete = fileCountAfterDelete + fileArray.length;

  //
  if(rejectedFormatArray.length > 0){
      $('#singleFileFormatValidation').empty().css('display', 'block').append("{{__('Format Rejected:')}}");
      for($j=0;$j<rejectedFormatArray.length;$j++)
      {
          $('#singleFileFormatValidation').append(rejectedFormatArray[$j]);
      }
  }
  if(rejectedSizeArray.length > 0) {
      $('#singleFileSizeValidation').empty().css('display', 'block').append("{{__('Maximum Size Exceeded')}}");
      for ($a = 0; $a < rejectedSizeArray.length; $a++) {
          $('#singleFileSizeValidation').append(rejectedSizeArray[$a]);
      }
  }

  if( fileCountAfterDelete==0 && fileArray.length==0)
  {
      $('#dragLabel, #dropInfo').css('display','block');
      $('#upload').removeClass('enabled').addClass('disabled');
  }

  uploadDoc((attemptFileIndex-fileArray.length),(attemptFileIndex-1),(uploadRequestStatusArray.length));
}
//final upload, sending files to server
function uploadDoc(uploadRequestStartIndex,uploadRequestEndIndex,requestIndex) {

  if (fileArray.length != 0) {
      //update upload request status array
      uploadRequestStatusArray.push('uploading');

      var form = new FormData();
      $.ajaxSetup({
          headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
      });

      for (i = 0; i < fileArray.length; i++) {
          var attachment = fileArray[i];
          form.append('attachment[]', attachment);
      }
      form.append('isMandatory', $('.displayType .item.active').attr('data-isMandatory'));
      if($('.displayType .item.active').attr('data-isMandatory')==1) {
          form.append('type', $('#file_type_mandatory').val());
      } else if($('.displayType .item.active').attr('data-isMandatory')==0) {
          form.append('type', $('#file_type_supplementary').val());
      }
      form.append('documentsType',2);
      form.append('source',1);
      $.ajax({
          type: 'POST',
          url: $("#accountdocuments").val(),
          xhr: function () {
              var xhr = new XMLHttpRequest();
              // Called when upload progress changes.
              xhr.upload.addEventListener("progress", function (evt) {
                  for (i = uploadRequestStartIndex; i <= uploadRequestEndIndex; i++) {
                      var cls = $('#progressBar_' + i).attr('class').split(' ')[1];
                      $('#progressBar_' + i).removeClass(cls).addClass('progress-'+ ((evt.loaded / evt.total) * 100).toFixed(0));
                  }
                  if(((evt.loaded / evt.total) * 100).toFixed(0)==100)
                      uploadRequestStatusArray[requestIndex]='uploaded';

              }, false);
              return xhr;
          },
          data: form,
          contentType: false,
          cache: false,
          processData: false,
          success: function (data) {


              for(var i=0;i<data.docIDs.length;i++){
            	  	documentsID = $("#documentsID").val();
              	$("#documentsID").val(documentsID + ','+data.docIDs[i]);
              }

              h = 0; //for fetching file IDs from the returned DB array starting with 0
              for (k = uploadRequestStartIndex; k <= uploadRequestEndIndex; k++) {
                  var fileID = data.docIDs[h];
                  var cardIndex = k;
                  // $('#progressBar_' + k).hide();
                  // $('#dropFile_' + k).show();

                  $('#dropFile_' + k).css('display', 'block');
                  $('#progressBar_' + k).css('display', 'none');
                  $('#dropFile_' + cardIndex).attr('data-id', fileID);
                  h = h + 1;
              }
              userQuota = parseInt(data.userQuota);
              //if(!uploadRequestStatusArray.includes('uploading'))
              if (uploadRequestStatusArray.indexOf('uploading') <= -1)
                  $('#upload').removeClass('disabled').addClass('enabled');
          }
      });
  }
}
//deleting file at the drop area
function deleteAtDropArea(index)
{
  var d = {
      '_token':$("#tokens").val()
  };
  d['customerID'] = $("#globalCustomerID").val();
  d['fileID'] = $('#dropFile_'+index).attr('data-id');
  $.ajax({
      type:'GET',
      url:$("#deleteDocument").val(),
      data:d,
      success:function(data){
    	  	  $("#documentsID").val($("#documentsID").val().replace(','+d['fileID'],''));
          fileCountAfterDelete=fileCountAfterDelete-1;
          userQuota = parseInt(data.userQuota);
          $('#file_card_'+index).css('display','none');
          // $('#upload').empty();
          // $('#upload').append('( '+fileCountAfterDelete+'/8) Complete');
          if(fileCountAfterDelete==0)
          {
              $('#dragLabel, #dropInfo').css('display','block');
              // $('#dropInfo').append('*2MB limit on ordinary attachments; <br> *20MB limit on portfolio compression.');
              $('#singleFileSizeValidation, singleFileFormatValidation').empty().css('display', 'none');
              $('#upload').removeClass('enabled').addClass('disabled');
          }

      }
  });
}
</script>