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

@include('layouts.components.section-marker', ['section_name' => $module360->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", $module360->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 }}[embed]">Código Embed</label>
            <textarea
                name="{{ $key }}[embed]"
                id="{{ $key }}[embed]"
                class="form-control"
                {{ old("{$key}.active", $module360->value['active'] ?? false) ? '' : 'disabled' }}>
                {{ old("{$key}.embed", $module360->value['embed'] ?? '') }}
            </textarea>

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

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const checkboxEmbed = document.getElementById('{{ $key }}[active]');
        const textareaEmbed = document.getElementById('{{ $key }}[embed]');

        if (textareaEmbed) {
            textareaEmbed.value = textareaEmbed.value.trim();
            textareaEmbed.disabled = !checkboxEmbed.checked;
        }

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