<h5 class="mb-3">{{ __('store.clientarea_domains_management_nameservers_title') }}</h5>
<p class="text-muted">{{ __('store.clientarea_domains_management_nameservers_description') }}</p>

@if($data)
    <form action="{{ route('store.auth.domains.manage.nameservers.update', $domain->id) }}" method="POST">
        @csrf
        <div id="nameserverInputs">
            @php
                $nameservers = $data['nameservers'] ?? [];
            @endphp
            @forelse($nameservers as $index => $ns)
                <div class="input-group mb-2 nameserver-input">
                    <span class="input-group-text">NS{{ $index + 1 }}</span>
                    <input type="text" class="form-control" name="nameservers[]" value="{{ $ns }}" placeholder="ns{{ $index + 1 }}.example.com" required>
                    @if($index > 1)
                        <button type="button" class="btn btn-outline-danger remove-ns">
                            <i class="fas fa-times"></i>
                        </button>
                    @endif
                </div>
            @empty
                <div class="input-group mb-2 nameserver-input">
                    <span class="input-group-text">NS1</span>
                    <input type="text" class="form-control" name="nameservers[]" placeholder="ns1.example.com" required>
                </div>
                <div class="input-group mb-2 nameserver-input">
                    <span class="input-group-text">NS2</span>
                    <input type="text" class="form-control" name="nameservers[]" placeholder="ns2.example.com" required>
                </div>
            @endforelse
        </div>
        
        <div class="d-flex gap-2 mt-3">
            <button type="button" class="btn btn-outline-primary" id="addNameserverBtn">
                <i class="fas fa-plus me-2"></i>Nameserver Ekle
            </button>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-2"></i>Kaydet
            </button>
        </div>
    </form>
@else
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>Nameserver bilgileri yüklenemedi.
    </div>
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('nameserverInputs');
    const addBtn = document.getElementById('addNameserverBtn');

    if (addBtn) {
        addBtn.addEventListener('click', function() {
            const count = container.querySelectorAll('.nameserver-input').length + 1;
            const inputGroup = document.createElement('div');
            inputGroup.className = 'input-group mb-2 nameserver-input';
            inputGroup.innerHTML = `
                <span class="input-group-text">NS${count}</span>
                <input type="text" class="form-control" name="nameservers[]" placeholder="ns${count}.example.com" required>
                <button type="button" class="btn btn-outline-danger remove-ns">
                    <i class="fas fa-times"></i>
                </button>
            `;
            container.appendChild(inputGroup);

            inputGroup.querySelector('.remove-ns').addEventListener('click', function() {
                inputGroup.remove();
                renumberNameservers();
            });
        });
    }

    // Remove nameserver handlers
    document.querySelectorAll('.remove-ns').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.nameserver-input').remove();
            renumberNameservers();
        });
    });

    function renumberNameservers() {
        document.querySelectorAll('.nameserver-input').forEach((input, index) => {
            input.querySelector('.input-group-text').textContent = `NS${index + 1}`;
        });
    }
});
</script>
@endpush

