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


    <!-- My Resumes -->
    <div class="template-section-container resume-create-page">

        <div class="template-section-header">
            <div class="template-section-title" style="display: flex;">
                <a href="{{ route('user.resumes.index') }}" class="back-arrow" style="margin-right: 10px; margin-top: -5px;">
                    <div class="arrow-icon"></div>
                </a>Create New Resume
            </div>
        </div>

        <form action="{{ route('user.resumes.store') }}" method="POST" enctype="multipart/form-data" id="resumeForm">
            @csrf

            <!-- Selected Template Alert Placeholder -->
            <div id="template-selected-alert" style="margin-bottom: 16px;"></div>


            <div class="templates-grid">
                <div class="row">
                    @forelse($templates->take(6) as $template)
                    <div class="col-lg-3 col-sm-6 col-md-3 mb-4" style="min-width: 332px;">
                        <!-- Template Card 1 -->
                        <div class="template-card select-template-card"  data-id="{{ $template->id }}" data-name="{{ $template->name }}" style="cursor: pointer;">
                            <div class="template-image" style="height: 400px; overflow: hidden; border: 1px solid #e0e0e0; position: relative; background: #f0f2f5; padding: 0; box-sizing: border-box;">
                                <div class="preview-wrapper" style="height: 100%; width: 100%;">
                                    <iframe src="{{ route('user.templates.preview', $template) }}" style="width: 100%; height: 1414px; transform: scale(0.4); transform-origin: top left; border: none;"></iframe>
                                </div>
                                <div class="template-overlay">Selected</div>
                            </div>
                            <div class="template-body">
                                <div class="template-info">
                                    <div class="template-name">{{ $template->name }}</div>
                                    <div class="template-description">{{ Str::limit($template->description, 60) }}</div>
                                </div>

                                <div class="template-tags">
                                    @if ($template->is_featured)
                                        <div class="tag featured-tag">
                                            <div class="tag-icon">
                                                <img src="{{ asset('assets/user/assets/images/icon/featured-icon.png') }}" alt="">
                                                <!-- <div class="star-icon"></div> -->
                                            </div>
                                            <div class="tag-text">Featured</div>
                                        </div>
                                    @endif
                                    @if ($template->type === 'premium')
                                        <div class="tag premium-tag">
                                            <div class="tag-icon">
                                                <img src="{{ asset('assets/user/assets/images/icon/premium-icon.png') }}" alt="">
                                            </div>
                                            <div class="premium-tag-text">Premium</div>
                                        </div>
                                    @endif
                                    <div class="tag executive-tag">
                                        <div class="tag-icon">
                                            <img src="{{ asset('assets/user/assets/images/icon/executive-icon.png') }}"
                                                alt="">
                                        </div>
                                        <div class="executive-tag-text">{{ $template->category ?? 'General' }}</div>
                                    </div>
                                </div>

                                <div class="template-stats">
                                    <div class="star-download">
                                        <div class="download-stat">
                                            <i class="fas fa-download" style="color: #AEAEAE;"></i>
                                            <!-- <img src="" alt=""> -->
                                            <div class="stat-text">200</div>
                                        </div>
                                        <div class="download-stat">
                                            <i class="far fa-star" style="color: #AEAEAE;"></i>
                                            <!-- <img src="" alt=""> -->
                                            <div class="stat-text">3.5</div>
                                        </div>
                                    </div>
                                    <div class="free-badge">{{ strtoupper($template->type) }}</div>
                                </div>

                                <div class="template-actions" style="display:flex; align-items:center; justify-content:space-between;">
                                    <button type="button" class="use-template-btn" onclick="selectTemplateForResume({{ $template->id }}, '{{ $template->name }}')">
                                        Use Template
                                    </button>
                                    <div class="action-icons">
                                        <div class="action-icon">
                                            <i class="far fa-copy"></i>
                                        </div>
                                        <div class="action-icon">
                                            <i class="far fa-eye"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center py-4">
                                <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No templates available</h5>
                                <p class="text-muted">Check back later for new templates</p>
                            </div>
                        </div>
                    @endforelse
                    </div>
            </div>



            <div class="resume-template-footer add-experience-container">
                <a href="{{ route('user.templates.index') }}" style="text-decoration:none; display:flex; align-items:center;">
                    <i class="far fa-eye" style="color: #0B9E8C"></i>
                    <div class="view-all-template-text" style="margin-left:8px;">
                        View All Templates
                    </div>
                </a>
            </div>

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

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

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Address</label>
                                <input type="text" name="location" class="form-input"
                                    placeholder="144 Best bay Central London, United Kingdom">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Profile Image</label>
                                <input type="file" name="image" class="form-input" accept=".jpg,.jpeg,.png,.gif">
                            </div>
                        </div>
                    </div>

                    <div class="summary-section">
                        <div class="summary-header">
                            <label class="form-label">Summary</label>
                            <div class="ai-summary">
                                <i class="fas fa-magic"></i>
                                <span style="white-space: nowrap;">AI Generated Summary</span>
                            </div>
                        </div>
                        <textarea name="summary" class="form-textarea"
                            placeholder="Write a brief summary highlighting your key strengths and career objectives"></textarea>
                    </div>
                </div>
            </div>


            <div class="create-resume resume-create-page" id="experience-section">
                <div class="create-resume-header experience-section-header collapsed">
                    <div class="create-resume-title">Work Experience </div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form experience-section-form collapsed" id="experience-forms-container">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Company Name</label>
                                <input type="text" name="experiences[0][company]" class="form-input"
                                    placeholder="Linksol Ltd">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Position</label>
                                <input type="text" name="experiences[0][position]" class="form-input"
                                    placeholder="UI/UX Designer">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Start Date</label>
                                <input type="month" name="experiences[0][start_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">End Date</label>
                                <input type="month" name="experiences[0][end_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <input type="checkbox" name="experiences[0][is_current]" value="1"
                                    class="custom-control-input current-checkbox" id="current-0">
                                <label class="form-label">Currently
                                    working here</label>
                            </div>
                        </div>

                    </div>

                    <div class="summary-section">
                        <div class="summary-header">
                            <label class="form-label">Description</label>
                            <div class="ai-experience-description ai-summary">
                                <i class="fas fa-magic"></i>
                                <span style="white-space: nowrap;">AI Generated Summary</span>
                            </div>
                        </div>
                        <textarea name="experiences[0][description]" class="form-textarea"
                            placeholder="Describe your responsibility and achievements..."></textarea>
                    </div>

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

            <div class="experience-template d-none">
                <div class="create-resume-form expanded dynamic-form-item" style=" margin-top: 24px; padding-top: 24px;">
                    <div class="delete-experience"
                        style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;">
                        <i class="fas fa-trash-alt"></i>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Company Name</label>
                                <input type="text" data-name="experiences[__INDEX__][company]" class="form-input"
                                    placeholder="Linksol Ltd">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Position</label>
                                <input type="text" data-name="experiences[__INDEX__][position]" class="form-input"
                                    placeholder="UI/UX Designer">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Start Date</label>
                                <input type="month" data-name="experiences[__INDEX__][start_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">End Date</label>
                                <input type="month" data-name="experiences[__INDEX__][end_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <input type="checkbox" data-name="experiences[__INDEX__][is_current]" value="1"
                                    class="custom-control-input current-checkbox">
                                <label class="form-label">Currently working here</label>
                            </div>
                        </div>
                    </div>

                    <div class="summary-section">
                        <div class="summary-header">
                            <label class="form-label">Description</label>
                        </div>
                        <textarea data-name="experiences[__INDEX__][description]" class="form-textarea"
                            placeholder="Describe your responsibility and achievements..."></textarea>
                    </div>
                </div>
            </div>

            <!-- Education Section -->
            <div class="create-resume resume-create-page" id="education-section">
                <div class="create-resume-header education-section-header collapsed">
                    <div class="create-resume-title">Education</div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form education-section-form collapsed" id="education-forms-container">
                    <!-- Initial education form will be added by JS if needed, or you can have one here -->
                    <div class="resume-template-footer" id="add-education-btn-container">
                        <div class="view-all-template add-btn" style="cursor: pointer;">
                            <i class="far fa-plus"></i>
                            <div class="view-all-template-text">Add Education</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Education Template -->
            <div class="education-template d-none">
                <div class="create-resume-form expanded dynamic-form-item" style="margin-top: 24px; padding-top: 24px;">
                    <div class="delete-education"
                        style="text-align: right; cursor:pointer; color:red; font-size:16px; margin-bottom:10px;">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Institution</label>
                                <input type="text" data-name="educations[__INDEX__][institution]" class="form-input"
                                    placeholder="e.g. University of London">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Degree</label>
                                <input type="text" data-name="educations[__INDEX__][degree]" class="form-input"
                                    placeholder="e.g. Bachelor of Science">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Field of Study</label>
                                <input type="text" data-name="educations[__INDEX__][field_of_study]"
                                    class="form-input" placeholder="e.g. Computer Science">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">GPA</label>
                                <input type="text" data-name="educations[__INDEX__][gpa]" class="form-input"
                                    placeholder="e.g. 3.8">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">Start Date</label>
                                <input type="month" data-name="educations[__INDEX__][start_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="from-group">
                                <label class="form-label">End Date</label>
                                <input type="month" data-name="educations[__INDEX__][end_date]" class="form-input"
                                    placeholder="YYYY-MM">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Skills Section -->
            <div class="create-resume resume-create-page" id="skills-section">
                <div class="create-resume-header skills-section-header collapsed">
                    <div class="create-resume-title">Skills</div>
                    <div class="create-resume-icon"></div>
                </div>
                <div class="create-resume-form skills-section-form collapsed" id="skills-forms-container">
                    <!-- Initial skill form will be added by JS -->
                    <div class="resume-template-footer" id="add-skill-btn-container">
                        <div class="view-all-template add-btn" style="cursor: pointer;">
                            <i class="far fa-plus"></i>
                            <div class="view-all-template-text">Add Skill</div>
                        </div>
                    </div>
                </div>
            </div>

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

            <div class="resume-template-footer add-experience-container mt-4"
                style="justify-content: right; margin-bottom: 30px;">
                <div class="view-all-template" style="width: 150px; cursor: pointer;">
                    <a href="{{ route('user.resumes.index') }}"
                        style="text-decoration: none; display: flex; align-items: center;">
                        <i class="fas fa-xmark"></i>
                        <div class="view-all-template-text" style="margin-left: 10px;">
                            Cancel
                        </div>
                    </a>
                </div>
                <button type="submit" class="btn btn-primary btn-lg"
                    style="background-color: #0B9E8C; border: none; width: 100%; max-width: 200px; margin-left: 20px; border-radius: 24px; display: block;">
                    <i class="fas fa-save mr-2"></i>
                    Save Resume
                </button>
            </div>


        </form>



    @endsection




    @section('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // --- Accordion Functionality ---
                function setupAccordion(sectionId) {
                    const section = document.getElementById(sectionId);
                    if (!section) return;

                    const header = section.querySelector('.create-resume-header');
                    const form = section.querySelector('.create-resume-form');
                    if (!header || !form) return;

                    header.addEventListener('click', function() {
                        const isCollapsed = header.classList.contains('collapsed');
                        header.classList.toggle('collapsed', !isCollapsed);
                        header.classList.toggle('expanded', isCollapsed);
                        form.classList.toggle('collapsed', !isCollapsed);
                        form.classList.toggle('expanded', isCollapsed);
                    });
                }

                setupAccordion('personal-info-section');
                setupAccordion('experience-section');
                setupAccordion('education-section');
                setupAccordion('skills-section');

                // --- Dynamic Form Section Functionality ---
                function setupDynamicSection(options) {
                    const addBtnContainer = document.getElementById(options.addBtnId);
                    const templateNode = document.querySelector(options.templateSelector);
                    const formsContainer = document.getElementById(options.formsContainerId);
                    if (!addBtnContainer || !templateNode || !formsContainer) return;
                    let itemIndex = options.initialForms;

                    const addItem = () => {
                        // 1. Clone the template
                        const newItemForm = templateNode.cloneNode(true);
                        newItemForm.classList.remove('d-none');

                        // 2. Make the new section functional
                        const deleteBtn = newItemForm.querySelector(options.deleteBtnSelector);
                        if (deleteBtn) {
                            deleteBtn.addEventListener('click', function() {
                                newItemForm.remove();
                            });
                        }

                        // 3. Update input names with the correct index
                        newItemForm.querySelectorAll('[data-name]').forEach(input => {
                            const nameTemplate = input.getAttribute('data-name');
                            input.name = nameTemplate.replace('__INDEX__', itemIndex);
                            input.removeAttribute('data-name');
                        });

                        // 4. Append the new section to the container
                        addBtnContainer.before(newItemForm);
                        itemIndex++;
                    };

                    if (addBtnContainer && typeof addBtnContainer.addEventListener === 'function') {
                        addBtnContainer.addEventListener('click', addItem);
                    }

                    // Add one form by default if container is empty
                    if (formsContainer.querySelectorAll(options.itemSelector).length === 0) {
                        if (options.addBtnId !== 'add-experience-btn-container') { // Experience has one static form
                            addItem();
                        }
                    }
                }

                // Setup Experience Section
                setupDynamicSection({
                    addBtnId: 'add-experience-btn-container',
                    templateSelector: '.experience-template .create-resume-form',
                    formsContainerId: 'experience-forms-container',
                    deleteBtnSelector: '.delete-experience',
                    itemSelector: '.dynamic-form-item',
                    initialForms: 1 // Starts at 1 because form 0 is static
                });

                // Setup Education Section
                setupDynamicSection({
                    addBtnId: 'add-education-btn-container',
                    templateSelector: '.education-template .create-resume-form',
                    formsContainerId: 'education-forms-container',
                    deleteBtnSelector: '.delete-education',
                    itemSelector: '.dynamic-form-item',
                    initialForms: 0
                });

                // Setup Skills Section
                setupDynamicSection({
                    addBtnId: 'add-skill-btn-container',
                    templateSelector: '.skill-template .create-resume-form',
                    formsContainerId: 'skills-forms-container',
                    deleteBtnSelector: '.delete-skill',
                    itemSelector: '.dynamic-form-item',
                    initialForms: 0
                });

                // --- AI Summary/Description (ported from previous design) ---
                const aiSummaryUrl = "{{ route('resume.generate-summary') }}";
                const aiDescriptionUrl = "{{ route('resume.generate-description') }}";

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

                function buildProfilePayload() {
                    const name = document.querySelector('input[name="name"]')?.value || '';
                    const email = document.querySelector('input[name="email"]')?.value || '';
                    const phone = document.querySelector('input[name="phone"]')?.value || '';
                    const location = document.querySelector('input[name="location"]')?.value || '';
                    const website = document.querySelector('input[name="website"]')?.value || '';

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

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

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

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

                async function generateAiSummary(buttonEl) {
                    const originalHtml = buttonEl?.innerHTML;
                    if (buttonEl) {
                        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) {
                            const summaryTextarea = document.querySelector('textarea[name="summary"]');
                            if (summaryTextarea) summaryTextarea.value = data.summary;
                        } else {
                            alert(data.message || 'Failed to generate summary.');
                        }
                    } catch (e) {
                        alert('Failed to generate summary. Please try again.');
                    } finally {
                        if (buttonEl) {
                            buttonEl.disabled = false;
                            buttonEl.innerHTML = originalHtml;
                        }
                    }
                }

                async function generateAiDescriptionFor(containerEl, buttonEl) {
                    const originalHtml = buttonEl?.innerHTML;
                    if (buttonEl) {
                        buttonEl.disabled = true;
                        buttonEl.innerHTML = '<span class="spinner-border spinner-border-sm mr-2"></span>Generating...';
                    }
                    try {
                        const company = containerEl.querySelector('input[name*="[company]"]')?.value || '';
                        const position = containerEl.querySelector('input[name*="[position]"]')?.value || '';
                        const start_date = containerEl.querySelector('input[name*="[start_date]"]')?.value || '';
                        const end_date = containerEl.querySelector('input[name*="[end_date]"]')?.value || '';
                        const is_current = containerEl.querySelector('input[name*="[is_current]"]')?.checked ? '1' : '0';
                        const skillsList = Array.from(document.querySelectorAll('#skills-forms-container .dynamic-form-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 };
                        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 = containerEl.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 {
                        if (buttonEl) {
                            buttonEl.disabled = false;
                            buttonEl.innerHTML = originalHtml;
                        }
                    }
                }

                // Bind AI actions to existing UI
                const aiSummaryButton = document.querySelector('.ai-summary');
                if (aiSummaryButton) {
                    aiSummaryButton.addEventListener('click', function(e) {
                        generateAiSummary(aiSummaryButton);
                    });
                }
                const aiDescButton = document.querySelector('.ai-experience-description');
                if (aiDescButton) {
                    const container = document.getElementById('experience-forms-container');
                    aiDescButton.addEventListener('click', function() {
                        if (container) generateAiDescriptionFor(container, aiDescButton);
                    });
                }

                // --- Template Selection (Integrated like previous design) ---
                function ensureTemplateHiddenInput() {
                    const form = document.getElementById('resumeForm');
                    if (!form) return null;
                    let hidden = form.querySelector('input[name="template_id"]');
                    if (!hidden) {
                        hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = 'template_id';
                        form.appendChild(hidden);
                    }
                    return hidden;
                }

                window.selectTemplateForResume = function(templateId, templateName) {
                    // set hidden input
                    const hidden = ensureTemplateHiddenInput();
                    if (hidden) hidden.value = templateId;

                    // highlight selected card
                    document.querySelectorAll('.select-template-card').forEach(card => card.classList.remove('selected'));
                    const selectedCard = document.querySelector(`.select-template-card[data-id="${templateId}"]`);
                    if (selectedCard) selectedCard.classList.add('selected');

                    // show alert
                    const alertHost = document.getElementById('template-selected-alert');
                    if (alertHost) {
                        alertHost.innerHTML = `
<div class="alert alert-success alert-dismissible show fade">
    <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>
</div>`;
                    }
                }

                // Click anywhere on the card to select
                document.querySelectorAll('.select-template-card').forEach(card => {
                    card.addEventListener('click', function(e) {
                        // avoid double triggering when clicking the button
                        if (e.target && (e.target.closest('.use-template-btn'))) return;
                        const id = this.getAttribute('data-id');
                        const name = this.getAttribute('data-name') || 'Template';
                        window.selectTemplateForResume(id, name);
                    });
                });

                // Select first card by default if available
                const firstSelectable = document.querySelector('.select-template-card');
                if (firstSelectable) {
                    const id = firstSelectable.getAttribute('data-id');
                    const name = firstSelectable.getAttribute('data-name') || 'Template';
                    window.selectTemplateForResume(id, name);
                }

            });
        </script>
        <style>
            .template-card-radio .template-card {
                border: 3px solid transparent;
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                position: relative;
            }

            .template-card-radio .template-card.selected, .select-template-card.selected {
                border-color: #0B9E8C;
                box-shadow: 0 4px 15px rgba(11, 158, 140, 0.3);
            }

            .template-card .template-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(11, 158, 140, 0.7);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
                font-weight: bold;
                opacity: 0;
                transition: opacity 0.2s ease-in-out;
            }

            .template-card.selected .template-overlay {
                opacity: 1;
            }

            .template-name-bar {
                padding: 10px;
                background: #f8f9fa;
                text-align: center;
                font-weight: 500;
                border-top: 1px solid #e0e0e0;
            }

            .add-btn {
                border: 2px dashed #0B9E8C;
                color: #0B9E8C;
                transition: all 0.2s ease;
            }

            .add-btn:hover {
                background: #0B9E8C;
                color: white;
            }
        </style>

    @endsection