{"id":1724,"date":"2026-03-26T13:10:38","date_gmt":"2026-03-26T13:10:38","guid":{"rendered":"https:\/\/www.arbologie.fr\/?page_id=1724"},"modified":"2026-03-29T02:39:11","modified_gmt":"2026-03-29T02:39:11","slug":"quote","status":"publish","type":"page","link":"https:\/\/www.arbologie.fr\/en\/quote\/","title":{"rendered":""},"content":{"rendered":"<div id=\"quote-app\">\n    \n    <!-- Loading State -->\n    <div id=\"quote-loading\" class=\"quote-state\">\n        <div class=\"loading-spinner\"><\/div>\n        <p>Chargement du devis&#8230;<\/p>\n    <\/div>\n    \n    <!-- Error State -->\n    <div id=\"quote-error\" class=\"quote-state\" style=\"display: none;\">\n        <div class=\"error-icon\">\u26a0\ufe0f<\/div>\n        <h2>Devis introuvable<\/h2>\n        <p id=\"error-message\">Le devis demand\u00e9 n&rsquo;existe pas ou le lien est invalide.<\/p>\n        <a href=\"\/en\/\" class=\"btn-home\">Retour \u00e0 l&rsquo;accueil<\/a>\n    <\/div>\n    \n    <!-- No ID Provided -->\n    <div id=\"quote-no-id\" class=\"quote-state\" style=\"display: none;\">\n        <div class=\"error-icon\">\ud83d\udd0d<\/div>\n        <h2>Aucun devis sp\u00e9cifi\u00e9<\/h2>\n        <p>Veuillez utiliser le lien fourni dans votre email pour acc\u00e9der \u00e0 votre devis.<\/p>\n        <a href=\"\/en\/\" class=\"btn-home\">Retour \u00e0 l&rsquo;accueil<\/a>\n    <\/div>\n    \n    <!-- Success State - Quote Content -->\n    <div id=\"quote-content\" class=\"quote-state\" style=\"display: none;\">\n        \n        <!-- Centered Title -->\n        <h1 id=\"quote-title\" class=\"quote-main-title\"><\/h1>\n        \n        <div class=\"quote-layout\">\n            \n            <!-- Customer Info Card -->\n            <div class=\"quote-card customer-info\">\n                <h2>Client details<\/h2>\n                <div class=\"info-list\">\n                    <div class=\"info-item\">\n                        <span class=\"info-label\">Name<\/span>\n                        <span class=\"info-value\" id=\"customer-name\"><\/span>\n                    <\/div>\n                    <div class=\"info-item\">\n                        <span class=\"info-label\">Telephone<\/span>\n                        <span class=\"info-value\" id=\"customer-phone\"><\/span>\n                    <\/div>\n                    <div class=\"info-item\">\n                        <span class=\"info-label\">Address<\/span>\n                        <span class=\"info-value\" id=\"customer-address\"><\/span>\n                    <\/div>\n                <\/div>\n                \n                <a id=\"download-btn\" href=\"#\" class=\"download-btn\" target=\"_blank\">\n                    \ud83d\udce5 T\u00e9l\u00e9charger le PDF\n                <\/a>\n            <\/div>\n            \n            <!-- PDF Preview -->\n            <div class=\"quote-card pdf-preview\">\n                <div class=\"pdf-container\">\n                    <iframe id=\"pdf-viewer\" title=\"Aper\u00e7u du devis PDF\"><\/iframe>\n                <\/div>\n            <\/div>\n            \n        <\/div>\n        \n    <\/div>\n    \n<\/div>\n\n\n<script>(function() {\r\n    'use strict';\r\n    \r\n    const API_BASE_URL = 'https:\/\/n8n.srv1120517.hstgr.cloud\/webhook\/v1\/quotes';\r\n    \r\n    function onReady(fn) {\r\n        if (document.readyState !== 'loading') {\r\n            fn();\r\n        } else {\r\n            document.addEventListener('DOMContentLoaded', fn);\r\n        }\r\n    }\r\n    \r\n    onReady(function() {\r\n        \r\n        const quoteApp = document.getElementById('quote-app');\r\n        if (!quoteApp) return;\r\n        \r\n        const loadingEl = document.getElementById('quote-loading');\r\n        const errorEl = document.getElementById('quote-error');\r\n        const noIdEl = document.getElementById('quote-no-id');\r\n        const contentEl = document.getElementById('quote-content');\r\n        const errorMessageEl = document.getElementById('error-message');\r\n        \r\n        function showState(state) {\r\n            if (loadingEl) loadingEl.style.display = 'none';\r\n            if (errorEl) errorEl.style.display = 'none';\r\n            if (noIdEl) noIdEl.style.display = 'none';\r\n            if (contentEl) contentEl.style.display = 'none';\r\n            \r\n            if (state === 'loading' && loadingEl) loadingEl.style.display = 'block';\r\n            if (state === 'error' && errorEl) errorEl.style.display = 'block';\r\n            if (state === 'noId' && noIdEl) noIdEl.style.display = 'block';\r\n            if (state === 'content' && contentEl) contentEl.style.display = 'block';\r\n        }\r\n        \r\n        function renderQuote(data, quoteId) {\r\n            const setValue = (id, value) => {\r\n                const el = document.getElementById(id);\r\n                if (el) el.textContent = value || '\u2014';\r\n            };\r\n            \r\n            \/\/ Set the main title with quote number\r\n            const titleEl = document.getElementById('quote-title');\r\n            if (titleEl) {\r\n                titleEl.textContent = 'Devis pour ' + data.name;\r\n            }\r\n            \r\n            setValue('customer-name', data.name);\r\n            setValue('customer-phone', data.phone);\r\n            setValue('customer-address', data.address);\r\n            \r\n            const downloadBtn = document.getElementById('download-btn');\r\n            const pdfViewer = document.getElementById('pdf-viewer');\r\n            \r\n            if (data.url) {\r\n                if (downloadBtn) {\r\n                    downloadBtn.href = data.url;\r\n                    downloadBtn.setAttribute('target', '_blank');\r\n                }\r\n                if (pdfViewer) {\r\n                    pdfViewer.src = data.url + '#toolbar=1&navpanes=0&view=FitH';\r\n                }\r\n            } else {\r\n                if (downloadBtn) downloadBtn.style.display = 'none';\r\n                if (pdfViewer) pdfViewer.parentElement.innerHTML = '<p style=\"padding: 40px; text-align: center; color: #666;\">Aper\u00e7u PDF non disponible<\/p>';\r\n            }\r\n            \r\n            showState('content');\r\n        }\r\n        \r\n        async function fetchQuote(quoteId) {\r\n            try {\r\n                const url = API_BASE_URL + '?id=' + encodeURIComponent(quoteId);\r\n                const response = await fetch(url);\r\n                const data = await response.json();\r\n                \r\n                if (data.error) {\r\n                    if (errorMessageEl) errorMessageEl.textContent = data.message || 'Devis introuvable.';\r\n                    showState('error');\r\n                    return;\r\n                }\r\n                \r\n                if (!data.name && !data.url) {\r\n                    if (errorMessageEl) errorMessageEl.textContent = 'Les donn\u00e9es du devis sont incompl\u00e8tes.';\r\n                    showState('error');\r\n                    return;\r\n                }\r\n                \r\n                renderQuote(data, quoteId);\r\n                \r\n            } catch (err) {\r\n                console.error('Fetch error:', err);\r\n                if (errorMessageEl) errorMessageEl.textContent = 'Une erreur est survenue. Veuillez r\u00e9essayer plus tard.';\r\n                showState('error');\r\n            }\r\n        }\r\n        \r\n        const urlParams = new URLSearchParams(window.location.search);\r\n        const quoteId = urlParams.get('id');\r\n        \r\n        if (!quoteId) {\r\n            showState('noId');\r\n            return;\r\n        }\r\n        \r\n        showState('loading');\r\n        fetchQuote(quoteId);\r\n        \r\n    });\r\n    \r\n})();<\/script>\n\n\n<style class=\"wpcode-css-snippet\">\/* Quote Page Styles *\/\r\n#quote-app {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    padding: 30px 20px;\r\n}\r\n\r\n\/* Centered Quote Title *\/\r\n.quote-main-title {\r\n    text-align: center;\r\n    font-size: 1.8em;\r\n    color: #333;\r\n    margin-bottom: 30px;\r\n    padding-bottom: 15px;\r\n    border-bottom: 2px solid #f7941d;\r\n}\r\n\r\n.quote-state {\r\n    animation: fadeIn 0.3s ease;\r\n}\r\n\r\n@keyframes fadeIn {\r\n    from { opacity: 0; transform: translateY(10px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Loading State *\/\r\n#quote-loading {\r\n    text-align: center;\r\n    padding: 80px 20px;\r\n}\r\n\r\n.loading-spinner {\r\n    width: 50px;\r\n    height: 50px;\r\n    border: 4px solid #f3f3f3;\r\n    border-top: 4px solid #f7941d;\r\n    border-radius: 50%;\r\n    animation: spin 1s linear infinite;\r\n    margin: 0 auto 20px;\r\n}\r\n\r\n@keyframes spin {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Error & No ID States *\/\r\n#quote-error,\r\n#quote-no-id {\r\n    text-align: center;\r\n    padding: 60px 20px;\r\n    background: #fef2f2;\r\n    border-radius: 12px;\r\n    border: 1px solid #fecaca;\r\n}\r\n\r\n.error-icon {\r\n    font-size: 48px;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n#quote-error h2,\r\n#quote-no-id h2 {\r\n    color: #dc2626;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.btn-home {\r\n    display: inline-block;\r\n    margin-top: 20px;\r\n    padding: 12px 24px;\r\n    background: #f7941d;\r\n    color: white !important;\r\n    text-decoration: none;\r\n    border-radius: 6px;\r\n    transition: background 0.2s;\r\n}\r\n\r\n.btn-home:hover {\r\n    background: #e07f0a;\r\n}\r\n\r\n\/* Quote Layout - Side by Side *\/\r\n.quote-layout {\r\n    display: grid;\r\n    grid-template-columns: 350px 1fr;\r\n    gap: 30px;\r\n    align-items: start;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .quote-layout {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n\r\n\/* Cards *\/\r\n.quote-card {\r\n    background: #ffffff;\r\n    border-radius: 12px;\r\n    padding: 25px;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.08);\r\n    border: 1px solid #e5e7eb;\r\n}\r\n\r\n.quote-card h2 {\r\n    font-size: 1.3em;\r\n    margin-top: 0;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 12px;\r\n    border-bottom: 2px solid #f7941d;\r\n    color: #333;\r\n}\r\n\r\n\/* Customer Info *\/\r\n.info-list {\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.info-item {\r\n    padding: 12px 0;\r\n    border-bottom: 1px solid #f3f4f6;\r\n}\r\n\r\n.info-item:last-child {\r\n    border-bottom: none;\r\n}\r\n\r\n.info-label {\r\n    display: block;\r\n    font-size: 0.75em;\r\n    color: #6b7280;\r\n    margin-bottom: 4px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.info-value {\r\n    display: block;\r\n    font-weight: 500;\r\n    font-size: 1.05em;\r\n    color: #1f2937;\r\n}\r\n\r\n\/* Download Button *\/\r\n.download-btn {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 14px 20px;\r\n    background: #f7941d;\r\n    color: white !important;\r\n    text-align: center;\r\n    text-decoration: none !important;\r\n    border-radius: 8px;\r\n    font-weight: 600;\r\n    transition: background 0.2s, transform 0.1s;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.download-btn:hover {\r\n    background: #e07f0a;\r\n    transform: translateY(-1px);\r\n    color: white !important;\r\n}\r\n\r\n\/* PDF Preview *\/\r\n.pdf-preview {\r\n    min-height: 500px;\r\n}\r\n\r\n.pdf-preview h2 {\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.pdf-container {\r\n    background: #f9fafb;\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n    border: 1px solid #e5e7eb;\r\n    height: 600px;\r\n}\r\n\r\n.pdf-container iframe {\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 600px;\r\n    border: none;\r\n    display: block;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .pdf-container,\r\n    .pdf-container iframe {\r\n        height: 500px;\r\n        min-height: 500px;\r\n    }\r\n}<\/style>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Chargement du devis&#8230; \u26a0\ufe0f Devis introuvable Le devis demand\u00e9 n&rsquo;existe pas ou le lien est invalide. Retour \u00e0 l&rsquo;accueil \ud83d\udd0d Aucun devis sp\u00e9cifi\u00e9 Veuillez utiliser le lien fourni dans votre email pour acc\u00e9der \u00e0 votre devis. Retour \u00e0 l&rsquo;accueil Client details Nom T\u00e9l\u00e9phone Adresse \ud83d\udce5 T\u00e9l\u00e9charger le PDF<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1724","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/pages\/1724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/comments?post=1724"}],"version-history":[{"count":9,"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/pages\/1724\/revisions"}],"predecessor-version":[{"id":1751,"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/pages\/1724\/revisions\/1751"}],"wp:attachment":[{"href":"https:\/\/www.arbologie.fr\/en\/wp-json\/wp\/v2\/media?parent=1724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}