<?php defined('C5_EXECUTE') or die("Access Denied.");

$form = Loader::helper('form');
$json = Loader::helper('json');

// Set's helpful, accessible instruction title attribute text on our UI buttons.
// Saves us battling with some of the convoluted JS string concatenation below
// where the t() function is involved. Saves hitting the function multiple times too.
// @var String
$removeOptionText = t('Remove Option');

if (isset($akSelectAllowMultipleValues) && $akSelectAllowMultipleValues &&
    isset($akSelectAllowOtherValues) && $akSelectAllowOtherValues
) { // display autocomplete form
    $attrKeyID = $this->attributeKey->getAttributeKeyID();
    ?>

    <style type="text/css">
        .ccm-ui .ccm-attribute-type-select-autocomplete .newAttrValue,
        .ccm-ui .ccm-attribute-type-select-autocomplete .existingAttrValue {
            padding-top: 3px;
            margin-right: 12px;
            float: left;
            line-height: 20px;
        }

        .ccm-ui .ccm-attribute-type-select-autocomplete h6 {
            margin-bottom: 2px;
        }

        .ccm-ui .ccm-attribute-type-select-autocomplete .well {
            margin-bottom: 5px;
            max-width: 500px;
            padding-bottom: 12px;
        }

        .ccm-ui .ccm-attribute-type-select-autocomplete .text-error {
            color: #b94a48 !important;
            font-weight: bold;
        }
    </style>

    <div class="ccm-attribute-type-select-autocomplete">

        <div id="selectedAttrValueRows_<?php echo $attrKeyID; ?>" class="well well-small clearfix">
            <h6><?php echo t('Selected Options') ?></h6>
            <?php
            foreach ($selectedOptions as $optID) {
                $opt = SelectAttributeTypeOption::getByID($optID);

                ?>
                <div class="existingAttrValue">
                    <?php echo
                    $form->hidden(
                         $this->field('atSelectOptionID') . '[]',
                         $opt->getSelectAttributeOptionID(),
                         array('style' => 'position:relative;')); ?>
                    <span class="badge"><?php echo $opt->getSelectAttributeOptionValue() ?></span>
                    <a class="text-error" title="<?php echo $removeOptionText ?>" href="javascript:void(0);"
                       onclick="$(this).parent().remove()">x</a>
                </div>
            <?php
            }

            // now we get items from the post
            $vals = $this->post('atSelectNewOption');
            if (is_array($vals)) {
                foreach ($vals as $v) {
                    ?>
                    <div class="newAttrValue">
                        <?php echo $form->hidden($this->field('atSelectNewOption') . '[]', $v) ?>
                        <span class="badge"><?php echo $v ?></span>
                        <a class="text-error" title="<?php echo $removeOptionText ?>"
                           onclick="ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID ?>.remove(this)"
                           href="javascript:void(0)">x</a>
                    </div>
                <?php
                }
            }

            ?>
        </div>
	<span style="position: relative">

	<?php
    echo $form->text(
              'newAttrValueRows' . $attrKeyID,
              array(
                  'class' => 'ccm-attribute-type-select-autocomplete-text',
                  'style' => 'position:relative; width: 200px'));
    ?>
        <input type="button" class="btn ccm-input-button" value="<?php echo t('Add') ?>"
               onclick="ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID ?>.addButtonClick(); return false"/>
	</span>
    </div>

    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            var availableTags = <?php echo $json->encode($opt_values);?>;
            $("#newAttrValueRows<?php echo $attrKeyID?>").autocomplete({
                source: "<?php echo $this->action('load_autocomplete_values')?>",
                select: function (event, ui) {

                    ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID?>.add(ui.item.value);
                    $(this).val('');
                    return false;
                }
            });

            $("#newAttrValueRows<?php echo $attrKeyID?>").bind("keydown", function (e) {
                if (e.keyCode == 13) { // comma or enter
                    if ($(this).val().length > 0) {
                        ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID?>.add($(this).val());
                        $(this).val('');
                        $("#newAttrValueRows<?php echo $this->attributeKey->getAttributeKeyID()?>").autocomplete("close");
                    }
                    return false;
                }
            });
        });

        var ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID?> = {
            addButtonClick: function () {
                // Get and cache our row element
                var valrow = $("input[name=newAttrValueRows<?php echo $attrKeyID?>]");
                // Get and cache our row element's value
                var valrowval = valrow.val();

                // Any text actually entered? If value passed, continue!
                // A length check was being done on keydown (enter press) but not
                // when button clicked (!). Fixed now. Might avoid some of those ugly, empty
                // option rows appearing in the attribute select type options db.
                if (valrowval.length > 0) {
                    ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID?>.add(valrowval);
                    valrow.val('');
                    $("#newAttrValueRows<?php echo $this->attributeKey->getAttributeKeyID()?>").autocomplete("close");
                }
                return false;
            },
            add: function (value) {
                var newRow = document.createElement('div');
                newRow.className = 'newAttrValue';
                newRow.innerHTML = '<input class="input" name="<?php echo $this->field('atSelectNewOption')?>[]" type="hidden" /> ';
                newRow.innerHTML += '<span class="badge"></span>';
                newRow.innerHTML += ' <a class="text-error" title="<?php echo $removeOptionText?>" onclick="ccmAttributeTypeSelectTagHelper<?php echo $attrKeyID?>.remove(this)" href="javascript:void(0)">x</a>';
                newRow = $(newRow);
                newRow.find('span.badge').text(value);
                newRow.find('input.input').val(value);
                $('#selectedAttrValueRows_<?php echo $attrKeyID;?>').append(newRow);
            },
            remove: function (a) {
                $(a.parentNode).remove();
            }
        }
        //]]>
    </script>
<?php
} else {
    ?>

    <style type="text/css">
        .ccm-ui .newAttrValueRow {
            padding-top: 2px;
        }
    </style>

    <?php

    $options = $this->controller->getOptions();

    if ($akSelectAllowMultipleValues) {
        ?>

        <?php foreach ($options as $opt) { ?>
            <label class="checkbox">
                <?php echo
                $form->checkbox(
                     $this->field('atSelectOptionID') . '[]',
                     $opt->getSelectAttributeOptionID(),
                     in_array($opt->getSelectAttributeOptionID(), $selectedOptions)); ?>
                <?php echo $opt->getSelectAttributeOptionDisplayValue() ?></label>
        <?php } ?>
    <?php
    } else {
        $opts = array('' => t('** None'));
        foreach ($options as $opt) {
            $opts[$opt->getSelectAttributeOptionID()] = $opt->getSelectAttributeOptionDisplayValue();
        }
        ?>
        <?php echo $form->select($this->field('atSelectOptionID') . '[]', $opts, $selectedOptions[0]); ?>

    <?php
    }

    if ($akSelectAllowOtherValues) {
        ?>
        <div id="newAttrValueRows<?php echo $this->attributeKey->getAttributeKeyID() ?>" class="newAttrValueRows"></div>
        <div style="padding-top: 5px;">
            <a title="<?php echo t('Add Another Option') ?>" class="btn btn-small" href="javascript:void(0)"
               onclick="ccmAttributeTypeSelectHelper.add(<?php echo $this->attributeKey->getAttributeKeyID() ?>, '<?php echo
               $this->field(
                    'atSelectNewOption') ?>[]')">
                <?php echo t('Add Another Option') ?>
            </a>
        </div>
    <?php } ?>

    <script type="text/javascript">
        //<![CDATA[
        var ccmAttributeTypeSelectHelper = {
            add: function (akID, field) {
                var newRow = document.createElement('div');
                newRow.className = 'newAttrValueRow';
                newRow.innerHTML = '<input name="' + field + '" type="text" value="" /> ';
                newRow.innerHTML += '<a title="<?php echo $removeOptionText?>" class="btn btn-mini btn-danger" onclick="ccmAttributeTypeSelectHelper.remove(this)" href="javascript:void(0)"><i class="icon icon-white icon-trash"></i></a>';
                $('#newAttrValueRows' + akID).append(newRow);
            },
            remove: function (a) {
                $(a.parentNode).remove();
            }
        };
        //]]>
    </script>
<?php } ?>
