{% assign _hide_mobile = section.settings.hide_mobile %}
{% assign _layout = section.settings.layout %}
{% assign _bg_type = section.settings.bg_type %}
{% assign _bg_color = section.settings.bg_color %}
{% assign _bg_image = section.settings.bg_image %}

{% assign _lazyload = section.settings.lazyload %}
{% if _bg_type == 'image' and _bg_image != blank %}
{% capture bgset %}{{ _bg_image | img_url: '1920x' }}{% endcapture %}
{% endif %}

{% if section.blocks.size > 0 %}
<div id="collection-search-wrapper" class="collection-search-wrapper{% if _layout == 'boxed' %} boxed{% else %} no-padding{% endif %}{% if _hide_mobile %} d-none d-md-block{% endif %}">
	
	<div class="collection-search-inner{% if _lazyload and _bg_type == 'image' %} lazyload{% endif %}" style="{% if _bg_type == 'color' %}background-color: {{ _bg_color }};{% endif %}{% if _lazyload == false and _bg_type == 'image' %}background-image: url({{ _bg_image | img_url: '1920x' }}); background-repeat: no-repeat;{% endif %}{% if _lazyload and _bg_type == 'image' %}background-repeat: no-repeat;{% endif %}"{% if _lazyload and _bg_type == 'image' %} data-bgset="{{ bgset }} 1920w"{% endif %}>

		<div class="collection-search-content text-center">
			<div class="heading-subheading">
				{% assign _heading = section.settings.heading %}
				{% assign _heading_bold = section.settings.heading_bold %}
				{% assign _heading_size = section.settings.heading_size %}
				{% assign _heading_color = section.settings.heading_color %}

				{% assign _subheading = section.settings.subheading %}
				{% assign _subheading_bold = section.settings.subheading_bold %}
				{% assign _subheading_size = section.settings.subheading_size %}
				{% assign _subheading_color = section.settings.subheading_color %}

				{% unless _heading == blank %}<div class="heading{% if _heading_bold %} bold-text{% endif %}">{{ _heading }}</div>{% endunless %}
				{% unless _subheading == blank %}<div class="subheading{% if _subheading_bold %} bold-text{% endif %}">{{ _subheading }}</div>{% endunless %}

				{% unless _heading == blank and _subheading == blank %}
					<style type="text/css">
						{% unless _heading == blank %}
							#collection-search-wrapper .heading{
								font-size: {{ _heading_size }};
								color: {{ _heading_color }};
							}
						{% endunless %}	

						{% unless _subheading == blank %}
							#collection-search-wrapper .subheading{
								font-size: {{ _subheading_size }};
								color: {{ _subheading_color }};
							}
						{% endunless %}	
					</style>
				{% endunless %}	
			</div>

			{% assign _total_selectors = section.settings.total_selectors %}
			{% assign selector_title_1 = section.settings.selector_1 %}
			{% assign selector_title_2 = section.settings.selector_2 %}
			{% assign selector_title_3 = section.settings.selector_3 %}

			<div class="selector-wrapper total-selector-{{ _total_selectors }}">
				<script crossorigin="anonymous" src="{{ 'chosen.jquery.min.js' | asset_url  }}"></script>
				<link href = "{{ 'chosen.min.css' | asset_url }}" rel="stylesheet" type="text/css" media="all">

				{% if _total_selectors == 1 %}
					<select{% unless selector_title_1 == blank %} data-placeholder="{{ selector_title_1 }}"{% endunless %} id="chosen-select-1">
						{% unless selector_title_1 == blank %}<option value="{{ selector_title_1 }}">{{ selector_title_1 }}</option>{% endunless %}
						{% for block in section.blocks %}
							{% assign _collection = block.settings.collection %}
							{% assign collection = collections[_collection] %}

							<option value="{{ collection.title }}" data-collection-url="{{ collection.url }}">{{ collection.title }} ({{ collection.all_products_count }})</option>
						{% endfor %}
					</select>

					<script>
						jQuery(document).ready(function(){
							$("#chosen-select-1").chosen().change(function(event, params){
								$('#collection-search-wrapper .selector-wrapper').addClass('pending')
								setTimeout(function(){
									$('#chosen-select-1 option').each(function(index, item){
										if(index != 0) {
											let optionVal = $(this).val();
											if(optionVal == params.selected) {
												let colUrl = $(this).data('collection-url');
												$('#search-collection').attr('href', colUrl)
												document.getElementById('search-collection').disabled = false;
											}
											$('#collection-search-wrapper .selector-wrapper').removeClass('pending')
										} else {
											$('#search-collection').attr('href', 'javascript:;');
											$('#collection-search-wrapper .selector-wrapper').removeClass('pending')
										}	
									})
								},1000)
							})
						})
					</script>

				{% elsif _total_selectors == 2 %}
					<select{% unless selector_title_1 == blank %} data-placeholder="{{ selector_title_1 }}"{% endunless %} id="chosen-select-1">
						{% unless selector_title_1 == blank %}<option value="{{ selector_title_1 }}">{{ selector_title_1 }}</option>{% endunless %}
						{% for block in section.blocks %}
							{% assign _collection = block.settings.collection %}
							{% assign collection = collections[_collection] %}
							{% assign lv1_tags = block.settings.filter_tags_1 %}

							<option value="{{ collection.title }}" data-collection-url="{{ collection.url }}"{% unless lv1_tags == blank %} data-tags="{% for t in collection.all_tags %}{% assign lv1_tagsArray = lv1_tags | split: ';' %}{% if lv1_tagsArray contains t %}{{t}}{% if forloop.last != true %},{% endif %}{% endif %}{% endfor %}" data-count-tags="{% for t in collection.all_tags %}{% assign lv1_tagsArray = lv1_tags | split: ';' %}{% assign tagCount = 0 %}{% if lv1_tagsArray contains t %}{% for product in collection.products %}{% for pt in product.tags %}{% if t == pt %}{% assign tagCount = tagCount | plus: 1 %}{% endif %}{% endfor %}{% endfor %}{% endif %}{% if tagCount > 0 %}{{tagCount}}{% if forloop.last != true %},{% endif %}{% endif %}{% endfor %}"{% endunless %}>
								{{ collection.title }} ({{ collection.all_products_count }})
							</option>
						{% endfor %}
					</select>	

					<select{% unless selector_title_2 == blank %} data-placeholder="{{ selector_title_2 }}"{% endunless %} id="chosen-select-2" disabled="true">
						{% unless selector_title_2 == blank %}<option value="{{ selector_title_2 }}">{{ selector_title_2 }}</option>{% endunless %}
					</select>	

					<script>
						jQuery(document).ready(function(){
							let _selector_title_2 = '{{ selector_title_2 }}';
							AT_Main.totalFilter_2(_selector_title_2)
						})
					</script>	

				{% else %}	
					<select{% unless selector_title_1 == blank %} data-placeholder="{{ selector_title_1 }}"{% endunless %} id="chosen-select-1" class="chosen-select">
						{% unless selector_title_1 == blank %}<option value="{{ selector_title_1 }}">{{ selector_title_1 }}</option>{% endunless %}
						{% for block in section.blocks %}
							{% assign _collection = block.settings.collection %}
							{% assign collection = collections[_collection] %}
							{% assign lv1_tags = block.settings.filter_tags_1 %}
							{% assign lv2_tags = block.settings.filter_tags_2 %}

							<option value="{{ collection.title }}" data-collection-url="{{ collection.url }}"{% unless lv1_tags == blank %} data-tags="{% for t in collection.all_tags %}{% assign lv1_tagsArray = lv1_tags | split: ';' %}{% if lv1_tagsArray contains t %}{{t}}{% if forloop.last != true %},{% endif %}{% endif %}{% endfor %}" data-count-tags="{% for t in collection.all_tags %}{% assign lv1_tagsArray = lv1_tags | split: ';' %}{% assign tagCount = 0 %}{% if lv1_tagsArray contains t %}{% for product in collection.products %}{% for pt in product.tags %}{% if t == pt %}{% assign tagCount = tagCount | plus: 1 %}{% endif %}{% endfor %}{% endfor %}{% endif %}{% if tagCount > 0 %}{{tagCount}}{% if forloop.last != true %},{% endif %}{% endif %}{% endfor %}"{% endunless %}{% unless lv2_tags == blank %} data-tags-2="{{ lv2_tags }}"{% endunless %}>
								{{ collection.title }} ({{ collection.all_products_count }})
							</option>
						{% endfor %}
					</select>

					<select{% unless selector_title_2 == blank %} data-placeholder="{{ selector_title_2 }}"{% endunless %} id="chosen-select-2" class="chosen-select" disabled="true">
						{% unless selector_title_2 == blank %}<option value="{{ selector_title_2 }}">{{ selector_title_2 }}</option>{% endunless %}
					</select>	

					<select{% unless selector_title_3 == blank %} data-placeholder="{{ selector_title_3 }}"{% endunless %} id="chosen-select-3" class="chosen-select" disabled="true">
						{% unless selector_title_3 == blank %}<option value="{{ selector_title_3 }}">{{ selector_title_3 }}</option>{% endunless %}
					</select>	

					<script>
						jQuery(document).ready(function(){
							let _selector_title_2 = '{{ selector_title_2 }}';
							let _selector_title_3 = '{{ selector_title_3 }}';

							AT_Main.chosenSelect_1(_selector_title_2, _selector_title_3);
							AT_Main.chosenSelect_2(_selector_title_3);

							$("#chosen-select-3").chosen().change(function(event, params){
								$('#collection-search-wrapper .selector-wrapper').addClass('pending')
								setTimeout(function(){
									$('#chosen-select-3 option').each(function(index, item){
										if (index != 0) {
											let optionVal = $(this).val();
											if(optionVal == params.selected) {
												let colUrl = $(this).data('collection-url');
												$('#search-collection').attr('href', colUrl)
												$('#collection-search-wrapper .selector-wrapper').removeClass('pending')
											}
										} else {
											let defaultUrl = $('#search-collection').attr('href');
											let searchColUrlArray = defaultUrl.split('+');
											$('#search-collection').attr('href', '' + searchColUrlArray[0]);	
											$('#collection-search-wrapper .selector-wrapper').removeClass('pending')
										}
									})
								},1000)
							});

							AT_Main.resetFilter(_selector_title_2, _selector_title_3)
						})
					</script>	

				{% endif %}

				<div class="button-wrapper">
					<a href="javascript:;" class="btn-1 btn search-collection" id="search-collection" title="{{section.settings.btn_search}}"><i class="icon-search"></i><span>{{section.settings.btn_search}}</span></a>
					<button title={{section.settings.btn_reset}} id="reset-filter" class="reset-filter" style="display: none;">{{section.settings.btn_reset}}</button>	
				</div>
			</div>
		</div>
		
	</div>
	
</div>

{% endif %}


{% schema %}
{
  "name": "Collection Filter",
  "settings": [
	  	{
	  		"type": "paragraph",
	      	"content": "Created by 'Collection Filter' section."
	  	},
	  	{
	  		"type": "paragraph",
	      	"content": "WARNING: This section is unique, meaning it won't work if it is created more than once."
	  	},
	  	{
	      "type": "checkbox",
	      "id": "hide_mobile",
	      "label": "Visibility: hide for mobile"
	    },
	    {
		    "type": "select",
		    "id": "layout",
		    "label": "Section Layout Mode",
		    "default": "full",
		    "options": [
		        {
		          	"value": "boxed",
		          	"label": "Boxed"
		        },
		        {
		          	"value": "full",
		          	"label": "Wide"
		        }
		    ]
	    },
	    {
	    	"type":"header",
	    	"content":"Background"
	    },
	    {
		    "type": "select",
		    "id":"bg_type",
		    "label":"Background type",
		    "options":[
		    	{"value":"color","label":"Color"},
		    	{"value":"image","label":"Image"}
		    ],
		    "default":"image"
	    },
	    {
	    	"type":"checkbox",
	    	"id":"lazyload",
	    	"label":"Enable lazyload",
	    	"default":true
	    },
	    {
	    	"type":"color",
	    	"id":"bg_color",
	    	"label":"Background color"
	    },
	    {
	    	"type":"image_picker",
	    	"id":"bg_image",
	    	"label":"Background image"
	    },
	    {
	    	"type":"header",
	    	"content":"Heading & Subheading"
	    },
	    {
	    	"type":"paragraph",
	    	"content":"----Heading"
	    },
	    {
	    	"type":"text",
	    	"id":"heading",
	    	"label":"Heading",
	    	"default":"SELECT YOUR VEHICLE"
	    },
	    {
          "type": "checkbox",
          "id": "heading_bold",
          "label": "Bold text"
        },
	    {	
	    	"type":"text",
	    	"id":"heading_size",
	    	"label":"Heading size",
	    	"info":"Please use in px, eg: '55px'",
	    	"default":"55px"
	    },
	    {
	    	"type":"color",
	    	"id":"heading_color",
	    	"label":"Heading color",
	    	"default":"#ffffff"
	    },
	    {
	    	"type":"paragraph",
	    	"content":"----Subheading"
	    },
	    {
	    	"type":"text",
	    	"id":"subheading",
	    	"label":"Subheading",
	    	"default":"Over 100,000 Auto and Truck Parts"
	    },
	    {
          "type": "checkbox",
          "id": "subheading_bold",
          "label": "Bold text"
        },
	    {	
	    	"type":"text",
	    	"id":"subheading_size",
	    	"label":"Subheading size",
	    	"info":"Please use in px, eg: '25px'",
	    	"default":"25px"
	    },
	    {
	    	"type":"color",
	    	"id":"subheading_color",
	    	"label":"Subheading color",
	    	"default":"#ffffff"
	    },
	    {
	    	"type":"header",
	    	"content":"Selectors"
	    },
	    {
	    	"type":"range",
	    	"id":"total_selectors",
	    	"label":"Level of filter",
	    	"min":       1,
		    "max":       3,
		    "step":      1,
		    "unit":      "Lvl",
		    "default":   3
	    },
	    {
	    	"type":"text",
	    	"id":"selector_1",
	    	"label":"Filter level 1's title",
	    	"default":"Select Maker"
	    },
	    {
	    	"type":"text",
	    	"id":"selector_2",
	    	"label":"Filter level 2's title",
	    	"default":"Select Model"
	    },
	    {
	    	"type":"text",
	    	"id":"selector_3",
	    	"label":"Filter level 3's title",
	    	"default":"Select Year"
	    },
	    {
	    	"type":"header",
	    	"content":"Buttons"
	    },
	    {
	    	"type":"text",
	    	"id":"btn_search",
	    	"label":"Button filter",
	    	"default":"Search"
	    },
	    {
	    	"type":"text",
	    	"id":"btn_reset",
	    	"label":"Button reset",
	    	"default":"Reset"
	    }
	],
	"blocks": [
		{
    		"type": "collection",
	      	"name": "Collection",
	      	"settings": [
	      		{
	      			"type":"collection",
	      			"id":"collection",
	      			"label":"Choose a collection",
	      			"info":"This collection will be used as filter level 1"
	      		},
	      		{
	      			"type":"text",
	      			"id":"filter_tags_1",
	      			"label":"Product tags for filter - Level 2",
	      			"info":"Input tags you would like to use to filter selected collection. Use semicolon to separate each tags, eg: A3;A5;A6;A8"
	      		},
	      		{
	      			"type":"text",
	      			"id":"filter_tags_2",
	      			"label":"Product tags for filter - Level 3",
	      			"info":"Input tags you would like to use to filter selected collection after level-2 filter. Use semicolon to separate each tags, eg: 2012;2015;2018"
	      		}
	      	]
	    }
	],
	"presets": [
		{
		    "name": "Collection Filter",
		    "category": "Collection",
		    "blocks": [
		        { "type": "collection" },
				{ "type": "collection" },
				{ "type": "collection" }
		    ]
	    }
	]
}
{% endschema %}