@extends('user.layout.master')
@section('title', 'Review Extracted Data')
@section('content')

<div class="template-section-container resume-create-page">
    <div class="template-section-header">
        <div class="template-section-title" style="display: flex;">
            <a href="{{ route('user.resumes.upload.form') }}" class="back-arrow" style="margin-right: 10px; margin-top: -5px;">
                <div class="arrow-icon"></div>
            </a>Review Extracted Data
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
        <div style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <div style="max-width: 1400px; margin: 0 auto;">
        <!-- Header Info -->
        <div style="background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
            <h3 style="color: #333; margin-bottom: 1rem;">
                <i class="fas fa-file-upload" style="color: #0B9E8C;"></i> 
                Resume Uploaded Successfully
            </h3>
            <p style="color: #666; margin-bottom: 0;">
                Your resume has been uploaded. Please review and fill in the information below. Your uploaded resume preview is on the right.
            </p>
        </div>

        <form action="{{ route('user.resumes.upload.confirm') }}" method="POST" id="resumeForm">
            @csrf
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
                <!-- Left Column - All Information (scrollable) -->
                <div style="max-height: 900px; overflow-y: auto; padding-right: 0.5rem;">
                    <!-- Personal Information -->
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-user"></i> Personal Information
                        </h4>
                        
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Full Name *</label>
                            <input type="text" name="name" value="{{ $uploadData['parsed_data']['name'] ?? $uploadData['name'] }}" 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;" required>
                        </div>

                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Email *</label>
                            <input type="email" name="email" value="{{ $uploadData['parsed_data']['email'] ?? '' }}" 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;" required>
                        </div>

                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Phone</label>
                            <input type="text" name="phone" value="{{ $uploadData['parsed_data']['phone'] ?? '' }}" 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
                        </div>

                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Location</label>
                            <input type="text" name="location" value="{{ $uploadData['parsed_data']['location'] ?? '' }}" 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
                        </div>

                        <div>
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Website</label>
                            <input type="url" name="website" value="{{ $uploadData['parsed_data']['website'] ?? '' }}" 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
                        </div>
                    </div>

                    <!-- Professional Summary -->
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-file-alt"></i> Professional Summary
                        </h4>
                        <textarea name="summary" rows="4" 
                                  style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; resize: vertical;">{{ $uploadData['parsed_data']['summary'] ?? '' }}</textarea>
                    </div>
                    <!-- Work Experience -->
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-briefcase"></i> Work Experience
                        </h4>
                        <div id="experiences-container">
                            @if(!empty($uploadData['parsed_data']['experiences']))
                                @foreach($uploadData['parsed_data']['experiences'] as $index => $experience)
                                    <div class="experience-item" style="border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #f8f9fa;">
                                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                                            <h5 style="margin: 0; color: #333;">Experience {{ $index + 1 }}</h5>
                                            <button type="button" onclick="removeExperience(this)" style="background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem;">
                                                <i class="fas fa-times"></i> Remove
                                            </button>
                                        </div>
                                        
                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Position *</label>
                                                <input type="text" name="experiences[{{ $index }}][position]" value="{{ $experience['position'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                                            </div>
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Company *</label>
                                                <input type="text" name="experiences[{{ $index }}][company]" value="{{ $experience['company'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                                            </div>
                                        </div>
                                        
                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Start Date</label>
                                                <input type="date" name="experiences[{{ $index }}][start_date]" value="{{ $experience['start_date'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            </div>
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">End Date</label>
                                                <input type="date" name="experiences[{{ $index }}][end_date]" value="{{ $experience['end_date'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Description</label>
                                            <textarea name="experiences[{{ $index }}][description]" rows="3" 
                                                      style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; resize: vertical;">{{ $experience['description'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        
                        <button type="button" onclick="addExperience()" style="background: #0B9E8C; color: white; border: none; padding: 0.75rem 1rem; border-radius: 4px; cursor: pointer;">
                            <i class="fas fa-plus"></i> Add Experience
                        </button>
                    </div>

                    <!-- Education -->
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-graduation-cap"></i> Education
                        </h4>
                        <div id="educations-container">
                            @if(!empty($uploadData['parsed_data']['educations']))
                                @foreach($uploadData['parsed_data']['educations'] as $index => $education)
                                    <div class="education-item" style="border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #f8f9fa;">
                                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                                            <h5 style="margin: 0; color: #333;">Education {{ $index + 1 }}</h5>
                                            <button type="button" onclick="removeEducation(this)" style="background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem;">
                                                <i class="fas fa-times"></i> Remove
                                            </button>
                                        </div>
                                        
                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Degree *</label>
                                                <input type="text" name="educations[{{ $index }}][degree]" value="{{ $education['degree'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                                            </div>
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Institution *</label>
                                                <input type="text" name="educations[{{ $index }}][institution]" value="{{ $education['institution'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                                            </div>
                                        </div>
                                        
                                        <div style="margin-bottom: 1rem;">
                                            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Field of Study</label>
                                            <input type="text" name="educations[{{ $index }}][field_of_study]" value="{{ $education['field_of_study'] ?? '' }}" 
                                                   style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                        </div>
                                        
                                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Start Date</label>
                                                <input type="date" name="educations[{{ $index }}][start_date]" value="{{ $education['start_date'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            </div>
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">End Date</label>
                                                <input type="date" name="educations[{{ $index }}][end_date]" value="{{ $education['end_date'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            </div>
                                            <div>
                                                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">GPA</label>
                                                <input type="text" name="educations[{{ $index }}][gpa]" value="{{ $education['gpa'] ?? '' }}" 
                                                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        
                        <button type="button" onclick="addEducation()" style="background: #0B9E8C; color: white; border: none; padding: 0.75rem 1rem; border-radius: 4px; cursor: pointer;">
                            <i class="fas fa-plus"></i> Add Education
                        </button>
                    </div>

                    <!-- Skills -->
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-cogs"></i> Skills
                        </h4>
                        <div id="skills-container">
                            @if(!empty($uploadData['parsed_data']['skills']))
                                @foreach($uploadData['parsed_data']['skills'] as $index => $skill)
                                    <div class="skill-item" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center;">
                                        <input type="text" name="skills[{{ $index }}][name]" value="{{ $skill['name'] ?? '' }}" 
                                               style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" 
                                               placeholder="Skill name" required>
                                        <select name="skills[{{ $index }}][level]" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                                            <option value="beginner" {{ ($skill['level'] ?? '') === 'beginner' ? 'selected' : '' }}>Beginner</option>
                                            <option value="intermediate" {{ ($skill['level'] ?? '') === 'intermediate' ? 'selected' : '' }}>Intermediate</option>
                                            <option value="advanced" {{ ($skill['level'] ?? '') === 'advanced' ? 'selected' : '' }}>Advanced</option>
                                            <option value="expert" {{ ($skill['level'] ?? '') === 'expert' ? 'selected' : '' }}>Expert</option>
                                        </select>
                                        <button type="button" onclick="removeSkill(this)" style="background: #dc3545; color: white; border: none; padding: 0.5rem; border-radius: 4px; cursor: pointer;">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        
                        <button type="button" onclick="addSkill()" style="background: #0B9E8C; color: white; border: none; padding: 0.75rem 1rem; border-radius: 4px; cursor: pointer;">
                            <i class="fas fa-plus"></i> Add Skill
                        </button>
                    </div>
                </div>

                <!-- Right Column - Uploaded Resume Preview (sticky) -->
                <div>
                    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; position: sticky; top: 2rem;">
                        <h4 style="color: #333; margin-bottom: 1rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">
                            <i class="fas fa-file-pdf"></i> Your Uploaded Resume
                        </h4>
                        <div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden; height: 800px; background: #f5f5f5;">
                            @if($uploadData['file_type'] === 'pdf')
                                <iframe src="{{ route('user.resumes.upload.preview-file') }}" 
                                        style="width: 100%; height: 100%; border: none;"></iframe>
                            @else
                                <div style="padding: 2rem; text-align: center; color: #666;">
                                    <i class="fas fa-file-word" style="font-size: 3rem; margin-bottom: 1rem;"></i>
                                    <p>{{ $uploadData['original_filename'] }}</p>
                                    <a href="{{ route('user.resumes.upload.preview-file') }}" target="_blank" style="color: #0B9E8C;">
                                        <i class="fas fa-download"></i> Download to view
                                    </a>
                                </div>
                            @endif
                        </div>
                        <div style="margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 4px;">
                            <p style="margin: 0; font-size: 0.9rem; color: #666;">
                                <i class="fas fa-info-circle"></i> 
                                Your uploaded resume stays visible while you edit information on the left.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div style="text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0;">
                <button type="submit" style="background: #0B9E8C; color: white; border: none; padding: 1rem 2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-right: 1rem;">
                    <i class="fas fa-save"></i> Save Resume
                </button>
                <a href="{{ route('user.resumes.upload.form') }}" style="background: #6c757d; color: white; text-decoration: none; padding: 1rem 2rem; border-radius: 6px; font-size: 1rem; display: inline-block;">
                    <i class="fas fa-arrow-left"></i> Back to Upload
                </a>
            </div>
        </form>
    </div>
</div>

<script>
let experienceCount = {{ count($uploadData['parsed_data']['experiences'] ?? []) }};
let educationCount = {{ count($uploadData['parsed_data']['educations'] ?? []) }};
let skillCount = {{ count($uploadData['parsed_data']['skills'] ?? []) }};

function addExperience() {
    const container = document.getElementById('experiences-container');
    const experienceHtml = `
        <div class="experience-item" style="border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #f8f9fa;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h5 style="margin: 0; color: #333;">Experience ${experienceCount + 1}</h5>
                <button type="button" onclick="removeExperience(this)" style="background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem;">
                    <i class="fas fa-times"></i> Remove
                </button>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Position *</label>
                    <input type="text" name="experiences[${experienceCount}][position]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Company *</label>
                    <input type="text" name="experiences[${experienceCount}][company]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                </div>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Start Date</label>
                    <input type="date" name="experiences[${experienceCount}][start_date]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                </div>
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">End Date</label>
                    <input type="date" name="experiences[${experienceCount}][end_date]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                </div>
            </div>
            
            <div>
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Description</label>
                <textarea name="experiences[${experienceCount}][description]" rows="3" 
                          style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; resize: vertical;"></textarea>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', experienceHtml);
    experienceCount++;
}

function removeExperience(button) {
    button.closest('.experience-item').remove();
}

function addEducation() {
    const container = document.getElementById('educations-container');
    const educationHtml = `
        <div class="education-item" style="border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #f8f9fa;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h5 style="margin: 0; color: #333;">Education ${educationCount + 1}</h5>
                <button type="button" onclick="removeEducation(this)" style="background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem;">
                    <i class="fas fa-times"></i> Remove
                </button>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Degree *</label>
                    <input type="text" name="educations[${educationCount}][degree]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Institution *</label>
                    <input type="text" name="educations[${educationCount}][institution]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" required>
                </div>
            </div>
            
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Field of Study</label>
                <input type="text" name="educations[${educationCount}][field_of_study]" value="" 
                       style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">Start Date</label>
                    <input type="date" name="educations[${educationCount}][start_date]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                </div>
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">End Date</label>
                    <input type="date" name="educations[${educationCount}][end_date]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                </div>
                <div>
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; color: #333; font-size: 0.9rem;">GPA</label>
                    <input type="text" name="educations[${educationCount}][gpa]" value="" 
                           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', educationHtml);
    educationCount++;
}

function removeEducation(button) {
    button.closest('.education-item').remove();
}

function addSkill() {
    const container = document.getElementById('skills-container');
    const skillHtml = `
        <div class="skill-item" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center;">
            <input type="text" name="skills[${skillCount}][name]" value="" 
                   style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;" 
                   placeholder="Skill name" required>
            <select name="skills[${skillCount}][level]" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;">
                <option value="beginner">Beginner</option>
                <option value="intermediate" selected>Intermediate</option>
                <option value="advanced">Advanced</option>
                <option value="expert">Expert</option>
            </select>
            <button type="button" onclick="removeSkill(this)" style="background: #dc3545; color: white; border: none; padding: 0.5rem; border-radius: 4px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', skillHtml);
    skillCount++;
}

function removeSkill(button) {
    button.closest('.skill-item').remove();
}
</script>

<style>
/* Responsive Design */
@media (max-width: 768px) {
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    .skill-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .skill-item input,
    .skill-item select {
        margin-bottom: 0.5rem;
    }
}
</style>

@endsection