{% extends "admin/cms/page/plugin/change_form.html" %}

{% block field_sets %}
    <div class="well-wrapper">
        <div class="well btn-preview js-btn-preview text-center clearfix">
            <p class="text-center text-muted"><span class="fa fa-fw fa-eye"></span> Preview</p>
            <a>Example Button</a>
        </div>
    </div>

    {# Styling #}
    <style>
        .collapse {
            visibility: visible !important;
            display: block;
        }

        .well {
            position: fixed;
            text-align: center;
            z-index: 1000;
            width: inherit;
            border-radius: 0;
            top: 0;
            left: 0;
        }

        .well-wrapper {
            height: 90px;
            float: left;
            position: relative;
            margin: 0%;
            width: 100%;
        }

        input[type=checkbox], input[type=radio] {
            margin: 0 0 2px 0;
        }

        .form-row.field-btn_block > .checkbox-row {
            padding-left: 96px;
        }
    </style>

    {{ block.super }}

    {# Javascript for preview (must be after the rest of the fields, because we rely on global variables set there. #}

    <script>
        if (!$) {
            $ = django.jQuery;
        }
        $(document).ready(function () {
            var buttonContextTriggers = $('.js-btn-group-context-btn_context .btn');
            var textLinkContextTriggers = $('.js-btn-group-context-txt_context .btn');
            var sizesTriggers = $('.js-btn-group-sizes .btn');

            var previewButton = $('.js-btn-preview a');
            var previewButtonText = previewButton.text();

            // Init defaults
            var currentButtonContextTriggerValue;
            var currentTextLinkContextTriggerValue;
            var currentSizesTriggerValue;
            var currentBlockTriggerValue;
            var currentTypeSwitch ;

            // Init text/button switch
            var typeSwitch = $('#id_type_0, #id_type_1');
            var buttonElements = $('.field-btn_context, .field-btn_size, .field-btn_block');
            var textElements = $('.field-txt_context');

            // Set btn-block
            var btnBlock = $('#id_btn_block');

            var setBtnBlock = function () {
                if ($('#id_btn_block:checkbox:checked').length == 1) {
                    previewButton.addClass('btn-block');
                    currentBlockTriggerValue = 'btn-block';
                } else {
                    previewButton.removeClass('btn-block');
                    currentBlockTriggerValue = '';
                }
            };

            setBtnBlock();

            btnBlock.on('click', function () {
                setBtnBlock();
            });

            // Set button context
            buttonContextTriggers.each(function (index, item) {
                if ($(item).find('input').attr('checked') == 'checked') {
                    var context = $(item).find('input[checked="checked"]').val();
                    currentButtonContextTriggerValue = context;
                    if (typeSwitch.val() == 'btn') {
                        $('.js-btn-preview a').addClass('btn-' + context);
                    }
                }
            });

            // Set textlink context
            textLinkContextTriggers.each(function (index, item) {
                if ($(item).find('input').attr('checked') == 'checked') {
                    var context = $(item).find('input[checked="checked"]').val();
                    currentTextLinkContextTriggerValue = context;
                    if (typeSwitch.val() == 'lnk') {
                        $('.js-btn-preview .btn').addClass('text-' + context);
                    }
                }
            });


            // Set sizes
            sizesTriggers.each(function (index, item) {
                if ($(item).find('input').attr('checked') == 'checked') {
                    var size = $(item).find('input[checked="checked"]').val();
                    $('.js-btn-preview .btn').addClass('btn-' + size);
                    currentSizesTriggerValue = size;
                }
            });

            // Set button context of elements for preview
            buttonContextTriggers.on('click', function (e) {
                var context = $(this).find('input').val();

                previewButton.removeClass('btn-' + currentButtonContextTriggerValue);
                previewButton.addClass('btn-' + context);

                currentButtonContextTriggerValue = context;
            });

            // Set text link context of elements for preview
            textLinkContextTriggers.on('click', function (e) {
                var context = $(this).find('input').val();

                previewButton.removeClass('text-' + currentTextLinkContextTriggerValue);
                previewButton.addClass('text-' + context);

                currentTextLinkContextTriggerValue = context;
            });

            // Set sizes of elements for preview
            sizesTriggers.on('click', function (e) {
                var size = $(this).find('input').val();

                previewButton.removeClass('btn-' + currentSizesTriggerValue);
                previewButton.addClass('btn-' + size);

                currentSizesTriggerValue = size;
            });

            // Update text in button for preview
            previewButton.text($("#id_label").val());

            $("#id_label").on('input', function () {
                if ($(this).val()) {
                    $('.js-btn-preview a').text($(this).val());
                } else {
                    $('.js-btn-preview a').text(previewButtonText);
                }
                refreshIcons();
            });

            // Set Icon of button
            $.each(['icon_left', 'icon_right'], function (index, name) {
                var iconPicker = window['iconPicker_' + name];
                var enableIconCheckbox = window['enableIconCheckbox_' + name];

                // update code
                var updateIconPreview = function () {
                    var iconSelected = window['iconSelected_' + name];
                    var iconSelectedCss = window['iconSelectedCss_' + name];
                    previewButton.find('.js-icon-position-' + name).remove();
                    var iconHtml = '<i class="js-icon-position-' + name + ' ' + iconSelectedCss + '"></i> '
                    if (name === 'icon_left') {
                        previewButton.prepend(iconHtml);
                    }
                    if (name === 'icon_right') {
                        previewButton.append(iconHtml);
                    }
                };

                // on change
                iconPicker.on('change', updateIconPreview);
                enableIconCheckbox.on('change', updateIconPreview);

                // initial
                enableIconCheckbox.trigger('change');
            });

            var refreshIcons = function () {
                $.each(['icon_left', 'icon_right'], function (index, name) {
                    var enableIconCheckbox = window['enableIconCheckbox_' + name];
                    enableIconCheckbox.trigger('change');
                });
            };

            // Update class of preview button based on classes
            var extraClasses = $("#id_classes");
            previewButton.addClass(extraClasses.val());

            extraClasses.on('input', function () {
                if (currentTypeSwitch == 'btn') {
                    previewButton.attr('class', 'btn ' + currentBlockTriggerValue + ' btn-' + currentButtonContextTriggerValue + ' btn-' + currentSizesTriggerValue + ' ' + $(this).val());
                }
                if (currentTypeSwitch == 'lnk') {
                    previewButton.attr('class', 'text-' + currentTextLinkContextTriggerValue + ' ' + $(this).val());
                }
            });

            // Init current type
            setCurrentType = function () {
                typeSwitch.each(function (index, name) {
                    if ($(this).is(':checked')) {
                        currentTypeSwitch = $(this).val();
                    }
                });

                if (currentTypeSwitch == 'btn') {
                    previewButton.addClass('btn');
                    previewButton.addClass('btn-' + currentButtonContextTriggerValue);
                    previewButton.addClass('btn-' + currentSizesTriggerValue);
                    previewButton.removeClass('text-' + currentTextLinkContextTriggerValue);
                    textElements.hide();
                    buttonElements.show();
                }

                if (currentTypeSwitch == 'lnk') {
                    previewButton.removeClass('btn');
                    previewButton.removeClass('btn-' + currentButtonContextTriggerValue);
                    previewButton.removeClass('btn-' + currentSizesTriggerValue);
                    previewButton.removeClass('btn-block');
                    previewButton.addClass('text-' + currentTextLinkContextTriggerValue);
                    textElements.show();
                    buttonElements.hide();
                }

            };

            setCurrentType();

            typeSwitch.on('change', function () {
                setCurrentType();
                console.log(currentTypeSwitch);
            });


        });
    </script>




{% endblock %}
