{{-- authorizenet_config_fields --}}
@if ($field['method'] === 'AUTHORIZENET')
    @foreach ($field['configs'] as $key => $config)
        @php
            $isModeField = $key === 'AUTHORIZENET_MODE';
            $env = str_contains($key, 'SANDBOX') ? 'sandbox' : (str_contains($key, 'PRODUCTION') ? 'production' : '');
            $value = data_get(old($field['name']), $key) ?? ($field['value'][$key] ?? ($field['default'][$key] ?? ''));
        @endphp

        <div data-authorizenet-key="{{ $key }}"
            class="mb-3 authorizenet-field {{ !$isModeField ? 'authnet-credentials' : '' }}"
            data-env="{{ $env }}" @include('admin.panel.inc.field_wrapper_attributes')>

            <label class="form-label fw-bolder">{!! $config !!}</label>
            @include('admin.panel.fields.inc.translatable_icon')

            {{-- Mode Selector --}}
            @if ($isModeField)
                <select name="{{ $field['name'] }}[{{ $key }}]" class="form-select authorizenet-mode"
                    @include('admin.panel.inc.field_attributes', ['default_class' => 'form-select'])>
                    <option value="sandbox" @selected($value === 'sandbox')>Sandbox (Test)</option>
                    <option value="production" @selected($value === 'production')>Production (Live)</option>
                </select>
            @else
                <input type="text" name="{{ $field['name'] }}[{{ $key }}]" value="{{ $value }}"
                    @include('admin.panel.inc.field_attributes')>
            @endif

            {{-- Hint --}}
            @if (isset($field['hint'][$key]))
                <div class="form-text">{!! $field['hint'][$key] !!}</div>
            @endif
        </div>
    @endforeach
@endif


{{-- FIELD EXTRA JS --}}
@push('crud_fields_scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modeSelect = document.querySelector('.authorizenet-mode');
            const allFields = document.querySelectorAll('.authnet-credentials');

            function toggleAuthorizeNetFields() {
                const selectedMode = modeSelect.value;
                allFields.forEach(field => {
                    const env = field.getAttribute('data-env');
                    field.style.display = (!env || env === selectedMode) ? 'block' : 'none';
                });
            }

            if (modeSelect) {
                toggleAuthorizeNetFields();
                modeSelect.addEventListener('change', toggleAuthorizeNetFields);
            }
        });
    </script>
@endpush