@php
$key = $moduleAutomaticTranslations->key;
@endphp

@include('layouts.components.section-marker', ['section_name' => $moduleAutomaticTranslations->description])

<div class="card py-4 px-4">
    <div class="row mb-3">
        <div class="col">
            <div class="form-check">
                <input type="hidden" name="{{ $key }}[active]" value="0">
                <input
                    type="checkbox"
                    name="{{ $key }}[active]"
                    class="form-check-input"
                    id="{{ $key }}[active]"
                    {{ old("{$key}.active", $moduleAutomaticTranslations->value['active'] ?? false) ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $key }}[active]">Ativo</label>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[api_key]">Chave API</label>
            <textarea
                name="{{ $key }}[api_key]"
                id="{{ $key }}[api_key]"
                class="form-control"
                {{ old("{$key}.active", $moduleAutomaticTranslations->value['active'] ?? false) ? '' : 'disabled' }}>
                {{ old("{$key}.api_key", $moduleAutomaticTranslations->value['api_key'] ?? '') }}
            </textarea>

            @if ($errors->has("{$key}.api_key"))
                <div class="error handle-error">{{ $errors->first("{$key}.api_key") }}</div>
            @endif
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const checkboxApiKey = document.getElementById('{{ $key }}[active]');
        const textareaApiKey = document.getElementById('{{ $key }}[api_key]');

        if (textareaApiKey) {
            textareaApiKey.value = textareaApiKey.value.trim();
            textareaApiKey.disabled = !checkboxApiKey.checked;
        }

        checkboxApiKey.addEventListener('change', () => {
            if (textareaApiKey) {
                textareaApiKey.disabled = !checkboxApiKey.checked;
            }
        });
    });
</script>