{"id":12,"date":"2026-07-02T07:33:28","date_gmt":"2026-07-02T07:33:28","guid":{"rendered":"https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=12"},"modified":"2026-07-02T07:33:28","modified_gmt":"2026-07-02T07:33:28","slug":"embed-retrieve-form","status":"publish","type":"page","link":"https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=12","title":{"rendered":"Embed Retrieve Form"},"content":{"rendered":"\r\n<div x-data=\"mcqRetrieve('', 'https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/request-retrieve-code', 'https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/verify-retrieve-code', 'https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/retrieve-estimate', 'https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/store-form', 'https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=7&#038;edit=true')\"\r\n    x-init=\"init()\" class=\"mcq-retrieve\">\r\n\r\n    <!-- Step 1: Enter Reference & Email -->\r\n    <div x-show=\"step === 'request'\" x-cloak>\r\n        <!-- Intro Text (hidden when results are shown) -->\r\n                <h2 class=\"mcq-step-heading\">Retrieve Your Quote<\/h2>\r\n        <p class=\"mb-4\">Enter your quote reference and email address to receive a verification code.<\/p>\r\n        \r\n        <div class=\"mcq-form-card\">\r\n\r\n            <div class=\"mb-3\">\r\n                <label class=\"form-label\">Quote Reference<\/label>\r\n                <input type=\"text\" x-model=\"quoteRef\" placeholder=\"e.g., QC1234567\" \/>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label class=\"form-label\">Email Address<\/label>\r\n                <input type=\"email\" x-model=\"email\" placeholder=\"your@email.com\" \/>\r\n            <\/div>\r\n\r\n            <div class=\"step-nav\">\r\n                <button type=\"button\" class=\"btn btn-primary\" @click=\"requestCode()\" :disabled=\"loading\">\r\n                    <span x-show=\"!loading\">Send Verification Code<\/span>\r\n                    <span x-show=\"loading\">\r\n                        <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"><\/span>\r\n                        Sending...\r\n                    <\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 2: Enter Verification Code -->\r\n    <div x-show=\"step === 'verify'\" x-cloak>\r\n        <h2 class=\"mcq-step-heading\">Enter Verification Code<\/h2>\r\n        <div class=\"mcq-form-card\">\r\n            <p class=\"mb-4\">We've sent a 6-digit verification code to <strong x-text=\"email\"><\/strong><\/p>\r\n\r\n            <div class=\"mb-3\">\r\n                <label class=\"form-label\">6-Digit Code<\/label>\r\n                <input type=\"text\" x-model=\"code\" placeholder=\"123456\" maxlength=\"6\" \r\n                     \/>\r\n            <\/div>\r\n\r\n            <p class=\"text-muted small\">Code expires in 1 hour<\/p>\r\n\r\n            <div class=\"step-nav\">\r\n                <button type=\"button\" class=\"btn-cancel\" @click=\"step = 'request'; code = ''\">\r\n                    Back\r\n                <\/button>\r\n                <button type=\"button\" class=\"btn btn-primary\" @click=\"verifyCode()\" :disabled=\"loading || code.length !== 6\">\r\n                    <span x-show=\"!loading\">Verify & Retrieve<\/span>\r\n                    <span x-show=\"loading\">Verifying...<\/span>\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <p class=\"mt-3 text-center\">\r\n                <a href=\"#\" @click.prevent=\"requestCode()\" x-show=\"!loading\">Resend code<\/a>\r\n                <span x-show=\"loading\" style=\"display: none;\">\r\n                    <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"><\/span>\r\n                    Sending...\r\n                <\/span>\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- FULLSCREEN LOADING OVERLAY (only when verifying code, not when\r\n         requesting\/resending code).\r\n         Initial inline style=\"display:none\" is intentional \u2014 both x-cloak\r\n         AND inline display:none guarantee the overlay is hidden until\r\n         Alpine.x-show explicitly sets element.style.display = '' (which\r\n         restores the CSS default `display: flex` from the .mcq-loading-overlay\r\n         rule). Without this, there's a window during Alpine init where x-cloak\r\n         has been removed but x-show hasn't yet evaluated, and the overlay\r\n         flashes \/ sticks visible. -->\r\n    <div x-show=\"step === 'verify' && loading && verifying\" x-transition.opacity x-cloak class=\"mcq-loading-overlay\" style=\"display: none;\">\r\n        <div class=\"loading-content text-center\">\r\n            <h2 class=\"fw-bold mb-4\">Hang tight, we're retrieving your quote!<\/h2>\r\n            <div class=\"loading-bar mx-auto mt-3\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Error -->\r\n    <div x-show=\"error\" x-cloak class=\"alert alert-danger mt-3\">\r\n        <p x-text=\"error\"><\/p>\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-danger mt-2\" @click=\"error = ''; step = 'request'\">\r\n            Try Again\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <!-- Success Message (after code sent) -->\r\n    <div x-show=\"successMessage\" x-cloak class=\"alert alert-success mt-3\">\r\n        <p x-text=\"successMessage\"><\/p>\r\n    <\/div>\r\n\r\n    <!-- Results -->\r\n    <div x-show=\"results && !loading\" x-cloak>\r\n        \r\n<template x-if=\"typeof results !== 'undefined' && results\">\r\n<div x-data=\"{\r\n    sortBy: 'rating',\r\n    showPaymentModal: false,\r\n    paymentUrl: '',\r\n    paymentIframeId: 'mcq-worldpay-iframe',\r\n    currentQuote: null,\r\n    currentInstructData: null, \/\/ Store the instruct API response\r\n    paymentListenerActive: false,\r\n    init() {\r\n        \/\/ Prevent auto-scroll on page load by ensuring we stay at the top\r\n        \/\/ Run immediately\r\n        window.scrollTo({ top: 0, behavior: 'instant' });\r\n\r\n        \/\/ Also check after Alpine finishes rendering\r\n        this.$nextTick(() => {\r\n            window.scrollTo({ top: 0, behavior: 'instant' });\r\n        });\r\n\r\n        \/\/ Final check after a brief delay\r\n        setTimeout(() => {\r\n            window.scrollTo({ top: 0, behavior: 'instant' });\r\n        }, 150);\r\n    },\r\n    formatPrice(amount) {\r\n        return new Intl.NumberFormat('en-GB', {\r\n            style: 'currency',\r\n            currency: 'GBP',\r\n            minimumFractionDigits: 2,\r\n            maximumFractionDigits: 2\r\n        }).format(amount);\r\n    },\r\n    \/**\r\n     * The customer's REAL total cost for a quote \u2014 sums all customer-visible\r\n     * fee categories Portal returns. Use this anywhere we need to display or\r\n     * compare the headline price (sidebar total, price stat on the result\r\n     * card, sort comparator, analytics payload).\r\n     *\r\n     * Portal's `totalLegalFeesAndDisbursements` already rolls up:\r\n     *   legalFees + disbursements + requiredAdditional + requiredSearch.\r\n     * On top of that we add:\r\n     *   additionalFees (optional add-ons Portal includes) and\r\n     *   landTaxes (e.g. Stamp Duty on purchases).\r\n     *\r\n     * Introducer-side totals (introducerTotalLegalFeesAndDisbursements,\r\n     * introducerTotalLandTaxes) are added defensively in case Portal ever\r\n     * populates them \u2014 currently always \u00a30 in observed data.\r\n     *\/\r\n    grandTotalParts(quote) {\r\n        if (!quote) return { net: 0, vat: 0, total: 0 };\r\n        const parts = [\r\n            quote.totalLegalFeesAndDisbursements,\r\n            quote.totalAdditionalFees,\r\n            quote.totalLandTaxes,\r\n            quote.introducerTotalLegalFeesAndDisbursements,\r\n            quote.introducerTotalLandTaxes,\r\n        ];\r\n        return parts.reduce((acc, p) => ({\r\n            net:   acc.net   + (p?.net   || 0),\r\n            vat:   acc.vat   + (p?.vat   || 0),\r\n            total: acc.total + (p?.total || 0),\r\n        }), { net: 0, vat: 0, total: 0 });\r\n    },\r\n    grandTotal(quote) { return this.grandTotalParts(quote).total; },\r\n    sortedResults() {\r\n        if (!this.results || !this.results.content) return [];\r\n        let arr = [...this.results.content];\r\n        if (this.sortBy === 'rating') {\r\n            return arr.sort((a, b) => b.conveyancerFirm.averageRating - a.conveyancerFirm.averageRating);\r\n        }\r\n        if (this.sortBy === 'price') {\r\n            return arr.sort((a, b) => this.grandTotal(a) - this.grandTotal(b));\r\n        }\r\n        if (this.sortBy === 'speed') {\r\n            return arr.sort((a, b) => a.conveyancerFirm.averageCompletionTime - b.conveyancerFirm.averageCompletionTime);\r\n        }\r\n        return arr;\r\n    },\r\n    async instruct(quote, skipPayment = false) {\r\n        \/\/ Analytics \u2014 fire before the network call so the click is captured\r\n        \/\/ even if the API errors out later.\r\n        if (typeof window.mcqTrack === 'function') {\r\n            window.mcqTrack(skipPayment ? 'instruct_skip' : 'instruct', {\r\n                firmId:     quote.conveyancerFirm?.id   || null,\r\n                firmName:   quote.conveyancerFirm?.name || null,\r\n                quoteId:    quote.id                    || null,\r\n                totalPrice: this.grandTotal(quote) || null\r\n            });\r\n        }\r\n        try {\r\n            \/\/ Build the estimate payload from the current results data\r\n            \/\/ This is required for the no-deposit API call\r\n            const estimatePayload = this.results?.request || {};\r\n\r\n            const res = await fetch('https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/instruct', {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify({\r\n                    estimate_id: quote.id,\r\n                    firm_id: quote.conveyancerFirm.id,\r\n                    skipPayment: skipPayment,\r\n                    estimate_payload: estimatePayload,\r\n                    estimate_reference: this.results?.request?.reference || '', \/\/ Pass quote reference for URLs\r\n                    firm_logo_url: quote.conveyancerFirm.logoPath, \/\/ Pass logo URL for confirmation page\r\n                    firm_name: quote.conveyancerFirm.name \/\/ Also pass firm name for reference\r\n                })\r\n            });\r\n\r\n            if (!res.ok) {\r\n                throw new Error('Network response was not ok');\r\n            }\r\n\r\n            const data = await res.json();\r\n            console.log('Instruct response:', data);\r\n\r\n            if (!data.success) {\r\n                \/\/ NEW: Use notification modal instead of alert\r\n                window.mcqNotify.error(data.message || 'Failed to instruct conveyancer. Please try again.', 'Instruction Error');\r\n                return;\r\n            }\r\n\r\n            \/\/ Log payment URLs for dev team\r\n            if (data.data) {\r\n                console.log('=== PAYMENT FLOW DEBUG ===');\r\n                console.log('Success URL:', data.data.successUrl);\r\n                console.log('Failure URL:', data.data.failureUrl);\r\n                console.log('Proceed URL:', data.data.proceedUrl);\r\n                console.log('Payment URL:', data.data.paymentUrl);\r\n                console.log('========================');\r\n\r\n                \/\/ Show URLs in alert if ?debug param is present (for dev team)\r\n                const urlParams = new URLSearchParams(window.location.search);\r\n                if (urlParams.has('debug')) {\r\n                    const debugInfo = `PAYMENT FLOW DEBUG:\\n\\n` +\r\n                        `Success URL:\\n${data.data.successUrl}\\n\\n` +\r\n                        `Failure URL:\\n${data.data.failureUrl}\\n\\n` +\r\n                        `Proceed URL:\\n${data.data.proceedUrl}\\n\\n` +\r\n                        `Payment URL:\\n${data.data.paymentUrl}`;\r\n                    alert(debugInfo);\r\n                }\r\n            }\r\n\r\n            \/\/ Check if this is skip-payment flow\r\n            if (data.skipPayment && data.data?.confirmationUrl) {\r\n                \/\/ Redirect to confirmation page immediately\r\n                window.location.href = data.data.confirmationUrl;\r\n                return;\r\n            }\r\n\r\n            \/\/ Normal payment flow - get payment URL and redirect\r\n            const url = data?.data?.paymentUrl || data?.data?.link;\r\n\r\n            if (url) {\r\n                console.log('Redirecting to payment page:', url);\r\n                \/\/ Redirect directly to Stripe payment page\r\n                \/\/ Stripe will redirect back to our successUrl or failureUrl\r\n                window.location.href = url;\r\n            } else {\r\n                \/\/ NEW: Use notification modal instead of alert\r\n                window.mcqNotify.warning('This firm does not have a payment link configured. Please contact us for assistance.', 'Payment Unavailable');\r\n            }\r\n        } catch (err) {\r\n            console.error('Error calling instruct:', err);\r\n            \/\/ NEW: Use notification modal instead of alert\r\n            window.mcqNotify.error('Sorry \u2014 something went wrong while trying to instruct. Please try again or contact us for assistance.', 'Connection Error');\r\n        }\r\n    },\r\n    \/\/ NEW: Skip payment and instruct directly\r\n    skipPaymentAndInstruct(quote) {\r\n        \/\/ NEW: Show confirmation dialog using notification modal\r\n        window.mcqNotify.confirm(\r\n            'You are about to instruct your conveyancer without paying a deposit. Your conveyancer will contact you directly about payment arrangements. Do you want to proceed?',\r\n            () => {\r\n                \/\/ User confirmed - proceed with skip payment\r\n                this.instruct(quote, true);\r\n            },\r\n            {\r\n                title: 'Skip Payment Confirmation',\r\n                confirmText: 'Yes, Proceed',\r\n                cancelText: 'Cancel'\r\n            }\r\n        );\r\n    },\r\n    \/\/ NEW: Set up listeners to detect payment completion inside iframe\r\n    setupPaymentListener() {\r\n        if (this.paymentListenerActive) {\r\n            return; \/\/ Already listening\r\n        }\r\n\r\n        console.log('MCQ: Setting up payment completion listeners');\r\n        this.paymentListenerActive = true;\r\n\r\n        \/\/ STRATEGY 1: Listen for postMessage from Worldpay iframe\r\n        const postMessageHandler = (event) => {\r\n            \/\/ Check if message is from Worldpay or Convey365 domain\r\n            const isWorldpay = event.origin.includes('worldpay') ||\r\n                              event.origin.includes('wp.') ||\r\n                              event.origin.includes('secure');\r\n            const isConvey = event.origin.includes('convey365') ||\r\n                            event.origin.includes('convey.world');\r\n\r\n            if (!isWorldpay && !isConvey) {\r\n                return; \/\/ Ignore messages from other origins\r\n            }\r\n\r\n            console.log('MCQ: Received postMessage from payment provider:', event.origin, event.data);\r\n\r\n            try {\r\n                let data = event.data;\r\n\r\n                \/\/ Try to parse if it's a JSON string\r\n                if (typeof data === 'string') {\r\n                    try {\r\n                        data = JSON.parse(data);\r\n                    } catch(e) {\r\n                        \/\/ Not JSON, check string directly\r\n                        if (data.toLowerCase().includes('success') || data.toLowerCase().includes('authorised')) {\r\n                            this.handlePaymentSuccess();\r\n                            return;\r\n                        } else if (data.toLowerCase().includes('fail') || data.toLowerCase().includes('error')) {\r\n                            this.handlePaymentError('Payment failed');\r\n                            return;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                \/\/ Check for success indicators in object\r\n                if (data?.order?.status === 'success' ||\r\n                    data?.status === 'success' ||\r\n                    data?.orderStatus === 'AUTHORISED' ||\r\n                    data?.paymentStatus === 'SUCCESS') {\r\n                    this.handlePaymentSuccess();\r\n                } else if (data?.order?.status === 'failure' ||\r\n                          data?.status === 'error' ||\r\n                          data?.status === 'failed' ||\r\n                          data?.orderStatus === 'REFUSED') {\r\n                    this.handlePaymentError(data?.message || 'Payment failed');\r\n                }\r\n            } catch (error) {\r\n                console.warn('MCQ: Error processing postMessage:', error);\r\n            }\r\n        };\r\n\r\n        window.addEventListener('message', postMessageHandler);\r\n\r\n        \/\/ STRATEGY 2: Poll iframe URL for redirect patterns\r\n        \/\/ Worldpay redirects back to successUrl\/failureUrl on completion\r\n        const iframe = document.getElementById(this.paymentIframeId);\r\n        if (iframe) {\r\n            let pollCount = 0;\r\n            const maxPolls = 300; \/\/ 5 minutes max (300 * 1000ms)\r\n\r\n            const urlPoller = setInterval(() => {\r\n                pollCount++;\r\n\r\n                \/\/ Stop polling after max attempts\r\n                if (pollCount > maxPolls || !this.showPaymentModal) {\r\n                    clearInterval(urlPoller);\r\n                    window.removeEventListener('message', postMessageHandler);\r\n                    this.paymentListenerActive = false;\r\n                    return;\r\n                }\r\n\r\n                try {\r\n                    \/\/ Try to access iframe URL (may be blocked by CORS)\r\n                    const iframeUrl = iframe.contentWindow?.location?.href || '';\r\n\r\n                    \/\/ Check if URL contains our confirmation page\r\n                    if (iframeUrl.includes('\/confirmation')) {\r\n                        clearInterval(urlPoller);\r\n                        window.removeEventListener('message', postMessageHandler);\r\n                        this.paymentListenerActive = false;\r\n\r\n                        console.log('MCQ: Payment iframe redirected to confirmation page');\r\n\r\n                        \/\/ Redirect parent window to the same URL the iframe was redirected to\r\n                        \/\/ This preserves the token-based URL from the payment provider\r\n                        window.location.href = iframeUrl;\r\n                    }\r\n                } catch (e) {\r\n                    \/\/ CORS will block this, which is expected\r\n                    \/\/ We rely on postMessage as primary method\r\n                }\r\n            }, 1000); \/\/ Check every second\r\n        }\r\n\r\n        \/\/ STRATEGY 3: Fallback - manual close button\r\n        console.log('MCQ: Payment listener active. Close modal manually if payment completes.');\r\n    },\r\n    \/\/ NEW: Handle successful payment\r\n    handlePaymentSuccess() {\r\n        console.log('MCQ: Payment successful, redirecting to confirmation page');\r\n        this.showPaymentModal = false;\r\n\r\n        \/\/ Try to get the confirmation URL from the iframe if it has already been redirected\r\n        \/\/ The payment provider redirects the iframe to our success URL (which includes the token)\r\n        try {\r\n            const iframe = document.getElementById(this.paymentIframeId);\r\n            if (iframe && iframe.contentWindow) {\r\n                const iframeUrl = iframe.contentWindow.location.href;\r\n\r\n                \/\/ Check if iframe has been redirected to our confirmation page\r\n                if (iframeUrl && iframeUrl.includes('\/confirmation')) {\r\n                    console.log('MCQ: Using iframe confirmation URL with token');\r\n                    window.location.href = iframeUrl;\r\n                    return;\r\n                }\r\n            }\r\n        } catch (e) {\r\n            \/\/ CORS will block access to iframe URL if it's on a different domain\r\n            \/\/ This is expected - continue to fallback method\r\n            console.log('MCQ: Could not access iframe URL (CORS), using fallback redirect');\r\n        }\r\n\r\n        \/\/ FALLBACK: Build confirmation URL manually (uses URL params instead of token)\r\n        \/\/ This happens when we detect success via postMessage before iframe redirect completes\r\n        const params = new URLSearchParams({\r\n            status: 'success',\r\n            estimateId: this.currentInstructData?.estimateId || this.currentQuote?.id || '',\r\n            salesRef: this.currentInstructData?.salesLeadReference || '',\r\n            firmId: this.currentQuote?.conveyancerFirm?.id || '',\r\n            \/\/ Note: We don't include apiKey here as it will be fetched server-side from firmId\r\n        });\r\n\r\n        window.location.href = 'https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=8?' + params.toString();\r\n    },\r\n    \/\/ NEW: Handle payment error\r\n    handlePaymentError(message) {\r\n        console.log('MCQ: Payment error:', message);\r\n        this.showPaymentModal = false;\r\n\r\n        \/\/ Try to get the error URL from the iframe if it has already been redirected\r\n        try {\r\n            const iframe = document.getElementById(this.paymentIframeId);\r\n            if (iframe && iframe.contentWindow) {\r\n                const iframeUrl = iframe.contentWindow.location.href;\r\n\r\n                \/\/ Check if iframe has been redirected to our confirmation page (with error)\r\n                if (iframeUrl && iframeUrl.includes('\/confirmation')) {\r\n                    console.log('MCQ: Using iframe error URL with token');\r\n                    window.location.href = iframeUrl;\r\n                    return;\r\n                }\r\n            }\r\n        } catch (e) {\r\n            console.log('MCQ: Could not access iframe URL (CORS), using fallback redirect');\r\n        }\r\n\r\n        \/\/ FALLBACK: Build error URL manually\r\n        const params = new URLSearchParams({\r\n            status: 'error',\r\n            desc: message || 'Payment failed or was cancelled',\r\n            estimateId: this.currentQuote?.id || ''\r\n        });\r\n\r\n        window.location.href = 'https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=8?' + params.toString();\r\n    },\r\n    \/\/ NEW: Manual close handler (cleanup)\r\n    closePaymentModal() {\r\n        this.showPaymentModal = false;\r\n        this.paymentListenerActive = false;\r\n        \/\/ Don't redirect - user cancelled manually\r\n    }\r\n}\">\r\n\r\n    <!-- Hero Section -->\r\n    <section class=\"hero-section\">\r\n\r\n        <!-- Hero when there ARE results -->\r\n        <div class=\"hero-content results-hero-content\" x-show=\"sortedResults().length > 0\">\r\n            <h2>Great news!<\/h2>\r\n            <p>We've found regulated, top-rated firms based on your details. Compare by price, average transaction speed or service and select the one that suits your needs.<\/p>            <div class=\"hero-buttons\">\r\n                <template x-if=\"typeof editQuote === 'function'\">\r\n                    <button class=\"btn btn-style-2\"\r\n                        data-mcq-action=\"edit_quote\" @click=\"editQuote()\">Edit details<\/button>\r\n                <\/template>\r\n                <template x-if=\"typeof editQuote !== 'function'\">\r\n                    <a href=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F12&#038;edit=true\"\r\n                        class=\"btn btn-style-2\">Edit details<\/a>\r\n                <\/template>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Hero when there are NO results -->\r\n        <div class=\"hero-content results-hero-content\" x-show=\"sortedResults().length === 0\" x-cloak>\r\n            <h2>We couldn&#039;t find a match<\/h2>\r\n            <p>None of our panel firms are available for the details you've provided. Try adjusting your quote, or get in touch with our team and we'll be happy to help.<\/p>        <\/div>\r\n\r\n    <\/section>\r\n\r\n    <!-- Quote Summary Panel -->\r\n    <div class=\"mcq-quote-summary\" x-data=\"{ summaryExpanded: false }\" x-show=\"results && results.request\">\r\n        <div class=\"mcq-quote-summary-header\" @click=\"summaryExpanded = !summaryExpanded\">\r\n            <div class=\"mcq-quote-summary-title\">\r\n                <i class=\"fa-solid fa-file-lines\"><\/i>\r\n                <span>Your Quote Details<\/span>\r\n            <\/div>\r\n            <div class=\"mcq-quote-summary-preview\" x-show=\"!summaryExpanded\">\r\n                <span x-text=\"(() => {\r\n                    const req = results?.request;\r\n                    if (!req) return '';\r\n\r\n                    let parts = [];\r\n\r\n                    \/\/ Transaction type\r\n                    if (req.purchasePrice && req.salePrice) parts.push('Buy & Sell');\r\n                    else if (req.purchasePrice) parts.push('Purchase');\r\n                    else if (req.salePrice) parts.push('Sale');\r\n                    else if (req.remortgageAmount) parts.push('Remortgage');\r\n\r\n                    \/\/ Price\r\n                    const price = req.purchasePrice || req.salePrice || req.remortgageAmount;\r\n                    if (price) parts.push('\u00a3' + parseFloat(price).toLocaleString('en-GB'));\r\n\r\n                    \/\/ Tenure\r\n                    const tenure = req.purchaseTenure || req.saleTenure || req.remortgageTenure;\r\n                    if (tenure) parts.push(tenure.charAt(0) + tenure.slice(1).toLowerCase());\r\n\r\n                    \/\/ Reference\r\n                    if (req.identifier) parts.push('Ref: ' + req.identifier);\r\n\r\n                    return parts.join(' | ');\r\n                })()\"><\/span>\r\n            <\/div>\r\n            <button class=\"mcq-quote-summary-toggle\" type=\"button\" :aria-expanded=\"summaryExpanded\">\r\n                <i :class=\"summaryExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"mcq-quote-summary-body\" x-show=\"summaryExpanded\" x-collapse>\r\n            <div class=\"mcq-quote-summary-grid\">\r\n                <!-- Transaction Type -->\r\n                <div class=\"mcq-quote-summary-item\">\r\n                    <span class=\"mcq-summary-label\">Transaction<\/span>\r\n                    <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                        const req = results?.request;\r\n                        if (!req) return '-';\r\n                        if (req.purchasePrice && req.salePrice) return 'Buy & Sell';\r\n                        if (req.purchasePrice) return 'Purchase';\r\n                        if (req.salePrice) return 'Sale';\r\n                        if (req.remortgageAmount) return 'Remortgage';\r\n                        return '-';\r\n                    })()\"><\/span>\r\n                <\/div>\r\n\r\n                <!-- Price(s) -->\r\n                <template x-if=\"results?.request?.purchasePrice\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Purchase Price<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"formatPrice(results.request.purchasePrice)\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.salePrice\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Sale Price<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"formatPrice(results.request.salePrice)\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageAmount\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Remortgage Amount<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"formatPrice(results.request.remortgageAmount)\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Tenure -->\r\n                <template x-if=\"results?.request?.purchaseTenure\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.salePrice ? 'Tenure (Purchase)' : 'Tenure'\"><\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const tenure = results?.request?.purchaseTenure;\r\n                            if (!tenure) return '-';\r\n                            return tenure.charAt(0) + tenure.slice(1).toLowerCase();\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleTenure && !results?.request?.purchaseTenure\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Tenure<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const tenure = results?.request?.saleTenure;\r\n                            if (!tenure) return '-';\r\n                            return tenure.charAt(0) + tenure.slice(1).toLowerCase();\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleTenure && results?.request?.purchasePrice\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Tenure (Sale)<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const tenure = results?.request?.saleTenure;\r\n                            if (!tenure) return '-';\r\n                            return tenure.charAt(0) + tenure.slice(1).toLowerCase();\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageTenure\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Tenure<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const tenure = results?.request?.remortgageTenure;\r\n                            if (!tenure) return '-';\r\n                            return tenure.charAt(0) + tenure.slice(1).toLowerCase();\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Mortgage Status -->\r\n                <template x-if=\"results?.request?.purchasePrice\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.salePrice ? 'Mortgage (Purchase)' : 'Mortgage'\"><\/span>\r\n                        <span class=\"mcq-summary-value\" :class=\"results?.request?.purchaseMortgage ? 'mcq-summary-flag' : ''\" x-text=\"results?.request?.purchaseMortgage ? 'Yes' : 'No'\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.salePrice\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Mortgage to Redeem (Sale)' : 'Mortgage to Redeem'\"><\/span>\r\n                        <span class=\"mcq-summary-value\" :class=\"results?.request?.saleMortgage ? 'mcq-summary-flag' : ''\" x-text=\"results?.request?.saleMortgage ? 'Yes' : 'No'\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageTransferOfEquity\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Transfer of Equity<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Lender (if applicable) -->\r\n                <template x-if=\"results?.request?.purchaseLenderName\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Lender<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"results.request.purchaseLenderName\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageNewLenderName\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">New Lender<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"results.request.remortgageNewLenderName\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Address\/Postcode -->\r\n                <template x-if=\"results?.request?.purchaseAddress?.postcode\">\r\n                    <div class=\"mcq-quote-summary-item mcq-summary-wide\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.saleAddress?.postcode ? 'Property (Purchase)' : 'Property'\"><\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const addr = results.request.purchaseAddress;\r\n                            if (!addr) return '-';\r\n                            let parts = [];\r\n                            if (addr.property) parts.push(addr.property);\r\n                            if (addr.street) parts.push(addr.street);\r\n                            if (addr.town) parts.push(addr.town);\r\n                            if (addr.city) parts.push(addr.city);\r\n                            if (addr.postcode) parts.push(addr.postcode);\r\n                            return parts.join(', ') || '-';\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleAddress?.postcode\">\r\n                    <div class=\"mcq-quote-summary-item mcq-summary-wide\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchaseAddress?.postcode ? 'Property (Sale)' : 'Property'\"><\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const addr = results.request.saleAddress;\r\n                            if (!addr) return '-';\r\n                            let parts = [];\r\n                            if (addr.property) parts.push(addr.property);\r\n                            if (addr.street) parts.push(addr.street);\r\n                            if (addr.town) parts.push(addr.town);\r\n                            if (addr.city) parts.push(addr.city);\r\n                            if (addr.postcode) parts.push(addr.postcode);\r\n                            return parts.join(', ') || '-';\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageAddress?.postcode\">\r\n                    <div class=\"mcq-quote-summary-item mcq-summary-wide\">\r\n                        <span class=\"mcq-summary-label\">Property<\/span>\r\n                        <span class=\"mcq-summary-value\" x-text=\"(() => {\r\n                            const addr = results.request.remortgageAddress;\r\n                            if (!addr) return '-';\r\n                            let parts = [];\r\n                            if (addr.property) parts.push(addr.property);\r\n                            if (addr.street) parts.push(addr.street);\r\n                            if (addr.town) parts.push(addr.town);\r\n                            if (addr.city) parts.push(addr.city);\r\n                            if (addr.postcode) parts.push(addr.postcode);\r\n                            return parts.join(', ') || '-';\r\n                        })()\"><\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Key Flags - Purchase -->\r\n                <template x-if=\"results?.request?.purchaseFirstTimeBuyer\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">First Time Buyer<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseNewBuild\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">New Build<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseAuction\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Auction<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseHelpToBuySharedOwnership\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Shared Ownership<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseBuyToLet\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Buy to Let<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseForeignFunds\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Foreign Funds<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseHigherSdltRate\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Higher Land Tax Rate<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseHelpToBuyIsaScheme\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Help to Buy ISA<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseHelpToBuyEquityLoan\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Help to Buy Equity Loan<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchasePersonalGiftOrLoan\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Personal Gift\/Loan<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseRightToBuy\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Right to Buy<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.purchaseBuildingSafetyAct\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Building Safety Act<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Key Flags - Sale -->\r\n                <template x-if=\"results?.request?.saleAuction\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Auction (Sale)' : 'Auction'\"><\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleHelpToBuyEquityLoan\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Help to Buy Equity Loan (Sale)' : 'Help to Buy Equity Loan'\"><\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleHelpToBuySharedOwnership\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Shared Ownership (Sale)' : 'Shared Ownership'\"><\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleBuyToLet\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Buy to Let (Sale)' : 'Buy to Let'\"><\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.saleBuildingSafetyAct\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\" x-text=\"results?.request?.purchasePrice ? 'Building Safety Act (Sale)' : 'Building Safety Act'\"><\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Key Flags - Remortgage -->\r\n                <template x-if=\"results?.request?.remortgageHelpToBuyEquityLoanRedemption\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Redeem Help to Buy Equity Loan<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageHelpToBuyEquityLoanPostponement\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Postpone Help to Buy Equity Loan<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageBuyToLet\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Buy to Let<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n                <template x-if=\"results?.request?.remortgageBuildingSafetyAct\">\r\n                    <div class=\"mcq-quote-summary-item\">\r\n                        <span class=\"mcq-summary-label\">Building Safety Act<\/span>\r\n                        <span class=\"mcq-summary-value mcq-summary-flag\">Yes<\/span>\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <!-- Quote Reference -->\r\n                <div class=\"mcq-quote-summary-item mcq-summary-reference\">\r\n                    <span class=\"mcq-summary-label\">Quote Reference<\/span>\r\n                    <span class=\"mcq-summary-value\" x-text=\"results?.request?.identifier || 'N\/A'\"><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mcq-quote-summary-footer\">\r\n                <template x-if=\"typeof editQuote === 'function'\">\r\n                    <a href=\"#\" data-mcq-action=\"edit_quote\" @click.prevent=\"editQuote()\" class=\"mcq-edit-quote-link\">\r\n                        <i class=\"fa-solid fa-pen-to-square\"><\/i> Edit Full Quote\r\n                    <\/a>\r\n                <\/template>\r\n                <template x-if=\"typeof editQuote !== 'function'\">\r\n                    <a href=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F12&#038;edit=true\" class=\"mcq-edit-quote-link\">\r\n                        <i class=\"fa-solid fa-pen-to-square\"><\/i> Edit Full Quote\r\n                    <\/a>\r\n                <\/template>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Filter Buttons (hidden when no results, and on single-firm installs where there's nothing to sort) -->\r\n        <div class=\"action-buttons\" x-show=\"sortedResults().length > 0\">\r\n        <h5>Filter By:<\/h5>\r\n        <button class=\"btn\" :class=\"sortBy === 'rating' ? 'btn-primary' : ''\" @click=\"sortBy = 'rating'\">\r\n            Best rated        <\/button>\r\n        <button class=\"btn\" :class=\"sortBy === 'speed' ? 'btn-primary' : ''\" @click=\"sortBy = 'speed'\">\r\n            Speed        <\/button>\r\n        <button class=\"btn\" :class=\"sortBy === 'price' ? 'btn-primary' : ''\" @click=\"sortBy = 'price'\">\r\n            Price        <\/button>\r\n    <\/div>\r\n    \r\n    <!-- No Results Message -->\r\n    <div x-show=\"sortedResults().length === 0\" class=\"mcq-no-results text-center py-5\">\r\n        <h3 class=\"fw-bold mb-2\" style=\"color: var(--mcq-primary);\">No firms match your criteria<\/h3>\r\n        <p class=\"text-muted mb-4\">Unfortunately, none of our panel firms are available for the details you've provided. Please try adjusting your quote details or get in touch with our team for assistance.<\/p>\r\n        <template x-if=\"typeof editQuote === 'function'\">\r\n            <button data-mcq-action=\"edit_quote\" @click=\"editQuote()\" class=\"btn btn-primary\">\r\n                <i class=\"fa-solid fa-pen-to-square me-2\"><\/i>Edit Your Quote\r\n            <\/button>\r\n        <\/template>\r\n        <template x-if=\"typeof editQuote !== 'function'\">\r\n            <a href=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F12&#038;edit=true\" class=\"btn btn-primary\">\r\n                <i class=\"fa-solid fa-pen-to-square me-2\"><\/i>Edit Your Quote\r\n            <\/a>\r\n        <\/template>\r\n    <\/div>\r\n\r\n    <!-- Results Section -->\r\n    <template x-for=\"(quote, index) in sortedResults()\" :key=\"quote.id\">\r\n        <section class=\"result-section\" :class=\"{ 'best-rated': index === 0 }\">\r\n            <!-- Tab Label (shows for first result only, hidden on single-firm installs where there's nothing to sort against) -->\r\n                        <template x-if=\"index === 0\">\r\n                <div class=\"tab-label\"\r\n                    x-text=\"sortBy === 'rating' ? 'Best rated' : (sortBy === 'speed' ? 'Fastest' : 'Best price')\">\r\n                <\/div>\r\n            <\/template>\r\n            \r\n            <div class=\"result-card\" x-data=\"{ expanded: false }\">\r\n\r\n                <!-- Main Info Row -->\r\n                                <div class=\"result-info\">\r\n                    <div class=\"firm-logo-name\">\r\n                        <img :src=\"quote.conveyancerFirm.logoPath\" :alt=\"quote.conveyancerFirm.name + ' logo'\">\r\n                        <h5 x-text=\"quote.conveyancerFirm.name\"><\/h5>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n                \r\n                <!-- Stats Grid -->\r\n                <div class=\"stats-grid\">\r\n                    <div class=\"stat-box\">\r\n                        <div class=\"stat-label\">\r\n                            Overall Rating                        <\/div>\r\n                        <div class=\"stat-value\" x-text=\"quote.conveyancerFirm.averageRating + '%'\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"stat-box\">\r\n                        <div class=\"stat-label\">\r\n                            Average Completion Time                        <\/div>\r\n                        <div class=\"stat-value\"\r\n                            x-text=\"Math.round(quote.conveyancerFirm.averageCompletionTime) + ' weeks'\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"stat-box\">\r\n                        <div class=\"stat-label\">Price                        <\/div>\r\n                        <div class=\"stat-value\" x-text=\"formatPrice(grandTotal(quote))\"><\/div>\r\n                    <\/div>\r\n                    <button class=\"instruct-btn\" data-mcq-action=\"instruct\"\r\n                        @click=\"instruct(quote, false)\">Instruct<\/button>\r\n\r\n                <\/div>\r\n\r\n                <!-- Firm Description (moved above more-details-link) -->\r\n                <div x-data=\"{\r\n                    showFullDescription: false,\r\n                    getFirstSentence(text) {\r\n                        if (!text) return 'No firm description provided.';\r\n                        const match = text.match(\/^[^.!?]+[.!?]\/);\r\n                        return match ? match[0] : text;\r\n                    },\r\n                    isMobile() {\r\n                        return window.innerWidth <= 768;\r\n                    }\r\n                }\">\r\n                    <p class=\"firm-description\">\r\n                        <span x-show=\"!showFullDescription && isMobile()\" x-text=\"getFirstSentence(quote.conveyancerFirm.aboutUs)\"><\/span>\r\n                        <span x-show=\"showFullDescription || !isMobile()\" x-text=\"quote.conveyancerFirm.aboutUs || 'No firm description provided.'\"><\/span>\r\n                        <button\r\n                            x-show=\"isMobile() && quote.conveyancerFirm.aboutUs && quote.conveyancerFirm.aboutUs.length > getFirstSentence(quote.conveyancerFirm.aboutUs).length\"\r\n                            @click=\"showFullDescription = !showFullDescription\"\r\n                            class=\"read-more-btn\"\r\n                            type=\"button\">\r\n                            <span x-text=\"showFullDescription ? 'Read less' : 'Read more'\"><\/span>\r\n                        <\/button>\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                                                <button class=\"more-details-link\" @click=\"expanded = !expanded\">\r\n                    <span\r\n                        x-text=\"expanded ? 'Close details' : 'More details'\"><\/span>\r\n                    <i :class=\"expanded ? 'fa-solid fa-minus' : 'fa-solid fa-plus'\"><\/i>\r\n                <\/button>\r\n                                <!-- Expanded Details -->\r\n                <div x-show=\"expanded\" x-collapse class=\"expanded-details\">\r\n\r\n                    <h6 class=\"fw-bold mt-3\">\r\n                        Quotation summary                    <\/h6>\r\n                    <p x-data=\"{\r\n                        getTenure() {\r\n                            const req = this.results?.request;\r\n                            if (!req) return 'freehold';\r\n                            \r\n                            \/\/ Check buy tenure\r\n                            if (req.purchaseTenure) {\r\n                                return req.purchaseTenure.toLowerCase();\r\n                            }\r\n                            \/\/ Check sell tenure\r\n                            if (req.saleTenure) {\r\n                                return req.saleTenure.toLowerCase();\r\n                            }\r\n                            \/\/ Check remortgage tenure\r\n                            if (req.remortgageTenure) {\r\n                                return req.remortgageTenure.toLowerCase();\r\n                            }\r\n                            \r\n                            return 'freehold';\r\n                        }\r\n                    }\">\r\n                        Based on <span x-text=\"getTenure()\"><\/span>.\r\n                        <template x-if=\"typeof editQuote === 'function'\">\r\n                            <a href=\"#\" data-mcq-action=\"edit_quote\" @click.prevent=\"editQuote()\">Change this here<\/a>\r\n                        <\/template>\r\n                        <template x-if=\"typeof editQuote !== 'function'\">\r\n                            <a href=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F12&#038;edit=true\">Change this here<\/a>\r\n                        <\/template>\r\n                        if needed.\r\n                    <\/p>\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-8 quote-details-tables\">\r\n                            <!--\r\n                                Fee tables.\r\n                                Render order matches the board-signed email-template structure so the\r\n                                website and email itemise costs identically. Each section:\r\n                                  - filters out items flagged displayFee:false (Portal's \"don't show this to\r\n                                    the customer at quote stage\" signal \u2014 typically optional add-ons)\r\n                                  - hides the entire section when there are no visible items left\r\n                                  - shows item name + (collapsible) description + total inc VAT\r\n                                  - shows section subtotal \/ VAT \/ total at the bottom\r\n                                Legal fees additionally sorts so the primary legal fee (legalFee:true)\r\n                                always appears first.\r\n                            -->\r\n\r\n                            <!-- Legal Fees -->\r\n                            <template x-if=\"(quote.legalFees || []).filter(f => f.displayFee === true && f.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold\">\r\n                                        Legal fees                                    <\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"fee in [...(quote.legalFees || []).filter(f => f.displayFee === true && f.total > 0)].sort((a, b) => (b.legalFee === true ? 1 : 0) - (a.legalFee === true ? 1 : 0))\" :key=\"fee.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"fee.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"fee.description && fee.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"fee.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(fee.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr>\r\n                                                <td>Subtotal<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalLegalFees.net)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr>\r\n                                                <td>VAT<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalLegalFees.vat)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Legal fees<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalLegalFees.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n\r\n                            <!-- Required Additional Legal Work and Products -->\r\n                            <template x-if=\"(quote.requiredAdditionalLegalWorkAndProduct || []).filter(f => f.displayFee === true && f.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold mt-3\">Required Additional Legal Work<\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"fee in (quote.requiredAdditionalLegalWorkAndProduct || []).filter(f => f.displayFee === true && f.total > 0)\" :key=\"fee.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"fee.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"fee.description && fee.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"fee.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(fee.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr>\r\n                                                <td>Subtotal<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredAdditionalLegalWorkAndProduct.net)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr>\r\n                                                <td>VAT<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredAdditionalLegalWorkAndProduct.vat)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Required Additional Legal Work<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredAdditionalLegalWorkAndProduct.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n\r\n                            <!-- Disbursements (Portal third-party pass-throughs \u2014 usually empty, but render if Portal populates them) -->\r\n                            <template x-if=\"(quote.disbursements || []).filter(d => d.displayFee === true && d.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold mt-3\">\r\n                                        Disbursements                                    <\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"dis in (quote.disbursements || []).filter(d => d.displayFee === true && d.total > 0)\" :key=\"dis.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"dis.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"dis.description && dis.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"dis.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(dis.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr>\r\n                                                <td>Subtotal<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalDisbursements.net)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr>\r\n                                                <td>VAT<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalDisbursements.vat)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Disbursements<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalDisbursements.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n\r\n                            <!-- Required Property Search Fees and Disbursements -->\r\n                            <template x-if=\"(quote.requiredPropertySearchFeeAndDisbursements || []).filter(f => f.displayFee === true && f.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold mt-3\">Property Search Fees<\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"fee in (quote.requiredPropertySearchFeeAndDisbursements || []).filter(f => f.displayFee === true && f.total > 0)\" :key=\"fee.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"fee.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"fee.description && fee.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"fee.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(fee.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr>\r\n                                                <td>Subtotal<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredPropertySearchFeeAndDisbursements.net)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr>\r\n                                                <td>VAT<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredPropertySearchFeeAndDisbursements.vat)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Property Search Fees<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalRequiredPropertySearchFeeAndDisbursements.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n\r\n                            <!-- Additional Fees -->\r\n                            <template x-if=\"(quote.additionalFees || []).filter(f => f.displayFee === true && f.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold mt-3\">Additional Fees<\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"fee in (quote.additionalFees || []).filter(f => f.displayFee === true && f.total > 0)\" :key=\"fee.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"fee.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"fee.description && fee.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"fee.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(fee.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr>\r\n                                                <td>Subtotal<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalAdditionalFees.net)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr>\r\n                                                <td>VAT<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalAdditionalFees.vat)\"><\/td>\r\n                                            <\/tr>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Additional Fees<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalAdditionalFees.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n\r\n                            <!-- Stamp Duty Land Tax (no VAT, no subtotal \u2014 show as a single prominent line) -->\r\n                            <template x-if=\"(quote.landTaxes || []).filter(f => f.displayFee === true && f.total > 0).length > 0\">\r\n                                <div>\r\n                                    <h4 class=\"fw-bold mt-3\">Stamp Duty<\/h4>\r\n                                    <table class=\"table table-sm\">\r\n                                        <tbody>\r\n                                            <template x-for=\"fee in (quote.landTaxes || []).filter(f => f.displayFee === true && f.total > 0)\" :key=\"fee.name\">\r\n                                                <tr x-data=\"{ showDescription: false }\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex align-items-start gap-2\">\r\n                                                            <div class=\"flex-grow-1\">\r\n                                                                <span x-text=\"fee.name\"><\/span>\r\n                                                                <button\r\n                                                                    x-show=\"fee.description && fee.description.trim() !== ''\"\r\n                                                                    @click=\"showDescription = !showDescription\"\r\n                                                                    class=\"btn btn-link p-0 text-primary\"\r\n                                                                    style=\"min-width: 20px; font-size: 0.875rem; margin-left: 4px;\"\r\n                                                                    type=\"button\"\r\n                                                                    :aria-label=\"showDescription ? 'Hide description' : 'Show description'\">\r\n                                                                    <i :class=\"showDescription ? 'fa-solid fa-circle-xmark' : 'fa-solid fa-circle-info'\"><\/i>\r\n                                                                <\/button>\r\n                                                                <br><small\r\n                                                                    x-show=\"showDescription\"\r\n                                                                    x-collapse\r\n                                                                    class=\"text-muted mt-1\"\r\n                                                                    style=\"display: block;\"\r\n                                                                    x-text=\"fee.description\"><\/small>\r\n                                                            <\/div>\r\n                                                        <\/div>\r\n                                                    <\/td>\r\n                                                    <td class=\"text-end\" x-text=\"formatPrice(fee.total)\"><\/td>\r\n                                                <\/tr>\r\n                                            <\/template>\r\n                                            <tr class=\"fw-bold\">\r\n                                                <td>Total Stamp Duty<\/td>\r\n                                                <td class=\"text-end\" x-text=\"formatPrice(quote.totalLandTaxes.total)\"><\/td>\r\n                                            <\/tr>\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/template>\r\n                        <\/div>\r\n\r\n                        <div class=\"col-md-4 d-flex\">\r\n                            <div class=\"p-3 quote-sidebar flex-fill\">\r\n                                <div class=\"quote-sidebar-fee text-center\">\r\n                                    <!-- OLD single total display -->\r\n                                    <!-- <h3 class=\"fw-bold\">\r\n                                        Total fee: <span class=\"total-fee-amount\" x-text=\"formatPrice(quote.totalLegalFeesAndDisbursements.total)\"><\/span>\r\n                                    <\/h3> -->\r\n\r\n                                    <!--\r\n                                        Grand-total breakdown \u2014 sums all customer-visible categories\r\n                                        (legal + disbursements + required-additional + required-search +\r\n                                        additional + land taxes). Portal's `totalLegalFeesAndDisbursements`\r\n                                        already rolls up the first four; we add Additional Fees and Land\r\n                                        Taxes on top so the headline is the honest customer cost rather\r\n                                        than just the legal-fees subset.\r\n                                    -->\r\n                                    <h5 class=\"fw-bold\">Subtotal: <span class=\"total-fee-amount\" x-text=\"formatPrice(grandTotalParts(quote).net)\"><\/span><\/h5>\r\n                                    <h5 class=\"fw-bold\">VAT: <span class=\"total-fee-amount\" x-text=\"formatPrice(grandTotalParts(quote).vat)\"><\/span><\/h5>\r\n                                    <h3 class=\"fw-bold\">\r\n                                        Total fee: <span class=\"total-fee-amount\" x-text=\"formatPrice(grandTotalParts(quote).total)\"><\/span>\r\n                                    <\/h3>\r\n                                    <h5 class=\"fw-bold\">Deposit: <span class=\"total-fee-amount\" x-text=\"formatPrice(quote.deposit.amount)\"><\/span><\/h5>\r\n\r\n                                    \r\n                                    <button class=\"btn btn-primary w-100 mb-3\"\r\n                                        @click=\"instruct(quote, false)\">Instruct now<\/button>\r\n                                                                            <button @click=\"skipPaymentAndInstruct(quote)\" class=\"skip-button w-100\">\r\n                                            Skip Payment & Instruct\r\n                                        <\/button>\r\n                                                                    <\/div>\r\n                                <div class=\"quote-sidebar-contact\">\r\n                                    <h3 class=\"fw-bold\">\r\n                                        Got a Question?                                    <\/h3>\r\n                                                                                                                <p><i class=\"fa-regular fa-envelope\"><\/i> <a\r\n                                                href=\"mailto:darren@ecom.uk.com\">darren@ecom.uk.com<\/a>\r\n                                        <\/p>\r\n                                                                                                        <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n    <\/template>\r\n\r\n    <!-- Payment Modal -->\r\n    <div x-show=\"showPaymentModal\" x-transition @click.self=\"closePaymentModal()\" class=\"payment-modal\"\r\n        style=\"display: none;\">\r\n        <div class=\"payment-modal-content\">\r\n            <button @click=\"closePaymentModal()\" class=\"payment-modal-close\" title=\"Close payment window\">&times;<\/button>\r\n            <iframe :id=\"paymentIframeId\" :src=\"paymentUrl\"\r\n                    style=\"width: 100%; height: 600px; border: none;\"\r\n                    title=\"Secure Payment\"><\/iframe>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"text-center mt-5 small text-muted\">\r\n        <p>All conveyancing firms on our panel are regulated either by the Council for Licensed Conveyancers (CLC) or the Solicitors Regulated Authority (SRA).<\/p>    <\/div>\r\n<\/div>\r\n<\/template>\r\n        <div class=\"mt-4\">\r\n            <button class=\"btn btn-style-2\" @click=\"editQuote()\">Edit Quote<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    function mcqRetrieve(initialRef, requestCodeUrl, verifyCodeUrl, retrieveUrl, storeUrl, editUrl) {\r\n        return {\r\n            \/\/ Step management\r\n            step: 'request', \/\/ 'request' | 'verify' | 'results'\r\n\r\n            \/\/ Form fields\r\n            quoteRef: initialRef || '',\r\n            email: '',\r\n            code: '',\r\n\r\n            \/\/ State\r\n            loading: false,\r\n            verifying: false, \/\/ Track if we're verifying code (vs just requesting\/resending)\r\n            error: '',\r\n            successMessage: '',\r\n            results: null,\r\n\r\n            async init() {\r\n                \/\/ Populate fields from URL parameters if provided\r\n                const urlParams = new URLSearchParams(window.location.search);\r\n                const referenceParam = urlParams.get('reference');\r\n                const emailParam = urlParams.get('email');\r\n\r\n                if (referenceParam) {\r\n                    this.quoteRef = referenceParam;\r\n                }\r\n\r\n                if (emailParam) {\r\n                    \/\/ Fix URL encoding - replace %40 with @\r\n                    this.email = decodeURIComponent(emailParam);\r\n                }\r\n\r\n                \/\/ If reference is passed via URL but we still need email verification\r\n                if (this.quoteRef) {\r\n                    \/\/ Still require email verification\r\n                    this.step = 'request';\r\n                }\r\n            },\r\n\r\n            \/\/ Step 1: Request verification code (with minimum 5-second delay)\r\n            async requestCode() {\r\n                if (!this.quoteRef || !this.email) {\r\n                    this.error = 'Please enter both quote reference and email';\r\n                    return;\r\n                }\r\n\r\n                this.loading = true;\r\n                this.error = '';\r\n                this.successMessage = '';\r\n\r\n                const startTime = Date.now();\r\n\r\n                try {\r\n                    const res = await fetch(requestCodeUrl, {\r\n                        method: 'POST',\r\n                        headers: { 'Content-Type': 'application\/json' },\r\n                        body: JSON.stringify({\r\n                            quoteRef: this.quoteRef,\r\n                            email: this.email\r\n                        })\r\n                    });\r\n\r\n                    const json = await res.json();\r\n\r\n                    if (!json.success) {\r\n                        throw new Error(json.message || 'Failed to send verification code');\r\n                    }\r\n\r\n                    \/\/ Ensure minimum 5-second loading time\r\n                    const elapsed = Date.now() - startTime;\r\n                    const remainingTime = Math.max(0, 5000 - elapsed);\r\n\r\n                    await new Promise(resolve => setTimeout(resolve, remainingTime));\r\n\r\n                    \/\/ Success! Move to verification step\r\n                    this.successMessage = 'Verification code sent! Check your email.';\r\n                    this.step = 'verify';\r\n                    this.code = '';\r\n\r\n                } catch (e) {\r\n                    this.error = e.message;\r\n                } finally {\r\n                    this.loading = false;\r\n                }\r\n            },\r\n\r\n            \/\/ Step 2: Verify code and retrieve quote (with minimum 5-second delay)\r\n            async verifyCode() {\r\n                if (!this.code || this.code.length !== 6) {\r\n                    this.error = 'Please enter the 6-digit code';\r\n                    return;\r\n                }\r\n\r\n                this.loading = true;\r\n                this.verifying = true; \/\/ Show fullscreen loading overlay\r\n                this.error = '';\r\n                this.successMessage = '';\r\n\r\n                const startTime = Date.now();\r\n\r\n                try {\r\n                    \/\/ First, verify the code\r\n                    const verifyRes = await fetch(verifyCodeUrl, {\r\n                        method: 'POST',\r\n                        headers: { 'Content-Type': 'application\/json' },\r\n                        body: JSON.stringify({\r\n                            quoteRef: this.quoteRef,\r\n                            email: this.email,\r\n                            code: this.code\r\n                        })\r\n                    });\r\n\r\n                    const verifyJson = await verifyRes.json();\r\n\r\n                    if (!verifyJson.success) {\r\n                        throw new Error(verifyJson.message || 'Invalid verification code');\r\n                    }\r\n\r\n                    \/\/ Code verified! Now fetch the actual quote\r\n                    const retrieveRes = await fetch(retrieveUrl, {\r\n                        method: 'POST',\r\n                        headers: { 'Content-Type': 'application\/json' },\r\n                        body: JSON.stringify({ reference: this.quoteRef })\r\n                    });\r\n\r\n                    const retrieveJson = await retrieveRes.json();\r\n\r\n                    if (!retrieveJson.success) {\r\n                        throw new Error(retrieveJson.message || 'Unable to retrieve quote');\r\n                    }\r\n\r\n                    \/\/ Ensure minimum 5-second loading time\r\n                    const elapsed = Date.now() - startTime;\r\n                    const remainingTime = Math.max(0, 5000 - elapsed);\r\n\r\n                    await new Promise(resolve => setTimeout(resolve, remainingTime));\r\n\r\n                    this.results = retrieveJson.data;\r\n                    this.step = 'results';\r\n\r\n                    \/\/ Store retrieved quote in WordPress session for Edit mode\r\n                    try {\r\n                        const api = this.results && (this.results.data || this.results);\r\n                        const formState = this.buildFormStateFromApi(api);\r\n\r\n                        await fetch(storeUrl, {\r\n                            method: 'POST',\r\n                            headers: { 'Content-Type': 'application\/json' },\r\n                            body: JSON.stringify(formState)\r\n                        });\r\n\r\n                        console.log('\u2705 Stored retrieved quote in session for edit mode');\r\n                    } catch (err) {\r\n                        console.warn('\u274c Could not store retrieved quote data', err);\r\n                    }\r\n\r\n                } catch (e) {\r\n                    this.error = e.message;\r\n                } finally {\r\n                    this.loading = false;\r\n                    this.verifying = false;\r\n                }\r\n            },\r\n\r\n            \/\/ Build a session payload compatible with your form's edit flow\r\n            buildFormStateFromApi(api) {\r\n                const req = (api && api.request) || {};\r\n                const client = (req.clients && req.clients[0]) || {};\r\n\r\n                \/\/ Helper to convert boolean to 'yes'\/'no' for Alpine radio fields\r\n                const yn = (val) => val ? 'yes' : 'no';\r\n\r\n                \/\/ Map addresses\r\n                const purchaseAddr = req.purchaseAddress || {};\r\n                const saleAddr = req.saleAddress || {};\r\n                const remortgageAddr = req.remortgageAddress || {};\r\n\r\n                \/\/ Transaction type\r\n                let transactionType = '';\r\n                if (req.salePrice > 0 && req.purchasePrice > 0) transactionType = 'buy_and_sell';\r\n                else if (req.purchasePrice > 0) transactionType = 'buy';\r\n                else if (req.salePrice > 0) transactionType = 'sell';\r\n                else if (req.remortgageAmount > 0) transactionType = 'remortgage';\r\n\r\n                \/\/ Prefill object matching Alpine UI schema\r\n                const prefill = {\r\n                    transactionType,\r\n                    details_buy: {\r\n                        price: req.purchasePrice || '',\r\n                        tenure: req.purchaseTenure || 'FREEHOLD',\r\n                        mortgage: yn(req.purchaseMortgage),\r\n                        new_build: yn(req.purchaseNewBuild),\r\n                        auction: yn(req.purchaseAuction),\r\n                        first_time: yn(req.purchaseFirstTimeBuyer),\r\n                        gifted: yn(req.purchasePersonalGiftOrLoan),\r\n                        help_to_buy_isa: yn(req.purchaseHelpToBuyIsaScheme),\r\n                        help_to_buy_equity: yn(req.purchaseHelpToBuyEquityLoan),\r\n                        shared_ownership: yn(req.purchaseHelpToBuySharedOwnership),\r\n                        investment: 'no',\r\n                        right_to_buy: 'no',\r\n                        notes: ''\r\n                    },\r\n                    details_sell: {\r\n                        price: req.salePrice || '',\r\n                        tenure: req.saleTenure || 'FREEHOLD',\r\n                        mortgage: yn(req.saleMortgage),\r\n                        auction: yn(req.saleAuction),\r\n                        help_to_buy_equity: yn(req.saleHelpToBuyEquityLoan),\r\n                        shared_ownership: yn(req.saleHelpToBuySharedOwnership),\r\n                        notes: ''\r\n                    },\r\n                    details_remortgage: {\r\n                        amount: req.remortgageAmount || '',\r\n                        tenure: req.remortgageTenure || 'FREEHOLD',\r\n                        transferOfEquity: yn(req.remortgageTransferOfEquity),\r\n                        buyToLet: yn(req.remortgageBuyToLet)\r\n                    },\r\n                    address_buy: {\r\n                        property: purchaseAddr.property || '',\r\n                        street: purchaseAddr.street || '',\r\n                        town: purchaseAddr.town || '',\r\n                        city: purchaseAddr.city || '',\r\n                        county: purchaseAddr.county || '',\r\n                        postcode: (purchaseAddr.postcode || '').toUpperCase()\r\n                    },\r\n                    address_sell: {\r\n                        property: saleAddr.property || '',\r\n                        street: saleAddr.street || '',\r\n                        town: saleAddr.town || '',\r\n                        city: saleAddr.city || '',\r\n                        county: saleAddr.county || '',\r\n                        postcode: (saleAddr.postcode || '').toUpperCase()\r\n                    },\r\n                    contact: {\r\n                        first_name: client.forename || '',\r\n                        last_name: client.surname || '',\r\n                        email: client.email || '',\r\n                        phone: client.telephone || ''\r\n                    }\r\n                };\r\n                return prefill;\r\n            },\r\n\r\n            async editQuote() {\r\n                if (!this.results) return;\r\n                const api = this.results && (this.results.data || this.results);\r\n                const formState = this.buildFormStateFromApi(api);\r\n\r\n                \/\/ Store in session for the form to prefill\r\n                await fetch(storeUrl, {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json' },\r\n                    body: JSON.stringify(formState)\r\n                });\r\n\r\n                \/\/ Wait briefly to ensure session is written before redirect\r\n                setTimeout(() => {\r\n                    window.location = editUrl;\r\n                }, 300);\r\n            }\r\n        }\r\n    }\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-mcq-embed.php","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":0,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"wp:attachment":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}