@head

<style>
#header {
    width: 100%;
    height: 10vh;
    box-shadow: 0 1px 2px #000;
    display: flex;
}
#headerContent {
    flex: 1;
    display: flex;
}
.headerTitle {
    flex: 1;
    align-self: center;
    text-align: center;
}
#container {
    width: 100%;
    height: 90vh;
    display: flex;
    box-shadow: 0 -1px 2px #000;
}
#nav {
    flex: 1;
    box-shadow: 1px 0 2px #000;
    text-align: center;
}
#content {
    flex: 4;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    padding: 64px;
    margin: 96px;
}
.navBt {
    margin: 64px;
}
</style>

@headcontent

@endhead

@body

<div id="header">

    <div id="headerContent">

        <h1 class="headerTitle">Admin mode</h1>

    </div>
    <div style="flex: 1"></div>

</div>

<div id="container">

    <div id="nav">

        @foreach(let option of options)

            <button type="button" class="navBt" action="{{ option.action }}">{{ option.title }}</button>

        @endforeach

    </div>

    <div id="content">

        @bodycontent

    </div>

</div>

<script>

    $('.navBt').on('click', function() {
        var action = $(this).attr('action');

        $.ajax({
            url: action,
            data: JSON.stringify({ 
                token: '{{ x_token() }}'
            }),
            type: 'POST',
        }).done(function(response) {

            var parser = new DOMParser();
            var html = parser.parseFromString(response, 'text/html').body.children[0];
            
            $('#adminMainContent').append(html);

            var bt = $('<button>');
            $(bt).attr('type', 'button');
            $(bt).html('Add');
            $(bt).css({'width': 128, 'margin-left': '50%', 'transform': 'translateX(-64px)'});
            $(bt).on('click', () => {
                var engine = $('#engine').val();
                var url = $('#url').val();

                if (url === null || url === '') {
                    return alert('URL is required');
                }

                $.ajax({
                    url: '/adminDownloadProduct',
                    data: JSON.stringify({
                        token: '{{ x_token() }}',
                        engine: engine,
                        url: url
                    }),
                    type: 'POST'
                }).done(function(response) {
                    var result = JSON.parse(response);

                    switch (result.type) {
                        case 'AliExpress':
                            var screen = $('<div>');
                            $(screen).css({'width': '100%', 'height': '100%', 'top': 0, 'left:': 0, 'position': 'fixed', 'background': 'rgba(0, 0, 0, .5)'});
                            $('body').append(screen);

                            var wizard = $('<div>');
                            $(wizard).css({'overflow-y': 'scroll', 'width': 480, 'height': '90%', 'background': '#ebebeb', 'box-shadow': '1px 1px 2px #000', 'position': 'fixed', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%,-50%)'});
                            $(screen).append(wizard);

                            var close = $('<span>');
                            $(close).css({'position': 'absolute', 'top': 6, 'right': 12, 'cursor': 'pointer', 'color': '#999'});
                            $(close).html('x');
                            $(close).on('mouseenter', function() {
                                $(this).css('color', '#600');
                            });
                            $(close).on('mouseleave', function() {
                                $(this).css('color', '#999');
                            });
                            $(close).on('click', function() {
                                $(screen).remove();
                            });
                            $(wizard).append(close);

                            var img = $('<img>');
                            $(img).attr('src', result.img);
                            $(img).css({'width': '60%', 'display': 'block', 'margin': '36px auto', 'box-shadow': '1px 1px 2px #000'});
                            $(wizard).append(img);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('URL: ');

                            var url = $('<input>');
                            $(url).attr('type', 'url');
                            $(url).attr('disabled', 'disabled');
                            $(url).val(result.url);
                            $(url).css({'width': 256});
                            $(label).append(url);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Title: ');

                            var title = $('<input>');
                            $(title).attr('type', 'text');
                            $(title).val(result.title);
                            $(title).css({'width': 256});
                            $(label).append(title);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Category: ');

                            var category = $('<input>');
                            $(category).attr('type', 'text');
                            $(category).css({'width': 256});
                            $(label).append(category);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Sub category: ');

                            var subCategory = $('<input>');
                            $(subCategory).attr('type', 'text');
                            $(subCategory).css({'width': 256});
                            $(label).append(subCategory);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Price: ');

                            var price = $('<input>');
                            $(price).attr('type', 'text');
                            $(price).attr('disabled', 'disabled');
                            $(price).val(result.price);
                            $(price).css({'width': 256});
                            $(label).append(price);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Currency: ');

                            var currency = $('<select>');
                            $(currency).css({'width': 256});
                            
                            var curr = [{val: 1, name: 'USD'}, {val: 3.84, name: 'PLN'}, {val: 0.89, name: 'Euro'}];
                            curr.forEach(element => {
                                var opt = $('<option>');
                                $(opt).val(element.val);
                                $(opt).html(element.name);
                                $(currency).append(opt);
                            });
                            $(currency).on('change', function() {
                                var now = result.price;
                                var New = (now * $(this).val()).toFixed(2);
                                $(price).val(New);
                            });
                            $(label).append(currency);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Over price: ');

                            var overPrice = $('<input>');
                            $(overPrice).attr('type', 'text');
                            $(overPrice).css({'width': 256});
                            $(label).append(overPrice);
                            $(wizard).append(label);

                            var lb = $('<label>');
                            $(lb).css({'display': 'block'});    
                            $(lb).html('Old price: ');

                            var oldPrice = $('<input>');
                            $(oldPrice).attr('type', 'text');
                            $(oldPrice).css({'width': 256});
                            $(oldPrice).attr('disabled', 'disabled');
                            $(lb).append(oldPrice);
                            $(wizard).append(lb);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Promotion type: ');

                            var promotionType = $('<input>');
                            $(promotionType).attr('type', 'text');
                            $(promotionType).attr('disabled', 'disabled');
                            $(promotionType).css({'width': 256});
                            $(label).append(promotionType);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Promotion color: ');

                            var promotionColor = $('<input>');
                            $(promotionColor).attr('type', 'color');
                            $(promotionColor).attr('disabled', 'disabled');
                            $(label).append(promotionColor);
                            $(wizard).append(label);

                            var label = $('<label>');
                            $(label).css({'display': 'block'});
                            $(label).html('Promotion: ');

                            var ch = false;
                            var check = $('<input>');
                            $(check).attr('type', 'checkbox');
                            $(check).on('change', function() {
                                ch = !ch;
                                if (ch) {
                                    $(oldPrice).removeAttr('disabled');
                                    $(promotionType).removeAttr('disabled');
                                    $(promotionColor).removeAttr('disabled');
                                }
                                else {
                                    $(oldPrice).attr('disabled', 'disabled');
                                    $(promotionType).attr('disabled', 'disabled');
                                    $(promotionColor).attr('disabled', 'disabled');
                                }
                            });
                            $(label).append(check);
                            $(label).insertBefore(lb);

                            var bt = $('<button>');
                            $(bt).attr('type', 'button');
                            $(bt).css({'width': 128, 'display': 'block', 'margin': '0 auto', 'margin-bottom': 36});
                            $(bt).on('click', () => {
                                if (isNaN(parseFloat($(overPrice).val()))) {
                                    return alert('Over price must be a number');
                                }
                                if (ch && isNaN(parseFloat($(oldPrice).val()))) {
                                    return alert('Old price must be a number');
                                }
                                if ($(category).val() === '' || $(category).val() === null) {
                                    return alert('Complete category field');
                                }
                                if ($(subCategory).val() === '' || $(subCategory).val() === null) {
                                    return alert('Complete Sub category field');
                                }
                                $(screen).remove();
                                $.ajax({
                                    url: '/adminSaveProduct',
                                    type: 'POST',
                                    data: JSON.stringify({
                                        token: '{{ x_token() }}',
                                        url: $(url).val(),
                                        img: $(img).attr('src'),
                                        title: $(title).val(),
                                        category: $(category).val(),
                                        subCategory: $(subCategory).val(),
                                        price: (parseFloat($(price).val()) + parseFloat($(overPrice).val())).toFixed(2),
                                        promotion: ch,
                                        oldPrice: $(oldPrice).val(),
                                        promotionType: $(promotionType).val(),
                                        promotionColor: $(promotionColor).val(),
                                        type: 'AliExpress'
                                    })
                                }).done(function(res) {
                                    if (Boolean(res) === true) {
                                        return alert('Success');
                                    }
                                    else {
                                        return alert('Error');
                                    }
                                });
                            });
                            $(bt).html('Add');
                            $(wizard).append(bt);
                            break;
                        default:
                                break;
                    }
                });
            });
            $('.master').append(bt);

        }).fail(function(xhr) {

        });
    });

</script>

@endbody