@extends('user.layout.app')
@section('title', 'Edit Resume')
@section('content')

<div class="page-content">
    <section class="section">
        <div class="section-header">
            <h1>Edit Resume</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('user.dashboard') }}">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="{{ route('user.resumes.index') }}">Resumes</a></div>
                <div class="breadcrumb-item">Edit</div>
            </div>
        </div>

        <div class="section-body">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-edit text-primary mr-2"></i>Edit Resume</h4>
                            <div class="card-header-action">
                                <a href="{{ route('user.resumes.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left mr-2"></i> Back to Resumes
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('user.resumes.update', $resume->id) }}" method="POST" id="resumeForm" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <!-- Personal Information -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-user text-primary mr-2"></i>Personal Information
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name" class="font-weight-bold">
                                                                <i class="fas fa-user text-primary mr-2"></i>Full Name <span class="text-danger">*</span>
                                                            </label>
                                                            <input type="text"
                                                                   id="name"
                                                                   name="name"
                                                                   value="{{ old('name', $resume->name) }}"
                                                                   class="form-control @error('name') is-invalid @enderror"
                                                                   placeholder="Enter your full name"
                                                                   required>
                                                            @error('name')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="email" class="font-weight-bold">
                                                                <i class="fas fa-envelope text-primary mr-2"></i>Email <span class="text-danger">*</span>
                                                            </label>
                                                            <input type="email"
                                                                   id="email"
                                                                   name="email"
                                                                   value="{{ old('email', $resume->email) }}"
                                                                   class="form-control @error('email') is-invalid @enderror"
                                                                   placeholder="Enter your email address"
                                                                   required>
                                                            @error('email')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="phone" class="font-weight-bold">
                                                                <i class="fas fa-phone text-primary mr-2"></i>Phone
                                                            </label>
                                                            <input type="tel"
                                                                   id="phone"
                                                                   name="phone"
                                                                   value="{{ old('phone', $resume->phone) }}"
                                                                   class="form-control @error('phone') is-invalid @enderror"
                                                                   placeholder="Enter your phone number">
                                                            @error('phone')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="location" class="font-weight-bold">
                                                                <i class="fas fa-map-marker-alt text-primary mr-2"></i>Location
                                                            </label>
                                                            <input type="text"
                                                                   id="location"
                                                                   name="location"
                                                                   value="{{ old('location', $resume->location) }}"
                                                                   class="form-control @error('location') is-invalid @enderror"
                                                                   placeholder="Enter your location">
                                                            @error('location')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="website" class="font-weight-bold">
                                                        <i class="fas fa-globe text-primary mr-2"></i>Website/Portfolio
                                                    </label>
                                                    <input type="url"
                                                           id="website"
                                                           name="website"
                                                           value="{{ old('website', $resume->website) }}"
                                                           class="form-control @error('website') is-invalid @enderror"
                                                           placeholder="Enter your website or portfolio URL">
                                                    @error('website')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="image" class="font-weight-bold">
                                                        <i class="fas fa-image text-primary mr-2"></i>Profile Image
                                                    </label>
                                                    @if($resume->image)
                                                        <div class="mb-2">
                                                            <p class="text-muted mb-1">Current image:</p>
                                                            <img src="{{ Storage::url($resume->image) }}" alt="Current Profile" style="max-width: 100px; max-height: 100px; border-radius: 8px; border: 2px solid #dee2e6;">
                                                        </div>
                                                    @endif
                                                    <input type="file"
                                                           id="image"
                                                           name="image"
                                                           class="form-control @error('image') is-invalid @enderror"
                                                           accept="image/jpeg,image/png,image/jpg,image/gif"
                                                           onchange="previewImage(this)">
                                                    <small class="form-text text-muted">Upload a new professional photo to replace current image (max 2MB, JPG/PNG/GIF)</small>
                                                    @error('image')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div id="imagePreview" class="mt-3" style="display: none;">
                                                        <p class="text-muted mb-1">New image preview:</p>
                                                        <img id="previewImg" src="" alt="Profile Preview" style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid #dee2e6;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Professional Summary -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-file-alt text-primary mr-2"></i>Professional Summary
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="form-group">
                                                    <label for="summary" class="font-weight-bold">
                                                        <i class="fas fa-align-left text-primary mr-2"></i>Summary
                                                    </label>
                                                    <textarea id="summary"
                                                              name="summary"
                                                              rows="4"
                                                              class="form-control @error('summary') is-invalid @enderror"
                                                              placeholder="Write a brief professional summary highlighting your key strengths and career objectives...">{{ old('summary', $resume->summary) }}</textarea>
                                                    @error('summary')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="mt-2">
                                                        <button type="button" class="btn btn-outline-info" onclick="generateAiSummary(this)">
                                                            <i class="fas fa-magic mr-2"></i> AI Generate Summary
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Work Experience -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-briefcase text-primary mr-2"></i>Work Experience
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="experiences-container">
                                                    @if($resume->experiences->count() > 0)
                                                        @foreach($resume->experiences as $index => $experience)
                                                            <div class="experience-item bg-light rounded p-4 mb-4">
                                                                @if($index > 0)
                                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                                        <h6 class="mb-0">Experience {{ $index + 1 }}</h6>
                                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeExperience(this)">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                @endif
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Company</label>
                                                                            <input type="text"
                                                                                   name="experiences[{{ $index }}][company]"
                                                                                   value="{{ $experience->company }}"
                                                                                   class="form-control"
                                                                                   placeholder="Enter company name">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Position</label>
                                                                            <input type="text"
                                                                                   name="experiences[{{ $index }}][position]"
                                                                                   value="{{ $experience->position }}"
                                                                                   class="form-control"
                                                                                   placeholder="Enter job title">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Start Date</label>
                                                                            <input type="month"
                                                                                   name="experiences[{{ $index }}][start_date]"
                                                                                   value="{{ $experience->start_date ? substr($experience->start_date,0,7) : '' }}"
                                                                                   class="form-control">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">End Date</label>
                                                                            <input type="month"
                                                                                   name="experiences[{{ $index }}][end_date]"
                                                                                   value="{{ $experience->end_date ? substr($experience->end_date,0,7) : '' }}"
                                                                                   class="form-control end-date-input"
                                                                                   {{ $experience->is_current ? 'disabled' : '' }}>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input current-checkbox" id="current-{{ $index }}" name="experiences[{{ $index }}][is_current]" value="1" {{ $experience->is_current ? 'checked' : '' }} onchange="toggleCurrent(this)">
                                                                        <label class="custom-control-label" for="current-{{ $index }}">Currently working here</label>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label class="font-weight-bold">Description</label>
                                                                    <textarea name="experiences[{{ $index }}][description]"
                                                                              rows="3"
                                                                              class="form-control"
                                                                              placeholder="Describe your responsibilities and achievements...">{{ $experience->description }}</textarea>
                                                                    <div class="mt-2">
                                                                        <button type="button" class="btn btn-sm btn-outline-info" onclick="generateAiDescription(this)">
                                                                            <i class="fas fa-magic mr-2"></i> AI Generate Description
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="experience-item bg-light rounded p-4 mb-4">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Company</label>
                                                                        <input type="text"
                                                                               name="experiences[0][company]"
                                                                               class="form-control"
                                                                               placeholder="Enter company name">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Position</label>
                                                                        <input type="text"
                                                                               name="experiences[0][position]"
                                                                               class="form-control"
                                                                               placeholder="Enter job title">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Start Date</label>
                                                                        <input type="month"
                                                                               name="experiences[0][start_date]"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">End Date</label>
                                                                        <input type="month"
                                                                               name="experiences[0][end_date]"
                                                                               class="form-control end-date-input">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input current-checkbox" id="current-0" name="experiences[0][is_current]" value="1" onchange="toggleCurrent(this)">
                                                                    <label class="custom-control-label" for="current-0">Currently working here</label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="font-weight-bold">Description</label>
                                                                <textarea name="experiences[0][description]"
                                                                          rows="3"
                                                                          class="form-control"
                                                                          placeholder="Describe your responsibilities and achievements..."></textarea>
                                                                <div class="mt-2">
                                                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="generateAiDescription(this)">
                                                                        <i class="fas fa-magic mr-2"></i> AI Generate Description
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-outline-primary" onclick="addExperience()">
                                                    <i class="fas fa-plus mr-2"></i>Add Experience
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Education -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-graduation-cap text-primary mr-2"></i>Education
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="educations-container">
                                                    @if($resume->educations->count() > 0)
                                                        @foreach($resume->educations as $index => $education)
                                                            <div class="education-item bg-light rounded p-4 mb-4">
                                                                @if($index > 0)
                                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                                        <h6 class="mb-0">Education {{ $index + 1 }}</h6>
                                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeEducation(this)">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                @endif
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Institution</label>
                                                                            <input type="text"
                                                                                   name="educations[{{ $index }}][institution]"
                                                                                   value="{{ $education->institution }}"
                                                                                   class="form-control"
                                                                                   placeholder="Enter institution name">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Degree</label>
                                                                            <input type="text"
                                                                                   name="educations[{{ $index }}][degree]"
                                                                                   value="{{ $education->degree }}"
                                                                                   class="form-control"
                                                                                   placeholder="Enter degree name">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Field of Study</label>
                                                                            <input type="text"
                                                                                   name="educations[{{ $index }}][field_of_study]"
                                                                                   value="{{ $education->field_of_study }}"
                                                                                   class="form-control"
                                                                                   placeholder="Computer Science, Business, etc.">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">GPA (Optional)</label>
                                                                            <input type="text"
                                                                                   name="educations[{{ $index }}][gpa]"
                                                                                   value="{{ $education->gpa }}"
                                                                                   class="form-control"
                                                                                   placeholder="3.8/4.0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Start Date</label>
                                                                            <input type="month"
                                                                                   name="educations[{{ $index }}][start_date]"
                                                                                   value="{{ $education->start_date ? substr($education->start_date,0,7) : '' }}"
                                                                                   class="form-control">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">End Date</label>
                                                                            <input type="month"
                                                                                   name="educations[{{ $index }}][end_date]"
                                                                                   value="{{ $education->end_date ? substr($education->end_date,0,7) : '' }}"
                                                                                   class="form-control">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label class="font-weight-bold">Description</label>
                                                                    <textarea name="educations[{{ $index }}][description]"
                                                                              rows="3"
                                                                              class="form-control"
                                                                              placeholder="Describe your education and achievements...">{{ $education->description }}</textarea>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="education-item bg-light rounded p-4 mb-4">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Institution</label>
                                                                        <input type="text"
                                                                               name="educations[0][institution]"
                                                                               class="form-control"
                                                                               placeholder="Enter institution name">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Degree</label>
                                                                        <input type="text"
                                                                               name="educations[0][degree]"
                                                                               class="form-control"
                                                                               placeholder="Enter degree name">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Field of Study</label>
                                                                        <input type="text"
                                                                               name="educations[0][field_of_study]"
                                                                               class="form-control"
                                                                               placeholder="Computer Science, Business, etc.">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">GPA (Optional)</label>
                                                                        <input type="text"
                                                                               name="educations[0][gpa]"
                                                                               class="form-control"
                                                                               placeholder="3.8/4.0">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Start Date</label>
                                                                        <input type="month"
                                                                               name="educations[0][start_date]"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">End Date</label>
                                                                        <input type="month"
                                                                               name="educations[0][end_date]"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- <div class="form-group">
                                                                <label class="font-weight-bold">Description</label>
                                                                <textarea name="educations[0][description]"
                                                                          rows="3"
                                                                          class="form-control"
                                                                          placeholder="Describe your education and achievements..."></textarea>
                                                            </div> --}}
                                                        </div>
                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-outline-primary" onclick="addEducation()">
                                                    <i class="fas fa-plus mr-2"></i>Add Education
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Skills -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-star text-primary mr-2"></i>Skills
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="skills-container">
                                                    @if($resume->skills->count() > 0)
                                                        @foreach($resume->skills as $index => $skill)
                                                            <div class="skill-item bg-light rounded p-4 mb-4">
                                                                @if($index > 0)
                                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                                        <h6 class="mb-0">Skill {{ $index + 1 }}</h6>
                                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeSkill(this)">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                @endif
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Skill Name</label>
                                                                            <input type="text"
                                                                                   name="skills[{{ $index }}][name]"
                                                                                   value="{{ $skill->name }}"
                                                                                   class="form-control"
                                                                                   placeholder="Enter skill name">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="font-weight-bold">Level</label>
                                                                            <select name="skills[{{ $index }}][level]" class="form-control">
                                                                                <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>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="skill-item bg-light rounded p-4 mb-4">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Skill Name</label>
                                                                        <input type="text"
                                                                               name="skills[0][name]"
                                                                               class="form-control"
                                                                               placeholder="Enter skill name">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="font-weight-bold">Level</label>
                                                                        <select name="skills[0][level]" class="form-control">
                                                                            <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>
                                                        </div>
                                                    @endif
                                                </div>
                                                <button type="button" class="btn btn-outline-primary" onclick="addSkill()">
                                                    <i class="fas fa-plus mr-2"></i>Add Skill
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="form-group text-center mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-save me-2"></i> Update Resume
                                    </button>
                                    <a href="{{ route('user.resumes.index') }}" class="btn btn-secondary btn-lg ms-2">
                                        <i class="fas fa-times me-2"></i> Cancel
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
.card {
  border: none;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  border-radius: 15px;
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px 15px 0 0 !important;
  border: none;
}

.form-control {
  border-radius: 10px;
  border: 2px solid #e4e6fc;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.bg-light {
  background-color: #f8f9fa !important;
}

.alert {
  border-radius: 10px;
  border: none;
}
</style>

<script>
let experienceIndex = {{ $resume->experiences->count() }};
let educationIndex = {{ $resume->educations->count() }};
let skillIndex = {{ $resume->skills->count() }};
const aiSummaryUrl = "{{ route('resume.generate-summary') }}";
const aiDescriptionUrl = "{{ route('resume.generate-description') }}";

function addExperience() {
    const container = document.getElementById('experiences-container');
    const newExperience = document.createElement('div');
    newExperience.className = 'experience-item bg-light rounded p-4 mb-4';
    newExperience.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0">Experience ${experienceIndex + 1}</h6>
            <button type="button" class="btn btn-sm btn-danger" onclick="removeExperience(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Company</label>
                    <input type="text" name="experiences[${experienceIndex}][company]" class="form-control" placeholder="Enter company name">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Position</label>
                    <input type="text" name="experiences[${experienceIndex}][position]" class="form-control" placeholder="Enter job title">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Start Date</label>
                    <input type="month" name="experiences[${experienceIndex}][start_date]" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">End Date</label>
                    <input type="month" name="experiences[${experienceIndex}][end_date]" class="form-control end-date-input">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input current-checkbox" id="current-${experienceIndex}" name="experiences[${experienceIndex}][is_current]" value="1" onchange="toggleCurrent(this)">
                <label class="custom-control-label" for="current-${experienceIndex}">Currently working here</label>
            </div>
        </div>
        <div class="form-group">
            <label class="font-weight-bold">Description</label>
            <textarea name="experiences[${experienceIndex}][description]" rows="3" class="form-control" placeholder="Describe your responsibilities and achievements..."></textarea>
            <div class="mt-2">
                <button type="button" class="btn btn-sm btn-outline-info" onclick="generateAiDescription(this)">
                    <i class="fas fa-magic mr-2"></i> AI Generate Description
                </button>
            </div>
        </div>
    `;
    container.appendChild(newExperience);
    experienceIndex++;
}

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

function addEducation() {
    const container = document.getElementById('educations-container');
    const newEducation = document.createElement('div');
    newEducation.className = 'education-item bg-light rounded p-4 mb-4';
    newEducation.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0">Education ${educationIndex + 1}</h6>
            <button type="button" class="btn btn-sm btn-danger" onclick="removeEducation(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Institution</label>
                    <input type="text" name="educations[${educationIndex}][institution]" class="form-control" placeholder="Enter institution name">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Degree</label>
                    <input type="text" name="educations[${educationIndex}][degree]" class="form-control" placeholder="Enter degree name">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Field of Study</label>
                    <input type="text" name="educations[${educationIndex}][field_of_study]" class="form-control" placeholder="Computer Science, Business, etc.">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">GPA (Optional)</label>
                    <input type="text" name="educations[${educationIndex}][gpa]" class="form-control" placeholder="3.8/4.0">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Start Date</label>
                    <input type="month" name="educations[${educationIndex}][start_date]" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">End Date</label>
                    <input type="month" name="educations[${educationIndex}][end_date]" class="form-control">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="font-weight-bold">Description</label>
            <textarea name="educations[${educationIndex}][description]" rows="3" class="form-control" placeholder="Describe your education and achievements..."></textarea>
        </div>
    `;
    container.appendChild(newEducation);
    educationIndex++;
}

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

function addSkill() {
    const container = document.getElementById('skills-container');
    const newSkill = document.createElement('div');
    newSkill.className = 'skill-item bg-light rounded p-4 mb-4';
    newSkill.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0">Skill ${skillIndex + 1}</h6>
            <button type="button" class="btn btn-sm btn-danger" onclick="removeSkill(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Skill Name</label>
                    <input type="text" name="skills[${skillIndex}][name]" class="form-control" placeholder="Enter skill name">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold">Level</label>
                    <select name="skills[${skillIndex}][level]" class="form-control">
                        <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>
    `;
    container.appendChild(newSkill);
    skillIndex++;
}

function removeSkill(button) {
    button.closest('.skill-item').remove();
}

function previewImage(input) {
    const file = input.files[0];
    const preview = document.getElementById('imagePreview');
    const previewImg = document.getElementById('previewImg');

    if (file) {
        // Validate file size (2MB = 2097152 bytes)
        if (file.size > 2097152) {
            alert('Image size must be less than 2MB');
            input.value = '';
            preview.style.display = 'none';
            return;
        }

        // Validate file type
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        if (!allowedTypes.includes(file.type)) {
            alert('Please select a valid image file (JPG, PNG, GIF)');
            input.value = '';
            preview.style.display = 'none';
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
}

function toggleCurrent(checkboxEl) {
    const experienceItem = checkboxEl.closest('.experience-item');
    if (!experienceItem) return;
    const endInput = experienceItem.querySelector('.end-date-input');
    if (checkboxEl.checked) {
        if (endInput) { endInput.value = ''; endInput.disabled = true; }
    } else {
        if (endInput) { endInput.disabled = false; }
    }
}

function getCsrfToken() {
    const tokenInput = document.querySelector('input[name="_token"]');
    return tokenInput ? tokenInput.value : '';
}

async function generateAiSummary(buttonEl) {
    const originalHtml = buttonEl.innerHTML;
    buttonEl.disabled = true;
    buttonEl.innerHTML = '<span class="spinner-border spinner-border-sm mr-2"></span>Generating...';
    try {
        const payload = buildProfilePayload();
        const res = await fetch(aiSummaryUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': getCsrfToken(),
            },
            body: JSON.stringify(payload),
        });
        const data = await res.json();
        if (data && data.success && data.summary) {
            document.getElementById('summary').value = data.summary;
        } else {
            alert(data.message || 'Failed to generate summary.');
        }
    } catch (e) {
        alert('Failed to generate summary. Please try again.');
    } finally {
        buttonEl.disabled = false;
        buttonEl.innerHTML = originalHtml;
    }
}

function buildProfilePayload() {
    const name = document.getElementById('name')?.value || '';
    const email = document.getElementById('email')?.value || '';
    const phone = document.getElementById('phone')?.value || '';
    const location = document.getElementById('location')?.value || '';
    const website = document.getElementById('website')?.value || '';

    const experiences = Array.from(document.querySelectorAll('#experiences-container .experience-item')).map(item => ({
        company: item.querySelector('input[name*="[company]"]')?.value || '',
        position: item.querySelector('input[name*="[position]"]')?.value || '',
        start_date: item.querySelector('input[name*="[start_date]"]')?.value || '',
        end_date: item.querySelector('input[name*="[end_date]"]')?.value || '',
        description: item.querySelector('textarea[name*="[description]"]')?.value || '',
        is_current: item.querySelector('.current-checkbox')?.checked || false
    }));

    const educations = Array.from(document.querySelectorAll('#educations-container .education-item')).map(item => ({
        school: item.querySelector('input[name*="[institution]"]')?.value || '',
        degree: item.querySelector('input[name*="[degree]"]')?.value || '',
        field: item.querySelector('input[name*="[field_of_study]"]')?.value || '',
        start_date: item.querySelector('input[name*="[start_date]"]')?.value || '',
        end_date: item.querySelector('input[name*="[end_date]"]')?.value || ''
    }));

    const skills = Array.from(document.querySelectorAll('#skills-container .skill-item input[name*="[name]"]')).map(inp => ({
        name: inp.value || ''
    }));

    return {
        name,
        email,
        phone,
        location,
        website,
        experiences: JSON.stringify(experiences),
        educations: JSON.stringify(educations),
        skills: JSON.stringify(skills),
    };
}

async function generateAiDescription(buttonEl) {
    const experienceItem = buttonEl.closest('.experience-item');
    if (!experienceItem) return;
    const originalHtml = buttonEl.innerHTML;
    buttonEl.disabled = true;
    buttonEl.innerHTML = '<span class="spinner-border spinner-border-sm mr-2"></span>Generating...';
    try {
        const company = experienceItem.querySelector('input[name*="[company]"]')?.value || '';
        const position = experienceItem.querySelector('input[name*="[position]"]')?.value || '';
        const start_date = experienceItem.querySelector('input[name*="[start_date]"]')?.value || '';
        const end_date = experienceItem.querySelector('input[name*="[end_date]"]')?.value || '';
        const is_current = experienceItem.querySelector('.current-checkbox')?.checked || false;
        const skillsList = Array.from(document.querySelectorAll('#skills-container .skill-item input[name*="[name]"]')).map(i => i.value).filter(Boolean).join(', ');
        const payload = {
            company,
            position,
            start_date,
            end_date,
            industry: '',
            skills: skillsList,
            achievements: ''
        };
        const res = await fetch(aiDescriptionUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': getCsrfToken(),
            },
            body: JSON.stringify(payload),
        });
        const data = await res.json();
        if (data && data.success && data.description) {
            const textarea = experienceItem.querySelector('textarea[name*="[description]"]');
            if (textarea) textarea.value = data.description;
        } else {
            alert(data.message || 'Failed to generate description.');
        }
    } catch (e) {
        alert('Failed to generate description. Please try again.');
    } finally {
        buttonEl.disabled = false;
        buttonEl.innerHTML = originalHtml;
    }
}
</script>

@endsection