<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><i class="fa fa-caret-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_search }}" class=""  />

    </div>
    <div id="sp-btn-search" class="">
        <button type="button" id="btn-search-category" class="btn btn-default btn-lg">
            <span><i class="fa fa-search"></i></span>
        </button>
    </div>
    <div class="search-ajax">
        <div class="ajax-loader-container" style="display: none;">
            <img src="{{ loader_img }}" 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>

<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" ).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>