src/CompanyGroupBundle/Resources/views/pages/quotes/request_quote.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. {% set breakdown = breakdown is defined ? breakdown : {} %}
  4. {% set prefill   = prefill   is defined ? prefill   : {} %}
  6. <style>
  7. .qr-shell {
  8.     min-height: 100vh;
  9.     background: linear-gradient(135deg,#f4f8ff 0%,#edf3fb 100%);
  10.     padding: 40px 0 60px;
  11. }
  12. .qr-card {
  13.     max-width: 820px;
  14.     margin: 0 auto;
  15.     background: #fff;
  16.     border-radius: 20px;
  17.     box-shadow: 0 12px 50px rgba(17,42,84,0.10);
  18.     overflow: hidden;
  19. }
  20. .qr-card__header {
  21.     background: linear-gradient(135deg,#1d5b9e,#0f3565);
  22.     padding: 32px 40px 28px;
  23.     color: #fff;
  24. }
  25. .qr-card__header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
  26. .qr-card__header p  { opacity: 0.75; margin: 0; font-size: 0.92rem; }
  27. .qr-card__body { padding: 36px 40px; }
  28. .qr-section-title {
  29.     font-size: 0.72rem;
  30.     font-weight: 700;
  31.     text-transform: uppercase;
  32.     letter-spacing: 0.1em;
  33.     color: #7a8ba8;
  34.     margin: 0 0 14px;
  35. }
  36. .qr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
  37. .qr-row--3 { grid-template-columns: 1fr 1fr 1fr; }
  38. .qr-row--1 { grid-template-columns: 1fr; }
  39. .qr-field label {
  40.     display: block;
  41.     font-size: 0.82rem;
  42.     font-weight: 600;
  43.     color: #2c3e50;
  44.     margin-bottom: 5px;
  45. }
  46. .qr-field input, .qr-field select, .qr-field textarea {
  47.     width: 100%;
  48.     border: 1.5px solid #dce4ef;
  49.     border-radius: 9px;
  50.     padding: 9px 13px;
  51.     font-size: 0.92rem;
  52.     background: #fafbfd;
  53.     transition: border-color 0.2s;
  54.     box-sizing: border-box;
  55. }
  56. .qr-field input:focus, .qr-field select:focus, .qr-field textarea:focus {
  57.     border-color: #1d5b9e;
  58.     outline: none;
  59.     background: #fff;
  60. }
  61. .qr-field--counter { position: relative; }
  62. .qr-field--counter input { padding-right: 50px; }
  63. .qr-field--counter .qr-price-hint {
  64.     position: absolute;
  65.     right: 12px; top: 50%; transform: translateY(-50%);
  66.     font-size: 0.75rem;
  67.     color: #7a8ba8;
  68.     pointer-events: none;
  69. }
  70. .qr-divider { height: 1px; background: #eef1f6; margin: 28px 0; }
  71. .qr-price-box {
  72.     background: linear-gradient(135deg,#f4f8ff,#edf3fb);
  73.     border: 1.5px solid #dce4ef;
  74.     border-radius: 14px;
  75.     padding: 22px 26px;
  76.     margin-bottom: 24px;
  77. }
  78. .qr-price-box__label { font-size: 0.8rem; color: #7a8ba8; margin-bottom: 4px; }
  79. .qr-price-box__total { font-size: 2rem; font-weight: 800; color: #1d5b9e; }
  80. .qr-price-box__sub   { font-size: 0.82rem; color: #7a8ba8; margin-top: 2px; }
  81. .qr-price-box__breakdown { margin-top: 12px; font-size: 0.82rem; color: #4a6080; }
  82. .qr-price-box__breakdown .row-item {
  83.     display: flex; justify-content: space-between;
  84.     padding: 3px 0; border-bottom: 1px dashed #e0e8f0;
  85. }
  86. .qr-price-box__breakdown .row-item:last-child { border: 0; }
  87. .qr-btn-group { display: flex; gap: 14px; }
  88. .qr-btn {
  89.     padding: 12px 28px;
  90.     border-radius: 10px;
  91.     font-size: 0.95rem;
  92.     font-weight: 700;
  93.     border: none;
  94.     cursor: pointer;
  95.     transition: transform 0.1s, box-shadow 0.1s;
  96. }
  97. .qr-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
  98. .qr-btn--primary { background: #1d5b9e; color: #fff; }
  99. .qr-btn--secondary { background: #f0f4fa; color: #1d5b9e; border: 1.5px solid #d0dce8; }
  100. .qr-plan-badge {
  101.     display: inline-flex; align-items: center; gap: 6px;
  102.     background: #e8f0fb; color: #1d5b9e;
  103.     border-radius: 20px; padding: 4px 14px;
  104.     font-size: 0.82rem; font-weight: 700; margin-bottom: 22px;
  105. }
  106. </style>
  108. <div class="qr-shell">
  109.     <div class="qr-card">
  110.         <div class="qr-card__header">
  111.             <h1>{{ page_title|default('Request a Quote') }}</h1>
  112.             <p>Fill in the details below and our team will prepare your custom proposal.</p>
  113.         </div>
  114.         <div class="qr-card__body">
  116.             {% for type, messages in app.flashes %}
  117.                 {% for msg in messages %}
  118.                     <div class="alert alert-{{ type == 'error' ? 'danger' : type }} mb-3">{{ msg }}</div>
  119.                 {% endfor %}
  120.             {% endfor %}
  122.             <span class="qr-plan-badge">
  123.                 <i class="ft-package"></i>
  124.                 {{ prefill.plan_type|default('team')|title }} Plan
  125.             </span>
  127.             <form method="POST" action="{{ path('quote_request') }}" id="quoteForm">
  128.                 <input type="hidden" name="plan_type" value="{{ prefill.plan_type|default('team') }}">
  130.                 {# ── Contact Information ── #}
  131.                 <div class="qr-section-title">Contact Information</div>
  132.                 <div class="qr-row">
  133.                     {% set lockId = prefill.lock_identity|default(0) %}
  134.                     <div class="qr-field">
  135.                         <label>Email Address *{% if lockId %} <span style="font-size:11px;color:#888;">(your account)</span>{% endif %}</label>
  136.                         <input type="email" name="customer_email"
  137.                                value="{{ prefill.customer_email|default('') }}"
  138.                                required placeholder="you@company.com"
  139.                                {{ lockId ? 'readonly' : '' }}>
  140.                     </div>
  141.                     <div class="qr-field">
  142.                         <label>Full Name</label>
  143.                         <input type="text" name="customer_name"
  144.                                value="{{ prefill.customer_name|default('') }}"
  145.                                placeholder="Your name"
  146.                                {{ lockId ? 'readonly' : '' }}>
  147.                     </div>
  148.                 </div>
  149.                 <div class="qr-row">
  150.                     <div class="qr-field">
  151.                         <label>Phone</label>
  152.                         <input type="text" name="customer_phone"
  153.                                value="{{ prefill.customer_phone|default('') }}"
  154.                                placeholder="+31 6 12345678">
  155.                     </div>
  156.                     <div class="qr-field">
  157.                         <label>Company Name</label>
  158.                         <input type="text" name="company_name"
  159.                                value="{{ prefill.company_name|default('') }}"
  160.                                placeholder="Your company"
  161.                                {{ lockId and prefill.company_name|default('') != '' ? 'readonly' : '' }}>
  162.                     </div>
  163.                 </div>
  164.                 <div class="qr-row">
  165.                     <div class="qr-field">
  166.                         <label>Company Address</label>
  167.                         <input type="text" name="company_address"
  168.                                value="{{ prefill.company_address|default('') }}"
  169.                                placeholder="Street, City, Postal code">
  170.                     </div>
  171.                     <div class="qr-field">
  172.                         <label>Country</label>
  173.                         <input type="text" name="country" list="country-list"
  174.                                value="{{ prefill.country|default('') }}"
  175.                                placeholder="e.g. Netherlands">
  176.                         <datalist id="country-list">
  177.                             <option value="Netherlands"><option value="Germany"><option value="France">
  178.                             <option value="Belgium"><option value="United Kingdom"><option value="Sweden">
  179.                             <option value="Norway"><option value="Denmark"><option value="Finland">
  180.                             <option value="Spain"><option value="Italy"><option value="Portugal">
  181.                             <option value="Poland"><option value="Austria"><option value="Switzerland">
  182.                             <option value="United States"><option value="Canada"><option value="Australia">
  183.                             <option value="Singapore"><option value="India"><option value="Bangladesh">
  184.                             <option value="United Arab Emirates"><option value="South Africa">
  185.                         </datalist>
  186.                     </div>
  187.                 </div>
  189.                 <div class="qr-divider"></div>
  191.                 {# ── User Seats (both plans) ── #}
  192.                 <div class="qr-section-title">Team Size</div>
  193.                 <div class="qr-row qr-row--3">
  194.                     <div class="qr-field qr-field--counter">
  195.                         <label>Normal Users</label>
  196.                         <input type="number" name="normal_users" id="normalUsers" min="0"
  197.                                value="{{ prefill.normal_users|default(prefill.plan_type|default('team') == 'enterprise' ? 0 : 1) }}"
  198.                                class="seat-counter">
  199.                         {% if prefill.plan_type|default('team') == 'team' %}
  200.                             <span class="qr-price-hint">€8/mo</span>
  201.                         {% endif %}
  202.                     </div>
  203.                     <div class="qr-field qr-field--counter">
  204.                         <label>Admin Users</label>
  205.                         <input type="number" name="admin_users" id="adminUsers" min="0"
  206.                                value="{{ prefill.admin_users|default(0) }}"
  207.                                class="seat-counter">
  208.                         {% if prefill.plan_type|default('team') == 'team' %}
  209.                             <span class="qr-price-hint">€20/mo</span>
  210.                         {% endif %}
  211.                     </div>
  212.                     <div class="qr-field qr-field--counter">
  213.                         <label>AI-enabled Users</label>
  214.                         <input type="number" name="ml_users" id="mlUsers" min="0"
  215.                                value="{{ prefill.ml_users|default(0) }}"
  216.                                class="seat-counter">
  217.                         {% if prefill.plan_type|default('team') == 'team' %}
  218.                             <span class="qr-price-hint">€25/mo</span>
  219.                         {% endif %}
  220.                     </div>
  221.                 </div>
  223.                 {# ── Billing & Payment ── #}
  224.                 <div class="qr-section-title" style="margin-top:10px;">Billing Preferences</div>
  225.                 {% if prefill.plan_type|default('team') == 'team' %}
  226.                 <div class="qr-row">
  227.                     <div class="qr-field">
  228.                         <label>Billing Cycle</label>
  229.                         <select name="billing_cycle" id="billingCycle">
  230.                             <option value="monthly" {{ prefill.billing_cycle|default('monthly') == 'monthly' ? 'selected' : '' }}>Monthly</option>
  231.                             <option value="yearly"  {{ prefill.billing_cycle|default('monthly') == 'yearly'  ? 'selected' : '' }}>Yearly (save 20%)</option>
  232.                         </select>
  233.                     </div>
  234.                     <div class="qr-field">
  235.                         <label>Payment Method</label>
  236.                         <select name="payment_type">
  237.                             <option value="automatic" {{ prefill.payment_type|default('automatic') == 'automatic' ? 'selected' : '' }}>Card / Automatic</option>
  238.                             <option value="manual"    {{ prefill.payment_type|default('automatic') == 'manual'    ? 'selected' : '' }}>Bank Transfer</option>
  239.                         </select>
  240.                     </div>
  241.                 </div>
  243.                 {# ── Live Price Box ── #}
  244.                 <div class="qr-price-box" id="priceBox">
  245.                     <div class="qr-price-box__label">Estimated Price</div>
  246.                     <div class="qr-price-box__total" id="priceTotal">
  247.                         €{{ breakdown.base_amount|default(0)|number_format(2) }}
  248.                         <span style="font-size:1rem;font-weight:400;color:#7a8ba8;">
  249.                             / {{ prefill.billing_cycle|default('monthly') }}
  250.                         </span>
  251.                     </div>
  252.                     <div class="qr-price-box__sub" id="priceSub"></div>
  253.                     <div class="qr-price-box__breakdown" id="priceBreakdown">
  254.                         {% if breakdown %}
  255.                             {% if breakdown.subtotal_base > 0 %}
  256.                             <div class="row-item"><span>Package base</span><span>€{{ breakdown.subtotal_base|number_format(2) }}</span></div>
  257.                             {% endif %}
  258.                             {% if breakdown.extra_users > 0 %}
  259.                             <div class="row-item"><span>+{{ breakdown.extra_users }} extra users × €{{ breakdown.price_normal_monthly }}</span><span>€{{ breakdown.subtotal_normal|number_format(2) }}</span></div>
  260.                             {% endif %}
  261.                             {% if breakdown.extra_admins > 0 %}
  262.                             <div class="row-item"><span>+{{ breakdown.extra_admins }} extra admins × €{{ breakdown.price_admin_monthly }}</span><span>€{{ breakdown.subtotal_admin|number_format(2) }}</span></div>
  263.                             {% endif %}
  264.                             {% if breakdown.ml_users > 0 %}
  265.                             <div class="row-item"><span>AI-enabled users ({{ breakdown.ml_users }} × €{{ breakdown.price_ml_monthly }})</span><span>€{{ breakdown.subtotal_ml|number_format(2) }}</span></div>
  266.                             {% endif %}
  267.                         {% endif %}
  268.                     </div>
  269.                 </div>
  270.                 {% else %}
  271.                 {# Enterprise — payment preference only, no pricing shown #}
  272.                 <input type="hidden" name="billing_cycle" value="monthly">
  273.                 <div class="qr-row">
  274.                     <div class="qr-field">
  275.                         <label>Payment Method Preference</label>
  276.                         <select name="payment_type">
  277.                             <option value="manual">Bank Transfer</option>
  278.                             <option value="automatic">Card / Automatic</option>
  279.                         </select>
  280.                     </div>
  281.                 </div>
  282.                 <div style="background:#f4f8ff;border:1.5px solid #d0dce8;border-radius:10px;padding:13px 16px;font-size:0.85rem;color:#4a6080;margin-top:6px;">
  283.                     Our team will review your team size and prepare a custom price. You will receive the quote by email.
  284.                 </div>
  285.                 {% endif %}
  287.                 <div class="qr-divider"></div>
  289.                 {# ── Promo Code ── #}
  290.                 <div class="qr-section-title">Promo Code</div>
  291.                 <input type="hidden" name="promo_code_id" id="promoCodeId" value="">
  292.                 <div class="qr-row qr-row--1" style="margin-bottom:20px;">
  293.                     <div class="qr-field">
  294.                         <label>Have a promo code? <span style="font-weight:400;color:#7a8ba8;">(optional)</span></label>
  295.                         <div style="display:flex;gap:10px;">
  296.                             <input type="text" id="promoCodeInput" placeholder="Enter code…" style="flex:1;">
  297.                             <button type="button" id="promoApplyBtn"
  298.                                     style="padding:9px 18px;border-radius:9px;border:1.5px solid #1d5b9e;background:#fff;color:#1d5b9e;font-weight:700;cursor:pointer;white-space:nowrap;">
  299.                                 Apply
  300.                             </button>
  301.                         </div>
  302.                         <div id="promoResult" style="margin-top:6px;font-size:0.82rem;"></div>
  303.                     </div>
  304.                 </div>
  306.                 <div class="qr-divider"></div>
  308.                 <div class="qr-row qr-row--1" style="margin-bottom:24px;">
  309.                     <div class="qr-field">
  310.                         <label>Notes / Special Requirements</label>
  311.                         <textarea name="customer_notes" rows="3"
  312.                                   placeholder="Any special requirements or questions…">{{ prefill.customer_notes|default('') }}</textarea>
  313.                     </div>
  314.                 </div>
  316.                 <div class="qr-btn-group">
  317.                     <button type="submit" class="qr-btn qr-btn--primary">
  318.                         <i class="ft-send"></i> Submit Quote Request
  319.                     </button>
  320.                     <a href="/" class="qr-btn qr-btn--secondary">Cancel</a>
  321.                 </div>
  322.             </form>
  323.         </div>
  324.     </div>
  325. </div>
  327. <script>
  328. (function() {
  329.     var promoLookUrl = '{{ path('quote_promo_lookup') }}';
  330.     var promoDiscount = 0;
  332.     // Promo code lookup (works for both Team and Enterprise)
  333.     var promoBtn = document.getElementById('promoApplyBtn');
  334.     if (promoBtn) {
  335.         promoBtn.addEventListener('click', function() {
  336.             var code = document.getElementById('promoCodeInput').value.trim();
  337.             if (!code) return;
  338.             var resultEl = document.getElementById('promoResult');
  339.             resultEl.innerHTML = '<span style="color:#7a8ba8;">Checking…</span>';
  340.             fetch(promoLookUrl + '?code=' + encodeURIComponent(code))
  341.                 .then(function(r){ return r.json(); })
  342.                 .then(function(data) {
  343.                     if (!data.success) {
  344.                         resultEl.innerHTML = '<span style="color:#e74c3c;">✗ ' + data.message + '</span>';
  345.                         document.getElementById('promoCodeId').value = '';
  346.                         promoDiscount = 0;
  347.                         if (typeof recalc === 'function') recalc();
  348.                         return;
  349.                     }
  350.                     document.getElementById('promoCodeId').value = data.id;
  351.                     resultEl.innerHTML = '<span style="color:#27ae60;">✓ ' + data.label + ' applied!</span>';
  352.                     // Store for team plan price calc
  353.                     if (data.promo_type === 1) {
  354.                         promoDiscount = data.max_discount !== null ? Math.min(data.promo_value, data.max_discount) : data.promo_value;
  355.                     } else {
  356.                         promoDiscount = data.promo_value; // pct — applied in recalc
  357.                         promoDiscount = -data.promo_value; // signal: negative = percent
  358.                     }
  359.                     if (typeof recalc === 'function') recalc();
  360.                 });
  361.         });
  362.         document.getElementById('promoCodeInput').addEventListener('keydown', function(e) {
  363.             if (e.key === 'Enter') { e.preventDefault(); promoBtn.click(); }
  364.         });
  365.     }
  367. {% if prefill.plan_type|default('team') == 'team' %}
  368.     var calcUrl      = '{{ path('quote_calculate_price') }}';
  369.     var debounce;
  371.     function recalc() {
  372.         clearTimeout(debounce);
  373.         debounce = setTimeout(function() {
  374.             var fd = new FormData();
  375.             fd.append('normal_users',  document.getElementById('normalUsers').value);
  376.             fd.append('admin_users',   document.getElementById('adminUsers').value);
  377.             fd.append('ml_users',      document.getElementById('mlUsers').value);
  378.             fd.append('billing_cycle', document.getElementById('billingCycle').value);
  379.             fd.append('plan_type',     'team');
  381.             fetch(calcUrl, { method: 'POST', body: fd })
  382.                 .then(function(r){ return r.json(); })
  383.                 .then(function(d) {
  384.                     var cycle = d.billing_cycle;
  386.                     // Apply promo discount
  387.                     var promoOff = 0;
  388.                     if (promoDiscount < 0) {
  389.                         // Percent promo
  390.                         promoOff = Math.round(d.base_amount * (-promoDiscount / 100) * 100) / 100;
  391.                     } else {
  392.                         promoOff = promoDiscount;
  393.                     }
  394.                     var total = Math.max(0, d.base_amount - promoOff);
  396.                     document.getElementById('priceTotal').innerHTML =
  397.                         '€' + total.toFixed(2) +
  398.                         '<span style="font-size:1rem;font-weight:400;color:#7a8ba8;"> / ' + cycle + '</span>';
  400.                     var sub = '';
  401.                     if (cycle === 'yearly') {
  402.                         sub = 'Save €' + d.yearly_savings.toFixed(2) + ' vs. monthly billing (20% off)';
  403.                     }
  404.                     if (promoOff > 0) {
  405.                         sub += (sub ? ' · ' : '') + 'Promo: −€' + promoOff.toFixed(2);
  406.                     }
  407.                     document.getElementById('priceSub').textContent = sub;
  409.                     var breakdown = '';
  410.                     if (d.subtotal_base > 0) {
  411.                         breakdown += '<div class="row-item"><span>Package base</span><span>€' + d.subtotal_base.toFixed(2) + '</span></div>';
  412.                     }
  413.                     if (d.extra_users > 0) {
  414.                         breakdown += '<div class="row-item"><span>+' + d.extra_users + ' extra users × €' + d.price_normal_monthly.toFixed(2) + '</span><span>€' + d.subtotal_normal.toFixed(2) + '</span></div>';
  415.                     }
  416.                     if (d.extra_admins > 0) {
  417.                         breakdown += '<div class="row-item"><span>+' + d.extra_admins + ' extra admins × €' + d.price_admin_monthly.toFixed(2) + '</span><span>€' + d.subtotal_admin.toFixed(2) + '</span></div>';
  418.                     }
  419.                     if (d.ml_users > 0) {
  420.                         breakdown += '<div class="row-item"><span>AI-enabled users (' + d.ml_users + ' × €' + d.price_ml_monthly.toFixed(2) + ')</span><span>€' + d.subtotal_ml.toFixed(2) + '</span></div>';
  421.                     }
  422.                     if (promoOff > 0) {
  423.                         breakdown += '<div class="row-item" style="color:#27ae60;"><span>Promo discount</span><span>−€' + promoOff.toFixed(2) + '</span></div>';
  424.                     }
  425.                     document.getElementById('priceBreakdown').innerHTML = breakdown;
  426.                 });
  427.         }, 350);
  428.     }
  430.     document.querySelectorAll('.seat-counter, #billingCycle').forEach(function(el){
  431.         el.addEventListener('input', recalc);
  432.         el.addEventListener('change', recalc);
  433.     });
  434.     recalc();
  435. {% endif %}
  436. })();
  437. </script>