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

@include('layouts.components.section-marker', ['section_name' => $externalSupplierApiAuthAccess->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", $externalSupplierApiAuthAccess->value['active'] ?? false) ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $key }}[active]">Ativo</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[api_key]">API_KEY</label>
            <input
                type="text"
                name="{{ $key }}[api_key]"
                id="{{ $key }}[api_key]"
                class="form-control"
                value="{{ old("{$key}.api_key", $externalSupplierApiAuthAccess->value['api_key'] ?? '') }}" />
            @if ($errors->has("{$key}.api_key"))
                <div class="error handle-error">{{ $errors->first("{$key}.api_key") }}</div>
            @endif
        </div>
    </div>
</div>

<script>
    // disable input if is not active
    document.addEventListener('DOMContentLoaded', () => {
        const isActive = document.getElementById('{{ $key }}[active]');
        const apiKeyInput = document.getElementById('{{ $key }}[api_key]');

        if (apiKeyInput) {
            apiKeyInput.value = apiKeyInput.value.trim();
            apiKeyInput.disabled = !isActive.checked;
        }

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