<script>
    function getVariants() {
        $.ajax({
            type: "POST",
            url: "ajax_variants.php",
            data: "action=get&productID=" + <?php echo $productID;?> +"&optionID=" + odyshop.optionID,
            async: false,
            success: function (response) {
                response = $.parseJSON(response);
                if (!response.length) {
                    $('#results_info').html('<?php echo t("Δεν βρέθηκαν καταχωρημένες παραλλαγές");?>');
                    showNewEntry();
                }
                if (typeof(response) == "object") {
                    var record, deactivate_class, variants_modifier_type, variants_weight_modifier_type, variants_modifier_typeA, variants_modifier_typeP, variants_weight_modifier_typeA, variants_weight_modifier_typeP, style;
                    var selected = " selected='selected'";
                    var template = $("#tplOptionVariants").html();
                    for (i in response) {
                        record = response[i];
                        deactivate_class = (record.active) ? "" : "_deactivate";
                        variants_modifier_type = record.variants_modifier_type;
                        variants_weight_modifier_type = record.variants_weight_modifier_type;
                        variants_modifier_typeA = (variants_modifier_type == "A") ? selected : "";
                        variants_modifier_typeP = (variants_modifier_type == "P") ? selected : "";
                        variants_weight_modifier_typeA = (variants_weight_modifier_type == "A") ? selected : "";
                        variants_weight_modifier_typeP = (variants_weight_modifier_type == "P") ? selected : "";
                        style = (!record.has_image) ? ' style="display:none"' : '';
                        $('#sort-variants-list').prepend(
                            template.format(
                                record.variantID,
                                record.title,
                                deactivate_class,
                                record.image,
                                record.variants_modifier,
                                variants_modifier_typeA,
                                variants_modifier_typeP,
                                record.variants_weight_modifier,
                                variants_weight_modifier_typeA,
                                variants_weight_modifier_typeP,
                                record.id,
                                record.has_image,
                                style
                            )
                        );
                        if (image) {
                            var variant = $('#sort-variants-list').children(":first").find('a[data-rel="variants_mediabank"]');
                            updateImage(variant, image, record.variantID);
                        }
                        $('#variants_modifier_type_' + record.variantID).on('change', function () {
                            showHideOptionPrices(record.variantID);
                            $('#variants_modifier_' + record.variantID).on('keyup', function (e) {
                                sync_options_prices(record.variantID, 'variants_modifier_');
                            });
                            $('#variants_modifier_with_vat_' + record.variantID).on('keyup', function (e) {
                                sync_options_prices(record.variantID 'variants_modifier_with_vat_');
                            });
                        }).trigger('change');
                    }
                    setOptionsLinksEventListener();
                } else {
                    popup("Error: " + response, "popup-warning"); // ajax error
                }
            }
        });

        if (!$('#variants_list li').length) { // auto fill checkboxes with options for add new form
            $.ajax({
                type: "POST",
                url: "ajax_option_variants.php",
                data: "optionID=" + odyshop.optionID,
                async: false,
                success: function (response) {
                    response = $.parseJSON(response);
                    if (typeof(response) == "object") {
                        var record, disable;
                        for (i in response) {
                            record = response[i];
                            disable = (isAlreadySelected(id)) ? " disabled" : "";
                            $('#variants_list').append('<li class="admin_form_element"><div class="admin_checkbox_wrapper"><input name=option_variants[] data-id="variants_list_item" type="checkbox" value="' + record.id + '" ' + disable + '><p>' + record.title + '</p></div></li>');
                        }
                        setNewEntryProperties();
                    } else { // display errors
                        popup("Error: " + response, "popup-warning");
                    }
                }
            });
        }
    }
</script>
<script type="text/template" id="tplOptionVariants">
    <li class="record_row" id="listItem_{10}" data-hasImage="{11}">
        <div>
            <div style="clear:both"></div>
            <div class="chk_container">
                <input type="checkbox" id="variantID_{0}" name="selectedID[]" value="{10}">
                <a href="javascript:void(0)"
                   data-id="{0}"
                   class="toggler record_on"
                   onClick="doVariantActions(this);">
                </a>
            </div>
            <div class="handle ui-sortable-handle"
                 style="float:left; margin: 5px 8px 0 60px">
                <img src="images/arrow.png" alt="move" align="absmiddle" height="24" width="24">
            </div>
        </div>
        <a href="javascript:void(0)"
           data-type="variant"
           data-variant-id="{0}"
           class="edit_category{2}"
           onClick="openVariantDetails(this)">
            {1}
        </a>
        <div class="variants_details" id="details_{0}">
            <div class="variants_details_container">
                <div class="variants_inner option_price_inner">
                    <?php echo t("Αύξηση τιμής κατά"); ?>
                    <div class="option_prices_container">
                        <div class="option_price_container">
                            <input data-percent="{4}" type="text" id="variants_modifier_{0}" value="{4}" name="variants_modifier[][{0}]" class="listbox modifier option_price_modifier" onkeypress="return restrictToFloat(this, event, true)">
                            <span class="admin_label option_price_label"> ( <?php echo t("χωρίς ΦΠΑ"); ?> )</span>
                        </div>
                        <div class="option_price_container">
                            <input type="text" id="variants_modifier_with_vat_{0}" class="listbox modifier option_price_modifier" onkeypress="return restrictToFloat(this, event, true)">
                            <span class="admin_label option_price_label"> ( <?php echo t("με ΦΠΑ"); ?> )</span>
                        </div>
                        <select class="listbox modifier option_price_type_modifier" id="variants_modifier_type_{0}" name="variants_modifier_type[][{0}]">
                            <option value="A" {5}><?php echo $eshop->getCurrencyProperty("sign"); ?></option>
                            <option value="P" {6}>%</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="variants_inner option_price_inner">
                <div class="variants_details_container">
                    <?php echo t("Αύξηση βάρους κατά"); ?>
                    <input type="text" id="variants_weight_modifier_{0}" value="{7}" name="variants_weight_modifier[][{0}]" class="listbox modifier" onkeypress="return restrictToFloat(this, event, true)">
                    <select class="listbox modifier" id="variants_weight_modifier_type_{0}" name="variants_weight_modifier_type[][{0}]">
                        <option value="A" {8}><?php echo $parameters->getParameter("weight_symbol"); ?></option>
                        <option value="P" {9}>%</option>
                    </select>
                </div>
            </div>

            <div class="variants_inner" {12}>
                <div class="variants_details_container">
                    <div class="image_preview"><img src="images/blank.gif"></div>
                    <a href="attachments_variants.php?action=add" data-rel="variants_mediabank" type="button" class="btn btn-info">
                        <?php echo t("Ορισμός εικονιδίου"); ?>
                    </a>
                    <a href="javascript:void(0)" onclick="removeImage(this)" class="remove_image"></a>
                    <input type="hidden" id="variants_image_{0}" name="variants_image[][{0}]" value="{3}">
                </div>
            </div>
        </div>
    </li>
</script>