@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-image-files upload for document -  @if(Session::has('multiple_upload_img.document_label')) {{Session::get('multiple_upload_img.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 images for current document. At least 2 images required to merge.
			    </li>
			    <li>
				Please upload files with extension <b>"jpg,jpeg,png" </b>.
			    </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('finaluploadimg') }}"  enctype="multipart/form-data">
			<div class="mb-3">
			    <label for="formFileMultiple" class="form-label">Add Image File: </label>
			    <!--<input class="form-control" type="file" id="formFileMultiple" onchange="return documentUpload();"  multiple>--> 
			     {{ csrf_field() }}
			     <input type="file" name="doc_file_img[]" class="form-control merge_input" id="doc_file_img"  onchange="return documentUpload();" accept="image/png, image/jpeg, image/jpg" multiple />
			     <input type='hidden' name='merge_final_document' value='1'>
			     <input type='hidden' name='document_type' id='document_type' value=' {{Session::get('multiple_upload_img.document_type') }}'>
			</div>
				
			@if(Session::has('multiple_upload_img.pages') && !empty(Session::get('multiple_upload_img.pages')) && count(Session::get('multiple_upload_img.pages')) > 0)
			
			<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>
			
			@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>

			</form> 
			<div class="row">
			    <div class="col-xs-12">
				<div id="display_document_template">
				    <div class="table-responsive">
				    <table id="ticket_list" class="table table-bordered" style="border: none !important;">
					<tbody>

					@if(Session::has('multiple_upload_img.pages') && !empty(Session::get('multiple_upload_img.pages')))
					   @foreach(Session::get('multiple_upload_img.pages') as $key => $files)
					    <tr>

						<td style="border: none !important;padding-left: 0px !important;">
						    <img class="float-left" style="width:100%;height: 100%;padding-bottom: 15px;" src="{{ get_url(Session::get('multiple_upload_img.document_path').$files) }}" />
						</td>
						<td style="vertical-align: middle !important; width: 15px !important; border: none !important;"> 
						    <form method="post" onclick="showLoader('#full-overlay');" action="{{ route('imgrotate') }}" >
							 {{ csrf_field() }}
							<input type="hidden" name="action" value="r_left" />
							<input type="hidden" name="file_name" value="{{$files}}" />
							<input type="image" name="submit" value="Rotate_Left" src="{{ url('assets/images/rotate_left.png') }}" alt="Rotate Left" title="Rotate Image Left 90 degrees" />
						    </form>
						    
						</td> 
						<td style="vertical-align: middle !important; width: 15px !important; border: none !important;"> 
						    <form method="post" onclick="showLoader('#full-overlay');" action="{{ route('imgrotate') }}" >
							 {{ csrf_field() }}
							<input type="hidden" name="action" value="r_right" />
							<input type="hidden" name="file_name" value="{{$files}}" />
							<input type="image" name="submit" value="Rotate_Right" src="{{ url('assets/images/rotate_right.png') }}"  alt="Rotate Right" title="Rotate Image Right 90 degrees" />
						    </form>
						</td> 
						<td style="vertical-align: middle !important; width: 15px !important; border: none !important;"> 
						    <form method="post" onclick="showLoader('#full-overlay');" action="{{ route('removeimg') }}" >
							 {{ csrf_field() }}
							<input type="hidden" name="action"	value="delete" />
							<input type="hidden" name="file_name" value="{{$files}}" />
							<input type="hidden" name="document_key" value="{{$key}}" />
							<input type="image" name="submit" value="Delete" src="{{ url('assets/images/delete.png') }}" alt="Delete" title="Delete This Page" />
						    </form> 
						</td> 
					    </tr>

    <!--                                        </div>    -->
					    @endforeach
					@else
					    <label for="formFileMultiple" class="form-label"> Nothing to merge, add images... </label>
					@endif
				  </tbody>
				    </table>
				</div>
			    </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>
		@include('admin.includes.status')
	    </div>
	</div>
    </div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
   
  function documentUpload(){

        showLoader("#full-overlay");
        var fd = new FormData();
        var select_files = $('#doc_file_img')[0].files;
        var count = select_files.length;
        for (var i = 0; i < count;  ++i) {
            var files = $('#doc_file_img')[0].files[i];
            fd.append('doc_file_img[]',files);
        }
        
        $.ajax({
            url:  "{{ route('mergefilesimg') }}",
            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){
               
        $("#m_upload_files .response").removeClass().addClass('text-center response').html('Please wait... <i class="fa fa-spin fa-spinner"></i>').show();

        $.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{
                    $("#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('finaluploadimg') }}",
            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