@extends('admin.layouts.app')
@section('content')
<form method="post" action="{{ route('report.documentsSave')  }}" name="frmaddedit" id="frmaddedit">
    <div class="row mx-0 mb-3">
        <div class="col-lg-6">
            <h1 class="page-title">{{ (isset($document->id) ? __('document.editpagetitle') : __('document.addpagetitle'))  }}</h1>
        </div>
        <div class="col-lg-6 d-flex justify-content-lg-end justify-content-center align-items-center">
            <div class="top-btn-box">
                <div class="top-btn-box d-flex">
                    <a tabindex="5" href="{{ route('report.documents',['id'=>$id]) }}" class="btn btn-dark mr-1"><i class="icon-close-icon top-icon"></i> <span>{{ __('common.cancel') }}</span></a>
                    <button tabindex="9" type="submit" class="btn btn-primary mr-1" id="btnsave" name="btnsave" value='save'><i class="icon-save_icon top-icon"></i>
                        <span>{{ __('common.save') }}</span></button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        @csrf
        @if(isset($document->id)) @method('PUT') @endif
        <div class="row">
        <div class="form-group col-md-6">
                <label for="type_id">{{ __('documenttype.type') }}<span class="text-danger">*</span></label>
                <select id="type_id" class="form-control" name="type_id">
                    <option value="">Select</option>
                    @foreach($documentTypes as $list)
                    <option value="{{ $list->id }}" @if( old('type_id', '' ) == $list->id )  selected="selected"  @endif>{{ $list->type }}</option>
                    @endforeach
                </select>
                @error('type_id')
                <div class="errormessage">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group col-md-6">
                <label for="doc_name">{{ __('document.doc_name') }}<span class="text-danger">*</span></label>
                <input placeholder="Document Name" type="text" class="form-control" name="doc_name" id="doc_name" value="">
                @error('doc_name')
                <div class="errormessage">{{ $message }}</div>
                @enderror
            </div>
            <input type="hidden" id="review_id" name="review_id" value="{{ $id }}" />
            <div id="gallery-basic-uploader" class="form-group col-md-12" style="padding-top: 15px;">
                <div class="row fileupload-buttonbar mb-1">
                    <div class="col-lg-7 mb-4">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success text-white px-4 fileinput-button cursor-point mr-2 mb-2" id="addfiles">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Add files...</span>
                            <input type="file" name="files[]" class="cursor-point" multiple>
                        </span>
                        <button type="submit" id="startall" class="btn btn-primary start px-4 mb-2">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>Start Upload</span>
                        </button>
                        <span class="fileupload-process"></span>
                        </br>
                    </div>
                    @error('multiimage')
                    <div class="errormessage">{{ $message }}</div>
                    @enderror
                    <!-- The global progress state -->
                    <div class="col-lg-5 fileupload-progress">
                        <!-- The global progress bar -->
                        <div class="progress progress-striped active hide" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                        </div>
                        <!-- The extended global progress state -->
                        <div class="progress-extended">&nbsp;</div>
                    </div>
                    <div class="col-lg-12">
                        <i class="text-muted"><small></small></i>
                    </div>
                </div>

                <!-- dropzone -->
                <div class="dropzone table-layout well mb-2 d-flex justify-content-center align-items-center" style="box-shadow:none;border-style:dashed;height:200px;">
                    <div class="col-xs-11 text-center">
                        <h3 class="text-muted"><i class="ico-file-plus2 mr5"></i> Drag and drop your file here!</h3>
                    </div>
                </div>

                <!-- file list -->
                <div class="table-responsive table-data-listing file-upload-table">
                    <table role="presentation" class="table table-striped table-hovered upload-lists">
                        <tbody class="files">
                        @if(count(old('multiimage', [] )) > 0)
                            @foreach(old('multiimage', '' ) as $doc)
                            <tr class="template-download in" pk_id="">
                                <input name="multiimage[]" type="hidden" id="multiimage" value="3177a96cfef9933777d07ad3e7fe957300022296.pdf">
                                <td>
                                    <p class="name">
                                        <span>{{ $doc }}</span>
                                    </p>
                                </td>
                                <td>
                                    <span class="size"></span>
                                </td>
                                <td>
                                </td>
                            </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
                 <div><small>Max size 5(MB) and Allowed only Documents, images and pdf</small></div>
            </div>
           
            @if(isset($document->documentReference) && COUNT($document->documentReference) > 0)
            @foreach($document->documentReference as $doc)
            <div class="col-md-3 mb-4">
                <img src="{{ getImageUrl($doc->document,'document') }}" class="img-fluid img-responsive">
            </div>
            @endforeach
            @endif


        </div>
        

    </div>
</form>


<!-- fileupload js -->
<link rel="stylesheet" href="{{ asset('assets/admin/css/jquery.fileupload.css') }}">
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}

        <tr class="template-upload ">
        <input name="multiimage[]" type="hidden" id="multiimage" value="{%=file.name%}" />
            <td>
                <span class="preview"></span>
            </td>
            <td>
                {% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
                    <p class="name">{%=file.name%}</p>
                {% } %}
                <strong class="error text-danger filevalidationerror" ></strong>
            </td>
            <td>
                <p class="size">Processing...</p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            </td>
            <td>
                {% if (!o.options.autoUpload && o.options.edit && o.options.loadImageFileTypes.test(file.type)) { %}
                  <button class="btn btn-success edit" data-index="{%=i%}" disabled>
                      <i class="glyphicon glyphicon-edit"></i>
                      <span>Edit</span>
                  </button>
                {% } %}
                {% if (!i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary px-3 start mb-2 mr-2" disabled>
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Upload</span>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn-cancel px-3 cancel mb-2">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
  </script>

<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download " pk_id={%=file.id %}>
        <input name="multiimage[]" type="hidden" id="multiimage" value="{%=file.name%}" />
            <td>
                {% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
                    <p class="name">
                        {% if (file.url) { %}
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                        {% } else { %}
                            <span>{%=file.name%}</span>
                        {% } %}
                    </p>
                {% } %}
                {% if (file.error) { %}
                    <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                {% } %}
            </td>
            <td>
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            </td>
            <td>
                {% if (file.deleteUrl) { %}
                    <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                    <input type="checkbox" name="delete" value="1" class="toggle">
                {% } else { %}

                {% } %}
            </td>
        </tr>
    {% } %}
  </script>
<script src="{{ asset('assets/admin/js/fileupload/jquery.ui.widget.js') }}"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="{{ asset('assets/admin/js/fileupload/tmpl.min.js') }}"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="{{ asset('assets/admin/js/fileupload/load-image.all.min.js') }}"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="{{ asset('assets/admin/js/fileupload/canvas-to-blob.min.js') }}"></script>
<!-- blueimp Gallery script -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.blueimp-gallery.min.js') }}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload.js') }}"></script>
<!-- The File Upload processing plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-process.js') }}"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-image.js') }}"></script>
<!-- The File Upload audio preview plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-audio.js') }}"></script>
<!-- The File Upload video preview plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-video.js') }}"></script>
<!-- The File Upload validation plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-validate.js') }}"></script>
<!-- The File Upload user interface plugin -->
<script src="{{ asset('assets/admin/js/fileupload/jquery.fileupload-ui.js') }}"></script>

<script>
    uploadgalleryimages = '{{ route("document.upload") }}';
    var max_image_size_inMB = "5";
    var max_image_width = "1920";
    var max_image_height = "760";
    var password_strength = "Strong";
    var max_gallery_size_inMB = "20";
    var max_image_width_gallery = "800";
    var max_image_height_gallery = "450";
    var regx_minimum_password_length = /^(.{8,})/;
</script>

@endsection