{include file="./common_helpers.inc.html" inline}

{function render_block options=[]}
    {$block_id = $id|default:$options.id}
    {$class_id = 'crm-source-settings-block-'|cat:$block_id}
    {$wrapper_id = uniqid($class_id)}
    <div class="fields-group {$class_id}" id="{$wrapper_id}">
        <div class="name crm-section">{$options.name|escape}</div>
        <div class="value">
            {$options.toggle_html|default:''}
        </div>
        <div class="crm-block js-crm-block {if $options.hidden|default:0}is-hidden{/if}">
            {$options.html}
        </div>
    </div>
{/function}

{function render_optional_block options=[]}

    {$_name = $options.checkbox_name}
    {$_is_checked = $options.is_checked|default:''}
    {$block_id = $id|default:$options.id}
    {$toggle_id = uniqid('js-ibutton-'|cat:$block_id)}

    {capture assign=script_html}
        <script>
            (function($) {
               /* var $toggle = $('#{$toggle_id}');
                $toggle.iButton({
                    labelOn : "",
                    labelOff : "",
                    classContainer: "c-ibutton ibutton-container mini"
                });
                $toggle.change(function () {
                    var $el = $(this),
                        $field = $el.closest('.field'),
                        $block = $field.find('.js-crm-block');
                    if ($el.is(':checked')) {
                        $block.show().find(':input').attr('disabled', false);
                        $block.trigger('toggled', [true]);
                    } else {
                        $block.hide().find(':input').attr('disabled', true);
                        $block.trigger('toggled', [false]);
                    }
                }).trigger('change');*/
                var $toggle = $('#wrapper-{$toggle_id}');
                $toggle.waSwitch({
                ready: function (wa_switch) {
                    let $label = wa_switch.$wrapper.siblings('label');
                    wa_switch.$label = $label;
                    wa_switch.active_text = $label.data('active-text');
                    wa_switch.inactive_text = $label.data('inactive-text');
                },
                change: function(active, wa_switch) {
                    var $field = $toggle.closest('.fields-group'),
                        $block = $field.find('.js-crm-block');

                    if (active) {
                        $block.slideDown(350);
                        $block.find(':input').attr('disabled', false);
                        $block.trigger('toggled', [true]);
                        wa_switch.$label.text(wa_switch.active_text);
                    }
                    else {
                        $block.slideUp(350);
                        $block.find(':input').attr('disabled', true);
                        $block.trigger('toggled', [false]);
                        wa_switch.$label.text(wa_switch.inactive_text); 
                    }
                }
            });
            })(jQuery);
        </script>
    {/capture}

    {capture assign=toggle_html}
        {*<input type="hidden" name="{$_name}" value="0"><p>
        <label class="gray" for="{$toggle_id}">[`Disabled`]</label>
            <input type="checkbox" class="js-ibutton" id="{$toggle_id}" name="{$_name}" value="1"
               {if $_is_checked}checked="checked"{/if}>
        <label for="{$toggle_id}">[`Enabled`]</label></p>*}

        <p>
            <input type="hidden" name="{$_name}" value="0">
            <span class="switch smaller" id="wrapper-{$toggle_id}">
                <input type="checkbox" class="js-ibutton" id="{$toggle_id}" name="{$_name}" value="1" {if $_is_checked} checked{/if}>
            </span>
            <label for="{$toggle_id}" data-active-text="[`Enabled`]" data-inactive-text="[`Disabled`]">{if $_is_checked}[`Enabled`]{else}[`Disabled`]{/if}</label>
        </p>
    {/capture}

    {$options.toggle_html = $toggle_html|cat:$script_html}
    {$options.hidden = !$_is_checked}
    {render_block options=$options}


{/function}