<div id="search-by-category">
    <div class="search-container">
        <div class="categories-container">
            <div class="hover-cate">
            <p><span class="cate-selected" data-value="0">{{ text_category }}</span></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>
		<div class="search-box input-group">
			<input type="text" name="search" id="text-search" value="" placeholder="{{ text_search }}" class=""  />
			<div id="sp-btn-search" class="input-group-btn">
				<button type="button" id="btn-search-category" class="btn"><i class="fa fa-search"></i></button>
			</div>
        </div>
    </div>
    <div class="search-ajax">
        <div class="ajax-loader-container" style="display: none;">
            <img src="{{ ocsearchcategory_loader_img }}" class="ajax-load-img" alt="loader" />
        </div>
        <div class="ajax-result-container">
            <!-- Content of search results -->
        </div>
    </div>
    <input type="hidden" id="ajax-search-enable" value="{{ ocsearchcategory_ajax_enabled }}" />
</div>

<script type="text/javascript">
    $(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" ).slideToggle("slow");
            $( ".cate-items" ).addClass("sblock");
        });
        
        $('.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();
        });

         $('#text-search').keypress(function(e){
            if(e.which == 13){//Enter key pressed
                $('#btn-search-category').click();//Trigger search button click event
            }
        }); 

        $('#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>