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

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>Subscription Quote {{ quote.quoteToken|slice(0,8)|upper }} — HoneyBee ERP</title>
  7. <style>
  8. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  10. /* ── Design tokens (Scandinavian — matches home.html.twig) ── */
  11. :root {
  12.     --cream:      #F7F5F0;
  13.     --cream-2:    #F0EDE5;
  14.     --cream-3:    #E8E3D9;
  15.     --white:      #FFFFFF;
  16.     --dark:       #1A1D2E;
  17.     --navy:       #1E3A6E;
  18.     --amber:      #C07D2A;
  19.     --amber-lt:   #D4954A;
  20.     --amber-dim:  rgba(192,125,42,.10);
  21.     --sage:       #3D6B52;
  22.     --muted:      #6B6E7F;
  23.     --muted-2:    #9395A5;
  24.     --border:     rgba(26,29,46,.07);
  25.     --border-md:  rgba(26,29,46,.12);
  26.     --border-str: rgba(26,29,46,.18);
  27. }
  29. body {
  30.     font-family: 'Segoe UI', -apple-system, Arial, sans-serif;
  31.     font-size: 13px;
  32.     color: var(--dark);
  33.     background: #fff;
  34.     print-color-adjust: exact;
  35.     -webkit-print-color-adjust: exact;
  36.     line-height: 1.55;
  37. }
  39. .page { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 16mm 10mm; background: #fff; }
  41. /* ── Header ── */
  42. .doc-header {
  43.     display: flex; justify-content: space-between; align-items: flex-start;
  44.     padding-bottom: 18px;
  45.     border-bottom: 1.5px solid var(--cream-3);
  46.     margin-bottom: 22px;
  47. }
  48. .brand { display: flex; align-items: center; gap: 13px; }
  49. .brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; }
  50. .brand-name { font-size: 1.2rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; }
  51. .brand-sub  { font-size: 0.67rem; color: var(--muted-2); margin-top: 2px; text-transform: uppercase; letter-spacing: .08em; }
  52. .brand-contact { font-size: 0.67rem; color: var(--muted-2); margin-top: 3px; }
  54. .doc-meta { text-align: right; }
  55. .doc-type   { font-size: 0.78rem; font-weight: 800; color: var(--amber); text-transform: uppercase; letter-spacing: .12em; }
  56. .doc-ref    { font-size: 0.76rem; color: var(--muted); margin-top: 3px; }
  57. .doc-ref strong { color: var(--dark); }
  58. .doc-expires { font-size: 0.73rem; color: #a0522d; font-weight: 600; margin-top: 8px; }
  60. /* ── Status row ── */
  61. .status-row { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; flex-wrap: wrap; }
  62. .status-badge {
  63.     display: inline-flex; align-items: center; gap: 5px;
  64.     border-radius: 4px; padding: 3px 12px;
  65.     font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  66.     border: 1px solid transparent;
  67. }
  68. .status-badge.sent      { background: rgba(30,58,110,.07);  color: var(--navy);  border-color: rgba(30,58,110,.15); }
  69. .status-badge.accepted  { background: rgba(61,107,82,.08);  color: var(--sage);  border-color: rgba(61,107,82,.2); }
  70. .status-badge.draft     { background: rgba(26,29,46,.05);   color: var(--muted); border-color: var(--border-md); }
  71. .status-badge.modified  { background: var(--amber-dim);     color: var(--amber); border-color: rgba(192,125,42,.2); }
  72. .status-badge.rejected  { background: rgba(160,82,45,.07);  color: #a0522d;      border-color: rgba(160,82,45,.2); }
  73. .status-badge.requested { background: rgba(30,58,110,.07);  color: var(--navy);  border-color: rgba(30,58,110,.15); }
  74. .renew-badge {
  75.     display: inline-flex; align-items: center; gap: 5px;
  76.     background: var(--amber-dim); color: var(--amber);
  77.     border: 1px solid rgba(192,125,42,.2); border-radius: 4px;
  78.     padding: 3px 12px; font-size: 0.68rem; font-weight: 600;
  79. }
  81. /* ── Parties ── */
  82. .doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
  83. .party-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-2); font-weight: 700; margin-bottom: 6px; }
  84. .party-name  { font-weight: 700; font-size: 0.92rem; color: var(--dark); margin-bottom: 3px; }
  85. .party-line  { font-size: 0.8rem; color: var(--muted); margin-bottom: 1px; }
  87. /* ── Section title ── */
  88. .section-title {
  89.     font-size: 0.63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  90.     color: var(--muted-2); margin-bottom: 10px; margin-top: 22px;
  91.     display: flex; align-items: center; gap: 8px;
  92. }
  93. .section-title::after { content: ''; flex: 1; height: 1px; background: var(--cream-3); }
  95. /* ── Plan card ── */
  96. .plan-card {
  97.     background: var(--cream);
  98.     border: 1px solid var(--border-md);
  99.     border-radius: 8px; padding: 16px 20px;
  100.     display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  101. }
  102. .plan-item__label { font-size: 0.59rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); font-weight: 700; margin-bottom: 3px; }
  103. .plan-item__val   { font-size: 0.9rem; font-weight: 700; color: var(--dark); }
  104. .plan-item__note  { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
  106. /* ── What's Included ── */
  107. .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px 16px; }
  108. .feature-item { display: flex; align-items: center; gap: 7px; font-size: 0.79rem; color: var(--muted); padding: 4px 0; }
  109. .feat-check {
  110.     width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  111.     display: inline-flex; align-items: center; justify-content: center;
  112.     font-size: 0.55rem; font-weight: 900;
  113.     background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(192,125,42,.25);
  114. }
  115. .feat-check.sage { background: rgba(61,107,82,.08); color: var(--sage); border-color: rgba(61,107,82,.25); }
  117. /* ── Pricing table ── */
  118. .doc-table { width: 100%; border-collapse: collapse; }
  119. .doc-table thead tr { background: var(--cream-2); }
  120. .doc-table th {
  121.     padding: 9px 14px; text-align: left;
  122.     font-size: 0.67rem; font-weight: 700; letter-spacing: .07em; color: var(--muted);
  123.     text-transform: uppercase; border-bottom: 1.5px solid var(--cream-3);
  124. }
  125. .doc-table th.c { text-align: center; }
  126. .doc-table th.r { text-align: right; }
  127. .doc-table td { padding: 10px 14px; border-bottom: 1px solid var(--cream-3); font-size: 0.83rem; vertical-align: middle; color: var(--dark); }
  128. .doc-table td.c { text-align: center; color: var(--muted); }
  129. .doc-table td.r { text-align: right; font-weight: 700; }
  130. .doc-table tbody tr:last-child td { border-bottom: none; }
  131. .row-name { font-weight: 600; color: var(--dark); }
  132. .row-sub  { font-size: 0.73rem; color: var(--muted-2); margin-top: 2px; }
  133. .user-tag {
  134.     display: inline-block; padding: 1px 7px; border-radius: 3px; margin-left: 5px;
  135.     font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  136. }
  137. .user-tag.std   { background: rgba(30,58,110,.07);  color: var(--navy); }
  138. .user-tag.admin { background: var(--amber-dim);      color: var(--amber); }
  139. .user-tag.ml    { background: rgba(61,107,82,.08);   color: var(--sage); }
  140. .yearly-note { font-size: 0.7rem; color: var(--muted-2); margin-top: 8px; font-style: italic; }
  142. /* ── Totals ── */
  143. .totals-wrap { display: flex; justify-content: flex-end; margin-top: 16px; }
  144. .totals-box { width: 310px; border: 1px solid var(--border-md); border-radius: 8px; overflow: hidden; }
  145. .totals-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 18px; font-size: 0.85rem; border-bottom: 1px solid var(--cream-3); color: var(--dark); }
  146. .totals-row.discount { color: var(--sage); }
  147. .totals-row.promo    { color: var(--amber); }
  148. .totals-row.total-final {
  149.     border: none;
  150.     /*background: var(--navy);*/
  151.     background: var(--amber);
  152.     color: #fff;
  153.     font-weight: 800; font-size: 0.97rem; padding: 13px 18px;
  154. }
  155. .total-sub { font-size: 0.67rem; color: rgba(255,255,255,.55); margin-top: 2px; }
  157. /* ── Payment grid ── */
  158. .payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  159. .pay-item { background: var(--cream); border: 1px solid var(--border); border-radius: 7px; padding: 12px 15px; }
  160. .pay-item__title { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); margin-bottom: 5px; }
  161. .pay-item__body  { font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
  163. /* ── SLA ── */
  164. .sla-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  165. .sla-item { background: var(--cream); border: 1px solid var(--border); border-radius: 7px; padding: 11px 14px; }
  166. .sla-item__title { font-size: 0.72rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
  167. .sla-item__body  { font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
  169. /* ── Notes ── */
  170. .notes-box {
  171.     padding: 11px 16px;
  172.     background: rgba(192,125,42,.06);
  173.     border-left: 3px solid var(--amber);
  174.     border-radius: 5px;
  175.     font-size: 0.8rem; color: #7a5820;
  176. }
  178. /* ── Key terms callout ── */
  179. .terms-callout {
  180.     background: var(--cream);
  181.     border: 1px solid var(--border-md);
  182.     border-left: 3px solid var(--navy);
  183.     border-radius: 7px; padding: 14px 18px;
  184. }
  185. .terms-callout__title { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--navy); margin-bottom: 6px; }
  186. .terms-callout__body  { font-size: 0.8rem; color: var(--muted); line-height: 1.65; }
  187. .terms-callout__body a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(30,58,110,.25); }
  189. /* ── Footer ── */
  190. .doc-footer {
  191.     margin-top: 26px; padding-top: 14px;
  192.     border-top: 1px solid var(--cream-3);
  193.     display: flex; justify-content: space-between; align-items: flex-end;
  194.     font-size: 0.68rem; color: var(--muted-2);
  195. }
  196. .footer-links { display: flex; gap: 12px; margin-top: 3px; }
  197. .footer-links a { color: var(--muted-2); text-decoration: none; font-size: 0.65rem; border-bottom: 1px solid var(--cream-3); }
  199. /* ── Print ── */
  200. @media print {
  201.     body { background: #fff; }
  202.     .no-print { display: none !important; }
  203.     .page { padding: 8mm 12mm; }
  204. }
  205. @media screen {
  206.     body { background: var(--cream-2); padding: 20px 0 40px; }
  207.     .print-btn { display: block; max-width: 210mm; margin: 0 auto 16px; text-align: right; }
  208.     .print-btn button {
  209.         background: var(--navy); color: #fff; border: none;
  210.         padding: 9px 22px; border-radius: 7px; font-size: 0.88rem; font-weight: 700; cursor: pointer;
  211.     }
  212.     .print-btn button:hover { background: var(--dark); }
  213. }
  214. </style>
  215. </head>
  216. <body>
  218. <div class="print-btn no-print">
  219.     <button onclick="window.print()">Print / Save as PDF</button>
  220. </div>
  222. <div class="page">
  224.     {# ── HEADER ── #}
  225.     <div class="doc-header">
  226.         <div class="brand">
  227. {#            <a class="hb-brand" href="{{ url('dashboard') }}">#}
  228. {#                <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt="HoneyBee">#}
  229. {#                <span class="hb-brand-name">Honey<b>Bee</b></span>#}
  230. {#            </a>#}
  231.             <img class="brand-logo" src="{{ url('dashboard') }}honeybee_web_assets/icons/honeybeeicon.svg" alt="HoneyBee ERP">
  232.             <div>
  233.                 <div class="hb-brand-name" style="font-size: 15.5px;
  234.     font-weight: 800;
  235.     color: var(--hb-ink);
  236.     letter-spacing: -.01em;
  237.     line-height: 1;"><span>Honey<b style="color: var(--hb-amber);">Bee</b></span></div>
  238.                 <div class="brand-sub">Ecosystem</div>
  239.                 <div class="brand-contact">contact@ourhoneybee.eu · ourhoneybee.eu</div>
  240.             </div>
  241.         </div>
  242.         <div class="doc-meta">
  243.             <div class="doc-type">Subscription Quote</div>
  244.             <div class="doc-ref">Ref: <strong>{{ quote.quoteToken|slice(0,12)|upper }}</strong></div>
  245.             <div class="doc-ref">Issued: <strong>{{ quote.createdAt ? quote.createdAt|date('d M Y') : '—' }}</strong></div>
  246.             <div class="doc-expires">Valid Until: {{ quote.expiresAt ? quote.expiresAt|date('d M Y') : '30 days from issue' }}</div>
  247.         </div>
  248.     </div>
  250.     {# ── STATUS ── #}
  251.     <div class="status-row">
  252.         <span class="status-badge {{ quote.status }}">
  253.             {% if quote.status == 'accepted' %}✓ {% elseif quote.status == 'rejected' %}✕ {% endif %}{{ quote.status|upper }}
  254.         </span>
  255.         <span class="renew-badge">↻ Auto-renewing · {{ quote.billingCycle|title }} Subscription</span>
  256.     </div>
  258.     {# ── PARTIES ── #}
  259.     <div class="doc-parties">
  260.         <div>
  261.             <div class="party-label">From</div>
  262.             <div class="party-name">HoneyBee IoT (Pte.) Ltd.</div>
  263.             <div class="party-line">2 Venture Drive, #19-21
  264.                 Vision Exchange,</div>
  265.             <div class="party-line"> Singapore 608526</div>
  266.             <div class="party-line">UEN: 202507612D</div>
  267.             <div class="party-line">contact@ourhoneybee.eu</div>
  268.             <div class="party-line">ourhoneybee.eu</div>
  269.         </div>
  270.         <div>
  271.             <div class="party-label" style="">Prepared For</div>
  272.             <div class="party-name">{{ quote.companyName ?: (quote.customerName ?: 'Valued Customer') }}</div>
  273.             {% if quote.customerName and quote.companyName %}<div class="party-line">Attn: {{ quote.customerName }}</div>{% endif %}
  274.             {% if quote.customerDesignation %}<div class="party-line"> {{ quote.customerDesignation }}</div>{% endif %}
  275.             {% if quote.customerEmail %}<div class="party-line">{{ quote.customerEmail }}</div>{% endif %}
  276.             {% if quote.customerPhone %}<div class="party-line">{{ quote.customerPhone }}</div>{% endif %}
  277.             {% if quote.companyAddress %}<div class="party-line">{{ quote.companyAddress }}</div>{% endif %}
  278.             {% if quote.country %}<div class="party-line">{{ quote.country }}</div>{% endif %}
  279.             {% if quote.companyVatNo %}<div class="party-line">VAT NO. {{ quote.companyVatNo }}</div>{% endif %}
  280.      
  281.         </div>
  282.     </div>
  284.     {# ── SUBSCRIPTION DETAILS ── #}
  285.     <div class="section-title">Subscription Details</div>
  286.     <div class="plan-card">
  287.         <div>
  288.             <div class="plan-item__label">Plan</div>
  289.             <div class="plan-item__val">HoneyBee {{ quote.planType|title }}</div>
  290.             <div class="plan-item__note">Cloud SaaS · Per-seat licensing</div>
  291.         </div>
  292.         <div>
  293.             <div class="plan-item__label">Billing Cycle</div>
  294.             <div class="plan-item__val">{{ quote.billingCycle|title }}</div>
  295.             <div class="plan-item__note">
  296.                 {%- if quote.billingCycle == 'yearly' -%}Billed annually · 20% saving{%- else -%}Billed each calendar month{%- endif -%}
  297.             </div>
  298.         </div>
  299.         <div>
  300.             {% set totalSeats = (quote.normalUserCount ?: 0) + (quote.adminUserCount ?: 0) + (quote.mlUserCount ?: 0) %}
  301.             {% set totalSeatsWithoutMl = (quote.normalUserCount ?: 0) + (quote.adminUserCount ?: 0)  %}
  302.             <div class="plan-item__label">Total Seats / AI ML Enhanced Seats</div>
  303.             <div class="plan-item__val">{{ totalSeatsWithoutMl }} Seat{{ totalSeats != 1 ? 's' : '' }} / {{ (quote.mlUserCount ?: 0) }} Seat{{ (quote.mlUserCount ?: 0) != 1 ? 's' : '' }} </div>
  304. {#            <div class="plan-item__val">{{ totalSeats }} User{{ totalSeats != 1 ? 's' : '' }}</div>#}
  305.             <div class="plan-item__note">Scalable · Add users anytime</div>
  306.         </div>
  307.     </div>
  309.     {# ── WHAT'S INCLUDED ── #}
  310.     <div class="section-title">What's Included</div>
  311.     <div class="features-grid">
  312.         <div class="feature-item"><span class="feat-check">✓</span> CRM &amp; Sales Management</div>
  313.         <div class="feature-item"><span class="feat-check">✓</span> Inventory &amp; Warehouse</div>
  314.         <div class="feature-item"><span class="feat-check">✓</span> Finance &amp; Accounting</div>
  315.         <div class="feature-item"><span class="feat-check">✓</span> HR &amp; Payroll</div>
  316.         <div class="feature-item"><span class="feat-check">✓</span> Purchase Management</div>
  317.         <div class="feature-item"><span class="feat-check">✓</span> Reports &amp; Analytics</div>
  318.         <div class="feature-item"><span class="feat-check">✓</span> Production Module</div>
  319.         <div class="feature-item"><span class="feat-check">✓</span> Document Management</div>
  320.         {% if quote.mlUserCount > 0 %}
  321.         <div class="feature-item"><span class="feat-check sage">✓</span> AI / ML Intelligence Suite</div>
  322.         {% else %}
  323.         <div class="feature-item"><span class="feat-check">✓</span> Multi-currency &amp; Tax Support</div>
  324.         {% endif %}
  325.     </div>
  327.     {# ── PRICING TABLE ── #}
  328.     <div class="section-title">Pricing Breakdown</div>
  329.     {% set sub_total_unchanged=0 %}
  330.     {% if breakdown %}
  331.     <table class="doc-table">
  332.         <thead>
  333.             <tr>
  334.                 <th>Description</th>
  335.                 <th class="c">Seats</th>
  336.                 <th class="c">Unit / Month</th>
  337.                 <th class="r">Monthly Subtotal</th>
  338.             </tr>
  339.         </thead>
  340.         <tbody>
  341.             {% if breakdown.normal_users > 0 %}
  342.                 {%  set sub_total_unchanged=sub_total_unchanged+12*breakdown.subtotal_normal %}
  343.             <tr>
  344.                 <td>
  345.                     <div class="row-name">Standard User License <span class="user-tag std">Standard</span></div>
  346.                     <div class="row-sub">Full ERP access · All standard modules included</div>
  347.                 </td>
  348.                 <td class="c">{{ breakdown.normal_users }}</td>
  349.                 <td class="c">€{{ breakdown.price_normal_monthly|number_format(2) }}</td>
  350.                 <td class="r">€{{ breakdown.subtotal_normal|number_format(2) }}</td>
  351.             </tr>
  352.             {% endif %}
  353.             {% if breakdown.admin_users > 0 %}
  354.                 {%  set sub_total_unchanged=sub_total_unchanged+12*breakdown.subtotal_admin %}
  355.             <tr>
  356.                 <td>
  357.                     <div class="row-name">Administrator License <span class="user-tag admin">Admin</span></div>
  358.                     <div class="row-sub">Full access + user management + system configuration</div>
  359.                 </td>
  360.                 <td class="c">{{ breakdown.admin_users }}</td>
  361.                 <td class="c">€{{ breakdown.price_admin_monthly|number_format(2) }}</td>
  362.                 <td class="r">€{{ breakdown.subtotal_admin|number_format(2) }}</td>
  363.             </tr>
  364.             {% endif %}
  365.             {% if breakdown.ml_users > 0 %}
  366.                 {%  set sub_total_unchanged=sub_total_unchanged+12*breakdown.subtotal_ml %}
  367.             <tr>
  368.                 <td>
  369.                     <div class="row-name">AI-Enhancement per Seat <span class="user-tag ml">AI / ML</span></div>
  370.                     <div class="row-sub">Full access + AI assistant + ML analytics &amp; predictions</div>
  371.                 </td>
  372.                 <td class="c">{{ breakdown.ml_users }}</td>
  373.                 <td class="c">€{{ breakdown.price_ml_monthly|number_format(2) }}</td>
  374.                 <td class="r">€{{ breakdown.subtotal_ml|number_format(2) }}</td>
  375.             </tr>
  376.             {% endif %}
  377.         </tbody>
  378.     </table>
  379.     {% if quote.billingCycle == 'yearly' %}
  380.     <div class="yearly-note">* Monthly unit prices shown above. Annual total reflects 20% yearly discount — see billing summary below.</div>
  381.     {% endif %}
  382.     {% else %}
  383.     <table class="doc-table">
  384.         <thead>
  385.             <tr>
  386.                 <th>Description</th>
  387.                 <th>Plan Type</th>
  388.                 <th class="r">Amount</th>
  389.             </tr>
  390.         </thead>
  391.         <tbody>
  392.             <tr>
  393.                 <td>
  394.                     <div class="row-name">HoneyBee ERP — {{ quote.planType|title }} Plan</div>
  395.                     <div class="row-sub">Custom enterprise subscription · Pricing configured by your account team</div>
  396.                 </td>
  397.                 <td>{{ quote.billingCycle|title }}</td>
  398.                 <td class="r">{{ quote.baseAmount ? '€' ~ quote.baseAmount|number_format(2) : 'To be confirmed' }}</td>
  399.             </tr>
  400.         </tbody>
  401.     </table>
  402.     {% endif %}
  404.     {# ── BILLING SUMMARY ── #}
  405.     <div class="totals-wrap">
  406.         <div class="totals-box">
  407.             <div class="totals-row">
  408.                 <span>Subtotal</span>
  409.                 <span>€{{ sub_total_unchanged ? sub_total_unchanged|number_format(2) : '0.00' }}</span>
  410. {#                <span>€{{ quote.baseAmount ? quote.baseAmount|number_format(2) : '0.00' }}</span>#}
  411.             </div>
  412.             {% if quote.discountAmount > 0 or quote.discountPercent>0  %}
  413.             <div class="totals-row discount">
  414.                 <span>Discount{% if quote.discountPercent > 0 %} ({{ quote.discountPercent }}%){% endif %}</span>
  415.                 <span>−€{{ quote.discountAmount|number_format(2) }}</span>
  416.             </div>
  417.             {% endif %}
  418.             {% if quote.promoCodeDiscount > 0 %}
  419.             <div class="totals-row promo">
  420.                 <span>Promo Code</span>
  421.                 <span>−€{{ quote.promoCodeDiscount|number_format(2) }}</span>
  422.             </div>
  423.             {% endif %}
  424.             {% if breakdown is defined and breakdown and quote.billingCycle == 'yearly' %}
  425.             <div class="totals-row discount">
  426.                 <span>Annual Saving ({{ breakdown.yearly_discount_pct }}% off)</span>
  427.                 <span>−€{{ breakdown.yearly_savings|number_format(2) }}</span>
  428.             </div>
  429.             {% endif %}
  430.             <div class="totals-row total-final">
  431.                 <div>
  432.                     <div>Total Due ({{ quote.billingCycle|title }})</div>
  433.                     <div class="total-sub">{{ quote.currency ?: 'EUR' }} · Excl. applicable taxes</div>
  434.                 </div>
  435.                 <span>€{{ quote.finalAmount ? quote.finalAmount|number_format(2) : '0.00' }}</span>
  436.             </div>
  437.         </div>
  438.     </div>
  440.     {# ── PAYMENT & BILLING ── #}
  441.     <div class="section-title">Payment &amp; Billing</div>
  442.     <div class="payment-grid">
  443.         <div class="pay-item">
  444.             <div class="pay-item__title">Payment Due</div>
  445.             <div class="pay-item__body">
  446.                 {% if quote.paymentType == 'automatic' %}
  447.                     Processed automatically on the billing date via card or SEPA mandate.
  448.                 {% else %}
  449.                     Bank transfer within <strong>14 days</strong> of invoice date. Use reference <strong>{{ quote.quoteToken|slice(0,12)|upper }}</strong>.
  450.                 {% endif %}
  451.             </div>
  452.         </div>
  453.         <div class="pay-item">
  454.             <div class="pay-item__title">Accepted Methods</div>
  455.             <div class="pay-item__body">
  456.                 {% if quote.paymentType == 'automatic' %}
  457.                     Credit / Debit Card · Stripe · SEPA Direct Debit
  458.                 {% else %}
  459.                     Bank Transfer (IBAN) ·
  460.                     Oversea-Chinese Banking Corporation Limited (OCBC)
  461.                     Bank Address:
  462.                     65 Chulia Street
  463.                     OCBC Centre
  464.                     Singapore 049513
  465.                     Singapore
  466.                     SWIFT / BIC:
  467.                     OCBCSGSG
  468.                     Online payment link on request
  469.                 {% endif %}
  470.             </div>
  471.         </div>
  472.         <div class="pay-item">
  473.             <div class="pay-item__title">Auto-Renewal</div>
  474.             <div class="pay-item__body">
  475.                 Renews automatically each {{ quote.billingCycle }} cycle. You will be notified before renewal. Cancel anytime before the next billing date.
  476.             </div>
  477.         </div>
  478.         <div class="pay-item">
  479.             <div class="pay-item__title">Late Payments</div>
  480.             <div class="pay-item__body">
  481.                 A 7-day grace period applies to overdue invoices. Access may be suspended after the grace period pending settlement.
  482.             </div>
  483.         </div>
  484.     </div>
  486.     {# ── SUPPORT & SLA ── #}
  487.     <div class="section-title">Support &amp; Service Level</div>
  488.     <div class="sla-row">
  489.         <div class="sla-item">
  490.             <div class="sla-item__title">Email Support</div>
  491.             <div class="sla-item__body">Response within 1 business day · contact@ourhoneybee.eu</div>
  492.         </div>
  493.         <div class="sla-item">
  494.             <div class="sla-item__title">Uptime SLA</div>
  495.             <div class="sla-item__body">99.5% monthly uptime · Maintenance notified in advance</div>
  496.         </div>
  497.         <div class="sla-item">
  498.             <div class="sla-item__title">Platform Updates</div>
  499.             <div class="sla-item__body">All updates included · No additional upgrade fees</div>
  500.         </div>
  501.     </div>
  503.     {# ── NOTES ── #}
  504.     {% if quote.adminNotes %}
  505.     <div class="section-title" style="margin-top:18px;">Notes from Your Account Manager</div>
  506.     <div class="notes-box">{{ quote.adminNotes }}</div>
  507.     {% endif %}
  509.     {# ── KEY TERMS ── #}
  510.     <div class="section-title" style="margin-top:18px;">Summary of Key Terms</div>
  511.     <div class="terms-callout">
  512.         <div class="terms-callout__title">Before You Accept</div>
  513.         <div class="terms-callout__body">
  514.             This subscription renews automatically each <strong>{{ quote.billingCycle }}</strong> billing cycle until canceled.
  515.             By accepting this quote, you agree to the HoneyBee ERP
  516.             <a href="https://ourhoneybee.eu/terms">Terms of Service</a>,
  517.             <a href="https://ourhoneybee.eu/privacy">Privacy Policy</a>, and
  518.             <a href="https://ourhoneybee.eu/subscription">Subscription Agreement</a>.
  519.             You may cancel at any time before the next renewal date — see our
  520.             <a href="https://ourhoneybee.eu/subscription#cancellation">Cancellation Policy</a>.
  521.             Full legal terms at <strong>ourhoneybee.eu/legal</strong>.
  522.         </div>
  523.     </div>
  525.     {# ── FOOTER ── #}
  526.     <div class="doc-footer">
  527.         <div>
  528.             <div><strong>HoneyBee ERP</strong> · contact@ourhoneybee.eu · ourhoneybee.eu</div>
  529.             <div class="footer-links">
  530.                 <a href="https://ourhoneybee.eu/terms">Terms</a>
  531.                 <a href="https://ourhoneybee.eu/privacy">Privacy</a>
  532.                 <a href="https://ourhoneybee.eu/subscription">Subscription Agreement</a>
  533.                 <a href="https://ourhoneybee.eu/legal">Legal</a>
  534.             </div>
  535.         </div>
  536.         <div style="text-align:right;">
  537.             <div>Quote <strong>{{ quote.quoteToken|slice(0,12)|upper }}</strong></div>
  538.             <div>Generated {{ "now"|date('d M Y') }}</div>
  539.         </div>
  540.     </div>
  542. </div>
  543. </body>
  544. </html>