@push('css')
<style>
.url-row {
    transition: all 0.3s ease;
}

.url-row:hover {
    background-color: rgba(0,0,0,0.02);
}

.input-group-text {
    min-width: 45px;
    justify-content: center;
}
</style>
@endpush
@push('js')
<script>
// URL counter
let urlCounter = {{ $urlList && count($urlList) ? count($urlList) : 1 }};

function addUrl() {
    const container = document.getElementById('urls-container');
    const emptyMessage = document.getElementById('empty-url-message');
    
    // Remove empty message if it exists
    if (emptyMessage) {
        emptyMessage.remove();
    }
    
    // Create the new row div
    const newRow = document.createElement('div');
    newRow.className = 'url-row p-3 border-bottom';
    
    // Create the row content
    newRow.innerHTML = `
        <div class="row align-items-center">
            <div class="col-1 text-center text-muted small">
                <span class="badge bg-light text-dark">${urlCounter}</span>
            </div>
            <div class="col-md-4 col-12 mb-2 mb-md-0">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="fas fa-heading text-muted"></i>
                    </span>
                    <input type="text" class="form-control" placeholder="{{ __('labels.enter_title') }}" 
                           name="urls[${urlCounter-1}][title]">
                </div>
            </div>
            <div class="col-md-5 col-12 mb-2 mb-md-0">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="fas fa-link text-muted"></i>
                    </span>
                    <input type="url" class="form-control" placeholder="https://example.com" 
                           name="urls[${urlCounter-1}][url]">
                    <button type="button" class="btn btn-outline-secondary copy-url-btn"
                            onclick="copyToClipboardFromInput(this)"
                            title="{{ __('labels.copy_link') }}">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-2 col-12">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-danger btn-sm" 
                            onclick="removeUrl(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // Append the new row to container
    container.appendChild(newRow);
    
    // Increment counter
    urlCounter++;
}

function removeUrl(button) {
    const row = button.closest('.url-row');
    row.remove();
    
    // Update indices of remaining rows
    const rows = document.querySelectorAll('.url-row');
    if (rows.length === 0) {
        // Add empty message if no rows left
        const container = document.getElementById('urls-container');
        container.innerHTML = `
            <div id="empty-url-message" class="text-center py-4 text-muted">
                <i class="fas fa-link fa-2x mb-3"></i>
                <p>{{ __('labels.no_urls_added') }}</p>
            </div>
        `;
        urlCounter = 1;
    } else {
        rows.forEach((row, index) => {
            const badge = row.querySelector('.badge');
            if (badge) badge.textContent = index + 1;
            
            // Update input names
            row.querySelectorAll('input').forEach(input => {
                const match = input.name.match(/urls\[(\d+)\]/);
                if (match) {
                    input.name = input.name.replace(/urls\[\d+\]/, `urls[${index}]`);
                }
            });
        });
        urlCounter = rows.length + 1;
    }
}

// Copy URL from input field
function copyToClipboardFromInput(button) {
    const urlInput = button.closest('.input-group').querySelector('input[type="url"]');
    if (urlInput && urlInput.value) {
        copyToClipboard(urlInput.value, button);
    } else {
        Swal.fire({
            icon: 'warning',
            title: "{{ __('labels.copy_failed') }}",
            text: "{{ __('labels.no_url_to_copy') }}"
        });
    }
}
</script>
@endpush

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-link me-2"></i>{{ __('labels.url_links') }}
        </h5>
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
        <button type="button" class="btn btn-primary btn-sm" onclick="addUrl()">
            <i class="fas fa-plus me-1"></i> {{ __('labels.add_url') }}
        </button>
        @endif
    </div>
    <div class="card-body">
        <div id="urls-container">
            @if($urlList && count($urlList))
                @foreach ($urlList as $index => $urlItem)
                    <div class="url-row p-3 border-bottom">
                        <div class="row align-items-center">
                            {{-- Index --}}
                            <div class="col-1 text-center text-muted small">
                                <span class="badge bg-light text-dark">{{ $index+1 }}</span>
                            </div>
                            
                            {{-- Title --}}
                            <div class="col-md-4 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-heading text-muted"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="{{ __('labels.enter_title') }}" 
                                           name="urls[{{ $index }}][title]" value="{{ $urlItem['title'] }}"
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- URL --}}
                            <div class="col-md-5 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-link text-muted"></i>
                                    </span>
                                    <input type="url" class="form-control" placeholder="https://example.com" 
                                           name="urls[{{ $index }}][url]" value="{{ $urlItem['url'] }}"
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                    
                                    {{-- Copy URL Button --}}
                                    
                                    <button type="button" class="btn btn-outline-secondary" 
                                            @if(isset($readonly) && $readonly)
                                            onclick="copyToClipboard('{{ $urlItem['url'] }}', this)"
                                            @else
                                            onclick="copyToClipboardFromInput(this)"
                                            @endif
                                            title="{{ __('labels.copy_link') }}">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            
                            {{-- Actions --}}
                            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                            <div class="col-md-2 col-12">
                                <div class="d-flex gap-2">
                                    {{-- Copy Button --}}
                                    {{-- <button type="button" class="btn btn-outline-primary btn-sm flex-fill"
                                            onclick="copyToClipboard('{{ $urlItem['url'] }}', this)"
                                            title="{{ __('labels.copy_link') }}">
                                        <i class="fas fa-copy"></i>
                                    </button> --}}
                                    
                                    {{-- Delete Button --}}
                                    <button type="button" class="btn btn-danger btn-sm " 
                                            onclick="removeUrl(this)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                {{-- Empty State --}}
                <div id="empty-url-message" class="text-center py-4 text-muted">
                    <i class="fas fa-link fa-2x mb-3"></i>
                    <p>{{ __('labels.no_urls_added') }}</p>
                </div>
            @endif
        </div>
    </div>
</div>