@foreach($settings as $setting)
<form class="editTransactionSettingForm mt-3 mb-4" data-id="{{ $setting->id }}"
    data-url="{{ route('admin.transaction-settings.createOrUpdate', $setting->id) }}">
    @csrf
    @method('PUT')

    <div class="row">
        <!-- Gateway Name -->
        <div class="mb-3 col-12">
            <label class="mb-2 fw-semibold">Gateway Name <span class="text-danger">*</span></label>
            <input type="text" name="gateway_name" class="form-control" value="{{ $setting->gateway_name }}" required
                readonly>
        </div>

        <!-- Credentials -->
        <div class="mb-3 col-12">
            <label class="mb-2 fw-semibold">Gateway Credentials <span class="text-danger">*</span></label>
            <div class="credentials-wrapper" data-id="{{ $setting->id }}">
                @php
                $readonlyKeys = [
                'stripe' => ['public_key', 'secret_key', 'webhook_secret'],
                'sslcommerz' => ['store_id', 'store_password', 'testmode', 'is_localhost'],
                'bank_transfer' => ['bank_name', 'account_number', 'account_name', 'routing_number', 'branch_name'],
                'paypal' => ['client_id', 'client_secret', 'mode'],
                ];

                $credentials = is_array($setting->credentials)
                ? $setting->credentials
                : json_decode($setting->credentials, true) ?? [];

                $gatewayReadonlyKeys = $readonlyKeys[$setting->gateway_name] ?? [];
                @endphp

                @foreach($credentials as $key => $value)
                <div class="row mb-2 credential-row align-items-center">
                    <div class="col-12 col-md-4">
                        <input type="text" name="credentials_keys[]" class="form-control" value="{{ $key }}"
                            placeholder="Key" {{ in_array($key, $gatewayReadonlyKeys) ? 'readonly' : '' }} required>
                    </div>
                    <div class="col-10 col-md-7">
                        @if($setting->gateway_name === 'sslcommerz' && in_array($key, ['testmode', 'is_localhost']))
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="credentials_values[{{ $key }}]" id="{{ $key }}"
                                value="1" {{ $value==1 ? 'checked' : '' }}>
                            <label class="form-check-label" for="{{ $key }}"> {{\Illuminate\Support\Str::replace('_', ' ', ucfirst($key))
                                }} </label>
                        </div>
                        @else
                        <input type="text" name="credentials_values[{{ $key }}]" class="form-control"
                            value="{{ $value }}" placeholder="Value" required>
                        @endif
                    </div>
                    <div class="col-2 col-md-1 text-end">
                        <button type="button" class="btn btn-danger btn-sm removeCredential">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                @endforeach
            </div>
            <button type="button" class="btn btn-success btn-sm addCredential">
                <i class="fas fa-plus"></i> Add Field
            </button>
        </div>

        <!-- Description -->
        <div class="mb-3 col-12">
            <label class="mb-2 fw-semibold">Description <span class="text-danger">*</span></label>
            <textarea name="credentials_description" class="form-control"
                required>{{ $setting->credentials_description }}</textarea>
        </div>

        <!-- Submit -->
        <div class="mb-3 col-12 text-end">
            <button type="submit" class="btn btn-primary submitButton">Save</button>
        </div>
    </div>
</form>
@endforeach

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const requiredKeys = {
        stripe: ['public_key', 'secret_key', 'webhook_secret'],
        sslcommerz: ['store_id', 'store_password', 'testmode', 'is_localhost'],
        bank_transfer: ['bank_name', 'account_name', 'account_number', 'routing_number', 'branch_name'],
        paypal: ['client_id', 'client_secret', 'mode'],
    };

    // Add new credential row
    document.querySelectorAll('.addCredential').forEach(button => {
        button.addEventListener('click', () => {
            const wrapper = button.previousElementSibling;
            const row = document.createElement('div');
            row.classList.add('row', 'mb-2', 'credential-row');
            row.innerHTML = `
                <div class="col-12 col-md-4">
                    <input type="text" name="credentials_keys[]" class="form-control" placeholder="Key" required>
                </div>
                <div class="col-10 col-md-7">
                    <input type="text" name="credentials_values[]" class="form-control" placeholder="Value" required>
                </div>
                <div class="col-2 col-md-1 text-end">
                    <button type="button" class="btn btn-danger btn-sm removeCredential">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            wrapper.appendChild(row);
        });
    });

    // Remove credential row
    document.addEventListener('click', e => {
        if (e.target.closest('.removeCredential')) {
            e.target.closest('.credential-row').remove();
        }
    });

    // Handle form submission
    document.querySelectorAll('.editTransactionSettingForm').forEach(form => {
        form.addEventListener('submit', async e => {
            e.preventDefault();
            const submitButton = form.querySelector('.submitButton');
            const url = form.dataset.url;
            const gateway = form.querySelector('input[name="gateway_name"]').value;
            const credentials = {};

            // Collect credentials
            form.querySelectorAll('[name^="credentials_values"]').forEach(input => {
                const key = input.name.replace(/credentials_values\[|\]/g, '');
                credentials[key] = input.type === 'checkbox' ? (input.checked ? 1 : 0) : input.value.trim();
            });

            // Validate required fields
            if (requiredKeys[gateway]) {
                for (let key of requiredKeys[gateway]) {
                    if (!credentials[key] && credentials[key] !== 0) {
                        toastr.error(`The credential field '${key}' is required for ${gateway}.`);
                        return;
                    }
                }
            }

            // Confirm save
            const confirm = await swal.fire({
                title: 'Are you sure?',
                text: 'You are about to save these settings.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, Save it!',
            });

            if (!confirm.isConfirmed) return;

            submitButton.disabled = true;
            submitButton.textContent = 'Saving...';

            const formData = new FormData(form);
            formData.set('credentials', JSON.stringify(credentials));

            try {
                const response = await axios.post(url, formData);
                toastr.success(response.data.message || 'Transaction setting saved successfully.');
                setTimeout(() => window.location.reload(), 1000);
            } catch (error) {
                if (error.response?.data?.errors) {
                    Object.values(error.response.data.errors).forEach(err => toastr.error(err.join('\n')));
                } else {
                    toastr.error(error.response?.data?.message || 'An unexpected error occurred.');
                }
            } finally {
                submitButton.disabled = false;
                submitButton.textContent = 'Save';
            }
        });
    });
});
</script>