<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>
<div class="wtai-col wtai-col-1">
    <div class="row">
        <fieldset class="wtai-fieldset">
            <div class="wtai-fieldset-title"><?= $block->escapeHtml(__('Select tones')) ?></div>
            <div class="wtai-error-message"></div>
            <div class="wtai-field">
                <input type="checkbox"
                    class="admin__control-checkbox wtai-checkbox-select-all"
                    value="all"
                    id="wtaiToneAll"
                    data-bind="
                        enable: toneStyleAllowed,
                        checked: allTonesSelected
                    "/>
                <label class="wtai-label admin__field-label wtai-strong" for="wtaiToneAll">
                    <?= $block->escapeHtml(__('Select all')) ?>
                </label>
            </div>
            <!-- ko foreach: tones -->
                <div class="wtai-field" data-bind="attr: {
                        title: $parent.getToolTipCombinationDisallowed(
                            $data.id,
                            'Tone'
                        )
                    }">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        name="tones[]"
                        data-bind="
                            attr: {
                                id: 'wtaiTone' + $data.id,
                            },
                            value: $data.id,
                            checked: $parent.tonesSelected,
                            disable: $parent.isCombinationDisallowed(
                                $data.id,
                                'Tone'
                            ) || !$parent.toneStyleAllowed()
                        "/>
                    <label class="wtai-label admin__field-label" data-bind="
                        attr: { for: 'wtaiTone' + $data.id },
                        text: $data.name
                    "></label>
                </div>
            <!-- /ko -->
            
            <!-- Add custom tone input -->
            <div class="wtai-field">
                <input type="checkbox"
                    class="admin__control-checkbox"
                    value="custom"
                    name="tones[]"
                    id="wtaiCustomToneGenerate"
                    data-bind="
                        checked: tonesSelected
                    "
                />
                <label class="wtai-label admin__field-label" for="wtaiCustomToneGenerate">
                    <?= $block->escapeHtml(__('Custom')) ?>
                </label>
            </div>
            <div class="wtai-field admin__field-control wtai-custom">
                <input type="text"
                    name="custom_tone"
                    class="admin__control-text"
                    data-bind="
                        textInput: customTone,
                        attr: { maxlength: rules().maxCustomToneLength },
                        event: { input: handleCustomToneStyle },
                    "
                />
                <p class="wtai-text-length" data-bind="text: getCustomToneLength()"></p>
            </div>
        </fieldset>
        <fieldset class="wtai-fieldset">
            <div class="wtai-fieldset-title"><?= $block->escapeHtml(__('Select style')) ?></div>
            <div class="wtai-error-message"></div>
            <!-- ko foreach: styles -->
                <div class="wtai-field admin__scope-old" data-bind="attr: {
                        title: $parent.getToolTipCombinationDisallowed(
                            $data.id,
                            'Style'
                        )
                    }">
                    <input type="radio"
                        class="input-radio"
                        name="styles"
                        data-bind="
                            attr: {
                                id: 'wtaiStyle' + $data.id,
                            },
                            value: $data.id,
                            checked: $parent.stylesSelected,
                            disable: $parent.isCombinationDisallowed(
                                    $data.id,
                                    'Style'
                                ) || !$parent.toneStyleAllowed()
                            "/>
                    <label class="wtai-label admin__field-label" data-bind="
                        attr: { for: 'wtaiStyle' + $data.id },
                        text: $data.name
                    "></label>
                </div>
            <!-- /ko -->
            
            <!-- Add custom style input -->
            <div class="wtai-field admin__scope-old">
                <input type="radio"
                    class="input-radio"
                    value="custom"
                    name="styles"
                    id="wtaiCustomStyleGenerate"
                    data-bind="
                        checked: stylesSelected
                    "
                />
                <label class="wtai-label admin__field-label" for="wtaiCustomStyleGenerate">
                    <?= $block->escapeHtml(__('Custom')) ?>
                </label>
            </div>
            <div class="wtai-field admin__field-control wtai-custom">
                <input type="text"
                    name="custom_style"
                    class="admin__control-text"
                    data-bind="
                        textInput: customStyle,
                        attr: { maxlength: rules().maxCustomStyleLength },
                        event: { input: handleCustomToneStyle },
                    "
                />
                <p class="wtai-text-length" data-bind="text: getCustomStyleLength()"></p>
            </div>
        </fieldset>
        <fieldset class="wtai-fieldset">
            <div class="wtai-fieldset-title"><?= $block->escapeHtml(__('Select audiences')) ?></div>
            <div class="wtai-error-message"></div>
            <div class="wtai-field">
                <input type="checkbox"
                    class="admin__control-checkbox wtai-checkbox-select-all"
                    value="all"
                    id="wtaiAudienceAll"
                    data-bind="
                        checked: allAudienceSelected
                    "/>
                <label class="wtai-label admin__field-label wtai-strong" for="wtaiAudienceAll">
                    <?= $block->escapeHtml(__('Select all')) ?>
                </label>
            </div>
            <!-- ko foreach: audiences -->
                <div class="wtai-field">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        name="audience[]"
                        data-bind="
                            attr: {
                                id: 'wtaiAudience' + $data.id,
                            },
                            value: $data.id,
                            checked: $parent.audienceSelected,
                            disable: $parent.isCombinationDisallowed(
                                $data.id,
                                'Audience'
                            )"/>
                    <label class="wtai-label admin__field-label" data-bind="
                        attr: { for: 'wtaiAudience' + $data.id },
                        text: $data.name
                    "></label>
                </div>
            <!-- /ko -->
        </fieldset>
    </div>
</div>