<div class="btn-group pull-right">
    <button class="btn btn-lg  btn-primary btnOptionsSave" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Kaydediyor...">Kaydet</button>
    <button class="btn btn-lg  btn-danger btnOptionsVazgec" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Yükleniyor...">Vazgeç</button>

</div>
<div class="clearfix"></div>
<div class="row well"  style="border-top: 2px solid #27ad5e;">


    <div class="col-sm-1">
        <img class="img-responsive" src="view/image/entegrasyon/bilgi.png"/>
    </div>
    <div class="col-sm-11">
        <h3 style="color:#27ad5e;font-weight: bolder ">Bilgilendirme</h3>
        <p class="" >Ürünüz bir renk seçeneği içeriyorsa seçenek adınız sadece 'Renk' şeklinde girilmelidir. Renk seçeneği her zaman en üstte olmalıdır. Örn: 1. Renk 2. Beden, ürün için seçenek belirleyip kaydettiğinizde ürününüz için otomatik varyantlar oluşturulacaktır. Renk ve beden olarak iki seçenek belirleyeceksiniz, Renk seçeneğine ait değerlerin stok adedi her zaman 0 dan büyük olmalıdır, aksi taktirde tüm varyantların stoğu 0 olacaktır. Beden değerlerini 0 ve 0'dan büyük belirleyebilirsiniz. Varyant stok adedi beden değerine göre belirlenir. </p>

    </div>
</div>

<div class="panel-body">
<form  method="post" enctype="multipart/form-data" id="form-option" class="form-horizontal">

                        <div class="tab-pane active" id="tab-option">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="nav nav-pills nav-stacked" id="option">
                                        {% set option_row = 0 %}
                                        {% for product_option in product_options %}
                                            <li><a href="#tab-option{{ option_row }}" data-toggle="tab"><i class="fa fa-minus-circle" onclick="$('a[href=\'#tab-option{{ option_row }}\']').parent().remove(); $('#tab-option{{ option_row }}').remove(); $('#option a:first').tab('show');"></i> {{ product_option.name }}</a></li>
                                            {% set option_row = option_row + 1 %}
                                        {% endfor %}
                                        <li>
                                            <input type="text" name="option" value="" placeholder="{{ entry_option }}" id="input-option" class="form-control"/>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-sm-10">
                                    <div class="tab-content"> {% set option_row = 0 %}
                                        {% set option_value_row = 0 %}
                                        {% for product_option in product_options %}
                                            <div class="tab-pane" id="tab-option{{ option_row }}">
                                                <input type="hidden" name="product_option[{{ option_row }}][product_option_id]" value="{{ product_option.product_option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][name]" value="{{ product_option.name }}"/> <input type="hidden" name="product_option[{{ option_row }}][option_id]" value="{{ product_option.option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][type]" value="{{ product_option.type }}"/>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-required{{ option_row }}">{{ entry_required }}</label>
                                                    <div class="col-sm-10">
                                                        <select name="product_option[{{ option_row }}][required]" id="input-required{{ option_row }}" class="form-control">


                                                            {% if product_option.required %}


                                                                <option value="1" selected="selected">{{ text_yes }}</option>
                                                                <option value="0">{{ text_no }}</option>


                                                            {% else %}


                                                                <option value="1">{{ text_yes }}</option>
                                                                <option value="0" selected="selected">{{ text_no }}</option>


                                                            {% endif %}


                                                        </select>
                                                    </div>
                                                </div>
                                                {% if product_option.type == 'text' %}
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control"/>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'textarea' %}
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-10">
                                                            <textarea name="product_option[{{ option_row }}][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control">{{ product_option.value }}</textarea>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'file' %}
                                                    <div class="form-group" style="display: none;">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control"/>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'date' %}
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-3">
                                                            <div class="input-group date">
                                                                <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD" id="input-value{{ option_row }}" class="form-control"/> <span class="input-group-btn">
                            <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                            </span></div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'time' %}
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-10">
                                                            <div class="input-group time">
                                                                <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="HH:mm" id="input-value{{ option_row }}" class="form-control"/> <span class="input-group-btn">
                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                            </span></div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'datetime' %}
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                                                        <div class="col-sm-10">
                                                            <div class="input-group datetime">
                                                                <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value{{ option_row }}" class="form-control"/> <span class="input-group-btn">
                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                            </span></div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if product_option.type == 'select' or product_option.type == 'radio' or product_option.type == 'checkbox' or product_option.type == 'image' %}
                                                    <div class="table-responsive">
                                                        <table id="option-value{{ option_row }}" class="table table-striped table-bordered table-hover">
                                                            <thead>
                                                            <tr>
                                                                <td class="text-left">{{ entry_option_value }}</td>
                                                                <td class="text-right">{{ entry_quantity }}</td>
                                                                <td class="text-left">{{ entry_subtract }}</td>
                                                                <td class="text-right">{{ entry_price }}</td>

                                                                <td></td>
                                                            </tr>
                                                            </thead>
                                                            <tbody>

                                                            {% for product_option_value in product_option.product_option_value %}
                                                                <tr id="option-value-row{{ option_value_row }}">
                                                                    <td class="text-left"><select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][option_value_id]" class="form-control">


                                                                            {% if option_values[product_option.option_id] %}

                                                                                {% for option_value in option_values[product_option.option_id] %}

                                                                                    {% if option_value.option_value_id == product_option_value.option_value_id %}


                                                                                        <option value="{{ option_value.option_value_id }}" selected="selected">{{ option_value.name }}</option>


                                                                                    {% else %}


                                                                                        <option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>


                                                                                    {% endif %}
                                                                                {% endfor %}
                                                                            {% endif %}


                                                                        </select> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][product_option_value_id]" value="{{ product_option_value.product_option_value_id }}"/></td>
                                                                    <td class="text-right"><input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][quantity]" value="{{ product_option_value.quantity }}" placeholder="{{ entry_quantity }}" class="form-control"/></td>
                                                                    <td class="text-left"><select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][subtract]" class="form-control">


                                                                            {% if product_option_value.subtract %}


                                                                                <option value="1" selected="selected">{{ text_yes }}</option>
                                                                                <option value="0">{{ text_no }}</option>


                                                                            {% else %}


                                                                                <option value="1">{{ text_yes }}</option>
                                                                                <option value="0" selected="selected">{{ text_no }}</option>


                                                                            {% endif %}


                                                                        </select></td>
                                                                    <td class="text-right"><select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price_prefix]" class="form-control">


                                                                            {% if product_option_value.price_prefix == '+' %}


                                                                                <option value="+" selected="selected">+</option>


                                                                            {% else %}


                                                                                <option value="+">+</option>


                                                                            {% endif %}
                                                                            {% if product_option_value.price_prefix == '-' %}


                                                                                <option value="-" selected="selected">-</option>


                                                                            {% else %}


                                                                                <option value="-">-</option>


                                                                            {% endif %}


                                                                        </select> <input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price]" value="{{ product_option_value.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>

                                                                    <td class="text-right"><button type="button" onclick="$(this).tooltip('destroy');$('#option-value-row{{ option_value_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                                                                </tr>
                                                                {% set option_value_row = option_value_row + 1 %}
                                                            {% endfor %}
                                                            </tbody>

                                                            <tfoot>
                                                            <tr>
                                                                <td colspan="6"></td>
                                                                <td class="text-left"><button type="button" onclick="addOptionValue('{{ option_row }}');" data-toggle="tooltip" title="{{ button_option_value_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                                                            </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                    <select id="option-values{{ option_row }}" style="display: none;">


                                                        {% if option_values[product_option.option_id] %}
                                                            {% for option_value in option_values[product_option.option_id] %}


                                                                <option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>


                                                            {% endfor %}
                                                        {% endif %}


                                                    </select>
                                                {% endif %} </div>
                                            {% set option_row = option_row + 1 %}
                                        {% endfor %} </div>
                                </div>
                            </div>
                        </div>

                </form>
</div>



    <script type="text/javascript"><!--
        var option_row = {{ option_row }};

        $('input[name=\'option\']').autocomplete({
            'source': function(request, response) {
                $.ajax({
                    url: 'index.php?route=catalog/option/autocomplete&{{ token_link }}&filter_name=' + encodeURIComponent(request),
                    dataType: 'json',
                    success: function(json) {
                        response($.map(json, function(item) {
                            return {
                                category: item['category'],
                                label: item['name'],
                                value: item['option_id'],
                                type: item['type'],
                                option_value: item['option_value']
                            }
                        }));
                    }
                });
            },
            'select': function(item) {
                html = '<div class="tab-pane" id="tab-option' + option_row + '">';
                html += '	<input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
                html += '	<input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
                html += '	<input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
                html += '	<input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';

                html += '	<div class="form-group">';
                html += '	  <label class="col-sm-2 control-label" for="input-required' + option_row + '">{{ entry_required }}</label>';
                html += '	  <div class="col-sm-10"><select name="product_option[' + option_row + '][required]" id="input-required' + option_row + '" class="form-control">';
                html += '	      <option value="1">{{ text_yes }}</option>';
                html += '	      <option value="0">{{ text_no }}</option>';
                html += '	  </select></div>';
                html += '	</div>';

                if (item['type'] == 'text') {
                    html += '	<div class="form-group">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-10"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control" /></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'textarea') {
                    html += '	<div class="form-group">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-10"><textarea name="product_option[' + option_row + '][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control"></textarea></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'file') {
                    html += '	<div class="form-group" style="display: none;">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-10"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control" /></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'date') {
                    html += '	<div class="form-group">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-3"><div class="input-group date"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'time') {
                    html += '	<div class="form-group">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-10"><div class="input-group time"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="HH:mm" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'datetime') {
                    html += '	<div class="form-group">';
                    html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
                    html += '	  <div class="col-sm-10"><div class="input-group datetime"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
                    html += '	</div>';
                }

                if (item['type'] == 'select' || item['type'] == 'radio' || item['type'] == 'checkbox' || item['type'] == 'image') {
                    html += '<div class="table-responsive">';
                    html += '  <table id="option-value' + option_row + '" class="table table-striped table-bordered table-hover">';
                    html += '  	 <thead>';
                    html += '      <tr>';
                    html += '        <td class="text-left">{{ entry_option_value }}</td>';
                    html += '        <td class="text-right">{{ entry_quantity }}</td>';
                    html += '        <td class="text-left">{{ entry_subtract }}</td>';
                    html += '        <td class="text-right">{{ entry_price }}</td>';
                    html += '        <td class="text-right">{{ entry_option_points }}</td>';
                    html += '        <td class="text-right">{{ entry_weight }}</td>';
                    html += '        <td></td>';
                    html += '      </tr>';
                    html += '  	 </thead>';
                    html += '  	 <tbody>';
                    html += '    </tbody>';
                    html += '    <tfoot>';
                    html += '      <tr>';
                    html += '        <td colspan="6"></td>';
                    html += '        <td class="text-left"><button type="button" onclick="addOptionValue(' + option_row + ');" data-toggle="tooltip" title="{{ button_option_value_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
                    html += '      </tr>';
                    html += '    </tfoot>';
                    html += '  </table>';
                    html += '</div>';

                    html += '  <select id="option-values' + option_row + '" style="display: none;">';

                    for (i = 0; i < item['option_value'].length; i++) {
                        html += '  <option value="' + item['option_value'][i]['option_value_id'] + '">' + item['option_value'][i]['name'] + '</option>';
                    }

                    html += '  </select>';
                    html += '</div>';
                }

                $('#tab-option .tab-content').append(html);

                $('#option > li:last-child').before('<li><a href="#tab-option' + option_row + '" data-toggle="tab"><i class="fa fa-minus-circle" onclick=" $(\'#option a:first\').tab(\'show\');$(\'a[href=\\\'#tab-option' + option_row + '\\\']\').parent().remove(); $(\'#tab-option' + option_row + '\').remove();"></i>' + item['label'] + '</li>');

                $('#option a[href=\'#tab-option' + option_row + '\']').tab('show');

                $('[data-toggle=\'tooltip\']').tooltip({
                    container: 'body',
                    html: true
                });

                $('.date').datetimepicker({
                    language: '{{ datepicker }}',
                    pickTime: false
                });

                $('.time').datetimepicker({
                    language: '{{ datepicker }}',
                    pickDate: false
                });

                $('.datetime').datetimepicker({
                    language: '{{ datepicker }}',
                    pickDate: true,
                    pickTime: true
                });

                option_row++;
            }
        });
        //--></script>
    <script type="text/javascript"><!--
        var option_value_row = {{ option_value_row }};

        function addOptionValue(option_row) {
            html = '<tr id="option-value-row' + option_value_row + '">';
            html += '  <td class="text-left"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][option_value_id]" class="form-control">';
            html += $('#option-values' + option_row).html();
            html += '  </select><input type="hidden" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][product_option_value_id]" value="" /></td>';
            html += '  <td class="text-right"><input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][quantity]" value="" placeholder="{{ entry_quantity }}" class="form-control" /></td>';
            html += '  <td class="text-left"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][subtract]" class="form-control">';
            html += '    <option value="1">{{ text_yes }}</option>';
            html += '    <option value="0">{{ text_no }}</option>';
            html += '  </select></td>';
            html += '  <td class="text-right"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][price_prefix]" class="form-control">';
            html += '    <option value="+">+</option>';
            html += '    <option value="-">-</option>';
            html += '  </select>';
            html += '  <input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][price]" value="" placeholder="{{ entry_price }}" class="form-control" /></td>';

            html += '  <td class="text-left"><button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" rel="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
            html += '</tr>';

            $('#option-value' + option_row + ' tbody').append(html);
            $('[rel=tooltip]').tooltip();

            option_value_row++;
        }
        $('.topgroup').hide();


        //--></script>

    <script type="text/javascript"><!--
        $('#language a:first').tab('show');
        $('#option a:first').tab('show');
        //--></script>


                <script>

                    $('.btnOptionsVazgec').on('click',function (){
                        $('.btnOptionsVazgec').button('loading');
                        $('#variant_contaniner').empty();

                        $('#variant_contaniner').load('index.php?route=entegrasyon/product/variant_list&action=&product_id={{ product_id }}&{{ token_link }}',function () {
                            $('.btnOptionsVazgec').button('reset');
                            $('.topgroup').show();
                        });


                    });

                    $('.btnOptionsSave').on('click',function (){

                        var data=$('#form-option').serializeArray();

                        $('.btnOptionsSave').button('loading');
                        $.post('index.php?route=entegrasyon/product/update_option&product_id={{ product_id }}&{{ token_link }}',data,function (json){


                            $.toast({
                                heading: 'Başarılı',
                                text: 'Ürün Seçenekleri Başarılıyla Güncellendi',
                                position: 'top-right',
                                loader: true,
                                allowToastClose: false,
                                showHideTransition: 'slide',
                                icon: 'success',
                                beforeHide: function () {
                                    $('.btnOptionsSave').button('reset');
                                    $('.topgroup').show('slow');
                                    $('#variant_contaniner').empty();

                                    $('#variant_contaniner').load('index.php?route=entegrasyon/product/variant_list&action=&product_id={{ product_id }}&{{ token_link }}');


                                }

                            });




                        },'JSON');

                    })

                </script>

</div>
