{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}
{% block breadcrumb %}
        <li> {{ 'product_import_export.import_product_data'|trans }}</li>
{% endblock breadcrumb %}
{% block main_page_title %}<h1><i class="fa fa-cube"></i> {{ 'product_import_export.import_product_data'|trans }}</h1>{% endblock main_page_title %}

{% block main_content %}
			<div class="navbar navbar-default top-dropdown">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
					<form id="productImport" class="col-xs-12" method="post" name="product_import" enctype="multipart/form-data">
                        <div class="form-group  select-col">
	                        	<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
	                        		<label>{{ 'PRODUCT_LIST.SUPPLIER'|trans }}</label>	
		                   			{% if ob_project_user_setting.user_data.userType=='admin' and data.INSTANCE_TYPE=='distributor'%}           	
			                            <select class="form-control" name="supplier_id" id="js_supplier_select">
			                                <option value="">{{ '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' %}
		                        		<select class="form-control" name="supplier_id" id="js_supplier_select">
		                            		<option value="{{ ob_project_user_setting.user_data.obCustomerId | replace({'OB':'','ob':''}) }}">{{ ob_project_user_setting.user_data.userCompany.companyName }}</option>
		                            	</select>  
		                        		<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 %}
		                         </div> 	
								<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
									<label>{{ 'product_add_edit.country'|trans }}</label>
	                        		<select class="form-control" name="country_id" id="js_country_select">
		                                <option value="" short_name="">{{ 'product_import_export.SELECT_COUNTRY'|trans }}</option>
		                                {% for key, country in data.country_data %}
		                                    <option value="{{ country.id }}" short_name="{{ country.code }}">{{ country.title }}</option>
		                                {% endfor %}
		                            </select>
                        		</div>
		                        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
		                        <label>{{ 'PRODUCT_LIST.CULTURE'|trans }}</label>
		                        		<select class="form-control" name="culture_id" id="js_culture_select" disabled="disabled">
			                                <option value="" >{{ 'product_import_export.SELECT_CULTURE'|trans }}</option>
{# 			                                {% for key, culture in data.language_data %}#}
{# 			                                    <option value="{{ culture.id }}">{{ culture.name }}</option>#}
{# 			                                {% endfor %}#}
			                            </select>
		                        </div>
		                        
		                        <div class="col-lg-12 text-center">
		                        	<div id="file_uploader_block" style="display:block;" >
			                        	<div style="text-align: left">
			                        		<label class="text-left width-100">Upload File</label>
											<label id="file" class="file-input-wrap" style="margin: 5px 0px 5px 0px;">
												<span class="admin-custom-btn label-name" href="javascript:void(0);"><i class="fa fa-upload"></i>                                            
											        Choose File
												<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 style="width: 50%;height: 35px;position: absolute;margin-left: 139px;z-index: 9999;margin-top: -40px;"></div>
										</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>
											<input type="button" value="{{ 'product_import_export.import'|trans }}" class="button-secondary js_import_upload_btn" style="visibility: visible;" data-url="{{ path('officebrain_product_import')}}">&nbsp;
{# 											<input type="button" value="{{ solr_sync_status_of_supplier_ }} {{ 'product_import_export.product_data_syncing'|trans }}" disabled="disabled" class="button-secondary js_sync_product_data_btn" style="visibility: visible;" data-url="{{ path('officebrain_product_sync_sypplier_product')}}">&nbsp;#}
											<input type="button" value="{{ 'product_import_export.sync_product_data'|trans }}" class="button-secondary js_sync_product_data_btn" style="visibility: visible;" data-url="{{ path('officebrain_product_sync_sypplier_product')}}">&nbsp;
										</div>
									</div>	
		                        </div>
		                        <div class="col-lg-12 text-center" id="import_table">
			                        
			                    </div>    
		                     </div>
		                 </form>
                	</div>
				</div>
				</div>
				</div>
{% block javascripts %}					
<script type="text/javascript">

$('#file_uploader_block').css("display", "none");
var countryData = {{ data.country_array| json_encode |raw}};
var cultureData = {{ data.language_data| json_encode | raw}};

$('#js_supplier_select').change(function(){
	$('#js_country_select').prop('selectedIndex',0);
	$('#js_culture_select').prop('selectedIndex',0);
	$('#filename').text('');
	$('#import_file').val('');
});

$("#js_country_select").change(function () {
	$('#js_culture_select').attr("disabled", "disabled");
    var code = $(this).find(':selected').attr('short_name');
    $('#filename').text('');
	$('#import_file').val('');
    if(code !="" && code.length >0){
        var short_name = [];
	    $.each(countryData[code]['language'], function(key, value) {
	    	short_name.push(key);
	  	});
	    $('#js_culture_select').children('option:not(:first)').remove();
	    $('#js_culture_select').removeAttr("disabled");
	    $.each(cultureData, function(key, value) {
	    	if(jQuery.inArray(key, short_name) !== -1){
				$('<option>').val(value.id).text(value.name).attr("lang_code",key).appendTo('#js_culture_select');
		    }
	  	});
    }
});

$("#js_culture_select").change(function () {
	$('#file_uploader_block').css("display", "none");
	$('#import_table').css("display", "none");
	
	var supplier_id = $('#js_supplier_select').find(':selected').val();
	var country_id = $('#js_country_select').find(':selected').val();
    var culture_id = $('#js_culture_select').find(':selected').val();
    $('#filename').text("");
	$('#import_file').val('');
    
    if(supplier_id>0 && country_id>0 && culture_id>0){
    	showTopAjaxLoading();
	    $.ajax({
			type : 'POST',
			url : Routing.generate ('officebrain_product_check_import_status', {'_locale' : SITE_CULTURE}),
			data : {'supplier_id':supplier_id, 'solr_key_country_id':country_id, 'solr_key_culture_id':culture_id},
			cache : false,
			success : function(response_data) {
				hideAjaxLoading();
				$('#import_table').css("display", "block");
				$('#import_table').html(response_data);
				if($('#import_status').val() == 0){
					$('#file_uploader_block').css("display", "block");
				}
				$('.js_sync_product_data_btn').attr('value', 'Checking Status...');
				$('.js_sync_product_data_btn').attr('disabled', 'disabled');
				$('.js_import_upload_btn').attr('disabled', 'disabled');
				updateSyncProductDataButton();
			}
		});
    }
});
$(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($("#js_country_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_COUNTRY'));
		return false;
	}

	if($("#js_culture_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_CULTURE'));
		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 = $('#productImport').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();
            if(responseData['status'] == "success"){
            	$('#file_uploader_block').css("display", "none");
            	$('.js_import_upload_btn').removeAttr('disabled');
            	showSuccessMessage(responseData['success_message']);
            }
            else{
            	$('.js_import_upload_btn').removeAttr('disabled');
            	showErrorMessage(responseData['error_message']);
            }
        }
   });
});

$(document).on("click", ".js_sync_product_data_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($("#js_country_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_COUNTRY'));
		return false;
	}

	if($("#js_culture_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_CULTURE'));
		return false;
	}

    /* upload file only if file has proper extension */
	var formData = new FormData(); 
	var data_url = $(this).data('url');
	

	var other_data = $('#productImport').serializeArray();
    $.each(other_data,function(key,input){
    	formData.append(input.name,input.value);
    });
    $('.js_sync_product_data_btn').attr('disabled', 'disabled');
    $('.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();
            if(responseData['status'] == "success"){
            	$('.js_sync_product_data_btn').removeAttr('disabled');
            	showSuccessMessage(responseData['success_message']);


            	$('.js_sync_product_data_btn').attr('disabled', 'disabled');
            	$('.js_sync_product_data_btn').attr('value', 'sync is starting..');
            	setTimeout(function(){ updateSyncProductDataButton() }, 10000);
            }
            else{
            	$('.js_sync_product_data_btn').removeAttr('disabled');
            	showErrorMessage(responseData['error_message']);
            }
        }
   });
});

function updateSyncProductDataButton()
{
	
	if($("#js_country_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_COUNTRY'));
		return false;
	}

	if($("#js_culture_select").val() == ''){
		bootbox.alert( Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PLEASE_SELECT_CULTURE'));
		return false;
	}

	var supplier_id = $('#js_supplier_select').find(':selected').val();
	var country_id = $('#js_country_select').find(':selected').val();
	var country_text = $('#js_country_select').find(':selected').text();
    var culture_id = $('#js_culture_select').find(':selected').val();
    var culture_text = $('#js_culture_select').find(':selected').text();
	var updateSyncProductDataURL = '{{ path('officebrain_product_solr_sync_status_of_supplier_culture')}}';
	//showTopAjaxLoading();
	$.ajax({
        url: updateSyncProductDataURL, 
        data : {'supplier_id':supplier_id, 'solr_key_country_id':country_id, 'solr_key_culture_id':culture_id},
        cache: false,
        contentType: 'json',
        dataType: 'json',
        success: function(responseData){
        	hideAjaxLoading();

        	if(responseData.hasOwnProperty('solr_sync_status_of_supplier_culture'))
            {
                if(responseData.solr_sync_status_of_supplier_culture > 0)
                {
                	$('.js_sync_product_data_btn').attr('disabled', 'disabled');
                	$('.js_import_upload_btn').attr('disabled', 'disabled');
//                 	$('.js_sync_product_data_btn').attr('value', responseData.solr_sync_status_of_supplier_culture + ' ' + (Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PRODUCT_DATA_SYNCING')) + ' For ' + country_text + ' ' + culture_text);
					$('.js_sync_product_data_btn').attr('value', responseData.solr_sync_status_of_supplier_culture + ' ' + (Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.PRODUCT_DATA_SYNCING')));
                    setTimeout(function(){ updateSyncProductDataButton() }, 10000);
                }
                else
                {
                	$('.js_sync_product_data_btn').removeAttr('disabled');
                	$('.js_import_upload_btn').removeAttr('disabled');
//                 	$('.js_sync_product_data_btn').attr('value', Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.SYNC_PRODUCT_DATA') + ' For ' + country_text + ' ' + culture_text);
                	$('.js_sync_product_data_btn').attr('value', Translator.trans('ADMIN_PRODUCT_IMPORT_EXPORT.SYNC_PRODUCT_DATA'));
                }
            }
        }
   });
}

</script>
{% endblock javascripts %}

{% endblock main_content %}