templates/produit/index.html.twig line 1

Open in your IDE?
  1. {# =======================================================
  2.    JULICO Home Page — with Search & Filter
  3.    ✅ Place at: templates/produit/index.html.twig
  4.    ======================================================= #}
  5. <!DOCTYPE html>
  6. <html lang="{{ _locale ?? 'en' }}">
  7. <head>
  8. <meta charset="UTF-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <title>Julico — Where Trust Meets Success</title>
  11. <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  12. <link rel="stylesheet" href="/css/julico-home.css">
  13. <style>
  14.   /* Global defensive resets to avoid horizontal scroll on mobile */
  15.   *, *::before, *::after { box-sizing: border-box; }
  16.   html, body { max-width: 100%; overflow-x: hidden; }
  17.   img, video, iframe { max-width: 100%; height: auto; }
  19.   .prod-card { display:flex; flex-direction:column; }
  20.   .prod-card-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1; }
  21.   .prod-card-link:hover { color:inherit; }
  22.   .prod-img.out-of-stock img { opacity:0.35; filter:grayscale(60%); }
  23.   .out-of-stock-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  24.   .out-of-stock-label { background:#1f2937; color:white; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:6px 14px; border-radius:100px; }
  25.   .add-btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer; }
  26.   .card-qty-row { display:none; align-items:center; border:1.5px solid var(--brand); border-radius:var(--rsm); overflow:hidden; height:34px; }
  27.   .card-qty-row.visible { display:flex; }
  28.   .cq-btn { width:34px; height:34px; background:var(--brand-light); color:var(--brand); border:none; font-size:18px; font-weight:700; cursor:pointer; font-family:var(--font); display:flex; align-items:center; justify-content:center; transition:background .15s; touch-action:manipulation; flex-shrink:0; }
  29.   .cq-btn:hover { background:var(--brand); color:white; }
  30.   .cq-num { min-width:28px; text-align:center; font-size:13px; font-weight:800; color:var(--gray-900); border-left:1px solid var(--brand-mid); border-right:1px solid var(--brand-mid); padding:0 4px; }
  32.   /* ── SHOP LOGO IN SUBNAV (replaces the 🏪 emoji when a logo is set) ── */
  33.   .snav-logo { width:20px; height:20px; border-radius:5px; object-fit:cover; vertical-align:middle; border:1px solid var(--gray-100); }
  35.   /* ── SHOP HEADER BANNER (shown when viewing a single shop) ── */
  36.   .shop-hero { display:flex; align-items:center; gap:16px; background:var(--white); border:1.5px solid var(--gray-100); border-radius:var(--rlg); padding:18px 22px; margin:24px 0; box-shadow:var(--shadow-sm); }
  37.   .shop-hero-logo { width:64px; height:64px; border-radius:14px; object-fit:cover; border:1.5px solid var(--gray-100); flex-shrink:0; }
  38.   .shop-hero-logo.blank { display:flex; align-items:center; justify-content:center; background:var(--gray-50); font-size:30px; color:var(--gray-300); }
  39.   .shop-hero-name { font-size:22px; font-weight:800; color:var(--gray-900); letter-spacing:-0.02em; }
  40.   .shop-hero-sub { font-size:13px; color:var(--gray-500); margin-top:2px; }
  41.   @media (max-width:480px){
  42.     .shop-hero { padding:14px 16px; gap:12px; margin:16px 0; }
  43.     .shop-hero-logo { width:52px; height:52px; border-radius:12px; }
  44.     .shop-hero-name { font-size:18px; }
  45.   }
  47.   /* ── ADMIN PILL IN TOP NAV (visible only to ROLE_ADMIN) ── */
  48.   .nav-admin-btn {
  49.     display: inline-flex; align-items: center; gap: 4px;
  50.     background: #fef3c7; color: #92400e;
  51.     border: 1.5px solid #fcd34d;
  52.     font-size: 13px; font-weight: 800;
  53.     padding: 7px 12px; border-radius: var(--rsm);
  54.     text-decoration: none; transition: all .2s;
  55.     min-height: 38px; white-space: nowrap;
  56.   }
  57.   .nav-admin-btn:hover { background: #fde68a; color: #78350f; border-color: #f59e0b; }
  58.   @media (max-width: 480px) {
  59.     .nav-admin-btn { font-size: 11px; padding: 5px 9px; min-height: 36px; gap: 3px; }
  60.   }
  62.   /* ── VENDOR PILL IN TOP NAV (visible to users linked to a shop) ── */
  63.   .nav-vendor-btn {
  64.     display: inline-flex; align-items: center; gap: 4px;
  65.     background: var(--brand-light); color: var(--brand-dark);
  66.     border: 1.5px solid var(--brand-mid);
  67.     font-size: 13px; font-weight: 800;
  68.     padding: 7px 12px; border-radius: var(--rsm);
  69.     text-decoration: none; transition: all .2s;
  70.     min-height: 38px; white-space: nowrap;
  71.     position: relative;
  72.   }
  73.   .nav-vendor-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  74.   /* ── NEW-ORDERS BADGE on the "My Shop" button (filled by JS) ── */
  75.   .nav-vendor-badge {
  76.     display: none;
  77.     position: absolute;
  78.     top: -7px; right: -7px;
  79.     min-width: 18px; height: 18px;
  80.     padding: 0 5px;
  81.     background: #ef4444; color: #fff;
  82.     font-size: 11px; font-weight: 800;
  83.     line-height: 18px; text-align: center;
  84.     border-radius: 100px;
  85.     border: 2px solid #fff;
  86.     box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  87.   }
  88.   .nav-vendor-badge.show { display: inline-block; }
  89.   @media (max-width: 480px) {
  90.     .nav-vendor-btn { font-size: 11px; padding: 5px 9px; min-height: 36px; gap: 3px; }
  91.   }
  93.   /* FILTER SIDEBAR */
  94.   .shop-layout { display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; margin-top:24px; }
  95.   .filter-sidebar { position:sticky; top:80px; }
  96.   .filter-card { background:var(--white); border:1.5px solid var(--gray-100); border-radius:var(--rlg); padding:20px; box-shadow:var(--shadow-sm); }
  97.   .filter-title { font-size:14px; font-weight:800; color:var(--gray-900); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; }
  98.   .filter-section { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--gray-100); }
  99.   .filter-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
  100.   .filter-lbl { font-size:11px; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:10px; }
  101.   .cat-check { display:flex; align-items:center; gap:8px; margin-bottom:7px; cursor:pointer; }
  102.   .cat-check input { width:15px; height:15px; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }
  103.   .cat-check span { font-size:13px; font-weight:500; color:var(--gray-700); cursor:pointer; }
  104.   .price-row { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; }
  105.   .price-input { height:36px; border:1.5px solid var(--gray-200); border-radius:var(--rsm); padding:0 10px; font-family:var(--font); font-size:13px; color:var(--gray-800); background:var(--gray-50); outline:none; width:100%; box-sizing:border-box; }
  106.   .price-input:focus { border-color:var(--brand); background:var(--white); }
  107.   .promo-check { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid var(--gray-200); border-radius:var(--rsm); cursor:pointer; transition:all .2s; }
  108.   .promo-check:hover { border-color:var(--brand); background:var(--brand-light); }
  109.   .promo-check input { width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
  110.   .promo-check span { font-size:13px; font-weight:700; color:var(--gray-700); }
  111.   .btn-apply { width:100%; height:42px; background:var(--brand); color:white; border:none; border-radius:var(--rsm); font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; transition:background .2s; margin-top:16px; }
  112.   .btn-apply:hover { background:var(--brand-dark); }
  113.   .btn-clear { width:100%; height:38px; background:var(--white); color:var(--gray-500); border:1.5px solid var(--gray-200); border-radius:var(--rsm); font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; margin-top:8px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
  114.   .btn-clear:hover { border-color:var(--brand); color:var(--brand); }
  115.   .sort-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  116.   .results-count { font-size:13px; color:var(--gray-500); }
  117.   .results-count strong { color:var(--gray-900); font-weight:800; }
  118.   .sort-select { height:36px; border:1.5px solid var(--gray-200); border-radius:var(--rsm); padding:0 12px; font-family:var(--font); font-size:13px; color:var(--gray-700); background:var(--white); outline:none; cursor:pointer; }
  119.   .sort-select:focus { border-color:var(--brand); }
  120.   .active-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  121.   .pill { display:inline-flex; align-items:center; gap:5px; background:var(--brand-light); border:1px solid var(--brand-mid); color:var(--brand-dark); font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; text-decoration:none; }
  122.   .filter-badge { background:var(--brand); color:white; font-size:10px; font-weight:800; padding:2px 7px; border-radius:100px; margin-left:6px; }
  123.   .filter-toggle-btn { display:none; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--gray-200); border-radius:var(--rsm); padding:9px 16px; font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; color:var(--gray-700); margin-bottom:14px; width:100%; }
  124.   .filter-toggle-btn:hover { border-color:var(--brand); color:var(--brand); }
  125.   .store-link { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--gray-600); text-decoration:none; padding:6px 0; transition:color .2s; }
  126.   .store-link:hover { color:var(--brand); }
  127.   @media(max-width:900px) {
  128.     .shop-layout { grid-template-columns:1fr; }
  129.     .filter-sidebar { position:static; display:none; }
  130.     .filter-sidebar.open { display:block; }
  131.     .filter-toggle-btn { display:flex; }
  132.   }
  134.   /* ═══════════════════════════════════════════════════════
  135.      TABLET / SMALL DESKTOP (≤ 1024px) — soften padding
  136.      ═══════════════════════════════════════════════════════ */
  137.   @media (max-width: 1024px) {
  138.     .page { padding-left: 16px !important; padding-right: 16px !important; }
  139.   }
  141.   /* ═══════════════════════════════════════════════════════
  142.      MOBILE (≤ 768px)
  143.      ═══════════════════════════════════════════════════════ */
  144.   @media (max-width: 768px) {
  146.     /* PAGE container */
  147.     .page { padding: 0 12px !important; }
  149.     /* NAVBAR */
  150.     .navbar { padding: 8px 12px !important; }
  151.     .navbar-inner {
  152.       flex-wrap: wrap !important;
  153.       gap: 6px !important;
  154.       align-items: center !important;
  155.     }
  156.     .navbar-inner .logo { order: 1; flex-shrink: 0; }
  157.     .navbar-inner .logo img { height: 38px !important; }
  158.     .navbar-inner .location-btn { display: none !important; }
  159.     .navbar-inner .nav-actions {
  160.       order: 2;
  161.       margin-left: auto;
  162.       gap: 6px !important;
  163.     }
  164.     .navbar-inner .search-wrap {
  165.       order: 3;
  166.       flex: 1 1 100% !important;
  167.       width: 100% !important;
  168.       max-width: 100% !important;
  169.       margin: 4px 0 0 !important;
  170.     }
  171.     .navbar-inner .search-wrap input { font-size: 14px !important; }
  172.     .nav-actions > .btn-signin,
  173.     .nav-actions > .nav-icon-btn { display: inline-flex !important; }
  174.     .nav-actions > .btn-signin,
  175.     .nav-actions > .btn-register {
  176.       font-size: 12px !important;
  177.       padding: 6px 10px !important;
  178.       min-height: 36px !important;
  179.       white-space: nowrap;
  180.     }
  181.     .nav-actions > .nav-icon-btn {
  182.       width: 36px !important;
  183.       height: 36px !important;
  184.     }
  186.     /* SUBNAV — horizontal scroll */
  187.     .subnav-inner {
  188.       flex-wrap: nowrap !important;
  189.       overflow-x: auto !important;
  190.       -webkit-overflow-scrolling: touch !important;
  191.       scroll-snap-type: x mandatory;
  192.       padding: 8px 12px !important;
  193.       gap: 6px !important;
  194.     }
  195.     .subnav-inner::-webkit-scrollbar { display: none; }
  196.     .snav-item {
  197.       flex-shrink: 0 !important;
  198.       scroll-snap-align: start;
  199.       font-size: 12px !important;
  200.       padding: 7px 12px !important;
  201.       white-space: nowrap;
  202.     }
  204.     /* B2B vendor strip — single column, smaller padding */
  205.     .b2b-strip {
  206.       grid-template-columns: 1fr !important;
  207.       padding: 24px 18px !important;
  208.       gap: 24px !important;
  209.       border-radius: 16px !important;
  210.     }
  211.     .b2b-tag { font-size: 11px !important; }
  212.     .b2b-h { font-size: 22px !important; line-height: 1.2 !important; }
  213.     .b2b-p { font-size: 13px !important; line-height: 1.6 !important; }
  214.     .b2b-feats {
  215.       grid-template-columns: 1fr 1fr !important;
  216.       gap: 12px !important;
  217.     }
  218.     .b2b-feat { padding: 14px !important; }
  219.     .b2b-ficon { font-size: 22px !important; }
  220.     .b2b-ft { font-size: 13px !important; }
  221.     .b2b-fd { font-size: 11px !important; line-height: 1.45 !important; }
  222.     .b2b-btn {
  223.       width: 100% !important;
  224.       justify-content: center !important;
  225.       font-size: 14px !important;
  226.       padding: 12px 18px !important;
  227.     }
  229.     /* PROMO cards strip — single column */
  230.     .promo-strip {
  231.       grid-template-columns: 1fr !important;
  232.       gap: 10px !important;
  233.       margin-bottom: 18px !important;
  234.     }
  235.     .promo-card { padding: 14px !important; }
  236.     .p-em { font-size: 28px !important; }
  237.     .p-title { font-size: 15px !important; }
  238.     .p-sub { font-size: 12px !important; }
  240.     /* PWA install banner — stack */
  241.     .pwa-banner {
  242.       grid-template-columns: 1fr !important;
  243.       padding: 24px 18px !important;
  244.       gap: 22px !important;
  245.       border-radius: 16px !important;
  246.     }
  247.     .pwa-h { font-size: 22px !important; line-height: 1.2 !important; }
  248.     .pwa-p { font-size: 13px !important; }
  249.     .pwa-features {
  250.       grid-template-columns: 1fr 1fr !important;
  251.       gap: 8px !important;
  252.     }
  253.     .pwa-feat { font-size: 12px !important; padding: 8px 10px !important; }
  254.     .pwa-install-btn {
  255.       width: 100% !important;
  256.       justify-content: center !important;
  257.       font-size: 14px !important;
  258.     }
  259.     .pwa-device-card { padding: 16px !important; }
  260.     .pwa-device-name { font-size: 14px !important; }
  261.     .pwa-device-browser { font-size: 11px !important; }
  263.     /* FOOTER — 2 cols on tablet, content stacked */
  264.     .footer-top {
  265.       grid-template-columns: 1fr 1fr !important;
  266.       gap: 24px !important;
  267.       padding: 28px 18px !important;
  268.     }
  269.     .footer-bottom {
  270.       flex-direction: column !important;
  271.       gap: 10px !important;
  272.       text-align: center !important;
  273.       padding: 16px 18px !important;
  274.     }
  275.     .footer-bname { font-size: 22px !important; }
  277.     /* Hero results header */
  278.     .page > div[style*="font-size:22px"] { font-size: 18px !important; }
  280.     /* CART BAR — override external julico-home.css transform centering */
  281.     .cart-bar {
  282.       position: fixed !important;
  283.       bottom: 16px !important;
  284.       left: 16px !important;
  285.       right: 16px !important;
  286.       width: auto !important;
  287.       max-width: calc(100vw - 32px) !important;
  288.       transform: none !important;
  289.       margin: 0 !important;
  290.       box-sizing: border-box !important;
  291.       justify-content: center !important;
  292.     }
  293.   }
  295.   /* ═══════════════════════════════════════════════════════
  296.      SMALL PHONES (≤ 480px)
  297.      ═══════════════════════════════════════════════════════ */
  298.   @media (max-width: 480px) {
  300.     .page { padding: 0 10px !important; }
  302.     .cart-bar {
  303.       position: fixed !important;
  304.       bottom: 12px !important;
  305.       left: 12px !important;
  306.       right: 12px !important;
  307.       width: auto !important;
  308.       max-width: calc(100vw - 24px) !important;
  309.       transform: none !important;
  310.       margin: 0 !important;
  311.       padding: 10px 14px !important;
  312.       font-size: 12px !important;
  313.       box-sizing: border-box !important;
  314.       justify-content: center !important;
  315.     }
  316.     .cart-label { display: none; }
  317.     .cart-total { font-size: 14px !important; }
  319.     .card-qty-row { height: 32px !important; }
  320.     .cq-btn {
  321.       width: 30px !important;
  322.       height: 30px !important;
  323.       min-width: 30px !important;
  324.       min-height: 30px !important;
  325.       font-size: 16px !important;
  326.     }
  327.     .cq-num {
  328.       min-width: 22px !important;
  329.       font-size: 12px !important;
  330.       padding: 0 3px !important;
  331.     }
  332.     .prod-price { font-size: 18px !important; }
  333.     .prod-price sup { font-size: 11px !important; }
  334.     .prod-card > div:last-child { padding: 0 10px 12px !important; }
  335.     .prod-name { font-size: 13px !important; }
  336.     .prod-brand { font-size: 10px !important; }
  337.     .prod-unit { font-size: 11px !important; }
  339.     .prod-grid {
  340.       grid-template-columns: 1fr 1fr !important;
  341.       gap: 10px !important;
  342.     }
  344.     .b2b-strip { padding: 20px 14px !important; }
  345.     .b2b-h { font-size: 20px !important; }
  346.     .b2b-feats { grid-template-columns: 1fr !important; }
  348.     .pwa-banner { padding: 20px 14px !important; }
  349.     .pwa-h { font-size: 20px !important; }
  351.     .footer-top {
  352.       grid-template-columns: 1fr !important;
  353.       gap: 22px !important;
  354.       padding: 24px 16px !important;
  355.     }
  356.     .footer-socials { justify-content: flex-start !important; }
  358.     .filter-toggle-btn { font-size: 13px !important; padding: 10px 14px !important; }
  360.     .sort-bar { flex-direction: column !important; align-items: stretch !important; }
  361.     .sort-select { width: 100% !important; }
  362.   }
  364.   /* ═══════════════════════════════════════════════════════
  365.      TINY PHONES (≤ 380px)
  366.      ═══════════════════════════════════════════════════════ */
  367.   @media (max-width: 380px) {
  368.     .page { padding: 0 8px !important; }
  369.     .prod-grid { gap: 8px !important; }
  370.     .prod-card > div:last-child { padding: 0 8px 10px !important; }
  371.     .b2b-h { font-size: 18px !important; }
  372.     .pwa-h { font-size: 18px !important; }
  373.     .navbar-inner .logo img { height: 32px !important; }
  374.     .nav-actions > .btn-signin,
  375.     .nav-actions > .btn-register {
  376.       font-size: 11px !important;
  377.       padding: 5px 8px !important;
  378.     }
  379.   }
  380. </style>
  382. <!-- ═════════════ PWA (Progressive Web App) ═════════════ -->
  383. <link rel="manifest" href="/manifest.json">
  384. <meta name="theme-color" content="#00a7b5">
  385. <meta name="mobile-web-app-capable" content="yes">
  386. <meta name="apple-mobile-web-app-capable" content="yes">
  387. <meta name="apple-mobile-web-app-status-bar-style" content="default">
  388. <meta name="apple-mobile-web-app-title" content="Julico">
  389. <link rel="apple-touch-icon" href="/images/julico-icon-192.png">
  390. <link rel="apple-touch-icon" sizes="192x192" href="/images/julico-icon-192.png">
  391. <link rel="apple-touch-icon" sizes="512x512" href="/images/julico-icon-512.png">
  392. <!-- ════════════════════════════════════════════════════ -->
  394. </head>
  395. <body>
  397. {# ── Cart session ── #}
  398. {% set panier = app.session.get('panier') ?? [] %}
  399. {% set cartCount = 0 %}
  400. {% set cartTotal = 0 %}
  401. {% for pan in panier %}
  402.   {% set cartCount = cartCount + pan.qtt %}
  403.   {% for p in produits %}
  404.     {% if p.id == pan.id %}
  405.       {% set unitPrice = p.prix %}
  406.       {% if p.salePrice is defined and p.salePrice and p.salePrice > 0 and p.salePrice < p.prix %}
  407.         {% set unitPrice = p.salePrice %}
  408.       {% endif %}
  409.       {% set cartTotal = cartTotal + (unitPrice * pan.qtt) %}
  410.     {% endif %}
  411.   {% endfor %}
  412. {% endfor %}
  414. {# ── Safe defaults for filter vars ── #}
  415. {% set currentQ          = currentQ ?? '' %}
  416. {% set currentMin        = currentMin ?? '' %}
  417. {% set currentMax        = currentMax ?? '' %}
  418. {% set currentPromo      = currentPromo ?? '' %}
  419. {% set currentCategories = currentCategories ?? [] %}
  420. {% set currentSort       = currentSort ?? '' %}
  421. {% set activeFilters     = activeFilters ?? 0 %}
  422. {% set allCategories     = allCategories ?? [] %}
  424. {# ── Which shop is being viewed (when browsing /home/{shopName}) ── #}
  425. {% set selectedShopName = app.request.attributes.get('shopName') ?: app.request.query.get('shopName') %}
  426. {% set selectedShop = null %}
  427. {% if selectedShopName %}
  428.   {% for m in magasins %}{% if m.nom == selectedShopName %}{% set selectedShop = m %}{% endif %}{% endfor %}
  429. {% endif %}
  431. {# ── Is any filter active? ── #}
  432. {% set filtersActive = (currentQ is not empty) or (currentPromo is not empty) or (currentMin is not empty) or (currentMax is not empty) or (currentCategories is not empty) %}
  434. {# ── Is the logged-in user a vendor (linked to ≥1 shop)? ── #}
  435. {% set isVendor = false %}
  436. {% if app.user %}
  437.   {% for mu in app.user.magasinsuser %}
  438.     {% if mu.linked and mu.magasin %}{% set isVendor = true %}{% endif %}
  439.   {% endfor %}
  440. {% endif %}
  442. <!-- NAVBAR -->
  443. <nav class="navbar">
  444.   <div class="navbar-inner">
  445.     <a href="{{ path('app_home') }}" class="logo">
  446.       <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  447.     </a>
  448.     {# ── PHASE 3 Step 3: Dynamic country pill (replaces hardcoded Beirut, LB) ── #}
  449.     <button type="button" class="location-btn" onclick="if(window.openCountryModal){window.openCountryModal();}">
  450.       <svg viewBox="0 0 20 20" fill="currentColor" style="width:14px;height:14px;color:var(--brand)"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg>
  451.       {% if selectedCountry is defined and selectedCountry %}
  452.         {{ selectedCountry.name }}{% if selectedCountry.isoCode %} ({{ selectedCountry.isoCode }}){% endif %}
  453.       {% else %}
  454.         Choose country
  455.       {% endif %}
  456.       <span style="color:var(--gray-400);font-size:10px;margin-left:4px">▾</span>
  457.     </button>
  458.     <div class="search-wrap">
  459.       <form action="{{ path('app_home') }}" method="GET">
  460.         <svg class="search-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>
  461.         <input type="text" name="q" value="{{ currentQ }}" placeholder="Search products, categories…">
  462.         <button type="submit" class="search-btn">
  463.           <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>
  464.         </button>
  465.       </form>
  466.     </div>
  467.     <div class="nav-actions">
  468.       <a href="{{ path('app_panier') }}" class="nav-icon-btn" style="position:relative" title="My Cart">
  469.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
  470.         {% if cartCount > 0 %}<span class="nbadge" id="nav-cart-badge">{{ cartCount }}</span>{% endif %}
  471.       </a>
  472.       {% if app.user %}
  473.         <a href="{{ path('app_orders') }}" class="nav-icon-btn" title="My Orders">
  474.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  475.             <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
  476.             <rect x="9" y="3" width="6" height="4" rx="1"/>
  477.             <path d="M9 12h6M9 16h4"/>
  478.           </svg>
  479.         </a>
  481.         {# ── Vendor shortcut: visible to users linked to a shop ── #}
  482.         {% if isVendor %}
  483.           <a href="{{ path('vendor_dashboard') }}" class="nav-vendor-btn" title="My Shop">🏪 My Shop<span class="nav-vendor-badge" id="vendorNewBadge"></span></a>
  484.         {% endif %}
  486.         {# ── Admin shortcut: visible only to ROLE_ADMIN ── #}
  487.         {% if is_granted('ROLE_ADMIN') %}
  488.           <a href="{{ path('app_super_admin') }}" class="nav-admin-btn" title="Admin Tools">🛡️ Admin</a>
  489.         {% endif %}
  491.         <a href="{{ path('app_profile') }}" class="btn-signin">{{ app.user.pseudo }}</a>
  492.         <a href="/logout" class="btn-register">Logout</a>
  493.       {% else %}
  494.         <a href="/login" class="btn-signin">Sign In</a>
  495.         <a href="/register" class="btn-register">Register Free</a>
  496.       {% endif %}
  497.     </div>
  498.   </div>
  499. </nav>
  501. <!-- SUBNAV -->
  502. <div class="subnav">
  503.   <div class="subnav-inner">
  504.     <a href="{{ path('app_home') }}" class="snav-item {% if not filtersActive and selectedShop is null %}active{% endif %}"><span>🏠</span>All</a>
  505.     {% for magasin in magasins %}
  506.       <a href="{{ path('app_home', {'shopName': magasin.nom}) }}" class="snav-item {% if selectedShop and selectedShop.nom == magasin.nom %}active{% endif %}">
  507.         {% if magasin.logoPath %}<img class="snav-logo" src="{{ asset('assets/uploads/logos/' ~ magasin.logoPath) }}" alt="">{% else %}<span>🏪</span>{% endif %}{{ magasin.nom }}
  508.       </a>
  509.     {% endfor %}
  510.     <a href="{{ path('app_home') }}?promo=1" class="snav-item {% if currentPromo %}active{% endif %}"><span>🔥</span>Promotions</a>
  511.   </div>
  512. </div>
  514. <div class="page">
  516.   {# Shop header when viewing a single shop #}
  517.   {% if selectedShop %}
  518.   <div class="shop-hero">
  519.     {% if selectedShop.logoPath %}
  520.       <img class="shop-hero-logo" src="{{ asset('assets/uploads/logos/' ~ selectedShop.logoPath) }}" alt="{{ selectedShop.nom }}">
  521.     {% else %}
  522.       <div class="shop-hero-logo blank">🏪</div>
  523.     {% endif %}
  524.     <div>
  525.       <div class="shop-hero-name">{{ selectedShop.nom }}</div>
  526.       <div class="shop-hero-sub">{{ produits|length }} product{% if produits|length != 1 %}s{% endif %}</div>
  527.     </div>
  528.   </div>
  529.   {% endif %}
  531.   {# Hero only when no filters active and not viewing a single shop #}
  532.   {% if not filtersActive and selectedShop is null %}
  534.   <!-- VENDOR SUBSCRIPTION (at top of page) -->
  535.   <div class="b2b-strip" style="margin-bottom:24px">
  536.     <div>
  537.       <div class="b2b-tag">💼 Sell on Julico</div>
  538.       <div class="b2b-h">List your products<br>for <span>$15/month</span></div>
  539.       <div class="b2b-p">Julico is a marketplace platform — we simply <strong>connect buyers with sellers</strong>. You handle your own pricing, transactions, and delivery directly. Flat $15/month. No commission, ever.</div>
  541.       <div style="margin:14px 0 20px">
  542.         <div style="font-size:12px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px">💳 Pay your subscription via</div>
  543.         <div style="display:flex;gap:8px;flex-wrap:wrap">
  544.           <span style="background:#ffffff;color:#0b3640;font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,167,181,0.35)">💸 Wish Money</span>
  545.           <span style="background:#ffffff;color:#0b3640;font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,167,181,0.35)">🌐 Western Union</span>
  546.           <span style="background:#ffffff;color:#0b3640;font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,167,181,0.35)">🏦 Bank Transfer</span>
  547.         </div>
  548.       </div>
  550.       <a href="{{ path('seller_apply') }}" class="b2b-btn">{{ isVendor ? 'Add another shop →' : 'Become a Seller →' }}</a>
  551.     </div>
  552.     <div class="b2b-feats">
  553.       <div class="b2b-feat"><div class="b2b-ficon">💰</div><div class="b2b-ft">Flat $15/month</div><div class="b2b-fd">No commission, no hidden fees. One simple subscription.</div></div>
  554.       <div class="b2b-feat"><div class="b2b-ficon">📦</div><div class="b2b-ft">Unlimited Products</div><div class="b2b-fd">List as many products as you want. Scale freely.</div></div>
  555.       <div class="b2b-feat"><div class="b2b-ficon">🤝</div><div class="b2b-ft">Direct Connection</div><div class="b2b-fd">Buyers contact you directly. You sell, you ship, you keep 100%.</div></div>
  556.       <div class="b2b-feat"><div class="b2b-ficon">🚪</div><div class="b2b-ft">Cancel Anytime</div><div class="b2b-fd">No long-term contracts. Total flexibility.</div></div>
  557.     </div>
  558.   </div>
  560.   <div class="promo-strip">
  561.     <a href="{{ path('app_home') }}?promo=1" class="promo-card pc1"><div class="p-em">🔥</div><div><div class="p-lbl">Limited Time</div><div class="p-title">Active Promotions</div><div class="p-sub">Set by sellers</div></div></a>
  562.     <a href="{{ path('app_home') }}" class="promo-card pc2"><div class="p-em">📦</div><div><div class="p-lbl">New Arrivals</div><div class="p-title">{{ produitsNouveaute|length }} New Products</div><div class="p-sub">Just added by sellers</div></div></a>
  563.     <a href="{{ path('app_home') }}" class="promo-card pc3"><div class="p-em">🌍</div><div><div class="p-lbl">B2B Marketplace</div><div class="p-title">Julico Platform</div><div class="p-sub">Direct buyer-seller</div></div></a>
  564.   </div>
  565.   {% endif %}
  567.   {# Cart session for JS #}
  568.   <script>
  569.     window.CART_SESSION = {
  570.       {% for pan in panier %}
  571.         "{{ pan.id }}": {{ pan.qtt }}{% if not loop.last %},{% endif %}
  572.       {% endfor %}
  573.     };
  574.   </script>
  576.   {# Results header when filtering #}
  577.   {% if filtersActive %}
  578.   <div style="margin:24px 0 16px">
  579.     <div style="font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px">Search Results</div>
  580.     <div style="font-size:22px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em">
  581.       {% if currentQ is not empty %}Results for "{{ currentQ }}"
  582.       {% elseif currentPromo %}🔥 Active Promotions
  583.       {% else %}Filtered Products{% endif %}
  584.       <span style="font-size:15px;font-weight:500;color:var(--gray-400)">({{ produits|length }})</span>
  585.     </div>
  586.   </div>
  587.   {% endif %}
  589.   {# Mobile filter toggle #}
  590.   <button class="filter-toggle-btn" onclick="toggleFilters()" style="margin-top:{{ filtersActive ? '0' : '24px' }}">
  591.     🔧 Filters {% if activeFilters > 0 %}<span class="filter-badge">{{ activeFilters }}</span>{% endif %}
  592.   </button>
  594.   <div class="shop-layout" style="margin-top:{{ filtersActive ? '0' : '24px' }}">
  596.     {# ── FILTER SIDEBAR ── #}
  597.     <div class="filter-sidebar" id="filter-sidebar">
  598.       <form action="{{ path('app_home') }}" method="GET" id="filter-form">
  600.         {# Preserve search query in filters #}
  601.         {% if currentQ is not empty %}
  602.           <input type="hidden" name="q" value="{{ currentQ }}">
  603.         {% endif %}
  605.         <div class="filter-card">
  606.           <div class="filter-title">
  607.             🔧 Filters
  608.             {% if activeFilters > 0 %}
  609.               <a href="{{ path('app_home') }}" style="font-size:11px;font-weight:600;color:var(--brand);text-decoration:none">Clear all</a>
  610.             {% endif %}
  611.           </div>
  613.           {# PROMO #}
  614.           <div class="filter-section">
  615.             <div class="filter-lbl">Deals</div>
  616.             <label class="promo-check" style="{{ currentPromo ? 'border-color:var(--brand);background:var(--brand-light)' : '' }}">
  617.               <input type="checkbox" name="promo" value="1" {{ currentPromo ? 'checked' : '' }} onchange="this.form.submit()">
  618.               <span>🔥 Promotions Only</span>
  619.             </label>
  620.           </div>
  622.           {# CATEGORIES #}
  623.           {% if allCategories|length > 0 %}
  624.           <div class="filter-section">
  625.             <div class="filter-lbl">Category</div>
  626.             {% for cat in allCategories %}
  627.             <label class="cat-check">
  628.               <input type="checkbox" name="categories[]" value="{{ cat.id }}"
  629.                 {% if currentCategories is iterable %}
  630.                   {% for cid in currentCategories %}
  631.                     {% if cid == cat.id %}checked{% endif %}
  632.                   {% endfor %}
  633.                 {% endif %}
  634.               >
  635.               <span>{{ cat.nom }}</span>
  636.             </label>
  637.             {% endfor %}
  638.           </div>
  639.           {% endif %}
  641.           {# PRICE #}
  642.           <div class="filter-section">
  643.             <div class="filter-lbl">Price Range ($)</div>
  644.             <div class="price-row">
  645.               <input type="number" name="min" class="price-input" placeholder="Min" value="{{ currentMin }}" min="0">
  646.               <span style="font-size:12px;color:var(--gray-400);text-align:center">—</span>
  647.               <input type="number" name="max" class="price-input" placeholder="Max" value="{{ currentMax }}" min="0">
  648.             </div>
  649.           </div>
  651.           {# STORES #}
  652.           <div class="filter-section">
  653.             <div class="filter-lbl">Store</div>
  654.             {% for magasin in magasins %}
  655.             <label class="cat-check">
  656.               <input type="checkbox" name="shopName" value="{{ magasin.nom }}"
  657.                 {% if app.request.query.get('shopName') == magasin.nom %}checked{% endif %}>
  658.               <span>🏪 {{ magasin.nom }}</span>
  659.             </label>
  660.             {% endfor %}
  661.           </div>
  663.           <button type="submit" class="btn-apply">Apply Filters</button>
  664.           <a href="{{ path('app_home') }}" class="btn-clear">Reset</a>
  665.         </div>
  667.       </form>
  668.     </div>
  670.     {# ── PRODUCTS AREA ── #}
  671.     <div>
  673.       {# Active filter pills #}
  674.       {% if activeFilters > 0 %}
  675.       <div class="active-pills">
  676.         {% if currentQ is not empty %}
  677.           <a href="{{ path('app_home') }}?promo={{ currentPromo }}&min={{ currentMin }}&max={{ currentMax }}" class="pill">🔍 "{{ currentQ }}" ×</a>
  678.         {% endif %}
  679.         {% if currentPromo %}
  680.           <a href="{{ path('app_home') }}?q={{ currentQ }}&min={{ currentMin }}&max={{ currentMax }}" class="pill">🔥 Promo ×</a>
  681.         {% endif %}
  682.         {% if currentMin is not empty %}
  683.           <a href="{{ path('app_home') }}?q={{ currentQ }}&promo={{ currentPromo }}&max={{ currentMax }}" class="pill">Min ${{ currentMin }} ×</a>
  684.         {% endif %}
  685.         {% if currentMax is not empty %}
  686.           <a href="{{ path('app_home') }}?q={{ currentQ }}&promo={{ currentPromo }}&min={{ currentMin }}" class="pill">Max ${{ currentMax }} ×</a>
  687.         {% endif %}
  688.       </div>
  689.       {% endif %}
  691.       {# Sort + count bar #}
  692.       <div class="sort-bar">
  693.         <span class="results-count"><strong>{{ produits|length }}</strong> product{% if produits|length != 1 %}s{% endif %} found</span>
  694.         <select class="sort-select" onchange="applySort(this.value)">
  695.           <option value="">Sort: Default</option>
  696.           <option value="price_asc"  {% if currentSort == 'price_asc' %}selected{% endif %}>Price: Low to High</option>
  697.           <option value="price_desc" {% if currentSort == 'price_desc' %}selected{% endif %}>Price: High to Low</option>
  698.           <option value="newest"     {% if currentSort == 'newest' %}selected{% endif %}>Newest First</option>
  699.           <option value="name_asc"   {% if currentSort == 'name_asc' %}selected{% endif %}>Name: A–Z</option>
  700.         </select>
  701.       </div>
  703.       {# Products #}
  704.       {% if produits|length > 0 %}
  705.       <div class="prod-grid">
  706.         {% for produit in produits %}
  708.         {% set qttValue = produit.qtt is defined ? produit.qtt : null %}
  709.         {% set isOutOfStock = (qttValue is null) or (qttValue <= 0) %}
  710.         {% set unitPrice = produit.prix %}
  711.         {% if produit.salePrice is defined and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  712.           {% set unitPrice = produit.salePrice %}
  713.         {% endif %}
  715.         <div class="prod-card" style="{% if isOutOfStock %}opacity:0.85{% endif %}" data-product-id="{{ produit.id }}">
  716.           <a href="{{ path('show_produit', {'id': produit.id}) }}" class="prod-card-link">
  717.             <div class="prod-img {% if isOutOfStock %}out-of-stock{% endif %}">
  718.               {% set imgs = produit.images %}
  719.               {% if imgs is not empty %}
  720.                 <img src="{{ asset('assets/uploads/products/' ~ imgs|first.fileName) }}"
  721.                      alt="{{ produit.productName }}"
  722.                      loading="lazy"
  723.                      onerror="this.onerror=null;this.src='{{ asset('uploads/products/' ~ imgs|first.fileName) }}'">
  724.               {% else %}
  725.                 <div style="font-size:40px;opacity:0.2{% if isOutOfStock %};filter:grayscale(80%){% endif %}">📦</div>
  726.               {% endif %}
  727.               {% if produit.promo and not isOutOfStock %}<span class="pbadge badge-sale">PROMO</span>{% endif %}
  728.               {% if isOutOfStock %}<div class="out-of-stock-overlay"><span class="out-of-stock-label">Out of Stock</span></div>{% endif %}
  729.             </div>
  730.             <div class="prod-body">
  731.               <div class="prod-brand">
  732.                 {% if produit.category is defined and produit.category %}{{ produit.category.nom }}{% endif %}
  733.                 {% if produit.magasin is defined and produit.magasin %} · {{ produit.magasin.nom }}{% endif %}
  734.               </div>
  735.               <div class="prod-name" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}">{{ produit.productName }}</div>
  736.               <div class="prod-unit">{{ produit.description|slice(0,40) }}{% if produit.description|length > 40 %}…{% endif %}</div>
  737.             </div>
  738.           </a>
  739.           <div style="padding:0 14px 14px;display:flex;align-items:center;justify-content:space-between;margin-top:auto;position:relative;z-index:5;">
  740.             <div>
  741.               {% if produit.salePrice is defined and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  742.                 <div class="prod-price" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}"><sup>$</sup>{{ produit.salePrice|number_format(2) }}</div>
  743.                 <div class="prod-old">${{ produit.prix|number_format(2) }}</div>
  744.               {% else %}
  745.                 <div class="prod-price" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}"><sup>$</sup>{{ produit.prix|number_format(2) }}</div>
  746.               {% endif %}
  747.             </div>
  748.             {% if isOutOfStock %}
  749.               <button class="add-btn" disabled style="background:var(--gray-200);color:var(--gray-400);cursor:not-allowed;font-size:11px;width:auto;padding:0 10px">Sold Out</button>
  750.             {% else %}
  751.               <div class="card-qty-row" id="qty-row-{{ produit.id }}">
  752.                 <button type="button" class="cq-btn" data-action="{{ path('panier_minus', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'home'}) }}" data-csrf="{{ csrf_token('authenticate') }}" data-id="{{ produit.id }}" data-price="{{ unitPrice }}" data-type="minus">−</button>
  753.                 <span class="cq-num" id="qty-num-{{ produit.id }}">0</span>
  754.                 <button type="button" class="cq-btn" data-action="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'home'}) }}" data-csrf="{{ csrf_token('authenticate') }}" data-id="{{ produit.id }}" data-price="{{ unitPrice }}" data-type="plus">+</button>
  755.               </div>
  756.               <button type="button" class="add-btn" id="add-btn-{{ produit.id }}"
  757.                       data-action="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'home'}) }}"
  758.                       data-csrf="{{ csrf_token('authenticate') }}"
  759.                       data-id="{{ produit.id }}"
  760.                       data-price="{{ unitPrice }}"
  761.                       title="Add to cart">+</button>
  762.             {% endif %}
  763.           </div>
  764.         </div>
  766.         {% endfor %}
  767.       </div>
  769.       {# Pagination #}
  770.       {% if previous is defined and next is defined %}
  771.       {% if previous >= 0 or next < produits|length %}
  772.       <div style="display:flex;justify-content:center;gap:12px;margin-top:32px">
  773.         {% if previous >= 0 %}<a href="{{ path('app_home') }}?offset={{ previous }}&q={{ currentQ }}&promo={{ currentPromo }}&min={{ currentMin }}&max={{ currentMax }}" class="see-all">← Previous</a>{% endif %}
  774.         {% if next < produits|length %}<a href="{{ path('app_home') }}?offset={{ next }}&q={{ currentQ }}&promo={{ currentPromo }}&min={{ currentMin }}&max={{ currentMax }}" class="see-all">Next →</a>{% endif %}
  775.       </div>
  776.       {% endif %}
  777.       {% endif %}
  779.       {% else %}
  780.       <div style="text-align:center;padding:60px 20px;color:var(--gray-400)">
  781.         <div style="font-size:48px;margin-bottom:16px">🔍</div>
  782.         <div style="font-size:18px;font-weight:700;color:var(--gray-600)">No products found</div>
  783.         <div style="margin-top:8px;margin-bottom:20px">Try adjusting your search or filters</div>
  784.         <a href="{{ path('app_home') }}" class="see-all" style="display:inline-flex">Clear all filters</a>
  785.       </div>
  786.       {% endif %}
  788.     </div>{# /products area #}
  789.   </div>{# /shop-layout #}
  791.   {% if not filtersActive and selectedShop is null %}
  792.   <!-- PWA -->
  793.   <div class="pwa-banner">
  794.     <div class="pwa-left">
  795.       <div class="pwa-chip"><span class="pwa-chip-dot"></span> <span id="pwa-chip-text">Web App — No App Store Needed</span></div>
  796.       <div class="pwa-h" id="pwa-headline">Install Julico on<br>Your Device, Instantly</div>
  797.       <div class="pwa-p" id="pwa-desc">Get the full Julico experience right from your browser.</div>
  798.       <div class="pwa-features">
  799.         <div class="pwa-feat"><span class="pwa-feat-icon">⚡</span> Instant Load</div>
  800.         <div class="pwa-feat"><span class="pwa-feat-icon">📴</span> Works Offline</div>
  801.         <div class="pwa-feat"><span class="pwa-feat-icon">🔔</span> Push Alerts</div>
  802.         <div class="pwa-feat"><span class="pwa-feat-icon">🔒</span> Secure</div>
  803.       </div>
  804.       <button class="pwa-install-btn" id="pwa-btn" onclick="handleInstall()">
  805.         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v12m0 0l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/></svg>
  806.         <span id="pwa-btn-text">Add to Home Screen</span>
  807.       </button>
  808.     </div>
  809.     <div class="pwa-right">
  810.       <div class="pwa-device-card">
  811.         <div class="pwa-device-header">
  812.           <div class="pwa-device-icon" id="pwa-device-icon">📱</div>
  813.           <div>
  814.             <div class="pwa-device-name" id="pwa-device-name">Detecting device…</div>
  815.             <div class="pwa-device-browser" id="pwa-device-browser">Checking browser…</div>
  816.           </div>
  817.           <div class="pwa-device-status ready" id="pwa-device-status">Ready</div>
  818.         </div>
  819.         <div class="pwa-steps-wrap" id="pwa-steps"></div>
  820.       </div>
  821.     </div>
  822.   </div>
  823.   <div class="install-toast" id="install-toast"><div class="toast-icon">✓</div><span id="toast-msg">Julico added!</span></div>
  824.   {% endif %}
  826. </div>{# /page #}
  828. <!-- FOOTER -->
  829. <footer>
  830.   <div class="footer-top">
  831.     <div>
  832.       <div class="footer-bname">JULI<span>CO</span></div>
  833.       <div class="footer-btag">Where Trust Meets Success</div>
  834.       <div class="footer-bdesc">Lebanon's leading B2B wholesale platform.</div>
  835.       <div class="footer-socials">
  836.         <div class="social-btn">f</div><div class="social-btn">in</div>
  837.         <div class="social-btn">tw</div><div class="social-btn">ig</div>
  838.       </div>
  839.     </div>
  840.     <div>
  841.       <div class="footer-ct">Shop</div>
  842.       <a href="{{ path('app_home') }}" class="footer-link">All Products</a>
  843.       <a href="{{ path('app_home') }}?promo=1" class="footer-link">Promotions</a>
  844.       {% for magasin in magasins %}<a href="{{ path('app_home', {'shopName': magasin.nom}) }}" class="footer-link">{{ magasin.nom }}</a>{% endfor %}
  845.     </div>
  846.     <div>
  847.       <div class="footer-ct">Categories</div>
  848.       {% for cat in allCategories|slice(0,6) %}
  849.         <a href="{{ path('app_home') }}?categories[]={{ cat.id }}" class="footer-link">{{ cat.nom }}</a>
  850.       {% endfor %}
  851.     </div>
  852.     <div>
  853.       <div class="footer-ct">Account</div>
  854.       <a href="/register" class="footer-link">Register</a>
  855.       <a href="/login" class="footer-link">Sign In</a>
  856.       <a href="{{ path('app_panier') }}" class="footer-link">My Cart</a>
  857.       {% if app.user %}<a href="{{ path('app_orders') }}" class="footer-link">My Orders</a>{% endif %}
  858.     </div>
  859.     <div>
  860.       <div class="footer-ct">Support</div>
  861.       <a href="#" class="footer-link">Help Center</a>
  862.       <a href="#" class="footer-link">Contact Us</a>
  863.       <a href="{{ path('app_locale', {'_locale': 'en'}) }}" class="footer-link">English</a>
  864.       <a href="{{ path('app_locale', {'_locale': 'fr'}) }}" class="footer-link">Français</a>
  865.     </div>
  866.   </div>
  867.   <div class="footer-bottom">
  868.     <div class="footer-copy">© {{ "now"|date("Y") }} Julico S.A.R.L. All rights reserved.</div>
  869.     <div class="footer-legal"><a href="#">Privacy</a><a href="#">Terms</a></div>
  870.   </div>
  871. </footer>
  873. <a href="{{ path('app_panier') }}" class="cart-bar" id="cart-bar"
  874.    style="{% if cartCount == 0 %}display:none;{% endif %}text-decoration:none">
  875.   <span>🛒</span>
  876.   <div class="cart-cnt">{{ cartCount }}</div>
  877.   <span class="cart-label">{{ cartCount }} item{% if cartCount != 1 %}s{% endif %} in cart</span>
  878.   <span style="color:rgba(255,255,255,0.4)">·</span>
  879.   <span class="cart-total" id="cart-total-price">${{ cartTotal|number_format(2) }}</span>
  880.   <span style="opacity:0.6">→</span>
  881. </a>
  883. <script src="/js/julico-app.js"></script>
  884. <script>
  885. function toggleFilters() {
  886.   document.getElementById('filter-sidebar').classList.toggle('open');
  887. }
  888. function applySort(val) {
  889.   var url = new URL(window.location.href);
  890.   if (val) { url.searchParams.set('sort', val); }
  891.   else { url.searchParams.delete('sort'); }
  892.   window.location.href = url.toString();
  893. }
  894. </script>
  896. {# ── NEW-ORDERS BADGE on "My Shop": fetch count, show when > 0 ── #}
  897. {% if isVendor %}
  898. <script>
  899. (function () {
  900.   var badge = document.getElementById('vendorNewBadge');
  901.   if (!badge) return;
  902.   fetch('{{ path('vendor_new_orders_count') }}?_=' + Date.now(), {
  903.     credentials: 'same-origin',
  904.     cache: 'no-store',
  905.     headers: { 'X-Requested-With': 'XMLHttpRequest' }
  906.   })
  907.   .then(function (r) { return r.json(); })
  908.   .then(function (d) {
  909.     if (d && d.ok && d.count > 0) {
  910.       badge.textContent = d.count > 99 ? '99+' : d.count;
  911.       badge.classList.add('show');
  912.       var btn = badge.closest('.nav-vendor-btn');
  913.       if (btn) { btn.setAttribute('title', d.count + ' new order(s) waiting'); }
  914.     } else {
  915.       badge.classList.remove('show');
  916.       badge.textContent = '';
  917.     }
  918.   })
  919.   .catch(function () {});
  920. })();
  921. </script>
  922. {% endif %}
  924. <!-- ═════════════ PWA: Service Worker + Install Handler ═════════════ -->
  925. <script>
  926. if ('serviceWorker' in navigator) {
  927.   window.addEventListener('load', function() {
  928.     navigator.serviceWorker.register('/sw.js', { scope: '/' })
  929.       .then(function(reg) { console.log('[PWA] SW registered:', reg.scope); })
  930.       .catch(function(err) { console.warn('[PWA] SW failed:', err); });
  931.   });
  932. }
  934. let __deferredPrompt = null;
  935. window.addEventListener('beforeinstallprompt', function(e) {
  936.   e.preventDefault();
  937.   __deferredPrompt = e;
  938.   console.log('[PWA] Install prompt ready — button is live');
  939.   var btn = document.getElementById('pwa-btn');
  940.   if (btn) {
  941.     btn.disabled = false;
  942.     btn.style.opacity = '1';
  943.   }
  944. });
  946. function handleInstall() {
  947.   if (!__deferredPrompt) {
  948.     if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {
  949.       alert('Julico is already installed! Look for it in your taskbar or applications.');
  950.       return;
  951.     }
  952.     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  953.       alert('To install on iOS:\n1. Tap the Share button (square with up arrow)\n2. Tap "Add to Home Screen"');
  954.       return;
  955.     }
  956.     alert('To install Julico:\n• Use Chrome or Edge on desktop\n• Look for the install icon in the address bar\n• Or open browser menu → "Install Julico…"');
  957.     return;
  958.   }
  960.   __deferredPrompt.prompt();
  961.   __deferredPrompt.userChoice.then(function(choice) {
  962.     console.log('[PWA] User choice:', choice.outcome);
  963.     if (choice.outcome === 'accepted') {
  964.       var toast = document.getElementById('install-toast');
  965.       if (toast) {
  966.         toast.style.display = 'flex';
  967.         setTimeout(function() { toast.style.display = 'none'; }, 2500);
  968.       }
  969.     }
  970.     __deferredPrompt = null;
  971.   });
  972. }
  974. window.addEventListener('appinstalled', function() {
  975.   console.log('[PWA] App installed successfully');
  976.   var btn = document.getElementById('pwa-btn');
  977.   if (btn) btn.style.display = 'none';
  978. });
  979. </script>
  980. <!-- ════════════════════════════════════════════════════════════════ -->
  982. {# ── PHASE 3 Step 3: Country picker modal — shows on first visit when needsCountryPicker is true ── #}
  983. {% include '_partials/country_picker.html.twig' %}
  985. </body>
  986. </html>