@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 class="row mt-3">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[webhook_secret]">Webhook Secret</label>
            <input
                type="text"
                name="{{ $key }}[webhook_secret]"
                id="{{ $key }}[webhook_secret]"
                class="form-control"
                value="{{ old("{$key}.webhook_secret", $externalSupplierApiAuthAccess->value['webhook_secret'] ?? '') }}" />
            @if ($errors->has("{$key}.webhook_secret"))
                <div class="error handle-error">{{ $errors->first("{$key}.webhook_secret") }}</div>
            @endif
        </div>
    </div>

    <div class="row mt-3">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[create_url]">URL CREATE</label>
            <input
                type="text"
                name="{{ $key }}[create_url]"
                id="{{ $key }}[create_url]"
                class="form-control"
                value="{{ old("{$key}.create_url", $externalSupplierApiAuthAccess->value['create_url'] ?? '') }}" />
            @if ($errors->has("{$key}.create_url"))
                <div class="error handle-error">{{ $errors->first("{$key}.create_url") }}</div>
            @endif
        </div>
    </div>

    <div class="row mt-3">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[delete_url]">URL DELETE</label>
            <input
                type="text"
                name="{{ $key }}[delete_url]"
                id="{{ $key }}[delete_url]"
                class="form-control"
                value="{{ old("{$key}.delete_url", $externalSupplierApiAuthAccess->value['delete_url'] ?? '') }}" />
            @if ($errors->has("{$key}.delete_url"))
                <div class="error handle-error">{{ $errors->first("{$key}.delete_url") }}</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]');
        const webhookSecretInput = document.getElementById('{{ $key }}[webhook_secret]');
        const createUrlInput = document.getElementById('{{ $key }}[create_url]');
        const deleteUrlInput = document.getElementById('{{ $key }}[delete_url]');

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

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

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

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

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