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.   .prod-card { display:flex; flex-direction:column; }
  15.   .prod-card-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1; }
  16.   .prod-card-link:hover { color:inherit; }
  17.   .prod-img.out-of-stock img { opacity:0.35; filter:grayscale(60%); }
  18.   .out-of-stock-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  19.   .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; }
  20.   .add-btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer; }
  21.   .card-qty-row { display:none; align-items:center; border:1.5px solid var(--brand); border-radius:var(--rsm); overflow:hidden; height:34px; }
  22.   .card-qty-row.visible { display:flex; }
  23.   .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; }
  24.   .cq-btn:hover { background:var(--brand); color:white; }
  25.   .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; }
  27.   /* FILTER SIDEBAR */
  28.   .shop-layout { display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; margin-top:24px; }
  29.   .filter-sidebar { position:sticky; top:80px; }
  30.   .filter-card { background:var(--white); border:1.5px solid var(--gray-100); border-radius:var(--rlg); padding:20px; box-shadow:var(--shadow-sm); }
  31.   .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; }
  32.   .filter-section { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--gray-100); }
  33.   .filter-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
  34.   .filter-lbl { font-size:11px; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:10px; }
  35.   .cat-check { display:flex; align-items:center; gap:8px; margin-bottom:7px; cursor:pointer; }
  36.   .cat-check input { width:15px; height:15px; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }
  37.   .cat-check span { font-size:13px; font-weight:500; color:var(--gray-700); cursor:pointer; }
  38.   .price-row { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; }
  39.   .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; }
  40.   .price-input:focus { border-color:var(--brand); background:var(--white); }
  41.   .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; }
  42.   .promo-check:hover { border-color:var(--brand); background:var(--brand-light); }
  43.   .promo-check input { width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
  44.   .promo-check span { font-size:13px; font-weight:700; color:var(--gray-700); }
  45.   .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; }
  46.   .btn-apply:hover { background:var(--brand-dark); }
  47.   .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; }
  48.   .btn-clear:hover { border-color:var(--brand); color:var(--brand); }
  49.   .sort-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  50.   .results-count { font-size:13px; color:var(--gray-500); }
  51.   .results-count strong { color:var(--gray-900); font-weight:800; }
  52.   .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; }
  53.   .sort-select:focus { border-color:var(--brand); }
  54.   .active-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  55.   .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; }
  56.   .filter-badge { background:var(--brand); color:white; font-size:10px; font-weight:800; padding:2px 7px; border-radius:100px; margin-left:6px; }
  57.   .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%; }
  58.   .filter-toggle-btn:hover { border-color:var(--brand); color:var(--brand); }
  59.   .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; }
  60.   .store-link:hover { color:var(--brand); }
  61.   @media(max-width:900px) {
  62.     .shop-layout { grid-template-columns:1fr; }
  63.     .filter-sidebar { position:static; display:none; }
  64.     .filter-sidebar.open { display:block; }
  65.     .filter-toggle-btn { display:flex; }
  66.   }
  67. </style>
  68. </head>
  69. <body>
  71. {# ── Cart session ── #}
  72. {% set panier = app.session.get('panier') ?? [] %}
  73. {% set cartCount = 0 %}
  74. {% set cartTotal = 0 %}
  75. {% for pan in panier %}
  76.   {% set cartCount = cartCount + pan.qtt %}
  77.   {% for p in produits %}
  78.     {% if p.id == pan.id %}
  79.       {% set unitPrice = p.prix %}
  80.       {% if p.salePrice is defined and p.salePrice and p.salePrice > 0 and p.salePrice < p.prix %}
  81.         {% set unitPrice = p.salePrice %}
  82.       {% endif %}
  83.       {% set cartTotal = cartTotal + (unitPrice * pan.qtt) %}
  84.     {% endif %}
  85.   {% endfor %}
  86. {% endfor %}
  88. {# ── Safe defaults for filter vars ── #}
  89. {% set currentQ          = currentQ ?? '' %}
  90. {% set currentMin        = currentMin ?? '' %}
  91. {% set currentMax        = currentMax ?? '' %}
  92. {% set currentPromo      = currentPromo ?? '' %}
  93. {% set currentCategories = currentCategories ?? [] %}
  94. {% set currentSort       = currentSort ?? '' %}
  95. {% set activeFilters     = activeFilters ?? 0 %}
  96. {% set allCategories     = allCategories ?? [] %}
  98. {# ── Is any filter active? ── #}
  99. {% 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) %}
  101. <!-- TOP BAR -->
  102. <div class="topbar">
  103.   🎉 Biggest Sale of the Year — Up to <strong>50% OFF</strong> storewide!
  104.   <a href="{{ path('app_home') }}">Shop Now →</a>
  105. </div>
  107. <!-- NAVBAR -->
  108. <nav class="navbar">
  109.   <div class="navbar-inner">
  110.     <a href="{{ path('app_home') }}" class="logo">
  111.       <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  112.     </a>
  113.     <button class="location-btn">
  114.       <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>
  115.       Beirut, LB
  116.     </button>
  117.     <div class="search-wrap">
  118.       <form action="{{ path('app_home') }}" method="GET">
  119.         <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>
  120.         <input type="text" name="q" value="{{ currentQ }}" placeholder="Search products, categories…">
  121.         <button type="submit" class="search-btn">
  122.           <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>
  123.         </button>
  124.       </form>
  125.     </div>
  126.     <div class="nav-actions">
  127.       <a href="{{ path('app_panier') }}" class="nav-icon-btn" style="position:relative" title="My Cart">
  128.         <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>
  129.         {% if cartCount > 0 %}<span class="nbadge" id="nav-cart-badge">{{ cartCount }}</span>{% endif %}
  130.       </a>
  131.       {% if app.user %}
  132.         <a href="{{ path('app_orders') }}" class="nav-icon-btn" title="My Orders">
  133.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  134.             <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
  135.             <rect x="9" y="3" width="6" height="4" rx="1"/>
  136.             <path d="M9 12h6M9 16h4"/>
  137.           </svg>
  138.         </a>
  139.         <a href="{{ path('app_profile') }}" class="btn-signin">{{ app.user.pseudo }}</a>
  140.         <a href="/logout" class="btn-register">Logout</a>
  141.       {% else %}
  142.         <a href="/login" class="btn-signin">Sign In</a>
  143.         <a href="/register" class="btn-register">Register Free</a>
  144.       {% endif %}
  145.     </div>
  146.   </div>
  147. </nav>
  149. <!-- SUBNAV -->
  150. <div class="subnav">
  151.   <div class="subnav-inner">
  152.     <a href="{{ path('app_home') }}" class="snav-item {% if not filtersActive %}active{% endif %}"><span>🏠</span>All</a>
  153.     {% for magasin in magasins %}
  154.       <a href="{{ path('app_home', {'shopName': magasin.nom}) }}" class="snav-item"><span>🏪</span>{{ magasin.nom }}</a>
  155.     {% endfor %}
  156.     <a href="{{ path('app_home') }}?promo=1" class="snav-item {% if currentPromo %}active{% endif %}"><span>🔥</span>Promotions</a>
  157.   </div>
  158. </div>
  160. <div class="page">
  162.   {# Hero only when no filters active #}
  163.   {% if not filtersActive %}
  164.   <div class="hero-section">
  165.     <div class="hero-grid">
  166.       <div class="hero-main">
  167.         <div class="hero-chip">🔥 Limited Time — Up to 50% Off</div>
  168.         <h1 class="hero-h1">Your B2B Wholesale<br><span>Command Center</span></h1>
  169.         <p class="hero-p">
  170.           {{ produits|length }}+ professional-grade products.
  171.           {% for magasin in magasins %}<strong style="color:#b3ffe8">{{ magasin.nom }}</strong>{% if not loop.last %} &amp; {% endif %}{% endfor %} networks.
  172.         </p>
  173.         <div class="hero-cta">
  174.           <a href="{{ path('app_home') }}" class="hbtn-p">Browse Catalogue →</a>
  175.           <a href="{{ path('app_home') }}?promo=1" class="hbtn-s">View Promotions ›</a>
  176.         </div>
  177.         <div class="hero-stats">
  178.           <div><div class="hstat-n">{{ produits|length }}</div><div class="hstat-l">Products</div></div>
  179.           <div><div class="hstat-n">{{ magasins|length }}</div><div class="hstat-l">Networks</div></div>
  180.           <div><div class="hstat-n">{{ produitsNouveaute|length }}</div><div class="hstat-l">New Arrivals</div></div>
  181.           <div><div class="hstat-n">B2B</div><div class="hstat-l">Wholesale</div></div>
  182.         </div>
  183.       </div>
  184.       <div class="hero-side">
  185.         {% for magasin in magasins|slice(0,2) %}
  186.         <a href="{{ path('app_home', {'shopName': magasin.nom}) }}" class="side-banner {{ loop.first ? 'sb1' : 'sb2' }}">
  187.           <div><div class="sb-label">{{ loop.first ? 'Our Network' : 'Partner Store' }}</div><div class="sb-title">{{ magasin.nom }}</div><div class="sb-cta">Shop Now ›</div></div>
  188.           <div class="sb-badge">B2B</div>
  189.         </a>
  190.         {% else %}
  191.         <div class="side-banner sb1"><div><div class="sb-label">Flash Deal</div><div class="sb-title">PPE &amp;<br>Disposables</div><div class="sb-cta">Shop Now ›</div></div><div class="sb-badge">−40%</div></div>
  192.         <div class="side-banner sb2"><div><div class="sb-label">New Arrivals</div><div class="sb-title">Organic &amp;<br>Healthy</div><div class="sb-cta">Explore ›</div></div><div class="sb-badge">NEW</div></div>
  193.         {% endfor %}
  194.       </div>
  195.     </div>
  196.   </div>
  197.   <div class="trust-bar">
  198.     <div class="trust-item"><div class="trust-icon">🚚</div><div><div class="trust-t">Fast Delivery</div><div class="trust-d">Next-day dispatch on orders</div></div></div>
  199.     <div class="trust-item"><div class="trust-icon">💰</div><div><div class="trust-t">Volume Pricing</div><div class="trust-d">Better rates at scale</div></div></div>
  200.     <div class="trust-item"><div class="trust-icon">🔒</div><div><div class="trust-t">Secure Payments</div><div class="trust-d">100% protected checkout</div></div></div>
  201.     <div class="trust-item"><div class="trust-icon">🤝</div><div><div class="trust-t">B2B Accounts</div><div class="trust-d">Dedicated account manager</div></div></div>
  202.   </div>
  203.   <div class="promo-strip">
  204.     <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">Best deals available now</div></div></a>
  205.     <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 to catalogue</div></div></a>
  206.     <a href="{{ path('app_home') }}" class="promo-card pc3"><div class="p-em">🌍</div><div><div class="p-lbl">B2B Wholesale</div><div class="p-title">{{ magasins|length }} Networks</div><div class="p-sub">Professional pricing</div></div></a>
  207.   </div>
  208.   {% endif %}
  210.   {# Cart session for JS #}
  211.   <script>
  212.     window.CART_SESSION = {
  213.       {% for pan in panier %}
  214.         "{{ pan.id }}": {{ pan.qtt }}{% if not loop.last %},{% endif %}
  215.       {% endfor %}
  216.     };
  217.   </script>
  219.   {# Results header when filtering #}
  220.   {% if filtersActive %}
  221.   <div style="margin:24px 0 16px">
  222.     <div style="font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px">Search Results</div>
  223.     <div style="font-size:22px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em">
  224.       {% if currentQ is not empty %}Results for "{{ currentQ }}"
  225.       {% elseif currentPromo %}🔥 Active Promotions
  226.       {% else %}Filtered Products{% endif %}
  227.       <span style="font-size:15px;font-weight:500;color:var(--gray-400)">({{ produits|length }})</span>
  228.     </div>
  229.   </div>
  230.   {% endif %}
  232.   {# Mobile filter toggle #}
  233.   <button class="filter-toggle-btn" onclick="toggleFilters()" style="margin-top:{{ filtersActive ? '0' : '24px' }}">
  234.     🔧 Filters {% if activeFilters > 0 %}<span class="filter-badge">{{ activeFilters }}</span>{% endif %}
  235.   </button>
  237.   <div class="shop-layout" style="margin-top:{{ filtersActive ? '0' : '24px' }}">
  239.     {# ── FILTER SIDEBAR ── #}
  240.     <div class="filter-sidebar" id="filter-sidebar">
  241.       <form action="{{ path('app_home') }}" method="GET" id="filter-form">
  243.         {# Preserve search query in filters #}
  244.         {% if currentQ is not empty %}
  245.           <input type="hidden" name="q" value="{{ currentQ }}">
  246.         {% endif %}
  248.         <div class="filter-card">
  249.           <div class="filter-title">
  250.             🔧 Filters
  251.             {% if activeFilters > 0 %}
  252.               <a href="{{ path('app_home') }}" style="font-size:11px;font-weight:600;color:var(--brand);text-decoration:none">Clear all</a>
  253.             {% endif %}
  254.           </div>
  256.           {# PROMO #}
  257.           <div class="filter-section">
  258.             <div class="filter-lbl">Deals</div>
  259.             <label class="promo-check" style="{{ currentPromo ? 'border-color:var(--brand);background:var(--brand-light)' : '' }}">
  260.               <input type="checkbox" name="promo" value="1" {{ currentPromo ? 'checked' : '' }} onchange="this.form.submit()">
  261.               <span>🔥 Promotions Only</span>
  262.             </label>
  263.           </div>
  265.           {# CATEGORIES #}
  266.           {% if allCategories|length > 0 %}
  267.           <div class="filter-section">
  268.             <div class="filter-lbl">Category</div>
  269.             {% for cat in allCategories %}
  270.             <label class="cat-check">
  271.               <input type="checkbox" name="categories[]" value="{{ cat.id }}"
  272.                 {% if currentCategories is iterable %}
  273.                   {% for cid in currentCategories %}
  274.                     {% if cid == cat.id %}checked{% endif %}
  275.                   {% endfor %}
  276.                 {% endif %}
  277.               >
  278.               <span>{{ cat.nom }}</span>
  279.             </label>
  280.             {% endfor %}
  281.           </div>
  282.           {% endif %}
  284.           {# PRICE #}
  285.           <div class="filter-section">
  286.             <div class="filter-lbl">Price Range ($)</div>
  287.             <div class="price-row">
  288.               <input type="number" name="min" class="price-input" placeholder="Min" value="{{ currentMin }}" min="0">
  289.               <span style="font-size:12px;color:var(--gray-400);text-align:center">—</span>
  290.               <input type="number" name="max" class="price-input" placeholder="Max" value="{{ currentMax }}" min="0">
  291.             </div>
  292.           </div>
  294.           {# STORES #}
  295.           <div class="filter-section">
  296.             <div class="filter-lbl">Store</div>
  297.             {% for magasin in magasins %}
  298.             <label class="cat-check">
  299.               <input type="checkbox" name="shopName" value="{{ magasin.nom }}"
  300.                 {% if app.request.query.get('shopName') == magasin.nom %}checked{% endif %}>
  301.               <span>🏪 {{ magasin.nom }}</span>
  302.             </label>
  303.             {% endfor %}
  304.           </div>
  306.           <button type="submit" class="btn-apply">Apply Filters</button>
  307.           <a href="{{ path('app_home') }}" class="btn-clear">Reset</a>
  308.         </div>
  310.       </form>
  311.     </div>
  313.     {# ── PRODUCTS AREA ── #}
  314.     <div>
  316.       {# Active filter pills #}
  317.       {% if activeFilters > 0 %}
  318.       <div class="active-pills">
  319.         {% if currentQ is not empty %}
  320.           <a href="{{ path('app_home') }}?promo={{ currentPromo }}&min={{ currentMin }}&max={{ currentMax }}" class="pill">🔍 "{{ currentQ }}" ×</a>
  321.         {% endif %}
  322.         {% if currentPromo %}
  323.           <a href="{{ path('app_home') }}?q={{ currentQ }}&min={{ currentMin }}&max={{ currentMax }}" class="pill">🔥 Promo ×</a>
  324.         {% endif %}
  325.         {% if currentMin is not empty %}
  326.           <a href="{{ path('app_home') }}?q={{ currentQ }}&promo={{ currentPromo }}&max={{ currentMax }}" class="pill">Min ${{ currentMin }} ×</a>
  327.         {% endif %}
  328.         {% if currentMax is not empty %}
  329.           <a href="{{ path('app_home') }}?q={{ currentQ }}&promo={{ currentPromo }}&min={{ currentMin }}" class="pill">Max ${{ currentMax }} ×</a>
  330.         {% endif %}
  331.       </div>
  332.       {% endif %}
  334.       {# Sort + count bar #}
  335.       <div class="sort-bar">
  336.         <span class="results-count"><strong>{{ produits|length }}</strong> product{% if produits|length != 1 %}s{% endif %} found</span>
  337.         <select class="sort-select" onchange="applySort(this.value)">
  338.           <option value="">Sort: Default</option>
  339.           <option value="price_asc"  {% if currentSort == 'price_asc' %}selected{% endif %}>Price: Low to High</option>
  340.           <option value="price_desc" {% if currentSort == 'price_desc' %}selected{% endif %}>Price: High to Low</option>
  341.           <option value="newest"     {% if currentSort == 'newest' %}selected{% endif %}>Newest First</option>
  342.           <option value="name_asc"   {% if currentSort == 'name_asc' %}selected{% endif %}>Name: A–Z</option>
  343.         </select>
  344.       </div>
  346.       {# Products #}
  347.       {% if produits|length > 0 %}
  348.       <div class="prod-grid">
  349.         {% for produit in produits %}
  351.         {% set qttValue = produit.qtt is defined ? produit.qtt : null %}
  352.         {% set isOutOfStock = (qttValue is null) or (qttValue <= 0) %}
  353.         {% set unitPrice = produit.prix %}
  354.         {% if produit.salePrice is defined and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  355.           {% set unitPrice = produit.salePrice %}
  356.         {% endif %}
  358.         <div class="prod-card" style="{% if isOutOfStock %}opacity:0.85{% endif %}" data-product-id="{{ produit.id }}">
  359.           <a href="{{ path('show_produit', {'id': produit.id}) }}" class="prod-card-link">
  360.             <div class="prod-img {% if isOutOfStock %}out-of-stock{% endif %}">
  361.               {% set imgs = produit.images %}
  362.               {% if imgs is not empty %}
  363.                 <img src="{{ asset('assets/uploads/products/' ~ imgs|first.fileName) }}"
  364.                      alt="{{ produit.productName }}"
  365.                      onerror="this.onerror=null;this.src='/assets/uploads/products/{{ imgs|first.fileName }}'">
  366.               {% else %}
  367.                 <div style="font-size:40px;opacity:0.2{% if isOutOfStock %};filter:grayscale(80%){% endif %}">📦</div>
  368.               {% endif %}
  369.               {% if produit.promo and not isOutOfStock %}<span class="pbadge badge-sale">PROMO</span>{% endif %}
  370.               {% if isOutOfStock %}<div class="out-of-stock-overlay"><span class="out-of-stock-label">Out of Stock</span></div>{% endif %}
  371.             </div>
  372.             <div class="prod-body">
  373.               <div class="prod-brand">
  374.                 {% if produit.category is defined and produit.category %}{{ produit.category.nom }}{% endif %}
  375.                 {% if produit.magasin is defined and produit.magasin %} · {{ produit.magasin.nom }}{% endif %}
  376.               </div>
  377.               <div class="prod-name" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}">{{ produit.productName }}</div>
  378.               <div class="prod-unit">{{ produit.description|slice(0,40) }}{% if produit.description|length > 40 %}…{% endif %}</div>
  379.             </div>
  380.           </a>
  381.           <div style="padding:0 14px 14px;display:flex;align-items:center;justify-content:space-between;margin-top:auto;position:relative;z-index:5;">
  382.             <div>
  383.               {% if produit.salePrice is defined and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  384.                 <div class="prod-price" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}"><sup>$</sup>{{ produit.salePrice|number_format(2) }}</div>
  385.                 <div class="prod-old">${{ produit.prix|number_format(2) }}</div>
  386.               {% else %}
  387.                 <div class="prod-price" style="{% if isOutOfStock %}color:var(--gray-400){% endif %}"><sup>$</sup>{{ produit.prix|number_format(2) }}</div>
  388.               {% endif %}
  389.             </div>
  390.             {% if isOutOfStock %}
  391.               <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>
  392.             {% else %}
  393.               <div class="card-qty-row" id="qty-row-{{ produit.id }}">
  394.                 <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>
  395.                 <span class="cq-num" id="qty-num-{{ produit.id }}">0</span>
  396.                 <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>
  397.               </div>
  398.               <button type="button" class="add-btn" id="add-btn-{{ produit.id }}"
  399.                       data-action="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'home'}) }}"
  400.                       data-csrf="{{ csrf_token('authenticate') }}"
  401.                       data-id="{{ produit.id }}"
  402.                       data-price="{{ unitPrice }}"
  403.                       title="Add to cart">+</button>
  404.             {% endif %}
  405.           </div>
  406.         </div>
  408.         {% endfor %}
  409.       </div>
  411.       {# Pagination #}
  412.       {% if previous is defined and next is defined %}
  413.       {% if previous >= 0 or next < produits|length %}
  414.       <div style="display:flex;justify-content:center;gap:12px;margin-top:32px">
  415.         {% if previous >= 0 %}<a href="{{ path('app_home') }}?offset={{ previous }}&q={{ currentQ }}&promo={{ currentPromo }}&min={{ currentMin }}&max={{ currentMax }}" class="see-all">← Previous</a>{% endif %}
  416.         {% 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 %}
  417.       </div>
  418.       {% endif %}
  419.       {% endif %}
  421.       {% else %}
  422.       <div style="text-align:center;padding:60px 20px;color:var(--gray-400)">
  423.         <div style="font-size:48px;margin-bottom:16px">🔍</div>
  424.         <div style="font-size:18px;font-weight:700;color:var(--gray-600)">No products found</div>
  425.         <div style="margin-top:8px;margin-bottom:20px">Try adjusting your search or filters</div>
  426.         <a href="{{ path('app_home') }}" class="see-all" style="display:inline-flex">Clear all filters</a>
  427.       </div>
  428.       {% endif %}
  430.     </div>{# /products area #}
  431.   </div>{# /shop-layout #}
  433.   {% if not filtersActive %}
  434.   <!-- B2B -->
  435.   <div class="b2b-strip" style="margin-top:40px">
  436.     <div>
  437.       <div class="b2b-tag">🌐 B2B Platform</div>
  438.       <div class="b2b-h">Scale Your Business<br>with <span>Julico</span></div>
  439.       <div class="b2b-p">Access wholesale pricing and {{ produits|length }}+ products across {% for m in magasins %}{{ m.nom }}{% if not loop.last %} & {% endif %}{% endfor %} networks.</div>
  440.       <a href="/register" class="b2b-btn">Open a Business Account →</a>
  441.     </div>
  442.     <div class="b2b-feats">
  443.       <div class="b2b-feat"><div class="b2b-ficon">📊</div><div class="b2b-ft">Volume Discounts</div><div class="b2b-fd">Tiered pricing that scales with your order volume.</div></div>
  444.       <div class="b2b-feat"><div class="b2b-ficon">🚀</div><div class="b2b-ft">Fast Dispatch</div><div class="b2b-fd">Same-day processing on orders before 2PM.</div></div>
  445.       <div class="b2b-feat"><div class="b2b-ficon">📋</div><div class="b2b-ft">Custom Invoicing</div><div class="b2b-fd">Branded invoices and flexible payment terms.</div></div>
  446.       <div class="b2b-feat"><div class="b2b-ficon">🌍</div><div class="b2b-ft">Global Network</div><div class="b2b-fd">{% for m in magasins %}{{ m.nom }}{% if not loop.last %} & {% endif %}{% endfor %} networks.</div></div>
  447.     </div>
  448.   </div>
  450.   <!-- PWA -->
  451.   <div class="pwa-banner">
  452.     <div class="pwa-left">
  453.       <div class="pwa-chip"><span class="pwa-chip-dot"></span> <span id="pwa-chip-text">Web App — No App Store Needed</span></div>
  454.       <div class="pwa-h" id="pwa-headline">Install Julico on<br>Your Device, Instantly</div>
  455.       <div class="pwa-p" id="pwa-desc">Get the full Julico experience right from your browser.</div>
  456.       <div class="pwa-features">
  457.         <div class="pwa-feat"><span class="pwa-feat-icon">⚡</span> Instant Load</div>
  458.         <div class="pwa-feat"><span class="pwa-feat-icon">📴</span> Works Offline</div>
  459.         <div class="pwa-feat"><span class="pwa-feat-icon">🔔</span> Push Alerts</div>
  460.         <div class="pwa-feat"><span class="pwa-feat-icon">🔒</span> Secure</div>
  461.       </div>
  462.       <button class="pwa-install-btn" id="pwa-btn" onclick="handleInstall()">
  463.         <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>
  464.         <span id="pwa-btn-text">Add to Home Screen</span>
  465.       </button>
  466.     </div>
  467.     <div class="pwa-right">
  468.       <div class="pwa-device-card">
  469.         <div class="pwa-device-header">
  470.           <div class="pwa-device-icon" id="pwa-device-icon">📱</div>
  471.           <div>
  472.             <div class="pwa-device-name" id="pwa-device-name">Detecting device…</div>
  473.             <div class="pwa-device-browser" id="pwa-device-browser">Checking browser…</div>
  474.           </div>
  475.           <div class="pwa-device-status ready" id="pwa-device-status">Ready</div>
  476.         </div>
  477.         <div class="pwa-steps-wrap" id="pwa-steps"></div>
  478.       </div>
  479.     </div>
  480.   </div>
  481.   <div class="install-toast" id="install-toast"><div class="toast-icon">✓</div><span id="toast-msg">Julico added!</span></div>
  482.   {% endif %}
  484. </div>{# /page #}
  486. <!-- FOOTER -->
  487. <footer>
  488.   <div class="footer-top">
  489.     <div>
  490.       <div class="footer-bname">JULI<span>CO</span></div>
  491.       <div class="footer-btag">Where Trust Meets Success</div>
  492.       <div class="footer-bdesc">Lebanon's leading B2B wholesale platform.</div>
  493.       <div class="footer-socials">
  494.         <div class="social-btn">f</div><div class="social-btn">in</div>
  495.         <div class="social-btn">tw</div><div class="social-btn">ig</div>
  496.       </div>
  497.     </div>
  498.     <div>
  499.       <div class="footer-ct">Shop</div>
  500.       <a href="{{ path('app_home') }}" class="footer-link">All Products</a>
  501.       <a href="{{ path('app_home') }}?promo=1" class="footer-link">Promotions</a>
  502.       {% for magasin in magasins %}<a href="{{ path('app_home', {'shopName': magasin.nom}) }}" class="footer-link">{{ magasin.nom }}</a>{% endfor %}
  503.     </div>
  504.     <div>
  505.       <div class="footer-ct">Categories</div>
  506.       {% for cat in allCategories|slice(0,6) %}
  507.         <a href="{{ path('app_home') }}?categories[]={{ cat.id }}" class="footer-link">{{ cat.nom }}</a>
  508.       {% endfor %}
  509.     </div>
  510.     <div>
  511.       <div class="footer-ct">Account</div>
  512.       <a href="/register" class="footer-link">Register</a>
  513.       <a href="/login" class="footer-link">Sign In</a>
  514.       <a href="{{ path('app_panier') }}" class="footer-link">My Cart</a>
  515.       {% if app.user %}<a href="{{ path('app_orders') }}" class="footer-link">My Orders</a>{% endif %}
  516.     </div>
  517.     <div>
  518.       <div class="footer-ct">Support</div>
  519.       <a href="#" class="footer-link">Help Center</a>
  520.       <a href="#" class="footer-link">Contact Us</a>
  521.       <a href="{{ path('app_locale', {'_locale': 'en'}) }}" class="footer-link">English</a>
  522.       <a href="{{ path('app_locale', {'_locale': 'fr'}) }}" class="footer-link">Français</a>
  523.     </div>
  524.   </div>
  525.   <div class="footer-bottom">
  526.     <div class="footer-copy">© {{ "now"|date("Y") }} Julico S.A.R.L. All rights reserved.</div>
  527.     <div class="footer-pays"><div class="pay-chip">VISA</div><div class="pay-chip">MC</div><div class="pay-chip">CASH</div></div>
  528.     <div class="footer-legal"><a href="#">Privacy</a><a href="#">Terms</a></div>
  529.   </div>
  530. </footer>
  532. <a href="{{ path('app_panier') }}" class="cart-bar" id="cart-bar"
  533.    style="{% if cartCount == 0 %}display:none;{% endif %}text-decoration:none">
  534.   <span>🛒</span>
  535.   <div class="cart-cnt">{{ cartCount }}</div>
  536.   <span class="cart-label">{{ cartCount }} item{% if cartCount != 1 %}s{% endif %} in cart</span>
  537.   <span style="color:rgba(255,255,255,0.4)">·</span>
  538.   <span class="cart-total" id="cart-total-price">${{ cartTotal|number_format(2) }}</span>
  539.   <span style="opacity:0.6">→</span>
  540. </a>
  542. <script src="/js/julico-app.js"></script>
  543. <script>
  544. function toggleFilters() {
  545.   document.getElementById('filter-sidebar').classList.toggle('open');
  546. }
  547. function applySort(val) {
  548.   var url = new URL(window.location.href);
  549.   if (val) { url.searchParams.set('sort', val); }
  550.   else { url.searchParams.delete('sort'); }
  551.   window.location.href = url.toString();
  552. }
  553. </script>
  554. </body>
  555. </html>