@extends('user.layout.master')
@section('title', 'View Uploaded Resume')
@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.index') }}" class="back-arrow" style="margin-right: 10px; margin-top: -5px;">
                <div class="arrow-icon"></div>
            </a>View Uploaded Resume
        </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

    <!-- Action Bar -->
    <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h4 style="margin: 0; color: #333;">
                <i class="fas fa-file-upload" style="color: #0B9E8C;"></i>
                {{ $resume->original_filename }}
            </h4>
            <p style="margin: 0.5rem 0 0 0; color: #6c757d; font-size: 0.9rem;">
                    Switch to "Editable Preview" tab to edit information inline. Changes are saved automatically.
            </p>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
            <button id="editToggle" onclick="toggleEditMode()" class="btn btn-secondary" style="padding: 0.75rem 1.5rem; background: #6c757d; color: white; text-decoration: none; border-radius: 6px; border: none; cursor: pointer;">
                <i class="fas fa-edit"></i> <span id="editToggleText">Enable Edit Mode</span>
            </button>
            
            <!-- Download Dropdown -->
            <div style="position: relative; display: inline-block;">
                <button onclick="toggleDownloadDropdown()" class="btn btn-primary" style="padding: 0.75rem 1.5rem; background: #0B9E8C; color: white; text-decoration: none; border-radius: 6px; border: none; cursor: pointer;">
                    <i class="fas fa-download"></i> Download Resume <i class="fas fa-chevron-down" style="margin-left: 0.5rem;"></i>
                </button>
                <div id="downloadDropdown" style="display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000; min-width: 200px;">
                    <a href="{{ route('user.resumes.download', $resume->id) }}?type=generated&format=pdf" style="display: block; padding: 0.75rem 1rem; color: #333; text-decoration: none; border-bottom: 1px solid #eee;">
                        <i class="fas fa-file-pdf" style="color: #dc3545; margin-right: 0.5rem;"></i> Download as PDF
                    </a>
                    <a href="{{ route('user.resumes.download', $resume->id) }}?type=generated&format=doc" style="display: block; padding: 0.75rem 1rem; color: #333; text-decoration: none; border-bottom: 1px solid #eee;">
                        <i class="fas fa-file-word" style="color: #0078d4; margin-right: 0.5rem;"></i> Download as DOC
                    </a>
                    <a href="{{ route('user.resumes.download', $resume->id) }}?type=generated&format=docx" style="display: block; padding: 0.75rem 1rem; color: #333; text-decoration: none;">
                        <i class="fas fa-file-word" style="color: #0078d4; margin-right: 0.5rem;"></i> Download as DOCX
                    </a>
                </div>
            </div>
            
            <a href="{{ route('user.resumes.download.uploaded', $resume) }}" class="btn btn-outline-primary" style="padding: 0.75rem 1.5rem; border: 1px solid #0B9E8C; color: #0B9E8C; text-decoration: none; border-radius: 6px;">
                <i class="fas fa-download"></i> Download Original
            </a>
        </div>
    </div>

    <!-- Main Content Area -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <!-- Resume Preview Tabs -->
        <div id="resume-preview" style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; position: relative;">
            <!-- Tab Navigation -->
            <div style="display: flex; margin-bottom: 1rem; border-bottom: 1px solid #e0e0e0;">
                <button id="originalTab" onclick="switchTab('original')" style="flex: 1; padding: 0.75rem; background: #0B9E8C; color: white; border: none; border-radius: 4px 4px 0 0; cursor: pointer;">
                    <i class="fas fa-file-pdf"></i> Original Resume
                </button>
                <button id="editableTab" onclick="switchTab('editable')" style="flex: 1; padding: 0.75rem; background: #f8f9fa; color: #666; border: none; border-radius: 4px 4px 0 0; cursor: pointer;">
                    <i class="fas fa-edit"></i> Editable Preview
                </button>
            </div>

            <!-- Original PDF Tab -->
            <div id="original-content" style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden; height: 800px; background: #f5f5f5; position: relative;">
                @if($resume->file_type === 'pdf')
                    <iframe id="resume-iframe" src="{{ $resume->getUploadedFileUrl() }}" 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>Document preview not available</p>
                        <a href="{{ $resume->getUploadedFileUrl() }}" target="_blank" style="color: #0B9E8C;">
                            <i class="fas fa-download"></i> Download to view
                        </a>
                    </div>
                @endif
        </div>

            <!-- Editable Preview Tab -->
            <div id="editable-content" style="display: none; border: 1px solid #ddd; border-radius: 4px; padding: 2rem; background: #f9f9f9; min-height: 800px; position: relative; overflow-y: auto;">
                <div id="resume-template" style="background: white; padding: 2rem; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Header Section -->
                    <div class="resume-header" style="text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #0B9E8C;">
                        <h1 id="preview-name" class="editable" data-field="name" style="font-size: 2.5rem; font-weight: bold; color: #333; margin-bottom: 0.5rem;">{{ $resume->name }}</h1>
                        <div id="preview-contact" style="color: #666; font-size: 1rem;">
                            <span id="preview-email" class="editable" data-field="email">{{ $resume->email }}</span> | 
                            <span id="preview-phone" class="editable" data-field="phone">{{ $resume->phone ?? 'Phone' }}</span> | 
                            <span id="preview-location" class="editable" data-field="location">{{ $resume->location ?? 'Location' }}</span>
                        </div>
                        @if($resume->website)
                        <div style="margin-top: 0.5rem;">
                            <span id="preview-website" class="editable" data-field="website">{{ $resume->website }}</span>
                        </div>
                        @endif
                    </div>

                    <!-- Summary Section -->
                    <div class="resume-section" style="margin-bottom: 2rem;">
                        <h2 style="color: #0B9E8C; font-size: 1.3rem; margin-bottom: 1rem; border-bottom: 1px solid #0B9E8C; padding-bottom: 0.5rem;">Professional Summary</h2>
                        <p id="preview-summary" class="editable" data-field="summary" style="line-height: 1.6; color: #555;">{{ $resume->summary ?? 'Enter your professional summary here...' }}</p>
                    </div>

                    <!-- Experience Section -->
                    <div class="resume-section" style="margin-bottom: 2rem;">
                        <h2 style="color: #0B9E8C; font-size: 1.3rem; margin-bottom: 1rem; border-bottom: 1px solid #0B9E8C; padding-bottom: 0.5rem;">Work Experience</h2>
                        <div id="preview-experience">
                        @forelse($resume->experiences as $experience)
                                <div class="experience-item" style="margin-bottom: 1.5rem;">
                                    <h3 style="font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 0.25rem;">
                                        <span class="editable" data-field="experiences.{{ $loop->index }}.position">{{ $experience->position }}</span>
                                        <span style="color: #0B9E8C;"> at </span>
                                        <span class="editable" data-field="experiences.{{ $loop->index }}.company">{{ $experience->company }}</span>
                                    </h3>
                                    <p style="color: #666; font-size: 0.9rem; margin-bottom: 0.5rem;">
                                        <span class="editable" data-field="experiences.{{ $loop->index }}.start_date">{{ $experience->start_date ? $experience->start_date->format('M Y') : 'Start Date' }}</span> - 
                                        <span class="editable" data-field="experiences.{{ $loop->index }}.end_date">{{ $experience->end_date ? $experience->end_date->format('M Y') : 'End Date' }}</span>
                                    </p>
                                    <p class="editable" data-field="experiences.{{ $loop->index }}.description" style="line-height: 1.5; color: #555;">{{ $experience->description ?? 'Job description...' }}</p>
                                </div>
                        @empty
                                <div class="experience-item" style="margin-bottom: 1.5rem;">
                                    <h3 style="font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 0.25rem;">
                                        <span class="editable" data-field="experiences.0.position">Job Title</span>
                                        <span style="color: #0B9E8C;"> at </span>
                                        <span class="editable" data-field="experiences.0.company">Company Name</span>
                                    </h3>
                                    <p style="color: #666; font-size: 0.9rem; margin-bottom: 0.5rem;">
                                        <span class="editable" data-field="experiences.0.start_date">Start Date</span> - 
                                        <span class="editable" data-field="experiences.0.end_date">End Date</span>
                                    </p>
                                    <p class="editable" data-field="experiences.0.description" style="line-height: 1.5; color: #555;">Job description...</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                    <!-- Education Section -->
                    <div class="resume-section" style="margin-bottom: 2rem;">
                        <h2 style="color: #0B9E8C; font-size: 1.3rem; margin-bottom: 1rem; border-bottom: 1px solid #0B9E8C; padding-bottom: 0.5rem;">Education</h2>
                        <div id="preview-education">
                        @forelse($resume->educations as $education)
                                <div class="education-item" style="margin-bottom: 1.5rem;">
                                    <h3 style="font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 0.25rem;">
                                        <span class="editable" data-field="educations.{{ $loop->index }}.degree">{{ $education->degree }}</span>
                                        @if($education->field_of_study)
                                            <span style="color: #666;"> in </span>
                                            <span class="editable" data-field="educations.{{ $loop->index }}.field_of_study">{{ $education->field_of_study }}</span>
                                        @endif
                                    </h3>
                                    <p style="color: #666; font-size: 0.9rem; margin-bottom: 0.5rem;">
                                        <span class="editable" data-field="educations.{{ $loop->index }}.institution">{{ $education->institution }}</span>
                                        @if($education->gpa)
                                            <span> - GPA: </span>
                                            <span class="editable" data-field="educations.{{ $loop->index }}.gpa">{{ $education->gpa }}</span>
                                @endif
                                    </p>
                                    <p style="color: #666; font-size: 0.9rem;">
                                        <span class="editable" data-field="educations.{{ $loop->index }}.start_date">{{ $education->start_date ? $education->start_date->format('M Y') : 'Start Date' }}</span> - 
                                        <span class="editable" data-field="educations.{{ $loop->index }}.end_date">{{ $education->end_date ? $education->end_date->format('M Y') : 'End Date' }}</span>
                                    </p>
                                </div>
                        @empty
                                <div class="education-item" style="margin-bottom: 1.5rem;">
                                    <h3 style="font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 0.25rem;">
                                        <span class="editable" data-field="educations.0.degree">Degree</span>
                                        <span style="color: #666;"> in </span>
                                        <span class="editable" data-field="educations.0.field_of_study">Field of Study</span>
                                    </h3>
                                    <p style="color: #666; font-size: 0.9rem; margin-bottom: 0.5rem;">
                                        <span class="editable" data-field="educations.0.institution">Institution Name</span>
                                    </p>
                                    <p style="color: #666; font-size: 0.9rem;">
                                        <span class="editable" data-field="educations.0.start_date">Start Date</span> - 
                                        <span class="editable" data-field="educations.0.end_date">End Date</span>
                                    </p>
                            </div>
                        @endforelse
                    </div>
                </div>

                    <!-- Skills Section -->
                    <div class="resume-section">
                        <h2 style="color: #0B9E8C; font-size: 1.3rem; margin-bottom: 1rem; border-bottom: 1px solid #0B9E8C; padding-bottom: 0.5rem;">Skills</h2>
                        <div id="preview-skills" style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                        @forelse($resume->skills as $skill)
                                <span class="skill-tag editable" data-field="skills.{{ $loop->index }}.name" style="background: #f0f0f0; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.9rem; color: #333;">{{ $skill->name }}</span>
                        @empty
                                <span class="skill-tag editable" data-field="skills.0.name" style="background: #f0f0f0; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.9rem; color: #333;">Add Skill</span>
                            @endforelse
                            </div>
                    </div>
                </div>
                    </div>
                </div>

        <!-- Quick Edit Panel -->
        <div id="quick-edit-panel" style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; overflow-y: auto; max-height: 800px; display: none;">
            <h4 style="margin-bottom: 1.5rem; color: #333;">Quick Edit</h4>
            <form id="quickEditForm">
                <div id="edit-fields">
                    <!-- Dynamic edit fields will be populated here -->
                </div>
                <div style="text-align: right; margin-top: 1rem;">
                    <button type="button" onclick="saveQuickEdit()" style="padding: 0.5rem 1rem; background: #0B9E8C; color: white; border: none; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <button type="button" onclick="cancelQuickEdit()" style="padding: 0.5rem 1rem; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 0.5rem;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let editMode = false;
let currentEditField = null;
let currentTab = 'original';
let resumeData = {
    name: '{{ $resume->name }}',
    email: '{{ $resume->email }}',
    phone: '{{ $resume->phone ?? "" }}',
    location: '{{ $resume->location ?? "" }}',
    website: '{{ $resume->website ?? "" }}',
    summary: '{{ $resume->summary ?? "" }}',
    experiences: @json($resume->experiences->toArray()),
    educations: @json($resume->educations->toArray()),
    skills: @json($resume->skills->toArray())
};

// Tab switching functionality
function switchTab(tab) {
    currentTab = tab;
    
    // Update tab buttons
    document.getElementById('originalTab').style.background = tab === 'original' ? '#0B9E8C' : '#f8f9fa';
    document.getElementById('originalTab').style.color = tab === 'original' ? 'white' : '#666';
    document.getElementById('editableTab').style.background = tab === 'editable' ? '#0B9E8C' : '#f8f9fa';
    document.getElementById('editableTab').style.color = tab === 'editable' ? 'white' : '#666';
    
    // Show/hide content
    document.getElementById('original-content').style.display = tab === 'original' ? 'block' : 'none';
    document.getElementById('editable-content').style.display = tab === 'editable' ? 'block' : 'none';
    
    // Update edit mode based on tab
    if (tab === 'editable') {
        // Enable edit mode automatically when switching to editable tab
        if (!editMode) {
            toggleEditMode();
        }
    } else {
        // Disable edit mode when switching to original tab
        if (editMode) {
            toggleEditMode();
        }
    }
}

function toggleEditMode() {
    // Only allow edit mode on editable tab
    if (currentTab !== 'editable') {
        alert('Please switch to "Editable Preview" tab to enable editing.');
        return;
    }
    
    editMode = !editMode;
    const toggleBtn = document.getElementById('editToggle');
    const toggleText = document.getElementById('editToggleText');
    const editables = document.querySelectorAll('.editable');
    
    if (editMode) {
        toggleBtn.style.background = '#28a745';
        toggleText.textContent = 'Disable Edit Mode';
        editables.forEach(el => {
            el.style.cursor = 'pointer';
            el.style.border = '1px dashed #0B9E8C';
            el.style.padding = '2px 4px';
            el.style.borderRadius = '3px';
            el.addEventListener('click', handleEditClick);
        });
    } else {
        toggleBtn.style.background = '#6c757d';
        toggleText.textContent = 'Enable Edit Mode';
        editables.forEach(el => {
            el.style.cursor = 'default';
            el.style.border = 'none';
            el.style.padding = '0';
            el.style.borderRadius = '0';
            el.removeEventListener('click', handleEditClick);
        });
        hideQuickEditPanel();
    }
}

function handleEditClick(event) {
    if (!editMode) return;
    
    event.preventDefault();
    currentEditField = event.target;
    const fieldPath = currentEditField.getAttribute('data-field');
    const currentValue = currentEditField.textContent;
    
    showQuickEditPanel(fieldPath, currentValue);
}

function showQuickEditPanel(fieldPath, currentValue) {
    const panel = document.getElementById('quick-edit-panel');
    const fieldsContainer = document.getElementById('edit-fields');
    
    // Generate appropriate input field based on field path
    let inputHtml = '';
    const fieldName = fieldPath.split('.').pop();
    
    if (fieldPath.includes('experiences') || fieldPath.includes('educations')) {
        const [section, index, field] = fieldPath.split('.');
        const isExperience = section === 'experiences';
        const data = isExperience ? resumeData.experiences[parseInt(index)] : resumeData.educations[parseInt(index)];
        
        if (isExperience) {
            inputHtml = generateExperienceEditForm(data, parseInt(index));
        } else {
            inputHtml = generateEducationEditForm(data, parseInt(index));
        }
    } else if (fieldPath.includes('skills')) {
        const [section, index, field] = fieldPath.split('.');
        const data = resumeData.skills[parseInt(index)];
        inputHtml = generateSkillEditForm(data, parseInt(index));
    } else {
        // Basic field
        if (fieldName === 'summary') {
            inputHtml = `
                <div class="form-group">
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Professional Summary</label>
                    <textarea id="editValue" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; min-height: 100px;">${currentValue}</textarea>
                </div>
            `;
        } else {
            const label = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
            inputHtml = `
                <div class="form-group">
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">${label}</label>
                    <input type="text" id="editValue" value="${currentValue}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px;">
                </div>
            `;
        }
    }
    
    fieldsContainer.innerHTML = inputHtml;
    panel.style.display = 'block';
    document.getElementById('editValue')?.focus();
}

function generateExperienceEditForm(data, index) {
    return `
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Position</label>
            <input type="text" id="editPosition" value="${data?.position || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Company</label>
            <input type="text" id="editCompany" value="${data?.company || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Start Date</label>
            <input type="month" id="editStartDate" value="${data?.start_date ? data.start_date.substring(0, 7) : ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
            </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">End Date</label>
            <input type="month" id="editEndDate" value="${data?.end_date ? data.end_date.substring(0, 7) : ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
            </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Description</label>
            <textarea id="editDescription" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;">${data?.description || ''}</textarea>
        </div>
    `;
}

function generateEducationEditForm(data, index) {
    return `
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Degree</label>
            <input type="text" id="editDegree" value="${data?.degree || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Institution</label>
            <input type="text" id="editInstitution" value="${data?.institution || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Field of Study</label>
            <input type="text" id="editFieldOfStudy" value="${data?.field_of_study || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
            </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">GPA</label>
            <input type="text" id="editGpa" value="${data?.gpa || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
            </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Start Date</label>
            <input type="month" id="editStartDate" value="${data?.start_date ? data.start_date.substring(0, 7) : ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
            </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">End Date</label>
            <input type="month" id="editEndDate" value="${data?.end_date ? data.end_date.substring(0, 7) : ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
    `;
}

function generateSkillEditForm(data, index) {
    return `
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Skill Name</label>
            <input type="text" id="editSkillName" value="${data?.name || ''}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
        </div>
        <div class="form-group">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Level</label>
            <select id="editSkillLevel" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
                <option value="beginner" ${data?.level === 'beginner' ? 'selected' : ''}>Beginner</option>
                <option value="intermediate" ${data?.level === 'intermediate' ? 'selected' : ''}>Intermediate</option>
                <option value="advanced" ${data?.level === 'advanced' ? 'selected' : ''}>Advanced</option>
                <option value="expert" ${data?.level === 'expert' ? 'selected' : ''}>Expert</option>
            </select>
        </div>
    `;
}

function saveQuickEdit() {
    if (!currentEditField) return;
    
    const fieldPath = currentEditField.getAttribute('data-field');
    const [section, index, field] = fieldPath.split('.');
    
    if (section === 'experiences') {
        const expIndex = parseInt(index);
        if (!resumeData.experiences[expIndex]) {
            resumeData.experiences[expIndex] = {};
        }
        resumeData.experiences[expIndex].position = document.getElementById('editPosition')?.value || '';
        resumeData.experiences[expIndex].company = document.getElementById('editCompany')?.value || '';
        resumeData.experiences[expIndex].start_date = document.getElementById('editStartDate')?.value || '';
        resumeData.experiences[expIndex].end_date = document.getElementById('editEndDate')?.value || '';
        resumeData.experiences[expIndex].description = document.getElementById('editDescription')?.value || '';
        
        // Update preview
        updateExperiencePreview(expIndex);
    } else if (section === 'educations') {
        const eduIndex = parseInt(index);
        if (!resumeData.educations[eduIndex]) {
            resumeData.educations[eduIndex] = {};
        }
        resumeData.educations[eduIndex].degree = document.getElementById('editDegree')?.value || '';
        resumeData.educations[eduIndex].institution = document.getElementById('editInstitution')?.value || '';
        resumeData.educations[eduIndex].field_of_study = document.getElementById('editFieldOfStudy')?.value || '';
        resumeData.educations[eduIndex].gpa = document.getElementById('editGpa')?.value || '';
        resumeData.educations[eduIndex].start_date = document.getElementById('editStartDate')?.value || '';
        resumeData.educations[eduIndex].end_date = document.getElementById('editEndDate')?.value || '';
        
        // Update preview
        updateEducationPreview(eduIndex);
    } else if (section === 'skills') {
        const skillIndex = parseInt(index);
        if (!resumeData.skills[skillIndex]) {
            resumeData.skills[skillIndex] = {};
        }
        resumeData.skills[skillIndex].name = document.getElementById('editSkillName')?.value || '';
        resumeData.skills[skillIndex].level = document.getElementById('editSkillLevel')?.value || 'intermediate';
        
        // Update preview
        updateSkillPreview(skillIndex);
    } else {
        // Basic field
        const newValue = document.getElementById('editValue')?.value || '';
        resumeData[field] = newValue;
        currentEditField.textContent = newValue;
    }
    
    // Save to server
    saveResumeData();
    hideQuickEditPanel();
}

function updateExperiencePreview(index) {
    const exp = resumeData.experiences[index];
    if (!exp) return;
    
    const experienceItems = document.querySelectorAll('.experience-item');
    if (experienceItems[index]) {
        const positionEl = experienceItems[index].querySelector('[data-field*="position"]');
        const companyEl = experienceItems[index].querySelector('[data-field*="company"]');
        const startDateEl = experienceItems[index].querySelector('[data-field*="start_date"]');
        const endDateEl = experienceItems[index].querySelector('[data-field*="end_date"]');
        const descEl = experienceItems[index].querySelector('[data-field*="description"]');
        
        if (positionEl) positionEl.textContent = exp.position || 'Job Title';
        if (companyEl) companyEl.textContent = exp.company || 'Company Name';
        if (startDateEl) startDateEl.textContent = exp.start_date ? new Date(exp.start_date + '-01').toLocaleDateString('en-US', {month: 'short', year: 'numeric'}) : 'Start Date';
        if (endDateEl) endDateEl.textContent = exp.end_date ? new Date(exp.end_date + '-01').toLocaleDateString('en-US', {month: 'short', year: 'numeric'}) : 'End Date';
        if (descEl) descEl.textContent = exp.description || 'Job description...';
    }
}

function updateEducationPreview(index) {
    const edu = resumeData.educations[index];
    if (!edu) return;
    
    const educationItems = document.querySelectorAll('.education-item');
    if (educationItems[index]) {
        const degreeEl = educationItems[index].querySelector('[data-field*="degree"]');
        const institutionEl = educationItems[index].querySelector('[data-field*="institution"]');
        const fieldEl = educationItems[index].querySelector('[data-field*="field_of_study"]');
        const gpaEl = educationItems[index].querySelector('[data-field*="gpa"]');
        const startDateEl = educationItems[index].querySelector('[data-field*="start_date"]');
        const endDateEl = educationItems[index].querySelector('[data-field*="end_date"]');
        
        if (degreeEl) degreeEl.textContent = edu.degree || 'Degree';
        if (institutionEl) institutionEl.textContent = edu.institution || 'Institution Name';
        if (fieldEl) fieldEl.textContent = edu.field_of_study || 'Field of Study';
        if (gpaEl) gpaEl.textContent = edu.gpa || '';
        if (startDateEl) startDateEl.textContent = edu.start_date ? new Date(edu.start_date + '-01').toLocaleDateString('en-US', {month: 'short', year: 'numeric'}) : 'Start Date';
        if (endDateEl) endDateEl.textContent = edu.end_date ? new Date(edu.end_date + '-01').toLocaleDateString('en-US', {month: 'short', year: 'numeric'}) : 'End Date';
    }
}

function updateSkillPreview(index) {
    const skill = resumeData.skills[index];
    if (!skill) return;
    
    const skillTags = document.querySelectorAll('.skill-tag');
    if (skillTags[index]) {
        skillTags[index].textContent = skill.name || 'Add Skill';
    }
}

function cancelQuickEdit() {
    hideQuickEditPanel();
}

function hideQuickEditPanel() {
    document.getElementById('quick-edit-panel').style.display = 'none';
    currentEditField = null;
}

function saveResumeData() {
    // Send AJAX request to save data
    fetch('{{ route("user.resumes.update", $resume->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            _method: 'PUT',
            name: resumeData.name,
            email: resumeData.email,
            phone: resumeData.phone,
            location: resumeData.location,
            website: resumeData.website,
            summary: resumeData.summary,
            experiences: resumeData.experiences,
            educations: resumeData.educations,
            skills: resumeData.skills
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Resume updated successfully');
        } else {
            console.error('Error updating resume:', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Download dropdown functionality
function toggleDownloadDropdown() {
    const dropdown = document.getElementById('downloadDropdown');
    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    const dropdown = document.getElementById('downloadDropdown');
    const button = event.target.closest('button[onclick="toggleDownloadDropdown()"]');
    if (!button && !dropdown.contains(event.target)) {
        dropdown.style.display = 'none';
    }
});

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Add CSRF token to meta tag if not exists
    if (!document.querySelector('meta[name="csrf-token"]')) {
        const meta = document.createElement('meta');
        meta.name = 'csrf-token';
        meta.content = '{{ csrf_token() }}';
        document.head.appendChild(meta);
    }
});
</script>

<style>
/* Inline Edit Styles */
.editable {
    transition: all 0.2s ease;
}

.editable:hover {
    background-color: rgba(11, 158, 140, 0.1) !important;
}

.editable.editing {
    background-color: rgba(11, 158, 140, 0.2) !important;
    border: 2px solid #0B9E8C !important;
}

/* Quick Edit Panel */
#quick-edit-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

/* Resume Preview Styles */
#resume-template {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

#resume-template h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
}

#resume-template h2 {
    color: #0B9E8C;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #0B9E8C;
    padding-bottom: 0.5rem;
}

#resume-template h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .btn-outline-primary {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }

    div[style*="max-height: 800px"] {
        max-height: 600px !important;
    }

    div[style*="height: 800px"] {
        height: 600px !important;
    }

    #quick-edit-panel {
        position: relative;
        top: 0;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .header-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-actions button,
    .header-actions a {
        width: 100%;
        text-align: center;
    }
}
</style>

@endsection