let margin17 = {
    margin: '17px'
};

let thatuploadImg = null;
let thatunitSelector = null;
let thatMytop = null;
let thatMyproductlast = null;
let thatneg = null;
let thataddPrice = null;
let active_box = null;
let offerChild = null;
let thatprogress = null;

let marginatop15 = {
    marginTop: '15px' 
};

let displayNone = {
    display: 'none' // 'ms' is the only lowercase vendor prefix
};

let displayBlock = {
    display: 'block' // 'ms' is the only lowercase vendor prefix

    , background: '#fff'
};

let adddCategory = {
    width: '70%',
    margin: '0 auto'
};

let backBnCategory = React.createClass({
    displayName: 'backBnCategory',

    handlePrevlevel(id) {
        // console.log(id);
        let issues = $.getJSON(base_url + 'ajax.php?do=load_sub_cat&cat_id=' + 0, function (data) {
            let prevcats = thatMytop.state.prevcat;
            if (data != null) {
                let result = Object.keys(data).map(function (key) {
                    return [Number(key), data[key]];
                });
                // this.state.categories = result
            }
            thatMytop.setState({ categories: result, category: id, prevcat: prevcats });
        });
    },
    render: function () {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'button',
                { className: 'btn btn-primary btn-simple btn-sm' , onClick: () => {
                        this.handlePrevlevel(this.props.cats.prevcat_id);
                    }},
                React.createElement('i', { className: 'fa fa-arrow-left'}),
                ' Back To Main'
            )
        );
    }
});

let successProduct = React.createClass({
    displayName: 'successProduct',


    myproducts() {
        location.href = base_url + dashboardurl + '/my-products';
    },

    render: function () {
        return React.createElement(
            'div',
            { className: 'row' },
            React.createElement(
                'div',
                { className: 'col-md-6  col-md-offset-3 text-center' },
                React.createElement(
                    'div',
                    { className: 'page-complete' },
                    React.createElement('img', { src: "https://assets.abraacdn.com/assets/react-assets/img/successfully-boost.svg", alt: 'successfully boost icon',className: 'img-responsive' }),
                    React.createElement(
                        'h3',
                        null,
                        congratulationstxt
                    ),
                    React.createElement(
                        'p',
                        null,
                        yourrequestforeditingtxt
                    ),
                    React.createElement(
                        'button',
                        { className: 'btn btn-primary btn-fill', onClick: this.myproducts },
                        backtomyproductstxt
                    )
                )
            )
        );
    }

});

let catState = null;
let selectedAtr = {
    background: '#1180b0'
};
let catAttributesComp = React.createClass({
    displayName: 'catAttributesComp',

    getInitialState() {
        catState = this;

        return {
            attributes: [],
            isprop: true,
            attrval: []

        };
    },
    handleChanges(e) {
        let attrval = catState.state.attrval;
        attrval[e.target.id] = e.target.value;
        catState.setState({
            attrval: attrval
        });
    },
    componentDidMount() {
        catState = this;
       // console.log( catState.props.attr.catid);

        let issues = $.getJSON(base_url + 'ajax.php?do=getCategoryBreadcrumb&cat_id=' + catState.props.attr.catid + '&pid=' + thatMyproductlast.state.pid, function (data) {

            catState.setState({  attrval: data.datas });
            // console.log();
        });

    },
    render: function () {
        if (catState.props.attr.attribut) {

            return React.createElement(
                'div',
                null,
                catState.props.attr.attribut.map(function (attributes, i) {
                    if (catState.state.attrval[attributes.id]) {}
                 //  console.log(attributes.en_title + " : "+catState.state.attrval[attributes.id]);

                    //let rval = attributes.id;
                    //console.log(catState.state.attrval[attributes.id]);

                    switch (attributes.field_type) {
                        case 'text':
                            return React.createElement(
                                'div',
                                { key: i },
                                React.createElement(
                                    'div',
                                    { className: 'form-group col-md-4' },
                                    React.createElement(
                                        'label',
                                        { id: attributes.id + "Label" },
                                        attributes.en_title,
                                        attributes.required == 1 ? '*' : ''
                                    ),
                                    React.createElement('input', { 'data-ival': attributes.id, onChange: catState.handleChanges, type: 'text', id: attributes.id, name: "attr[" + attributes.id + "]", className: attributes.required == 1 ? "form-control checkable" : "form-control",
                                        placeholder: attributes.en_title,
                                        value: catState.state.attrval[attributes.id] ? catState.state.attrval[attributes.id].data : '' }),
                                    React.createElement('div', { id: attributes.id + "Error", className: 'error font-red' })
                                )
                            );
                        case 'droplist':
                            // let values = explode("
",attributes[1].en_details);
                            let values = attributes.en_details.split('\r\n');
                            let multiple = attributes.multiple == true ? 'multiple="multiple"' : null;
                            return React.createElement(
                                'div',
                                { key: i },
                                React.createElement(
                                    'div',
                                    { className: 'form-group col-md-4' },
                                    React.createElement(
                                        'label',
                                        null,
                                        attributes.en_title,
                                        attributes.required == 1 ? '*' : ''
                                    ),
                                    React.createElement(
                                        'select',
                                        { className: 'form-control form-control-newheight','data-ival': attributes.id, name: "attr[" + attributes.id + "]" },
                                        React.createElement(
                                            'option',
                                            { value: '-1', selected: true },
                                            'Choose ',
                                            attributes.en_title
                                        ),
                                        values.map(function (item, i) {
                                            return React.createElement(
                                                'option',
                                                { selected: catState.state.attrval[attributes.id] ? catState.state.attrval[attributes.id].data == item ? 'selected' : '' : '' },
                                                item
                                            );
                                        })
                                    )
                                )
                            );
                        default:
                    }
                }),
                catState.props.attr.attribut.map(function (attributes, i) {
                    //    console.log(attributes.field_type);
                    switch (attributes.field_type) {
                        case 'checkbox':
                            // let values = explode("
",attributes[1].en_details);
                            //   console.log(attributes.en_details);
                            let values = attributes.en_details.split('\r\n');
                            let multiple = attributes.multiple == true ? 'multiple="multiple"' : null;
                            return React.createElement(
                                'div',
                                { key: i },
                                React.createElement(
                                    'div',
                                    { className: 'form-group col-md-4' },
                                    React.createElement(
                                        'label',
                                        null,
                                        attributes.en_title,
                                        attributes.required == 1 ? '*' : ''
                                    ),
                                    values.map(function (item, i) {
                                        let checks = catState.state.attrval[attributes.id];
                                        let isNeeded = false;
                                       // console.log(JSON.stringify(catState.state.attrval[attributes.id]).data);
                                        if(catState.state.attrval[attributes.id]) {
                                            if (catState.state.attrval[attributes.id]) {
                                                return React.createElement(
                                                    'div',
                                                    {className: 'checkbox-solid-sm col-md-6 rlt'},
                                                    React.createElement('input', {
                                                        type: 'checkbox',
                                                        className: 'rms',
                                                        defaultChecked: checks ? catState.state.attrval[attributes.id].data.indexOf(item) >= 0 ? true : false : false,
                                                        'data-ival': attributes.id,
                                                        id: "attr_" + item,
                                                        name: "attr[" + attributes.id + "]",
                                                        value: item,
                                                        checks
                                                    }),
                                                    React.createElement('label', {
                                                        htmlFor: "attr_" + item,
                                                        style: checks ? catState.state.attrval[attributes.id].data.indexOf(item) >= 0 ? selectedAtr : {} : {}
                                                    }),
                                                    React.createElement('h4', null, item)
                                                );
                                            } else {
                                                return React.createElement(
                                                    'div',
                                                    {className: 'checkbox-solid-sm col-md-6 rlt'},
                                                    React.createElement('input', {
                                                        type: 'checkbox',
                                                        className: 'rms',
                                                        defaultChecked: checks ? catState.state.attrval[attributes.id].data.indexOf(item) >= 0 ? true : false : false,
                                                        'data-ival': attributes.id,
                                                        id: "attr_" + item,
                                                        name: "attr[" + attributes.id + "]",
                                                        value: item,
                                                        checks
                                                    }),
                                                    React.createElement('label', {
                                                        htmlFor: "attr_" + item,
                                                        style: checks ? catState.state.attrval[attributes.id].data.indexOf(item) >= 0 ? selectedAtr : {} : {}
                                                    }),
                                                    React.createElement('h4', null, item)
                                                );
                                            }
                                        }


                                    })
                                )
                            );
                        default:
                    }
                })
            );
        } else {
            return React.createElement('div', { className: 'row' });
        }
    }
});

let selectCategoryDiv = React.createClass({
    displayName: 'selectCategoryDiv',

    getInitialState() {
        thatMytop = this;
        return {
            prevcat: 0,
            category: 0,
            executedonce: 0,
            categories: [],
            frommodal: 0,
            atttrs: []
        };
    },
    handleKeyPress(event) {
        let search_keyval = $('#search_keyval').val();
        if (search_keyval.length>0) {
            thatMytop.setState({
                loading: 1
            });
            let search_keyval = $('#search_keyval').val();
            let issues = $.getJSON(base_url + 'ajax.php?do=suggest-cats&text=' + search_keyval, function (data) {
                if (data != null) {
                    let prevcats = thatMytop.state.category;
                    if (data != null) {
                        let result = Object.keys(data).map(function (key) {
                            return [Number(key), data[key]];
                        });
                        // this.state.categories = result
                    }
                    thatMytop.setState({ categories: result, category: 999, prevcat: prevcats });
                } else {
                    thatMytop.setState({
                        categories: 0,
                        loading: 0

                    });
                }
            });
            //console.log('enter press here! ');
        }
    },
    handleClick() {

        thatMytop.setState({
            loading: 1
        });
        let search_keyval = $('#search_keyval').val();
        let issues = $.getJSON(base_url + 'ajax.php?do=suggest-cats&text=' + search_keyval, function (data) {
            if (data != null) {
                let prevcats = thatMytop.state.category;
                if (data != null) {
                    let result = Object.keys(data).map(function (key) {
                        return [Number(key), data[key]];
                    });
                    // this.state.categories = result
                }
                thatMytop.setState({ categories: result, category: 999, prevcat: prevcats });
            } else {
                thatMytop.setState({
                    categories: 0,
                    loading: 0

                });
            }
        });
    },
    handleNextlevel(id) {
        let loadedfully = false;
        let issues = $.getJSON(base_url + 'ajax.php?do=load_sub_cat&cat_id=' + id, function (data) {
            let prevcats = thatMytop.state.category;
            if (data != null) {
                let result = Object.keys(data).map(function (key) {
                    return [Number(key), data[key]];
                });
               // console.log(id);
                // this.state.categories = result
                thatMytop.setState({ categories: result, category: id, prevcat: prevcats });
                thatMyproductlast.setState({cat: id});
            } else {
                $("#select-category").css("z-index","-1");
                $(".modal-open").css("overflow","visible");
                //loadedfully = true;
                thatMytop.setState({ categories: result, category: id, prevcat: prevcats });
                if(thatMyproductlast != null){
                    let issues1 = $.getJSON(base_url + 'ajax.php?do=getCategoryBreadcrumb&cat_id=' + id, function (data) {
                        thatMyproductlast.setState({ catbreadCrump: data.data.replace("'", "'"),cat: id, countries: data.countries, attributesList: data.fields,
                            selectedcntry: 'ae' });
                    });
                }
            }


        });


    },
    componentDidMount() {
        thatMytop = this;
        let issues = $.getJSON(base_url + 'ajax.php?do=load_sub_cat&cat_id=' + this.state.category, function (data) {
            let result;
            if (data != null) {
                result = Object.keys(data).map(function (key) {
                    return [Number(key), data[key]];
                });
                // this.state.categories = result
            }
            thatMytop.setState({ categories: result });
        });
    },
    render: function () {
        // console.log(thatMytop.state.atttrs);
        let props = { cats: { prevcat_id: thatMytop.state.prevcat, currentcats: thatMytop.state.category, attribs: thatMytop.state.atttrs, fromm: thatMytop.state.frommodal } };
        let danep = {};
        let catcount = thatMytop.state.categories;
        let previus = thatMytop.state.prevcat;

        if (catcount != null) {
            return React.createElement(
                'div',
                { className: 'modal-content', style: adddCategory },
                React.createElement(
                    'div',
                    { className: 'modal-header' },
                    React.createElement(
                        'button',
                        { type: 'button', className: 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' },
                        React.createElement(
                            'span',
                            {
                                'aria-hidden': 'true' },
                            '\xD7'
                        )
                    ),
                    React.createElement(
                        'h4',
                        { className: 'modal-title', id: 'myModalLabel' },
                        selectcategory
                    )
                ),
                React.createElement(
                    'div',
                    { className: 'modal-body' },
                    React.createElement(
                        'div',
                        { className: 'input-group search' },
                        React.createElement('input', { type: 'text', id: 'search_keyval', className: 'form-control',
                            placeholder: typehereplaceholder, onKeyDown: this.handleKeyPress }),
                        React.createElement(
                            'span',
                            { className: 'input-group-addon' },
                            React.createElement(
                                'a',
                                { href: '#', onclick: this.handleClick },
                                ' ',
                                React.createElement('i', { className: 'fa fa-search' })
                            )
                        )
                    ),
                    previus > 0 ? React.createElement(backBnCategory, props) : '',
                    React.createElement(
                        'div',
                        { className: 'search-results' },
                        React.createElement(
                            'ul',
                            null,
                            thatMytop.state.categories.map(function (category, i) {
                                //  console.log(category[1].id)
                                return React.createElement(
                                    'li',
                                    { key: i },
                                    React.createElement(
                                        'a',
                                        { href: '#', onClick: () => {
                                            thatMytop.handleNextlevel(category[1].id);
                                        } },
                                        category[1].title
                                    )
                                );
                            })
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'text-center' },
                        React.createElement(
                            'button',
                            { type: 'button', className: 'btn btn-primary btn-fill', disabled: '' },
                            updatetxt
                        ),
                        React.createElement(
                            'button',
                            { type: 'button', className: 'btn btn-default', 'data-dismiss': 'modal' },
                            canceltxt
                        )
                    )
                )
            );
        } else {

            if (thatMytop.props.frommodal == 1) {

                return false;
            } else {

                let issues = $.getJSON(base_url + 'ajax.php?do=getCategoryBreadcrumb&cat_id=' + thatMytop.state.category + '&pid=' + thatMytop.state.pid, function (data) {
                    thatMyproductlast.setState({ countries: data.countries, attributesList: data.fields, attributesVals: data.datas,
                        selectedcntry: 'ae' });
                });

                return React.createElement(
                    'div',
                    null,
                    React.createElement(addProductTop, props)
                );
            }
        }
    }
});

let selectCategoryModal = React.createClass({
    displayName: 'selectCategoryModal',

    render: function () {
        return React.createElement(
            'div',
            { className: 'modal fade', id: 'select-category', tabindex: '-1', role: 'dialog', 'aria-labelledby': 'myModalLabel' },
            React.createElement(
                'div',
                { className: 'modal-dialog', role: 'document' },
                React.createElement(selectCategoryDiv, { frommodal: 1 })
            )
        );
    }

});

let progressData = React.createClass({
    displayName: 'progressData',

    getInitialState: function () {
        thatprogress = this;
        return {
            basicinfo: true,
            basicpercent: 100,
            itempercent: 100,
            itemspecification: true,
            priceandoffers: true,
            pricepercent: 100,
            totalpercent: 100
        };
    },
    componentDidMount: function () {
        thatprogress = this;
        let totalpercents = (thatprogress.state.basicpercent + thatprogress.state.itempercent + thatprogress.state.pricepercent) / 3;
        thatprogress.setState({ totalpercent: totalpercents });
    },
    render: function () {
        let table = "";
        let disable = "disable";
        return React.createElement(
            'div',
            { className: 'progress-card affix-top', 'data-spy': 'affix', 'data-offset-top': '0', style: {width: '200px'}},
            React.createElement(
                'div',
                { className: 'progress-header' },
                React.createElement(
                    'div',
                    { className: 'progress' },
                    React.createElement('div', { className: 'progress-bar progress-bar-success', role: 'progressbar', 'aria-valuenow': '88', 'aria-valuemin': '0', 'aria-valuemax': '100', style: { width: thatprogress ? Math.round((thatprogress.state.basicpercent + thatprogress.state.itempercent + thatprogress.state.pricepercent) / 3) + "%" : "0%" } }),
                    React.createElement(
                        'div',
                        { className: 'progress-details' },
                        React.createElement(
                            'span',
                            null,
                            completenesstxt
                        ),
                        React.createElement(
                            'span',
                            null,
                            thatprogress ? Math.round((thatprogress.state.basicpercent + thatprogress.state.itempercent + thatprogress.state.pricepercent) / 3) : 0,
                            '%'
                        )
                    )
                )
            ),
            React.createElement(
                'div',
                { className: 'progress-body' },
                React.createElement(
                    'div',
                    { className: 'table-responsive progress-table' },
                    React.createElement(
                        'table',
                        { className: 'table' },
                        React.createElement(
                            'tbody',
                            null,
                            React.createElement(
                                'tr',
                                { className: thatprogress.state.basicinfo ? table : disable },
                                React.createElement(
                                    'td',
                                    null,
                                    React.createElement('span', { className: 'fa fa-check-square' })
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    basicinfosmalltxt
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    thatprogress.state.basicpercent,
                                    '%'
                                )
                            ),
                            React.createElement(
                                'tr',
                                { className: thatprogress.state.itemspecification ? table : disable },
                                React.createElement(
                                    'td',
                                    null,
                                    React.createElement('span', { className: 'fa fa-check-square' })
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    itemspecificationsmalltxt
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    thatprogress.state.itempercent,
                                    '%'
                                )
                            ),
                            React.createElement(
                                'tr',
                                { className: thatprogress.state.priceandoffers ? table : disable },
                                React.createElement(
                                    'td',
                                    null,
                                    React.createElement('span', { className: 'fa fa-check-square' })
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    pricesofferssmalltxt
                                ),
                                React.createElement(
                                    'td',
                                    null,
                                    thatprogress.state.pricepercent,
                                    '%'
                                )
                            )
                        )
                    )
                )
            ),
            React.createElement(
                'div',
                { className: 'progress-footer' },
                React.createElement(
                    'button',
                    { className: 'btn btn-success btn-fill', onClick: thatMyproductlast.handleSubmit, disabled: '' },
                    submittxt
                )
            )
        );
    }

});

class activechildComp extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showComponent: true
        };
        this.popup_ques = this.popup_ques.bind(this);
        this.hide_overlay = this.hide_overlay.bind(this);
        active_box = this;
    }

    popup_ques(e) {
        e.preventDefault();
        this.setState({
            showComponent: true
        });
    }

    hide_overlay(e) {
        e.preventDefault();
        this.setState({
            showComponent: false,
            totalPrice: 0
        });
    }

    editFunction(id) {
        $('#item-img').trigger('click');
        let childrenc = thatuploadImg.state.numChildren;
        childrenc--;
        let files = thatuploadImg.state.filepath;
        files.splice(id, 1);
        thatuploadImg.setState({numChildren: childrenc,filepath: files});
    }

    delFunction(id) {
        let childrenc = thatuploadImg.state.numChildren;
        childrenc--;
        let files = thatuploadImg.state.filepath;
        files.splice(id, 1);
        thatuploadImg.setState({numChildren: childrenc,filepath: files});
        // active_box.setState({ showComponent: false });
    }

    render() {
        if (this.state.showComponent) {
            // console.log(this.props.filesList);
            return React.createElement(
                'div',
                { className: 'thumbnail-img' },
                React.createElement(
                    'a',
                    { href: '#', className: 'thumbnail' },
                    React.createElement('input', { type: 'hidden', name: 'product_img[]', value: (this.props.filesList).replace("https://s101.abraacdn.com/","https://www.abraa.com"),
                        'class': 'product_img' }),
                    React.createElement('img', { src: this.props.filesList, alt: '' })
                ),
                React.createElement(
                    'div',
                    { className: 'edit-btn' },
                    React.createElement(
                        'a',
                        { href: '#' },
                        React.createElement('span', { className: 'fa fa-pen-square edit-img', onClick: () => {
                            this.editFunction(this.props.indexed);
                        } })
                    ),
                    React.createElement(
                        'a',
                        { href: '#' },
                        React.createElement('span', { className: 'fa fa-trash remove-img', onClick: () => {
                            this.delFunction(this.props.indexed);
                        } })
                    )
                )
            );
        } else {
            return React.createElement('div', null);
        }
    }
}

let show_spinner = function (container) {
    let tpl = '<div class="spinner"><div class="spinner-content">' + '<div class="spinner-image"><img style="width: auto" alt="spinner icon" src="' + 'https://assets.abraacdn.com/assets/images/spinner.gif"></div></div></div>';
    let p = container.find('.upload-progress');
    p.html(tpl);
    p.slideDown(500);
};

let getSlots = function () {
    let slots = $('div.thumbnail-img');

    let empty = [],
        filled = [];
    let start = slots.index(active_box),
        end = limit + start; //limit is more safer than slots.length

    let eq;
    for (let i = start; i < end; i++) {
        eq = slots.eq(i % limit);
        if (eq.find('img').length === 0) {
            empty.push(eq);
        } else {
            filled.push(eq);
        }
    }
    return { empty: empty, filled: filled };
};

let limit = 10; //max images allowed
let request = false;
let hide_spinner = function (container) {
    // let p = container.find('.upload-progress');
    // p.slideUp(1000);
    // setTimeout(function () {
    //     p.html('');
    // }, 1000);
};

let uploadImages = React.createClass({
    displayName: 'uploadImages',

    getInitialState() {
        thatuploadImg = this;
        return {
            uploaded: 0,
            numChildren: this.props.cnt,
            filepath: this.props.imgs
        };
    },
    componentDidMount() {
        thatuploadImg = this;
    },
    componentWillMount() {},
    uploadTrigger(e) {

        let selected = $("#item-img").get(0).files;

        if (selected.length > 0) {
            let validExt = ['jpeg', 'jpg', 'png', 'gif'];
            let error = [];
            let files = [];
            for (let k in selected) {
                if (k >= limit) {
                    break;
                }

                if (typeof selected[k] == 'object') {
                    let ext = /[^.]+$/.exec(selected[k].name)[0].toLowerCase();
                    if ($.inArray(ext, validExt) == -1) {
                        error.push(selected[k].name);
                    } else {
                        files.push(selected[k]);
                    }
                }
            }
            if (error.length > 0) {
                // $('.uploading-box').prepend("<div class='alert alert-danger' id='uperror'>" + error.join(',  ') + lang_invalid_files + "</div>");
                // setTimeout(function () {
                //     $('#uperror').hide('slow')
                // }, 5000);
            }

            let total = files.length;
            $('#upload-counter').show();
            $('#upload-complete').hide();
            $('#total-selected').html(total);

            let slots = getSlots();
            let empty_slots = slots.empty;
            if (empty_slots.length < files.length) {
                empty_slots = empty_slots.concat(slots.filled.slice(0, files.length - empty_slots.length));
            }
            for (let k in empty_slots) {
                if (k >= files.length) {
                    continue;
                }
                show_spinner(empty_slots[k]);
            }
            // console.log(files.length);

            let fill_slots = function () {
                if (!files.length) {
                    //filling is complete. this condition is only for a safe keeping
                    //will never be called
                    return;
                }

                let file = files.shift();
                $('#current-position').html(total - files.length);
                active_box = empty_slots.shift();
                let form_data = new FormData();
                form_data.append('file', file);
                $.ajax({
                    url: base_url + 'ajax.php?do=item-images-upload',
                    data: form_data,
                    dataType: 'json',
                    type: 'post',
                    processData: false,
                    contentType: false
                }).done(function (res) {
                    hide_spinner(active_box);
                    //  console.log(base_url + res.file_path);
                    if (res.status == 'success') {
                        thatuploadImg.state.filepath.push(res.file_path);
                        thatuploadImg.setState({ numChildren: thatuploadImg.state.numChildren + 1, filepath: thatuploadImg.state.filepath });
                        if (files.length) {
                            //only if there are files.
                            fill_slots();
                        }
                    } else {
                        //alert(files.length);
                        if (files.length) {
                            //only if there are files.
                            fill_slots();
                        } else {
                            $('#upload-counter').hide();
                            $('#upload-not').show();
                            setTimeout(function () {
                                $('#upload-not').slideUp(1500);
                            }, 3000);
                        }
                    }
                });
            };
            //now lets fill every slot one by one
            fill_slots();
        }
    },
    handleFirstClick() {
        $('#item-img').trigger('click');
    },
    render: function () {

        const children = [];
        for (let i = 0; i < thatuploadImg.state.numChildren; i += 1) {
            children.push(React.createElement(activechildComp, { filesList: thatuploadImg.state.filepath[i].indexOf(base_url) !== -1 ? thatuploadImg.state.filepath[i] : thatuploadImg.state.filepath[i], indexed: i }));
        };
        return React.createElement(
            'div',
            { className: 'upload-image uploading-box' },
            React.createElement('input', { type: 'hidden', value: '', id: 'default_image' }),
            React.createElement('input', { type: 'file', name: 'item-img', id: 'item-img', multiple: true, onChange: this.uploadTrigger }),
            children,
            React.createElement(
                'div',
                { className: 'thumbnail-img' },
                React.createElement(
                    'a',
                    { href: '#', className: 'thumbnail' },
                    React.createElement('span', { className: 'fa fa-plus-square', onClick: this.handleFirstClick })
                )
            )
        );
    }

});

let unitSelector = React.createClass({
    displayName: 'unitSelector',


    getInitialState() {
        thatunitSelector = this;
        return {
            units: []
        };
    },
    componentDidMount() {
        thatunitSelector = this;
        let issues = $.getJSON(base_url + 'ajax.php?do=get-units', function (data) {
            if (data != null) {
                let result = Object.keys(data).map(function (key) {
                    return [Number(key), data[key]];
                });
                let resultPage = data.products;

                thatunitSelector.setState({
                    units: result

                });
            } else {
                thatunitSelector.setState({
                    units: null
                });
            }
        });
    }, changedVal(id) {
        $('.unitper').html("PER " + id);
        $('#unival').html("PER " + id);
        thatofferElement.setState({ selectedunit: id });
    },
    render: function () {
        // console.log(thatunitSelector.state.units);

        return React.createElement(
            'div',
            { className: 'btn-group bootstrap-select' },
            React.createElement(
                'button',
                { type: 'button', className: 'btn dropdown-toggle btn-default btn-block', 'data-toggle': 'dropdown', title: perUnit },
                React.createElement(
                    'span',
                    { className: 'filter-option pull-left unitper' },
                    perUnit
                ),
                '\xA0',
                React.createElement(
                    'span',
                    { className: 'bs-caret' },
                    React.createElement('span', { className: 'fa fa-sort' })
                )
            ),
            React.createElement(
                'div',
                { className: 'dropdown-menu open' },
                React.createElement(
                    'ul',
                    { className: 'dropdown-menu inner', role: 'menu' },
                    thatunitSelector.state.units.map(function (itemav, i) {
                        //  console.log(itemav[1].unit_en);
                        let unitUsed = itemav[1].unit_en;
                        return React.createElement(
                            'li',
                            { key: i, 'data-original-index': i },
                            React.createElement(
                                'a',
                                { tabindex: '0', className: '', 'data-tokens': 'null', onClick: () => thatunitSelector.changedVal(unitUsed) },
                                React.createElement(
                                    'span',
                                    { className: 'text' },
                                    unitUsed
                                ),
                                React.createElement('span', { className: 'fa fa-check check-mark' })
                            )
                        );
                    })
                )
            ),
            React.createElement(
                'select',
                { name: 'cities', className: 'selectpicker', 'data-title': 'Single Select', 'data-style': 'btn-default btn-block', 'data-menu-style': 'dropdown-blue', tabindex: '-98' },
                React.createElement(
                    'option',
                    { className: 'bs-title-option', value: '' },
                    'Single Select'
                ),
                thatunitSelector.state.units.map(function (item, i) {
                    let unitUsed = item[1].unit_en;
                    return React.createElement(
                        'option',
                        { key: i, value: item[1].id },
                        'PER ',
                        unitUsed
                    );
                })
            )
        );
    }

});

let isNegotiable = React.createClass({
    displayName: 'isNegotiable',


    getInitialState() {
        thatneg = this;
        return {
            cancheck: false
        };
    },
    checkaBles() {
        // console.log(thatMyproductlast.state.discountvisible);
        if (this.state.cancheck) {
            thatMyproductlast.setState({ discountvisible: false });
        } else {
            $('#negotiable').prop('checked', 'false');
            thatMyproductlast.setState({ discountvisible: true });
        }
    },
    componentDidMount() {
        thatneg = this;
    },
    render: function () {
        return React.createElement(
            'div',
            { className: 'checkbox-solid-sm' },
            React.createElement('input', { type: 'checkbox', id: 'negotiable', name: 'check', onClick: this.checkaBles }),
            React.createElement('label', { htmlFor: 'negotiable' }),
            React.createElement(
                'span',
                null,
                'NEGOTIABLE?'
            )
        );
    }
});

let addPrice = React.createClass({
    displayName: 'addPrice',

    getInitialState() {
        thataddPrice = this;
        return {
            addanother: true
        };
    },
    addOfferelement(e) {
        e.preventDefault();
        thatofferElement.setState({ numChildren: thatofferElement.state.numChildren + 1 });
    },
    render: function () {

        return React.createElement(
            'div',
            { className: ' col-md-12 form-group', style: thataddPrice.state.addanother ? displayBlock : displayNone },
            React.createElement(
                'a',
                { href: '#', id: 'addanother', onClick: this.addOfferelement },
                '+ add another'
            )
        );
    }

});

function calculatePercentage(old_price, new_price) {
    let percentage = (parseFloat(old_price) - parseFloat(new_price)) / parseFloat(old_price) * 100;
    if (parseFloat(old_price) < parseFloat(new_price)) {
        return 0;
    }
    if (percentage > 0 && percentage < 1) {
        return 1;
    } else {
        if (percentage > 100) {
            return 0;
        } else {
            if (isNaN(percentage)) {
                return 0;
            } else {
                percentage = (Math.abs(percentage) * 100) / 100;
                if(percentage === Math.round(percentage)) {
                    return percentage;
                }else{
                    return percentage.toFixed(2);
                }
            }
        }
    }
}

function calcPrice(id) {

    let discq = document.getElementById("discount_quantity_" + id).value;
    let discp = document.getElementById("discount_percentage_" + id).value;
    let total;

    total = parseFloat(discq) * parseFloat(discp);
    if (isNaN(total)) {
        total = 0;
    }else if(total !== Math.round(total)) {
        total = total.toFixed(2)
    }

    let price = parseFloat($('#old_price').val());
    price = price.toFixed(2);
    let disc = calculatePercentage(price, discq);
    $('#discount_'+id).text(disc+"%");
    $('#total_'+id).text(total);

    // console.log("total---"+total+"---disc---"+disc);
    thataddPrice.setState({ addanother: true });
   offerChild.setState({ discountPrice: disc });
}

class childComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showComponent: true,
            totalPrice: 0,
            discountPrice: 0
        };
        this.popup_ques = this.popup_ques.bind(this);
        this.hide_overlay = this.hide_overlay.bind(this);
        offerChild = this;
    }

    popup_ques(e) {
        e.preventDefault();
        this.setState({
            showComponent: true
        });
    }

    hide_overlay(e) {
        e.preventDefault();
        let numItems = $('.remove').length;
        if (numItems == 1) {
            $('#adofferlink').css("display", "block");
            $('#addanother').css("display", "none");
            //  thataddPrice.setState({thataddPrice : false});
        }
        this.setState({
            showComponent: false,
            totalPrice: 0,
            discountPrice: 0

        });
    }

    render() {
        if (this.state.showComponent) {
          //  console.log();
            let latval = typeof this.props.children.dvals !== 'undefined' && !isNaN(parseFloat(this.props.children.dvals.percentage)) ? thatMyproductlast.state.old_price - (this.props.children.dvals.percentage/100) * thatMyproductlast.state.old_price : 0;
            let totaltav = typeof this.props.children.dvals !== 'undefined' && !isNaN(parseFloat(this.props.children.dvals.percentage)) ? this.props.children.dvals.quantity * latval : 0;
            return React.createElement(
                'div',
                { key: this.props.i },
                React.createElement(
                    'div',
                    { className: ' col-md-4' },
                    React.createElement('input', { type: 'text', className: 'form-control offerdet', id: "discount_percentage_" + this.props.i,
                        name: "discount_" + this.props.i, placeholder: "PER " + thatofferElement.state.selectedunit , defaultValue: typeof this.props.children.dvals !== 'undefined' &&  !isNaN(parseFloat(this.props.children.dvals.quantity)) ? parseFloat(this.props.children.dvals.quantity) : 0 , 'aria-label': '...',  onKeyUp: () => {
                            calcPrice(this.props.i);
                        } })
                ),
                React.createElement(
                    'div',
                    { className: ' col-md-4' },
                    React.createElement('input', { type: 'text', className: 'form-control offerdet', id: "discount_quantity_" + this.props.i,
                        name: "quantity_" + this.props.i,  defaultValue: latval , placeholder: 'Price',  'aria-label': '...', onKeyUp: () => {
                            calcPrice(this.props.i);
                        } })
                ),
                React.createElement(
                    'div',
                    { className: 'col-md-4 aggr' },
                    React.createElement('input', { type: 'hidden', name: "discount_final_" + this.props.i, id: "discount_final_" + this.props.i, value: totaltav }),
                    React.createElement(
                        'div',
                        { className: 'discount' },
                        React.createElement(
                            'label',
                            null,
                            discounttxt
                        ),
                        React.createElement('input', { type: 'hidden', name: "discount_pr_" + this.props.i, id: "discount_pr_" + this.props.i, value: typeof this.props.children.dvals !== 'undefined' && !isNaN(parseFloat(this.props.children.dvals.percentage)) ? parseFloat(this.props.children.dvals.percentage) : 0 }),
                        React.createElement(
                            'span',
                            { id: "discount_" + this.props.i },
                            ' ',
                            typeof this.props.children.dvals !== 'undefined' && !isNaN(parseFloat(this.props.children.dvals.percentage)) ? parseFloat(this.props.children.dvals.percentage) : 0,
                            '%'
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'total' },
                        React.createElement(
                            'label',
                            null,
                            this.state.totalPrice == 0 ? '' : 'TOTAL' + ' ' +  demo.getCookie('currency').toUpperCase()
                        ),
                        React.createElement(
                            'span',
                            { id: "total_" + this.props.i },
                            ' ',
                            this.state.totalPrice == 0 ? '' : this.state.totalPrice
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'remove' },
                        React.createElement(
                            'a',
                            { href: '', className: 'remove-price', onClick: this.hide_overlay },
                            React.createElement('span', {
                                className: 'fa fa-times' })
                        )
                    )
                )
            );
        } else {
            return React.createElement('div', null);
        }
    }
}

let offerElement = React.createClass({
    displayName: 'offerElement',


    getInitialState() {
        thatofferElement = this;
        return {
            isvisible: this.props.offers.isvisible,
            offerid: 1,
            numChildren: this.props.offers.numChildren,
            selectedunit: 'unit',
            qpriceList: this.props.offers.qpriceList
        };
    },
    componentDidMount() {
        thatofferElement = this;

    },
    render: function () {
        const children = [];
        for (let i = 0; i < thatofferElement.state.numChildren; i += 1) {
          //  console.log(thatofferElement.state.qpriceList[0]);
            let dvals = thatofferElement.state.qpriceList == null ? 0 : thatofferElement.state.qpriceList[i];
            children.push(React.createElement(childComponent, ids = { i }, vals= {dvals}));
        };
        // console.log(children);
        return React.createElement(
            'div',
            null,
            children
        );
    }

});

function updateNeg() {
    let priceval = $('#old_price').val();
    //  console.log("can check---"+priceval);
    // console.log(thatMyproductlast.state.discountvisible);
    if (priceval > 0) {
        //   thatneg.setState({cancheck: true});
        //   thatMyproductlast.setState({discountvisible: false});
        $('#old_price_error').text('');
        //   console.log(thatMyproductlast.state.discountvisible);
    } else {}
}


function YouTubeGetID(url){
    url= url+'';
    url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
    return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}




let addProductTop = React.createClass({
    displayName: 'addProductTop',


    getInitialState() {
        thatMyproductlast = this;
        console.log(this.props);

        return {
            cat: this.props.currentcats.item.sub_of,
            pid: this.props.currentcats.item.id,
            title: this.props.currentcats.item.title,
            ar_title: this.props.currentcats.item.ar_title,
            details: this.props.currentcats.item.details,
            price: this.props.currentcats.item.price,
            old_price: this.props.currentcats.item.price,
            currency: this.props.currentcats.item.currency,
            min_order: this.props.currentcats.item.min_order,
            youtube_video: this.props.currentcats.item.youtube_video,
            deliverper: this.props.currentcats.details.deliver_per,
            finished: false,
            discountvisible: true,
            catbreadCrump: '',
            attributesList: this.props.currentcats.details.fields,
            attributesVals: [],
            quantityoffers: this.props.currentcats.details.quantityOffers,
            lengthdm: this.props.currentcats.details.shipping!= null ? this.props.currentcats.details.shipping.length : 0,
            widthdm: this.props.currentcats.details.shipping!= null ? this.props.currentcats.details.shipping.width: 0,
            heightdm: this.props.currentcats.details.shipping!= null ? this.props.currentcats.details.shipping.height: 0,
            weightdm: this.props.currentcats.details.shipping!= null ? this.props.currentcats.details.shipping.weight: 0,
            package_type: this.props.currentcats.details.shipping!= null ? this.props.currentcats.details.shipping.package_type : 0,
            username: '',
            password: '',
            passwordConfirm: '',
            freethere: 0,
            countries: [],
            selectedcntry: this.props.currentcats.item.manufacture_country,
            selectedcntryname: this.props.currentcats.item.manufacture_country_name,
            capacity: this.props.currentcats.item.capacity,
            capcity_frequency:  this.props.currentcats.item.capcity_frequency,
            loading: 1
        };

    },
    componentDidMount: function () {


        let issues = $.getJSON(base_url + 'ajax.php?do=getCategoryBreadcrumb&cat_id=' + this.state.cat + '&pid=' + this.state.pid, function (data) {
            // console.log("hi");
           // console.log(data.datas);
            thatMyproductlast.setState({ catbreadCrump: data.data, countries: data.countries, attributesList: data.fields, attributesVals: data.datas,
                selectedcntry: 'ae', loading: 0 });
            // console.log();
        });
        tinymce.init({
            language: "en",
            selector: "textarea#details",
            setup: function (ed) {
              ed.on("KeyUp", function (ex) {
                var mceDom = ed.contentAreaContainer.children;
                var placeholder = mceDom[1];
                var mceText = $(ex.currentTarget).html();
                $(placeholder).hide();
                $("#details").text(mceText);
                $("#details").val(mceText);
                thatMyproductlast.showInputError("details");
              });
            },
            directionality: "ltr",
            height: 200,
            font_formats:
              "Andale Mono=andale mono,times;" +
              "Arial=arial,helvetica,sans-serif;" +
              "Arial Black=arial black,avant garde;" +
              "Book Antiqua=book antiqua,palatino;" +
              "Comic Sans MS=comic sans ms,sans-serif;" +
              "Courier New=courier new,courier;" +
              "Georgia=georgia,palatino;" +
              "GESSTwoLight=GESSTwoLight,tahoma;" +
              "Helvetica=helvetica;" +
              "Impact=impact,chicago;" +
              "Symbol=symbol;" +
              "Tahoma=tahoma,arial,helvetica,sans-serif;" +
              "Terminal=terminal,monaco;" +
              "Times New Roman=times new roman,times;" +
              "Traditional Arabic=Traditional Arabic,times new roman,times;" +
              "Trebuchet MS=trebuchet ms,geneva;" +
              "Verdana=verdana,geneva;" +
              "Webdings=webdings;" +
              "Wingdings=wingdings,zapf dingbats",
            browser_spellcheck: true,
            relative_urls: false,
            contextmenu: false,
            statusbar: false,
            invalid_elements: "img",
            valid_elements: "p,strong,em,br,span,ul,li,ol,table,th,tr,td",
            plugins: [
              "advlist lists charmap hr anchor pagebreak",
              " visualblocks visualchars code insertdatetime nonbreaking",
              "save table contextmenu emoticons template paste textcolor directionality",
              "placeholder",
            ],
            toolbar:
              "insertfile undo redo | fontselect | bold italic underline | alignleft aligncenter alignright alignjustify | table bullist numlist outdent indent | forecolor backcolor | rtl ltr",
          });

    },
    addofferPrice(e) {
        e.preventDefault();
        // console.log(thatofferElement.state.isvisible);
        if ($('#old_price').val() > 0) {
            let numc = thatofferElement.state.numChildren;
            thatofferElement.setState({ isvisible: true, numChildren: numc + 1 });
            thataddPrice.setState({ addanother: false });
            $('#old_price_error').text('');
            $('#adofferlink').hide();
            //$('#addanother').show();
        } else {
            $('#old_price_error').text(pleasefillthepricetxt);
        }

        // console.log(thatofferElement.state.numChildren);
    },
    handleChange1(e) {
        e.target.classList.add('active');

        this.setState({
            [e.target.name]: e.target.value
        });
    },
    handleChange(e) {
        e.target.classList.add('active');

        this.setState({
            [e.target.name]: e.target.value
        });

        this.showInputError(e.target.name);
    },

    handleSubmit(e) {
        e.preventDefault();

        if (!this.showFormErrors()) {
            //    console.log('form is invalid: do not submit');
        } else {
            thatMyproductlast.setState({ loading: 1 });

            let titletosubmit = document.getElementById(`title`).value;
            let artitletosubmit = document.getElementById(`ar_title`).value;
            let description = document.getElementById(`details`).value;
            let old_price = document.getElementById(`old_price`).value;
            let currency = document.getElementById(`currency`).value;
            let price = old_price;
            let min_order = document.getElementById(`min_order`).value;
            let video_url = YouTubeGetID(document.getElementById('youtube_video').value).toString();
            let man_cntry = document.getElementById('cntryselected').value;
            let capacity = document.getElementById('capacitytxts').value;
            let capacityfreq = document.getElementById('freqbuy').textContent;

            let shippinglength = document.getElementById('lengthdm').value;
            let shippingwidth = document.getElementById('widthdm').value;
            let shippingheight = document.getElementById('heightdm').value;
            let shippingweight = document.getElementById('weightdm').value;


            let packtype = document.getElementById('selectedPacking').textContent;
            let deliverper = document.getElementById('deliverper').value;
            let freesval = document.getElementById('frees').value;

            let ival = 0;
            let indexval = 0;

            let totaloffers = [];
            for (ival = 0; ival < 10; ival++) {
                if (document.getElementById('discount_percentage_' + ival) !== null) {
                    let offerarray = {};
                    offerarray['discount_price'] = document.getElementById('discount_percentage_' + ival).value;
                    offerarray['discount_quantity'] = document.getElementById('discount_quantity_' + ival).value;
                    offerarray['discount_percent'] = document.getElementById('discount_pr_' + ival).value;
                    offerarray['discount_final'] = document.getElementById('discount_final_' + ival).value;
                    indexval++;
                    totaloffers.push(offerarray);
                }
            }

            let offersvals = JSON.stringify(totaloffers);
            //   console.log(offersvals);
            let imgsvals = JSON.stringify(thatuploadImg.state.filepath);

            let valuesatt = [];
            let attributeids = [];
            let selectids = [];
            let selectValues = [];

            $('input[name^="attr"]').each(function () {
                if($(this).is(':checkbox')){
                    if($(this).is(':checked')){
                        attributeids.push($(this).attr('data-ival'));
                        valuesatt.push($(this).val());
                    }
                } else {
                    attributeids.push($(this).attr('data-ival'));
                    valuesatt.push($(this).val());
                }
            });

            $('div#cat_attrib').find('select').each(function() {
                selectids.push($(this).attr('data-ival'));
                selectValues.push($(this).val());
            });



            let valuesatts = JSON.stringify(valuesatt);
            let attributem = JSON.stringify(attributeids);
            let valuesattssel = JSON.stringify(selectids);
            let attributemsel = JSON.stringify(selectValues);

            $.ajax({
                url: base_url + 'ajax.php',
                type: "POST",
                data: {
                    do: 'submit-product',
                    category: thatMyproductlast.state.cat,
                    pid: this.state.pid,
                    supplier_id: this.props.currentcats.item.user_id,
                    title: titletosubmit,
                    ar_title: artitletosubmit,
                    desc: description,
                    oldprice: old_price,
                    currency: currency,
                    minorder: min_order,
                    mancntry: man_cntry,
                    priceone: price,
                    offers: offersvals,
                    productimgs: imgsvals,
                    attributesv: valuesatts,
                    attributesms: attributem,
                    atributeselids: valuesattssel,
                    atributeselivs: attributemsel,
                    videourl: video_url,
                    shiplength : shippinglength,
                    shipwidth: shippingwidth,
                    shipheight: shippingheight,
                    shipweight: shippingweight,
                    packtype: packtype,
                    deliverper: deliverper,
                    capacity: capacity,
                    capacityfreq: capacityfreq,
                    freepos: freesval
                },
                //dataType: 'json',
                success: function (data) {
                    if (data) {
                        thatMyproductlast.setState({ finished: true, loading: 0 });
                    } else {
                        thatMyproductlast.setState({ finished: false, loading: 0 });
                        return false;
                    }
                },
                error: function (xhr, status, error) {
                    $('.content-loadings').css('display','none');
                    $.notify({
                        icon: 'fa fa-info-circle',
                        message: editingproductfailedtxt

                    }, {
                        type: 'error',
                        timer: 4000
                    });
                    return false;
                }
            });
        }
    },

    showFormErrors() {
        const inputs = document.querySelectorAll('.checkable');
        let isFormValid = true;

        inputs.forEach(input => {
            input.classList.add('active');

            const isInputValid = this.showInputError(input.id);

            if (!isInputValid) {
                isFormValid = false;
            }
        });

        return isFormValid;
    },

    showInputError(refName) {
        // console.log(refName);

        if(document.getElementById(`${refName}Label`) != null){
        const validity = document.getElementById(`${refName}`).value;
        const label = document.getElementById(`${refName}Label`).textContent;
        const error = document.getElementById(`${refName}Error`);

        if (validity.length < 1 && refName != 'old_price') {
            thatprogress.setState({ basicinfo: false });
            thatprogress.setState({ basicpercent: 0 });
            error.textContent = `${label} `+isarequiredfield;
            return false;
        } else if (refName == 'title') {
            if (validity.length < 4) {
                thatprogress.setState({ basicinfo: false });
                thatprogress.setState({ basicpercent: 0 });
                error.textContent = `${label} `+mustbeatleast4charectorstxt;
                return false;
            } else {
                thatprogress.setState({ basicpercent: 100 });
                thatprogress.setState({ basicinfo: true });
            }
        } else if (refName == 'details') {
            if (validity.length < 4) {
                thatprogress.setState({ itemspecification: false });
                thatprogress.setState({ itempercent: 0 });
                error.textContent = `${label} `+mustbeatleast4charectorstxt;
                return false;
            } else {
                thatprogress.setState({ itempercent: 100 });
                thatprogress.setState({ itemspecification: true });
            }
        } else if (refName == 'min_order') {

            if (isNaN(validity) && validity < 1) {
                thatprogress.setState({ priceandoffers: false });
                thatprogress.setState({ pricepercent: 0 });
                error.textContent = `${label} `+mustbeneededtxt;
                return false;
            } else {
                thatprogress.setState({ priceandoffers: true });
                thatprogress.setState({ pricepercent: 100 });
            }
        }

            error.textContent = '';
        }


        return true;


    },
    canfree() {
        if ($('#free').prop("checked")) {
            thatMyproductlast.setState({ freethere: 1 });
            $('#frees').val(1);
        } else {
            thatMyproductlast.setState({ freethere: 0 });
            $('#frees').val(0);
        }
    },
    changedFree(id) {
        $('#freeones').val(id);
        $('#freeone').html(id);
    },
    changedVal(id) {

        let selectedPacking = id;
        $('#selectedPacking').html(selectedPacking);
        //  console.log(selectedPacking);
        //  console.log(selectedPacking);
    },
    handleModal(id) {
        thatMytop.handleNextlevel(id);
        $('#select-category').modal('show');
        $('.modal-backdrop').removeClass("modal-backdrop");
        $("#select-category").css("z-index","999");
    },
    changedCntry(id, code) {
        $('#cntryselected').val(code);
        $('.cntryselected').html(id);
        $('#manufacturing_country').val(code);
    },
    changedFreq(id,val) {

        $('#freqbuy').html(id);
        $('#deliverper').val(val);
    },
    render: function () {
        if (this.state.finished) {
            return React.createElement(
                'div',
                null,
                React.createElement(successProduct, null)
            );
        } else {
            let propsnew = {attr: { attribut: thatMyproductlast.state.attributesList, attrval: thatMyproductlast.state.attributesVals, catid: thatMyproductlast.state.cat } };
            let propoffers =  {offers: { isvisible: true, numChildren: thatMyproductlast.state.quantityoffers != null ? thatMyproductlast.state.quantityoffers.length : 0,qpriceList:  thatMyproductlast.state.quantityoffers}};
            //  console.log(propsnew);
            let textoshow ="";
            if (this.state.deliverper == 1) {
                textoshow = perweektxt
            } else if (this.state.deliverper == 2) {
                textoshow = permonthtxt
            } else if (this.state.deliverper == 3) {
                textoshow = peryeartxt
            } else {
                textoshow = onetimeonlytxt
            }
            return React.createElement(
                'div',
                { className: 'row' },
                React.createElement(
                    'div',
                    { className: 'content-loadings', style: this.state.loading ? displayBlock : displayNone },
                    React.createElement('img', { src: 'https://assets.abraacdn.com/assets/images/ajax-loader.gif', alt: 'loading icon'})
                ),
                React.createElement(
                    'div',
                    { className: 'col-md-12' },
                    React.createElement(
                        'div',
                        { className: 'card' },
                        React.createElement(
                            'div',
                            { className: 'content' },
                            React.createElement(
                                'div',
                                { className: 'row' },
                                React.createElement(
                                    'div',
                                    { className: 'col-md-9' },
                                    React.createElement(
                                        'div',
                                        { className: 'header' },
                                        React.createElement(
                                            'p',
                                            { className: 'title' },
                                            basicinfotxt
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'breadcrumb-container' },
                                        React.createElement(
                                            'div',
                                            { className: 'banner' },
                                            React.createElement(
                                                'span',
                                                { className: 'custom-label' },
                                                selectedcategorytxt
                                            ),
                                            React.createElement(
                                                'span',
                                                { className: 'pull-right' },
                                                React.createElement(
                                                    'a',
                                                    { href: '#', id: 'changeCategory',  onClick: () => this.handleModal(thatMytop.state.prevcat)},
                                                    changecategorytxt
                                                )
                                            )
                                        ),
                                        React.createElement(
                                            'ol',
                                            { className: 'breadcrumb' },
                                            thatMyproductlast.state.catbreadCrump
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'category' },
                                            React.createElement(
                                                'a',
                                                { href: '#', id: 'icCategory',  onClick: () => this.handleModal(thatMytop.state.prevcat) },
                                                React.createElement('span', {
                                                    className: 'icon-category' })
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'form-items' },
                                        React.createElement(
                                            'div',
                                            { className: 'form-group' },
                                            React.createElement(
                                                'label',
                                                { id: 'titleLabel' },
                                                itemtitletxt
                                            ),
                                           
                                            React.createElement('input', { type: 'text', name: 'title', id: 'title', value: this.state.title, placeholder: 'Title',
                                                className: 'form-control checkable',
                                                onChange: this.handleChange }),
                                            React.createElement('div', { className: 'error font-red', id: 'titleError' }),
                                            React.createElement(
                                                'br'
                                            ),
                                            React.createElement(
                                                'label',
                                                { id: 'arTitleLabel' },
                                                aritemtitletxt
                                            ),
                                            React.createElement('input', { type: 'text', name: 'ar_title', id: 'ar_title', value: this.state.ar_title, placeholder: 'Arabic Title (Optional)',
                                                className: 'form-control checkable',
                                                onChange: this.handleChange }),
                                            React.createElement('div', { className: 'error font-red', id: 'arTitleError' })
                                        ),
                                        React.createElement(uploadImages, { imgs: typeof this.props.currentcats.details.curent_product_img === "undefined" ? [] : this.props.currentcats.details.curent_product_img, cnt: typeof this.props.currentcats.details.curent_product_img === "undefined" ? 0 : this.props.currentcats.details.curent_product_img.length }),
                                        React.createElement(
                                            'div',
                                            { className: 'row margin-top-25', style: marginatop15 },
                                            React.createElement(
                                                'div',
                                                { className: 'col-md-12 col-sm-8 col-xs-12' },
                                                React.createElement(
                                                    'label',
                                                    { id: 'youtube_videoLabel' },
                                                    videourltxt
                                                ),
                                                React.createElement('input', { type: 'text', name: 'youtube_video', value: this.state.youtube_video, id: 'youtube_video',
                                                    placeholder: '', className: 'form-control',onChange: this.handleChange })
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'form-items' },
                                        React.createElement(
                                            'div',
                                            { className: 'header' },
                                            React.createElement(
                                                'p',
                                                { className: 'title' },
                                                itemspecificationstxt
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row', id: 'cat_attrib' },
                                            React.createElement(catAttributesComp, propsnew)
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: 'form-group col-md-12' },
                                                React.createElement(
                                                    'label',
                                                    { id: 'detailsLabel' },
                                                    detailstxt
                                                ),
                                                React.createElement('textarea', { className: 'form-control checkable', id: 'details', name: 'details', value: this.state.details,
                                                    placeholder: 'Enter a brief description about your product here', rows: '8',
                                                    onChange: this.handleChange }),
                                                React.createElement('div', { className: 'error font-red', id: 'detailsError' })
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'form-items' },
                                        React.createElement(
                                            'div',
                                            { className: 'header' },
                                            React.createElement(
                                                'p',
                                                { className: 'title' },
                                                ' '+pricesofferstxt
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                "div",
                                                { className: " form-group col-md-4" },
                                                React.createElement("label", null, "Currency"),
                                                React.createElement(
                                                  "div",
                                                  { className: "input-group width-100 custom-position-relative" },
                                                  React.createElement(
                                                    "Select",
                                                    {
                                                      id: "currency",
                                                      name: "currency",
                                                      className: "form-control form-control-newheight border-right",
                                                    },
                                                    React.createElement(
                                                      "option",
                                                      { value: "2", selected: this.state.currency == "2" ? true : false },
                                                      "AED"
                                                    ),
                                                    React.createElement(
                                                      "option",
                                                      { value: "1", selected: this.state.currency == "1" ? true : false },
                                                      "USD"
                                                    ),
                                                    React.createElement("option", { value: "3", selected: this.state.currency == "3" ? true : false  }, "SAR")
                                                  ),
                                                  React.createElement(
                                                    'span',
                                                    {className : 'icon-dropdown fa fa-angle-down'}
                                                  )
                                                )
                                              ),
                                            React.createElement(
                                                'div',
                                                { className: ' form-group col-md-4' },
                                                React.createElement(
                                                    'label',
                                                    { id: 'old_priceLabel' },
                                                    pricetxt
                                                ),
                                                React.createElement(
                                                    'div',
                                                    { className: 'input-group' },
                                                    React.createElement('input', { type: 'text', id: 'old_price', name: 'old_price', value: this.state.old_price,
                                                        className: 'form-control', 'aria-label': '...',
                                                        onChange: this.handleChange }),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'input-group-btn' },
                                                        React.createElement(unitSelector, null)
                                                    ),
                                                    React.createElement('div', { id: 'old_priceError', className: 'font-red error' })
                                                )
                                            ),
                                            React.createElement(
                                                'div',
                                                { className: ' form-group col-md-4' },
                                                React.createElement(
                                                    'label',
                                                    { className: '', id: 'min_orderLabel' },
                                                    minimumordertxt
                                                ),
                                                React.createElement('input', { type: 'text', className: 'form-control checkable', id: 'min_order',
                                                    name: 'min_order', value: this.state.min_order, disabled: '', 'aria-label': '...',
                                                    onChange: this.handleChange }),
                                                React.createElement('div', { className: 'error font-red', id: 'min_orderError' })
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: 'col-md-12' },
                                                React.createElement('div', { id: 'old_price_error', className: 'error font-red' })
                                                // React.createElement(
                                                //     'a',
                                                //     {  href: '#', id: 'adofferlink', onClick: this.addofferPrice },
                                                //     addpricetxt
                                                // )
                                            ),
                                            React.createElement(offerElement, propoffers)
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(addPrice, null)
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: ' col-md-12 form-group' },
                                                React.createElement(
                                                    'div',
                                                    { className: 'checkbox-solid-sm' },
                                                    React.createElement('input', { type: 'checkbox', value: 'None', id: 'free', name: 'check',
                                                        onChange: thatMyproductlast.canfree }),
                                                    React.createElement('label', { htmlFor: 'free' }),
                                                    React.createElement(
                                                        'span',
                                                        null,
                                                        providesampletxt
                                                    )
                                                ),
                                                React.createElement('input',{ type: 'hidden',  id: 'frees', name: 'frees'})
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'form-items' },
                                        React.createElement(
                                            'div',
                                            { className: 'header' },
                                            React.createElement(
                                                'p',
                                                { className: 'title' },
                                                shippingdeliverytxt
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: ' form-group col-md-6' },
                                                React.createElement(
                                                    'label',
                                                    null,
                                                    icandelivertxt
                                                ),
                                                React.createElement(
                                                    'div',
                                                    { className: 'input-group' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'input-with-subscript' },
                                                        React.createElement('input', { type: 'text', className: 'form-control',
                                                            placeholder: 'Capacity', 'aria-label': '...', value: thatMyproductlast.state.capacity, id: 'capacitytxts', name: 'capacity', onChange: this.handleChange }),
                                                        React.createElement(
                                                            'span',
                                                            { id: 'unival' },
                                                            unittxt
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'input-group-btn' },
                                                        React.createElement(
                                                            'div',
                                                            { className: 'btn-group bootstrap-select' },
                                                            React.createElement(
                                                                'button',
                                                                { type: 'button',
                                                                    className: 'btn dropdown-toggle btn-default btn-block',
                                                                    'data-toggle': 'dropdown', title: 'PER WEEK' },
                                                                React.createElement(
                                                                    'span',
                                                                    { className: 'filter-option pull-left', id: 'freqbuy' },
                                                                    textoshow
                                                                ),
                                                                '\xA0',
                                                                React.createElement(
                                                                    'span',
                                                                    { className: 'bs-caret' },
                                                                    React.createElement('span', { className: 'fa fa-sort' })
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'div',
                                                                { className: 'dropdown-menu open' },
                                                                React.createElement('input', { type: 'hidden', name: 'deliverper', id: 'deliverper', value: 1 }),
                                                                React.createElement(
                                                                    'ul',
                                                                    { className: 'dropdown-menu inner', role: 'menu' },
                                                                    React.createElement(
                                                                        'li',
                                                                        { 'data-original-index': '1', className: this.state.deliverper == 1 ? 'selected':'' },
                                                                        React.createElement(
                                                                            'a',
                                                                            { tabindex: '0',
                                                                                className: '',
                                                                                'data-tokens': 'null',
                                                                                onClick: () => thatMyproductlast.changedFreq(perweektxt,1) },
                                                                            React.createElement(
                                                                                'span',
                                                                                { className: 'text' },
                                                                                perweektxt
                                                                            ),
                                                                            React.createElement('span', {
                                                                                className: 'fa fa-check check-mark' })
                                                                        )
                                                                    ),
                                                                    React.createElement(
                                                                        'li',
                                                                        { 'data-original-index': '2', className: this.state.deliverper == 2 ? 'selected':'' },
                                                                        React.createElement(
                                                                            'a',
                                                                            { tabindex: '0',
                                                                                className: '',
                                                                                'data-tokens': 'null',
                                                                                onClick: () => thatMyproductlast.changedFreq(permonthtxt,2) },
                                                                            React.createElement(
                                                                                'span',
                                                                                { className: 'text' },
                                                                                permonthtxt
                                                                            ),
                                                                            React.createElement('span', {
                                                                                className: 'fa fa-check check-mark' })
                                                                        )
                                                                    ),
                                                                    React.createElement(
                                                                        'li',
                                                                        { 'data-original-index': '3', className: this.state.deliverper == 3 ? 'selected':'' },
                                                                        React.createElement(
                                                                            'a',
                                                                            {
                                                                                tabindex: '0',
                                                                                className: '',
                                                                                'data-tokens': 'null',
                                                                                onClick: () => thatMyproductlast.changedFreq(peryeartxt,3) },
                                                                            React.createElement(
                                                                                'span',
                                                                                { className: 'text' },
                                                                                peryeartxt
                                                                            ),
                                                                            React.createElement('span', {
                                                                                className: 'fa fa-check check-mark' })
                                                                        )
                                                                    ),
                                                                    React.createElement(
                                                                        'li',
                                                                        { 'data-original-index': '4', className: this.state.deliverper == 4 ? 'selected':'' },
                                                                        React.createElement(
                                                                            'a',
                                                                            {
                                                                                tabindex: '0', className: '', 'data-tokens': 'null',
                                                                                onClick: () => thatMyproductlast.changedFreq(onetimeonlytxt,4) },
                                                                            React.createElement(
                                                                                'span',
                                                                                { className: 'text' },
                                                                                onetimeonlytxt
                                                                            )
                                                                        )
                                                                    )
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'select',
                                                                { name: 'cities', className: 'selectpicker',
                                                                    'data-title': 'Single Select',
                                                                    'data-style': 'btn-default btn-block',
                                                                    'data-menu-style': 'dropdown-blue', tabindex: '-98' },
                                                                React.createElement(
                                                                    'option',
                                                                    { value: 'id' },
                                                                    perweektxt
                                                                ),
                                                                React.createElement(
                                                                    'option',
                                                                    { value: 'ms' },
                                                                    permonthtxt
                                                                ),
                                                                React.createElement(
                                                                    'option',
                                                                    { value: 'ms' },
                                                                    peryeartxt
                                                                )
                                                            )
                                                        )
                                                    )
                                                )
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: 'form-group col-md-6' },
                                                React.createElement(
                                                    'label',
                                                    null,
                                                    manufacturingtxt
                                                ),
                                                React.createElement('input', { type: 'hidden', id: 'manufacturing_country',
                                                    name: 'manufacturing_country' }),
                                                React.createElement(
                                                    'div',
                                                    { className: 'btn-group bootstrap-select' },
                                                    React.createElement('input', { type: 'hidden', name: 'cntryselected', id: 'cntryselected' }),
                                                    React.createElement(
                                                        'button',
                                                        { type: 'button',
                                                            className: 'btn dropdown-toggle btn-default btn-block',
                                                            'data-toggle': 'dropdown',
                                                            title: thatMyproductlast.state.selectedcntryname },
                                                        React.createElement(
                                                            'span',
                                                            {
                                                                className: 'filter-option pull-left cntryselected' },
                                                            thatMyproductlast.state.selectedcntryname ? thatMyproductlast.state.selectedcntryname : 'United Arab Emirates'
                                                        ),
                                                        '\xA0',
                                                        React.createElement(
                                                            'span',
                                                            { className: 'bs-caret' },
                                                            React.createElement('span', { className: 'fa fa-sort' })
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'dropdown-menu open' },
                                                        React.createElement(
                                                            'ul',
                                                            { className: 'dropdown-menu inner', role: 'menu' },
                                                            thatMyproductlast.state.countries.map(function (countrielist1, il) {
                                                                return React.createElement(
                                                                    'li',
                                                                    { 'data-original-index': '1', key: il },
                                                                    React.createElement(
                                                                        'a',
                                                                        { tabindex: '0',
                                                                            className: '',
                                                                            'data-tokens': 'null',
                                                                            onClick: () => thatMyproductlast.changedCntry(countrielist1.en_name, countrielist1.co_code) },
                                                                        React.createElement(
                                                                            'span',
                                                                            {
                                                                                className: 'text' },
                                                                            countrielist1.en_name
                                                                        ),
                                                                        React.createElement('span', {
                                                                            className: 'fa fa-check check-mark' })
                                                                    )
                                                                );
                                                            })
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'select',
                                                        { name: 'cities', className: 'selectpicker',
                                                            'data-title': 'Single Select',
                                                            'data-style': 'btn-default btn-block',
                                                            'data-menu-style': 'dropdown-blue', tabindex: '-98' },
                                                        React.createElement(
                                                            'option',
                                                            { className: 'bs-title-option', value: '0' },
                                                            selectcountrytxt
                                                        ),
                                                        thatMyproductlast.state.countries.map(function (countrielist2, i2) {
                                                            return React.createElement(
                                                                'li',
                                                                { 'data-original-index': '1', key: i2 },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0',
                                                                        className: '',
                                                                        'data-tokens': 'null' },
                                                                    React.createElement(
                                                                        'span',
                                                                        {
                                                                            className: 'text' },
                                                                        countrielist2.en_name
                                                                    ),
                                                                    React.createElement('span', {
                                                                        className: 'fa fa-check check-mark' })
                                                                )
                                                            );
                                                        })
                                                    )
                                                )
                                            ),
                                            React.createElement(
                                                'div',
                                                { className: 'form-group col-md-6' },
                                                React.createElement(
                                                    'label',
                                                    null,
                                                    packagingtxt
                                                ),
                                                React.createElement(
                                                    'div',
                                                    { className: 'btn-group bootstrap-select' },
                                                    React.createElement(
                                                        'button',
                                                        { type: 'button',
                                                            className: 'btn dropdown-toggle btn-default btn-block',
                                                            'data-toggle': 'dropdown', title: 'Single Select' },
                                                        React.createElement(
                                                            'span',
                                                            { className: 'filter-option pull-left', id: 'selectedPacking' },
                                                            thatMyproductlast.state.package_type == '1' ? originaltxt
                                                                : thatMyproductlast.state.package_type == '2' ? thirdpartytxt
                                                                : thatMyproductlast.state.package_type == '3' ? custompackingtxt
                                                                    : thatMyproductlast.state.package_type == '3' ? otherpackingtxt : choosepackingtxt
                                                        ),
                                                        '\xA0',
                                                        React.createElement(
                                                            'span',
                                                            { className: 'bs-caret' },
                                                            React.createElement('span', { className: 'fa fa-sort' })
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'dropdown-menu open' },
                                                        React.createElement(
                                                            'ul',
                                                            { className: 'dropdown-menu inner', role: 'menu' },
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '1' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', 'attr-value': '1',
                                                                        className: '',
                                                                        onClick: () => this.changedVal("Original packing"),
                                                                        'data-tokens': 'null' },
                                                                    React.createElement(
                                                                        'span',
                                                                        {
                                                                            className: 'text' },
                                                                        originaltxt
                                                                    ),
                                                                    React.createElement('span', { className: 'fa fa-check check-mark' })
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '2' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', 'attr-value': '2',
                                                                        className: '',
                                                                        onClick: () => this.changedVal("Third party packing"),
                                                                        'data-tokens': 'null' },
                                                                    React.createElement(
                                                                        'span',
                                                                        {
                                                                            className: 'text' },
                                                                        thirdpartytxt
                                                                    ),
                                                                    React.createElement('span', { className: 'fa fa-check check-mark' })
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '3' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', 'attr-value': '3',
                                                                        className: '',
                                                                        onClick: () => this.changedVal("Custom packing"),
                                                                        'data-tokens': 'null' },
                                                                    React.createElement(
                                                                        'span',
                                                                        {
                                                                            className: 'text' },
                                                                        custompackingtxt
                                                                    ),
                                                                    React.createElement('span', { className: 'fa fa-check check-mark' })
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '3' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', 'attr-value': '4',
                                                                        className: '',
                                                                        onClick: () => this.changedVal("Other packing"),
                                                                        'data-tokens': 'null' },
                                                                    React.createElement(
                                                                        'span',
                                                                        {
                                                                            className: 'text' },
                                                                        otherpackingtxt
                                                                    ),
                                                                    React.createElement('span', { className: 'fa fa-check check-mark' })
                                                                )
                                                            )
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'select',
                                                        { name: 'packingtype', id: 'packingtype', className: 'selectpicker',
                                                            'data-title': 'Single Select',
                                                            'data-style': 'btn-default btn-block',
                                                            'data-menu-style': 'dropdown-blue', tabindex: '-98' },
                                                        React.createElement(
                                                            'option',
                                                            { value: '-1' },
                                                            thatMyproductlast.state.package_type == '1' ? originaltxt
                                                                : thatMyproductlast.state.package_type == '2' ? thirdpartytxt
                                                                : thatMyproductlast.state.package_type == '3' ? custompackingtxt
                                                                : thatMyproductlast.state.package_type == '3' ? otherpackingtxt : choosepackingtxt
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: '1' },
                                                            originaltxt
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: '2' },
                                                            thirdpartytxt
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: '3' },
                                                            custompackingtxt
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: '4' },
                                                            otherpackingtxt
                                                        )
                                                    )
                                                )
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { id: 'accordion', className: 'col-md-12', role: 'tablist',
                                                    'aria-multiselectable': 'true', style: margin17 },
                                                React.createElement(
                                                    'a',
                                                    { className: 'collapsed add-dimension', role: 'button',
                                                        'data-toggle': 'collapse', 'data-parent': '#accordion', href: '#dimension',
                                                        'aria-expanded': 'false', 'aria-controls': 'dimension' },
                                                    React.createElement(
                                                        'span',
                                                        null,
                                                        adddimensiontxt
                                                    )
                                                ),
                                                React.createElement(
                                                    'div',
                                                    { id: 'dimension', className: 'collapse', role: 'tabpanel',
                                                        'aria-labelledby': 'headingTwo' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'row' },
                                                        React.createElement(
                                                            'div',
                                                            { className: 'col-md-3 form-group' },
                                                            React.createElement(
                                                                'label',
                                                                null,
                                                                lengthtxt
                                                            ),
                                                            React.createElement('input', { type: 'text',id: 'lengthdm',name: 'lengthdm',value: thatMyproductlast.state.lengthdm, placeholder: '', className: 'form-control',onChange: this.handleChange })
                                                        ),
                                                        React.createElement(
                                                            'div',
                                                            { className: 'col-md-3 form-group' },
                                                            React.createElement(
                                                                'label',
                                                                null,
                                                                widthtxt
                                                            ),
                                                            React.createElement('input', { type: 'text',id: 'widthdm',name: 'widthdm',value: thatMyproductlast.state.widthdm, placeholder: '', className: 'form-control',onChange: this.handleChange })
                                                        ),
                                                        React.createElement(
                                                            'div',
                                                            { className: 'col-md-3 form-group' },
                                                            React.createElement(
                                                                'label',
                                                                null,
                                                                heighttxt
                                                            ),
                                                            React.createElement('input', { type: 'text',id: 'heightdm',name: 'heightdm',value: thatMyproductlast.state.heightdm , placeholder: '', className: 'form-control',onChange: this.handleChange })
                                                        ),
                                                        React.createElement(
                                                            'div',
                                                            { className: 'col-md-3 form-group' },
                                                            React.createElement(
                                                                'label',
                                                                null,
                                                                weighttxt
                                                            ),
                                                            React.createElement('input', { type: 'text',id: 'weightdm',name: 'weightdm',value: thatMyproductlast.state.weightdm, placeholder: '', className: 'form-control',onChange: this.handleChange })
                                                        )
                                                    )
                                                )
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: 'form-group col-md-6',
                                                    style: thatMyproductlast.state.freethere ? displayBlock : displayNone },
                                                React.createElement(
                                                    'label',
                                                    null,
                                                    yesicanprovidesampletxt
                                                ),
                                                React.createElement(
                                                    'div',
                                                    { className: 'btn-group bootstrap-select' },
                                                    React.createElement('input', { type: 'hidden', id: 'freeones', name: 'freeones' }),
                                                    React.createElement(
                                                        'button',
                                                        { type: 'button',
                                                            className: 'btn dropdown-toggle btn-default btn-block',
                                                            'data-toggle': 'dropdown', title: 'Single Select' },
                                                        React.createElement(
                                                            'span',
                                                            { className: 'filter-option pull-left',
                                                                id: 'freeone' },
                                                            freetxt
                                                        ),
                                                        '\xA0',
                                                        React.createElement(
                                                            'span',
                                                            { className: 'bs-caret' },
                                                            React.createElement('span', { className: 'fa fa-sort' })
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'dropdown-menu open' },
                                                        React.createElement(
                                                            'ul',
                                                            { className: 'dropdown-menu inner', role: 'menu' },
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '1' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', className: '',
                                                                        'data-tokens': 'null',
                                                                        onClick: () => thatMyproductlast.changedFree("FREE") },
                                                                    React.createElement(
                                                                        'span',
                                                                        { className: 'text' },
                                                                        freetxt
                                                                    ),
                                                                    React.createElement('span', {
                                                                        className: 'fa fa-check check-mark' })
                                                                )
                                                            ),
                                                            React.createElement(
                                                                'li',
                                                                { 'data-original-index': '2' },
                                                                React.createElement(
                                                                    'a',
                                                                    { tabindex: '0', className: '',
                                                                        'data-tokens': 'null',
                                                                        onClick: () => thatMyproductlast.changedFree("PAID") },
                                                                    React.createElement(
                                                                        'span',
                                                                        { className: 'text' },
                                                                        paidtxt
                                                                    ),
                                                                    React.createElement('span', {
                                                                        className: 'fa fa-check check-mark' })
                                                                )
                                                            )
                                                        )
                                                    ),
                                                    React.createElement(
                                                        'select',
                                                        { name: 'cities', className: 'selectpicker',
                                                            'data-title': 'Single Select',
                                                            'data-style': 'btn-default btn-block',
                                                            'data-menu-style': 'dropdown-blue', tabindex: '-98' },
                                                        React.createElement(
                                                            'option',
                                                            { className: 'bs-title-option', value: '' },
                                                            'Single Select'
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: 'fred' },
                                                            freetxt
                                                        ),
                                                        React.createElement(
                                                            'option',
                                                            { value: 'paid' },
                                                            paidtxt
                                                        )
                                                    )
                                                )
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'form-items payment-option' , style: displayNone },
                                        React.createElement(
                                            'div',
                                            { className: 'header' },
                                            React.createElement(
                                                'p',
                                                { className: 'title' },
                                                termsofpaymenttxt
                                            ),
                                            React.createElement(
                                                'p',
                                                { className: 'description' },
                                                wecanacceptpaymenttxt
                                            )
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'row' },
                                            React.createElement(
                                                'div',
                                                { className: 'col-md-12 radio-set image-radio' },
                                                React.createElement('input', { type: 'radio', name: 'credit-card', id: 'visa',
                                                    className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'visa' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'credit' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            creditcardtxt
                                                        )
                                                    )
                                                ),
                                                React.createElement('input', { type: 'radio', name: 'credit-card', id: 'mastercard',
                                                    className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'mastercard' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'paypal' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            paypaltxt
                                                        )
                                                    )
                                                ),
                                                React.createElement('input', { type: 'radio', name: 'banking', id: 'bank', className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'bank' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'bank-transfer' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            banktransfertxt
                                                        )
                                                    )
                                                ),
                                                React.createElement('input', { type: 'radio', name: 'banking', id: 'account',
                                                    className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'account' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'transfer-account' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            transfertoaccounttxt
                                                        )
                                                    )
                                                ),
                                                React.createElement('input', { type: 'radio', name: 'banking', id: 'lc', className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'lc' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'letter-credit' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            letterofcredittxt
                                                        )
                                                    )
                                                ),
                                                React.createElement('input', { type: 'radio', name: 'banking', id: 'cod', className: 'input-hidden' }),
                                                React.createElement(
                                                    'label',
                                                    { htmlFor: 'cod' },
                                                    React.createElement(
                                                        'div',
                                                        { className: 'selected' },
                                                        React.createElement('span', { className: 'fa fa-check' })
                                                    ),
                                                    React.createElement(
                                                        'div',
                                                        { className: 'radio-content' },
                                                        React.createElement('span', { className: 'cash' }),
                                                        React.createElement(
                                                            'p',
                                                            null,
                                                            cashondeliverytxt
                                                        )
                                                    )
                                                )
                                            )
                                        )
                                    )
                                ),
                                React.createElement(
                                    'div',
                                    { className: 'col-md-3', id: 'progress-table' },
                                    React.createElement(progressData, null)
                                )
                            )
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'row pull-right' },
                        React.createElement(
                            'div',
                            { className: 'col-md-12 ' },
                            React.createElement(
                                'button',
                                { className: 'btn  btn-fill btn-primary', onClick: thatMyproductlast.handleSubmit },
                                submittxt
                            )
                        )
                    )
                ),
                React.createElement(selectCategoryModal, null)
            );
        }
    }

});


// var req_id = document.location.href.substring(document.location.href.lastIndexOf('/') + 1);
//
// var topDiv = React.createElement(addProductTop, {requestid: req_id});
//
// ReactDOM.render(topDiv, document.getElementById('content'));