@php $field_slug = Str::slug($field,'_'); @endphp
<!-- Start dropzone for {!!$field!!} -->
<div class="upload-wraper">
    
<div class="dropzone  dropzone-previews" id="{!!$field_slug!!}">
    
</div>

<script type="text/javascript">
$(function () {
    Dropzone.autoDiscover = false;
    $('div#{!!$field_slug!!}').dropzone({
        url: "{!! $url !!}",
        maxFiles: {!!$count!!},
        maxFilesize: 1024,
        timeout: 180000,
        acceptedFiles: "{{$mime}}",
        parallelUploads : 1,
        maxfilesexceeded: function(file) {
            toastr.error('Files exceedes maximum size.', 'Error');
        },
        sending: function(file, xhr, formData) {
            formData.append("_token", $('meta[name="csrf-token"]').attr('content'));
            formData.append('product_company_id',$('#product_company_id').val());
            // Laravel expect the token post value to be named _token by default
        },
        init: function() {
            this.on("success", function(file, response) {
                response['i'] = ++i;
                if(["jpg", "jpeg", "png"].indexOf(response.file.split('.').pop()) >= 0){
                    rendered = Mustache.render(template_image_{!!$field_slug!!}, response);
                } else {
                    rendered = Mustache.render(template_file_{!!$field_slug!!}, response);
                }
                $('#sortable_{!!$field_slug!!}').append(rendered);
                toastr.success('Files uploaded successfully.', 'Success');
            });
        },
        complete: function(file) {
          this.removeFile(file);
        }
    });

    var {!!$field_slug!!}_files = {!!json_encode($files)!!};
    var template_image_{!!$field_slug!!} = $('#template_image_{!!$field_slug!!}').html();
    var template_file_{!!$field_slug!!} = $('#template_file_{!!$field_slug!!}').html();
    Mustache.parse(template_image_{!!$field_slug!!});
    Mustache.parse(template_file_{!!$field_slug!!});
    var rendered = '';
    var i = 1;
    $.each({!!$field_slug!!}_files, function( index, value ) {
        i = index;
        value['i'] = index;

        if(["jpg", "jpeg", "png"].indexOf(value.file.split('.').pop()) >= 0){
            rendered = rendered + Mustache.render(template_image_{!!$field_slug!!}, value);
        } else {
            rendered = rendered + Mustache.render(template_file_{!!$field_slug!!}, value);
        }
    });

    $('#sortable_{!!$field_slug!!}').html(rendered);
    rendered = '';
});
</script>


<!-- End dropzone. -->
<script id="template_file_{!!$field_slug!!}" type="x-tmpl-mustache">
    <div class="file-box" id="image_box_@{{i}}">
        <div class="file-container">
            <a href="{!!url("/file/download")!!}/@{{path}}" target="_blank" >
                @{{file}}
            </a> 
            <a href="#" class="remove-file">
                <i class="fa fa-times"></i>
            </a>
        </div>                
        <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][folder]" value="@{{folder}}">
        <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][time]" value="@{{time}}">
        <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][path]" value="@{{path}}">
        <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][file]" value="@{{file}}">
    </div>
</script>

<!-- End dropzone. -->
<script id="template_image_{!!$field_slug!!}" type="x-tmpl-mustache">
    <div class="img-box" id="image_box_@{{i}}">
        <div class="img-container">
            <a href="{!!url("/image/local/original")!!}/@{{path}}" target="_blank" >
                <img src="{!!url("/image/local/xs")!!}/@{{path}}" class="img-responsive" alt="">
            </a>
            {{-- @if(config('filer.file_system_disk') == 's3')
                <img src="{!!config('filer.file_system_url')!!}@{{path}}" style="height:60px;width:80px" class="img-responsive" alt="">
            @else
                <a href="{!!url("/image/local/original")!!}/@{{path}}" target="_blank" >
                    <img src="{!!url("/image/local/xs")!!}/@{{path}}" class="img-responsive" alt="">
                </a>
            @endif --}}
            <div class="btn-container">
                <a href="#" class="move-image">
                    <i class="las la-arrows-alt"></i>
                </a>
                <a href="#" class="remove-image">
                    <i class="las la-times"></i>
                </a>
            </div>
        </div>
        <div class="edit-wraper" style="display: none">
            <div class="row">
                <div class="col-sm-4">
                    <div id="main-img">
                        <img src="{!!url("/image/sm")!!}/@{{path}}" class="img-fluid" alt="">
                        {{-- @if(config('filer.file_system_disk') == 's3')
                            <img src="{!!config('filer.file_system_url')!!}@{{path}}" style="height:60px;width:80px" class="img-fluid" alt="">
                        @else
                            <img src="{!!url("/image/sm")!!}/@{{path}}" class="img-fluid" alt="">
                        @endif   --}}
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <label for="{!!$field_slug!!}_@{{i}}_title">Title</label>
                        <input type="text" class="form-control" id="{!!$field_slug!!}_@{{i}}_title" type="text" name="{!!$field_slug!!}[@{{i}}][title]" value="@{{caption}}" placeholder="Image Title">
                    </div>
                    <div class="form-group">
                        <label for="{!!$field_slug!!}_@{{i}}_caption">Caption</label>
                        <input type="text" class="form-control" id="{!!$field_slug!!}_@{{i}}_caption" type="text" name="{!!$field_slug!!}[@{{i}}][caption]" value="@{{caption}}" placeholder="Image Caption">
                    </div>
                    <div class="form-group">
                        <label for="{!!$field_slug!!}_@{{i}}_url">Url</label>
                        <input type="text" class="form-control" id="{!!$field_slug!!}_@{{i}}_url" type="text" name="{!!$field_slug!!}[@{{i}}][url]" value="@{{caption}}" placeholder="Image URL">
                    </div>
                    <div class="form-group">
                        <label for="{!!$field_slug!!}_@{{i}}_desc">Description</label>
                        <textarea class="form-control" id="{!!$field_slug!!}_@{{i}}_desc" type="text" name="{!!$field_slug!!}[@{{i}}][desc]" placeholder="Image Description" rows="5">@{{desc}}</textarea>
                    </div>
                </div>
            </div>
            

            <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][folder]" value="@{{folder}}">
            <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][time]" value="@{{time}}">
            <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][path]" value="@{{path}}">
            <input class="form-control" type="hidden" name="{!!$field!!}[@{{i}}][file]" value="@{{file}}">
        </div>                    
    </div>
</script>

    <!-- Start image editor for {!!$field_slug!!} -->
    {!!Form::hidden($field_slug)->forceValue('0')!!}
    <div id="sortable_{!!$field_slug!!}" class="image-editor">

    </div>
</div>
<script type="text/javascript">
$(function () {
    $(document.body).on('click', ".remove-image", function(e){
       
        $(this).parents('.img-box').remove();
        e.preventDefault();
    });

    $(document.body).on('click', ".remove-file", function(e){
        $(this).parents('.file-box').remove();
        e.preventDefault();
    });

    $(document.body).on('click', ".btn-close", function(e){
        $(this).parents(".edit-wraper").hide();
        e.preventDefault();
    })
    
    $(document.body).on('click', ".edit-image", function(e){
        poff    = $(this).parents('.upload-wraper').offset();
        toff    = $(this).offset();
        mleft    = poff.left - toff.left;
        mtop     = poff.top - toff.top;

        $(this).parents('.img-box').children(".edit-wraper").css('margin-top', mtop-83);
        $(this).parents('.img-box').children(".edit-wraper").css('margin-left', mleft+67);
        $(this).parents('.img-box').children(".edit-wraper").show();
        e.preventDefault();
    });
    var el = document.getElementById('sortable_{!!$field_slug!!}');
    var sortable = Sortable.create(el, {
        handle: ".move-image"
    });

});
</script>