@extends('user.layouts.app-newui')
@section('content')
<style>
    #ticket_list_wrapper{
        margin-bottom: 20px;
    }
</style>
<!-- Wrapper -->  
<div class="main-card">
<h1 class="text-center mb-4 page_title">Multiple-pdf-files upload for document -  @if(Session::has('multiple_upload_pdf.document_label')) {{Session::get('multiple_upload_pdf.document_label') }} @endif </h1>
    <div class="row justify-content-center">
	<div class="col-lg-7">
	    <div class="card shadow border-0 content-card-invitationpage">
                <div class="card-body">
		<div class="alert alert-gray mb-4" id="scrolltop">

		    <ul>
			<li>
			    Please upload pdf file for current document. At least <b> 2 </b>pdf files required to merge.
			</li>
			<li>
			    Support file with <b>'pdf'</b> extension.
			</li>
			<li>
			    Attached file size is maximum <b>10MB</b>.
			</li>
			<li>
			    You can select multiple files at a time to upload.
			</li>
		    </ul>
		</div>
	<div class="col-lg-12">
	     <form name="m_upload_files" id="m_upload_files" method="POST" action="{{ route('finalupload') }}"  enctype="multipart/form-data">
	    <div class="row">
		    <div class="form-group">
			<div class="mb-3">
			    <label for="formFileMultiple" class="form-label">Add PDF File: </label>
			    <!--<input class="form-control" type="file" id="formFileMultiple" onchange="return documentUpload();"  multiple>--> 
			     {{ csrf_field() }}
			     <input type="file" name="doc_file[]" class="form-control merge_input" id="doc_file"  onchange="return documentUpload();" accept="application/pdf" multiple />
			     <input type='hidden' name='merge_final_document' value='1'>
			     <input type='hidden' name='document_type' value=' {{Session::get('multiple_upload_pdf.document_type') }}'>
			     <input type='hidden' name='document_type' id='document_type' value=' {{Session::get('multiple_upload_pdf.document_type') }}'>
			</div>
		    </div>
	    </div>
	    @if(Session::has('multiple_upload_pdf.pages') && !empty(Session::get('multiple_upload_pdf.pages')) && count(Session::get('multiple_upload_pdf.pages')) > 0)
	    <div class="submit_document_div row">
		<div class="mb-3"> 
		    <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif disable btn-xs-block" onclick="return file_upload_and_merge();"><i class="fa fa-plus-circle"></i> Merge selected files and upload</button>
		</div>
	    </div>
	    @endif
	    <div class="text-center response" ></div>    
	    <div id="full-overlay">
	       <div style="position: absolute;left: 50%;top: 50%;height: 60px;margin: 0px auto;-webkit-animation: rotation .6s infinite linear;
       ">
		   <img src="{{ url('assets/images/busy.gif') }}" style="margin-right:2px;" /> Please Wait...
	       </div>
	   </div>  

	    <div class="row">
		<div class="mb-3">
		    <div id="display_document_template">
			    @if(Session::has('multiple_upload_pdf.pages') && !empty(Session::get('multiple_upload_pdf.pages')))
			       @foreach(Session::get('multiple_upload_pdf.pages') as $key => $files)
				    <div class="alert alert-info document_tmp">
					<a href="javascript:void(0)" class="close delete_document" onclick ="return removeDocument('{{$key}}','{{$files}}');" aria-label="close">&times;</a>
					<i class="fa fa-file-pdf-o fa-2x text-danger" aria-hidden="true" ></i> <span class="original_file">{{$files}}</span>
				    </div>
				@endforeach
			    @else
				<label for="formFileMultiple" class="form-label"> Nothing to merge, add pdf files... </label>
			    @endif

		    </div>
		</div>
	    </div>
	    <div class="submit_document_div row">
		<div class="col-sm-12"> 
		    <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif disable btn-xs-block" onclick="return file_upload_and_merge();"><i class="fa fa-plus-circle"></i> Merge selected files and upload</button>
		</div>
	    </div>
	</div>
	</form>
    </div>
    </div>
    </div>
    </div>
</div>
    @include('admin.includes.status')
           
       
@endsection
@section('scripts')
<script type="text/javascript">

  function documentUpload(){
        showLoader("#full-overlay");
        var fd = new FormData();
        var select_files = $('#doc_file')[0].files;
        var count = select_files.length;
        for (var i = 0; i < count;  ++i) {
            var files = $('#doc_file')[0].files[i];
            fd.append('doc_file[]',files);
        }
        
        $.ajax({
            url:  "{{ route('mergefiles') }}",
            type: 'post',
            data: fd,
            dataType: 'json',
            contentType: false,
            processData: false, 
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response){
               
                $("#m_upload_files").trigger("reset");
                if(response.type == "success"){
                    location.reload();
                }
                else{
                    hideLoader("#full-overlay");
                    $("#m_upload_files").show();
                    $("#m_upload_files .response").removeClass().addClass('text-center response alert alert-danger').html(response.message);
                }
            },
        });
    }  
  function removeDocument(document_key,document_name){
      
        showLoader("#full-overlay");
        $.ajax({
            url:  "{{ route('removedocument') }}",
            type: 'post',
            data: { action : "remove_document",document_name : document_name,document_key : document_key },
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response){
                $("#m_upload_files").trigger("reset");
                if(response.type == "success"){
                    location.reload();
                }
                else{
                    hideLoader("#full-overlay");
                    $("#m_upload_files").show();
                    $("#m_upload_files .response").removeClass().addClass('text-center response alert alert-danger').html(response.message);
                }
            },
        });
    }
  function file_upload_and_merge(){

        showLoader("#full-overlay");

        var document_type = $('#document_type').val();
        $.ajax({
            url:  "{{ route('finalupload-newui') }}",
            type: 'post',
            data: { document_type : document_type},
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response){
                $("#m_upload_files").trigger("reset");
                if(response.type == "success"){
                    var Html = '<div class="alert swl-alert-success"><ul><li>'+ response.message+ '</li></ul></div>'; 
                    notifyResponseTimerAlert(Html,'','<div class="custom-success-icon"><i class="fa fa-check-square custom-check-square"></i></div>Success',2000);
                    setTimeout(function(){
                            document.location.href = response.redirectURL;
                    }, 3000); 
                }
                else{
                     $([document.documentElement, document.body]).animate({
        scrollTop: $("#scrolltop").offset().top
    }, 200);
                    $("#m_upload_files").show();
                    hideLoader("#full-overlay");
                    $("#m_upload_files .response").removeClass().addClass('text-center response alert alert-danger').html(response.message);
                }
            },
        });
    }
          
</script>
@endsection