<% include ../_layouts/adminheader %>
    <div id="image-trash" class="admin-media__trash"><i class="fa fa-trash" aria-hidden="true"></i></div>
    <h2 class="admin-page__main-title">Add Media</h2>
    <% include ../_layouts/messages/messages %>
    <% include ../_layouts/messages/errors %>
    <div>
        <button class="admin-button admin-button--add-something admin-button--add-something--second">
            <a href="/admin/add-media/upload-image"><i class="fa fa-image"></i></a>
        </button>
        <button class="admin-button admin-button--add-something">
            <a href="/admin/add-media/upload-video"><i class="fa fa-video"></i></a>
        </button>
    </div>
    <form action="/admin/add-media" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
        <div class="fallback">
            <input type="file" name="file" multiple>
            <input type="submit" value="upload">
        </div>
    </form>

    <% categories.forEach(function(category){ %>
        <h6 class="admin-page__sub-title-one">
        <%= category.title %> Images</h6>
        <div class="admin-media__viewer">
            <% media.forEach(media =>{ %>
                <% if (media.category.title === category.title) { %>
                    <div>
                        <a href="/admin/add-media/edit-image/<%= media._id %>">
                            <img id="draggable-img" number="<%= media._id %>" class="admin-media__preview-image" src="<%= media.path %>" alt="<%= media.alt %>"></img>
                        </a>
                    </div>
                <% } %>
            <% }) %>
        </div>
        <% }) %>
    <h6 class="admin-page__sub-title-one">Uploaded Videos</h6>
    <div>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/basic.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script>
        // Preview Image
        function readURL(input) {
            if (input.files && input.files[0]) {
                let reader = new FileReader();
                    reader.onload = function (e) {
                        $("#imgPreview").attr("src", e.target.result).width(100).height(100);
                    }
                    reader.readAsDataURL(input.files[0])
                    }
                }
                $("#img").change(function () {
                    readURL(this);
                })
                // Dropzone
                Dropzone.options.dropzoneForm = {
                    acceptedFiles: "image/*",
                    init: function () {
                        this.on("queuecomplete", function (file) {
                            setTimeout(() => {
                                location.reload()
                            }, 1000);
                        })
                    }
                }
                //Draggable Image
                $("img", $(".admin-media__viewer")).draggable({
                    revert: "invalid",
                    helper: "clone",
                    containment: "document",
                    start: function () {
                        $("#image-trash").addClass("admin-media__trash--visible")
                    },
                    stop: function () {
                        $("#image-trash").removeClass("admin-media__trash--visible")
                    }
                })
                $("#image-trash").droppable({
                    accept: "#draggable-img",
                    drop: function (event, ui) {
                        deleteImage(ui.draggable)
                    }
                })
                function deleteImage($item) {
                    $.get("/admin/add-media/trash-delete-image/" + $item.attr("number"))
                        setTimeout(() => {
                                location.reload()
                            }, 100);
                        }
    </script>
<% include ../_layouts/adminfooter %>