{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}
{% block breadcrumb %}
<li><a href="{{ path('office_brain_page_admin_product_management') }}">{{ 'admin_sidebar.product_management.title'| trans }}</a> / </li>
<li><a href="{{ path('officebrain_custom_productbundle_sku_masking_admin_list',{'country':activeCountry ,'language' : activeCulture}) }}">{{ "sku_masking.page_title"|trans({},'app') }}</a> / </li>
<li>{{ 'sku_masking.import_sku_masking'|trans({},'app') }}</li>
{% endblock breadcrumb %}

{% block main_page_title %}
	<i class="fa fa-file-text"></i> {{ 'sku_masking.import_sku_masking'|trans({},'app') }}
{% endblock main_page_title %}

{% block main_content %}
<nav class="navbar navbar-default top-dropdown">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 inline-radio">
                   {% for key, countryObj in country %}
                     <div class="radio">
                       <label>
                           {% if data.supplier_id != ""%}
                               {%  set parameters = data.params_to_append|merge({'country':countryObj.short_name ,'language' : countryObj['language']|keys|first}) %}
                           {% else %}
                               {%  set parameters = {'country':countryObj.short_name ,'language' : countryObj['language']|keys|first} %}
                           {% endif %}
                           <input type="radio" class="ace ring js-country-radio"  attr-data-href="{{path('officebrain_custom_productbundle_sku_masking_admin_import',parameters)}}" name="form-field-radio" {% if activeCountry == countryObj.short_name %} checked="checked" {% endif %}>
                           <span class="lbl"> {{ countryObj.name }}</span>
                       </label>
                     </div>
                   {% endfor %}
                </div>
            </div>
            <div class="row">
            
                <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <form name="product-page-container" id="js_sku_masking_form" method="post" enctype="multipart/form-data" >
                        <div class="form-group top-title-form select-col search-width">
                   			{% if ob_project_user_setting.user_data.userType=='admin' and (data.INSTANCE_TYPE=='association' or data.INSTANCE_TYPE=='distributor')%}           	
	                            <select class="form-control" name="supplier_id" id="js_supplier_select">
	                                <option value="" {% if(data.supplier_id == "0")%}selected="selected"{%endif %}>{{ 'PRODUCT_LIST.SELECT_SUPPLIER'|trans }}</option>                                
	                                {% for key, supplier_ids in data.supplier_data %}
	                                    <option value="{{ supplier_ids.supplier_id }}" {% if(data.supplier_id == supplier_ids.supplier_id)%}selected="selected"{%endif %}>{{ supplier_ids.firstName }}</option>
	                                {% endfor %}
	                            </select>
                        	{% elseif ob_project_user_setting.user_data.userType=='supplier' or ob_project_user_setting.user_data.userType=='distributor' %}                        		
                        		<input type='hidden' name="supplier_id" id="js_supplier_select" value='{{ ob_project_user_setting.user_data.obCustomerId | replace({'OB':'','ob':''}) }}'>
                            {%  else  %}
                            	<select class="form-control" name="supplier_id" id="js_supplier_select">
                            		<option value="" {% if(data.supplier_id == "0")%}selected="selected"{%endif %}>{{ 'PRODUCT_LIST.SELECT_SUPPLIER'|trans }}</option>
                            	</select>                            
                          	{% endif %}
                          	
{#                           	<span style="font-size: 14px; color:#f00; line-height:24px; vertical-align:middle;">#}
{# 	                          	<a href="images/uploads/media/20161107054841_new_sku_list.xls">{{ 'sku_masking.sample_file'|trans({},'app') }}</a>#}
{#                           	</span>#}
                          	
                        </div>
                        
                        
                        <div class="form-group top-title-form select-col">
                        			<div id="file_uploader_block" style="display:block;" >
			                        	<div style="text-align: left">
											<label id="file" class="file-input-wrap" style="margin: 0px;">
												<span class="admin-custom-btn label-name" href="javascript:void(0);" style="margin: 0px;"><i class="fa fa-upload"></i>
												{{ 'sku_masking.choose_file'|trans({},'app') }}
												<input type="file" id="import_file"  name="import_file" class="form-control js-upload-xls-file" data-route="">
												</span>
												<span id="filename" class="file-name form-control"></span>
											</label>
										</div>
										<div style="text-align: left"><span style="font-size: 14px; color:#f00; line-height:24px; vertical-align:middle;" class="allowed-file">Please upload only .xls files, not .xlsx.</span></div>	
										
	  								</div>
	  					</div>
                        
                        
                        <div class="top-title-form">
                            <input type="button" value="{{ 'product_import_export.import'|trans }}" class="button-secondary js_import_upload_btn" style="visibility: visible;" data-url="{{ path('officebrain_custom_productbundle_sku_masking_admin_import',{'country':activeCountry ,'language' : activeCulture})}}">&nbsp;
                        </div>
                        
                        <div class="top-title-form">
                        	<input type="button" value="{{ 'sku_masking.sample_file'|trans({},'app') }}" class="admin-custom-btn" onclick="location.href='images/uploads/media/20161109005504_new_sku_list.xls'" />
                        </div>

                        <div class="commonUtilityButton" style="display: inline;">&nbsp;

						</div>
                    </form>
                </div>	             
            </div>
        </div>
</nav>
<div class="dashboard-list-block">
    <div class="tab-block">
        
    </div>
</div>
{% block javascripts %}
	<script>
		var js_locale = "{{ app.request.locale }}"
	</script>
	<script src="{{ asset('bundles/officebrainproduct/js/Admin/commonUtilities.js') }}"></script>
{#     <script src="{{ asset('bundles/officebrainproduct/js/Admin/productCommon.js') }}"></script>#}
<script>
$(document).on("click", ".js_import_upload_btn", function (e) {
	e.stopImmediatePropagation();
    if($.trim($("#js_supplier_select").val()) == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_SUPPLIER'));
		return false;
	}

	if($("#import_file").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_IMPORT_FILE'));
		return false;
	}
	else{
		var ext = $('#import_file').val().split('.').pop().toLowerCase();
		if($.inArray(ext, ['xls']) == -1) {
			bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.INVALID_FILE'));
			return false;
		}
	}
    
    var fileObjects= $('.js-upload-xls-file');

    /* upload file only if file has proper extension */
	var formData = new FormData(); 
	var data_url = $(this).data('url');
	
	fileObjects.each(function( index ) {
		formData.append('file'+index, $(this).prop('files')[0]);
    });

	var other_data = $('#js_sku_masking_form').serializeArray();
    $.each(other_data,function(key,input){
    	formData.append(input.name,input.value);
    });
    $('.js_import_upload_btn').attr('disabled', 'disabled');
	showTopAjaxLoading();
	$.ajax({
        url: data_url, 
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        type: 'post',
        dataType: 'json',
        success: function(responseData){
        	hideAjaxLoading();
        	$('.js_import_upload_btn').removeAttr('disabled');
            if(responseData['status'] == "success"){
            	//$('#file_uploader_block').css("display", "none");
            	showSuccessMessage(responseData['success_message']);
            	location.href = location.href;
            }
            else{
            	showErrorMessage(responseData['error_message']);
            }
        }
   });
});
</script>
{% endblock javascripts %}
{% endblock main_content %}