@extends('layouts.app')
@push('css_lib')
<!-- dropzone css -->
<link rel="stylesheet" href="{{asset('plugins/dropzone/bootstrap.min.css')}}">
@endpush

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark"><small>Media Library</small></h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{url('/dashboard')}}"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li class="breadcrumb-item active">Medias </li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<section class="content">
    <div class="clearfix"></div>
    <div class="container-fluid">
        <div id="mediaModal" class="card">
            @include('flash::message')
            <div class="card-header">
                <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                    <div class="ml-auto d-inline-flex">

                        <li class="nav-item">
                            <a class="nav-link pt-1 pb-35" id="refreshMedia" href="#"></a>
                        </li>
                        <li class="nav-item">
                            <div style="width: 200px;" id="selectCollection" class="ml-auto pb-2 mx-2">
                                <select name="collection_name" id="collectionName" class="form-control-sm form-control select2"> </select>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pt-1 pb-35" id="createMedia" href="#"><i class="fa fa-upload mr-2"></i>Upload Files</a>
                        </li>


                    </div>
                </ul>
            </div>
            <div class="card-body">
                <div id="createMediaField" class="row">
                    <div class="col-12">
                        <div style="width: 100%" class="dropzone default" id="default" data-field="default">
                            <input type="hidden" name="default">
                        </div>
                        <a href="#" id="doneMedia" class="btn btn-outline-primary btn-sm float-right mt-1">done</a>
                        <div class="form-text text-muted">
                            Drop files on the above area to upload it
                        </div>
                    </div>

                    <div class="clearfix my-5"></div>
                </div>
                <div class="row medias-items">
                    <div class="card loader">
                        <div class="overlay">
                            <i class="fa fa-refresh fa-spin"></i>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</section>
@endsection



@push('scripts')
<!-- dropzone js -->
<script src="{{asset('plugins/dropzone/dropzone.js')}}"></script>
<script type="text/javascript">
    Dropzone.autoDiscover = false;
</script>

<script type="text/template" data-template="mediaitem">
    <div class="media-item m-2">
            <div class="card clickble">
                <button data-uuid="${uuid}" class="btn btn-sm btn-danger delete-media"><i class="fa fa-trash"></i>
                </button>
                <img class="card-img"
                     src="${src}"
                     data-name="${file_name}"
                     data-type="${mime_type}"
                     data-size="${size}"
                     data-uuid="${uuid}"
                     alt="Card image">
                <div class="card-footer">
                    <small>${name} (${formated_size})</small><br> <small class="text-muted">${updated_at}</small>
                </div>
            </div>
        </div>
    </script>

<script type="text/javascript">
    /**
     * show DropZone to upload media
     * when click on createMedia link on card header
     **/

    $('#mediaModal #createMedia').on('click', function(event) {
        event.preventDefault();
        $('#mediaModal #createMediaField').css('display', 'block');
        mediaDropZone[0].dropzone.options.init();
    });

    /**
     * close DropZone after upload media
     * when we click on done button
     **/
    $('#mediaModal #doneMedia').on('click', function(event) {
        event.preventDefault();
        $('#mediaModal #createMediaField').css('display', 'none');
        mediaDropZone[0].dropzone.options.init();
        $('#mediaModal #refreshMedia').trigger('click');
    });



    /**
     * Initialize delete media buttons
     * and bind hover event to media thumbnails
     **/
    function initDeleteButtons() {
        $('#mediaModal .card.clickble .delete-media').on('click', function() {
            var _this = $(this);
            $.post("{!! url('uploads/clear') !!}", {
                _token: '{!! csrf_token() !!}',
                uuid: $(this).data('uuid'),
            }, function(data) {
                if (data && data.data === true) {
                    _this.parent('.card.clickble').parent('div.media-item').slideUp();
                    console.log(mediaDropZone[0].dropzone.files);
                    mediaDropZone[0].dropzone.files.forEach(function(file) {
                        if (file.upload.uuid === _this.data('uuid')) {
                            if (file.previewElement != null && file.previewElement.parentNode != null) {
                                file.previewElement.parentNode.removeChild(file.previewElement);
                            }
                        }
                    })
                } else if (data) {
                    swal({
                        title: "error",
                        confirmButtonText: "ok",
                        text: data.message,
                        type: "error",
                        confirmButtonClass: "btn-danger"
                    });
                }
            }).fail(function() {
                swal({
                    title: "error",
                    confirmButtonText: "ok",
                    text: data.message,
                    type: "error",
                    confirmButtonClass: "btn-danger"
                });
            });
        });
        $('#mediaModal .card.clickble').hover(function() {
            $('#mediaModal .card.clickble .delete-media').css('display', 'none');
            var btn = $(this).find('.delete-media');
            btn.css('display', 'block');
        });
    }

    /**
     * initialize collections filter
     * by default it select default collection
     **/
    function initSelectCollection() {
        var select = $('#selectCollection #collectionName');
        $.ajax({
            url: "{!! url('uploads/collectionsNames') !!}",
            type: 'GET',
            success: function(data, status) {
                const collections = Object.keys(data.data).map(i => data.data[i])
                collections.forEach(function(coll) {
                    select.append('<option value="' + coll.value + '">' + coll.title + '</option>');
                })
                select.val('default').trigger('change');
            }
        });
    }



    /**
     * load size of thumbnail from local storage
     * and initialize media thumbnails size
     *
     * called when all medias loaded successfully
     * */
    function initMediaItemsSize() {
        var mediaItems = $('#mediaModal .medias-items')
            .find('.media-item')
            .css('width', '150' + 'px');
    }

    /**
     * load media with ajax
     * and reset the thumbnails
     */
    function loadMedia(url) {

        var itemTpl = $('script[data-template="mediaitem"]').text().split(/\$\{(.+?)\}/g);
        var items = [];
        var mediaItems = $('#mediaModal .medias-items');
        $.ajax({
            url: url,
            type: 'GET',
            success: function(data, status) {
                if (status === 'success') {
                    data = JSON.parse(data);
                    data.forEach(function(item) {
                        items.push({
                            src: item.thumb,
                            file_name: item.file_name,
                            mime_type: item.mime_type,
                            size: item.size,
                            formated_size: item.formated_size,
                            uuid: item.custom_properties.uuid,
                            name: item.name,
                            updated_at: item.updated_at,
                        });
                    });
                } else {
                    mediaItems.find('.card.loader').html('Error please refresh page or use (Ctrl+F5)');
                }
            },
            error: function(data, status, error) {
                mediaItems.find('.card.loader').html('Error please refresh page or use (Ctrl+F5)');
            },
            complete: function(data, status) {
                if (status === 'success') {
                    mediaItems.html(items.map(function(item) {
                        return itemTpl.map(render(item)).join('');
                    }));
                    mediaItems.find('.card.loader').remove();
                    initMediaItemsSize();
                    initDeleteButtons();
                } else {
                    mediaItems.find('.card.loader').html('Error please refresh page or use (Ctrl+F5)');
                }
            }
        });
    }

    /**
     * click to refresh media
     */
    $('#mediaModal #refreshMedia').on('click', function() {
        loadMedia("{!! url('uploads/all') !!}/default");
        initSelectCollection();
    });

    /**
     * load media when select collection changed
     */
    $('#selectCollection #collectionName').on('change', function() {
        loadMedia("{!! url('uploads/all') !!}/" + $(this).val());
    });

    $(document).ready(function() {
        $('#mediaModal #refreshMedia').trigger('click');
    });
</script>

<script type="text/javascript">
    /**
     * dropzone to add media to default collection
     */
    var mediaDropZone = $(".dropzone.default").dropzone({
        url: "{!!url('uploads/store')!!}",
        acceptedFiles: ".jpeg,.jpg,.png,.pdf",
        addRemoveLinks: true,
        accept: function(file, done) {
            dzAccept(file, done, this.element, "{!!config('medialibrary.icons_folder')!!}");
        },
        sending: function(file, xhr, formData) {
            dzSending(this, file, formData, '{!! csrf_token() !!}');
        },
        complete: function(file) {
            $('#mediaModal #refreshMedia').trigger('click');
            if (file._removeLink) {
                file._removeLink.textContent = this.options.dictRemoveFile;
            }
            if (file.previewElement) {
                return file.previewElement.classList.add("dz-complete");
            }
        },
        success(response) {
            Toast.fire({
                icon: 'success',
                title: 'File upload successful'
            })
        },

        removedfile: function(file) {
            var _this = $('.card.clickble').find('button[data-uuid="' + file.upload.uuid + '"]');
            $.post("{!! url('uploads/clear') !!}", {
                _token: '{!! csrf_token() !!}',
                uuid: file.upload.uuid,
            }, function(data) {
                if (data && data.data === true) {
                    _this.parent('.card.clickble').parent('div.media-item').slideUp();
                    if (file.previewElement != null && file.previewElement.parentNode != null) {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    }
                } else {
                    swal({
                        title: "{{trans('lang.error')}}",
                        confirmButtonText: "{{trans('lang.ok')}}",
                        text: data.message,
                        type: "error",
                        confirmButtonClass: "btn-danger"
                    });
                }
            }).fail(function() {
                swal({
                    title: "{{trans('lang.error')}}",
                    confirmButtonText: "{{trans('lang.ok')}}",
                    text: data.message,
                    type: "error",
                    confirmButtonClass: "btn-danger"
                });
            });
            console.log(_this);
        }

    });

    // alter to show after seccess
    const Toast = Swal.mixin({
        toast: true,
        position: 'bottom-end',
        showConfirmButton: false,
        timer: 3000,
        onOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
</script>

@endpush