<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' and (attribute.values or attribute.type == 'string') %}


                            <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 (attribute.id~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>


                                {% elseif not attribute.values and attribute.required %}

                                    <!-- <input type="text" value="pamuk" class="form-control" placeholder="{{ attribute.name }} giriniz" > -->

                                    <input name="{{ attribute.id }}" type="text" value="{% if  attribute.id in s_attr_name %}{% for selectedattr in selected_attributes %}{% if (selectedattr.name==attribute.id) %}{{ selectedattr.value }}{% endif %}{% endfor %} {% endif %}" class="form-control" placeholder="{{ attribute.name }} giriniz">


                                    <!-- <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="{{ attribute.name }} Girin"
                                       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 bir değer girin"></a> -->

                                {% 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();

        //  console.log($('#myform').serializeArray());return;


        var product_id = '{{ product_id }}';

        $.post('index.php?route=entegrasyon/genel/save_setting&code=hb&controller={{ controller }}&{{ token_link }}&product_id=' + product_id, {
                pk:'{{  primary_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");

                $('.hb_default_category_attributes_container').empty().hide('slow');


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