@extends('user.layout.master')
@section('title', 'Edit 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>Edit Resume
            </div>
        </div>

        @if($resume->isUploaded())
            <!-- Uploaded Resume Info Section -->
            <div class="uploaded-resume-info" style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                    <div>
                        <h4 style="color: #495057; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
                            <i class="fas fa-file-upload" style="color: #0B9E8C;"></i>
                            Uploaded Resume
                        </h4>
                        <p style="margin: 0.5rem 0 0 0; color: #6c757d; font-size: 0.9rem;">
                            This resume was uploaded from your existing file: <strong>{{ $resume->original_filename }}</strong>
                        </p>
                    </div>
                    <div style="display: flex; gap: 0.5rem;">
                        <a href="{{ route('user.resumes.download.uploaded', $resume) }}"
                           class="btn btn-outline-primary"
                           style="padding: 0.5rem 1rem; border: 1px solid #0B9E8C; color: #0B9E8C; text-decoration: none; border-radius: 4px; font-size: 0.9rem;">
                            <i class="fas fa-download"></i> Download Original
                        </a>
                    </div>
                </div>
                <div style="background: #e3f2fd; padding: 1rem; border-radius: 4px; border-left: 4px solid #2196f3;">
                    <p style="margin: 0; color: #1565c0; font-size: 0.9rem;">
                        <i class="fas fa-info-circle"></i>
                        <strong>Note:</strong> You can edit the basic information below, but the design and layout will remain as your original file.
                        To change the design, consider creating a new resume with one of our templates.
                    </p>
                </div>
            </div>
        @endif

        <form action="{{ route('user.resumes.update', $resume->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="create-resume resume-create-page" id="personal-info-section">
                <div class="create-resume-header">
                    <div class="create-resume-title">Personal Information</div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form expanded">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Full Name</label>
                                <input type="text" name="name" class="form-input" placeholder="Jhon Doe" value="{{ old('name', $resume->name) }}">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-input" placeholder="jhondoe@gmail.com" value="{{ old('email', $resume->email) }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" name="phone" class="form-input" placeholder="123 456 789" value="{{ old('phone', $resume->phone) }}">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Website/Portfolio URL</label>
                                <input type="url" name="website" class="form-input" placeholder="https://portfolio.com" value="{{ old('website', $resume->website) }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Address</label>
                                <input type="text" name="location" class="form-input" placeholder="144 Best bay Central London, United Kingdom" value="{{ old('location', $resume->location) }}">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Profile Image</label>
                                <input type="file" name="image" class="form-input" accept=".jpg,.jpeg,.png,.gif">
                                @if($resume->image)
                                    <div style="margin-top: 8px; font-size: 12px; color:#6b7280;">Current: <a href="{{ Storage::url($resume->image) }}" target="_blank">view image</a></div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="summary-section">
                        <div class="summary-header">
                            <label class="form-label">Summary</label>
                            <div class="ai-summary">
                                <i class="fas fa-magic"></i>
                                <span style="white-space: nowrap;">AI Generated Summary</span>
                            </div>
                        </div>
                        <textarea name="summary" class="form-textarea" placeholder="Write a brief summary...">{{ old('summary', $resume->summary) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="create-resume resume-create-page" id="experience-section">
                <div class="create-resume-header experience-section-header">
                    <div class="create-resume-title">Work Experience </div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form experience-section-form expanded" id="experience-forms-container">
                    @php $expIndex = 0; @endphp
                    @forelse($resume->experiences as $experience)
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px; border-top: 1px dashed #e5e7eb;">
                            @if($expIndex > 0)
                                <div class="delete-experience" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;" onclick="this.closest('.dynamic-form-item').remove()">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            @endif
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Company Name</label>
                                    <input type="text" name="experiences[{{ $expIndex }}][company]" class="form-input" placeholder="Linksol Ltd" value="{{ $experience->company }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Position</label>
                                    <input type="text" name="experiences[{{ $expIndex }}][position]" class="form-input" placeholder="UI/UX Designer" value="{{ $experience->position }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Start Date</label>
                                    <input type="month" name="experiences[{{ $expIndex }}][start_date]" class="form-input" value="{{ $experience->start_date ? substr($experience->start_date,0,7) : '' }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">End Date</label>
                                    <input type="month" name="experiences[{{ $expIndex }}][end_date]" class="form-input end-date-input" value="{{ $experience->end_date ? substr($experience->end_date,0,7) : '' }}" {{ $experience->is_current ? 'disabled' : '' }}>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="from-group">
                                    <input type="checkbox" name="experiences[{{ $expIndex }}][is_current]" value="1" class="custom-control-input current-checkbox" id="current-{{ $expIndex }}" {{ $experience->is_current ? 'checked' : '' }}>
                                    <label class="form-label">Currently working here</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="summary-section">
                                    <div class="summary-header">
                                        <label class="form-label">Description</label>
                                        <div class="ai-experience-description ai-summary">
                                            <i class="fas fa-magic"></i>
                                            <span style="white-space: nowrap;">AI Generated Summary</span>
                                        </div>
                                    </div>
                                    <textarea name="experiences[{{ $expIndex }}][description]" class="form-textarea" placeholder="Describe your responsibility and achievements...">{{ $experience->description }}</textarea>
                                </div>
                            </div>
                        </div>
                        @php $expIndex++; @endphp
                    @empty
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Company Name</label>
                                    <input type="text" name="experiences[0][company]" class="form-input" placeholder="Linksol Ltd">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Position</label>
                                    <input type="text" name="experiences[0][position]" class="form-input" placeholder="UI/UX Designer">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Start Date</label>
                                    <input type="month" name="experiences[0][start_date]" class="form-input" placeholder="YYYY-MM">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">End Date</label>
                                    <input type="month" name="experiences[0][end_date]" class="form-input" placeholder="YYYY-MM">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="from-group">
                                    <input type="checkbox" name="experiences[0][is_current]" value="1" class="custom-control-input current-checkbox" id="current-0">
                                    <label class="form-label">Currently working here</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="summary-section">
                                    <div class="summary-header">
                                        <label class="form-label">Description</label>
                                        <div class="ai-experience-description ai-summary">
                                            <i class="fas fa-magic"></i>
                                            <span style="white-space: nowrap;">AI Generated Summary</span>
                                        </div>
                                    </div>
                                    <textarea name="experiences[0][description]" class="form-textarea" placeholder="Describe your responsibility and achievements..."></textarea>
                                </div>
                            </div>
                        </div>
                    @endforelse

                    <div class="resume-template-footer" id="add-experience-btn-container">
                        <div class="view-all-template add-btn" style="cursor: pointer;" id="add-experience-btn">
                            <i class="far fa-plus"></i>
                            <div class="view-all-template-text">Add Experience</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="create-resume resume-create-page" id="education-section">
                <div class="create-resume-header collapsed">
                    <div class="create-resume-title">Education</div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form collapsed" id="education-forms-container">
                    @php $eduIndex = 0; @endphp
                    @forelse($resume->educations as $education)
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px; border-top: 1px dashed #e5e7eb;">
                            @if($eduIndex > 0)
                                <div class="delete-education" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;" onclick="this.closest('.dynamic-form-item').remove()">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            @endif
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Institution</label>
                                    <input type="text" name="educations[{{ $eduIndex }}][institution]" class="form-input" placeholder="University name" value="{{ $education->institution }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Degree</label>
                                    <input type="text" name="educations[{{ $eduIndex }}][degree]" class="form-input" placeholder="BSc, MSc, ..." value="{{ $education->degree }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Field of Study</label>
                                    <input type="text" name="educations[{{ $eduIndex }}][field_of_study]" class="form-input" placeholder="Computer Science, ..." value="{{ $education->field_of_study }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">GPA (Optional)</label>
                                    <input type="text" name="educations[{{ $eduIndex }}][gpa]" class="form-input" placeholder="3.8/4.0" value="{{ $education->gpa }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Start Date</label>
                                    <input type="month" name="educations[{{ $eduIndex }}][start_date]" class="form-input" value="{{ $education->start_date ? substr($education->start_date,0,7) : '' }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">End Date</label>
                                    <input type="month" name="educations[{{ $eduIndex }}][end_date]" class="form-input" value="{{ $education->end_date ? substr($education->end_date,0,7) : '' }}">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="from-group">
                                    <label class="form-label">Description</label>
                                    <textarea name="educations[{{ $eduIndex }}][description]" class="form-textarea" placeholder="Describe your education and achievements...">{{ $education->description }}</textarea>
                                </div>
                            </div>
                        </div>
                        @php $eduIndex++; @endphp
                    @empty
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Institution</label>
                                    <input type="text" name="educations[0][institution]" class="form-input" placeholder="University name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Degree</label>
                                    <input type="text" name="educations[0][degree]" class="form-input" placeholder="BSc, MSc, ...">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Field of Study</label>
                                    <input type="text" name="educations[0][field_of_study]" class="form-input" placeholder="Computer Science, ...">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">GPA (Optional)</label>
                                    <input type="text" name="educations[0][gpa]" class="form-input" placeholder="3.8/4.0">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Start Date</label>
                                    <input type="month" name="educations[0][start_date]" class="form-input">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">End Date</label>
                                    <input type="month" name="educations[0][end_date]" class="form-input">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="from-group">
                                    <label class="form-label">Description</label>
                                    <textarea name="educations[0][description]" class="form-textarea" placeholder="Describe your education and achievements..."></textarea>
                                </div>
                            </div>
                        </div>
                    @endforelse

                    <div class="resume-template-footer" id="add-education-btn-container">
                        <div class="view-all-template add-btn" style="cursor: pointer;" id="add-education-btn">
                            <i class="far fa-plus"></i>
                            <div class="view-all-template-text">Add Education</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="create-resume resume-create-page" id="skills-section">
                <div class="create-resume-header collapsed">
                    <div class="create-resume-title">Skills</div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form collapsed" id="skills-forms-container">
                    @php $skillIndex = 0; @endphp
                    @forelse($resume->skills as $skill)
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px; border-top: 1px dashed #e5e7eb;">
                            @if($skillIndex > 0)
                                <div class="delete-skill" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;" onclick="this.closest('.dynamic-form-item').remove()">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            @endif
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Skill Name</label>
                                    <input type="text" name="skills[{{ $skillIndex }}][name]" class="form-input" placeholder="e.g. Laravel" value="{{ $skill->name }}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Level</label>
                                    <select name="skills[{{ $skillIndex }}][level]" class="form-input">
                                        <option value="">Select level</option>
                                        <option value="beginner" {{ strtolower($skill->level) == 'beginner' ? 'selected' : '' }}>Beginner</option>
                                        <option value="intermediate" {{ strtolower($skill->level) == 'intermediate' ? 'selected' : '' }}>Intermediate</option>
                                        <option value="advanced" {{ strtolower($skill->level) == 'advanced' ? 'selected' : '' }}>Advanced</option>
                                        <option value="expert" {{ strtolower($skill->level) == 'expert' ? 'selected' : '' }}>Expert</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        @php $skillIndex++; @endphp
                    @empty
                        <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Skill Name</label>
                                    <input type="text" name="skills[0][name]" class="form-input" placeholder="e.g. Laravel">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="from-group">
                                    <label class="form-label">Level</label>
                                    <select name="skills[0][level]" class="form-input">
                                        <option value="">Select level</option>
                                        <option value="beginner">Beginner</option>
                                        <option value="intermediate">Intermediate</option>
                                        <option value="advanced">Advanced</option>
                                        <option value="expert">Expert</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endforelse

                    <div class="resume-template-footer" id="add-skill-btn-container">
                        <div class="view-all-template add-btn" style="cursor: pointer;" id="add-skill-btn">
                            <i class="far fa-plus"></i>
                            <div class="view-all-template-text">Add Skill</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-actions" style="margin-top: 24px; text-align:center;">
                <button type="submit" class="btn btn-primary btn-lg"
                    style="background-color: #0B9E8C; border: none; width: 100%; max-width: 220px; border-radius: 24px; display: inline-block;">
                    <i class="fas fa-save mr-2"></i>
                    Update Resume
                </button>
                <a href="{{ route('user.resumes.index') }}" class="btn btn-secondary btn-lg"
                   style="margin-left: 10px; border-radius: 24px; display: inline-block;">
                    Cancel
                </a>
            </div>
        </form>

        <div class="experience-template d-none" id="experience-template">
            <div class="create-resume-form expanded dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                <div class="delete-experience" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;">
                    <i class="fas fa-trash-alt"></i>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="from-group">
                            <label class="form-label">Company Name</label>
                            <input type="text" data-name="experiences[__INDEX__][company]" class="form-input" placeholder="Linksol Ltd">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="from-group">
                            <label class="form-label">Position</label>
                            <input type="text" data-name="experiences[__INDEX__][position]" class="form-input" placeholder="UI/UX Designer">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="from-group">
                            <label class="form-label">Start Date</label>
                            <input type="month" data-name="experiences[__INDEX__][start_date]" class="form-input" placeholder="YYYY-MM">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="from-group">
                            <label class="form-label">End Date</label>
                            <input type="month" data-name="experiences[__INDEX__][end_date]" class="form-input" placeholder="YYYY-MM">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="from-group">
                            <input type="checkbox" data-name="experiences[__INDEX__][is_current]" value="1" class="custom-control-input current-checkbox">
                            <label class="form-label">Currently working here</label>
                        </div>
                    </div>
                </div>
                <div class="summary-section">
                    <div class="summary-header">
                        <label class="form-label">Description</label>
                        <div class="ai-experience-description ai-summary">
                            <i class="fas fa-magic"></i>
                            <span style="white-space: nowrap;">AI Generated Summary</span>
                        </div>
                    </div>
                    <textarea data-name="experiences[__INDEX__][description]" class="form-textarea" placeholder="Describe your responsibility and achievements..."></textarea>
                </div>
            </div>
        </div>

        <template id="education-template">
            <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                <div class="delete-education" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;">
                    <i class="fas fa-trash-alt"></i>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Institution</label>
                        <input type="text" data-name="educations[__INDEX__][institution]" class="form-input" placeholder="University name">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Degree</label>
                        <input type="text" data-name="educations[__INDEX__][degree]" class="form-input" placeholder="BSc, MSc, ...">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Field of Study</label>
                        <input type="text" data-name="educations[__INDEX__][field_of_study]" class="form-input" placeholder="Computer Science, ...">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">GPA (Optional)</label>
                        <input type="text" data-name="educations[__INDEX__][gpa]" class="form-input" placeholder="3.8/4.0">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Start Date</label>
                        <input type="month" data-name="educations[__INDEX__][start_date]" class="form-input">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">End Date</label>
                        <input type="month" data-name="educations[__INDEX__][end_date]" class="form-input">
                    </div>
                </div>
                <div class="col-12">
                    <div class="from-group">
                        <label class="form-label">Description</label>
                        <textarea data-name="educations[__INDEX__][description]" class="form-textarea" placeholder="Describe your education and achievements..."></textarea>
                    </div>
                </div>
            </div>
        </template>

        <template id="skill-template">
            <div class="row dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                <div class="delete-skill" style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;">
                    <i class="fas fa-trash-alt"></i>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Skill Name</label>
                        <input type="text" data-name="skills[__INDEX__][name]" class="form-input" placeholder="e.g. Laravel">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="from-group">
                        <label class="form-label">Level</label>
                        <select data-name="skills[__INDEX__][level]" class="form-input">
                            <option value="">Select level</option>
                            <option value="beginner">Beginner</option>
                            <option value="intermediate">Intermediate</option>
                            <option value="advanced">Advanced</option>
                            <option value="expert">Expert</option>
                        </select>
                    </div>
                </div>
            </div>
        </template>

    </div>

    @section('scripts')
    <script>
        (function() {
            const experienceContainer = document.getElementById('experience-forms-container');
            const educationContainer = document.getElementById('education-forms-container');
            const skillsContainer = document.getElementById('skills-forms-container');

            let experienceIndex = {{ max(1, $resume->experiences->count()) }};
            let educationIndex = {{ max(1, $resume->educations->count()) }};
            let skillIndex = {{ max(1, $resume->skills->count()) }};

            function wireDeleteButtons(root) {
                root.querySelectorAll('.delete-experience').forEach(btn => btn.addEventListener('click', () => btn.closest('.dynamic-form-item').remove()));
                root.querySelectorAll('.delete-education').forEach(btn => btn.addEventListener('click', () => btn.closest('.dynamic-form-item').remove()));
                root.querySelectorAll('.delete-skill').forEach(btn => btn.addEventListener('click', () => btn.closest('.dynamic-form-item').remove()));
            }

            function applyNamesFromData(container) {
                container.querySelectorAll('[data-name]').forEach(input => {
                    input.setAttribute('name', input.getAttribute('data-name'));
                    input.removeAttribute('data-name');
                });
            }

            document.getElementById('add-experience-btn')?.addEventListener('click', function() {
                const tmpl = document.getElementById('experience-template').cloneNode(true);
                tmpl.id = '';
                const html = tmpl.querySelector('.dynamic-form-item');
                html.innerHTML = html.innerHTML.replaceAll('__INDEX__', String(experienceIndex));
                experienceContainer.appendChild(html);
                applyNamesFromData(html);
                wireDeleteButtons(html);
                experienceIndex++;
            });

            document.getElementById('add-education-btn')?.addEventListener('click', function() {
                const tmpl = document.getElementById('education-template').content.cloneNode(true);
                const wrapper = document.createElement('div');
                wrapper.appendChild(tmpl);
                const html = wrapper.querySelector('.dynamic-form-item');
                html.innerHTML = html.innerHTML.replaceAll('__INDEX__', String(educationIndex));
                educationContainer.appendChild(html);
                applyNamesFromData(html);
                wireDeleteButtons(html);
                educationIndex++;
            });

            document.getElementById('add-skill-btn')?.addEventListener('click', function() {
                const tmpl = document.getElementById('skill-template').content.cloneNode(true);
                const wrapper = document.createElement('div');
                wrapper.appendChild(tmpl);
                const html = wrapper.querySelector('.dynamic-form-item');
                html.innerHTML = html.innerHTML.replaceAll('__INDEX__', String(skillIndex));
                skillsContainer.appendChild(html);
                applyNamesFromData(html);
                wireDeleteButtons(html);
                skillIndex++;
            });

            wireDeleteButtons(document);

            // Accordion behavior (match create page)
            function setupAccordion(sectionId) {
                const section = document.getElementById(sectionId);
                if (!section) return;
                const header = section.querySelector('.create-resume-header');
                const form = section.querySelector('.create-resume-form');
                if (!header || !form) return;
                header.addEventListener('click', function() {
                    const isCollapsed = header.classList.contains('collapsed');
                    header.classList.toggle('collapsed', !isCollapsed);
                    header.classList.toggle('expanded', isCollapsed);
                    form.classList.toggle('collapsed', !isCollapsed);
                    form.classList.toggle('expanded', isCollapsed);
                });
            }
            setupAccordion('personal-info-section');
            setupAccordion('experience-section');
            setupAccordion('education-section');
            setupAccordion('skills-section');
        })();
    </script>
    @endsection

@endsection