<link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('admin_assets_folder'); ?>dist/css/dropzone.css">
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>dist/js/dropzone.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item('admin_assets_folder'); ?>dist/js/bootstrap.min.js"></script>


<div id="add_media_div" class="mt-2 mb-3" style="display: none;">

	<form enctype="multipart/form-data" action="<?php echo base_url().$this->config->item('admin_folder').'/products/upload_documents'; ?>" data-parsley-validate="" method="post" name="media_upload" id="my-awesome-dropzone" class="dropzone" novalidate="">

		<input type="hidden" name="product_id" id="product_id" value="<?php echo isset($products->id) && !empty($products->id) ? $products->id : ''; ?>">

		<input type="hidden" class="parent_id" name="parent_id" value="<?php echo isset($_GET['doc_ref']) && $_GET['doc_ref'] != '' ? $_GET['doc_ref'] : '' ?>" />

        <div class="fallback">
            <input type="file" required="" class="form-control" name="file[]" multiple="">
        </div>

    </form>

    <div class="alert alert-success border-success mt-2" style="display: none;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <i class="icofont icofont-close-line-circled"></i>
        </button>
        <strong id="success_message"></strong>
    </div>


    <div class="alert alert-danger border-danger mt-2" style="display: none;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <i class="icofont icofont-close-line-circled"></i>
        </button>
        <strong id="error_message"></strong>
    </div>
</div>

<script type="text/javascript">
	$(function () {

        $("#add_new_document").click(function () {
            if ($(this).attr("data-value") == "hide") {
                $("#add_media_div").fadeIn();
                $(this).attr("data-value", "show");
            } else {
                $("#add_media_div").fadeOut();
                $(this).attr("data-value", "hide");
            }
        });

    });


    Dropzone.options.myAwesomeDropzone = {
	    paramName: "file", // The name that will be used to transfer the file
	    uploadMultiple: true,
	    parallelUploads: 100,
	    maxFilesize: 5000000, // Size in MB
        timeout:0,

	    success: function(file, response) {
	        // Handle success
	        response = JSON.parse(response);
	        if(response["status"] == true){
                $("#success_message").html(response["message"]);
                $(".alert.alert-success").fadeIn();

                loadFolderContent();
                
            }else{
                $("#error_message").html(response["message"]);
                $(".alert.alert-danger").fadeIn();
            }

            setTimeout(function(){
            	$(".alert").fadeOut();
            },1000);
	    },
	    queuecomplete: function() {
	        this.removeAllFiles();
	    },
	    error: function(file, response) {
	        console.log(response);
	    }
	};
</script>