@extends('user.layouts.app')
@section('content')
<style>
    #ticket_list_wrapper{
        margin-bottom: 20px;
    }
</style>
<!-- Wrapper -->  
<div class="row">
    <div class="col-sm-12">
        <div class="white-box">
            <div class="row">
                <div class="col-md-12 col-xs-12" id="scrolltop">
                    <h3 class="box-title d-inline-b">Multiple-pdf-files upload for document -  @if(Session::has('multiple_upload_pdf.document_label')) {{Session::get('multiple_upload_pdf.document_label') }} @endif </h3>
                    <ul class="message grid_12 warning" style="border: solid 1px #E97338;background-color: #FEE5CA;color: #E97338 !important;padding-top: 5px;padding-bottom: 5px;font-size: 14px;
">
                        <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="col-lg-12 p-b-10">
                                    <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="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>
                    @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="col-xs-12">
                            <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>
            @include('admin.includes.status')
           
        </div>
    </div>
</div>
@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') }}",
            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,"success","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