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

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1"><i class="fas fa-plus-circle text-primary me-2"></i>Create New Resume</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('user.resumes.index') }}">Resumes</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('user.resumes.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> Back to Resumes
        </a>
    </div>

    <!-- Template Selection Section -->
    @if (request()->has('template'))
        @php
            $selectedTemplate = \App\Models\Template::find(request()->get('template'));
        @endphp
        @if ($selectedTemplate)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-info alert-dismissible show fade">
                        <div class="alert-body">
                            <button class="close" data-dismiss="alert">
                                <span>&times;</span>
                            </button>
                            <i class="fas fa-info-circle mr-2"></i>
                            <strong>Template Selected:</strong> {{ $selectedTemplate->name }}
                            <a href="{{ route('user.templates.index') }}" class="btn btn-sm btn-outline-info ml-2">Change
                                Template</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @else
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4><i class="fas fa-palette text-primary mr-2"></i>Choose a Template</h4>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Select a template to get started with your resume creation:</p>
                        <div class="row">
                            @php
                                $templates = \App\Models\Template::where('status', 'active')
                                    ->orderBy('is_featured', 'desc')
                                    ->orderBy('created_at', 'desc')
                                    ->limit(6)
                                    ->get();
                            @endphp
                            @foreach ($templates as $template)
                                <div class="col-md-4 mb-3">
                                    <div class="template-option text-center p-3 border rounded cursor-pointer"
                                        onclick="selectTemplateForResume({{ $template->id }}, '{{ $template->name }}')"
                                        style="cursor: pointer; transition: all 0.3s ease;">
                                        <div class="template-preview mb-3" style="height: 140px; border:1px solid #e9ecef; border-radius:10px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center;">
                                            <div style="width:80%; height:70%; border:1px solid #e9ecef; border-radius:6px; position:relative; overflow:hidden;">
                                                <div style="height:28%; background:linear-gradient(135deg,#667eea,#764ba2);"></div>
                                                <div style="padding:6px; font-size:10px; color:#6c757d;">
                                                    <div><strong>Experience</strong> — Senior Developer at Tech Corp</div>
                                                    <div style="margin-top:4px;"><strong>Education</strong> — BS Computer Science</div>
                                                </div>
                                            </div>
                                        </div>
                                        <h6 class="mb-2">{{ $template->name }}</h6>
                                        <small
                                            class="text-muted d-block mb-2">{{ Str::limit($template->description, 50) }}</small>
                                        @if ($template->is_featured)
                                            <span class="badge badge-warning badge-sm">
                                                <i class="fas fa-star"></i> Featured
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ route('user.templates.index') }}" class="btn btn-outline-primary">
                                <i class="fas fa-eye mr-1"></i>View All Templates
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @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"></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"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4><i class="fas fa-plus-circle text-primary mr-2"></i>Create New 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.store') }}" method="POST" id="resumeForm"
                        enctype="multipart/form-data">
                        @csrf

                        <!-- 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') }}"
                                                        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') }}"
                                                        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') }}"
                                                        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') }}"
                                                        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') }}"
                                                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>
                                            <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 professional photo (max 2MB,
                                                JPG/PNG/GIF)</small>
                                            @error('image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div id="imagePreview" class="mt-3" style="display: none;">
                                                <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') }}</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">
                                            <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>
                                        </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">
                                            <div class="education-item bg-light rounded p-4 mb-4">
                                                <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="University 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="Bachelor's, Master's, etc.">
                                                        </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>
                                            </div>
                                        </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">
                                            <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>
                                        </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 mr-2"></i> Create Resume
                            </button>
                            <a href="{{ route('user.resumes.index') }}" class="btn btn-secondary btn-lg ml-2">
                                <i class="fas fa-times mr-2"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </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;
            }

            .template-option {
                border: 2px solid #e4e6fc !important;
                transition: all 0.3s ease;
            }

            .template-option:hover {
                border-color: #667eea !important;
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
            }

            .template-option.selected {
                border-color: #667eea !important;
                background-color: #f8f9ff;
            }

            .cursor-pointer {
                cursor: pointer;
            }
        </style>

        <script>
            let experienceIndex = 1;
            let educationIndex = 1;
            let skillIndex = 1;
            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="University 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="Bachelor's, Master's, etc.">
                </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 : '';
            }

            function selectTemplateForResume(templateId, templateName) {
                // Add template ID to form
                const templateInput = document.createElement('input');
                templateInput.type = 'hidden';
                templateInput.name = 'template_id';
                templateInput.value = templateId;
                document.getElementById('resumeForm').appendChild(templateInput);

                // Show success message
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible show fade';
                alertDiv.innerHTML = `
        <div class="alert-body">
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <i class="fas fa-check-circle mr-2"></i>
            <strong>Template Selected:</strong> ${templateName}
        </div>
    `;

                // Insert alert before the form
                const form = document.getElementById('resumeForm');
                form.parentNode.insertBefore(alertDiv, form);

                // Remove template selection section
                const templateSection = document.querySelector('.card-header').closest('.row').previousElementSibling;
                if (templateSection) {
                    templateSection.remove();
                }

                // Scroll to form
                form.scrollIntoView({
                    behavior: 'smooth'
                });
            }

            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('input[name*="[is_current]"]')?.value ||
                            '0' // Add is_current to payload
                    }));

                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('input[name*="[is_current]"]')?.value ||
                    '0'; // Get is_current value
                    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: '',
                        is_current: is_current // Add is_current to payload
                    };
                    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