templates/caisse/point_vente/index.html.twig line 1

Open in your IDE?
  1. {% extends 'basecaisse.html.twig' %}
  3. {% block title %}Point de Vente{% endblock %}
  5. {% block stylesheets %}{% endblock %}
  7. {% block body %}
  8. <style>
  9. :root {
  10.     --pos-primary: #1a56db;
  11.     --pos-primary-dark: #1341b0;
  12.     --pos-success: #059669;
  13.     --pos-success-light: #d1fae5;
  14.     --pos-danger: #dc2626;
  15.     --pos-warning: #d97706;
  16.     --pos-warning-light: #fffbeb;
  17.     --pos-warning-border: #fcd34d;
  18.     --pos-gray-50: #f8fafc;
  19.     --pos-gray-100: #f1f5f9;
  20.     --pos-gray-200: #e2e8f0;
  21.     --pos-gray-400: #94a3b8;
  22.     --pos-gray-600: #475569;
  23.     --pos-gray-800: #1e293b;
  24.     --pos-radius: 10px;
  25.     --pos-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  26.     --pos-shadow-md: 0 4px 12px rgba(0,0,0,.1);
  27.     --pos-header-grad: linear-gradient(120deg, #0b1230 0%, #101d4a 30%, #142a70 55%, #1a3fae 80%, #1a56db 100%);
  28.     --pos-header-border: rgba(96,165,250,.45);
  29.     --pos-header-h: 68px;
  30. }
  32. /* ===================== LAYOUT ===================== */
  33. .pos-wrapper {
  34.     display: grid;
  35.     grid-template-columns: 1fr clamp(420px, 33vw, 560px);
  36.     grid-template-rows: auto 1fr;
  37.     height: 100vh;
  38.     overflow: hidden;
  39.     background: var(--pos-gray-100);
  40.     gap: 0;
  41. }
  43. .pos-header {
  44.     grid-column: 1 / -1;
  45.     background: var(--pos-header-grad);
  46.     color: #fff;
  47.     display: flex;
  48.     align-items: center;
  49.     justify-content: space-between;
  50.     padding: 0 22px;
  51.     height: var(--pos-header-h);
  52.     border-bottom: 2px solid var(--pos-header-border);
  53.     box-shadow: 0 6px 18px rgba(2,6,23,.35);
  54.     z-index: 10;
  55.     flex-wrap: nowrap;
  56.     gap: 10px;
  57. }
  59. .pos-products {
  60.     overflow-y: auto;
  61.     display: flex;
  62.     flex-direction: column;
  63.     background: var(--pos-gray-100);
  64.     min-width: 0;
  65. }
  67. .pos-cart {
  68.     background: #fff;
  69.     border-left: 1px solid var(--pos-gray-200);
  70.     display: flex;
  71.     flex-direction: column;
  72.     overflow: hidden;
  73.     min-width: 0;
  74. }
  76. .cart-close-btn { display: none; }
  78. /* Bouton flottant panier (mobile uniquement) */
  79. .cart-fab {
  80.     display: none;
  81.     position: fixed;
  82.     right: 16px;
  83.     bottom: 16px;
  84.     z-index: 900;
  85.     background: var(--pos-success);
  86.     color: #fff;
  87.     border: none;
  88.     border-radius: 999px;
  89.     padding: 12px 18px;
  90.     box-shadow: 0 6px 18px rgba(0,0,0,.25);
  91.     font-size: 14px;
  92.     font-weight: 700;
  93.     align-items: center;
  94.     gap: 8px;
  95.     cursor: pointer;
  96. }
  98. .cart-fab .fab-count {
  99.     background: rgba(255,255,255,.25);
  100.     border-radius: 999px;
  101.     padding: 1px 8px;
  102.     font-size: 12px;
  103. }
  105. .cart-backdrop {
  106.     display: none;
  107.     position: fixed;
  108.     inset: 0;
  109.     background: rgba(15,23,42,.45);
  110.     z-index: 899;
  111. }
  113. /* ===================== HEADER ===================== */
  114. .header-client {
  115.     display: flex;
  116.     align-items: center;
  117.     gap: 10px;
  118. }
  120. .client-badge {
  121.     display: flex;
  122.     align-items: center;
  123.     gap: 10px;
  124.     min-height: 44px;
  125.     background: rgba(255,255,255,.12);
  126.     border: 1px solid rgba(255,255,255,.22);
  127.     border-radius: 26px;
  128.     padding: 6px 18px 6px 6px;
  129.     cursor: pointer;
  130.     transition: background .2s;
  131. }
  133. .client-badge:hover { background: rgba(255,255,255,.22); }
  135. .client-avatar {
  136.     width: 36px;
  137.     height: 36px;
  138.     border-radius: 50%;
  139.     background: rgba(255,255,255,.28);
  140.     display: flex;
  141.     align-items: center;
  142.     justify-content: center;
  143.     font-size: 14px;
  144.     font-weight: 700;
  145.     color: #fff;
  146.     flex-shrink: 0;
  147. }
  149. .client-name {
  150.     font-size: 15px;
  151.     font-weight: 700;
  152.     color: #fff;
  153.     background: none;
  154.     border: none;
  155.     cursor: pointer;
  156.     padding: 0;
  157. }
  159. .header-right {
  160.     display: flex;
  161.     align-items: center;
  162.     gap: 10px;
  163. }
  165. .total-display {
  166.     background: rgba(255,255,255,.14);
  167.     border: 1px solid rgba(255,255,255,.24);
  168.     border-radius: 12px;
  169.     padding: 9px 20px;
  170.     font-size: 21px;
  171.     font-weight: 800;
  172.     color: #fff;
  173.     letter-spacing: .3px;
  174.     min-height: 44px;
  175.     display: flex;
  176.     align-items: center;
  177. }
  179. /* ===================== USER SESSION / SHIFT CHANGE ===================== */
  180. .user-session-chip {
  181.     display: flex;
  182.     align-items: center;
  183.     gap: 10px;
  184.     min-height: 44px;
  185.     background: rgba(255,255,255,.12);
  186.     border: 1px solid rgba(255,255,255,.22);
  187.     border-radius: 26px;
  188.     padding: 5px 5px 5px 14px;
  189. }
  191. .user-session-avatar {
  192.     width: 34px;
  193.     height: 34px;
  194.     border-radius: 50%;
  195.     background: rgba(255,255,255,.28);
  196.     display: flex;
  197.     align-items: center;
  198.     justify-content: center;
  199.     font-size: 13px;
  200.     font-weight: 700;
  201.     color: #fff;
  202.     flex-shrink: 0;
  203. }
  205. .user-session-name {
  206.     font-size: 14px;
  207.     font-weight: 700;
  208.     color: #fff;
  209.     max-width: 150px;
  210.     overflow: hidden;
  211.     text-overflow: ellipsis;
  212.     white-space: nowrap;
  213. }
  215. .user-session-logout {
  216.     display: flex;
  217.     align-items: center;
  218.     justify-content: center;
  219.     width: 38px;
  220.     height: 38px;
  221.     border-radius: 50%;
  222.     background: rgba(220,38,38,.9);
  223.     color: #fff;
  224.     font-size: 14px;
  225.     text-decoration: none;
  226.     transition: background .15s;
  227.     flex-shrink: 0;
  228. }
  229. .user-session-logout:hover { background: rgba(185,28,28,.95); color: #fff; }
  231. /* ===================== BRAND / LOGO ===================== */
  232. .pos-brand {
  233.     display: flex;
  234.     align-items: center;
  235.     padding-left: 16px;
  236.     margin-left: 4px;
  237.     border-left: 1px solid rgba(255,255,255,.2);
  238.     user-select: none;
  239.     flex-shrink: 0;
  240. }
  242. .pos-brand-text {
  243.     display: inline-flex;
  244.     align-items: baseline;
  245.     font-size: 19px;
  246.     font-weight: 800;
  247.     letter-spacing: -.3px;
  248.     white-space: nowrap;
  249.     background: linear-gradient(100deg, #ffffff 0%, #ffffff 60%, #bfdbfe 100%);
  250.     -webkit-background-clip: text;
  251.     background-clip: text;
  252.     -webkit-text-fill-color: transparent;
  253.     text-shadow: 0 1px 12px rgba(96,165,250,.35);
  254. }
  256. .pos-brand-tld {
  257.     font-weight: 600;
  258.     color: #7dabfa;
  259.     -webkit-text-fill-color: #7dabfa;
  260. }
  262. @media (max-width: 640px) {
  263.     .user-session-name { display: none; }
  264.     .user-session-chip { padding: 5px; gap: 6px; }
  265.     .pos-brand { padding-left: 10px; }
  266.     .pos-brand-text { font-size: 16px; }
  267. }
  269. @media (max-width: 420px) {
  270.     .pos-brand { display: none; }
  271. }
  273. .btn-dashboard {
  274.     background: rgba(255,255,255,.14);
  275.     border: 1px solid rgba(255,255,255,.24);
  276.     border-radius: 12px;
  277.     padding: 10px 18px;
  278.     min-height: 44px;
  279.     font-size: 14px;
  280.     font-weight: 600;
  281.     color: #fff;
  282.     text-decoration: none;
  283.     transition: background .15s, transform .1s;
  284.     display: flex;
  285.     align-items: center;
  286.     gap: 9px;
  287. }
  289. .btn-dashboard:hover {
  290.     background: rgba(255,255,255,.26);
  291.     color: #fff;
  292.     text-decoration: none;
  293. }
  295. .btn-dashboard:active { transform: scale(.97); }
  297. /* ===================== CATEGORIES ===================== */
  298. .category-bar {
  299.     background: #fff;
  300.     border-bottom: 1px solid var(--pos-gray-200);
  301.     padding: 10px 16px;
  302.     display: flex;
  303.     gap: 8px;
  304.     overflow-x: auto;
  305.     flex-shrink: 0;
  306. }
  308. .category-bar::-webkit-scrollbar { height: 3px; }
  309. .category-bar::-webkit-scrollbar-thumb { background: var(--pos-gray-200); border-radius: 3px; }
  311. .cat-pill {
  312.     display: inline-flex;
  313.     align-items: center;
  314.     min-height: 44px;
  315.     padding: 10px 20px;
  316.     border-radius: 22px;
  317.     border: 1px solid var(--pos-gray-200);
  318.     background: var(--pos-gray-50);
  319.     font-size: 14.5px;
  320.     font-weight: 600;
  321.     color: var(--pos-gray-600);
  322.     text-decoration: none;
  323.     white-space: nowrap;
  324.     transition: all .15s;
  325.     flex-shrink: 0;
  326. }
  327. .cat-pill:active { transform: scale(.96); }
  329. .cat-pill:hover {
  330.     background: var(--pos-gray-100);
  331.     border-color: var(--pos-gray-400);
  332.     color: var(--pos-gray-800);
  333.     text-decoration: none;
  334. }
  336. .cat-pill.active {
  337.     background: var(--pos-primary);
  338.     border-color: var(--pos-primary);
  339.     color: #fff;
  340. }
  342. /* ===================== SEARCH ===================== */
  343. .search-bar {
  344.     padding: 10px 16px;
  345.     background: #fff;
  346.     border-bottom: 1px solid var(--pos-gray-200);
  347.     flex-shrink: 0;
  348. }
  350. .search-inner {
  351.     position: relative;
  352. }
  354. .search-inner i {
  355.     position: absolute;
  356.     left: 12px;
  357.     top: 50%;
  358.     transform: translateY(-50%);
  359.     color: var(--pos-gray-400);
  360.     font-size: 13px;
  361. }
  363. .search-input {
  364.     width: 100%;
  365.     padding: 8px 12px 8px 36px;
  366.     border: 1px solid var(--pos-gray-200);
  367.     border-radius: 8px;
  368.     font-size: 13px;
  369.     background: var(--pos-gray-50);
  370.     color: var(--pos-gray-800);
  371.     outline: none;
  372.     transition: border-color .18s, box-shadow .18s;
  373. }
  375. .search-input:focus {
  376.     border-color: var(--pos-primary);
  377.     box-shadow: 0 0 0 3px rgba(26,86,219,.1);
  378.     background: #fff;
  379. }
  381. /* ===================== PRODUCT GRID ===================== */
  382. .products-scroll {
  383.     flex: 1;
  384.     overflow-y: auto;
  385.     padding: 16px;
  386. }
  388. .product-grid {
  389.     display: grid;
  390.     grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  391.     gap: 12px;
  392. }
  394. .product-card {
  395.     background: #fff;
  396.     border-radius: var(--pos-radius);
  397.     overflow: hidden;
  398.     cursor: pointer;
  399.     border: 1px solid var(--pos-gray-200);
  400.     transition: transform .18s, box-shadow .18s, border-color .18s;
  401.     position: relative;
  402. }
  404. .product-card:hover {
  405.     transform: translateY(-3px);
  406.     box-shadow: var(--pos-shadow-md);
  407.     border-color: var(--pos-primary);
  408. }
  410. .product-card:active { transform: scale(.97); }
  412. .product-img {
  413.     height: 98px;
  414.     background-size: cover;
  415.     background-position: center;
  416.     background-color: var(--pos-gray-100);
  417.     position: relative;
  418. }
  420. .product-body {
  421.     padding: 10px;
  422. }
  424. .product-name {
  425.     font-size: 12px;
  426.     font-weight: 600;
  427.     color: var(--pos-gray-800);
  428.     line-height: 1.35;
  429.     margin-bottom: 6px;
  430.     display: -webkit-box;
  431.     -webkit-line-clamp: 2;
  432.     -webkit-box-orient: vertical;
  433.     overflow: hidden;
  434. }
  436. .product-price {
  437.     font-size: 14px;
  438.     font-weight: 700;
  439.     color: var(--pos-primary);
  440. }
  442. .product-price-buy {
  443.     font-size: 10px;
  444.     color: var(--pos-gray-400);
  445.     margin-top: 2px;
  446. }
  448. .discount-badge {
  449.     position: absolute;
  450.     top: 8px;
  451.     right: 8px;
  452.     background: #ef4444;
  453.     color: #fff;
  454.     font-size: 10px;
  455.     font-weight: 700;
  456.     padding: 2px 6px;
  457.     border-radius: 10px;
  458. }
  460. .no-products {
  461.     grid-column: 1 / -1;
  462.     text-align: center;
  463.     padding: 60px 20px;
  464.     color: var(--pos-gray-400);
  465.     font-size: 14px;
  466. }
  468. /* ===================== CART ===================== */
  469. .cart-header {
  470.     padding: 14px 16px;
  471.     background: var(--pos-primary);
  472.     color: #fff;
  473.     font-size: 14px;
  474.     font-weight: 600;
  475.     display: flex;
  476.     align-items: center;
  477.     gap: 8px;
  478.     flex-shrink: 0;
  479. }
  481. .cart-body {
  482.     flex: 1;
  483.     min-height: 120px;
  484.     overflow-y: auto;
  485.     padding: 10px;
  486.     background: var(--pos-gray-50);
  487. }
  489. .cart-empty {
  490.     display: flex;
  491.     flex-direction: column;
  492.     align-items: center;
  493.     justify-content: center;
  494.     height: 100%;
  495.     color: var(--pos-gray-400);
  496.     gap: 10px;
  497.     font-size: 13px;
  498. }
  500. .cart-item {
  501.     display: block; /* basecaisse.html.twig impose display:flex (ancien panier) */
  502.     background: #fff;
  503.     border-radius: 8px;
  504.     padding: 10px 12px;
  505.     margin-bottom: 8px;
  506.     border: 1px solid var(--pos-gray-200);
  507.     border-left: 3px solid var(--pos-primary);
  508.     transition: border-color .18s;
  509. }
  511. .cart-item.has-discount { border-left-color: var(--pos-warning); }
  513. .cart-item-top {
  514.     display: flex;
  515.     justify-content: space-between;
  516.     align-items: flex-start;
  517.     gap: 8px;
  518. }
  520. .cart-item-name {
  521.     font-size: 12px;
  522.     font-weight: 600;
  523.     color: var(--pos-gray-800);
  524.     line-height: 1.3;
  525.     flex: 1;
  526.     min-width: 0;
  527. }
  529. .cart-item-total {
  530.     font-size: 13px;
  531.     font-weight: 700;
  532.     color: var(--pos-primary);
  533.     white-space: nowrap;
  534.     flex-shrink: 0;
  535. }
  537. .cart-item-meta {
  538.     font-size: 11px;
  539.     color: var(--pos-gray-400);
  540.     margin: 3px 0 8px;
  541. }
  543. .cart-item-controls {
  544.     display: flex;
  545.     align-items: center;
  546.     gap: 6px;
  547. }
  549. .qty-btn {
  550.     width: 38px;
  551.     height: 38px;
  552.     border-radius: 9px;
  553.     border: 1px solid var(--pos-gray-200);
  554.     background: var(--pos-gray-50);
  555.     color: var(--pos-gray-600);
  556.     font-size: 18px;
  557.     font-weight: 700;
  558.     cursor: pointer;
  559.     display: flex;
  560.     align-items: center;
  561.     justify-content: center;
  562.     transition: all .15s;
  563.     padding: 0;
  564. }
  566. .qty-btn:hover { background: var(--pos-gray-200); }
  567. .qty-btn:active { transform: scale(.94); }
  569. .qty-display {
  570.     font-size: 16px;
  571.     font-weight: 700;
  572.     color: var(--pos-gray-800);
  573.     min-width: 28px;
  574.     text-align: center;
  575. }
  577. .btn-remove {
  578.     margin-left: auto;
  579.     width: 38px;
  580.     height: 38px;
  581.     border-radius: 9px;
  582.     border: 1px solid #fecaca;
  583.     background: #fef2f2;
  584.     color: var(--pos-danger);
  585.     cursor: pointer;
  586.     display: flex;
  587.     align-items: center;
  588.     justify-content: center;
  589.     font-size: 14px;
  590.     transition: all .15s;
  591.     padding: 0;
  592. }
  594. .btn-remove:hover { background: #fee2e2; }
  595. .btn-remove:active { transform: scale(.94); }
  597. .discount-row {
  598.     display: flex;
  599.     align-items: center;
  600.     gap: 6px;
  601.     margin-top: 8px;
  602. }
  604. .discount-row i.fa-tag {
  605.     flex-shrink: 0;
  606. }
  608. .discount-input-small {
  609.     flex: 1 1 44px;
  610.     min-width: 36px;
  611.     width: auto;
  612.     height: 36px;
  613.     border: 1px solid var(--pos-gray-200);
  614.     border-radius: 8px;
  615.     font-size: 13px;
  616.     text-align: right;
  617.     padding: 0 8px;
  618.     color: var(--pos-gray-800);
  619.     background: var(--pos-gray-50);
  620.     outline: none;
  621. }
  623. .discount-input-small:focus {
  624.     border-color: var(--pos-warning);
  625.     background: #fff;
  626. }
  628. .discount-submit-btn {
  629.     flex-shrink: 0;
  630.     height: 36px;
  631.     padding: 0 14px;
  632.     border: 1px solid var(--pos-warning);
  633.     background: var(--pos-warning-light);
  634.     color: var(--pos-warning);
  635.     border-radius: 8px;
  636.     font-size: 12.5px;
  637.     font-weight: 600;
  638.     cursor: pointer;
  639.     white-space: nowrap;
  640.     transition: all .15s;
  641. }
  643. .discount-submit-btn:hover { background: #fef3c7; }
  645. /* ===================== CART SUMMARY ===================== */
  646. .cart-footer {
  647.     flex-shrink: 0;
  648.     border-top: 1px solid var(--pos-gray-200);
  649.     background: #fff;
  650.     /* Les articles gardent toujours de la place, même avec les boutons restaurant */
  651.     max-height: 58%;
  652.     overflow-y: auto;
  653. }
  655. .cart-summary {
  656.     padding: 12px 16px 0;
  657. }
  659. .summary-row {
  660.     display: flex;
  661.     justify-content: space-between;
  662.     align-items: center;
  663.     font-size: 12px;
  664.     color: var(--pos-gray-600);
  665.     padding: 3px 0;
  666. }
  668. .summary-row.ttc-row {
  669.     font-size: 15px;
  670.     font-weight: 700;
  671.     color: var(--pos-gray-800);
  672.     background: #eff6ff;
  673.     border-radius: 8px;
  674.     padding: 8px 10px;
  675.     margin: 6px 0 0;
  676. }
  678. /* Remise globale */
  679. .global-discount-block {
  680.     margin: 10px 0 4px;
  681.     background: #fffbeb;
  682.     border: 1.5px solid #f59e0b;
  683.     border-radius: 10px;
  684.     padding: 10px 14px;
  685.     transition: box-shadow .2s;
  686. }
  687. .global-discount-block:focus-within {
  688.     box-shadow: 0 0 0 3px rgba(245,158,11,.15);
  689. }
  691. .global-discount-label {
  692.     font-size: 11px;
  693.     font-weight: 700;
  694.     color: #92400e;
  695.     margin-bottom: 8px;
  696.     display: flex;
  697.     align-items: center;
  698.     gap: 5px;
  699.     text-transform: uppercase;
  700.     letter-spacing: .4px;
  701. }
  703. .global-discount-inputs {
  704.     display: flex;
  705.     align-items: center;
  706.     gap: 8px;
  707. }
  709. .global-discount-input {
  710.     flex: 1;
  711.     min-width: 0;
  712.     height: 36px;
  713.     border: 1.5px solid #f59e0b;
  714.     border-radius: 8px;
  715.     font-size: 15px;
  716.     font-weight: 700;
  717.     text-align: right;
  718.     padding: 0 10px;
  719.     background: #fff;
  720.     color: #1e293b;
  721.     outline: none;
  722.     transition: border-color .18s, box-shadow .18s;
  723. }
  724. .global-discount-input:focus {
  725.     border-color: #d97706;
  726.     box-shadow: 0 0 0 2px rgba(217,119,6,.2);
  727. }
  728. .global-discount-input::placeholder { color: #d1d5db; font-weight: 400; }
  730. .global-discount-unit {
  731.     font-size: 13px;
  732.     color: #92400e;
  733.     font-weight: 700;
  734.     white-space: nowrap;
  735. }
  737. .global-discount-amount {
  738.     font-size: 12px;
  739.     font-weight: 700;
  740.     color: #dc2626;
  741.     margin-left: auto;
  742.     white-space: nowrap;
  743. }
  745. /* Total net */
  746. .total-net-row {
  747.     display: flex;
  748.     justify-content: space-between;
  749.     align-items: center;
  750.     background: #ecfdf5;
  751.     border: 1.5px solid #10b981;
  752.     border-radius: 10px;
  753.     padding: 10px 14px;
  754.     margin: 6px 0 0;
  755.     animation: fadeSlideIn .2s ease;
  756. }
  757. @keyframes fadeSlideIn {
  758.     from { opacity: 0; transform: translateY(-4px); }
  759.     to   { opacity: 1; transform: translateY(0); }
  760. }
  762. .total-net-label {
  763.     font-size: 12px;
  764.     font-weight: 700;
  765.     color: #065f46;
  766.     text-transform: uppercase;
  767.     letter-spacing: .4px;
  768. }
  770. .total-net-value {
  771.     font-size: 20px;
  772.     font-weight: 800;
  773.     color: #065f46;
  774. }
  776. /* ===================== ACTION BUTTONS ===================== */
  777. .cart-actions {
  778.     padding: 12px 16px 16px;
  779. }
  781. .btn-primary-action {
  782.     width: 100%;
  783.     min-height: 54px;
  784.     padding: 15px;
  785.     background: var(--pos-success);
  786.     color: #fff;
  787.     border: none;
  788.     border-radius: var(--pos-radius);
  789.     font-size: 16.5px;
  790.     font-weight: 700;
  791.     cursor: pointer;
  792.     display: flex;
  793.     align-items: center;
  794.     justify-content: center;
  795.     gap: 9px;
  796.     transition: background .18s, transform .12s;
  797.     margin-bottom: 10px;
  798. }
  800. .btn-primary-action:hover { background: #047857; }
  801. .btn-primary-action:active { transform: scale(.98); }
  803. .action-row {
  804.     display: grid;
  805.     grid-template-columns: 1fr 1fr;
  806.     gap: 8px;
  807.     margin-bottom: 8px;
  808. }
  810. .btn-action {
  811.     min-height: 48px;
  812.     padding: 12px 8px;
  813.     border: 1px solid var(--pos-gray-200);
  814.     border-radius: 10px;
  815.     font-size: 13.5px;
  816.     font-weight: 600;
  817.     cursor: pointer;
  818.     display: flex;
  819.     align-items: center;
  820.     justify-content: center;
  821.     gap: 7px;
  822.     transition: all .15s;
  823.     background: #fff;
  824.     color: var(--pos-gray-600);
  825. }
  826. .btn-action:active { transform: scale(.96); }
  828. .btn-action:hover { background: var(--pos-gray-50); border-color: var(--pos-gray-400); }
  830. .btn-action.cash   { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
  831. .btn-action.cash:hover { background: #d1fae5; }
  833. .btn-action.unpaid { border-color: #fcd34d; background: var(--pos-warning-light); color: var(--pos-warning); }
  834. .btn-action.unpaid:hover { background: #fef3c7; }
  836. .btn-action.danger { border-color: #fecaca; background: #fef2f2; color: var(--pos-danger); }
  837. .btn-action.danger:hover { background: #fee2e2; }
  839. .btn-action.client { border-color: #bfdbfe; background: #eff6ff; color: var(--pos-primary); }
  840. .btn-action.client:hover { background: #dbeafe; }
  842. .btn-action.add-prod { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
  843. .btn-action.add-prod:hover { background: #e0e7ff; }
  845. .btn-action.add-cat { border-color: var(--pos-gray-200); background: var(--pos-gray-50); color: var(--pos-gray-600); }
  847. /* ===================== MODALS ===================== */
  848. .pos-modal-overlay {
  849.     display: none;
  850.     position: fixed;
  851.     inset: 0;
  852.     background: rgba(15,23,42,.45);
  853.     z-index: 1000;
  854.     align-items: center;
  855.     justify-content: center;
  856. }
  858. .pos-modal-overlay.open { display: flex !important; }
  860. .pos-modal {
  861.     background: #fff;
  862.     border-radius: 14px;
  863.     width: 100%;
  864.     max-width: 440px;
  865.     max-height: 90vh;
  866.     margin: 20px;
  867.     box-shadow: 0 20px 60px rgba(0,0,0,.2);
  868.     overflow: hidden;
  869.     display: flex;
  870.     flex-direction: column;
  871. }
  873. .pos-modal-header {
  874.     background: var(--pos-primary);
  875.     color: #fff;
  876.     padding: 16px 20px;
  877.     font-size: 16px;
  878.     font-weight: 600;
  879.     display: flex;
  880.     align-items: center;
  881.     justify-content: space-between;
  882.     flex-shrink: 0;
  883. }
  885. .pos-modal-close {
  886.     background: rgba(255,255,255,.15);
  887.     border: none;
  888.     color: #fff;
  889.     width: 40px;
  890.     height: 40px;
  891.     border-radius: 10px;
  892.     cursor: pointer;
  893.     font-size: 20px;
  894.     display: flex;
  895.     align-items: center;
  896.     justify-content: center;
  897.     flex-shrink: 0;
  898. }
  900. .pos-modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; }
  902. /* Cash modal */
  903. .cash-amount-box {
  904.     background: var(--pos-gray-50);
  905.     border: 1px solid var(--pos-gray-200);
  906.     border-radius: 10px;
  907.     padding: 14px 16px;
  908.     margin-bottom: 12px;
  909.     text-align: center;
  910. }
  912. .cash-amount-box.highlight {
  913.     background: #fffbeb;
  914.     border-color: var(--pos-warning-border);
  915. }
  917. .cash-label {
  918.     font-size: 12px;
  919.     color: var(--pos-gray-400);
  920.     font-weight: 500;
  921.     display: block;
  922.     margin-bottom: 6px;
  923. }
  925. .cash-value {
  926.     font-size: 26px;
  927.     font-weight: 800;
  928.     color: var(--pos-gray-800);
  929. }
  931. .cash-input {
  932.     width: 100%;
  933.     border: 2px solid var(--pos-gray-200);
  934.     border-radius: 8px;
  935.     padding: 10px;
  936.     font-size: 26px;
  937.     font-weight: 800;
  938.     text-align: center;
  939.     color: var(--pos-gray-800);
  940.     outline: none;
  941.     transition: border-color .18s;
  942.     background: #fff;
  943. }
  945. .cash-input:focus { border-color: var(--pos-primary); }
  947. .exact-amount-btn {
  948.     width: 100%;
  949.     min-height: 48px;
  950.     padding: 12px;
  951.     margin-top: 10px;
  952.     background: var(--pos-success-light);
  953.     border: 1.5px solid var(--pos-success);
  954.     border-radius: 10px;
  955.     font-size: 15px;
  956.     font-weight: 700;
  957.     color: var(--pos-success);
  958.     cursor: pointer;
  959.     display: flex;
  960.     align-items: center;
  961.     justify-content: center;
  962.     gap: 9px;
  963.     transition: all .15s;
  964. }
  965. .exact-amount-btn:hover { background: #a7f3d0; }
  966. .exact-amount-btn:active { transform: scale(.97); }
  968. .quick-btns {
  969.     display: flex;
  970.     flex-wrap: wrap;
  971.     gap: 8px;
  972.     justify-content: center;
  973.     margin: 14px 0;
  974. }
  976. .quick-btn {
  977.     min-height: 44px;
  978.     min-width: 56px;
  979.     padding: 10px 16px;
  980.     background: #eff6ff;
  981.     border: 1px solid #bfdbfe;
  982.     border-radius: 10px;
  983.     font-size: 15px;
  984.     font-weight: 700;
  985.     color: var(--pos-primary);
  986.     cursor: pointer;
  987.     transition: all .15s;
  988. }
  990. .quick-btn:hover { background: #dbeafe; }
  991. .quick-btn:active { transform: scale(.95); }
  993. .modal-action-row {
  994.     display: flex;
  995.     gap: 10px;
  996.     margin-top: 16px;
  997. }
  999. .btn-modal-cancel {
  1000.     flex: 1;
  1001.     min-height: 48px;
  1002.     padding: 13px;
  1003.     background: var(--pos-gray-100);
  1004.     border: 1px solid var(--pos-gray-200);
  1005.     border-radius: 10px;
  1006.     font-size: 14.5px;
  1007.     font-weight: 600;
  1008.     color: var(--pos-gray-600);
  1009.     cursor: pointer;
  1010.     transition: all .15s;
  1011. }
  1013. .btn-modal-cancel:hover { background: var(--pos-gray-200); }
  1015. .btn-modal-confirm {
  1016.     flex: 2;
  1017.     min-height: 48px;
  1018.     padding: 13px;
  1019.     background: var(--pos-success);
  1020.     border: none;
  1021.     border-radius: 10px;
  1022.     font-size: 15.5px;
  1023.     font-weight: 700;
  1024.     color: #fff;
  1025.     cursor: pointer;
  1026.     transition: background .15s;
  1027. }
  1029. .btn-modal-confirm:hover { background: #047857; }
  1031. /* Client modal */
  1032. .client-list {
  1033.     list-style: none;
  1034.     padding: 0;
  1035.     margin: 0;
  1036.     max-height: 55vh;
  1037.     overflow-y: auto;
  1038. }
  1040. .client-item {
  1041.     min-height: 48px;
  1042.     padding: 14px 16px;
  1043.     border-bottom: 1px solid var(--pos-gray-100);
  1044.     cursor: pointer;
  1045.     font-size: 14.5px;
  1046.     color: var(--pos-gray-800);
  1047.     display: flex;
  1048.     justify-content: space-between;
  1049.     align-items: center;
  1050.     transition: background .15s;
  1051. }
  1053. .client-item:hover { background: var(--pos-gray-50); }
  1054. .client-item::after { content: "›"; color: var(--pos-gray-400); font-size: 18px; }
  1056. /* Scrollbars */
  1057. .pos-products::-webkit-scrollbar,
  1058. .cart-body::-webkit-scrollbar,
  1059. .products-scroll::-webkit-scrollbar { width: 5px; }
  1060. .pos-products::-webkit-scrollbar-thumb,
  1061. .cart-body::-webkit-scrollbar-thumb,
  1062. .products-scroll::-webkit-scrollbar-thumb { background: var(--pos-gray-200); border-radius: 3px; }
  1064. /* ===================== RESPONSIVE ===================== */
  1066. /* Grands ecrans : un peu plus d'air pour le panier */
  1067. @media (min-width: 1400px) {
  1068.     .pos-wrapper { grid-template-columns: 1fr clamp(460px, 32vw, 600px); }
  1069. }
  1071. /* Ecrans moyens / petits laptops */
  1072. @media (max-width: 1199px) {
  1073.     .pos-wrapper { grid-template-columns: 1fr clamp(380px, 36vw, 460px); }
  1074.     .product-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  1075. }
  1077. /* Tablettes en mode paysage */
  1078. @media (max-width: 991px) {
  1079.     .pos-wrapper { grid-template-columns: 1fr clamp(320px, 40vw, 380px); }
  1080.     .product-grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
  1081. }
  1083. /* Tablettes portrait & mobiles : panier en tiroir plein ecran */
  1084. @media (max-width: 767px) {
  1085.     .pos-wrapper { grid-template-columns: 1fr; }
  1086.     .pos-products { grid-column: 1 / -1; }
  1087.     .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  1089.     .pos-cart {
  1090.         position: fixed;
  1091.         top: 0;
  1092.         right: 0;
  1093.         bottom: 0;
  1094.         width: min(88vw, 380px);
  1095.         border-left: none;
  1096.         box-shadow: -8px 0 24px rgba(0,0,0,.2);
  1097.         transform: translateX(100%);
  1098.         transition: transform .25s ease;
  1099.         z-index: 950;
  1100.     }
  1101.     .pos-cart.mobile-open { transform: translateX(0); }
  1103.     .cart-close-btn {
  1104.         display: flex;
  1105.         align-items: center;
  1106.         justify-content: center;
  1107.         width: 40px;
  1108.         height: 40px;
  1109.         margin-left: auto;
  1110.         background: rgba(255,255,255,.15);
  1111.         border: none;
  1112.         border-radius: 10px;
  1113.         color: #fff;
  1114.         font-size: 16px;
  1115.         cursor: pointer;
  1116.         flex-shrink: 0;
  1117.     }
  1119.     .cart-fab { display: flex; }
  1120.     .cart-backdrop.open { display: block; }
  1122.     /* Header : on laisse les boutons passer à la ligne plutôt que de les
  1123.        couper hors écran — aucun élément de navigation ne doit devenir
  1124.        inaccessible faute de place. */
  1125.     .pos-header {
  1126.         --pos-header-h: 60px;
  1127.         flex-wrap: wrap;
  1128.         height: auto;
  1129.         min-height: var(--pos-header-h);
  1130.         padding: 10px 14px;
  1131.         row-gap: 8px;
  1132.     }
  1133.     .header-client { flex: 0 1 auto; }
  1134.     .header-right {
  1135.         flex: 1 1 100%;
  1136.         flex-wrap: wrap;
  1137.         justify-content: flex-end;
  1138.         row-gap: 8px;
  1139.     }
  1140.     .btn-dashboard .dashboard-label { display: none; }
  1141.     .btn-dashboard { padding: 10px; min-width: 44px; justify-content: center; }
  1142.     .total-display { font-size: 16px; padding: 7px 14px; min-height: 40px; }
  1144.     /* Grille produits : cartes plus petites pour en montrer davantage,
  1145.        et marge basse suffisante pour ne jamais passer sous le bouton
  1146.        panier flottant. */
  1147.     .products-scroll { padding: 12px; padding-bottom: 104px; }
  1148.     .product-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  1149.     .product-img { height: 76px; }
  1150.     .product-body { padding: 8px; }
  1151.     .product-name { font-size: 11px; margin-bottom: 4px; }
  1152.     .product-price { font-size: 12.5px; }
  1153.     .product-price-buy { font-size: 9px; }
  1155.     /* Barre de catégories : navigation tactile fluide, aucune pastille
  1156.        tronquée en bord d'écran. */
  1157.     .category-bar { padding: 8px 12px; gap: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  1158.     .category-bar .cat-pill { scroll-snap-align: start; }
  1159.     .category-bar .cat-pill:last-child { margin-right: 4px; }
  1160. }
  1162. @media (max-width: 420px) {
  1163.     .product-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  1164.     .product-img { height: 64px; }
  1165.     .client-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1166. }
  1167. /* ===== Contexte de commande (attente, tables, restaurant) ===== */
  1168. .order-context { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--pos-gray-50); border-bottom:1px solid var(--pos-gray-200); }
  1169. .order-context-links { display:flex; gap:6px; }
  1170. .ctx-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; border:1px solid var(--pos-gray-200); background:#fff; color:var(--pos-gray-800); font-size:12.5px; font-weight:600; text-decoration:none; }
  1171. .ctx-btn:hover { border-color:var(--pos-primary); color:var(--pos-primary); }
  1172. .ctx-btn.ctx-tables { border-color:#bfdbfe; background:#eff6ff; color:var(--pos-primary); }
  1173. .ctx-count { background:var(--pos-warning); color:#fff; border-radius:10px; padding:0 7px; font-size:11px; }
  1174. .order-context-form { display:flex; gap:6px; align-items:center; margin:0; }
  1175. .ctx-select { border:1px solid var(--pos-gray-200); border-radius:8px; padding:5px 8px; font-size:12.5px; background:#fff; }
  1176. .ctx-info { font-size:12.5px; color:var(--pos-gray-600); font-weight:600; }
  1177. .ctx-couverts { display:inline-flex; align-items:center; gap:4px; margin:0; font-size:12px; color:var(--pos-gray-600); }
  1178. .ctx-couverts input { width:44px; border:1px solid var(--pos-gray-200); border-radius:8px; padding:4px 6px; font-size:12.5px; }
  1179. .line-options { margin-top:6px; }
  1180. .line-options summary { font-size:11.5px; color:var(--pos-gray-600); cursor:pointer; user-select:none; list-style:none; display:inline-flex; align-items:center; gap:4px; }
  1181. .line-options summary::-webkit-details-marker { display:none; }
  1182. .line-options summary::before { content:'▸'; font-size:10px; transition:transform .15s; }
  1183. .line-options[open] summary::before { transform:rotate(90deg); }
  1184. .cart-item-note { font-size:11.5px; color:#7c3aed; margin-top:3px; }
  1185. .kitchen-badge { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:#b45309; background:#fef3c7; border-radius:6px; padding:0 5px; margin-left:4px; }
  1186. .note-input { width:100%; text-align:left; }
  1187. .btn-action.card { border-color:#c7d2fe; background:#eef2ff; color:#3730a3; }
  1188. .btn-action.card:hover { background:#e0e7ff; }
  1189. .btn-action.kitchen { border-color:#fed7aa; background:#fff7ed; color:#c2410c; }
  1190. .btn-action.kitchen.pending { box-shadow:0 0 0 2px #fb923c inset; }
  1191. .btn-action.hold { border-color:#ddd6fe; background:#f5f3ff; color:#6d28d9; }
  1192. .hold-form { display:flex; gap:6px; margin:0 0 8px; }
  1193. .btn-action.kitchen, .btn-action.hold, .order-context + .cart-body ~ .cart-footer .btn-action.client { min-height:42px; padding:9px 8px; }
  1194. .hold-input { flex:1; min-width:0; border:1px solid var(--pos-gray-200); border-radius:8px; padding:6px 8px; font-size:12.5px; }
  1195. .no-cash-right { font-size:12.5px; color:var(--pos-gray-600); background:var(--pos-gray-50); border:1px dashed var(--pos-gray-200); border-radius:8px; padding:8px 10px; margin-bottom:6px; }
  1196. </style>
  1198. {# ========== HIDDEN CLIENT ID ========== #}
  1199. <input type="hidden" id="selectedClientId" value="">
  1201. {% include 'caisse/_flashes.html.twig' %}
  1203. <div class="pos-wrapper">
  1205.     {# ========== HEADER ========== #}
  1206.     <header class="pos-header">
  1207.         <div class="header-client">
  1208.             <div class="client-badge" id="customerBtn">
  1209.                 <div class="client-avatar" id="clientAvatarText">C</div>
  1210.                 <span class="client-name" id="clientNameDisplay">Client Comptant</span>
  1211.             </div>
  1212.         </div>
  1213.         <div class="header-right">
  1214.             {% if sessionCaisse %}
  1215.                 <span class="btn-dashboard" style="background:rgba(255,255,255,.14);cursor:default;" title="Caisse ouverte par {{ sessionCaisse.ouvertParNom }}">
  1216.                     <i class="fas fa-lock-open" style="font-size:15px;"></i>
  1217.                     <span class="dashboard-label">Caisse ouverte depuis {{ sessionCaisse.dateOuverture|date('H:i') }} — fond {{ sessionCaisse.fondOuverture|number_format(3, '.', '') }}</span>
  1218.                 </span>
  1219.                 {% if canCloture %}
  1220.                     <a href="{{ path('caisse_cloture_fermer', {'id': sessionCaisse.id}) }}" class="btn-dashboard" style="background:#dc2626;border-color:rgba(255,255,255,.3);">
  1221.                         <i class="fas fa-lock" style="font-size:15px;"></i>
  1222.                         <span class="dashboard-label">Clôturer la caisse</span>
  1223.                     </a>
  1224.                 {% endif %}
  1225.             {% else %}
  1226.                 <a href="{{ path('caisse_cloture_ouvrir') }}" class="btn-dashboard" style="background:#059669;border-color:rgba(255,255,255,.3);">
  1227.                     <i class="fas fa-unlock" style="font-size:15px;"></i>
  1228.                     <span class="dashboard-label">Ouvrir la caisse</span>
  1229.                 </a>
  1230.             {% endif %}
  1231.             {% if canVoirRapports %}
  1232.                 <a href="{{ path('caisse_rapports_vendeurs') }}" class="btn-dashboard">
  1233.                     <i class="fas fa-chart-column" style="font-size:15px;"></i>
  1234.                     <span class="dashboard-label">Mes ventes</span>
  1235.                 </a>
  1236.             {% endif %}
  1237.             {% if canReparations %}
  1238.                 <a href="{{ path('reparation_index') }}" class="btn-dashboard">
  1239.                     <i class="fas fa-screwdriver-wrench" style="font-size:15px;"></i>
  1240.                     <span class="dashboard-label">Réparations</span>
  1241.                 </a>
  1242.             {% endif %}
  1243.             {% if not isSalarie %}
  1244.                 <a href="{{ path('dashboard') }}" class="btn-dashboard">
  1245.                     <i class="fas fa-tachometer-alt" style="font-size:15px;"></i>
  1246.                     <span class="dashboard-label">Tableau de bord</span>
  1247.                 </a>
  1248.             {% endif %}
  1249.             <div class="total-display" id="totalPrice">{{ totalTTC|number_format(3, '.', '') }} TND</div>
  1250.             {% if principalNom %}
  1251.                 <div class="user-session-chip" title="{{ isSalarie ? 'Salarié connecté' : 'Compte connecté' }}">
  1252.                     <div class="user-session-avatar">{{ principalNom|slice(0, 1)|upper }}</div>
  1253.                     <span class="user-session-name">{{ principalNom }}</span>
  1254.                     <a href="{{ path('app_logout') }}" class="user-session-logout" id="shiftLogoutBtn"
  1255.                        data-panier-count="{{ panier|length }}"
  1256.                        title="{{ isSalarie ? 'Terminer mon service / changer de salarié' : 'Se déconnecter' }}">
  1257.                         <i class="fas fa-right-from-bracket"></i>
  1258.                     </a>
  1259.                 </div>
  1260.             {% endif %}
  1261.             <div class="pos-brand" title="Mazego.fr — Logiciel de caisse">
  1262.                 <span class="pos-brand-text">Mazego<span class="pos-brand-tld">.fr</span></span>
  1263.             </div>
  1264.         </div>
  1265.     </header>
  1267.     {# ========== PRODUCTS SECTION ========== #}
  1268.     <div class="pos-products">
  1269.         {# Categories #}
  1270.         <div class="category-bar">
  1271.             <a href="{{ path('point_vente_index') }}" class="cat-pill {{ selectedCategory is null ? 'active' : '' }}">
  1272.                 Tous
  1273.             </a>
  1274.             {% for categorie in categories %}
  1275.                 <a href="{{ path('point_vente_index', {'categorie': categorie.id}) }}"
  1276.                    class="cat-pill {{ selectedCategory == categorie.id ? 'active' : '' }}">
  1277.                     {{ categorie.nom }}
  1278.                 </a>
  1279.             {% endfor %}
  1280.         </div>
  1282.         {# Search #}
  1283.         <div class="search-bar">
  1284.             <div class="search-inner">
  1285.                 <i class="fas fa-search"></i>
  1286.                 <form method="get" action="{{ path('point_vente_index') }}" id="searchForm">
  1287.                     <input type="text" name="search" class="search-input"
  1288.                            placeholder="Rechercher un produit ou scanner un code-barres..."
  1289.                            value="{{ searchTerm }}" id="searchInput" autocomplete="off">
  1290.                 </form>
  1291.             </div>
  1292.         </div>
  1294.         {# Formulaire caché : ajout direct au panier via scan de code-barres #}
  1295.         <form id="scanBarcodeForm" action="{{ path('point_vente_scan_barcode') }}" method="POST" style="display:none;">
  1296.             <input type="hidden" name="code_barre" id="scanBarcodeInput">
  1297.             <input type="hidden" name="_token" value="{{ csrf_token('scan_barcode') }}">
  1298.         </form>
  1300.         {# Products grid #}
  1301.         <div class="products-scroll">
  1302.             <div class="product-grid">
  1303.                 {% for produit in produits %}
  1304.                     {% set prixAffichage = produit.prixVente ?: produit.puht %}
  1305.                     <div class="product-card" onclick="addToCartWithBeep('add-to-cart-{{ produit.id }}')">
  1306.                         <div class="product-img"
  1307.                              style="background-image:url('{% if produit.imageUrl %}{{ asset('uploads/' ~ produit.imageUrl) }}{% else %}{{ asset('uploads/images/default-product.png') }}{% endif %}')">
  1308.                             {% if produit.discountRate and produit.discountRate > 0 %}
  1309.                                 <span class="discount-badge">-{{ produit.discountRate }}%</span>
  1310.                             {% endif %}
  1311.                         </div>
  1312.                         <div class="product-body">
  1313.                             <div class="product-name">{{ produit.description }}</div>
  1314.                             <div class="product-price">{{ prixAffichage|number_format(3, '.', '') }} TND</div>
  1315.                             {% if produit.npuht %}
  1316.                                 <div class="product-price-buy">Achat : {{ produit.npuht|number_format(3, '.', '') }}</div>
  1317.                             {% endif %}
  1318.                         </div>
  1319.                         <form id="add-to-cart-{{ produit.id }}"
  1320.                               action="{{ path('point_vente_add_to_cart', {'id': produit.id}) }}"
  1321.                               method="POST" style="display:none;">
  1322.                             <input type="hidden" name="categorie" value="{{ selectedCategory }}">
  1323.                             <input type="hidden" name="search" value="{{ searchTerm }}">
  1324.                         </form>
  1325.                     </div>
  1326.                 {% else %}
  1327.                     <div class="no-products">
  1328.                         <i class="fas fa-box-open" style="font-size:32px;margin-bottom:8px;"></i>
  1329.                         <div>Aucun produit trouvé</div>
  1330.                     </div>
  1331.                 {% endfor %}
  1332.             </div>
  1333.         </div>
  1334.     </div>
  1336.     {# ========== CART SECTION ========== #}
  1337.     {% set modeResto = entreprise and entreprise.caisseModeRestaurant %}
  1338.     {% set enAttenteActif = entreprise is null or entreprise.caisseCommandesEnAttente %}
  1339.     <div class="pos-cart" id="posCart">
  1340.         <div class="cart-header">
  1341.             <i class="fas fa-shopping-cart"></i>
  1342.             {% if commande and commande.table %}
  1343.                 {{ commande.table.libelle }}
  1344.             {% elseif commande and commande.libelle %}
  1345.                 {{ commande.libelle }}
  1346.             {% else %}
  1347.                 Panier
  1348.             {% endif %}
  1349.             {% if panier|length > 0 %}
  1350.                 <span style="background:rgba(255,255,255,.25);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:4px;">
  1351.                     {{ panier|length }} article{{ panier|length > 1 ? 's' : '' }}
  1352.                 </span>
  1353.             {% endif %}
  1354.             <button type="button" class="cart-close-btn" id="cartCloseBtn" aria-label="Fermer le panier">
  1355.                 <i class="fas fa-times"></i>
  1356.             </button>
  1357.         </div>
  1359.         {# Barre de contexte : tables, commandes en attente, type de commande #}
  1360.         {% if enAttenteActif or modeResto %}
  1361.             <div class="order-context">
  1362.                 <div class="order-context-links">
  1363.                     {% if entreprise and entreprise.caisseGestionTables %}
  1364.                         <a href="{{ path('point_vente_tables') }}" class="ctx-btn ctx-tables"><i class="fas fa-chair"></i> Tables</a>
  1365.                     {% endif %}
  1366.                     {% if enAttenteActif %}
  1367.                         <a href="{{ path('point_vente_en_attente') }}" class="ctx-btn">
  1368.                             <i class="fas fa-clock"></i> En attente
  1369.                             {% if nbEnAttente > 0 %}<span class="ctx-count">{{ nbEnAttente }}</span>{% endif %}
  1370.                         </a>
  1371.                     {% endif %}
  1372.                 </div>
  1373.                 {% if modeResto %}
  1374.                     <form method="POST" action="{{ path('point_vente_commande_infos') }}" class="order-context-form">
  1375.                         {% if commande and commande.table %}
  1376.                             <span class="ctx-info"><i class="fas fa-utensils"></i> Sur place</span>
  1377.                             {% if tablesTransfert is not empty %}
  1378.                                 <select class="ctx-select" aria-label="Transférer vers" form="transfertForm" name="table_id"
  1379.                                         onchange="if (this.value && confirm('Transférer la commande vers la table choisie ? Si elle est occupée, les commandes seront fusionnées.')) document.getElementById('transfertForm').submit(); else this.value='';">
  1380.                                     <option value="">Transférer vers…</option>
  1381.                                     {% for t in tablesTransfert %}
  1382.                                         {% if t.id != commande.table.id %}<option value="{{ t.id }}">{{ t.salle.nom }} · {{ t.libelle }}</option>{% endif %}
  1383.                                     {% endfor %}
  1384.                                 </select>
  1385.                             {% endif %}
  1386.                         {% else %}
  1387.                             <select name="type_commande" class="ctx-select" onchange="this.form.submit()" aria-label="Type de commande">
  1388.                                 {% for code, libelle in typesCommande %}
  1389.                                     <option value="{{ code }}" {{ (commande ? commande.typeCommande : 'sur_place') == code ? 'selected' }}>{{ libelle }}</option>
  1390.                                 {% endfor %}
  1391.                             </select>
  1392.                         {% endif %}
  1393.                         <label class="ctx-couverts" title="Nombre de couverts">
  1394.                             <i class="fas fa-user-group"></i>
  1395.                             <input type="number" name="nb_couverts" min="0" max="99" value="{{ commande ? commande.nbCouverts : '' }}"
  1396.                                    placeholder="–" onchange="this.form.submit()">
  1397.                         </label>
  1398.                     </form>
  1399.                 {% endif %}
  1400.             </div>
  1401.         {% endif %}
  1403.         <form id="transfertForm" method="POST" action="{{ path('point_vente_transferer') }}" style="display:none;"></form>
  1405.         {# Cart items #}
  1406.         <div class="cart-body">
  1407.             {% if panier is empty %}
  1408.                 <div class="cart-empty">
  1409.                     <i class="fas fa-shopping-cart" style="font-size:36px;opacity:.25;"></i>
  1410.                     <span>Le panier est vide</span>
  1411.                 </div>
  1412.             {% else %}
  1413.                 {% for item in panier %}
  1414.                     {% set ligne = item.ligne %}
  1415.                     <div class="cart-item {{ item.tauxRemise > 0 ? 'has-discount' : '' }}">
  1416.                         <div class="cart-item-top">
  1417.                             <div class="cart-item-name">
  1418.                                 {{ ligne.libelle }}
  1419.                                 {% if ligne.envoyeeCuisine %}
  1420.                                     <span class="kitchen-badge" title="Envoyé en cuisine : {{ ligne.quantiteEnvoyeeCuisine }}">
  1421.                                         <i class="fas fa-fire-burner"></i>{% if ligne.quantiteAEnvoyer > 0 %} +{{ ligne.quantiteAEnvoyer }}{% endif %}
  1422.                                     </span>
  1423.                                 {% endif %}
  1424.                             </div>
  1425.                             <div class="cart-item-total">{{ item.totalHT|number_format(3, '.', '') }}</div>
  1426.                         </div>
  1427.                         <div class="cart-item-meta">
  1428.                             {{ item.prixApresRemise|number_format(3, '.', '') }} × {{ ligne.quantite }} TND
  1429.                             {% if item.tauxRemise > 0 %}
  1430.                                 &nbsp;·&nbsp;<span style="color:var(--pos-warning);font-weight:600;">-{{ item.tauxRemise }}%</span>
  1431.                             {% endif %}
  1432.                         </div>
  1433.                         {% if ligne.note %}
  1434.                             <div class="cart-item-note"><i class="fas fa-comment-dots"></i> {{ ligne.note }}</div>
  1435.                         {% endif %}
  1437.                         {# Quantity controls + remove #}
  1438.                         <div class="cart-item-controls">
  1439.                             <form action="{{ path('point_vente_update_cart', {'id': ligne.id}) }}" method="POST">
  1440.                                 <input type="hidden" name="quantite" value="{{ ligne.quantite - 1 }}">
  1441.                                 <button type="submit" class="qty-btn">−</button>
  1442.                             </form>
  1444.                             <span class="qty-display">{{ ligne.quantite }}</span>
  1446.                             <form action="{{ path('point_vente_update_cart', {'id': ligne.id}) }}" method="POST">
  1447.                                 <input type="hidden" name="quantite" value="{{ ligne.quantite + 1 }}">
  1448.                                 <button type="submit" class="qty-btn">+</button>
  1449.                             </form>
  1451.                             <form action="{{ path('point_vente_remove_from_cart', {'id': ligne.id}) }}" method="POST" style="margin-left:auto;">
  1452.                                 <button type="submit" class="btn-remove"><i class="fas fa-trash-alt" style="font-size:11px;"></i></button>
  1453.                             </form>
  1454.                         </div>
  1456.                         {# Remise et note : repliées pour garder le panier compact #}
  1457.                         <details class="line-options" {{ item.tauxRemise > 0 and ligne.remiseManuelle is not null ? 'open' }}>
  1458.                             <summary>{{ modeResto ? 'Remise / note cuisine' : 'Remise' }}</summary>
  1459.                             <form action="{{ path('point_vente_apply_discount', {'id': ligne.id}) }}"
  1460.                                   method="POST" class="discount-form">
  1461.                                 <div class="discount-row">
  1462.                                     <i class="fas fa-tag" style="font-size:10px;color:var(--pos-gray-400);"></i>
  1463.                                     <input type="number" name="remise" class="discount-input-small"
  1464.                                            value="{{ item.tauxRemise }}" min="0" max="100" step="0.1"
  1465.                                            placeholder="Remise %">
  1466.                                     <button type="submit" class="discount-submit-btn">Appliquer</button>
  1467.                                 </div>
  1468.                             </form>
  1469.                             {% if modeResto %}
  1470.                                 <form action="{{ path('point_vente_ligne_note', {'id': ligne.id}) }}" method="POST" class="note-form">
  1471.                                     <div class="discount-row">
  1472.                                         <i class="fas fa-comment-dots" style="font-size:10px;color:var(--pos-gray-400);"></i>
  1473.                                         <input type="text" name="note" class="discount-input-small note-input" maxlength="255"
  1474.                                                value="{{ ligne.note }}" placeholder="Note cuisine (sans oignon...)">
  1475.                                         <button type="submit" class="discount-submit-btn">OK</button>
  1476.                                     </div>
  1477.                                 </form>
  1478.                             {% endif %}
  1479.                         </details>
  1480.                     </div>
  1481.                 {% endfor %}
  1482.             {% endif %}
  1483.         </div>
  1485.         {# ========== FOOTER : SUMMARY + ACTIONS ========== #}
  1486.         <div class="cart-footer">
  1487.             <div class="cart-summary">
  1489.                 {# HT #}
  1490.                 <div class="summary-row">
  1491.                     <span>Sous-total HT</span>
  1492.                     <span>{{ totalPanier|number_format(3, '.', '') }} TND</span>
  1493.                 </div>
  1495.                 {# TVA par taux #}
  1496.                 {% for detail in detailsTva %}
  1497.                     <div class="summary-row">
  1498.                         <span>TVA {{ detail.taux }}%</span>
  1499.                         <span>{{ detail.montant|number_format(3, '.', '') }} TND</span>
  1500.                     </div>
  1501.                 {% else %}
  1502.                     <div class="summary-row">
  1503.                         <span>Total TVA</span>
  1504.                         <span>{{ totalTva|number_format(3, '.', '') }} TND</span>
  1505.                     </div>
  1506.                 {% endfor %}
  1508.                 {% if timbre > 0 %}
  1509.                     <div class="summary-row">
  1510.                         <span>Droit de timbre</span>
  1511.                         <span>{{ timbre|number_format(3, '.', '') }} TND</span>
  1512.                     </div>
  1513.                 {% endif %}
  1515.                 {# TTC #}
  1516.                 <div class="summary-row ttc-row">
  1517.                     <span>Total TTC</span>
  1518.                     <span id="total">{{ (totalTTC + timbre)|number_format(3, '.', '') }} TND</span>
  1519.                 </div>
  1521.                 {# Remise globale #}
  1522.                 <div class="global-discount-block">
  1523.                     <div class="global-discount-label">
  1524.                         <i class="fas fa-scissors"></i>
  1525.                         Remise globale (DT)
  1526.                     </div>
  1527.                     <div class="global-discount-inputs">
  1528.                         <input type="number"
  1529.                                id="global_discount"
  1530.                                name="global_discount"
  1531.                                min="0"
  1532.                                max="{{ totalTTC }}"
  1533.                                step="0.001"
  1534.                                placeholder="0.000"
  1535.                                class="global-discount-input"
  1536.                                autocomplete="off"
  1537.                                oninput="updateTotalNet(this.value)">
  1538.                         <span class="global-discount-unit">DT</span>
  1539.                         <span id="remise-display" class="global-discount-amount" style="display:none;"></span>
  1540.                     </div>
  1541.                 </div>
  1543.                 {# Total net (affiché si remise > 0) #}
  1544.                 <div class="total-net-row" id="total-net-block" style="display:none;">
  1545.                     <span class="total-net-label">TOTAL NET À PAYER</span>
  1546.                     <span class="total-net-value" id="total-net-value">0.000 TND</span>
  1547.                 </div>
  1549.             </div>
  1551.             {# ========== ACTION BUTTONS ========== #}
  1552.             <div class="cart-actions">
  1554.                 {% if canEncaisser %}
  1555.                     {# Bouton principal #}
  1556.                     <button class="btn-primary-action" id="processPaymentBtn">
  1557.                         <i class="fas fa-receipt"></i>
  1558.                         Valider &amp; imprimer ticket
  1559.                     </button>
  1560.                 {% endif %}
  1562.                 {# Formulaire ticket (caché) #}
  1563.                 <form method="POST" action="{{ path('point_vente_valider_commande_ticket') }}"
  1564.                       id="ticketForm" style="display:none;">
  1565.                     <input type="hidden" name="selectedClientId" id="selectedClientIdTicket" value="">
  1566.                     <input type="hidden" name="payment_method" value="espece">
  1567.                     <input type="hidden" name="montant_recu" value="">
  1568.                     <input type="hidden" name="monnaie_rendre" value="">
  1569.                     <input type="hidden" name="global_discount" id="ticketFormDiscount" value="0">
  1570.                     <input type="hidden" name="_token" value="{{ csrf_token('validate_order') }}">
  1571.                 </form>
  1573.                 {# Formulaire paiement (caché) #}
  1574.                 <form method="POST" action="{{ path('point_vente_valider_commande') }}"
  1575.                       id="paymentForm" style="display:none;">
  1576.                     <input type="hidden" name="selectedespeceClientId" id="selectedespeceClientId" value="">
  1577.                     <input type="hidden" name="payment_method" value="">
  1578.                     <input type="hidden" name="montant_recu" value="">
  1579.                     <input type="hidden" name="monnaie_rendre" value="">
  1580.                     <input type="hidden" name="global_discount" id="paymentFormDiscount" value="0">
  1581.                     <input type="hidden" name="_token" value="{{ csrf_token('validate_order') }}">
  1582.                 </form>
  1584.                 {% if canEncaisser %}
  1585.                     {# Row 1 : moyens de paiement #}
  1586.                     <div class="action-row" style="grid-template-columns:1fr 1fr 1fr;">
  1587.                         <button class="btn-action cash" onclick="openCashModal('normal')">
  1588.                             <i class="fas fa-money-bill-wave" style="font-size:15px;"></i>
  1589.                             Espèces
  1590.                         </button>
  1591.                         <button class="btn-action card" data-payment="carte">
  1592.                             <i class="fas fa-credit-card" style="font-size:15px;"></i>
  1593.                             Carte
  1594.                         </button>
  1595.                         <button class="btn-action unpaid" data-payment="nonPaye">
  1596.                             <i class="fas fa-times" style="font-size:15px;"></i>
  1597.                             Non payé
  1598.                         </button>
  1599.                     </div>
  1600.                 {% else %}
  1601.                     <div class="no-cash-right">
  1602.                         <i class="fas fa-circle-info"></i>
  1603.                         L'encaissement est fait par un responsable. Envoyez la commande en cuisine
  1604.                         ou mettez-la en attente / sur une table.
  1605.                     </div>
  1606.                 {% endif %}
  1608.                 {# Restaurant : cuisine, pré-addition, addition partagée #}
  1609.                 {% if modeResto and commande and not commande.vide %}
  1610.                     <div class="action-row" style="grid-template-columns:repeat({{ entreprise.caisseTicketCuisine ? 3 : 2 }}, 1fr);">
  1611.                         {% if entreprise.caisseTicketCuisine %}
  1612.                             <form method="POST" action="{{ path('point_vente_bon_cuisine') }}" target="_blank" style="display:contents;">
  1613.                                 <button type="submit" class="btn-action kitchen {{ commande.articlesNonEnvoyesCuisine ? 'pending' : '' }}"
  1614.                                         onclick="setTimeout(function(){ window.location.reload(); }, 800);">
  1615.                                     <i class="fas fa-fire-burner" style="font-size:14px;"></i>
  1616.                                     Cuisine
  1617.                                 </button>
  1618.                             </form>
  1619.                         {% endif %}
  1620.                         <a href="{{ path('point_vente_pre_addition') }}" target="_blank" class="btn-action client" style="text-decoration:none;">
  1621.                             <i class="fas fa-file-invoice" style="font-size:14px;"></i>
  1622.                             Pré-addition
  1623.                         </a>
  1624.                         <a href="{{ path('point_vente_separer') }}" class="btn-action add-prod" style="text-decoration:none;">
  1625.                             <i class="fas fa-divide" style="font-size:14px;"></i>
  1626.                             Partager
  1627.                         </a>
  1628.                     </div>
  1629.                 {% endif %}
  1631.                 {# Mise en attente / table #}
  1632.                 {% if commande and not commande.vide and (enAttenteActif or (commande.table)) %}
  1633.                     <form method="POST" action="{{ path('point_vente_mettre_en_attente') }}" class="hold-form">
  1634.                         {% if commande.table %}
  1635.                             <button type="submit" class="btn-action hold" style="width:100%;">
  1636.                                 <i class="fas fa-chair" style="font-size:14px;"></i>
  1637.                                 Garder sur la {{ commande.table.libelle }} et revenir au plan
  1638.                             </button>
  1639.                         {% else %}
  1640.                             <input type="text" name="libelle" class="hold-input" maxlength="120"
  1641.                                    value="{{ commande.libelle }}" placeholder="Nom (optionnel)">
  1642.                             <button type="submit" class="btn-action hold">
  1643.                                 <i class="fas fa-pause" style="font-size:14px;"></i>
  1644.                                 Mettre en attente
  1645.                             </button>
  1646.                         {% endif %}
  1647.                     </form>
  1648.                 {% endif %}
  1650.                 {# Row 2 : client + produit + catégorie #}
  1651.                 <div class="action-row" style="grid-template-columns:1fr 1fr 1fr;">
  1652.                     <button class="btn-action client" id="addClientBtn">
  1653.                         <i class="fas fa-user-plus" style="font-size:14px;"></i>
  1654.                         Client
  1655.                     </button>
  1656.                     <button class="btn-action add-prod"
  1657.                             data-bs-toggle="modal" data-bs-target="#addProductFromCaisseModal">
  1658.                         <i class="fas fa-plus-circle" style="font-size:14px;"></i>
  1659.                         Produit
  1660.                     </button>
  1661.                     <button class="btn-action add-cat"
  1662.                             data-bs-toggle="modal" data-bs-target="#addCategoryFromCaisseModal">
  1663.                         <i class="fas fa-tags" style="font-size:14px;"></i>
  1664.                         Catégorie
  1665.                     </button>
  1666.                 </div>
  1668.                 {# Vider le panier — séparé et discret #}
  1669.                 <button class="btn-action danger" style="width:100%;margin-top:4px;" onclick="confirmClearCart()">
  1670.                     <i class="fas fa-trash-alt" style="font-size:14px;"></i>
  1671.                     {{ commande and commande.table ? 'Libérer la table' : 'Vider le panier' }}
  1672.                 </button>
  1674.                 <form id="clearCartForm" method="POST"
  1675.                       action="{{ path('point_vente_vider_panier') }}" style="display:none;">
  1676.                 </form>
  1678.             </div>
  1679.         </div>
  1680.     </div>
  1681. </div>
  1683. {# ========== PANIER MOBILE : BACKDROP + BOUTON FLOTTANT ========== #}
  1684. <div id="cartBackdrop" class="cart-backdrop"></div>
  1685. <button type="button" class="cart-fab" id="cartFab">
  1686.     <i class="fas fa-shopping-cart"></i>
  1687.     <span id="fabTotal">{{ totalTTC|number_format(3, '.', '') }} TND</span>
  1688.     {% if panier|length > 0 %}
  1689.         <span class="fab-count" id="fabCount">{{ panier|length }}</span>
  1690.     {% endif %}
  1691. </button>
  1693. {# ========== MODAL PAIEMENT ESPÈCES ========== #}
  1694. <div id="cashPaymentModal" class="pos-modal-overlay">
  1695.     <div class="pos-modal">
  1696.         <div class="pos-modal-header">
  1697.             <span><i class="fas fa-money-bill-wave me-2"></i>Paiement en espèces</span>
  1698.             <button class="pos-modal-close" onclick="closeCashModal()">×</button>
  1699.         </div>
  1700.         <div class="pos-modal-body">
  1701.             <div class="cash-amount-box">
  1702.                 <span class="cash-label">Total à payer</span>
  1703.                 <span class="cash-value" id="cash-total">0.000</span>
  1704.                 <span style="font-size:13px;color:var(--pos-gray-400);"> TND</span>
  1705.             </div>
  1707.             <div class="cash-amount-box" style="padding:10px 16px;">
  1708.                 <span class="cash-label">Montant reçu</span>
  1709.                 <input type="number" id="cash-received" class="cash-input"
  1710.                        placeholder="0.000" step="0.001" min="0"
  1711.                        oninput="calculateChange()">
  1712.             </div>
  1714.             <button type="button" class="exact-amount-btn" onclick="setExactAmount()">
  1715.                 <i class="fas fa-check-circle"></i>
  1716.                 Montant exact
  1717.             </button>
  1719.             <div class="quick-btns">
  1720.                 <button class="quick-btn" onclick="addAmount(100)">100</button>
  1721.                 <button class="quick-btn" onclick="addAmount(50)">50</button>
  1722.                 <button class="quick-btn" onclick="addAmount(20)">20</button>
  1723.                 <button class="quick-btn" onclick="addAmount(10)">10</button>
  1724.                 <button class="quick-btn" onclick="addAmount(5)">5</button>
  1725.                 <button class="quick-btn" onclick="addAmount(1)">1</button>
  1726.             </div>
  1728.             <div class="cash-amount-box highlight">
  1729.                 <span class="cash-label">Monnaie à rendre</span>
  1730.                 <span class="cash-value" id="cash-change" style="color:var(--pos-warning);">0.000</span>
  1731.                 <span style="font-size:13px;color:var(--pos-gray-400);"> TND</span>
  1732.             </div>
  1734.             <div class="modal-action-row">
  1735.                 <button class="btn-modal-cancel" onclick="closeCashModal()">Annuler</button>
  1736.                 <button class="btn-modal-confirm" onclick="confirmCashPayment()">
  1737.                     <i class="fas fa-check me-1"></i>Valider
  1738.                 </button>
  1739.             </div>
  1740.         </div>
  1741.     </div>
  1742. </div>
  1744. {# ========== MODAL CLIENT ========== #}
  1745. <div id="customerModal" class="pos-modal-overlay">
  1746.     <div class="pos-modal">
  1747.         <div class="pos-modal-header">
  1748.             <span><i class="fas fa-users me-2"></i>Sélectionner un client</span>
  1749.             <button class="pos-modal-close" onclick="closeModal('customerModal')">×</button>
  1750.         </div>
  1751.         <div class="pos-modal-body" style="padding:0;">
  1752.             <ul class="client-list">
  1753.                 {% for client in clients %}
  1754.                     <li class="client-item" data-client-id="{{ client.id }}"
  1755.                         data-client-name="{{ client.nom }} {{ client.prenom }}">
  1756.                         <span>{{ client.nom }} {{ client.prenom }}</span>
  1757.                         <span style="font-size:11px;color:var(--pos-gray-400);">{{ client.telephone }}</span>
  1758.                     </li>
  1759.                 {% else %}
  1760.                     <li style="padding:20px;text-align:center;font-size:13px;color:var(--pos-gray-400);">
  1761.                         Aucun client trouvé
  1762.                     </li>
  1763.                 {% endfor %}
  1764.             </ul>
  1765.         </div>
  1766.     </div>
  1767. </div>
  1769. {# ========== MODAL AJOUT CLIENT ========== #}
  1770. <div id="addClientModal" class="pos-modal-overlay">
  1771.     <div class="pos-modal" style="max-width:500px;">
  1772.         <div class="pos-modal-header">
  1773.             <span><i class="fas fa-user-plus me-2"></i>Nouveau client</span>
  1774.             <button class="pos-modal-close" onclick="closeModal('addClientModal')">×</button>
  1775.         </div>
  1776.         <div class="pos-modal-body">
  1777.             {{ form_start(form, {'attr': {'action': path('client_new_modal')}}) }}
  1778.                 {{ form_widget(form) }}
  1779.                 <div class="modal-action-row">
  1780.                     <button type="button" class="btn-modal-cancel" onclick="closeModal('addClientModal')">Annuler</button>
  1781.                     <button type="submit" class="btn-modal-confirm">Enregistrer</button>
  1782.                 </div>
  1783.             {{ form_end(form) }}
  1784.         </div>
  1785.     </div>
  1786. </div>
  1788. {# ========== MODAL CAISSE FERMÉE ========== #}
  1789. <div id="noCaisseSessionModal" class="pos-modal-overlay">
  1790.     <div class="pos-modal" style="max-width:420px;">
  1791.         <div class="pos-modal-header" style="background:var(--pos-warning);">
  1792.             <span><i class="fas fa-triangle-exclamation me-2"></i>Caisse fermée</span>
  1793.             <button class="pos-modal-close" onclick="closeModal('noCaisseSessionModal')">×</button>
  1794.         </div>
  1795.         <div class="pos-modal-body" style="text-align:center;">
  1796.             <i class="fas fa-cash-register" style="font-size:38px;color:var(--pos-warning);margin-bottom:12px;"></i>
  1797.             <p style="font-size:14.5px;color:var(--pos-gray-800);margin-bottom:0;">
  1798.                 Tu dois d'abord <strong>ouvrir la caisse</strong> avant de pouvoir encaisser des ventes.
  1799.             </p>
  1800.             <div class="modal-action-row">
  1801.                 <button type="button" class="btn-modal-cancel" onclick="closeModal('noCaisseSessionModal')">Annuler</button>
  1802.                 <a href="{{ path('caisse_cloture_ouvrir') }}" class="btn-modal-confirm" style="text-decoration:none;text-align:center;">
  1803.                     Ouvrir la caisse
  1804.                 </a>
  1805.             </div>
  1806.         </div>
  1807.     </div>
  1808. </div>
  1810. {# ========== MODAL NOUVEAU PRODUIT ========== #}
  1811. <div class="modal fade" id="addProductFromCaisseModal" tabindex="-1" aria-hidden="true">
  1812.     <div class="modal-dialog modal-dialog-centered mw-650px">
  1813.         <div class="modal-content">
  1814.             <div class="modal-header" style="background:var(--pos-primary);color:#fff;">
  1815.                 <h5 class="modal-title">Nouveau produit</h5>
  1816.                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  1817.             </div>
  1818.             <form method="post" action="{{ path('app_produit_new_from_caisse') }}" enctype="multipart/form-data">
  1819.                 <div class="modal-body">
  1820.                     {{ render(path('app_produit_new_from_caisse')) }}
  1821.                 </div>
  1822.                 <div class="modal-footer">
  1823.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
  1824.                 </div>
  1825.             </form>
  1826.         </div>
  1827.     </div>
  1828. </div>
  1830. {# ========== MODAL NOUVELLE CATÉGORIE ========== #}
  1831. <div class="modal fade" id="addCategoryFromCaisseModal" tabindex="-1" aria-hidden="true">
  1832.     <div class="modal-dialog modal-dialog-centered">
  1833.         <div class="modal-content">
  1834.             <div class="modal-header" style="background:var(--pos-primary);color:#fff;">
  1835.                 <h5 class="modal-title">Nouvelle catégorie</h5>
  1836.                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  1837.             </div>
  1838.             <form method="post" action="{{ path('app_categorie_new_from_caisse') }}">
  1839.                 <div class="modal-body">
  1840.                     {{ render(path('app_categorie_new_from_caisse')) }}
  1841.                 </div>
  1842.             </form>
  1843.         </div>
  1844.     </div>
  1845. </div>
  1847. {# ========== JAVASCRIPT ========== #}
  1848. <script>
  1849. /* ---- CONSTANTES ---- */
  1850. const TTC_BRUT = {{ totalTTC + timbre }};
  1851. const CAISSE_SESSION_OUVERTE = {{ sessionCaisse ? 'true' : 'false' }};
  1853. /* ============================================================
  1854.    SIGNAL SONORE (bip caisse à l'ajout d'un produit au panier)
  1855.    ============================================================ */
  1857. var __caissePosAudioCtx = null;
  1859. function playCaisseBeep() {
  1860.     try {
  1861.         var AudioCtx = window.AudioContext || window.webkitAudioContext;
  1862.         if (!AudioCtx) return;
  1863.         if (!__caissePosAudioCtx) __caissePosAudioCtx = new AudioCtx();
  1864.         if (__caissePosAudioCtx.state === 'suspended') __caissePosAudioCtx.resume();
  1866.         var ctx = __caissePosAudioCtx;
  1867.         var osc = ctx.createOscillator();
  1868.         var gain = ctx.createGain();
  1869.         osc.connect(gain);
  1870.         gain.connect(ctx.destination);
  1872.         osc.type = 'square';
  1873.         osc.frequency.setValueAtTime(1568, ctx.currentTime);
  1875.         gain.gain.setValueAtTime(0.0001, ctx.currentTime);
  1876.         gain.gain.exponentialRampToValueAtTime(0.2, ctx.currentTime + 0.01);
  1877.         gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.11);
  1879.         osc.start(ctx.currentTime);
  1880.         osc.stop(ctx.currentTime + 0.12);
  1881.     } catch (e) {
  1882.         /* Audio non disponible (navigateur, permissions...) : on ignore silencieusement */
  1883.     }
  1884. }
  1886. /**
  1887.  * Joue le bip caisse puis soumet le formulaire d'ajout au panier,
  1888.  * avec un très court délai pour laisser le son démarrer avant le
  1889.  * rechargement de page.
  1890.  */
  1891. function addToCartWithBeep(formId) {
  1892.     if (!CAISSE_SESSION_OUVERTE) {
  1893.         openModal('noCaisseSessionModal');
  1894.         return;
  1895.     }
  1896.     playCaisseBeep();
  1897.     var form = document.getElementById(formId);
  1898.     if (form) {
  1899.         window.setTimeout(function () { form.submit(); }, 90);
  1900.     }
  1901. }
  1903. /* ============================================================
  1904.    REMISE GLOBALE
  1905.    ============================================================ */
  1907. function getEffectiveTotal() {
  1908.     const netBlock = document.getElementById('total-net-block');
  1909.     if (netBlock && netBlock.style.display !== 'none') {
  1910.         const raw = document.getElementById('total-net-value').textContent.replace(' TND','').trim();
  1911.         return parseFloat(raw) || 0;
  1912.     }
  1913.     return TTC_BRUT;
  1914. }
  1916. function syncDiscount() {
  1917.     const val = parseFloat(document.getElementById('global_discount').value) || 0;
  1918.     document.getElementById('paymentFormDiscount').value = val.toFixed(3);
  1919.     document.getElementById('ticketFormDiscount').value  = val.toFixed(3);
  1920. }
  1922. function updateTotalNet(remise) {
  1923.     const r   = parseFloat(remise) || 0;
  1924.     const net = Math.max(0, TTC_BRUT - r);
  1926.     const netBlock      = document.getElementById('total-net-block');
  1927.     const netValue      = document.getElementById('total-net-value');
  1928.     const remiseDisplay = document.getElementById('remise-display');
  1929.     const cashTotal     = document.getElementById('cash-total');
  1931.     if (r > 0) {
  1932.         netBlock.style.display = 'flex';
  1933.         netValue.textContent   = net.toFixed(3) + ' TND';
  1934.         if (remiseDisplay) {
  1935.             remiseDisplay.textContent = '– ' + r.toFixed(3) + ' DT';
  1936.             remiseDisplay.style.display = 'inline';
  1937.         }
  1938.         if (cashTotal) cashTotal.textContent = net.toFixed(3);
  1939.     } else {
  1940.         netBlock.style.display = 'none';
  1941.         if (remiseDisplay) remiseDisplay.style.display = 'none';
  1942.         if (cashTotal) cashTotal.textContent = TTC_BRUT.toFixed(3);
  1943.     }
  1945.     syncDiscount();
  1946. }
  1948. /* ============================================================
  1949.    MODALE ESPÈCES
  1950.    ============================================================ */
  1952. function openCashModal(mode) {
  1953.     const modal    = document.getElementById('cashPaymentModal');
  1954.     const effective = getEffectiveTotal();
  1955.     modal.dataset.mode = mode || 'normal';
  1957.     document.getElementById('cash-total').textContent    = effective.toFixed(3);
  1958.     document.getElementById('cash-received').value       = '';
  1959.     document.getElementById('cash-change').textContent   = '0.000';
  1961.     modal.classList.add('open');
  1962.     setTimeout(() => document.getElementById('cash-received').focus(), 120);
  1963. }
  1965. function closeCashModal() {
  1966.     document.getElementById('cashPaymentModal').classList.remove('open');
  1967. }
  1969. function calculateChange() {
  1970.     const total    = parseFloat(document.getElementById('cash-total').textContent) || 0;
  1971.     const received = parseFloat(document.getElementById('cash-received').value)    || 0;
  1972.     const change   = Math.max(0, received - total);
  1973.     document.getElementById('cash-change').textContent = change.toFixed(3);
  1974. }
  1976. function addAmount(amount) {
  1977.     const input   = document.getElementById('cash-received');
  1978.     const current = parseFloat(input.value) || 0;
  1979.     input.value   = (current + amount).toFixed(3);
  1980.     calculateChange();
  1981. }
  1983. function setExactAmount() {
  1984.     const total = parseFloat(document.getElementById('cash-total').textContent) || 0;
  1985.     document.getElementById('cash-received').value = total.toFixed(3);
  1986.     calculateChange();
  1987. }
  1989. function confirmCashPayment() {
  1990.     const modal    = document.getElementById('cashPaymentModal');
  1991.     const mode     = modal.dataset.mode || 'normal';
  1992.     const total    = parseFloat(document.getElementById('cash-total').textContent)  || 0;
  1993.     const received = parseFloat(document.getElementById('cash-received').value)     || 0;
  1995.     if (!received || isNaN(received)) {
  1996.         alert('Veuillez entrer un montant reçu.');
  1997.         return;
  1998.     }
  1999.     if (received < total) {
  2000.         if (!confirm('Le montant reçu est inférieur au total. Continuer ?')) return;
  2001.     }
  2003.     const change = Math.max(0, received - total);
  2005.     syncDiscount();
  2006.     updatePaymentForms(received, change);
  2007.     closeCashModal();
  2009.     if (mode === 'ticket') {
  2010.         processTicketPayment();
  2011.     } else {
  2012.         document.getElementById('paymentForm').submit();
  2013.     }
  2014. }
  2016. function updatePaymentForms(received, change) {
  2017.     const montantRecu   = received.toFixed(3);
  2018.     const monnaieRendre = change.toFixed(3);
  2020.     const pf = document.getElementById('paymentForm');
  2021.     pf.querySelector('[name="payment_method"]').value  = 'espece';
  2022.     pf.querySelector('[name="montant_recu"]').value    = montantRecu;
  2023.     pf.querySelector('[name="monnaie_rendre"]').value  = monnaieRendre;
  2025.     const tf = document.getElementById('ticketForm');
  2026.     tf.querySelector('[name="payment_method"]').value  = 'espece';
  2027.     tf.querySelector('[name="montant_recu"]').value    = montantRecu;
  2028.     tf.querySelector('[name="monnaie_rendre"]').value  = monnaieRendre;
  2029. }
  2031. /* ============================================================
  2032.    BOUTON VALIDER + TICKET
  2033.    ============================================================ */
  2035. document.getElementById('processPaymentBtn')?.addEventListener('click', function () {
  2036.     openCashModal('ticket');
  2037. });
  2039. function processTicketPayment() {
  2040.     const form = document.getElementById('ticketForm');
  2042.     // Synchroniser le client sélectionné dans le formulaire ticket
  2043.     const clientId   = document.getElementById('selectedClientId')?.value || '';
  2044.     const clientName = document.getElementById('clientNameDisplay')?.textContent || '';
  2045.     const ticketClientField = document.getElementById('selectedClientIdTicket');
  2046.     if (ticketClientField && clientId) {
  2047.         ticketClientField.value = clientId;
  2048.     }
  2050.     const formData = new FormData(form);
  2051.     // Garantie supplémentaire : écraser dans le formData directement
  2052.     if (clientId) formData.set('selectedClientId', clientId);
  2053.     if (clientName && clientName !== 'Client Comptant') formData.set('nomClientChoisi', clientName);
  2055.     fetch(form.action, {
  2056.         method: 'POST',
  2057.         body: formData,
  2058.         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  2059.     })
  2060.     .then(r => { if (!r.ok) return r.json().then(e => { throw e; }); return r.json(); })
  2061.     .then(data => {
  2062.         if (data.success) {
  2063.             printTicket(data.ticketData);
  2064.             setTimeout(() => { window.location.href = "{{ path('point_vente_index') }}"; }, 1200);
  2065.         } else {
  2066.             throw new Error(data.message || 'Erreur lors de la validation');
  2067.         }
  2068.     })
  2069.     .catch(err => alert('Erreur : ' + (err.message || 'Communication serveur échouée')));
  2070. }
  2072. /* ============================================================
  2073.    NON PAYÉ et autres méthodes
  2074.    ============================================================ */
  2076. document.querySelectorAll('[data-payment]').forEach(btn => {
  2077.     btn.addEventListener('click', function () {
  2078.         const method = this.dataset.payment;
  2079.         const form   = document.getElementById('paymentForm');
  2080.         form.querySelector('[name="payment_method"]').value = method;
  2081.         syncDiscount();
  2082.         if (confirm('Confirmer le paiement "' + this.textContent.trim() + '" ?')) {
  2083.             form.submit();
  2084.         }
  2085.     });
  2086. });
  2088. /* ============================================================
  2089.    IMPRESSION TICKET
  2090.    ============================================================ */
  2092. function printTicket(ticketData) {
  2093.     const win = window.open('', '_blank', 'width=420,height=650,menubar=no,toolbar=no,location=no');
  2094.     if (!win) { alert('Autorisez les pop-ups pour imprimer le ticket.'); return; }
  2096.     const td = {
  2097.         nomEntreprise: ticketData.nomEntreprise || 'VOTRE ENTREPRISE',
  2098.         date:          ticketData.date          || new Date().toLocaleDateString('fr-FR'),
  2099.         reference:     ticketData.reference     || 'N/A',
  2100.         nomClient:     ticketData.nomClient     || 'Client Comptant',
  2101.         items:         ticketData.items         || [],
  2102.         totalHT:       parseFloat(ticketData.totalHT)   || 0,
  2103.         tva:           parseFloat(ticketData.tva)        || 0,
  2104.         totalTTC:      parseFloat(ticketData.totalTTC)   || 0,
  2105.         montantRecu:   parseFloat(ticketData.montantRecu)|| 0,
  2106.         monnaieRendre: parseFloat(ticketData.monnaieRendre) || 0,
  2107.         detailsTva:    ticketData.detailsTva    || {},
  2108.         globalDiscount:parseFloat(ticketData.globalDiscount) || 0,
  2109.         totalRemise:   parseFloat(ticketData.totalRemise) || 0,
  2110.         timbre:        parseFloat(ticketData.timbre)      || 0
  2111.     };
  2113.     let tvaHtml = '';
  2114.     for (const [, detail] of Object.entries(td.detailsTva)) {
  2115.         tvaHtml += `
  2116.             <div class="row"><span>Base HT ${detail.taux}% :</span><span>${parseFloat(detail.base).toFixed(3)} TND</span></div>
  2117.             <div class="row"><span>TVA ${detail.taux}% :</span><span>${parseFloat(detail.montant).toFixed(3)} TND</span></div>`;
  2118.     }
  2120.     const discountSection = (td.globalDiscount > 0) ? `
  2121.         <div class="row" style="color:#c00;font-weight:600;">
  2122.             <span>Remise globale :</span><span>– ${td.globalDiscount.toFixed(3)} TND</span>
  2123.         </div>
  2124.         <div class="row final" style="color:#065f46;border-top:1px dashed #000;margin-top:4px;padding-top:4px;">
  2125.             <span>TOTAL NET TTC :</span><span>${td.totalTTC.toFixed(3)} TND</span>
  2126.         </div>` : `
  2127.         <div class="row final"><span>TOTAL TTC :</span><span>${td.totalTTC.toFixed(3)} TND</span></div>`;
  2129.     const timbreHtml = td.timbre > 0
  2130.         ? `<div class="row"><span>Timbre fiscal :</span><span>${td.timbre.toFixed(3)} TND</span></div>` : '';
  2132.     const remiseLignesHtml = td.totalRemise > 0
  2133.         ? `<div class="row" style="color:#c00;"><span>Remises lignes :</span><span>– ${td.totalRemise.toFixed(3)} TND</span></div>` : '';
  2135.     win.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8">
  2136.     <title>Ticket ${td.reference}</title>
  2137.     <style>
  2138.         @page { size:80mm auto; margin:0; }
  2139.         body { font-family:'Courier New',monospace; font-size:11px; margin:0; padding:0; width:80mm; }
  2140.         .ticket { width:74mm; margin:0 auto; padding:4mm 3mm; }
  2141.         .header { text-align:center; border-bottom:1px dashed #000; padding-bottom:6px; margin-bottom:6px; }
  2142.         .company { font-size:15px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  2143.         .info { font-size:10px; margin:2px 0; }
  2144.         .items { margin:6px 0; }
  2145.         .item-head { display:flex; justify-content:space-between; font-weight:700; font-size:10px;
  2146.                      border-bottom:1px solid #000; padding-bottom:3px; margin-bottom:3px; }
  2147.         .item-row { display:flex; justify-content:space-between; font-size:10px; margin-bottom:2px; }
  2148.         .desc { flex:2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:4px; }
  2149.         .qty  { width:12%; text-align:center; }
  2150.         .pu   { width:20%; text-align:right; }
  2151.         .tot  { width:20%; text-align:right; }
  2152.         .totals { border-top:1px dashed #000; border-bottom:1px dashed #000; padding:5px 0; margin:5px 0; }
  2153.         .row { display:flex; justify-content:space-between; font-size:11px; margin-bottom:2px; }
  2154.         .row.final { font-weight:900; font-size:13px; }
  2155.         .payment { font-size:10px; margin:4px 0; }
  2156.         .footer { text-align:center; border-top:1px dashed #000; padding-top:6px; margin-top:8px; font-size:9px; }
  2157.         .merci { font-size:12px; font-weight:900; }
  2158.     </style></head><body><div class="ticket">
  2159.     <div class="header">
  2160.         <div class="company">${td.nomEntreprise}</div>
  2161.         <div class="info">${td.date}</div>
  2162.         <div class="info">N° ${td.reference}</div>
  2163.         <div class="info">Client : ${td.nomClient}</div>
  2164.     </div>
  2165.     <div class="items">
  2166.         <div class="item-head">
  2167.             <span class="desc">Article</span>
  2168.             <span class="qty">Qté</span>
  2169.             <span class="pu">P.U</span>
  2170.             <span class="tot">Total</span>
  2171.         </div>
  2172.         ${td.items.map(i => `
  2173.         <div class="item-row">
  2174.             <span class="desc" title="${i.description}">${i.description}</span>
  2175.             <span class="qty">${i.quantite}</span>
  2176.             <span class="pu">${parseFloat(i.prixUnitaire).toFixed(3)}</span>
  2177.             <span class="tot">${parseFloat(i.total).toFixed(3)}</span>
  2178.         </div>
  2179.         ${parseFloat(i.tauxRemise) > 0 ? `<div class="item-row" style="color:#c00;font-size:9px;"><span class="desc">  └ remise ${parseFloat(i.tauxRemise)}%</span></div>` : ''}
  2180.         `).join('')}
  2181.     </div>
  2182.     <div class="totals">
  2183.         ${tvaHtml}
  2184.         <div class="row"><span>Total HT :</span><span>${td.totalHT.toFixed(3)} TND</span></div>
  2185.         <div class="row"><span>Total TVA :</span><span>${td.tva.toFixed(3)} TND</span></div>
  2186.         ${remiseLignesHtml}
  2187.         ${timbreHtml}
  2188.         ${discountSection}
  2189.     </div>
  2190.     ${td.montantRecu > 0 ? `
  2191.     <div class="payment">
  2192.         <div class="row"><span>Montant reçu :</span><span>${td.montantRecu.toFixed(3)} TND</span></div>
  2193.         <div class="row"><span>Monnaie rendue :</span><span>${td.monnaieRendre.toFixed(3)} TND</span></div>
  2194.     </div>` : ''}
  2195.     <div class="footer">
  2196.         <div class="merci">MERCI DE VOTRE VISITE</div>
  2197.         <div>www.mazego.fr</div>
  2198.         <div>Imprimé le ${new Date().toLocaleString('fr-FR')}</div>
  2199.     </div>
  2200.     </div>
  2201.     <script>window.onload=function(){setTimeout(function(){window.print();setTimeout(function(){window.close();},500);},250);};<\/script>
  2202.     </body></html>`);
  2203.     win.document.close();
  2204. }
  2206. /* ============================================================
  2207.    PANIER MOBILE (tiroir)
  2208.    ============================================================ */
  2210. function openCartDrawer() {
  2211.     document.getElementById('posCart').classList.add('mobile-open');
  2212.     document.getElementById('cartBackdrop').classList.add('open');
  2213. }
  2214. function closeCartDrawer() {
  2215.     document.getElementById('posCart').classList.remove('mobile-open');
  2216.     document.getElementById('cartBackdrop').classList.remove('open');
  2217. }
  2219. document.getElementById('cartFab')?.addEventListener('click', openCartDrawer);
  2220. document.getElementById('cartCloseBtn')?.addEventListener('click', closeCartDrawer);
  2221. document.getElementById('cartBackdrop')?.addEventListener('click', closeCartDrawer);
  2223. /* ============================================================
  2224.    MODALS UTILITAIRES
  2225.    ============================================================ */
  2227. function openModal(id) {
  2228.     const el = document.getElementById(id);
  2229.     if (el) el.classList.add('open');
  2230. }
  2231. function closeModal(id) {
  2232.     const el = document.getElementById(id);
  2233.     if (el) el.classList.remove('open');
  2234. }
  2236. // Fermer en cliquant sur le fond de l'overlay
  2237. document.querySelectorAll('.pos-modal-overlay').forEach(overlay => {
  2238.     overlay.addEventListener('click', function (e) {
  2239.         if (e.target === this) closeModal(this.id);
  2240.     });
  2241. });
  2243. // Client badge → ouvre le modal de sélection
  2244. document.getElementById('customerBtn').addEventListener('click', function(e) {
  2245.     e.stopPropagation();
  2246.     openModal('customerModal');
  2247. });
  2249. // Bouton ajout client → ouvre le modal nouveau client
  2250. document.getElementById('addClientBtn')?.addEventListener('click', function(e) {
  2251.     e.stopPropagation();
  2252.     openModal('addClientModal');
  2253. });
  2255. // Sélection d'un client — listener direct sur chaque <li>
  2256. document.querySelectorAll('#customerModal .client-item').forEach(function(item) {
  2257.     item.addEventListener('click', function(e) {
  2258.         e.stopPropagation();
  2260.         const id      = this.dataset.clientId;
  2261.         const name    = this.dataset.clientName || this.querySelector('span').textContent.trim();
  2262.         const initial = name.charAt(0).toUpperCase();
  2264.         const f = { selectedClientId: id, selectedespeceClientId: id, selectedClientIdTicket: id };
  2265.         Object.entries(f).forEach(([fid, val]) => { const el = document.getElementById(fid); if (el) el.value = val; });
  2267.         const nd = document.getElementById('clientNameDisplay');
  2268.         const ad = document.getElementById('clientAvatarText');
  2269.         if (nd) nd.textContent = name;
  2270.         if (ad) ad.textContent = initial;
  2272.         closeModal('customerModal');
  2273.     });
  2274. });
  2276. /* ============================================================
  2277.    VIDER LE PANIER
  2278.    ============================================================ */
  2280. function confirmClearCart() {
  2281.     if (confirm('Vider complètement le panier ? Cette action est irréversible.')) {
  2282.         document.getElementById('clearCartForm').submit();
  2283.     }
  2284. }
  2286. /* ============================================================
  2287.    RECHERCHE & SCAN CODE-BARRES
  2288.    ============================================================ */
  2290. function isBarcodeLike(v) {
  2291.     return /^\d{8,13}$/.test(v);
  2292. }
  2294. function scanBarcodeAndAddToCart(code) {
  2295.     if (!CAISSE_SESSION_OUVERTE) {
  2296.         openModal('noCaisseSessionModal');
  2297.         return;
  2298.     }
  2299.     playCaisseBeep();
  2300.     document.getElementById('scanBarcodeInput').value = code;
  2301.     document.getElementById('scanBarcodeForm').submit();
  2302. }
  2304. document.addEventListener('DOMContentLoaded', function () {
  2305.     const searchInput = document.getElementById('searchInput');
  2306.     if (!searchInput) return;
  2308.     searchInput.focus();
  2309.     searchInput.addEventListener('click', function () { this.select(); });
  2311.     searchInput.addEventListener('keypress', function (e) {
  2312.         if (e.key === 'Enter') {
  2313.             e.preventDefault();
  2314.             const v = this.value.trim();
  2315.             if (isBarcodeLike(v)) {
  2316.                 scanBarcodeAndAddToCart(v);
  2317.             } else {
  2318.                 this.form.submit();
  2319.             }
  2320.         }
  2321.     });
  2323.     let scanTimeout;
  2324.     searchInput.addEventListener('input', function (e) {
  2325.         const v = this.value.trim();
  2327.         // Code-barres tapé/scanné : dès que la frappe s'arrête, on l'ajoute
  2328.         // directement au panier (comportement d'un vrai scanner de caisse).
  2329.         if (isBarcodeLike(v)) {
  2330.             clearTimeout(scanTimeout);
  2331.             scanTimeout = setTimeout(() => {
  2332.                 if (this.value.trim() === v) scanBarcodeAndAddToCart(v);
  2333.             }, 150);
  2334.             return;
  2335.         }
  2337.         // Certains scanners "collent" le code d'un coup (paste-like input) :
  2338.         // même logique, mais on retombe sur la recherche classique si ce
  2339.         // n'est finalement pas un code-barres (ex: texte collé).
  2340.         if (e.inputType === 'insertReplacementText' || e.inputType === 'insertFromPaste') {
  2341.             clearTimeout(scanTimeout);
  2342.             scanTimeout = setTimeout(() => {
  2343.                 if (this.value.trim() !== v) return;
  2344.                 if (isBarcodeLike(v)) {
  2345.                     scanBarcodeAndAddToCart(v);
  2346.                 } else {
  2347.                     this.form.submit();
  2348.                 }
  2349.             }, 50);
  2350.         }
  2351.     });
  2352. });
  2354. /* ============================================================
  2355.    FORMULAIRES DE REMISE (AJAX)
  2356.    ============================================================ */
  2358. document.addEventListener('DOMContentLoaded', function () {
  2359.     document.querySelectorAll('.discount-form').forEach(form => {
  2360.         form.addEventListener('submit', function (e) {
  2361.             e.preventDefault();
  2362.             fetch(this.action, {
  2363.                 method: 'POST',
  2364.                 body: new FormData(this),
  2365.                 headers: { 'X-Requested-With': 'XMLHttpRequest' }
  2366.             })
  2367.             .then(r => r.json())
  2368.             .then(data => { if (data.success) window.location.reload(); })
  2369.             .catch(() => this.submit());
  2370.         });
  2371.     });
  2372. });
  2374. /* ============================================================
  2375.    CHANGEMENT DE SALARIÉ / DÉCONNEXION
  2376.    ============================================================ */
  2378. document.addEventListener('DOMContentLoaded', function () {
  2379.     var logoutBtn = document.getElementById('shiftLogoutBtn');
  2380.     if (!logoutBtn) return;
  2382.     logoutBtn.addEventListener('click', function (e) {
  2383.         var panierCount = parseInt(this.dataset.panierCount || '0', 10);
  2384.         var message = panierCount > 0
  2385.             ? 'Le panier en cours contient ' + panierCount + ' article(s) non validé(s) qui seront perdus. Se déconnecter maintenant ?'
  2386.             : 'Terminer votre service et laisser la place au salarié suivant ?';
  2388.         if (!window.confirm(message)) {
  2389.             e.preventDefault();
  2390.         }
  2391.     });
  2392. });
  2393. </script>
  2395. {% endblock %}