<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript">
    loadScript(plugin_path + 'dropzone/dropzone.js', function() {

        Dropzone.options.myDropzone = {
            acceptedFiles:"image/*",
            addRemoveLinks: true,
            init: function() {

                thisDropzone = this;
                $.getJSON('<?php echo base_url()?>products/dropzone_load/<?php echo @$item->id?>', function(data) {
                    $.each(data, function(index, val) {
                        var mockFile = { name: val.name, size: val.size };

                        // Call the default addedfile event handler
                        thisDropzone.emit("addedfile", mockFile);

                        // And optionally show the thumbnail of the file:
                        thisDropzone.emit("thumbnail", mockFile, "<?php echo base_url().IMAGE_PATH?>"+val.path);

                        //Push File
                        thisDropzone.files.push(mockFile);
                    });
                });

                this.on("removedfile",function (file) {

                    var jsonString = file.name;
                    $.ajax({
                        type: "POST",
                        url: "<?=base_url()?>products/dropzone_remove/<?php echo @$item->id?>/",
                        data: {data : jsonString},
                        success:function(data){

                        }
                    }) ;
                });

                this.on("addedfile", function(file) {

//                    //Check Duplicate
//                    if (this.files.length) {
//                        var _i, _len;
//                        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) // -1 to exclude current file
//                        {
//                            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModifiedDate.toString() === file.lastModifiedDate.toString())
//                            {
//                                this.removeFile(file);
//                            }
//                        }
//                    }
                });
                this.on("error", function(file, message, xhr) {

                    var header = xhr.status+": "+xhr.statusText;
                    $(file.previewElement).find('.dz-error-message').text(header);
                });
            }
        }

    });


    function preThumbnail1Image(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#thumbnail1_image').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function preThumbnail2Image(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#thumbnail2_image').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    loadScript(plugin_path + "jqgrid/js/jquery.jqGrid.js", function(){
        loadScript(plugin_path + "jqgrid/js/i18n/grid.locale-en.js", function(){
            loadScript(plugin_path + "bootstrap.datepicker/js/bootstrap-datepicker.min.js", function(){

                // ----------------------------------------------------------------------------------------------------
                jQuery("#product_specs").jqGrid({

                    url: '<?php echo base_url()?>products/specs_json/<?php echo $product_id?>',
                    datatype : "json",
                    height : '250',
                    colNames : ['Action','Title','Width', 'Lenght', 'Height', 'Weight', 'Original Price', 'Price'],
                    colModel : [
                        { name : 'act', index:'act', sortable:false },
                        { name : 'title', index : 'title', editable : true},
                        { name : 'width', index : 'width', editable : true},
                        { name : 'lenght', index : 'lenght', editable : true },
                        { name : 'height', index : 'height', align : "right", editable : true },
                        { name : 'weight', index : 'weight', align : "right", editable : true },
                        { name : 'original_price', index : 'original_price', align : "right", editable : true },
                        { name : 'price', index : 'price', align : "right", editable : true }],
                    rowNum : 10,
                    rowList : [10, 20, 30],
                    pager : '#pager_product_specs',
                    sortname : 'id',
                    toolbarfilter: true,
                    viewrecords : false,
                    sortorder : "asc",
                    gridComplete: function(){
                        var ids = jQuery("#product_specs").jqGrid('getDataIDs');
                        for(var i=0;i < ids.length;i++){
                            var cl = ids[i];
                            be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#product_specs').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>";
                            se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#product_specs').saveRow('"+cl+"');\"><i class='fa fa-save'></i></button>";
                            ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#product_specs').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";
                            jQuery("#product_specs").jqGrid('setRowData',ids[i],{act:be+se+ca});
                        }
                    },
                    autowidth : true,
                    editurl : "<?php echo base_url()?>products/specs_add/<?php echo $product_id?>",
//                    caption : "",
                    multiselect : false,

                });
                // ----------------------------------------------------------------------------------------------------

                jQuery("#product_specs").jqGrid('navGrid', "#pager_product_specs", {
                    edit : false,
                    add : true,
                    del : true  ,
                    refreshstate: "current"
                });

                // On Resize
//                jQuery(window).resize(function() {
//
//                    if(window.afterResize) {
//                        clearTimeout(window.afterResize);
//                    }
//
//                    window.afterResize = setTimeout(function() {
//
//                        /**
//                         After Resize Code
//                         .................
//                         **/
//
//                        jQuery("#jqgrid").jqGrid('setGridWidth', jQuery("#middle").width() - 32);
//
//                    }, 500);
//
//                });

                // ----------------------------------------------------------------------------------------------------

                /**
                 @STYLING
                 **/
                jQuery(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
                jQuery(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
                jQuery(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
                jQuery(".ui-jqgrid-pager").removeClass("ui-state-default");
                jQuery(".ui-jqgrid").removeClass("ui-widget-content");

                jQuery(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
                jQuery(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
                jQuery(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
                jQuery(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
                jQuery(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
                jQuery(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
                jQuery(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
                jQuery(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
                jQuery(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

                jQuery( ".ui-icon.ui-icon-seek-prev" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

                jQuery( ".ui-icon.ui-icon-seek-first" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

                jQuery( ".ui-icon.ui-icon-seek-next" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

                jQuery( ".ui-icon.ui-icon-seek-end" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");

            });
        });
    });



</script>



