<div class="row">
    <div class="panel panel-default"  style=" width:100%;border-top: 2px solid #27ad5e;">
            <div class="panel-body">


                {% if attributes['status'] %}

                <form id="myform">

                    {% if attributes.result %}
                        {% for attribute in attributes.result %}

                            {% if attribute.name != 'Seçenek'  %}


                            <div class="col-sm-4 form-group">

                                {% if attribute.required  %}

                                    <label class="required text-danger"
                                           style="font-size: 10px;height: 25px;display: block;vertical-align: bottom;">{{ attribute.name }}</label>

                                {% else %}

                                    <label style="font-size: 10px;height: 25px;display: block;vertical-align: bottom;">{{ attribute.name }} </label>

                                {% endif %}


                                {%  if attribute.values and attribute.values|length > 100  %}

                                    <a href="#"  id="{{ attribute.id }}" style=" z-index: 9999;   height: 40px;
    display: block;" class="eslestir" data-type="typeaheadjs" attr-id="{{ attribute.id }}"
                                       data-pk="{{ product_id }}"  data-value="{% if  attribute.id in s_attr_name %} {% for selectedattr in selected_attributes %} {% if (selectedattr.name==attribute.id) %} {{ selectedattr.value}} {% endif %}{% endfor %} {% endif %}"
                                       data-emptytext="Ürün özellik eşleştir"
                                       data-url="index.php?route=entegrasyon/category/save_attribute_value&code=hb&market_option_id={{ attribute.id }}&category_id={{ category_id }}&{{ token_link }}"
                                       data-title="Lütfen seçenek değeri arayın"></a>
<input type="hidden" name="{{ attribute.id }}" value="{% if  attribute.id in s_attr_name %} {% for selectedattr in selected_attributes %} {% if (selectedattr.name==attribute.id) %} {{ selectedattr.value}} {% endif %}{% endfor %} {% endif %}">

                                {% elseif (attribute.values and attribute.values | length < 100) %}
                                    <select name="{{ attribute.id }}" data-live-search="true" class="select2 form-control attribute">

                                        <option value='0'>==Seçiniz==</option>
                                        {% for value in attribute.values %}

                                            {% if value.value in s_attr %}
                                                <option selected="selected" value='{{ value.value }}'>{{ value.value }}</option>
                                            {% else %}
                                                <option value='{{ value.value }}'>{{ value.value }}</option>

                                            {% endif %}


                                        {% endfor %}

                                    </select>


                                {% else %}

                                {% endif %}


                            </div>
                        {% endif %}
                        {% endfor %}
                    {% else %}

                        <p class="text-success lead text-bolder"> Bu kategoriye ait herhangi bir özellik bulunmamaktadır, ürünlerinizi gönderebilirsiniz.</p>

                    {% endif %}

                </form>

            </div>

            <div class="panel-footer">

                <div class="form-group">

                    <button id="btn-send" class="btn btn-lg btn-primary btn-block">Kaydet</button>


                </div>

            </div>

        </div>
        {% else %}

            <p style="margin-top: 10px " class="text-info">Bu ürünün bulunduğu kategori için herhangi bir zorunlu Hepsiburada özelliği
                bulunmamaktadır. Ürünlerinizi Gönderebilirsiniz.</p>

        {% endif %}
    </div>

<span class="hidden" name="test"  id="attrid" ></span>

<script>


    var attrid=null;
    $('.eslestir').on('click',function (event){

      $('#attrid').text($(this).attr('attr-id'));

      attrid=$(this).attr('attr-id');
    //   alert( $('#attrid').text());



    })

    $('.eslestir').editable({
        mode: 'inline',

        typeahead: {

            limit: 200,
            remote: {
                url:"index.php?route=entegrasyon/category/attribute_search&filter_category_id={{ category_id }}&filter_code=hb&{{ token_link }}",
                replace: function (url, query) {
                    // if ($('#school').val()) {
                    url += "&filter_name="+$('.tt-query').val()+"&filter_attribute_id="+$('#attrid').text();
                    //   }
                    return url;
                }
            },
            displayKey: 'id',
            valueKey: 'name',
            display: function (item) {
                return item.name
            },

        }, success: function (json, newValue) {

            if (!json['status']) {

                $.toast({
                    heading: 'Hata',
                    text: json['message'],
                    position: 'top-right',
                    loader: true,
                    allowToastClose: false,
                    showHideTransition: 'slide',
                    icon: 'warning'
                });


            } else {

                $("input[name="+$('#attrid').text()+"]").val(newValue);

                $.toast({
                    heading: 'Başarılı',
                    text: json['message'],
                    position: 'top-right',
                    loader: true,
                    allowToastClose: false,
                    showHideTransition: 'slide',
                    icon: 'success'
                });

            }

        }
    });



    $.fn.editableform.buttons =
        '<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
        '<i class="fa fa-check"></i>' +
        '</button>' +
        '<button type="button" class="btn btn-danger btn-sm editable-cancel">' +
        '<i class="fa fa-times"></i>' +
        '</button>';


</script>



    <script>

        $('.select2').selectpicker();

        $('#btn-send').on('click',function () {

            var attributes=$('#myform').serializeArray();

            var product_id='{{ product_id}}';

            $.post('index.php?route=entegrasyon/genel/save_setting&code=hb&controller=product&{{ token_link }}&product_id='+product_id,{pk:product_id,name:'selected_attributes',value:attributes},
                function(datas){


                    $.toast({heading: 'Başarılı',text: 'Ürün Özelliği Güncellendi!', position: 'top-right',loader: false,allowToastClose: false,showHideTransition: 'slide',icon: 'success'});
                    $('#btn-send').html("Güncellendi");


                },'JSON');
        })
    </script>