{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}
{% block breadcrumb %} <li>{{ "Image Library" | trans }}</li>{% endblock breadcrumb %}
{% block main_content %}
  <div class="page-content">
    <div class="page-header">
      <h1>{{ "Image Library" | trans }}</h1>
    </div>
    <div class="row">
    <div class="col-xs-12">
        <div class="row-fluid">
            <div>
                <div class="widget-box">
                    <div class="step-content row-fluid position-relative"
                         id="step-container">
                        <div class="step-pane active" id="step1">
                            <form name='product_image' class="form-horizontal product-image"
                                  id='product_image_library' method='post' enctype="multipart/form-data"
                                  action='{{path('officebrain_product_image_library')}}'
                                   onsubmit="return image_library_validate(this)">
                                <div class="full-width widget-box">
                                    <div class="parts-main widget-header">
                                        <h4>
                                            <i class="icon-key"> </i> {{ 'Product Image Library'|trans }}
                                        </h4>
                                    </div>
                                    <div class='widget-body'>
                                        <div class="row widget-main">

                                            <div class="col-xs-12 parts">
                                                <div class='parts-main widget-header'>
                                                    <h4>{{ 'High Res Image'|trans }}</h4>
                                                    <input type="hidden" id="productId" value="{{ data.productId }}">
                                                </div>
                                                <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12 widget-body">
                                                    <div class="row parts field-high_res">
                                                        <div class="col-lg-12 file-input input-container">
                                                            <div class="file-text  pull-right">
                                                                <a href="javascript:void(0);" onclick="viewFiles('high_res')">{{ 'View High Res Image'|trans }}</a>|
                                                                <a href="javascript:void(0);" onclick="viewFiles('high_res_zip')">{{ 'View Zip File'|trans }}</a>
                                                            </div>

                                                            <div class="imagelibrary-product-image-list">
                                                                <div>
                                                                    <span class='upload-image-library-files'>{{ 'Upload zip file'|trans }}:</span> 
                                                                    <input type="file" name="zipUpload[high_res][]" id="highres-zip" onchange="validateFileType('zip', this)">
                                                                    <span class="error dispaly-inherit"></span>
                                                                    <br />
                                                                    <br />
                                                                </div>

                                                                <div style='font-size:12px'>
                                                                    <span class='upload-image-library-files'>{{ 'Upload Image File'|trans }}:</span> 
                                                                    <span id="AddFile" onclick="addFile('high_res');"  class="label label-sm label-success">+{{ 'Add More'|trans }}</span><br />
                                                                    <input type="file" name="FileUpload[high_res][]" id="web-images" onchange="validateFileType('high_res', this)" class="ajaxFileUpload dispaly-inline">{{ 'Image Type'|trans }}<select name="FileUpload_type[high_res][]">
                                                                        <option value="blank">{{ 'Blank'|trans }}</option>
                                                                        <option value="imprinted">{{ 'Imprinted'|trans }}</option>
                                                                    </select>
                                                                    
                                                                    <span class="error dispaly-inherit"></span>
                                                                </div>

                                                            </div>
                                                            <ul id="FileUploader-high_res"></ul>
                                                            <div class="high_resImageLists"></div>
                                                            <div class="high_res_zipImageLists"></div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 parts">
                                                <div class='parts-main widget-header'>
                                                    <h4>{{ 'Templates'|trans }}</h4>
                                                </div>
                                                <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12 widget-body">
                                                    <div class="row parts field-template">
                                                        <div class="col-lg-12 file-input input-container">
                                                            <div class="file-text  pull-right">
                                                                <a href="javascript:void(0);" onclick="viewFiles('template')">{{ 'View Template Files'|trans }}</a>|
                                                                <a href="javascript:void(0);" onclick="viewFiles('template_zip')">{{ 'view Zip Files'|trans }}</a>
                                                            </div>

                                                            <div class="imagelibrary-product-image-list">
                                                                <div>
                                                                    <span class='upload-image-library-files'>{{ 'Upload Zip File'|trans }}:</span> 
                                                                    <input type="file" name="zipUpload[template][]" id="template-zip" onchange="validateFileType('zip', this)"  >
                                                                    <span class="error dispaly-inherit"></span>
                                                                    <br />
                                                                    <br />
                                                                </div>
                                                                <div style='font-size:12px'>
                                                                    <span class='upload-image-library-files'> {{ 'Upload Pdf File'|trans }}:</span>
                                                                    <span id="AddFile" onclick="addFile('template');" class="label label-sm label-success">+{{ 'Add More'|trans }}</span> <br />
                                                                    <input type="file" name="FileUpload[template][]" id="web-images" onchange="validateFileType('template', this)" class="ajaxFileUpload dispaly-inline">
                                                                    <span class="error dispaly-inherit"></span>
                                                                </div>
                                                            </div>
                                                            <ul id="FileUploader-template"></ul>
                                                            <div class="templateImageLists"></div>
                                                            <div class="template_zipImageLists"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-offset-5 col-md-7">
                                        <button type="submit" class="btn btn-info">
                                            <i class="icon-ok bigger-110"></i>{{'submit'|trans}}
                                        </button>
                                        <button type="reset" class="btn imageLibraryReset">
                                            <i class="icon-undo bigger-110"></i>{{'reset'|trans}}
                                        </button>
                                    </div>
                                    </div>
                                    
                                </div>
                                
                                    
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

        $("#FileUploader-high_res").html('');
        $("#FileUploader-high_res").parent('div').find('input').val('');
        $("#FileUploader-high_res").parent('div').find('.error').html('');

        $("#FileUploader-template").html('');
        $("#FileUploader-template").parent('div').find('input').val('');
        $("#FileUploader-template").parent('div').find('.error').html('');
        $(".webImageLists").html('');
        $(".web_zipImageLists").html('');

        $(".high_resImageLists").html('');
        $(".high_res_zipImageLists").html('');
        $(".templateImageLists").html('');
        $(".template_zipImageLists").html('');
    }
    $(document).ready(function() {
        
        $(".imageLibraryReset").click(function(){
            $("#product_image_library span.error").html('');
            $("select.imagelibrary-category").val('');
            $("select.imagelibrary-category").change();
            resetImageLibrary();
            
            //$(".imagelibrary-product select").find("option").remove();
        })
            
        
        


        $("body").on('click', '.RemoveFileUpload', function() { //Remove input
            $(this).parent('li').remove();
            return false;
        });
    });
    var filenumber = 1;
    function addFile(type) {
        if(type != 'template'){
        var selectFileType = "{{ 'admin.image_template_library.image_type'|trans }}"+'<select name="FileUpload_type[' + type + '][]">'+
                    '<option value="blank">{{ 'admin.image_template_library.blank'|trans }}</option>'+
                    '<option value="imprinted">{{ 'admin.image_template_library.imprinted'|trans }}</option>'+
                '</select>';
    }else{
        selectFileType = '';
    }
        
        var $li = $('<li><input class="ajaxFileUpload dispaly-inline" type="file" name="FileUpload[' + type + '][]" onchange="validateFileType(\'' + type + '\',this)" id="FileUpload-' + type + filenumber + '" required=""/>'+
                selectFileType +
                '<a href="{{ url('office_brain_page_comingsoon_view') }}" class="RemoveFileUpload"><button class="btn btn-xs btn-danger">\n\
				<i class="icon-trash bigger-120"></i>\n\
			</button>{#'admin.image_template_library.remove'|trans#}</a><span class="error dispaly-inherit"></span></li>').prependTo($("#FileUploader-" + type));
        filenumber++;
    }
    
    function validateFileType(type, e) {
        var val = $(e).val();
        ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase();
        var msg = '';
        if (type == 'web' || type == 'high_res') {
            if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && val != '')
                msg = 'Please upload jpg or png image';
        } else if (type == 'template') {
            if (ext != 'pdf' && val != '')
                msg = 'Please upload pdf template';
        } else if (type == 'zip') {
            if (ext != 'zip') {
                msg = 'Please upload zip file.';
            }
        }
        if (val != '' && msg == "")
        {
            //console.log(val);
            // logoUpload(e);
        }

        parentTag = ($(e).parent());
        $(parentTag).find(".error").html(msg);
        if(msg!=''){
            $(e).val('');
        }
    }
    function viewFiles(type) {
        var productId = $("#productId").val();
        
        $("#show_loader").show();
        $("." + type + "ImageLists").html('');
        $.ajax({
            type: 'POST',
            data: {'id': productId, 'type': type},
            url: '{{ path('OfficeBrainImageLibraryAdmin_browse_product_image')}}',
            
            success: function(data) {
                $("#show_loader").hide();
                $("." + type + "ImageLists").html(data);
            }
        });

    }
    function image_library_validate(e){
        /*var flag= true;
        if($("select.imagelibrary-category").val()==""){
            alert("{{'admin.image_template_library.warn_select_category'|trans}}");
            return false;
        }else if($(".imagelibrary-product select").val()==""){
            alert("{{'admin.image_template_library.warn_select_product'|trans}}");
            return false;
        }
        $("form[name^=product_image]").find("span.error").each(function(index){
           if($(this).html()!=''){
               alert($(this).html());
               flag = false;
               return false;
           }
        })
        return flag;*/
    return true;
    }
    
    function removeImageLibraryFile(imageId, type) {
        
        var message = '{{'admin.image_template_library.delete_file_confirmation'|trans}}';
        if (!confirm(message)) {
            return;
        }
        
        
        var productId = $("#productId").val();
        if (productId == "") {
            alert("Please select product");
            return false;
        }
        $("#show_loader").show();
        $.ajax({
            type: 'POST',
            data: {'productId': productId, 'imageId': imageId, 'imageType': type},
            url: '{{ path('officebrain_image_library_admin_bundle_remove_product_image')}}',
            success: function(data) {
                $("#show_loader").hide();
                $("#show_loader").show();
                $.ajax({
                    type: 'POST',
                    data: {'id': productId, 'type': type},
                    url: '{{ path('OfficeBrainImageLibraryAdmin_browse_product_image')}}',
                    success: function(data) {
                        $("#show_loader").hide();
                        $("." + type + "ImageLists").html(data);
                    }
                });
            }
        });
    }

</script>
<style>
    .ul-image-lists{
        display: inline-block;
    }
    .ul-image-lists li{float: left;width: 160px;word-wrap: break-word;margin: 0 5px;position: relative;}
    .upload-image-library-files {  display: inline-block;width: 233px;padding-bottom: 8px;}
    #AddFile{cursor: pointer;height: 24px;line-height: 1.5;padding-right: 9px;}
    
    .del {
        opacity: 0;
        position: absolute;
        right: 10px;
        top: -3px;
        transition: all 1s ease-in-out;
    }
    .template-lists li, .zip-lists li{ width: 100px;}
    .template-lists li .del{top:3px;right:7px;}
    .zip-lists li .del{top:-3px;right:6px;}
    .ul-image-lists li:hover .del {opacity: 1; transition: all 1s ease-in-out;}
    .error{ color: red}
    .dispaly-inline {display: inline !important; margin-right: 15px;}
    .dispaly-inherit {display: inherit;}
    #FileUploader-web li, #FileUploader-high_res li , #FileUploader-template li{ padding-top: 5px; color: #000;}
    .row.parts select, .imagelibrary-product-image-list select {margin: 0 15px;}
    .webImageLists, .high_resImageLists, .templateImageLists, .web_zipImageLists, .high_res_zipImageLists, .template_zipImageLists  {padding: 5px; margin: 10px 0;}
    .webImageLists h3, .high_resImageLists h3, .templateImageLists h3, .web_zipImageLists h3, .high_res_zipImageLists h3, .template_zipImageLists h3 {background-color: #7db4d8; border-bottom: solid 1px #999; padding:5px 10px;;margin-bottom: 0px; color: #fff; } 
    .webImageLists ul,.high_resImageLists ul,.templateImageLists ul, .web_zipImageLists ul,.high_res_zipImageLists ul,.template_zipImageLists ul {border: solid 1px #999;width: 100%; margin: 10px 0;}
    
</style>
{% endblock main_content %}