@push('css')
<style>
.qualification-row {
    transition: all 0.3s ease;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

.qualification-row:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.input-group-text {
    min-width: 45px;
    justify-content: center;
}
</style>
@endpush

@push('js')
<script>
// Qualification counter
let qualificationCounter = {{ isset($qualifications) && count($qualifications) ? count($qualifications) : 1 }};

function addQualification() {
    const container = document.getElementById('qualifications-container');
    const emptyMessage = document.getElementById('empty-qualification-message');
    
    // Remove empty message if it exists
    if (emptyMessage) {
        emptyMessage.remove();
    }
    
    const currentIndex = qualificationCounter;
    
    // Create HTML string template
    const qualificationRow = `
        <div class="qualification-row">
            <div class="row align-items-center">
                <div class="col-1 text-center text-muted small">
                    <span class="badge bg-light text-dark">${currentIndex}</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-certificate text-muted"></i>
                        </span>
                        <input type="text" 
                               class="form-control" 
                               name="qualifications[${currentIndex}][degree]" 
                               placeholder="{{ __('labels.degree_name') }}">
                    </div>
                </div>
                <div class="col-md-3 col-12 mb-2 mb-md-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-university text-muted"></i>
                        </span>
                        <input type="text" 
                               class="form-control" 
                               name="qualifications[${currentIndex}][institution]" 
                               placeholder="{{ __('labels.institution') }}">
                    </div>
                </div>
                <div class="col-md-2 col-12 mb-2 mb-md-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-calendar-alt text-muted"></i>
                        </span>
                        <input type="text" 
                               class="form-control" 
                               name="qualifications[${currentIndex}][year]" 
                               placeholder="{{ __('labels.year') }}"
                               maxlength="4"
                               pattern="\\d{4}"
                               title="{{ __('messages.four_digit_year') }}">
                    </div>
                </div>
                <div class="col-md-2 col-12">
                    <button type="button" 
                            class="btn btn-outline-danger btn-sm w-100"
                            onclick="removeQualification(this)">
                        <i class="fas fa-trash me-1"></i>{{ __('labels.remove') }}
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // Append using insertAdjacentHTML
    container.insertAdjacentHTML('beforeend', qualificationRow);
    
    // Increment counter
    qualificationCounter++;
}


function removeQualification(button) {
    const row = button.closest('.qualification-row');
    
    // Confirm before deletion
    Swal.fire({
        title: '{{ __("labels.are_you_sure") }}',
        text: '{{ __("labels.delete_qualification_warning") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: '{{ __("labels.yes_delete") }}',
        cancelButtonText: '{{ __("labels.cancel") }}'
    }).then((result) => {
        if (result.isConfirmed) {
            row.remove();
            
            // Update indices of remaining rows
            const rows = document.querySelectorAll('.qualification-row:not(.d-none)');
            if (rows.length === 0) {
                // Add empty message if no rows left
                const container = document.getElementById('qualifications-container');
                container.innerHTML = `
                    <div id="empty-qualification-message" class="text-center py-4 text-muted">
                        <i class="fas fa-graduation-cap fa-2x mb-3"></i>
                        <p>{{ __('labels.no_qualifications_added') }}</p>
                    </div>
                `;
                
                // Append template back
                const templateDiv = document.createElement('div');
                templateDiv.innerHTML = document.getElementById('qualification-template').outerHTML;
                container.appendChild(templateDiv.firstChild);
                
                qualificationCounter = 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 degreeMatch = input.name.match(/qualifications\[(\d+)\]\[degree\]/);
                        const institutionMatch = input.name.match(/qualifications\[(\d+)\]\[institution\]/);
                        const yearMatch = input.name.match(/qualifications\[(\d+)\]\[year\]/);
                        
                        if (degreeMatch) {
                            input.name = input.name.replace(/qualifications\[\d+\]\[degree\]/, `qualifications[${index}][degree]`);
                        } else if (institutionMatch) {
                            input.name = input.name.replace(/qualifications\[\d+\]\[institution\]/, `qualifications[${index}][institution]`);
                        } else if (yearMatch) {
                            input.name = input.name.replace(/qualifications\[\d+\]\[year\]/, `qualifications[${index}][year]`);
                        }
                    });
                });
                qualificationCounter = rows.length + 1;
            }
            
            // Show success message
            Swal.fire({
                icon: 'success',
                title: '{{ __("labels.deleted") }}',
                text: '{{ __("messages.qualification_deleted") }}',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}
</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-graduation-cap me-2"></i>{{ __('labels.qualifications') }}
        </h5>
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
        <button type="button" class="btn btn-primary btn-sm" onclick="addQualification()">
            <i class="fas fa-plus me-1"></i> {{ __('labels.add_qualification') }}
        </button>
        @endif
    </div>
    <div class="card-body">
        <div id="qualifications-container">
            @if(isset($qualifications) && count($qualifications))
                @foreach($qualifications as $index => $qualification)
                    <div class="qualification-row" id="qualification-{{ $index }}">
                        <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>
                            
                            {{-- Degree --}}
                            <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-certificate text-muted"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control @error('qualifications.' . $index . '.degree') is-invalid @enderror" 
                                           name="qualifications[{{ $index }}][degree]" 
                                           value="{{ old('qualifications.' . $index . '.degree', $qualification['degree'] ?? '') }}"
                                           placeholder="{{ __('labels.degree_name') }}"
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- Institution --}}
                            <div class="col-md-3 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-university text-muted"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control @error('qualifications.' . $index . '.institution') is-invalid @enderror" 
                                           name="qualifications[{{ $index }}][institution]" 
                                           value="{{ old('qualifications.' . $index . '.institution', $qualification['institution'] ?? '') }}"
                                           placeholder="{{ __('labels.institution') }}"
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- Year --}}
                            <div class="col-md-2 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-calendar-alt text-muted"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control @error('qualifications.' . $index . '.year') is-invalid @enderror" 
                                           name="qualifications[{{ $index }}][year]" 
                                           value="{{ old('qualifications.' . $index . '.year', $qualification['year'] ?? '') }}"
                                           placeholder="{{ __('labels.year') }}"
                                           maxlength="4"
                                           pattern="\d{4}"
                                           title="{{ __('messages.four_digit_year') }}"
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- Actions --}}
                            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                            <div class="col-md-2 col-12">
                                <button type="button" 
                                        class="btn btn-outline-danger btn-sm w-100"
                                        onclick="removeQualification(this)">
                                    <i class="fas fa-trash me-1"></i>{{ __('labels.remove') }}
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                {{-- Empty State --}}
                <div id="empty-qualification-message" class="text-center py-4 text-muted">
                    <i class="fas fa-graduation-cap fa-2x mb-3"></i>
                    <p>{{ __('labels.no_qualifications_added') }}</p>
                </div>
            @endif
            

        </div>
    </div>
</div>