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.                     <div class="qr-field">
  134.                         <label>Email Address *</label>
  135.                         <input type="email" name="customer_email"
  136.                                value="{{ prefill.customer_email|default('') }}"
  137.                                required placeholder="you@company.com">
  138.                     </div>
  139.                     <div class="qr-field">
  140.                         <label>Full Name</label>
  141.                         <input type="text" name="customer_name"
  142.                                value="{{ prefill.customer_name|default('') }}"
  143.                                placeholder="Your name">
  144.                     </div>
  145.                 </div>
  146.                 <div class="qr-row">
  147.                     <div class="qr-field">
  148.                         <label>Phone</label>
  149.                         <input type="text" name="customer_phone"
  150.                                value="{{ prefill.customer_phone|default('') }}"
  151.                                placeholder="+31 6 12345678">
  152.                     </div>
  153.                     <div class="qr-field">
  154.                         <label>Company Name</label>
  155.                         <input type="text" name="company_name"
  156.                                value="{{ prefill.company_name|default('') }}"
  157.                                placeholder="Your company">
  158.                     </div>
  159.                 </div>
  160.                 <div class="qr-row">
  161.                     <div class="qr-field">
  162.                         <label>Company Address</label>
  163.                         <input type="text" name="company_address"
  164.                                value="{{ prefill.company_address|default('') }}"
  165.                                placeholder="Street, City, Postal code">
  166.                     </div>
  167.                     <div class="qr-field">
  168.                         <label>Country</label>
  169.                         <input type="text" name="country" list="country-list"
  170.                                value="{{ prefill.country|default('') }}"
  171.                                placeholder="e.g. Netherlands">
  172.                         <datalist id="country-list">
  173.                             <option value="Netherlands"><option value="Germany"><option value="France">
  174.                             <option value="Belgium"><option value="United Kingdom"><option value="Sweden">
  175.                             <option value="Norway"><option value="Denmark"><option value="Finland">
  176.                             <option value="Spain"><option value="Italy"><option value="Portugal">
  177.                             <option value="Poland"><option value="Austria"><option value="Switzerland">
  178.                             <option value="United States"><option value="Canada"><option value="Australia">
  179.                             <option value="Singapore"><option value="India"><option value="Bangladesh">
  180.                             <option value="United Arab Emirates"><option value="South Africa">
  181.                         </datalist>
  182.                     </div>
  183.                 </div>
  185.                 <div class="qr-divider"></div>
  187.                 {# ── User Seats (both plans) ── #}
  188.                 <div class="qr-section-title">Team Size</div>
  189.                 <div class="qr-row qr-row--3">
  190.                     <div class="qr-field qr-field--counter">
  191.                         <label>Normal Users</label>
  192.                         <input type="number" name="normal_users" id="normalUsers" min="0"
  193.                                value="{{ prefill.normal_users|default(prefill.plan_type|default('team') == 'enterprise' ? 0 : 1) }}"
  194.                                class="seat-counter">
  195.                         {% if prefill.plan_type|default('team') == 'team' %}
  196.                             <span class="qr-price-hint">€8/mo</span>
  197.                         {% endif %}
  198.                     </div>
  199.                     <div class="qr-field qr-field--counter">
  200.                         <label>Admin Users</label>
  201.                         <input type="number" name="admin_users" id="adminUsers" min="0"
  202.                                value="{{ prefill.admin_users|default(0) }}"
  203.                                class="seat-counter">
  204.                         {% if prefill.plan_type|default('team') == 'team' %}
  205.                             <span class="qr-price-hint">€20/mo</span>
  206.                         {% endif %}
  207.                     </div>
  208.                     <div class="qr-field qr-field--counter">
  209.                         <label>AI-enabled Users</label>
  210.                         <input type="number" name="ml_users" id="mlUsers" min="0"
  211.                                value="{{ prefill.ml_users|default(0) }}"
  212.                                class="seat-counter">
  213.                         {% if prefill.plan_type|default('team') == 'team' %}
  214.                             <span class="qr-price-hint">€25/mo</span>
  215.                         {% endif %}
  216.                     </div>
  217.                 </div>
  219.                 {# ── Billing & Payment ── #}
  220.                 <div class="qr-section-title" style="margin-top:10px;">Billing Preferences</div>
  221.                 {% if prefill.plan_type|default('team') == 'team' %}
  222.                 <div class="qr-row">
  223.                     <div class="qr-field">
  224.                         <label>Billing Cycle</label>
  225.                         <select name="billing_cycle" id="billingCycle">
  226.                             <option value="monthly" {{ prefill.billing_cycle|default('monthly') == 'monthly' ? 'selected' : '' }}>Monthly</option>
  227.                             <option value="yearly"  {{ prefill.billing_cycle|default('monthly') == 'yearly'  ? 'selected' : '' }}>Yearly (save 20%)</option>
  228.                         </select>
  229.                     </div>
  230.                     <div class="qr-field">
  231.                         <label>Payment Method</label>
  232.                         <select name="payment_type">
  233.                             <option value="automatic" {{ prefill.payment_type|default('automatic') == 'automatic' ? 'selected' : '' }}>Card / Automatic</option>
  234.                             <option value="manual"    {{ prefill.payment_type|default('automatic') == 'manual'    ? 'selected' : '' }}>Bank Transfer</option>
  235.                         </select>
  236.                     </div>
  237.                 </div>
  239.                 {# ── Live Price Box ── #}
  240.                 <div class="qr-price-box" id="priceBox">
  241.                     <div class="qr-price-box__label">Estimated Price</div>
  242.                     <div class="qr-price-box__total" id="priceTotal">
  243.                         €{{ breakdown.base_amount|default(0)|number_format(2) }}
  244.                         <span style="font-size:1rem;font-weight:400;color:#7a8ba8;">
  245.                             / {{ prefill.billing_cycle|default('monthly') }}
  246.                         </span>
  247.                     </div>
  248.                     <div class="qr-price-box__sub" id="priceSub"></div>
  249.                     <div class="qr-price-box__breakdown" id="priceBreakdown">
  250.                         {% if breakdown %}
  251.                             {% if breakdown.subtotal_base > 0 %}
  252.                             <div class="row-item"><span>Package base</span><span>€{{ breakdown.subtotal_base|number_format(2) }}</span></div>
  253.                             {% endif %}
  254.                             {% if breakdown.extra_users > 0 %}
  255.                             <div class="row-item"><span>+{{ breakdown.extra_users }} extra users × €{{ breakdown.price_normal_monthly }}</span><span>€{{ breakdown.subtotal_normal|number_format(2) }}</span></div>
  256.                             {% endif %}
  257.                             {% if breakdown.extra_admins > 0 %}
  258.                             <div class="row-item"><span>+{{ breakdown.extra_admins }} extra admins × €{{ breakdown.price_admin_monthly }}</span><span>€{{ breakdown.subtotal_admin|number_format(2) }}</span></div>
  259.                             {% endif %}
  260.                             {% if breakdown.ml_users > 0 %}
  261.                             <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>
  262.                             {% endif %}
  263.                         {% endif %}
  264.                     </div>
  265.                 </div>
  266.                 {% else %}
  267.                 {# Enterprise — payment preference only, no pricing shown #}
  268.                 <input type="hidden" name="billing_cycle" value="monthly">
  269.                 <div class="qr-row">
  270.                     <div class="qr-field">
  271.                         <label>Payment Method Preference</label>
  272.                         <select name="payment_type">
  273.                             <option value="manual">Bank Transfer</option>
  274.                             <option value="automatic">Card / Automatic</option>
  275.                         </select>
  276.                     </div>
  277.                 </div>
  278.                 <div style="background:#f4f8ff;border:1.5px solid #d0dce8;border-radius:10px;padding:13px 16px;font-size:0.85rem;color:#4a6080;margin-top:6px;">
  279.                     Our team will review your team size and prepare a custom price. You will receive the quote by email.
  280.                 </div>
  281.                 {% endif %}
  283.                 <div class="qr-divider"></div>
  285.                 {# ── Promo Code ── #}
  286.                 <div class="qr-section-title">Promo Code</div>
  287.                 <input type="hidden" name="promo_code_id" id="promoCodeId" value="">
  288.                 <div class="qr-row qr-row--1" style="margin-bottom:20px;">
  289.                     <div class="qr-field">
  290.                         <label>Have a promo code? <span style="font-weight:400;color:#7a8ba8;">(optional)</span></label>
  291.                         <div style="display:flex;gap:10px;">
  292.                             <input type="text" id="promoCodeInput" placeholder="Enter code…" style="flex:1;">
  293.                             <button type="button" id="promoApplyBtn"
  294.                                     style="padding:9px 18px;border-radius:9px;border:1.5px solid #1d5b9e;background:#fff;color:#1d5b9e;font-weight:700;cursor:pointer;white-space:nowrap;">
  295.                                 Apply
  296.                             </button>
  297.                         </div>
  298.                         <div id="promoResult" style="margin-top:6px;font-size:0.82rem;"></div>
  299.                     </div>
  300.                 </div>
  302.                 <div class="qr-divider"></div>
  304.                 <div class="qr-row qr-row--1" style="margin-bottom:24px;">
  305.                     <div class="qr-field">
  306.                         <label>Notes / Special Requirements</label>
  307.                         <textarea name="customer_notes" rows="3"
  308.                                   placeholder="Any special requirements or questions…">{{ prefill.customer_notes|default('') }}</textarea>
  309.                     </div>
  310.                 </div>
  312.                 <div class="qr-btn-group">
  313.                     <button type="submit" class="qr-btn qr-btn--primary">
  314.                         <i class="ft-send"></i> Submit Quote Request
  315.                     </button>
  316.                     <a href="/" class="qr-btn qr-btn--secondary">Cancel</a>
  317.                 </div>
  318.             </form>
  319.         </div>
  320.     </div>
  321. </div>
  323. <script>
  324. (function() {
  325.     var promoLookUrl = '{{ path('quote_promo_lookup') }}';
  326.     var promoDiscount = 0;
  328.     // Promo code lookup (works for both Team and Enterprise)
  329.     var promoBtn = document.getElementById('promoApplyBtn');
  330.     if (promoBtn) {
  331.         promoBtn.addEventListener('click', function() {
  332.             var code = document.getElementById('promoCodeInput').value.trim();
  333.             if (!code) return;
  334.             var resultEl = document.getElementById('promoResult');
  335.             resultEl.innerHTML = '<span style="color:#7a8ba8;">Checking…</span>';
  336.             fetch(promoLookUrl + '?code=' + encodeURIComponent(code))
  337.                 .then(function(r){ return r.json(); })
  338.                 .then(function(data) {
  339.                     if (!data.success) {
  340.                         resultEl.innerHTML = '<span style="color:#e74c3c;">✗ ' + data.message + '</span>';
  341.                         document.getElementById('promoCodeId').value = '';
  342.                         promoDiscount = 0;
  343.                         if (typeof recalc === 'function') recalc();
  344.                         return;
  345.                     }
  346.                     document.getElementById('promoCodeId').value = data.id;
  347.                     resultEl.innerHTML = '<span style="color:#27ae60;">✓ ' + data.label + ' applied!</span>';
  348.                     // Store for team plan price calc
  349.                     if (data.promo_type === 1) {
  350.                         promoDiscount = data.max_discount !== null ? Math.min(data.promo_value, data.max_discount) : data.promo_value;
  351.                     } else {
  352.                         promoDiscount = data.promo_value; // pct — applied in recalc
  353.                         promoDiscount = -data.promo_value; // signal: negative = percent
  354.                     }
  355.                     if (typeof recalc === 'function') recalc();
  356.                 });
  357.         });
  358.         document.getElementById('promoCodeInput').addEventListener('keydown', function(e) {
  359.             if (e.key === 'Enter') { e.preventDefault(); promoBtn.click(); }
  360.         });
  361.     }
  363. {% if prefill.plan_type|default('team') == 'team' %}
  364.     var calcUrl      = '{{ path('quote_calculate_price') }}';
  365.     var debounce;
  367.     function recalc() {
  368.         clearTimeout(debounce);
  369.         debounce = setTimeout(function() {
  370.             var fd = new FormData();
  371.             fd.append('normal_users',  document.getElementById('normalUsers').value);
  372.             fd.append('admin_users',   document.getElementById('adminUsers').value);
  373.             fd.append('ml_users',      document.getElementById('mlUsers').value);
  374.             fd.append('billing_cycle', document.getElementById('billingCycle').value);
  375.             fd.append('plan_type',     'team');
  377.             fetch(calcUrl, { method: 'POST', body: fd })
  378.                 .then(function(r){ return r.json(); })
  379.                 .then(function(d) {
  380.                     var cycle = d.billing_cycle;
  382.                     // Apply promo discount
  383.                     var promoOff = 0;
  384.                     if (promoDiscount < 0) {
  385.                         // Percent promo
  386.                         promoOff = Math.round(d.base_amount * (-promoDiscount / 100) * 100) / 100;
  387.                     } else {
  388.                         promoOff = promoDiscount;
  389.                     }
  390.                     var total = Math.max(0, d.base_amount - promoOff);
  392.                     document.getElementById('priceTotal').innerHTML =
  393.                         '€' + total.toFixed(2) +
  394.                         '<span style="font-size:1rem;font-weight:400;color:#7a8ba8;"> / ' + cycle + '</span>';
  396.                     var sub = '';
  397.                     if (cycle === 'yearly') {
  398.                         sub = 'Save €' + d.yearly_savings.toFixed(2) + ' vs. monthly billing (20% off)';
  399.                     }
  400.                     if (promoOff > 0) {
  401.                         sub += (sub ? ' · ' : '') + 'Promo: −€' + promoOff.toFixed(2);
  402.                     }
  403.                     document.getElementById('priceSub').textContent = sub;
  405.                     var breakdown = '';
  406.                     if (d.subtotal_base > 0) {
  407.                         breakdown += '<div class="row-item"><span>Package base</span><span>€' + d.subtotal_base.toFixed(2) + '</span></div>';
  408.                     }
  409.                     if (d.extra_users > 0) {
  410.                         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>';
  411.                     }
  412.                     if (d.extra_admins > 0) {
  413.                         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>';
  414.                     }
  415.                     if (d.ml_users > 0) {
  416.                         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>';
  417.                     }
  418.                     if (promoOff > 0) {
  419.                         breakdown += '<div class="row-item" style="color:#27ae60;"><span>Promo discount</span><span>−€' + promoOff.toFixed(2) + '</span></div>';
  420.                     }
  421.                     document.getElementById('priceBreakdown').innerHTML = breakdown;
  422.                 });
  423.         }, 350);
  424.     }
  426.     document.querySelectorAll('.seat-counter, #billingCycle').forEach(function(el){
  427.         el.addEventListener('input', recalc);
  428.         el.addEventListener('change', recalc);
  429.     });
  430.     recalc();
  431. {% endif %}
  432. })();
  433. </script>