<div class="btn-group pull-right SearchDD">
  <button aria-label="Arama Düğmesi" type="button" class="btn btn-inverse btn-block btn-lg SearchDD__RootButton" onclick="$('#search').toggleClass ('SearchDD__InputGroup--Open');"><img alt="Arama İkonu" src="/catalog/view/theme/deercase/image/search.svg" /></button>
<div id="search" class="input-group SearchDD__InputGroup">
    <form class="search d-table" action="/search">
      <input type="hidden" name="route" value="product/search" />
      <input type="text" name="search" value="" placeholder="<?php echo $text_search; ?>" class="form-control input-lg" aria-label="Arama metni" />
      <select name="category_id" class="SearchDD__Select">
        <option selected="selected"><?= $text_category; ?></option>
        <? $index = 1; ?>
        <? foreach ($categories as $category): ?>
            <option value="<?= $index++; ?>">
                <?= str_replace (' Telefon Kılıfı', '', $category ['name']); ?>
            </option>
        <? endforeach; ?>
      </select>
      <span class="input-group-btn SearchDD__ButtonGroup">
        <button type="button" class="btn btn-default btn-lg SearchDD__Button"><?= $text_search; ?></button>
      </span>
    </form>
  </div>
</div>
<style>
#search .input-lg {
    height: 30px !important;
}
</style>
<script>
	//kategori data search
    //var Categories = ''; //<?php // json_encode ($categories) ?>;
    jQuery(function ($) {
        $('.SearchDD__Select').niceSelect();
        $('.SearchDD__Select').change(function () {
            var CategoryID = $(this).val();
            if (0 < parseInt(CategoryID) && parseInt(CategoryID) < 100) {
                $('.SearchDD__Select').niceSelect('destroy').empty();
                $('.SearchDD__Select').append('<option value="0"><?= $text_category; ?></option>');
                $.each(Categories [(CategoryID - 1)].children, function (Index, Category) {
                    $('.SearchDD__Select').append('<option value=' + Category ['category_id'] + '>' + Category ['name'].replace(' Telefon Kılıfı', '') + '</option>');
                    if (Categories [(CategoryID - 1)].children.length == (Index + 1)) {
                        $('.SearchDD__Select').niceSelect();
                        setTimeout(function () {
                            $('.SearchDD__Select').click();
                        }, 250);
                    }
                });
            } else if (CategoryID == 0) {
                $('.SearchDD__Select').niceSelect('destroy').empty();
                $('.SearchDD__Select').append('<option value="0"><?= $text_category; ?></option>');
                $.each(Categories, function (Index, Category) {
                    $('.SearchDD__Select').append('<option value=' + (Index + 1) + '>' + Category ['name'].replace(' Telefon Kılıfı', '') + '</option>');
                    if (Categories.length == (Index + 1)) {
                        $('.SearchDD__Select').niceSelect();
                        setTimeout(function () {
                            $('.SearchDD__Select').click();
                        }, 250);
                    }
                });
            }
        });
        $('.SearchDD__Button').click(function () {
            var CategoryID = parseInt($('.SearchDD__Select').val());
            if (isNaN(CategoryID) || (CategoryID < 100))
                $.sweetModal({
                    content: 'Lütfen bir kategori seçiniz.',
                    icon: $.sweetModal.ICON_WARNING,
                    timeout: 2000
                });
            else $('form.search').submit();
        });
    });
    function selectSearchDeviceModel(brand, category_id) {
        $.each(Categories, function (Index, Category) {
            if (brand+' Telefon Kılıfı' == Category['name']){
                $('.SearchDD__Select').niceSelect('destroy').empty();
                $('.SearchDD__Select').append('<option value="0"><?= $text_category; ?></option>');
                $.each(Category.children, function (Index, Category) {
                    var selectedItem = '';
                    if (Category ['category_id'] == category_id) {
                        selectedItem = ' selected ';
                    }
                    $('.SearchDD__Select').append('<option value=' + Category ['category_id'] + selectedItem + '>' + Category ['name'].replace(' Telefon Kılıfı', '') + '</option>');
                });
                $('.SearchDD__Select').niceSelect();
                setTimeout(function () {
                    $('.SearchDD__Select').click();
                }, 250);
            }
        });

    }
</script>