{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-product" data-toggle="tooltip" title="{{ button_save }}"
                        class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i
                            class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid"> {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i
                        class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
            </div>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-product"
                      class="form-horizontal">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
                        <li><a href="#tab-data" data-toggle="tab">Ürün Detayları</a></li>
                        <li><a id=btn-variant href="#tab-variant" data-toggle="tab">Ürün Varyanları</a></li>
                        <li><a href="#tab-image" data-toggle="tab">Ürün Fotoğrafları</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-general">

                            <ul class="nav nav-tabs" id="language">
                                {% for language in languages %}
                                    <li><a href="#language{{ language.language_id }}" data-toggle="tab"><img
                                                    src="language/{{ language.code }}/{{ language.code }}.png"
                                                    title="{{ language.name }}"/> {{ language.name }}</a></li>
                                {% endfor %}
                            </ul>


                            <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-manufacturer"><span
                                                data-toggle="tooltip"
                                                title="{{ help_manufacturer }}">{{ entry_manufacturer }}</span></label>
                                    <div class="col-sm-10">
                                        <input type="text" name="manufacturer_name" value="{{ manufacturer_name }}"
                                               placeholder="{{ entry_manufacturer }}" id="input-manufacturer"
                                               class="form-control"/>
                                        <input type="hidden" name="manufacturer_id" value="{{ manufacturer_id }}"/>
                                    </div>
                                </div>
                            </div>


                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-category"><span
                                            data-toggle="tooltip"
                                            title="{{ help_category }}">Kategori</span></label>
                                <div class="col-sm-10">
                                    <input type="text" name="category_name" value="{{ category_name }}"
                                           placeholder="Kategori" id="input-category"
                                           class="form-control"/>
                                    <input type="hidden" name="category_id" value="{{ category_id }}"/>
                                </div>
                            </div>
                        </div>
                            </div>

                            <hr>
                        <div class="tab-content">{% for language in languages %}
                                <div class="tab-pane" id="language{{ language.language_id }}">
                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label"
                                               for="input-name{{ language.language_id }}">{{ entry_name }}</label>
                                        <div class="col-sm-10">
                                            <input type="text"
                                                   name="product_description[{{ language.language_id }}][name]"
                                                   value="{{ product_description[language.language_id] ? product_description[language.language_id].name }}"
                                                   placeholder="{{ entry_name }}"
                                                   id="input-name{{ language.language_id }}" class="form-control"/>
                                            {% if error_name[language.language_id] %}
                                                <div class="text-danger">{{ error_name[language.language_id] }}</div>
                                            {% endif %} </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"
                                               for="input-description{{ language.language_id }}">{{ entry_description }}</label>
                                        <div class="col-sm-10">
                                                <textarea
                                                        name="product_description[{{ language.language_id }}][description]"
                                                        placeholder="{{ entry_description }}"
                                                        id="input-description{{ language.language_id }}"
                                                        data-toggle="summernote" data-lang="{{ summernote }}"
                                                        class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea>
                                        </div>
                                    </div>

                                </div>
                            {% endfor %}


                        </div>
                    </div>
                    <div class="tab-pane" id="tab-data">

                        <div class="form-group required">
                            <label class="col-sm-2 control-label" for="input-model"><span data-toggle="tooltip"
                                                                                            title="">Ana ürün kodu</span></label>
                            <div class="col-sm-10">
                                <input type="text" name="model" value="{{ model }}" placeholder="Ana ürün kodu giriniz"
                                       id="input-model" class="form-control"/>
                                {% if error_model %}
                                    <div class="text-danger">{{ error_model }}</div>
                                {% endif %}</div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-barcode"><span data-toggle="tooltip"
                                                                                            title="{{ help_barcode }}">Barkod Giriniz</span></label>
                            <div class="col-sm-10">
                                <input type="text" name="barcode" value="{{ barcode }}" placeholder="Barkod gir"
                                       id="input-barcode" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-stock_code"><span data-toggle="tooltip"
                                                                                               title="{{ help_stock_code }}">Stok Kodu Giriniz</span></label>
                            <div class="col-sm-10">
                                <input type="text" name="stock_code" value="{{ stock_code }}"
                                       placeholder="Stok Kodu Giriniz" id="input-stock_code" class="form-control"/>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-price">Liste Fiyatı</label>
                            <div class="col-sm-10">
                                <input type="text" name="list_price" value="{{ list_price }}"
                                       placeholder="Liste Fiyatı" id="input-list_price" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input_sale_price">Satış Fiyatı</label>
                            <div class="col-sm-10">
                                <input type="text" name="sale_price" value="{{ sale_price }}"
                                       placeholder="Satış Fiyatı" id="input-sale_price" class="form-control"/>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label"
                                   for="input-tax-class">{{ entry_tax_class }}</label>
                            <div class="col-sm-10">
                                <select name="tax_class_id" id="input-tax-class" class="form-control">
                                    <option value="0">{{ text_none }}</option>


                                    {% for tax_class in tax_classes %}
                                        {% if tax_class.tax_class_id == tax_class_id %}


                                            <option value="{{ tax_class.tax_class_id }}"
                                                    selected="selected">{{ tax_class.title }}</option>


                                        {% else %}


                                            <option value="{{ tax_class.tax_class_id }}">{{ tax_class.title }}</option>


                                        {% endif %}
                                    {% endfor %}


                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-quantity">{{ entry_quantity }}</label>
                            <div class="col-sm-10">
                                <input type="text" name="quantity" value="{{ quantity }}"
                                       placeholder="{{ entry_quantity }}" id="input-quantity" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label" for="input-desi">Desi</label>
                            <div class="col-sm-10">
                                <input type="text" name="desi" value="{{ desi }}" placeholder="Desi giriniz"
                                       id="input-desi" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                            <div class="col-sm-10">
                                <select name="status" id="input-status" class="form-control">

                                    {% if status %}

                                        <option value="1" selected="selected">{{ text_enabled }}</option>
                                        <option value="0">{{ text_disabled }}</option>


                                    {% else %}


                                        <option value="1">{{ text_enabled }}</option>
                                        <option value="0" selected="selected">{{ text_disabled }}</option>


                                    {% endif %}


                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="tab-variant">

                        <div class="variant-alert"></div>

                        <div class="variant_container hidden">
                            <table id="variant" class="table">

                                <tr id="variantth">
                                    <th>Görsel</th>
                                    <th>Barkod</th>
                                    <th>Stok kodu</th>
                                    <th>Adet</th>
                                    <th>Fiyat</th>

                                </tr>

                                <tbody id="variant_tbody">
                                {% set variant_row = 0 %}
                                {% for variant in product_variants %}

                                    <input id="inputv{{ variant_row }}" type="hidden" name="product_variant[{{ variant_row }}][product_variant_id]" value="{{ variant.variant_id }}" >

                                    <tr id="variant-row{{ variant_row }}">

                                        <td>
                                            <img id="{{ variant_row }}" src="{{ variant.imagesrc }}"
                                                 class="img-thumbnail upload-image img-md">
                                            <input id="file{{ variant_row }}" class="hidden" name="imgfile" type="file">
                                            <input id="input{{ variant_row }}" class="form-control hidden"
                                                   name="product_variant[{{ variant_row }}][image]" type="text"
                                                   value="{{ variant.image }}">

                                        </td>


                                        <td><input class="form-control"
                                                   name="product_variant[{{ variant_row }}][barcode]" type="text"
                                                   value="{{ variant.barcode }}"></td>


                                        <td><input class="form-control"
                                                   name="product_variant[{{ variant_row }}][stock_code]" type="text"
                                                   value="{{ variant.stock_code }}"></td>
                                        <td><input class="form-control"
                                                   name="product_variant[{{ variant_row }}][quantity]" type="text"
                                                   value="{{ variant.quantity }}"></td>

                                        <td><input class="form-control"
                                                   name="product_variant[{{ variant_row }}][sale_price]" type="text"
                                                   value="{{ variant.sale_price }}"></td>


                                        {% for variant_option in variant.variant_values %}

                                            <td><input class="form-control typeahead typeahead2"
                                                       id="{{ variant_option.market_attribute_id }}"
                                                       name="product_variant[{{ variant_row }}][option][{{ variant_option.market_attribute_id }}]"
                                                       type="text"
                                                       value="{{ variant_option.name }}"></td>

                                        {% endfor %}


                                        <td class="text-left">
                                            <button type="button" onclick="$('#variant-row{{ variant_row }}').remove();$('#inputv{{ variant_row }}').remove();"
                                                    data-toggle="tooltip" title="{{ button_remove }}"
                                                    class="btn btn-danger"><i class="fa fa-minus-circle"></i></button>
                                        </td>
                                    </tr>
                                    {% set variant_row = variant_row + 1 %}

                                {% endfor %}
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="6"></td>
                                    <td class="text-left">
                                        <button type="button" onclick="addVariant();"
                                                data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Ekleniyor..."
                                                data-toggle="tooltip"
                                                title="Varyant Ekle" class="btn btn-primary btnAddVariant"><i
                                                    class="fa fa-plus-circle"></i> Variant Ekle
                                        </button>
                                    </td>
                                </tr>
                                </tfoot>

                            </table>

                        </div>
                    </div>


                    <div class="tab-pane" id="tab-image">

                        <div class="input-field">
                            <label class="active">Ürün Fotoğrafları</label>
                            <div class="input-images-2" style="padding-top: .5rem;padding-bottom: .5rem;"></div>
                        </div>

                    </div>


            </div>
            </form>

        </div>

    </div>
</div>
</div>


<link href="view/javascript/codemirror/lib/codemirror.css" rel="stylesheet"/>
<link href="view/javascript/codemirror/theme/monokai.css" rel="stylesheet"/>
<script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script>
<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
<link href="view/javascript/summernote/summernote.css" rel="stylesheet"/>
<script type="text/javascript" src="view/javascript/summernote/summernote-image-attributes.js"></script>
<script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>


<script>

    let category_id = 0;
    let thisinput = null;

    $(document).on('click', '.typeahead', function (e) {
        thisinput = $(this);


    });



</script>


<script>

    $(document).on('click', '.upload-image', function (event) {

        var thisimg = $(this);
        var id = $(this).attr('id');
        $('#file' + id).trigger('click');

        $('#file' + id).on('change', function () {

            var file_data = $('#file' + id).prop('files')[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            $.ajax({
                url: 'index.php?route=catalog/product/upload_image&width=100&user_token={{ user_token }}',
                type: "POST",
                data: form_data,
                contentType: false,
                dataType: 'JSON',
                cache: false,
                processData: false,
                success: function (data) {

                    $(thisimg).attr('src', data.src)
                    $('#input' + id).attr('value', data.id)
                    $.toast({
                        heading: 'Varyant Görseli Yüklendi!',
                        text: 'Varyant Görseli Yüklendi!',
                        position: 'top-right',
                        loader: true,
                        allowToastClose: false,
                        showHideTransition: 'slide',
                        icon: 'success'
                    });

                }
            });


        });

    })


</script>


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

    function addVariant() {


        $.post('index.php?route=entegrasyon/category/get_variant_options&user_token={{ user_token }}', {category_id: category_id}, function (json) {

            html = '<tr class="" id="variant-row' + variant_row + '">';

            html += '<td><img id="' + variant_row + '"  src="{{ no_image }}" class="img-thumbnail upload-image img-md"> <input id="file' + variant_row + '" class="hidden" name="imgfile" type="file">  <input id="input' + variant_row + '"  class="form-control hidden" name="product_variant[' + variant_row + '][image]" type="text" value="' + variant_row + '"></td>';
            html += '<td><input class="form-control" name="product_variant[' + variant_row + '][barcode]" placeholder="Barkod giriniz" type="text" value=""></td>';
            html += '<td><input class="form-control" name="product_variant[' + variant_row + '][stock_code]" placeholder="Stok kodu giriniz" type="text" value=""></td>';
            html += '<td><input class="form-control" name="product_variant[' + variant_row + '][quantity]" placeholder="Stok adedi giriniz" type="text" value=""></td>';
            html += '<td><input class="form-control" name="product_variant[' + variant_row + '][sale_price]" placeholder="Fiyat giriniz" type="text" value=""></td>';


            $.each(json, function (key, value) {
                // alert( key + ": " + value );
                html += '<td><input class="form-control typeahead typeahead2" id="' + value['market_attribute_id'] + '" name="product_variant[' + variant_row + '][option][' + value['market_attribute_id'] + ']" type="text" placeholder="' + value['attribute_name'] + ' giriniz" value=""></td>';

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


            $('#variant_tbody').append(html);
            $("#variant-row" + variant_row + "").hide().show('slow');
            variant_row++;


            $(document).find('.typeahead').autocomplete2({
                'source': function (request, response) {

                    console.log(request);
                    // index.php?route=entegrasyon/category/attribute_search&filter_code=ty&user_token={{ user_token }}
                    $.ajax({
                        url: 'index.php?route=entegrasyon/category/attribute_search&filter_code=ty&user_token={{ user_token }}&filter_attribute_id=' + $(thisinput).attr('id') + '&filter_name=' + encodeURIComponent(request),
                        dataType: 'json',
                        success: function (json) {
                            json.unshift({
                                category_id: 0,
                                name: '{{ text_none }}'
                            });

                            response($.map(json, function (item) {
                                return {
                                    label: item['name'],
                                    value: item['attribute_value_id']
                                }
                            }));
                        }
                    });
                },
                'select': function (item) {
                    $(thisinput).val(item['label']);
                    // $('input[name=\'category_id\']').val(item['value']);


                }
            });


        }, 'JSON');


    }


    $('.typeahead').autocomplete2({
        'source': function (request, response) {

            console.log(request);
            // index.php?route=entegrasyon/category/attribute_search&filter_code=ty&user_token={{ user_token }}
            $.ajax({
                url: 'index.php?route=entegrasyon/category/attribute_search&filter_code=ty&user_token={{ user_token }}&filter_attribute_id=' + $(thisinput).attr('id') + '&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        category_id: 0,
                        name: '{{ text_none }}'
                    });

                    response($.map(json, function (item) {
                        return {
                            label: item['name'],
                            value: item['attribute_value_id']
                        }
                    }));
                }
            });
        },
        'select': function (item) {
            $(thisinput).val(item['label']);
            // $('input[name=\'category_id\']').val(item['value']);

        }
    });


    //--></script>


<script>
    $(function () {
        $(".uploaded").sortable({
            update: function (event, ui) {
                getIdsOfImages();
            }//end update
        });
    });

    function getIdsOfImages() {
        var values = [];
        $('.uploaded-image').each(function (index) {

            if (index == 0) {
                $('<p>', {class: 'main-image', text: 'Ana Görsel'}).appendTo(this);
            } else {
                $(this).children('p').remove()

            }


        });

        $('#outputvalues').val(values);
    }
</script>

<script>

    /* let preloaded = <?php

     echo $images

         ?>*/
    let preloaded = {{ product_images }}

        $('.input-images-2').imageUploader({
            preloaded: preloaded,
            imagesInputName: 'photos',
            preloadedInputName: 'product_image',

            token: '{{ user_token }}'

        })

    $('input[name^="photos"]').on('change', function (event) {

        getIdsOfImages();


    })


</script>


<script type="text/javascript"><!--
    // Manufacturer
    $('input[name=\'manufacturer_name\']').autocomplete2({
        'source': function (request, response) {

            console.log(request);

            $.ajax({
                url: 'index.php?route=catalog/manufacturer/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        manufacturer_id: 0,
                        name: '{{ text_none }}'
                    });

                    response($.map(json, function (item) {
                        return {
                            label: item['name'],
                            value: item['manufacturer_id']
                        }
                    }));
                }
            });
        },
        'select': function (item) {
            $('input[name=\'manufacturer_name\']').val(item['label']);
            $('input[name=\'manufacturer_id\']').val(item['value']);
        }
    });


    // Category
    $('input[name=\'category_name\']').autocomplete2({
        'source': function (request, response) {

            console.log(request);

            $.ajax({
                url: 'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        category_id: 0,
                        name: '{{ text_none }}'
                    });

                    response($.map(json, function (item) {
                        return {
                            label: item['name'],
                            value: item['category_id']
                        }
                    }));
                }
            });
        },
        'select': function (item) {
            $('input[name=\'category_name\']').val(item['label']);
            $('input[name=\'category_id\']').val(item['value']);
            if(parseInt('{{ product_id }}')){
                $.post('index.php?route=entegrasyon/category/delete_variants&user_token={{ user_token }}',{product_id:parseInt('{{ product_id }}')},function (json) {
                    $("#variant_tbody").empty();
                },'JSON');
            }
        }
    });


    //Variant
    $(document).find('.typeahead').autocomplete2({
        'source': function (request, response) {

            console.log(request);
            // index.php?route=entegrasyon/category/attribute_search&filter_code=ty&user_token={{ user_token }}
            $.ajax({
                url: 'index.php?route=attribute_search&filter_code=ty&user_token={{ user_token }}&filter_attribute_id=338&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        category_id: 0,
                        name: '{{ text_none }}'
                    });

                    response($.map(json, function (item) {
                        return {
                            label: item['name'],
                            value: item['attribute_value_id']
                        }
                    }));
                }
            });
        },
        'select': function (item) {
            $('input[name=\'category_name\']').val(item['label']);
            $('input[name=\'category_id\']').val(item['value']);
        }
    });


    //--></script>


<script type="text/javascript"><!--
    $('.date').datetimepicker({
        language: '{{ datepicker }}',
        pickTime: false
    });

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

    $('.datetime').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: true,
        pickTime: true
    });
    //--></script>
<script type="text/javascript"><!--
    $('#language a:first').tab('show');
    $('#option a:first').tab('show');
    //--></script></div>

<script>

    $('#btn-variant').on('click', function (event) {
        $('.variant-alert').empty();

        category_id = $("input[name=category_id]").val();
        if (category_id == 0) {
            let html = '<div class="alert alert-danger alert-dismissible fade in"> Varyant Oluşturabilmek için önce Kategori seçmelisiniz</div>';
            $('.variant-alert').prepend(html)

            $('.variant_container').addClass('hidden')


        } else {
            $('.variant_container').removeClass('hidden')

            $('.tempth').remove();

            $.post('index.php?route=entegrasyon/category/get_variant_options&user_token={{ user_token }}', {category_id: category_id}, function (jsons) {
                var html = '';

                $.each(jsons, function (key, value) {
                    // alert( key + ": " + value );
                    html += '<th class="tempth" ">' + value['attribute_name'] + '</th>';

                });
                $('#variantth').append(html);

            });

        }

    })

</script>


{{ footer }}
