@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-image-files upload for document -  @if(Session::has('multiple_upload_img.document_label')) {{Session::get('multiple_upload_img.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 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="row">
                            <div class="form-group">
                                <div class="col-lg-12 p-b-10">
                                    <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>
                            </div>
                    </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="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>
             
                    </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>
            
                
            </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_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,"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