@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>

    <!-- Info Banner -->
    <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: {{ $resume->original_filename }}
                </h4>
                <p style="margin: 0.5rem 0 0 0; color: #6c757d; font-size: 0.9rem;">
                    Below is your uploaded resume. Please manually enter the information below.
                </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>

    <!-- Two Column Layout -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
        <!-- Left Column: PDF Viewer -->
        <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem;">
            <h4 style="margin-bottom: 1rem; color: #333;">Your Uploaded Resume</h4>
            <div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden; height: 600px;">
                @if($resume->file_type === 'pdf')
                    <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>
        </div>

        <!-- Right Column: Data Entry Form -->
        <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem;">
            <h4 style="margin-bottom: 1rem; color: #333;">Enter Resume Information</h4>

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

                <!-- Personal Information -->
                <div style="margin-bottom: 1.5rem;">
                    <h5 style="color: #0B9E8C; margin-bottom: 0.75rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">Personal Information</h5>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Full Name</label>
                        <input type="text" name="name" class="form-input" value="{{ old('name', $resume->name) }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Email</label>
                        <input type="email" name="email" class="form-input" value="{{ old('email', $resume->email) }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Phone</label>
                        <input type="tel" name="phone" class="form-input" value="{{ old('phone', $resume->phone) }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Location</label>
                        <input type="text" name="location" class="form-input" value="{{ old('location', $resume->location) }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Website</label>
                        <input type="url" name="website" class="form-input" value="{{ old('website', $resume->website) }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">Summary</label>
                        <textarea name="summary" class="form-textarea" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;">{{ old('summary', $resume->summary) }}</textarea>
                    </div>
                </div>

                <!-- Work Experience -->
                <div style="margin-bottom: 1.5rem;">
                    <h5 style="color: #0B9E8C; margin-bottom: 0.75rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">Work Experience</h5>
                    <div id="experiences-container">
                        @php $expIndex = 0; @endphp
                        @forelse($resume->experiences as $experience)
                            <div class="experience-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
                                @if($expIndex > 0)
                                    <button type="button" onclick="this.closest('.experience-item').remove()" style="float: right; background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                @endif

                                <input type="text" name="experiences[{{ $expIndex }}][company]" placeholder="Company Name" value="{{ $experience->company }}" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="experiences[{{ $expIndex }}][position]" placeholder="Position" value="{{ $experience->position }}" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                                    <input type="month" name="experiences[{{ $expIndex }}][start_date]" placeholder="Start Date" value="{{ $experience->start_date ? substr($experience->start_date,0,7) : '' }}" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <input type="month" name="experiences[{{ $expIndex }}][end_date]" placeholder="End Date" value="{{ $experience->end_date ? substr($experience->end_date,0,7) : '' }}" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                </div>
                                <label style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                                    <input type="checkbox" name="experiences[{{ $expIndex }}][is_current]" value="1" {{ $experience->is_current ? 'checked' : '' }} style="margin-right: 0.5rem;">
                                    <span>Currently working here</span>
                                </label>
                                <textarea name="experiences[{{ $expIndex }}][description]" placeholder="Description" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; min-height: 60px;">{{ $experience->description }}</textarea>
                            </div>
                            @php $expIndex++; @endphp
                        @empty
                            <div class="experience-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
                                <input type="text" name="experiences[0][company]" placeholder="Company Name" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="experiences[0][position]" placeholder="Position" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                                    <input type="month" name="experiences[0][start_date]" placeholder="Start Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <input type="month" name="experiences[0][end_date]" placeholder="End Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                </div>
                                <label style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                                    <input type="checkbox" name="experiences[0][is_current]" value="1" style="margin-right: 0.5rem;">
                                    <span>Currently working here</span>
                                </label>
                                <textarea name="experiences[0][description]" placeholder="Description" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; min-height: 60px;"></textarea>
                            </div>
                        @endforelse
                    </div>
                    <button type="button" onclick="addExperience()" style="background: #0B9E8C; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-plus"></i> Add Experience
                    </button>
                </div>

                <!-- Education -->
                <div style="margin-bottom: 1.5rem;">
                    <h5 style="color: #0B9E8C; margin-bottom: 0.75rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">Education</h5>
                    <div id="educations-container">
                        @php $eduIndex = 0; @endphp
                        @forelse($resume->educations as $education)
                            <div class="education-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
                                @if($eduIndex > 0)
                                    <button type="button" onclick="this.closest('.education-item').remove()" style="float: right; background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                @endif

                                <input type="text" name="educations[{{ $eduIndex }}][institution]" placeholder="Institution" value="{{ $education->institution }}" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="educations[{{ $eduIndex }}][degree]" placeholder="Degree" value="{{ $education->degree }}" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="educations[{{ $eduIndex }}][field_of_study]" placeholder="Field of Study" value="{{ $education->field_of_study }}" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                                    <input type="month" name="educations[{{ $eduIndex }}][start_date]" placeholder="Start Date" value="{{ $education->start_date ? substr($education->start_date,0,7) : '' }}" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <input type="month" name="educations[{{ $eduIndex }}][end_date]" placeholder="End Date" value="{{ $education->end_date ? substr($education->end_date,0,7) : '' }}" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                </div>
                                <input type="text" name="educations[{{ $eduIndex }}][gpa]" placeholder="GPA" value="{{ $education->gpa }}" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                            </div>
                            @php $eduIndex++; @endphp
                        @empty
                            <div class="education-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
                                <input type="text" name="educations[0][institution]" placeholder="Institution" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="educations[0][degree]" placeholder="Degree" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <input type="text" name="educations[0][field_of_study]" placeholder="Field of Study" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                                    <input type="month" name="educations[0][start_date]" placeholder="Start Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <input type="month" name="educations[0][end_date]" placeholder="End Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                </div>
                                <input type="text" name="educations[0][gpa]" placeholder="GPA" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                            </div>
                        @endforelse
                    </div>
                    <button type="button" onclick="addEducation()" style="background: #0B9E8C; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-plus"></i> Add Education
                    </button>
                </div>

                <!-- Skills -->
                <div style="margin-bottom: 1.5rem;">
                    <h5 style="color: #0B9E8C; margin-bottom: 0.75rem; border-bottom: 2px solid #0B9E8C; padding-bottom: 0.5rem;">Skills</h5>
                    <div id="skills-container">
                        @php $skillIndex = 0; @endphp
                        @forelse($resume->skills as $skill)
                            <div class="skill-item" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
                                <input type="text" name="skills[{{ $skillIndex }}][name]" placeholder="Skill Name" value="{{ $skill->name }}" style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <select name="skills[{{ $skillIndex }}][level]" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <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>
                                @if($skillIndex > 0)
                                    <button type="button" onclick="this.closest('.skill-item').remove()" style="background: #dc3545; color: white; border: none; padding: 0.5rem; border-radius: 4px; cursor: pointer;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                @endif
                            </div>
                            @php $skillIndex++; @endphp
                        @empty
                            <div class="skill-item" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
                                <input type="text" name="skills[0][name]" placeholder="Skill Name" style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                <select name="skills[0][level]" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <option value="beginner">Beginner</option>
                                    <option value="intermediate" selected>Intermediate</option>
                                    <option value="advanced">Advanced</option>
                                    <option value="expert">Expert</option>
                                </select>
                            </div>
                        @endforelse
                    </div>
                    <button type="button" onclick="addSkill()" style="background: #0B9E8C; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-plus"></i> Add Skill
                    </button>
                </div>

                <!-- Submit Button -->
                <div style="text-align: right; margin-top: 2rem;">
                    <a href="{{ route('user.resumes.index') }}" style="padding: 0.75rem 1.5rem; background: #6c757d; color: white; text-decoration: none; border-radius: 4px; margin-right: 1rem;">Cancel</a>
                    <button type="submit" style="padding: 0.75rem 1.5rem; background: #0B9E8C; color: white; border: none; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let expIndex = {{ $resume->experiences->count() }};
let eduIndex = {{ $resume->educations->count() }};
let skillIndex = {{ $resume->skills->count() }};

function addExperience() {
    const container = document.getElementById('experiences-container');
    const html = `
        <div class="experience-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
            <button type="button" onclick="this.closest('.experience-item').remove()" style="float: right; background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
            <input type="text" name="experiences[${expIndex}][company]" placeholder="Company Name" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <input type="text" name="experiences[${expIndex}][position]" placeholder="Position" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                <input type="month" name="experiences[${expIndex}][start_date]" placeholder="Start Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <input type="month" name="experiences[${expIndex}][end_date]" placeholder="End Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <label style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                <input type="checkbox" name="experiences[${expIndex}][is_current]" value="1" style="margin-right: 0.5rem;">
                <span>Currently working here</span>
            </label>
            <textarea name="experiences[${expIndex}][description]" placeholder="Description" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; min-height: 60px;"></textarea>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    expIndex++;
}

function addEducation() {
    const container = document.getElementById('educations-container');
    const html = `
        <div class="education-item" style="border: 1px solid #e0e0e0; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
            <button type="button" onclick="this.closest('.education-item').remove()" style="float: right; background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
            <input type="text" name="educations[${eduIndex}][institution]" placeholder="Institution" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <input type="text" name="educations[${eduIndex}][degree]" placeholder="Degree" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <input type="text" name="educations[${eduIndex}][field_of_study]" placeholder="Field of Study" style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                <input type="month" name="educations[${eduIndex}][start_date]" placeholder="Start Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <input type="month" name="educations[${eduIndex}][end_date]" placeholder="End Date" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <input type="text" name="educations[${eduIndex}][gpa]" placeholder="GPA" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    eduIndex++;
}

function addSkill() {
    const container = document.getElementById('skills-container');
    const html = `
        <div class="skill-item" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
            <input type="text" name="skills[${skillIndex}][name]" placeholder="Skill Name" style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
            <select name="skills[${skillIndex}][level]" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                <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="this.closest('.skill-item').remove()" 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', html);
    skillIndex++;
}
</script>

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

@endsection