<div id="search-by-category">
    <div class="dropdown-toggle search-button" data-toggle="dropdown"></div>
	<div class="dropdown-menu search-content" >
		<div class="search-container">
			<div class="categories-container">
				<div class="hover-cate">
					<p><span class="cate-selected" data-value="0">{{ text_category }}</span><i class="ion-ios-arrow-down"></i></p>
					<ul class="cate-items">
						<li class="item-cate" data-value="0">{{ text_category }}</li>
						{% for category_1 in categories %}
							{% if category_1.category_id == category_id %}
								<li data-value="{{ category_1.category_id }}" class="selected item-cate">{{ category_1.name }}</li>
							{% else %}
								<li data-value="{{ category_1.category_id }}" class="item-cate">{{ category_1.name }}</li>
							{% endif %}
							{% for category_2 in category_1.children %}
								{% if category_2.category_id == category_id %}
									<li data-value="{{ category_2.category_id }}" class="selected item-cate f1">{{ category_2.name }}</li>
								{% else %}
									<li data-value="{{ category_2.category_id }}" class="item-cate f1">{{ category_2.name }}</li>
								{% endif %}
								{% for category_3 in category_2.children %}
									{% if category_3.category_id == category_id %}
										<li data-value="{{ category_3.category_id }}" class="selected item-cate f2">{{ category_3.name }}</li>
									{% else %}
										<li data-value="{{ category_3.category_id }}" class="item-cate f2">{{ category_3.name }}</li>
									{% endif %}
								{% endfor %}
							{% endfor %}
						{% endfor %}
					</ul>
				</div>
			</div>
			<input type="text" name="search" id="text-search" value="" placeholder="{{ text_placeholder_search }}" class=""  />
			<div id="sp-btn-search" class="">
				<button type="button" id="btn-search-category" class="btn btn-default btn-lg">
					<span class="hidden-xs">{{ button_search }}</span>
				</button>
			</div>
			<div class="search-ajax">
				<div class="ajax-loader-container" style="display: none;">
					<img src="{{ loader_img }}" alt="search-ajax" class="ajax-load-img" width="30" height="30" />
				</div>
				<div class="ajax-result-container">
					<!-- Content of search results -->
				</div>
			</div>
			<input type="hidden" id="ajax-search-enable" value="{{ ajax_enabled }}" />
		</div>
	
		
	</div>
</div>

<script >
    $(document).ready(function () {
        var flag = false;
        var ajax_search_enable = $('#ajax-search-enable').val();

        var current_cate_value = $('ul.cate-items li.selected').data('value');
        var current_cate_text = $('ul.cate-items li.selected').html();

        $('.cate-selected').attr('data-value', current_cate_value);
        $('.cate-selected').html(current_cate_text);

        $('.hover-cate p').click(function () {
            $( ".cate-items" ).toggle("slow");
        });

        $('.ajax-result-container').hover(
            function() {
                flag = true;
            },
            function() {
                flag = false;
            }
        );

        $('.hover-cate').hover(
            function() {
                flag = true;
            },
            function() {
                flag = false;
            }
        );

        $('#search-by-category').focusout(function() {
            if(flag == true) {
                $('.ajax-result-container').show();
            } else {
                $('.ajax-result-container').hide();
            }
        });

        $('#search-by-category').focusin(function() {
            $('.ajax-result-container').show();
        });

        $('#btn-search-category').click(function () {
            var url = '{{ search_action }}';
            var text_search = $('#text-search').val();
            if(text_search) {
                url += '&search=' + encodeURIComponent(text_search);
            }

            var category_search = $('.cate-selected').attr("data-value");
            if(category_search) {
                url += '&category_id=' + encodeURIComponent(category_search);
            }

            location = url;
        });

        if(ajax_search_enable == '1') {
            $('#text-search').keyup(function(e) {
                var text_search = $(this).val();
                var cate_search = $('.cate-selected').attr("data-value");
                if(text_search != null && text_search != '') {
                    ajaxSearch(text_search, cate_search);
                } else {
                    $('.ajax-result-container').html('');
                    $('.ajax-loader-container').hide();
                }
            });

            $('ul.cate-items li.item-cate').click(function() {
                var cate_search = $(this).data('value');
                var text_search = $('#text-search').val();
                $('.cate-selected').attr('data-value', cate_search);
                $('.cate-selected').html($(this).html());
                if(text_search != null && text_search != '') {
                    ajaxSearch(text_search, cate_search);
                } else {
                    $('.ajax-result-container').html('');
                    $('.ajax-loader-container').hide();
                }
                $( ".cate-items" ).hide();
                $('#text-search').focus();
            });
        }

        function ajaxSearch(text_search, cate_search) {
            $.ajax({
                url         : '{{ search_ajax_action }}',
                type        : 'post',
                data        : { text_search : text_search, cate_search : cate_search },
                beforeSend  : function () {
                    $('.ajax-loader-container').show();
                },
                success     : function(json) {
                    if(json['success'] == true) {
                        $('.ajax-result-container').html(json['result_html']);
                        $('.ajax-loader-container').hide();
                    }
                }
            });
        }

    });
</script>