{{ template "headersMenu.html" . }}


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&display=swap" rel="stylesheet">
<style>
.resume-preview {
    font-family: 'Merriweather', serif;
}
.editor-panel {
    margin-bottom: 79px;
}
.preview-panel {
    height: 100vh;
    overflow-y: auto;
}
@media (max-width: 768px) {
    .editor-panel, .preview-panel {
        height: auto;
        overflow-y: visible;
    }
}
.mobile-menu {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
@media print {
    body * {
        visibility: hidden;
    }
    #resumePreview, #resumePreview * {
        visibility: visible;
    }
    #resumePreview {
        padding: 0 !important;
        box-shadow: none !important;
    }
}
</style>


<div class="container font-sans transition-colors duration-200">
	
    <div class="container flex flex-col p-4 mx-auto mt-20 mb-20 max-w-7xl md:flex-row">
        <!-- Panneau de gauche pour l'édition -->
        <div class="pr-4 w-full md:w-1/2 editor-panel" style="max-width:760px">
            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">{{ "Informations personnelles" | t }}</h2>
                <form id="personalInfoForm">
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="fullName">Nom Complet</label>
                        <input class="px-3 py-2 w-1/2 leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="firstName" type="text" placeholder="John" value="John" style="width:calc(50% - 6px) !important">
                        <input class="px-3 py-2 w-1/2 leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="fullName" type="text" placeholder="Doe" value="Doe">
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="title">Titre Professionnel</label>
                        <input class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="title" type="text" placeholder="Graphiste" value="Graphiste">
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="email">Email</label>
                        <input class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="john@doe.sample" value="john@doe.sample">
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="phone">Téléphone</label>
                        <input class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="phone" type="tel" placeholder="01 23 45 67 89" value="01 23 45 67 89">
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="website">Site Web</label>
                        <input class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="website" type="url" placeholder="www.vitae.pm" value="www.vitae.pm">
                    </div>
                </form>
            </div>

            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">Résumé Professionnel</h2>
                <textarea id="summary" class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" rows="4" placeholder="Une graphiste créative et minutieuse avec plus de 5 ans d'expérience...">Une graphiste créative et minutieuse avec plus de 5 ans d'expérience en branding, design d'impression et médias numériques. Maîtrise de la suite Adobe Creative et capable de traduire les visions des clients en narratifs visuels convaincants.</textarea>
            </div>

            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">Formation</h2>
                <div id="educationEntries"></div>
                <button id="addEducation" class="px-4 py-2 mt-4 font-bold text-white bg-black rounded hover:bg-blue-700">
                    Ajouter une Formation
                </button>
            </div>

            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">Expérience Professionnelle</h2>
                <div id="experienceEntries"></div>
                <button id="addExperience" class="px-4 py-2 mt-4 font-bold text-white bg-black rounded hover:bg-blue-700">
                    Ajouter une Expérience
                </button>
            </div>

            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">Compétences</h2>
                <form id="skillsForm">
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="skills">Compétences (séparées par des virgules)</label>
                        <input class="px-3 py-2 w-full leading-tight text-black rounded border shadow appearance-none dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline" id="skills" type="text" placeholder="Suite Adobe Creative, Typographie, Branding, Design UI/UX" value="Suite Adobe Creative, Typographie, Branding, Design UI/UX, Design d'Impression, Illustration Numérique, Théorie des Couleurs">
                    </div>
                </form>
            </div>

            <div class="p-4 mb-4 bg-gray-100 rounded-lg shadow-lg transition-colors duration-200 dark:bg-transparent dark:text-white">
                <h2 class="mb-4 text-xl font-bold text-gray-800 dark:text-white">Paramètres du CV</h2>
                <div class="mb-4">
                    <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="fontFamily">Police de caractères</label>
                    <select id="fontFamily" class="px-3 py-2 w-full leading-tight text-black rounded border shadow dark:text-white dark:bg-slate-900 border-2 rounded-md focus:outline-none focus:shadow-outline">
                        <option value="Poppins">Poppins</option>
                        <option value="Oswald">Oswald</option>
                        <option value="Montserrat">Montserrat</option>
                        <option value="Merriweather" selected>Merriweather</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block mb-2 text-sm font-bold text-black dark:text-white" for="fontSize">Taille du texte</label>
                    <input type="range" id="fontSize" min="12" max="24" value="16" class="w-full">
                    <span id="fontSizeValue" class="text-sm text-gray-600 dark:text-gray-400">16px</span>
                </div>
            </div>
        </div>

        <!-- Panneau de droite pour l'aperçu du CV -->
        <div class="fixed top-0 right-0 p-8 py-20 hidden md:block md:w-1/2 preview-panel">
            <div id="resumePreview" class="overflow-hidden mt-4 mb-4 text-black bg-white rounded-lg shadow-lg resume-preview">
                <div class="p-8 bg-gray-50">
                    <div class="mb-6 text-center">
                        <h1 id="previewName" class="mb-2 text-4xl font-bold text-gray-800">John Doe</h1>
                        <p id="previewTitle" class="mb-4 text-xl text-gray-600">R&D</p>
                        <p id="previewContact" class="text-sm text-gray-600">
                            <span id="previewEmail">john.doe@stanford.com</span> |
                            <span id="previewPhone">01 23 45 67 89</span> |
                            <span id="previewWebsite">www.stanford.edu</span>
                        </p>
                    </div>

                    <div class="mb-6">
                        <h2 class="pb-2 mb-2 text-2xl font-semibold text-gray-800 border-b-2 border-gray-300">Résumé Professionnel</h2>
                        <p id="previewSummary" class="text-gray-700">Une graphiste créative et minutieuse avec plus de 5 ans d'expérience en branding, design d'impression et médias numériques. Maîtrise de la suite Adobe Creative et capable de traduire les visions des clients en narratifs visuels convaincants.</p>
                    </div>

                    <div class="mb-6">
                        <h2 class="pb-2 mb-2 text-2xl font-semibold text-gray-800 border-b-2 border-gray-300">Formation</h2>
                        <div id="previewEducation"></div>
                    </div>

                    <div class="mb-6">
                        <h2 class="pb-2 mb-2 text-2xl font-semibold text-gray-800 border-b-2 border-gray-300">Expérience Professionnelle</h2>
                        <div id="previewExperience"></div>
                    </div>

                    <div class="mt-6">
                        <h2 class="pb-2 mb-2 text-2xl font-semibold text-gray-800 border-b-2 border-gray-300">Compétences</h2>
                        <ul id="previewSkills" class="flex flex-wrap"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Barre de navigation fixe en bas -->
    <nav class="fixed right-0 bottom-0 left-0 z-10 w-full bg-white shadow-md transition-colors duration-200 dark:bg-slate-900 dark:text-white">
        <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div>
                    <button id="exportButton" class="px-4 py-2 font-bold text-black bg-white rounded dark:bg-black dark:text-white">
                        Exporter
                    </button>
                    <button id="resetButton" class="px-4 py-2 font-bold text-black transparent text-red-600">
                        <i class="fa fa-trash"></i> RAZ
                    </button>
                </div>
                <button id="saveButton" class="px-4 py-2 font-bold dark:text-black dark:bg-white bg-black text-white rounded">
                    Enregistrer
                </button>
            </div>
        </div>
    </nav>

    <script>
        let resumeData = {
            personalInfo: {
                firstName: "John",
                fullName: "Doe",
                title: "Graphiste",
                email: "john@doe.sample",
                phone: "01 23 45 67 89",
                website: "www.vitae.pm"
            },
            summary: "Une graphiste créative et minutieuse avec plus de 5 ans d'expérience en branding, design d'impression et médias numériques. Maîtrise de la suite Adobe Creative et capable de traduire les visions des clients en narratifs visuels convaincants.",
            education: [
                {
                    degree: "Licence en Design Graphique",
                    university: "École des Beaux-Arts de Paris",
                    graduationYear: "2018"
                }
            ],
            experience: [
                {
                    jobTitle: "Graphiste Senior",
                    company: "Solutions Créatives SAS",
                    employmentDates: "Jan 2020 - Présent",
                    responsibilities: "- Direction d'une équipe de graphistes juniors pour la création d'identités de marque cohérentes pour des clients majeurs\n- Développement et maintien de directives de design pour assurer la cohérence sur tous les supports marketing\n- Collaboration avec l'équipe marketing pour créer des campagnes engageantes sur les réseaux sociaux"
                }
            ],
            skills: ["Suite Adobe Creative", "Typographie", "Branding", "Design UI/UX", "Design d'Impression", "Illustration Numérique", "Théorie des Couleurs"],
            settings: {
                fontFamily: "Merriweather",
                fontSize: "16"
            }
        };

        function updateLocalStorage() {
            localStorage.setItem('resumeData', JSON.stringify(resumeData));
        }

        function loadFromLocalStorage() {
            const savedData = localStorage.getItem('resumeData');
            if (savedData) {
                resumeData = JSON.parse(savedData);
                loadInitialData();
            }
        }

        function updatePreview() {
            document.getElementById('previewName').textContent = resumeData.personalInfo.firstName + " "+ resumeData.personalInfo.fullName;
            document.getElementById('previewTitle').textContent = resumeData.personalInfo.title;
            document.getElementById('previewEmail').textContent = resumeData.personalInfo.email;
            document.getElementById('previewPhone').textContent = resumeData.personalInfo.phone;
            document.getElementById('previewWebsite').textContent = resumeData.personalInfo.website;
            document.getElementById('previewSummary').textContent = resumeData.summary;

            // Mise à jour de la Formation
            const educationHtml = resumeData.education.map(edu => `
                <div class="mb-2">
                    <h3 class="text-lg font-semibold">${edu.degree}</h3>
                    <p class="text-gray-600">${edu.university}</p>
                    <p class="text-gray-600">Obtention : ${edu.graduationYear}</p>
                </div>
            `).join('');
            document.getElementById('previewEducation').innerHTML = educationHtml;

            // Mise à jour de l'Expérience
            const experienceHtml = resumeData.experience.map(exp => `
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">${exp.jobTitle}</h3>
                    <p class="text-gray-600">${exp.company}</p>
                    <p class="text-gray-600">${exp.employmentDates}</p>
                    <ul class="mt-2 list-disc list-inside text-black">
                        ${exp.responsibilities.split('\n').map(resp => `<li>${resp.trim()}</li>`).join('')}
                    </ul>
                </div>
            `).join('');
            document.getElementById('previewExperience').innerHTML = experienceHtml;

            // Mise à jour des Compétences
            const skillsHtml = resumeData.skills.map(skill => 
                `<li class="px-3 py-1 mr-2 mb-2 text-black bg-gray-200 rounded-full">${skill}</li>`
            ).join('');
            document.getElementById('previewSkills').innerHTML = skillsHtml;

            // Appliquer les paramètres
            const resumePreview = document.getElementById('resumePreview');
            resumePreview.style.fontFamily = resumeData.settings.fontFamily;
            resumePreview.style.fontSize = `${resumeData.settings.fontSize}px`;
        }

        function createEducationEntry(edu = {}) {
            const entryDiv = document.createElement('div');
            entryDiv.className = 'mb-4 p-4 border rounded bg-white dark:bg-slate-900 dark:text-white border-2';
            entryDiv.innerHTML = `
                <input class="mb-2 w-full font-bold dark:bg-slate-900 dark:text-white" type="text" placeholder="Diplôme" value="${edu.degree || ''}">
                <input class="mb-2 w-full dark:bg-slate-900 dark:text-white" type="text" placeholder="Établissement" value="${edu.university || ''}">
                <input class="mb-2 w-full dark:bg-slate-900 dark:text-white" type="text" placeholder="Année d'obtention" value="${edu.graduationYear || ''}">
                <button class="text-red-600 rounded text-xs uppercase" style="margin:-8px 0 0 0; float:right"><i class="fa fa-trash"></i></button>
            `;
            entryDiv.querySelector('button').addEventListener('click', () => {
                entryDiv.remove();
                updateEducationData();
            });
            document.getElementById('educationEntries').appendChild(entryDiv);
        }

        function createExperienceEntry(exp = {}) {
            const entryDiv = document.createElement('div');
            entryDiv.className = 'mb-4 p-4 border rounded bg-white dark:bg-slate-900 dark:text-white border-2';
            entryDiv.innerHTML = `
                <input class="mb-2 w-full font-bold text-lg dark:bg-slate-900 dark:text-white" type="text" placeholder="Poste" value="${exp.jobTitle || ''}">
                <input class="mb-2 w-full dark:bg-slate-900 dark:text-white" type="text" placeholder="Entreprise" value="${exp.company || ''}">
                <input class="mb-2 w-full dark:bg-slate-900 dark:text-white" type="text" placeholder="Dates d'emploi" value="${exp.employmentDates || ''}">
                <textarea class="h-[110px] rounded py-1 px-2 mb-2 w-full dark:bg-slate-900 dark:border-slate-800 dark:text-white border-2" style="border-width:2px 0 0 !important" placeholder="Responsabilités">${exp.responsibilities || ''}</textarea>
                <button class="text-red-600 rounded text-xs uppercase" style="margin:-8px 0x 0 0; float:right"><i class="fa fa-trash"></i></button>
            `;
            entryDiv.querySelector('button').addEventListener('click', () => {
                entryDiv.remove();
                updateExperienceData();
            });
            document.getElementById('experienceEntries').appendChild(entryDiv);
        }

        function updateEducationData() {
            resumeData.education = Array.from(document.getElementById('educationEntries').children).map(entry => ({
                degree: entry.querySelector('input:nth-child(1)').value,
                university: entry.querySelector('input:nth-child(2)').value,
                graduationYear: entry.querySelector('input:nth-child(3)').value
            }));
            updateLocalStorage();
            updatePreview();
        }

        function updateExperienceData() {
            resumeData.experience = Array.from(document.getElementById('experienceEntries').children).map(entry => ({
                jobTitle: entry.querySelector('input:nth-child(1)').value,
                company: entry.querySelector('input:nth-child(2)').value,
                employmentDates: entry.querySelector('input:nth-child(3)').value,
                responsibilities: entry.querySelector('textarea').value
            }));
            updateLocalStorage();
            updatePreview();
        }

        document.getElementById('addEducation').addEventListener('click', () => {
            createEducationEntry();
            updateEducationData();
        });

        document.getElementById('addExperience').addEventListener('click', () => {
            createExperienceEntry();
            updateExperienceData();
        });

        // Ajouter des écouteurs d'événements aux champs du formulaire
        document.querySelectorAll('input, textarea').forEach(element => {
            element.addEventListener('input', () => {
                if (element.closest('form')) {
                    const formId = element.closest('form').id;
                    if (formId === 'personalInfoForm') {
                        resumeData.personalInfo[element.id] = element.value;
                    } else if (formId === 'skillsForm') {
                        resumeData.skills = element.value.split(',').map(skill => skill.trim());
                    }
                } else if (element.id === 'summary') {
                    resumeData.summary = element.value;
                }
                updateLocalStorage();
                updatePreview();
            });
        });

        // Chargement initial
        function loadInitialData() {
            for (const [key, value] of Object.entries(resumeData.personalInfo)) {
                const element = document.getElementById(key);
                if (element) element.value = value;
            }
            document.getElementById('summary').value = resumeData.summary;
            document.getElementById('skills').value = resumeData.skills.join(', ');

            document.getElementById('educationEntries').innerHTML = '';
            resumeData.education.forEach(createEducationEntry);

            document.getElementById('experienceEntries').innerHTML = '';
            resumeData.experience.forEach(createExperienceEntry);

            document.getElementById('fontFamily').value = resumeData.settings.fontFamily;
            document.getElementById('fontSize').value = resumeData.settings.fontSize;
            document.getElementById('fontSizeValue').textContent = `${resumeData.settings.fontSize}px`;

            updatePreview();
        }

        // Ajouter des écouteurs d'événements pour les entrées de formation et d'expérience
        document.getElementById('educationEntries').addEventListener('input', updateEducationData);
        document.getElementById('experienceEntries').addEventListener('input', updateExperienceData);

        // Fonction pour exporter le CV en PDF (simulation d'impression)
        function exportAsPDF() {
            window.print();
        }

        // Fonction pour effacer toutes les données
        function clearAllData() {
            if (confirm('Êtes-vous sûr de vouloir effacer toutes les données ? Cette action est irréversible.')) {
                localStorage.removeItem('resumeData');
                location.reload();
            }
        }

        document.getElementById('saveButton').addEventListener('click', updateLocalStorage);
        document.getElementById('exportButton').addEventListener('click', exportAsPDF);
        document.getElementById('resetButton').addEventListener('click', clearAllData);

        // Gestion du changement de police
        document.getElementById('fontFamily').addEventListener('change', (e) => {
            resumeData.settings.fontFamily = e.target.value;
            document.getElementById('resumePreview').style.fontFamily = e.target.value;
            updateLocalStorage();
        });

        // Gestion du changement de taille de police
        document.getElementById('fontSize').addEventListener('input', (e) => {
            const fontSize = e.target.value;
            resumeData.settings.fontSize = fontSize;
            document.getElementById('resumePreview').style.fontSize = `${fontSize}px`;
            document.getElementById('fontSizeValue').textContent = `${fontSize}px`;
            updateLocalStorage();
        });

        // Chargement des données depuis le localStorage au démarrage
        loadFromLocalStorage();

        // Appel initial pour afficher toutes les données au lancement
        loadInitialData();
    </script>
</div>

{{ template "footer.html" . }}