<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>
<div class="wtai-voice-style-title">
    <span><?= $block->escapeHtml(__('Choose one method.')) ?></span>
</div>
<div class="wtai-use-ai-field-wrapper" 
    data-bind="
        attr: { 'data-wtai-no-ai-model': hasAiModelsAvailable() ? null : 1 },
        css: { 'wtai-voice-style-selected': isTrainedModelEnabled() }
    "
>
    <div class="wtai-field admin__scope-old">
        <input type="radio"
                class="input-radio"
                name="voice_and_style_method"
                id="wtaiUseAiModelBulk"
                value="ai_model"
                data-bind="
                    attr: { 'data-wtai-no-ai-model-target': hasAiModelsAvailable() ? null : 1 },
                    checked: voiceAndStyleMethod,
                    disable: !hasAiModelsAvailable()
                "
            />
        <label for="wtaiUseAiModelBulk" class="admin__field-label"
            data-bind="attr: { 'data-wtai-no-ai-model-target': hasAiModelsAvailable() ? null : 1 }">
            <?= $block->escapeHtml(__('Brand voice')) ?>
        </label>
    </div>
    <div class="wtai-field wtai-select-ai-model">
        <div class="admin__field-control wtai-ai-model-select-control">
            <select name="wtai_selected_ai_model" id="wtai-select-ai-model"
                class="admin__control-select wtai-select-ai-model"
                data-bind="
                    attr: { 'data-wtai-no-ai-model-target': hasAiModelsAvailable() ? null : 1 },
                    value: selectedAiModel,
                    event: {
                        focus: handleAiModelFocus
                    },
                    disable: !hasAiModelsAvailable()
                ">
                <option value="" selected><?= $block->escapeHtml(__('Select...')) ?></option>
            </select>
            <!-- ko if: !hasAiModelsAvailable() -->
                <span class="wtai-no-ai-model-select-overlay" data-wtai-no-ai-model-target="1"></span>
            <!-- /ko -->
        </div>
    </div>
    <div class="admin__field-tooltip wtai-small">
        <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
        <div class="admin__field-tooltip-content wtai-ai-model-tooltip-wrapper" data-target="dropdown">
            <div class="wtai-content-wrapper">
                <?= /* @noEscape */ $block->getTooltip('wtai.ai.model') ?>
            </div>
        </div>
    </div>
    <!-- ko if: !hasAiModelsAvailable() -->
        <div class="admin__field-tooltip wtai-small wtai-no-ai-model-tooltip wtai-no-ai-model-tooltip-select">
            <div class="admin__field-tooltip-content wtai-bottom-left" data-target="dropdown">
                <div class="wtai-content-wrapper">
                    <?= /* @noEscape */ $block->getNoAiModelAssignedTooltip() ?>
                </div>
                <div class="wtai-educational-tooltip-arrow wtai-educational-tooltip-arrow-top"></div>
            </div>
        </div>
    <!-- /ko -->
</div>
<div class="wtai-col wtai-col-1" data-bind="
    css: { 'wtai-voice-style-selected': isManualVoiceAndStyleSelected() }
">
    <div class="wtai-manual-voice-style-mask" data-bind="
        visible: !isManualVoiceAndStyleSelected(),
        click: handleManualFocus
    "></div>
    <div class="wtai-field admin__scope-old">
        <input type="radio"
                class="input-radio"
                name="voice_and_style_method"
                id="wtaiUseManualVoiceAndStyle"
                value="manual"
                data-bind="
                    checked: voiceAndStyleMethod
                "
            />
        <label for="wtaiUseManualVoiceAndStyle" class="admin__field-label">
            <?= $block->escapeHtml(__('Configure tones, style, audiences')) ?>
        </label>
    </div>
    <!-- <div class="wtai-col-title"><?= $block->escapeHtml(__('Or configure tones, style, audiences')) ?></div> -->
    <div class="row wtai-voice-and-style">
        <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,
                        event: {
                            focus: handleManualFocus
                        }
                    "/>
                <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,
                            event: {
                                focus: $parent.handleManualFocus
                            },
                            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,
                        disable: !toneStyleAllowed()
                    "
                />
                <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: {
                            blur: handleCustomToneStyleBlur,
                            focus: handleManualFocus
                        },
                        disable: !toneStyleAllowed()
                    "
                />
                <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,
                            event: {
                                focus: $parent.handleManualFocus
                            },
                            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,
                        event: { change: saveTonesAndStyles },
                        disable: !toneStyleAllowed()
                    "
                />
                <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: { 
                            blur: handleCustomToneStyleBlur,
                            focus: handleManualFocus
                        },
                        disable: !toneStyleAllowed()
                    "
                />
                <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,
                        event: {
                            focus: handleManualFocus
                        }
                    "/>
                <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,
                            event: {
                                focus: $parent.handleManualFocus
                            },
                            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>