{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}
{% block breadcrumb %}
  <li>{{ 'attribute.swatches.title'|trans }}</li>
{% endblock breadcrumb %}
{% block main_page_title %}<h1><i class="fa fa-university"></i> {{ 'attribute.swatches.list'|trans }}</h1>{% endblock main_page_title %}
{% block header_css %}
	{{ parent() }}
	<link rel='stylesheet' href="{{ asset('bundles/officebrainproduct/css/Admin/brand_style.css') }}"></link>
	<style>.ui-autocomplete{z-index: 9999;}</style>
	<style>
		.ui-autocomplete-loading {
			background: white url("{{ asset('images/ui-anim_basic_16x16.gif') }}") right center no-repeat !important;
		}
		.swatches_img{ margin: 0 auto; }
	</style>
{% endblock header_css %}
{% block main_content %}
<nav class="navbar navbar-default top-dropdown">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8 col-md-12 col-xs-12 col-sm-12">
                <div class="top-title-form">
                	<form name="search_attribute_form" id="search_brand_form" action="{{path('officebrain_bundle_swatches_list',{'language' : activeCulture})}}">
                 		<div class="form-group top-title-form">
                 			<div class="input-append">
                 				<select name="search_by" class="form-control">
                 					<option value="attributeName" {% if(search_by is defined and search_by == 'attributeName' )%} {{ 'selected=selected' }} {% endif %}>Name</option>
                 					<option value="pmsId" {% if(search_by is defined and search_by == 'pmsId' ) %} {{ 'selected=selected' }} {% endif %}>Id</option>
                 				</select>
                 			</div>
                 		</div>
                 		<div class="top-title-form search-width">
                    		<div class="row">
                        		<div class="col-lg-12 col-sm-12 col-md-12">
                            		<input type="text" id="search_query" name="search_query" value="{{ search_query }}">
                            		<i class="fa-search fa search-btn"></i>
                        		</div>
                    		</div>
                		</div>
                		<div class="top-title-form">
                    		<input type="submit" class="button-secondary" id="js_search_brand_button" value="{{ 'product.brand.SEARCH'|trans }}">
                    		{% if search_query != "" %}&nbsp;<input type="button" onClick="location.href = '{{path('officebrain_bundle_swatches_list',{'language' : activeCulture})}}'" class="button-secondary" value="{{ 'product.brand.BACK_TO_LIST'|trans }}">{% endif %}
                    		<input type="button" class="button-secondary" id="js_swatches_export" value="{{ 'attribute.swatches.export'|trans }}">
                		</div>
					</form>
				</div>
            </div>
        </div>
    </div>
</nav>
<div class="dashboard-list-block brand-block">
        <div class="tab-block">
            <ul id="myTab1" class="nav nav-tabs">
                {% for key,culture in language %}
                     <li class="{% if key == activeCulture %}active{% endif %}">
                        <a href="{{ path('officebrain_bundle_swatches_list',params_to_append|merge({"_locale" : app.request.locale,"language" : key})) }}" onClick="javascript:switchTabContent('{{path('officebrain_bundle_swatches_list',{"_locale" : app.request.locale })}}','{{ culture.id }}');" >{{ culture.name }}</a>
                    </li>
                {% endfor %}
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="culture{{ activeCulture }}">
                    <div class="table-block table-content-res-block">
                        <div class="table-responsive">  
                        {% if pagination.items is defined and pagination.items|length > 0 %}
                        <form enctype="multipart/form-data" action="" method="POST">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                    <th width="15%">{{ 'attribute.swatches.id'|trans }}</th>
                                        <th width="55%">{{ 'attribute.swatches.name'|trans }}</th>
                                        <th width="5%">{{ 'attribute.swatches.image'|trans }}</th>
                                        <th class="text-center">{{ 'attribute.swatches.action'|trans }}</th>	                                        
                                    </tr>
                                </thead>
                                <tbody>
                                	{% for item in attribute_data %}
                            			<tr>
                            				<td>{{ item.attribute_value_id }}</td>
                                    		<td>{{ item.attribute_value}}</td>
                                    		<td><div class="text-center"><img id="swatches_img_{{ item.attribute_value_id }}" src="{{ ob_project_product_color_base_url~item.attribute_value_id~'.jpg' }}" class="swatches_img img-responsive"></div></td>
                                    		<td class="text-center">
                                    			<a title="Edit Swatches" class="btn-xs sub-shop-btn js-view-popup" href="javascript:void(0)" data-toggel="tooltip" data-placement="top" data-url="{{path('officebrain_bundle_attribute_rename_swatches',{'swatchId':item.attribute_value_id,'swatchName':item.attribute_value})}}" data-target="#modal-table" ><i class="fa fa-pencil-square-o"></i></a>
                                    			<input type="file" id="swatches_images_change_info" name="ajaxFileUploadSwatches" class="ajaxFileUploadSwatches hide admin-custom-btn pull-right add-attribute-value" data-attribute-id="{{ item.attribute_value_id }}" />
                                    		 	<a id="revert_swatches_image" title="Revert Swatches" class="btn-xs sub-shop-btn add-attribute-value" data-attribute-id="{{ item.attribute_value_id }}" data-toggle="modal" data-active-culture="en"><i class="fa fa-undo"></i></a>
                                 				<a id="swatches_images_change" title="Update Swatches" class="btn-xs sub-shop-btn add-attribute-value" data-attribute-id="{{ item.attribute_value_id }}" data-toggle="modal" data-active-culture="en"><i class="fa fa-refresh"></i></a>
                                    		</td>
                                    	</tr>
                                    {% endfor %}
		                            <tr>
		                            	<td colspan="3">{{ knp_pagination_render(pagination, 'OfficeBrainCoreBundle:Admin:adminPagination.html.twig') }}</td>
		                            	<td class="text-center"	><h5>{{ 'Total Record' }} : {{ total_record }}</h5></td>
		                            </tr>
                                </tbody>
                            </table>
                            </form>		 
                          {% else %}
                            <div>{{ 'product.brand.NO_RECORD_FOUND'|trans }}</div>
                          {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<div class="modal fade model-popup-black banner-copy-block" id="add_value_popup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" id="attribute_value_html">
    </div>
</div>
<!-- Add Modal -->

<!-- End Add Modal -->
{% block javascripts %}
  <script src="{{ asset('pm_plugin/ajax_image_upload.js') }}"></script>
  <script>
  var swatches_id = '';
  var image_upload_action = '';
  var uploadLogoObject = new uploadLogo();
  $(document).on('click','#swatches_images_change',function(e){
	  e.stopImmediatePropagation();
	  showAjaxLoading();
	  $('#swatches_images_change_info').trigger('click');
	  var swatches_id = $(this).data('attribute-id');
	  var image_upload_action = "{{ ob_project_base_url }}"+BASE_URL+"/admin/"+js_locale+"/swatches/change/"+swatches_id;
	  uploadLogoObject.setAction(image_upload_action);
	  $(document).on('change','.ajaxFileUploadSwatches:file',uploadLogoObject.upload);
	  hidePageAjaxLoading();
  });
  
  $(document).on('click','#revert_swatches_image',function(e){
	  e.stopImmediatePropagation();
	  showAjaxLoading();
	  var swatches_id = $(this).data('attribute-id');
	  $.ajax({
			type : 'POST',
			url : Routing.generate ('officebrain_bundle_attribute_swatches_revert', {'_locale' : SITE_CULTURE}),
			data : {swatches_id:swatches_id},
			cache : false,
			async: true,
			success : function(response_data) {
				showSuccessMessage(response_data.success_message);
				var new_src = response_data.image_path + '?' + new Date().getTime();
				
        		$('#swatches_img_'+swatches_id).attr('src',new_src);
        		hidePageAjaxLoading();
			}
		});
  });
  
  $(document).ready(function(){
		$(document).on('click','#js_swatches_export',function(e){
			window.location.href = Routing.generate ('officebrain_bundle_attribute_export_swatches', {'_locale' : SITE_CULTURE});
		});
	});
  
  </script>
  <script>
  	var js_culture = {{ language|json_encode|raw }};
  	var js_locale = "{{ app.request.locale }}";
  	//var swatches_id = $('#swatches_images_change_info').data('attribute-id');
  	//  Code For Image Upload
  	
 	
  	// EO For Image Upload
  </script>
  <script src="{{ asset('bundles/officebraintheme/AdminTheme/js/jquery-ui.1.11.0.min.js') }}"></script>
  <script src="{{ asset('bundles/officebrainproduct/js/Admin/brandCommon.js') }}"></script>
  <script type="text/javascript">
    	showAjaxLoading();
        $(document).ready(function(){
            hidePageAjaxLoading();
        });
    </script>
{% endblock javascripts %}
{% endblock main_content %}