<?php
$translate = $this->plugin('translate');
$escape = $this->plugin('escapeHtml');

$selectProperty = $this->propertySelect([
    'name' => 'value[__INDEX__][property_id]',
    'options' => ['empty_option' => $translate('Select property')],
]);
$templateLiteral = '
<div class="field">
    <div class="field-meta">
        <label>' . $translate('Add text value') . '</label>
    </div>
    <div class="inputs">
        ' . $selectProperty . '
        <textarea name="value[__INDEX__][value]"></textarea>
        <label><input type="radio" name="value[__INDEX__][is_public]" value="1" checked> ' . $translate('Public') . '</label>
        <label><input type="radio" name="value[__INDEX__][is_public]" value="0"> ' . $translate('Not public') . '</label><br>
        <input type="hidden" name="value[__INDEX__][type]" value="literal">
        <button type="button" class="remove-value">' . $translate('Remove') . '</button>
    </div>
</div>';
$templateResource = '
<div class="field">
    <div class="field-meta">
        <label>' . $translate('Add resource value') . '</label>
    </div>
    <div class="inputs">
        ' . $selectProperty . '
        <input type="text" name="value[__INDEX__][value_resource_id]" placeholder="' . $this->escapeHtml($translate('Resource ID')) . '">
        <label><input type="radio" name="value[__INDEX__][is_public]" value="1" checked> ' . $translate('Public') . '</label>
        <label><input type="radio" name="value[__INDEX__][is_public]" value="0"> ' . $translate('Not public') . '</label><br>
        <input type="hidden" name="value[__INDEX__][type]" value="resource">
        <button type="button" class="remove-value">' . $translate('Remove') . '</button>
    </div>
</div>';
$templateUri = '
<div class="field">
    <div class="field-meta">
        <label>' . $translate('Add URI value') . '</label>
    </div>
    <div class="inputs">
        ' . $selectProperty . '
        <input type="text" name="value[__INDEX__][id]" placeholder="' . $this->escapeHtml($translate('URI')) . '">
        <input type="text" name="value[__INDEX__][label]" placeholder="' . $this->escapeHtml($translate('Label')) . '">
        <label><input type="radio" name="value[__INDEX__][is_public]" value="1" checked> ' . $translate('Public') . '</label>
        <label><input type="radio" name="value[__INDEX__][is_public]" value="0"> ' . $translate('Not public') . '</label><br>
        <input type="hidden" name="value[__INDEX__][type]" value="uri">
        <button type="button" class="remove-value">' . $translate('Remove') . '</button>
    </div>
</div>';
?>
<fieldset>
<legend><?php echo $translate('Values'); ?></legend>
<div class="field">
    <div class="field-meta">
        <label>Set value visibility</label>
    </div>
    <div class="inputs">
        <?php echo $this->propertySelect([
            'name' => 'set_value_visibility[property_id]',
            'attributes' => [
                'class' => 'chosen-select',
                'multiple' => true,
                'data-placeholder' => 'Select properties', // @translate
            ],
        ]); ?>
        <label><input type="radio" name="set_value_visibility[is_public]" value="1"> <?php echo $translate('Public'); ?></label>
        <label><input type="radio" name="set_value_visibility[is_public]" value="0"> <?php echo $translate('Not public'); ?></label>
    </div>
</div>
<div id="values"
    data-template-literal="<?php echo $this->escapeHtml($templateLiteral); ?>"
    data-template-resource="<?php echo $this->escapeHtml($templateResource); ?>"
    data-template-uri="<?php echo $this->escapeHtml($templateUri); ?>"
>
    <div class="field-container"></div>
    <button type="button" class="value-add-button" data-type="literal"><?php echo $translate('Add text value'); ?></button>
    <button type="button" class="value-add-button" data-type="resource"><?php echo $translate('Add resource value'); ?></button>
    <button type="button" class="value-add-button" data-type="uri"><?php echo $translate('Add URI value'); ?></button>
</div>
</fieldset>
<script>
$(document).ready(function() {
    // Add a value field.
    var index = 0;
    var addValueField = function(type) {
        var container = $('#values');
        switch (type) {
            case 'resource':
                template = container.data('template-resource');
                break;
            case 'uri':
                template = container.data('template-uri');
                break;
            case 'literal':
            default:
                template = container.data('template-literal');
        }
        container.children('.field-container').append($.parseHTML(template.replace(/__INDEX__/g, index++)));
    };
    $('.value-add-button').on('click', function(e) {
        addValueField($(this).data('type'));
    });
    $(document).on('click', '.field-container .remove-value', function(e) {
        $(this).closest('.field').remove();
    });
});
</script>
