var/cache/dev/twig/c0/c0d1f3a332cda846da3924c2128d24e9.php line 46

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* home/cart.html.twig */
  18. class __TwigTemplate_0219938fbd6025d98cba8e952062cfef extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'title' => [$this, 'block_title'],
  34.             'body' => [$this, 'block_body'],
  35.             'stylesheets' => [$this, 'block_stylesheets'],
  36.             'javascripts' => [$this, 'block_javascripts'],
  37.         ];
  38.     }
  40.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  41.     {
  42.         // line 1
  43.         return "base_home.html.twig";
  44.     }
  46.     protected function doDisplay(array $context, array $blocks = []): iterable
  47.     {
  48.         $macros = $this->macros;
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  50.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/cart.html.twig"));
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  53.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/cart.html.twig"));
  55.         $this->parent = $this->load("base_home.html.twig", 1);
  56.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  57.         
  58.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  60.         
  61.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  63.     }
  65.     // line 3
  66.     /**
  67.      * @return iterable<null|scalar|\Stringable>
  68.      */
  69.     public function block_title(array $context, array $blocks = []): iterable
  70.     {
  71.         $macros = $this->macros;
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  73.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  76.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  78.         yield "Panier | MaketOu";
  79.         
  80.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  82.         
  83.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  85.         yield from [];
  86.     }
  88.     // line 5
  89.     /**
  90.      * @return iterable<null|scalar|\Stringable>
  91.      */
  92.     public function block_body(array $context, array $blocks = []): iterable
  93.     {
  94.         $macros = $this->macros;
  95.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  96.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  98.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  99.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  101.         // line 6
  102.         yield "    <!-- Start Banner Area -->
  103.     <section class=\"banner-area organic-breadcrumb\">
  104.         <div class=\"container\">
  105.             <div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  106.                 <div class=\"col-first\">
  107.                     <h1>Panier</h1>
  108.                     <nav class=\"d-flex align-items-center\">
  109.                         <a href=\"";
  110.         // line 13
  111.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_home");
  112.         yield "\">Accueil<span class=\"lnr lnr-arrow-right\"></span></a>
  113.                         <a href=\"javascript:void(0)\">Panier</a>
  114.                     </nav>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.     </section>
  119.     <!-- End Banner Area -->
  121.     <!--================Cart Area =================-->
  122.     <section class=\"cart_area\">
  123.         <div class=\"container\">
  124.             <div class=\"row\">
  125.                 <div class=\"col-lg-8\">
  126.                     <div class=\"cart_inner\">
  127.                         <div class=\"table-responsive\">
  128.                             <table class=\"table\">
  129.                                 <thead>
  130.                                     <tr>
  131.                                         <th scope=\"col\">Produit</th>
  132.                                         <th scope=\"col\">Prix</th>
  133.                                         <th scope=\"col\">Quantité</th>
  134.                                         <th scope=\"col\">Total</th>
  135.                                         <th scope=\"col\">Action</th>
  136.                                     </tr>
  137.                                 </thead>
  138.                                 <tbody>
  139.                                     ";
  140.         // line 40
  141.         $context['_parent'] = $context;
  142.         $context['_seq'] = CoreExtension::ensureTraversable(($context["items"] ?? null));
  143.         $context['_iterated'] = false;
  144.         foreach ($context['_seq'] as $context["_key"] => $context["item"]) {
  145.             // line 41
  146.             yield "                                    <tr>
  147.                                         <td data-label=\"Produit\">
  148.                                             <div class=\"cart-item\">
  149.                                                 ";
  150.             // line 44
  151.             $context["image"] = (((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", true, true, false, 44) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", false, false, false, 44)) > 0))) ? (CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", false, false, false, 44)) : ($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg")));
  152.             // line 45
  153.             yield "                                                <img src=\"";
  154.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["image"] ?? null), "html", null, true);
  155.             yield "\" alt=\"";
  156.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 45), "html", null, true);
  157.             yield "\" class=\"cart-item-image\">
  158.                                                 <div class=\"cart-item-info\">
  159.                                                     <a href=\"";
  160.             // line 47
  161.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["item"], "slug", [], "any", false, false, false, 47)]), "html", null, true);
  162.             yield "\" class=\"cart-item-name\">";
  163.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 47), "html", null, true);
  164.             yield "</a>
  165.                                                 </div>
  166.                                             </div>
  167.                                         </td>
  168.                                         <td data-label=\"Prix\">
  169.                                             <span class=\"cart-item-price\">";
  170.             // line 52
  171.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price", [], "any", false, false, false, 52), 2, ".", " "), "html", null, true);
  172.             yield " HTG</span>
  173.                                         </td>
  174.                                         <td data-label=\"Quantité\">
  175.                                             <div class=\"quantity-controls\">
  176.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity(";
  177.             // line 56
  178.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 56), "html", null, true);
  179.             yield ", -1)\">-</button>
  180.                                                 <input type=\"text\" value=\"";
  181.             // line 57
  182.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 57), "html", null, true);
  183.             yield "\" class=\"quantity-input\" id=\"qty-";
  184.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 57), "html", null, true);
  185.             yield "\" onchange=\"updateQuantity(";
  186.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 57), "html", null, true);
  187.             yield ", this.value)\">
  188.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity(";
  189.             // line 58
  190.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 58), "html", null, true);
  191.             yield ", 1)\">+</button>
  192.                                             </div>
  193.                                         </td>
  194.                                         <td data-label=\"Total\">
  195.                                             <span class=\"cart-item-total\" id=\"total-";
  196.             // line 62
  197.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 62), "html", null, true);
  198.             yield "\">";
  199.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price", [], "any", false, false, false, 62) * CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 62)), 2, ".", " "), "html", null, true);
  200.             yield " HTG</span>
  201.                                         </td>
  202.                                         <td data-label=\"Action\">
  203.                                             <button class=\"remove-btn\" onclick=\"removeFromCart(";
  204.             // line 65
  205.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 65), "html", null, true);
  206.             yield ")\">Supprimer</button>
  207.                                         </td>
  208.                                     </tr>
  209.                                     ";
  210.             $context['_iterated'] = true;
  211.         }
  212.         // line 68
  213.         if (!$context['_iterated']) {
  214.             // line 69
  215.             yield "                                        <tr>
  216.                                             <td colspan=\"5\" style=\"text-align: center; padding: 50px;\">
  217.                                                 Votre panier est vide.
  218.                                                 <br>
  219.                                                 <a href=\"";
  220.             // line 73
  221.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  222.             yield "\" style=\"color: #007185;\">Continuer vos achats</a>
  223.                                             </td>
  224.                                         </tr>
  225.                                     ";
  226.         }
  227.         $_parent = $context['_parent'];
  228.         unset($context['_seq'], $context['_key'], $context['item'], $context['_parent'], $context['_iterated']);
  229.         $context = array_intersect_key($context, $_parent) + $_parent;
  230.         // line 77
  231.         yield "                                </tbody>
  232.                             </table>
  233.                         </div>
  234.                     </div>
  235.                 </div>
  236.                 <div class=\"col-lg-4\">
  237.                     <div class=\"cart-summary\">
  238.                         <h3>Résumé de la commande</h3>
  239.                         <div class=\"cart-subtotal\">
  240.                             <span id=\"cart-subtotal-label\">Sous-total (<span id=\"cart-item-count\">";
  241.         // line 86
  242.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["items"] ?? null)), "html", null, true);
  243.         yield "</span> article";
  244.         yield (((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["items"] ?? null)) > 1)) ? ("s") : (""));
  245.         yield ")</span>
  246.                             <span id=\"cart-subtotal\">";
  247.         // line 87
  248.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(($context["subtotal"] ?? null), 2, ".", " "), "html", null, true);
  249.         yield " HTG</span>
  250.                         </div>
  251.                         <div class=\"cart-total\">
  252.                             <span>Total</span>
  253.                             <span id=\"cart-total\">";
  254.         // line 91
  255.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(($context["subtotal"] ?? null), 2, ".", " "), "html", null, true);
  256.         yield " HTG</span>
  257.                         </div>
  258.                         <button class=\"checkout-btn mt-3\" onclick=\"proceedToCheckout()\">Passer la commande</button>
  259.                         <button class=\"continue-shopping\" onclick=\"window.location.href='";
  260.         // line 94
  261.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  262.         yield "'\">Continuer vos achats</button>
  263.                     </div>
  264.                 </div>
  265.             </div>
  266.         </div>
  267.     </section>
  268.     <!--================End Cart Area =================-->
  270.     <!-- Modal personnalisé -->
  271.     <div id=\"customModal\" class=\"custom-modal\">
  272.         <div class=\"custom-modal-overlay\"></div>
  273.         <div class=\"custom-modal-content\">
  274.             <div class=\"custom-modal-header\">
  275.                 <h3 class=\"custom-modal-title\" id=\"modalTitle\">Titre</h3>
  276.                 <button class=\"custom-modal-close\" onclick=\"closeCustomModal()\" aria-label=\"Fermer\">
  277.                     <span>&times;</span>
  278.                 </button>
  279.             </div>
  280.             <div class=\"custom-modal-body\" id=\"modalBody\">
  281.                 <p id=\"modalMessage\">Message</p>
  282.             </div>
  283.             <div class=\"custom-modal-footer\" id=\"modalFooter\">
  284.                 <button class=\"custom-modal-btn custom-modal-btn-primary\" id=\"modalConfirmBtn\" onclick=\"confirmModalAction()\">Confirmer</button>
  285.                 <button class=\"custom-modal-btn custom-modal-btn-secondary\" id=\"modalCancelBtn\" onclick=\"closeCustomModal()\">Annuler</button>
  286.             </div>
  287.         </div>
  288.     </div>
  290. ";
  291.         
  292.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  294.         
  295.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  297.         yield from [];
  298.     }
  300.     // line 124
  301.     /**
  302.      * @return iterable<null|scalar|\Stringable>
  303.      */
  304.     public function block_stylesheets(array $context, array $blocks = []): iterable
  305.     {
  306.         $macros = $this->macros;
  307.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  308.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  310.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  311.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  313.         // line 125
  314.         yield "<style>
  315. .cart_area {
  316.     background-color: #f8f8f8;
  317.     padding: 20px 0;
  318. }
  320. .cart_inner {
  321.     background: white;
  322.     border-radius: 8px;
  323.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  324.     overflow: hidden;
  325. }
  327. .table th {
  328.     background-color: #f3f3f3;
  329.     border-bottom: 2px solid #ddd;
  330.     font-weight: 600;
  331.     color: #333;
  332.     padding: 15px;
  333. }
  335. .table td {
  336.     vertical-align: middle;
  337.     padding: 15px;
  338. }
  340. .cart-item {
  341.     display: flex;
  342.     align-items: center;
  343. }
  345. .cart-item-image {
  346.     width: 80px;
  347.     height: 80px;
  348.     object-fit: cover;
  349.     border-radius: 8px;
  350.     margin-right: 15px;
  351. }
  353. .cart-item-info {
  354.     flex-grow: 1;
  355. }
  357. .cart-item-name {
  358.     font-weight: 500;
  359.     color: #007185;
  360.     text-decoration: none;
  361.     margin-bottom: 5px;
  362. }
  364. .cart-item-name:hover {
  365.     text-decoration: underline;
  366. }
  368. .cart-item-price {
  369.     color: #333;
  370.     font-size: 18px;
  371.     font-weight: 700;
  372. }
  374. .quantity-controls {
  375.     display: flex !important;
  376.     align-items: center !important;
  377.     justify-content: center !important;
  378.     border: 1px solid #ddd !important;
  379.     border-radius: 4px !important;
  380.     width: 120px !important;
  381.     height: 40px !important;
  382.     position: relative !important;
  383.     background: white !important;
  384.     overflow: hidden !important;
  385. }
  387. .quantity-controls .quantity-btn {
  388.     background: #f8f8f8 !important;
  389.     border: none !important;
  390.     width: 35px !important;
  391.     height: 100% !important;
  392.     min-width: 35px !important;
  393.     cursor: pointer !important;
  394.     font-size: 18px !important;
  395.     font-weight: 600 !important;
  396.     color: #333 !important;
  397.     display: flex !important;
  398.     align-items: center !important;
  399.     justify-content: center !important;
  400.     padding: 0 !important;
  401.     margin: 0 !important;
  402.     line-height: 1 !important;
  403.     transition: background-color 0.2s ease !important;
  404.     position: relative !important;
  405.     z-index: 1 !important;
  406. }
  408. .quantity-controls .quantity-btn:first-child {
  409.     border-right: 1px solid #ddd !important;
  410. }
  412. .quantity-controls .quantity-btn:last-child {
  413.     border-left: 1px solid #ddd !important;
  414. }
  416. .quantity-controls .quantity-btn:hover {
  417.     background: #e7e7e7 !important;
  418.     color: #000 !important;
  419. }
  421. .quantity-controls .quantity-btn:active {
  422.     background: #d0d0d0 !important;
  423. }
  425. .quantity-controls .quantity-input {
  426.     border: none !important;
  427.     width: 50px !important;
  428.     min-width: 50px !important;
  429.     height: 100% !important;
  430.     text-align: center !important;
  431.     font-size: 15px !important;
  432.     font-weight: 500 !important;
  433.     padding: 0 !important;
  434.     margin: 0 !important;
  435.     background: white !important;
  436.     color: #333 !important;
  437.     outline: none !important;
  438.     box-shadow: none !important;
  439.     -moz-appearance: textfield !important;
  440.     position: relative !important;
  441.     z-index: 1 !important;
  442. }
  444. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  445. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  446.     -webkit-appearance: none !important;
  447.     margin: 0 !important;
  448. }
  450. /* Surcharger les styles externes qui pourraient interférer */
  451. .cart_inner .table tbody tr td .quantity-controls,
  452. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  453. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  454.     position: relative !important;
  455. }
  457. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  458. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  459.     display: none !important;
  460.     content: none !important;
  461. }
  463. .cart-item-total {
  464.     font-size: 18px;
  465.     font-weight: 700;
  466.     color: #333;
  467. }
  469. /* Responsive Styles */
  470. @media (max-width: 991.98px) {
  471.     .cart_area {
  472.         padding: 15px 0;
  473.     }
  474.     
  475.     .cart-summary {
  476.         margin-top: 2rem;
  477.     }
  478. }
  480. @media (max-width: 767.98px) {
  481.     .cart_inner {
  482.         border-radius: 0;
  483.     }
  484.     
  485.     .table {
  486.         font-size: 0.875rem;
  487.     }
  488.     
  489.     .table th {
  490.         padding: 10px 8px;
  491.         font-size: 0.8rem;
  492.     }
  493.     
  494.     .table td {
  495.         padding: 10px 8px;
  496.     }
  497.     
  498.     .cart-item {
  499.         flex-direction: column;
  500.         align-items: flex-start;
  501.     }
  502.     
  503.     .cart-item-image {
  504.         width: 60px;
  505.         height: 60px;
  506.         margin-right: 0;
  507.         margin-bottom: 10px;
  508.     }
  509.     
  510.     .cart-item-name {
  511.         font-size: 0.9rem;
  512.     }
  513.     
  514.     .cart-item-price,
  515.     .cart-item-total {
  516.         font-size: 1rem;
  517.     }
  518.     
  519.     .quantity-controls {
  520.         width: 110px !important;
  521.         height: 38px !important;
  522.     }
  523.     
  524.     .quantity-controls .quantity-btn {
  525.         width: 32px !important;
  526.         font-size: 16px !important;
  527.     }
  528.     
  529.     .quantity-controls .quantity-input {
  530.         width: 46px !important;
  531.         font-size: 14px !important;
  532.     }
  533.     
  534.     .cart-summary {
  535.         margin-top: 1.5rem;
  536.         padding: 1.5rem;
  537.     }
  538.     
  539.     .checkout-btn,
  540.     .continue-shopping {
  541.         width: 100%;
  542.         margin-bottom: 0.5rem;
  543.     }
  544. }
  546. @media (max-width: 575.98px) {
  547.     .table thead {
  548.         display: none;
  549.     }
  550.     
  551.     .table tbody tr {
  552.         display: block;
  553.         margin-bottom: 1rem;
  554.         border: 1px solid #dee2e6;
  555.         border-radius: 8px;
  556.         padding: 1rem;
  557.     }
  558.     
  559.     .table tbody td {
  560.         display: flex;
  561.         justify-content: space-between;
  562.         align-items: center;
  563.         padding: 0.5rem 0;
  564.         border: none;
  565.         text-align: right;
  566.     }
  567.     
  568.     .table tbody td::before {
  569.         content: attr(data-label);
  570.         font-weight: bold;
  571.         text-align: left;
  572.         margin-right: 1rem;
  573.     }
  574.     
  575.     .table tbody td:first-child {
  576.         flex-direction: column;
  577.         align-items: flex-start;
  578.     }
  579.     
  580.     .cart-item-image {
  581.         width: 100%;
  582.         height: 200px;
  583.         margin-bottom: 1rem;
  584.     }
  585.     
  586.     .cart-item-name {
  587.         font-size: 1rem;
  588.         margin-bottom: 0.5rem;
  589.     }
  590.     
  591.     .quantity-controls {
  592.         width: 100% !important;
  593.         max-width: 150px !important;
  594.         margin: 0 auto !important;
  595.         justify-content: center !important;
  596.         height: 40px !important;
  597.     }
  598.     
  599.     .quantity-controls .quantity-btn {
  600.         width: 40px !important;
  601.         font-size: 18px !important;
  602.     }
  603.     
  604.     .quantity-controls .quantity-input {
  605.         width: 60px !important;
  606.         font-size: 16px !important;
  607.     }
  608.     
  609.     .remove-btn {
  610.         width: 100%;
  611.         margin-top: 0.5rem;
  612.     }
  613. }
  615. .remove-btn {
  616.     background: #ff9900;
  617.     color: white;
  618.     border: none;
  619.     padding: 8px 16px;
  620.     border-radius: 4px;
  621.     cursor: pointer;
  622.     font-size: 12px;
  623. }
  625. .remove-btn:hover {
  626.     background: #e68900;
  627. }
  629. .cart-summary {
  630.     background: white;
  631.     border-radius: 8px;
  632.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  633.     padding: 20px;
  634.     height: fit-content;
  635. }
  637. .cart-subtotal {
  638.     display: flex;
  639.     justify-content: space-between;
  640.     padding: 10px 0;
  641.     border-bottom: 1px solid #ddd;
  642.     margin-bottom: 15px;
  643. }
  645. .cart-total {
  646.     font-size: 20px;
  647.     font-weight: 700;
  648.     color: #333;
  649. }
  651. .checkout-btn {
  652.     background: #ffa200;
  653.     color: white;
  654.     border: none;
  655.     padding: 12px 24px;
  656.     border-radius: 4px;
  657.     cursor: pointer;
  658.     width: 100%;
  659.     font-size: 16px;
  660.     font-weight: 600;
  661. }
  663. .checkout-btn:hover {
  664.     background: #e68900;
  665. }
  667. .continue-shopping {
  668.     background: #095ad3;
  669.     color: #ffffff;
  670.     border: none;
  671.     padding: 12px 24px;
  672.     border-radius: 4px;
  673.     cursor: pointer;
  674.     width: 100%;
  675.     font-size: 16px;
  676.     font-weight: 600;
  677.     margin-top: 10px;
  678. }
  680. .continue-shopping:hover {
  681.     background: #e68900;
  682.     color: #ffffff
  683. }
  685. /* ============================================
  686.    MODAL PERSONNALISÉ
  687.    ============================================ */
  688. .custom-modal {
  689.     display: none;
  690.     position: fixed;
  691.     top: 0;
  692.     left: 0;
  693.     width: 100%;
  694.     height: 100%;
  695.     z-index: 10000;
  696.     opacity: 0;
  697.     transition: opacity 0.3s ease;
  698. }
  700. .custom-modal.show {
  701.     display: flex;
  702.     align-items: center;
  703.     justify-content: center;
  704.     opacity: 1;
  705. }
  707. .custom-modal-overlay {
  708.     position: absolute;
  709.     top: 0;
  710.     left: 0;
  711.     width: 100%;
  712.     height: 100%;
  713.     background: rgba(0, 0, 0, 0.5);
  714.     backdrop-filter: blur(4px);
  715.     -webkit-backdrop-filter: blur(4px);
  716. }
  718. .custom-modal-content {
  719.     position: relative;
  720.     background: white;
  721.     border-radius: 12px;
  722.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  723.     max-width: 500px;
  724.     width: 90%;
  725.     max-height: 90vh;
  726.     overflow: hidden;
  727.     transform: scale(0.9) translateY(-20px);
  728.     transition: transform 0.3s ease;
  729.     z-index: 10001;
  730. }
  732. .custom-modal.show .custom-modal-content {
  733.     transform: scale(1) translateY(0);
  734. }
  736. .custom-modal-header {
  737.     display: flex;
  738.     align-items: center;
  739.     justify-content: space-between;
  740.     padding: 20px 24px;
  741.     border-bottom: 1px solid #e0e0e0;
  742.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  743. }
  745. .custom-modal-header.error {
  746.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  747. }
  749. .custom-modal-header.success {
  750.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  751. }
  753. .custom-modal-header.warning {
  754.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  755. }
  757. .custom-modal-header.info {
  758.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  759. }
  761. .custom-modal-title {
  762.     margin: 0;
  763.     font-size: 20px;
  764.     font-weight: 600;
  765.     color: white;
  766.     display: flex;
  767.     align-items: center;
  768.     gap: 10px;
  769. }
  771. .custom-modal-title::before {
  772.     content: '';
  773.     width: 24px;
  774.     height: 24px;
  775.     display: inline-block;
  776.     background-size: contain;
  777.     background-repeat: no-repeat;
  778.     background-position: center;
  779. }
  781. .custom-modal-title.success::before {
  782.     content: '✓';
  783.     font-size: 20px;
  784.     font-weight: bold;
  785. }
  787. .custom-modal-title.error::before {
  788.     content: '✕';
  789.     font-size: 20px;
  790.     font-weight: bold;
  791. }
  793. .custom-modal-title.warning::before {
  794.     content: '⚠';
  795.     font-size: 20px;
  796.     font-weight: bold;
  797. }
  799. .custom-modal-title.info::before {
  800.     content: 'ℹ';
  801.     font-size: 20px;
  802.     font-weight: bold;
  803. }
  805. .custom-modal-close {
  806.     background: rgba(255, 255, 255, 0.15);
  807.     border: 2px solid rgba(255, 255, 255, 0.3);
  808.     color: white;
  809.     font-size: 22px;
  810.     font-weight: 300;
  811.     line-height: 1;
  812.     width: 36px;
  813.     height: 36px;
  814.     border-radius: 50%;
  815.     cursor: pointer;
  816.     display: flex;
  817.     align-items: center;
  818.     justify-content: center;
  819.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  820.     padding: 0;
  821.     margin: 0;
  822.     position: relative;
  823.     overflow: hidden;
  824. }
  826. .custom-modal-close::before {
  827.     content: '';
  828.     position: absolute;
  829.     top: 50%;
  830.     left: 50%;
  831.     width: 0;
  832.     height: 0;
  833.     border-radius: 50%;
  834.     background: rgba(255, 255, 255, 0.2);
  835.     transform: translate(-50%, -50%);
  836.     transition: width 0.3s ease, height 0.3s ease;
  837. }
  839. .custom-modal-close:hover {
  840.     background: rgba(255, 255, 255, 0.25);
  841.     border-color: rgba(255, 255, 255, 0.5);
  842.     transform: rotate(90deg) scale(1.1);
  843.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  844. }
  846. .custom-modal-close:hover::before {
  847.     width: 100%;
  848.     height: 100%;
  849. }
  851. .custom-modal-close:active {
  852.     transform: rotate(90deg) scale(0.95);
  853.     background: rgba(255, 255, 255, 0.3);
  854. }
  856. .custom-modal-close span {
  857.     position: relative;
  858.     z-index: 1;
  859.     display: block;
  860.     line-height: 1;
  861. }
  863. .custom-modal-body {
  864.     padding: 24px;
  865.     font-size: 16px;
  866.     line-height: 1.6;
  867.     color: #333;
  868.     max-height: 60vh;
  869.     overflow-y: auto;
  870. }
  872. .custom-modal-body p {
  873.     margin: 0;
  874. }
  876. .custom-modal-footer {
  877.     display: flex;
  878.     gap: 12px;
  879.     justify-content: flex-end;
  880.     padding: 16px 24px;
  881.     border-top: 1px solid #e0e0e0;
  882.     background: #f8f9fa;
  883. }
  885. .custom-modal-footer.single-button {
  886.     justify-content: center;
  887. }
  889. .custom-modal-btn {
  890.     padding: 10px 24px;
  891.     border: none;
  892.     border-radius: 6px;
  893.     font-size: 15px;
  894.     font-weight: 500;
  895.     cursor: pointer;
  896.     transition: all 0.2s ease;
  897.     min-width: 100px;
  898. }
  900. .custom-modal-btn-primary {
  901.     background: #ffa200;
  902.     color: white;
  903. }
  905. .custom-modal-btn-primary:hover {
  906.     background: #e68900;
  907.     transform: translateY(-1px);
  908.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  909. }
  911. .custom-modal-btn-secondary {
  912.     background: #6c757d;
  913.     color: white;
  914. }
  916. .custom-modal-btn-secondary:hover {
  917.     background: #5a6268;
  918.     transform: translateY(-1px);
  919.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  920. }
  922. .custom-modal-btn-success {
  923.     background: #28a745;
  924.     color: white;
  925. }
  927. .custom-modal-btn-success:hover {
  928.     background: #218838;
  929.     transform: translateY(-1px);
  930.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  931. }
  933. .custom-modal-btn-danger {
  934.     background: #dc3545;
  935.     color: white;
  936. }
  938. .custom-modal-btn-danger:hover {
  939.     background: #c82333;
  940.     transform: translateY(-1px);
  941.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  942. }
  944. /* Animation pour les modals */
  945. @keyframes modalFadeIn {
  946.     from {
  947.         opacity: 0;
  948.     }
  949.     to {
  950.         opacity: 1;
  951.     }
  952. }
  954. @keyframes modalSlideIn {
  955.     from {
  956.         transform: scale(0.9) translateY(-20px);
  957.         opacity: 0;
  958.     }
  959.     to {
  960.         transform: scale(1) translateY(0);
  961.         opacity: 1;
  962.     }
  963. }
  965. .custom-modal.show .custom-modal-overlay {
  966.     animation: modalFadeIn 0.3s ease;
  967. }
  969. .custom-modal.show .custom-modal-content {
  970.     animation: modalSlideIn 0.3s ease;
  971. }
  973. /* Responsive */
  974. @media (max-width: 575.98px) {
  975.     .custom-modal-content {
  976.         width: 95%;
  977.         margin: 20px;
  978.     }
  979.     
  980.     .custom-modal-header {
  981.         padding: 16px 20px;
  982.     }
  983.     
  984.     .custom-modal-title {
  985.         font-size: 18px;
  986.     }
  987.     
  988.     .custom-modal-body {
  989.         padding: 20px;
  990.         font-size: 15px;
  991.     }
  992.     
  993.     .custom-modal-footer {
  994.         flex-direction: column;
  995.         padding: 16px 20px;
  996.     }
  997.     
  998.     .custom-modal-btn {
  999.         width: 100%;
  1000.     }
  1001. }
  1002. </style>
  1003. ";
  1004.         
  1005.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1007.         
  1008.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1010.         yield from [];
  1011.     }
  1013.     // line 816
  1014.     /**
  1015.      * @return iterable<null|scalar|\Stringable>
  1016.      */
  1017.     public function block_javascripts(array $context, array $blocks = []): iterable
  1018.     {
  1019.         $macros = $this->macros;
  1020.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1021.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1023.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1024.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1026.         // line 817
  1027.         yield "<script>
  1028. // Variables globales pour le modal
  1029. let modalConfirmCallback = null;
  1030. let modalCancelCallback = null;
  1032. // Fonctions pour gérer le modal personnalisé
  1033. function showCustomModal(options) {
  1034.     const modal = document.getElementById('customModal');
  1035.     const title = document.getElementById('modalTitle');
  1036.     const message = document.getElementById('modalMessage');
  1037.     const footer = document.getElementById('modalFooter');
  1038.     const confirmBtn = document.getElementById('modalConfirmBtn');
  1039.     const cancelBtn = document.getElementById('modalCancelBtn');
  1040.     const header = modal.querySelector('.custom-modal-header');
  1041.     
  1042.     // Réinitialiser les classes
  1043.     header.className = 'custom-modal-header';
  1044.     title.className = 'custom-modal-title';
  1045.     footer.className = 'custom-modal-footer';
  1046.     
  1047.     // Définir le titre et le message
  1048.     title.textContent = options.title || 'Information';
  1049.     message.textContent = options.message || '';
  1050.     
  1051.     // Définir le type (success, error, warning, info)
  1052.     const type = options.type || 'info';
  1053.     header.classList.add(type);
  1054.     title.classList.add(type);
  1055.     
  1056.     // Configurer les boutons
  1057.     if (options.showCancel !== false) {
  1058.         cancelBtn.style.display = 'block';
  1059.         footer.classList.remove('single-button');
  1060.     } else {
  1061.         cancelBtn.style.display = 'none';
  1062.         footer.classList.add('single-button');
  1063.     }
  1064.     
  1065.     // Configurer le bouton de confirmation
  1066.     if (options.confirmText) {
  1067.         confirmBtn.textContent = options.confirmText;
  1068.     }
  1069.     
  1070.     if (options.confirmClass) {
  1071.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  1072.     } else {
  1073.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  1074.     }
  1075.     
  1076.     // Stocker les callbacks
  1077.     modalConfirmCallback = options.onConfirm || null;
  1078.     modalCancelCallback = options.onCancel || null;
  1079.     
  1080.     // Afficher le modal
  1081.     modal.classList.add('show');
  1082.     document.body.style.overflow = 'hidden';
  1083. }
  1085. function closeCustomModal() {
  1086.     const modal = document.getElementById('customModal');
  1087.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  1088.     
  1089.     modal.classList.remove('show');
  1090.     document.body.style.overflow = '';
  1091.     
  1092.     // Réinitialiser les callbacks
  1093.     modalConfirmCallback = null;
  1094.     modalCancelCallback = null;
  1095.     
  1096.     // Appeler le callback d'annulation si présent
  1097.     if (cancelCallback) {
  1098.         cancelCallback();
  1099.     }
  1100. }
  1102. function confirmModalAction() {
  1103.     if (modalConfirmCallback) {
  1104.         modalConfirmCallback();
  1105.     }
  1106.     closeCustomModal();
  1107. }
  1109. // Fermer le modal en cliquant sur l'overlay
  1110. document.addEventListener('DOMContentLoaded', function() {
  1111.     const modal = document.getElementById('customModal');
  1112.     const overlay = modal.querySelector('.custom-modal-overlay');
  1113.     
  1114.     overlay.addEventListener('click', function() {
  1115.         closeCustomModal();
  1116.     });
  1117.     
  1118.     // Fermer avec la touche Escape
  1119.     document.addEventListener('keydown', function(e) {
  1120.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  1121.             closeCustomModal();
  1122.         }
  1123.     });
  1124. });
  1126. // Fonctions utilitaires pour différents types de modals
  1127. function showAlert(title, message, type = 'info') {
  1128.     showCustomModal({
  1129.         title: title,
  1130.         message: message,
  1131.         type: type,
  1132.         showCancel: false,
  1133.         confirmText: 'OK'
  1134.     });
  1135. }
  1137. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  1138.     showCustomModal({
  1139.         title: title,
  1140.         message: message,
  1141.         type: type,
  1142.         showCancel: true,
  1143.         confirmText: 'Confirmer',
  1144.         cancelText: 'Annuler',
  1145.         onConfirm: onConfirm,
  1146.         onCancel: onCancel
  1147.     });
  1148. }
  1150. function proceedToCheckout() {
  1151.     // Vérifier qu'il y a des articles dans le panier
  1152.     if (Object.keys(cartData).length === 0) {
  1153.         showAlert('Panier vide', 'Votre panier est vide. Veuillez ajouter des articles avant de continuer.', 'warning');
  1154.         return;
  1155.     }
  1156.     
  1157.     // Rediriger vers la page de checkout
  1158.     window.location.href = '";
  1159.         // line 948
  1160.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_checkout");
  1161.         yield "';
  1162. }
  1164. function changeQuantity(productId, delta) {
  1165.     const qtyInput = document.getElementById('qty-' + productId);
  1166.     if (!qtyInput) return;
  1167.     
  1168.     const currentQty = parseInt(qtyInput.value) || 0;
  1169.     const newQty = Math.max(0, currentQty + delta);
  1170.     
  1171.     updateQuantity(productId, newQty);
  1172. }
  1173. let cartData = {}; // Stocker les données du panier côté client
  1175. // Initialiser les données du panier
  1176. ";
  1177.         // line 963
  1178.         $context['_parent'] = $context;
  1179.         $context['_seq'] = CoreExtension::ensureTraversable(($context["items"] ?? null));
  1180.         foreach ($context['_seq'] as $context["_key"] => $context["item"]) {
  1181.             // line 964
  1182.             yield "    ";
  1183.             $context["image"] = (((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "images", [], "any", true, true, false, 964) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["item"], "images", [], "any", false, false, false, 964)) > 0))) ? ((($_v0 = CoreExtension::getAttribute($this->env, $this->source, $context["item"], "images", [], "any", false, false, false, 964)) && is_array($_v0) || $_v0 instanceof ArrayAccess ? ($_v0[0] ?? null) : null)) : ($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg")));
  1184.             // line 965
  1185.             yield "
  1186. cartData[";
  1187.             // line 966
  1188.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 966), "html", null, true);
  1189.             yield "] = {
  1190.     id: ";
  1191.             // line 967
  1192.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 967), "html", null, true);
  1193.             yield ",
  1194.     name: '";
  1195.             // line 968
  1196.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 968), "html", null, true);
  1197.             yield "',
  1198.     price: ";
  1199.             // line 969
  1200.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price", [], "any", false, false, false, 969), "html", null, true);
  1201.             yield ",
  1202.     qty: ";
  1203.             // line 970
  1204.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 970), "html", null, true);
  1205.             yield ",
  1206.     image: '";
  1207.             // line 971
  1208.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["image"] ?? null), "html", null, true);
  1209.             yield "',
  1210.     slug: '";
  1211.             // line 972
  1212.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "slug", [], "any", false, false, false, 972), "html", null, true);
  1213.             yield "'
  1214. };
  1215. ";
  1216.         }
  1217.         $_parent = $context['_parent'];
  1218.         unset($context['_seq'], $context['_key'], $context['item'], $context['_parent']);
  1219.         $context = array_intersect_key($context, $_parent) + $_parent;
  1220.         // line 975
  1221.         yield "
  1222. function updateQuantity(productId, newQty) {
  1223.     const item = cartData[productId];
  1224.     
  1225.     if (!item) {
  1226.         console.error('Produit non trouvé:', productId);
  1227.         return;
  1228.     }
  1229.     
  1230.     // Validation de la quantité
  1231.     newQty = Math.max(0, parseInt(newQty) || 0);
  1232.     
  1233.     if (newQty === 0) {
  1234.         removeFromCart(productId);
  1235.         return;
  1236.     }
  1237.     
  1238.     if (newQty > 99) {
  1239.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  1240.         return;
  1241.     }
  1242.     
  1243.     // Mettre à jour l'interface immédiatement (optimistic update)
  1244.     updateCartDisplay(productId, newQty);
  1245.     
  1246.     // Envoyer la requête au serveur
  1247.     fetch('";
  1248.         // line 1001
  1249.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_update");
  1250.         yield "', {
  1251.         method: 'POST',
  1252.         headers: { 
  1253.             'Content-Type': 'application/x-www-form-urlencoded',
  1254.             'X-Requested-With': 'XMLHttpRequest'
  1255.         },
  1256.         body: 'productId=' + productId + '&qty=' + newQty
  1257.     })
  1258.     .then(response => response.json())
  1259.     .then(data => {
  1260.         if (data.ok) {
  1261.             // Les données serveur confirment la mise à jour
  1262.             // cartData est déjà à jour depuis l'optimistic update
  1263.             console.log('Panier mis à jour avec succès');
  1264.         } else {
  1265.             // En cas d'erreur, restaurer la valeur précédente
  1266.             const oldQty = item.qty;
  1267.             updateCartDisplay(productId, oldQty);
  1268.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  1269.         }
  1270.     })
  1271.     .catch(error => {
  1272.         console.error('Erreur:', error);
  1273.         // Restaurer la valeur précédente en cas d'erreur réseau
  1274.         const oldQty = item.qty;
  1275.         updateCartDisplay(productId, oldQty);
  1276.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1277.     });
  1278. }
  1280. function updateCartDisplay(productId, qty) {
  1281.     const item = cartData[productId];
  1282.     if (!item) return;
  1283.     
  1284.     // Mettre à jour les données locales
  1285.     item.qty = qty;
  1286.     
  1287.     // Mettre à jour la quantité dans l'input
  1288.     const qtyInput = document.getElementById('qty-' + productId);
  1289.     if (qtyInput) {
  1290.         qtyInput.value = qty;
  1291.     }
  1292.     
  1293.     // Mettre à jour le total du produit
  1294.     const totalElement = document.getElementById('total-' + productId);
  1295.     if (totalElement) {
  1296.         const itemTotal = (item.price * qty);
  1297.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  1298.             minimumFractionDigits: 2,
  1299.             maximumFractionDigits: 2
  1300.         }) + ' HTG';
  1301.     }
  1302.     
  1303.     // Mettre à jour les totaux généraux
  1304.     updateCartSummary();
  1305. }
  1307. function updateCartTotals(data) {
  1308.     // Mettre à jour le sous-total depuis les données serveur
  1309.     const subtotalElement = document.getElementById('cart-subtotal');
  1310.     const totalElement = document.getElementById('cart-total');
  1311.     
  1312.     if (subtotalElement) {
  1313.         subtotalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1314.             minimumFractionDigits: 2,
  1315.             maximumFractionDigits: 2
  1316.         }) + ' HTG';
  1317.     }
  1318.     
  1319.     if (totalElement) {
  1320.         totalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1321.             minimumFractionDigits: 2,
  1322.             maximumFractionDigits: 2
  1323.         }) + ' HTG';
  1324.     }
  1325.     
  1326.     // Mettre à jour le compteur d'articles
  1327.     const itemCountElement = document.querySelector('.cart-subtotal span');
  1328.     if (itemCountElement) {
  1329.         const totalItems = Object.values(cartData).reduce((sum, item) => sum + item.qty, 0);
  1330.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1331.         itemCountElement.textContent = itemText;
  1332.     }
  1333. }
  1335. function updateCartSummary() {
  1336.     // Calculer les totaux côté client depuis cartData
  1337.     let subtotal = 0;
  1338.     let totalItems = 0;
  1339.     
  1340.     Object.values(cartData).forEach(item => {
  1341.         subtotal += item.price * item.qty;
  1342.         totalItems += item.qty;
  1343.     });
  1344.     
  1345.     // Mettre à jour l'affichage du sous-total
  1346.     const subtotalElement = document.getElementById('cart-subtotal');
  1347.     if (subtotalElement) {
  1348.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1349.             minimumFractionDigits: 2,
  1350.             maximumFractionDigits: 2
  1351.         }) + ' HTG';
  1352.     }
  1353.     
  1354.     // Mettre à jour l'affichage du total
  1355.     const totalElement = document.getElementById('cart-total');
  1356.     if (totalElement) {
  1357.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1358.             minimumFractionDigits: 2,
  1359.             maximumFractionDigits: 2
  1360.         }) + ' HTG';
  1361.     }
  1362.     
  1363.     // Mettre à jour le compteur d'articles
  1364.     const itemCountElement = document.getElementById('cart-item-count');
  1365.     if (itemCountElement) {
  1366.         itemCountElement.textContent = totalItems;
  1367.     }
  1368.     
  1369.     // Mettre à jour le label du sous-total
  1370.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  1371.     if (subtotalLabel) {
  1372.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1373.         subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1374.     }
  1375. }
  1377. function removeFromCart(productId) {
  1378.     const item = cartData[productId];
  1379.     const itemName = item ? item.name : 'cet article';
  1380.     
  1381.     showConfirm(
  1382.         'Supprimer l\\'article',
  1383.         `Êtes-vous sûr de vouloir supprimer \"\${itemName}\" de votre panier ?`,
  1384.         function() {
  1385.             // Mettre à jour l'interface immédiatement
  1386.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  1387.             if (row) {
  1388.                 row.style.opacity = '0.5';
  1389.                 row.style.pointerEvents = 'none';
  1390.             }
  1391.             
  1392.             performRemoveFromCart(productId, row);
  1393.         },
  1394.         null,
  1395.         'warning'
  1396.     );
  1397. }
  1399. function performRemoveFromCart(productId, row) {
  1400.     
  1401.     fetch('";
  1402.         // line 1152
  1403.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_remove");
  1404.         yield "', {
  1405.         method: 'POST',
  1406.         headers: { 
  1407.             'Content-Type': 'application/x-www-form-urlencoded',
  1408.             'X-Requested-With': 'XMLHttpRequest'
  1409.         },
  1410.         body: 'productId=' + productId
  1411.     })
  1412.     .then(response => response.json())
  1413.     .then(data => {
  1414.         if (data.ok) {
  1415.             // Supprimer des données locales
  1416.             delete cartData[productId];
  1417.             
  1418.             // Supprimer la ligne du DOM
  1419.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  1420.             if (row) {
  1421.                 row.remove();
  1422.             }
  1423.             
  1424.             // Mettre à jour les totaux
  1425.             updateCartTotals(data);
  1426.             
  1427.             // Mettre à jour le résumé du panier
  1428.             updateCartSummary();
  1429.             
  1430.             // Afficher un message de succès
  1431.             showAlert('Article supprimé', 'L\\'article a été supprimé de votre panier avec succès.', 'success');
  1432.             
  1433.             // Vérifier si le panier est vide
  1434.             if (Object.keys(cartData).length === 0) {
  1435.                 setTimeout(function() {
  1436.                     location.reload();
  1437.                 }, 1500);
  1438.             }
  1439.         } else {
  1440.             // Restaurer l'affichage en cas d'erreur
  1441.             if (row) {
  1442.                 row.style.opacity = '1';
  1443.                 row.style.pointerEvents = 'auto';
  1444.             }
  1445.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\\'article.', 'error');
  1446.         }
  1447.     })
  1448.     .catch(error => {
  1449.         console.error('Erreur:', error);
  1450.         // Restaurer l'affichage en cas d'erreur réseau
  1451.         if (row) {
  1452.             row.style.opacity = '1';
  1453.             row.style.pointerEvents = 'auto';
  1454.         }
  1455.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1456.     });
  1457. }
  1459. // Script pour forcer l'application des styles des boutons de quantité
  1460. document.addEventListener('DOMContentLoaded', function() {
  1461.     const quantityControls = document.querySelectorAll('.quantity-controls');
  1462.     quantityControls.forEach(function(control) {
  1463.         if (control) {
  1464.             // Forcer les styles sur le conteneur
  1465.             control.style.display = 'flex';
  1466.             control.style.alignItems = 'center';
  1467.             control.style.justifyContent = 'center';
  1468.             control.style.border = '1px solid #ddd';
  1469.             control.style.borderRadius = '4px';
  1470.             control.style.width = '120px';
  1471.             control.style.height = '40px';
  1472.             control.style.position = 'relative';
  1473.             control.style.background = 'white';
  1474.             control.style.overflow = 'hidden';
  1475.             
  1476.             // Forcer les styles sur les boutons
  1477.             const buttons = control.querySelectorAll('.quantity-btn');
  1478.             buttons.forEach(function(btn, index) {
  1479.                 btn.style.background = '#f8f8f8';
  1480.                 btn.style.border = 'none';
  1481.                 btn.style.width = '35px';
  1482.                 btn.style.height = '100%';
  1483.                 btn.style.cursor = 'pointer';
  1484.                 btn.style.fontSize = '18px';
  1485.                 btn.style.fontWeight = '600';
  1486.                 btn.style.color = '#333';
  1487.                 btn.style.display = 'flex';
  1488.                 btn.style.alignItems = 'center';
  1489.                 btn.style.justifyContent = 'center';
  1490.                 btn.style.padding = '0';
  1491.                 btn.style.margin = '0';
  1492.                 btn.style.lineHeight = '1';
  1493.                 btn.style.position = 'relative';
  1494.                 btn.style.zIndex = '1';
  1495.                 
  1496.                 // Ajouter les bordures entre les boutons
  1497.                 if (index === 0) {
  1498.                     btn.style.borderRight = '1px solid #ddd';
  1499.                 } else if (index === buttons.length - 1) {
  1500.                     btn.style.borderLeft = '1px solid #ddd';
  1501.                 }
  1502.             });
  1503.             
  1504.             // Forcer les styles sur l'input
  1505.             const input = control.querySelector('.quantity-input');
  1506.             if (input) {
  1507.                 input.style.border = 'none';
  1508.                 input.style.width = '50px';
  1509.                 input.style.height = '100%';
  1510.                 input.style.textAlign = 'center';
  1511.                 input.style.fontSize = '15px';
  1512.                 input.style.fontWeight = '500';
  1513.                 input.style.padding = '0';
  1514.                 input.style.margin = '0';
  1515.                 input.style.background = 'white';
  1516.                 input.style.color = '#333';
  1517.                 input.style.outline = 'none';
  1518.                 input.style.boxShadow = 'none';
  1519.                 input.style.position = 'relative';
  1520.                 input.style.zIndex = '1';
  1521.             }
  1522.         }
  1523.     });
  1524. });
  1526. </script>
  1527. ";
  1528.         
  1529.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1531.         
  1532.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1534.         yield from [];
  1535.     }
  1537.     /**
  1538.      * @codeCoverageIgnore
  1539.      */
  1540.     public function getTemplateName(): string
  1541.     {
  1542.         return "home/cart.html.twig";
  1543.     }
  1545.     /**
  1546.      * @codeCoverageIgnore
  1547.      */
  1548.     public function isTraitable(): bool
  1549.     {
  1550.         return false;
  1551.     }
  1553.     /**
  1554.      * @codeCoverageIgnore
  1555.      */
  1556.     public function getDebugInfo(): array
  1557.     {
  1558.         return array (  1403 => 1152,  1249 => 1001,  1221 => 975,  1212 => 972,  1208 => 971,  1204 => 970,  1200 => 969,  1196 => 968,  1192 => 967,  1188 => 966,  1185 => 965,  1182 => 964,  1178 => 963,  1160 => 948,  1027 => 817,  1014 => 816,  314 => 125,  301 => 124,  261 => 94,  255 => 91,  248 => 87,  242 => 86,  231 => 77,  221 => 73,  215 => 69,  213 => 68,  205 => 65,  197 => 62,  190 => 58,  182 => 57,  178 => 56,  171 => 52,  161 => 47,  153 => 45,  151 => 44,  146 => 41,  141 => 40,  111 => 13,  102 => 6,  89 => 5,  66 => 3,  43 => 1,);
  1559.     }
  1561.     public function getSourceContext(): Source
  1562.     {
  1563.         return new Source("{% extends 'base_home.html.twig' %}
  1565. {% block title %}Panier | MaketOu{% endblock %}
  1567. {% block body %}
  1568.     <!-- Start Banner Area -->
  1569.     <section class=\"banner-area organic-breadcrumb\">
  1570.         <div class=\"container\">
  1571.             <div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  1572.                 <div class=\"col-first\">
  1573.                     <h1>Panier</h1>
  1574.                     <nav class=\"d-flex align-items-center\">
  1575.                         <a href=\"{{ path('ui_home') }}\">Accueil<span class=\"lnr lnr-arrow-right\"></span></a>
  1576.                         <a href=\"javascript:void(0)\">Panier</a>
  1577.                     </nav>
  1578.                 </div>
  1579.             </div>
  1580.         </div>
  1581.     </section>
  1582.     <!-- End Banner Area -->
  1584.     <!--================Cart Area =================-->
  1585.     <section class=\"cart_area\">
  1586.         <div class=\"container\">
  1587.             <div class=\"row\">
  1588.                 <div class=\"col-lg-8\">
  1589.                     <div class=\"cart_inner\">
  1590.                         <div class=\"table-responsive\">
  1591.                             <table class=\"table\">
  1592.                                 <thead>
  1593.                                     <tr>
  1594.                                         <th scope=\"col\">Produit</th>
  1595.                                         <th scope=\"col\">Prix</th>
  1596.                                         <th scope=\"col\">Quantité</th>
  1597.                                         <th scope=\"col\">Total</th>
  1598.                                         <th scope=\"col\">Action</th>
  1599.                                     </tr>
  1600.                                 </thead>
  1601.                                 <tbody>
  1602.                                     {% for item in items %}
  1603.                                     <tr>
  1604.                                         <td data-label=\"Produit\">
  1605.                                             <div class=\"cart-item\">
  1606.                                                 {% set image = (item.image is defined and item.image|length > 0) ? item.image : asset('ui/img/category/s-p1.jpg') %}
  1607.                                                 <img src=\"{{ image }}\" alt=\"{{ item.name }}\" class=\"cart-item-image\">
  1608.                                                 <div class=\"cart-item-info\">
  1609.                                                     <a href=\"{{ path('ui_product_show', { slug: item.slug }) }}\" class=\"cart-item-name\">{{ item.name }}</a>
  1610.                                                 </div>
  1611.                                             </div>
  1612.                                         </td>
  1613.                                         <td data-label=\"Prix\">
  1614.                                             <span class=\"cart-item-price\">{{ item.price|number_format(2, '.', ' ') }} HTG</span>
  1615.                                         </td>
  1616.                                         <td data-label=\"Quantité\">
  1617.                                             <div class=\"quantity-controls\">
  1618.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity({{ item.id }}, -1)\">-</button>
  1619.                                                 <input type=\"text\" value=\"{{ item.qty }}\" class=\"quantity-input\" id=\"qty-{{ item.id }}\" onchange=\"updateQuantity({{ item.id }}, this.value)\">
  1620.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity({{ item.id }}, 1)\">+</button>
  1621.                                             </div>
  1622.                                         </td>
  1623.                                         <td data-label=\"Total\">
  1624.                                             <span class=\"cart-item-total\" id=\"total-{{ item.id }}\">{{ (item.price * item.qty)|number_format(2, '.', ' ') }} HTG</span>
  1625.                                         </td>
  1626.                                         <td data-label=\"Action\">
  1627.                                             <button class=\"remove-btn\" onclick=\"removeFromCart({{ item.id }})\">Supprimer</button>
  1628.                                         </td>
  1629.                                     </tr>
  1630.                                     {% else %}
  1631.                                         <tr>
  1632.                                             <td colspan=\"5\" style=\"text-align: center; padding: 50px;\">
  1633.                                                 Votre panier est vide.
  1634.                                                 <br>
  1635.                                                 <a href=\"{{ path('ui_listing') }}\" style=\"color: #007185;\">Continuer vos achats</a>
  1636.                                             </td>
  1637.                                         </tr>
  1638.                                     {% endfor %}
  1639.                                 </tbody>
  1640.                             </table>
  1641.                         </div>
  1642.                     </div>
  1643.                 </div>
  1644.                 <div class=\"col-lg-4\">
  1645.                     <div class=\"cart-summary\">
  1646.                         <h3>Résumé de la commande</h3>
  1647.                         <div class=\"cart-subtotal\">
  1648.                             <span id=\"cart-subtotal-label\">Sous-total (<span id=\"cart-item-count\">{{ items|length }}</span> article{{ items|length > 1 ? 's' : '' }})</span>
  1649.                             <span id=\"cart-subtotal\">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  1650.                         </div>
  1651.                         <div class=\"cart-total\">
  1652.                             <span>Total</span>
  1653.                             <span id=\"cart-total\">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  1654.                         </div>
  1655.                         <button class=\"checkout-btn mt-3\" onclick=\"proceedToCheckout()\">Passer la commande</button>
  1656.                         <button class=\"continue-shopping\" onclick=\"window.location.href='{{ path('ui_listing') }}'\">Continuer vos achats</button>
  1657.                     </div>
  1658.                 </div>
  1659.             </div>
  1660.         </div>
  1661.     </section>
  1662.     <!--================End Cart Area =================-->
  1664.     <!-- Modal personnalisé -->
  1665.     <div id=\"customModal\" class=\"custom-modal\">
  1666.         <div class=\"custom-modal-overlay\"></div>
  1667.         <div class=\"custom-modal-content\">
  1668.             <div class=\"custom-modal-header\">
  1669.                 <h3 class=\"custom-modal-title\" id=\"modalTitle\">Titre</h3>
  1670.                 <button class=\"custom-modal-close\" onclick=\"closeCustomModal()\" aria-label=\"Fermer\">
  1671.                     <span>&times;</span>
  1672.                 </button>
  1673.             </div>
  1674.             <div class=\"custom-modal-body\" id=\"modalBody\">
  1675.                 <p id=\"modalMessage\">Message</p>
  1676.             </div>
  1677.             <div class=\"custom-modal-footer\" id=\"modalFooter\">
  1678.                 <button class=\"custom-modal-btn custom-modal-btn-primary\" id=\"modalConfirmBtn\" onclick=\"confirmModalAction()\">Confirmer</button>
  1679.                 <button class=\"custom-modal-btn custom-modal-btn-secondary\" id=\"modalCancelBtn\" onclick=\"closeCustomModal()\">Annuler</button>
  1680.             </div>
  1681.         </div>
  1682.     </div>
  1684. {% endblock %}
  1686. {% block stylesheets %}
  1687. <style>
  1688. .cart_area {
  1689.     background-color: #f8f8f8;
  1690.     padding: 20px 0;
  1691. }
  1693. .cart_inner {
  1694.     background: white;
  1695.     border-radius: 8px;
  1696.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  1697.     overflow: hidden;
  1698. }
  1700. .table th {
  1701.     background-color: #f3f3f3;
  1702.     border-bottom: 2px solid #ddd;
  1703.     font-weight: 600;
  1704.     color: #333;
  1705.     padding: 15px;
  1706. }
  1708. .table td {
  1709.     vertical-align: middle;
  1710.     padding: 15px;
  1711. }
  1713. .cart-item {
  1714.     display: flex;
  1715.     align-items: center;
  1716. }
  1718. .cart-item-image {
  1719.     width: 80px;
  1720.     height: 80px;
  1721.     object-fit: cover;
  1722.     border-radius: 8px;
  1723.     margin-right: 15px;
  1724. }
  1726. .cart-item-info {
  1727.     flex-grow: 1;
  1728. }
  1730. .cart-item-name {
  1731.     font-weight: 500;
  1732.     color: #007185;
  1733.     text-decoration: none;
  1734.     margin-bottom: 5px;
  1735. }
  1737. .cart-item-name:hover {
  1738.     text-decoration: underline;
  1739. }
  1741. .cart-item-price {
  1742.     color: #333;
  1743.     font-size: 18px;
  1744.     font-weight: 700;
  1745. }
  1747. .quantity-controls {
  1748.     display: flex !important;
  1749.     align-items: center !important;
  1750.     justify-content: center !important;
  1751.     border: 1px solid #ddd !important;
  1752.     border-radius: 4px !important;
  1753.     width: 120px !important;
  1754.     height: 40px !important;
  1755.     position: relative !important;
  1756.     background: white !important;
  1757.     overflow: hidden !important;
  1758. }
  1760. .quantity-controls .quantity-btn {
  1761.     background: #f8f8f8 !important;
  1762.     border: none !important;
  1763.     width: 35px !important;
  1764.     height: 100% !important;
  1765.     min-width: 35px !important;
  1766.     cursor: pointer !important;
  1767.     font-size: 18px !important;
  1768.     font-weight: 600 !important;
  1769.     color: #333 !important;
  1770.     display: flex !important;
  1771.     align-items: center !important;
  1772.     justify-content: center !important;
  1773.     padding: 0 !important;
  1774.     margin: 0 !important;
  1775.     line-height: 1 !important;
  1776.     transition: background-color 0.2s ease !important;
  1777.     position: relative !important;
  1778.     z-index: 1 !important;
  1779. }
  1781. .quantity-controls .quantity-btn:first-child {
  1782.     border-right: 1px solid #ddd !important;
  1783. }
  1785. .quantity-controls .quantity-btn:last-child {
  1786.     border-left: 1px solid #ddd !important;
  1787. }
  1789. .quantity-controls .quantity-btn:hover {
  1790.     background: #e7e7e7 !important;
  1791.     color: #000 !important;
  1792. }
  1794. .quantity-controls .quantity-btn:active {
  1795.     background: #d0d0d0 !important;
  1796. }
  1798. .quantity-controls .quantity-input {
  1799.     border: none !important;
  1800.     width: 50px !important;
  1801.     min-width: 50px !important;
  1802.     height: 100% !important;
  1803.     text-align: center !important;
  1804.     font-size: 15px !important;
  1805.     font-weight: 500 !important;
  1806.     padding: 0 !important;
  1807.     margin: 0 !important;
  1808.     background: white !important;
  1809.     color: #333 !important;
  1810.     outline: none !important;
  1811.     box-shadow: none !important;
  1812.     -moz-appearance: textfield !important;
  1813.     position: relative !important;
  1814.     z-index: 1 !important;
  1815. }
  1817. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  1818. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  1819.     -webkit-appearance: none !important;
  1820.     margin: 0 !important;
  1821. }
  1823. /* Surcharger les styles externes qui pourraient interférer */
  1824. .cart_inner .table tbody tr td .quantity-controls,
  1825. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  1826. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  1827.     position: relative !important;
  1828. }
  1830. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  1831. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  1832.     display: none !important;
  1833.     content: none !important;
  1834. }
  1836. .cart-item-total {
  1837.     font-size: 18px;
  1838.     font-weight: 700;
  1839.     color: #333;
  1840. }
  1842. /* Responsive Styles */
  1843. @media (max-width: 991.98px) {
  1844.     .cart_area {
  1845.         padding: 15px 0;
  1846.     }
  1847.     
  1848.     .cart-summary {
  1849.         margin-top: 2rem;
  1850.     }
  1851. }
  1853. @media (max-width: 767.98px) {
  1854.     .cart_inner {
  1855.         border-radius: 0;
  1856.     }
  1857.     
  1858.     .table {
  1859.         font-size: 0.875rem;
  1860.     }
  1861.     
  1862.     .table th {
  1863.         padding: 10px 8px;
  1864.         font-size: 0.8rem;
  1865.     }
  1866.     
  1867.     .table td {
  1868.         padding: 10px 8px;
  1869.     }
  1870.     
  1871.     .cart-item {
  1872.         flex-direction: column;
  1873.         align-items: flex-start;
  1874.     }
  1875.     
  1876.     .cart-item-image {
  1877.         width: 60px;
  1878.         height: 60px;
  1879.         margin-right: 0;
  1880.         margin-bottom: 10px;
  1881.     }
  1882.     
  1883.     .cart-item-name {
  1884.         font-size: 0.9rem;
  1885.     }
  1886.     
  1887.     .cart-item-price,
  1888.     .cart-item-total {
  1889.         font-size: 1rem;
  1890.     }
  1891.     
  1892.     .quantity-controls {
  1893.         width: 110px !important;
  1894.         height: 38px !important;
  1895.     }
  1896.     
  1897.     .quantity-controls .quantity-btn {
  1898.         width: 32px !important;
  1899.         font-size: 16px !important;
  1900.     }
  1901.     
  1902.     .quantity-controls .quantity-input {
  1903.         width: 46px !important;
  1904.         font-size: 14px !important;
  1905.     }
  1906.     
  1907.     .cart-summary {
  1908.         margin-top: 1.5rem;
  1909.         padding: 1.5rem;
  1910.     }
  1911.     
  1912.     .checkout-btn,
  1913.     .continue-shopping {
  1914.         width: 100%;
  1915.         margin-bottom: 0.5rem;
  1916.     }
  1917. }
  1919. @media (max-width: 575.98px) {
  1920.     .table thead {
  1921.         display: none;
  1922.     }
  1923.     
  1924.     .table tbody tr {
  1925.         display: block;
  1926.         margin-bottom: 1rem;
  1927.         border: 1px solid #dee2e6;
  1928.         border-radius: 8px;
  1929.         padding: 1rem;
  1930.     }
  1931.     
  1932.     .table tbody td {
  1933.         display: flex;
  1934.         justify-content: space-between;
  1935.         align-items: center;
  1936.         padding: 0.5rem 0;
  1937.         border: none;
  1938.         text-align: right;
  1939.     }
  1940.     
  1941.     .table tbody td::before {
  1942.         content: attr(data-label);
  1943.         font-weight: bold;
  1944.         text-align: left;
  1945.         margin-right: 1rem;
  1946.     }
  1947.     
  1948.     .table tbody td:first-child {
  1949.         flex-direction: column;
  1950.         align-items: flex-start;
  1951.     }
  1952.     
  1953.     .cart-item-image {
  1954.         width: 100%;
  1955.         height: 200px;
  1956.         margin-bottom: 1rem;
  1957.     }
  1958.     
  1959.     .cart-item-name {
  1960.         font-size: 1rem;
  1961.         margin-bottom: 0.5rem;
  1962.     }
  1963.     
  1964.     .quantity-controls {
  1965.         width: 100% !important;
  1966.         max-width: 150px !important;
  1967.         margin: 0 auto !important;
  1968.         justify-content: center !important;
  1969.         height: 40px !important;
  1970.     }
  1971.     
  1972.     .quantity-controls .quantity-btn {
  1973.         width: 40px !important;
  1974.         font-size: 18px !important;
  1975.     }
  1976.     
  1977.     .quantity-controls .quantity-input {
  1978.         width: 60px !important;
  1979.         font-size: 16px !important;
  1980.     }
  1981.     
  1982.     .remove-btn {
  1983.         width: 100%;
  1984.         margin-top: 0.5rem;
  1985.     }
  1986. }
  1988. .remove-btn {
  1989.     background: #ff9900;
  1990.     color: white;
  1991.     border: none;
  1992.     padding: 8px 16px;
  1993.     border-radius: 4px;
  1994.     cursor: pointer;
  1995.     font-size: 12px;
  1996. }
  1998. .remove-btn:hover {
  1999.     background: #e68900;
  2000. }
  2002. .cart-summary {
  2003.     background: white;
  2004.     border-radius: 8px;
  2005.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  2006.     padding: 20px;
  2007.     height: fit-content;
  2008. }
  2010. .cart-subtotal {
  2011.     display: flex;
  2012.     justify-content: space-between;
  2013.     padding: 10px 0;
  2014.     border-bottom: 1px solid #ddd;
  2015.     margin-bottom: 15px;
  2016. }
  2018. .cart-total {
  2019.     font-size: 20px;
  2020.     font-weight: 700;
  2021.     color: #333;
  2022. }
  2024. .checkout-btn {
  2025.     background: #ffa200;
  2026.     color: white;
  2027.     border: none;
  2028.     padding: 12px 24px;
  2029.     border-radius: 4px;
  2030.     cursor: pointer;
  2031.     width: 100%;
  2032.     font-size: 16px;
  2033.     font-weight: 600;
  2034. }
  2036. .checkout-btn:hover {
  2037.     background: #e68900;
  2038. }
  2040. .continue-shopping {
  2041.     background: #095ad3;
  2042.     color: #ffffff;
  2043.     border: none;
  2044.     padding: 12px 24px;
  2045.     border-radius: 4px;
  2046.     cursor: pointer;
  2047.     width: 100%;
  2048.     font-size: 16px;
  2049.     font-weight: 600;
  2050.     margin-top: 10px;
  2051. }
  2053. .continue-shopping:hover {
  2054.     background: #e68900;
  2055.     color: #ffffff
  2056. }
  2058. /* ============================================
  2059.    MODAL PERSONNALISÉ
  2060.    ============================================ */
  2061. .custom-modal {
  2062.     display: none;
  2063.     position: fixed;
  2064.     top: 0;
  2065.     left: 0;
  2066.     width: 100%;
  2067.     height: 100%;
  2068.     z-index: 10000;
  2069.     opacity: 0;
  2070.     transition: opacity 0.3s ease;
  2071. }
  2073. .custom-modal.show {
  2074.     display: flex;
  2075.     align-items: center;
  2076.     justify-content: center;
  2077.     opacity: 1;
  2078. }
  2080. .custom-modal-overlay {
  2081.     position: absolute;
  2082.     top: 0;
  2083.     left: 0;
  2084.     width: 100%;
  2085.     height: 100%;
  2086.     background: rgba(0, 0, 0, 0.5);
  2087.     backdrop-filter: blur(4px);
  2088.     -webkit-backdrop-filter: blur(4px);
  2089. }
  2091. .custom-modal-content {
  2092.     position: relative;
  2093.     background: white;
  2094.     border-radius: 12px;
  2095.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  2096.     max-width: 500px;
  2097.     width: 90%;
  2098.     max-height: 90vh;
  2099.     overflow: hidden;
  2100.     transform: scale(0.9) translateY(-20px);
  2101.     transition: transform 0.3s ease;
  2102.     z-index: 10001;
  2103. }
  2105. .custom-modal.show .custom-modal-content {
  2106.     transform: scale(1) translateY(0);
  2107. }
  2109. .custom-modal-header {
  2110.     display: flex;
  2111.     align-items: center;
  2112.     justify-content: space-between;
  2113.     padding: 20px 24px;
  2114.     border-bottom: 1px solid #e0e0e0;
  2115.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  2116. }
  2118. .custom-modal-header.error {
  2119.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  2120. }
  2122. .custom-modal-header.success {
  2123.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  2124. }
  2126. .custom-modal-header.warning {
  2127.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  2128. }
  2130. .custom-modal-header.info {
  2131.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  2132. }
  2134. .custom-modal-title {
  2135.     margin: 0;
  2136.     font-size: 20px;
  2137.     font-weight: 600;
  2138.     color: white;
  2139.     display: flex;
  2140.     align-items: center;
  2141.     gap: 10px;
  2142. }
  2144. .custom-modal-title::before {
  2145.     content: '';
  2146.     width: 24px;
  2147.     height: 24px;
  2148.     display: inline-block;
  2149.     background-size: contain;
  2150.     background-repeat: no-repeat;
  2151.     background-position: center;
  2152. }
  2154. .custom-modal-title.success::before {
  2155.     content: '✓';
  2156.     font-size: 20px;
  2157.     font-weight: bold;
  2158. }
  2160. .custom-modal-title.error::before {
  2161.     content: '✕';
  2162.     font-size: 20px;
  2163.     font-weight: bold;
  2164. }
  2166. .custom-modal-title.warning::before {
  2167.     content: '⚠';
  2168.     font-size: 20px;
  2169.     font-weight: bold;
  2170. }
  2172. .custom-modal-title.info::before {
  2173.     content: 'ℹ';
  2174.     font-size: 20px;
  2175.     font-weight: bold;
  2176. }
  2178. .custom-modal-close {
  2179.     background: rgba(255, 255, 255, 0.15);
  2180.     border: 2px solid rgba(255, 255, 255, 0.3);
  2181.     color: white;
  2182.     font-size: 22px;
  2183.     font-weight: 300;
  2184.     line-height: 1;
  2185.     width: 36px;
  2186.     height: 36px;
  2187.     border-radius: 50%;
  2188.     cursor: pointer;
  2189.     display: flex;
  2190.     align-items: center;
  2191.     justify-content: center;
  2192.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  2193.     padding: 0;
  2194.     margin: 0;
  2195.     position: relative;
  2196.     overflow: hidden;
  2197. }
  2199. .custom-modal-close::before {
  2200.     content: '';
  2201.     position: absolute;
  2202.     top: 50%;
  2203.     left: 50%;
  2204.     width: 0;
  2205.     height: 0;
  2206.     border-radius: 50%;
  2207.     background: rgba(255, 255, 255, 0.2);
  2208.     transform: translate(-50%, -50%);
  2209.     transition: width 0.3s ease, height 0.3s ease;
  2210. }
  2212. .custom-modal-close:hover {
  2213.     background: rgba(255, 255, 255, 0.25);
  2214.     border-color: rgba(255, 255, 255, 0.5);
  2215.     transform: rotate(90deg) scale(1.1);
  2216.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  2217. }
  2219. .custom-modal-close:hover::before {
  2220.     width: 100%;
  2221.     height: 100%;
  2222. }
  2224. .custom-modal-close:active {
  2225.     transform: rotate(90deg) scale(0.95);
  2226.     background: rgba(255, 255, 255, 0.3);
  2227. }
  2229. .custom-modal-close span {
  2230.     position: relative;
  2231.     z-index: 1;
  2232.     display: block;
  2233.     line-height: 1;
  2234. }
  2236. .custom-modal-body {
  2237.     padding: 24px;
  2238.     font-size: 16px;
  2239.     line-height: 1.6;
  2240.     color: #333;
  2241.     max-height: 60vh;
  2242.     overflow-y: auto;
  2243. }
  2245. .custom-modal-body p {
  2246.     margin: 0;
  2247. }
  2249. .custom-modal-footer {
  2250.     display: flex;
  2251.     gap: 12px;
  2252.     justify-content: flex-end;
  2253.     padding: 16px 24px;
  2254.     border-top: 1px solid #e0e0e0;
  2255.     background: #f8f9fa;
  2256. }
  2258. .custom-modal-footer.single-button {
  2259.     justify-content: center;
  2260. }
  2262. .custom-modal-btn {
  2263.     padding: 10px 24px;
  2264.     border: none;
  2265.     border-radius: 6px;
  2266.     font-size: 15px;
  2267.     font-weight: 500;
  2268.     cursor: pointer;
  2269.     transition: all 0.2s ease;
  2270.     min-width: 100px;
  2271. }
  2273. .custom-modal-btn-primary {
  2274.     background: #ffa200;
  2275.     color: white;
  2276. }
  2278. .custom-modal-btn-primary:hover {
  2279.     background: #e68900;
  2280.     transform: translateY(-1px);
  2281.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  2282. }
  2284. .custom-modal-btn-secondary {
  2285.     background: #6c757d;
  2286.     color: white;
  2287. }
  2289. .custom-modal-btn-secondary:hover {
  2290.     background: #5a6268;
  2291.     transform: translateY(-1px);
  2292.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  2293. }
  2295. .custom-modal-btn-success {
  2296.     background: #28a745;
  2297.     color: white;
  2298. }
  2300. .custom-modal-btn-success:hover {
  2301.     background: #218838;
  2302.     transform: translateY(-1px);
  2303.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  2304. }
  2306. .custom-modal-btn-danger {
  2307.     background: #dc3545;
  2308.     color: white;
  2309. }
  2311. .custom-modal-btn-danger:hover {
  2312.     background: #c82333;
  2313.     transform: translateY(-1px);
  2314.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  2315. }
  2317. /* Animation pour les modals */
  2318. @keyframes modalFadeIn {
  2319.     from {
  2320.         opacity: 0;
  2321.     }
  2322.     to {
  2323.         opacity: 1;
  2324.     }
  2325. }
  2327. @keyframes modalSlideIn {
  2328.     from {
  2329.         transform: scale(0.9) translateY(-20px);
  2330.         opacity: 0;
  2331.     }
  2332.     to {
  2333.         transform: scale(1) translateY(0);
  2334.         opacity: 1;
  2335.     }
  2336. }
  2338. .custom-modal.show .custom-modal-overlay {
  2339.     animation: modalFadeIn 0.3s ease;
  2340. }
  2342. .custom-modal.show .custom-modal-content {
  2343.     animation: modalSlideIn 0.3s ease;
  2344. }
  2346. /* Responsive */
  2347. @media (max-width: 575.98px) {
  2348.     .custom-modal-content {
  2349.         width: 95%;
  2350.         margin: 20px;
  2351.     }
  2352.     
  2353.     .custom-modal-header {
  2354.         padding: 16px 20px;
  2355.     }
  2356.     
  2357.     .custom-modal-title {
  2358.         font-size: 18px;
  2359.     }
  2360.     
  2361.     .custom-modal-body {
  2362.         padding: 20px;
  2363.         font-size: 15px;
  2364.     }
  2365.     
  2366.     .custom-modal-footer {
  2367.         flex-direction: column;
  2368.         padding: 16px 20px;
  2369.     }
  2370.     
  2371.     .custom-modal-btn {
  2372.         width: 100%;
  2373.     }
  2374. }
  2375. </style>
  2376. {% endblock %}
  2378. {% block javascripts %}
  2379. <script>
  2380. // Variables globales pour le modal
  2381. let modalConfirmCallback = null;
  2382. let modalCancelCallback = null;
  2384. // Fonctions pour gérer le modal personnalisé
  2385. function showCustomModal(options) {
  2386.     const modal = document.getElementById('customModal');
  2387.     const title = document.getElementById('modalTitle');
  2388.     const message = document.getElementById('modalMessage');
  2389.     const footer = document.getElementById('modalFooter');
  2390.     const confirmBtn = document.getElementById('modalConfirmBtn');
  2391.     const cancelBtn = document.getElementById('modalCancelBtn');
  2392.     const header = modal.querySelector('.custom-modal-header');
  2393.     
  2394.     // Réinitialiser les classes
  2395.     header.className = 'custom-modal-header';
  2396.     title.className = 'custom-modal-title';
  2397.     footer.className = 'custom-modal-footer';
  2398.     
  2399.     // Définir le titre et le message
  2400.     title.textContent = options.title || 'Information';
  2401.     message.textContent = options.message || '';
  2402.     
  2403.     // Définir le type (success, error, warning, info)
  2404.     const type = options.type || 'info';
  2405.     header.classList.add(type);
  2406.     title.classList.add(type);
  2407.     
  2408.     // Configurer les boutons
  2409.     if (options.showCancel !== false) {
  2410.         cancelBtn.style.display = 'block';
  2411.         footer.classList.remove('single-button');
  2412.     } else {
  2413.         cancelBtn.style.display = 'none';
  2414.         footer.classList.add('single-button');
  2415.     }
  2416.     
  2417.     // Configurer le bouton de confirmation
  2418.     if (options.confirmText) {
  2419.         confirmBtn.textContent = options.confirmText;
  2420.     }
  2421.     
  2422.     if (options.confirmClass) {
  2423.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  2424.     } else {
  2425.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  2426.     }
  2427.     
  2428.     // Stocker les callbacks
  2429.     modalConfirmCallback = options.onConfirm || null;
  2430.     modalCancelCallback = options.onCancel || null;
  2431.     
  2432.     // Afficher le modal
  2433.     modal.classList.add('show');
  2434.     document.body.style.overflow = 'hidden';
  2435. }
  2437. function closeCustomModal() {
  2438.     const modal = document.getElementById('customModal');
  2439.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  2440.     
  2441.     modal.classList.remove('show');
  2442.     document.body.style.overflow = '';
  2443.     
  2444.     // Réinitialiser les callbacks
  2445.     modalConfirmCallback = null;
  2446.     modalCancelCallback = null;
  2447.     
  2448.     // Appeler le callback d'annulation si présent
  2449.     if (cancelCallback) {
  2450.         cancelCallback();
  2451.     }
  2452. }
  2454. function confirmModalAction() {
  2455.     if (modalConfirmCallback) {
  2456.         modalConfirmCallback();
  2457.     }
  2458.     closeCustomModal();
  2459. }
  2461. // Fermer le modal en cliquant sur l'overlay
  2462. document.addEventListener('DOMContentLoaded', function() {
  2463.     const modal = document.getElementById('customModal');
  2464.     const overlay = modal.querySelector('.custom-modal-overlay');
  2465.     
  2466.     overlay.addEventListener('click', function() {
  2467.         closeCustomModal();
  2468.     });
  2469.     
  2470.     // Fermer avec la touche Escape
  2471.     document.addEventListener('keydown', function(e) {
  2472.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  2473.             closeCustomModal();
  2474.         }
  2475.     });
  2476. });
  2478. // Fonctions utilitaires pour différents types de modals
  2479. function showAlert(title, message, type = 'info') {
  2480.     showCustomModal({
  2481.         title: title,
  2482.         message: message,
  2483.         type: type,
  2484.         showCancel: false,
  2485.         confirmText: 'OK'
  2486.     });
  2487. }
  2489. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  2490.     showCustomModal({
  2491.         title: title,
  2492.         message: message,
  2493.         type: type,
  2494.         showCancel: true,
  2495.         confirmText: 'Confirmer',
  2496.         cancelText: 'Annuler',
  2497.         onConfirm: onConfirm,
  2498.         onCancel: onCancel
  2499.     });
  2500. }
  2502. function proceedToCheckout() {
  2503.     // Vérifier qu'il y a des articles dans le panier
  2504.     if (Object.keys(cartData).length === 0) {
  2505.         showAlert('Panier vide', 'Votre panier est vide. Veuillez ajouter des articles avant de continuer.', 'warning');
  2506.         return;
  2507.     }
  2508.     
  2509.     // Rediriger vers la page de checkout
  2510.     window.location.href = '{{ path('ui_checkout') }}';
  2511. }
  2513. function changeQuantity(productId, delta) {
  2514.     const qtyInput = document.getElementById('qty-' + productId);
  2515.     if (!qtyInput) return;
  2516.     
  2517.     const currentQty = parseInt(qtyInput.value) || 0;
  2518.     const newQty = Math.max(0, currentQty + delta);
  2519.     
  2520.     updateQuantity(productId, newQty);
  2521. }
  2522. let cartData = {}; // Stocker les données du panier côté client
  2524. // Initialiser les données du panier
  2525. {% for item in items %}
  2526.     {% set image = (item.images is defined and item.images|length > 0) ? item.images[0] : asset('ui/img/category/s-p1.jpg') %}
  2528. cartData[{{ item.id }}] = {
  2529.     id: {{ item.id }},
  2530.     name: '{{ item.name }}',
  2531.     price: {{ item.price }},
  2532.     qty: {{ item.qty }},
  2533.     image: '{{ image }}',
  2534.     slug: '{{ item.slug }}'
  2535. };
  2536. {% endfor %}
  2538. function updateQuantity(productId, newQty) {
  2539.     const item = cartData[productId];
  2540.     
  2541.     if (!item) {
  2542.         console.error('Produit non trouvé:', productId);
  2543.         return;
  2544.     }
  2545.     
  2546.     // Validation de la quantité
  2547.     newQty = Math.max(0, parseInt(newQty) || 0);
  2548.     
  2549.     if (newQty === 0) {
  2550.         removeFromCart(productId);
  2551.         return;
  2552.     }
  2553.     
  2554.     if (newQty > 99) {
  2555.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  2556.         return;
  2557.     }
  2558.     
  2559.     // Mettre à jour l'interface immédiatement (optimistic update)
  2560.     updateCartDisplay(productId, newQty);
  2561.     
  2562.     // Envoyer la requête au serveur
  2563.     fetch('{{ path(\"ui_cart_update\") }}', {
  2564.         method: 'POST',
  2565.         headers: { 
  2566.             'Content-Type': 'application/x-www-form-urlencoded',
  2567.             'X-Requested-With': 'XMLHttpRequest'
  2568.         },
  2569.         body: 'productId=' + productId + '&qty=' + newQty
  2570.     })
  2571.     .then(response => response.json())
  2572.     .then(data => {
  2573.         if (data.ok) {
  2574.             // Les données serveur confirment la mise à jour
  2575.             // cartData est déjà à jour depuis l'optimistic update
  2576.             console.log('Panier mis à jour avec succès');
  2577.         } else {
  2578.             // En cas d'erreur, restaurer la valeur précédente
  2579.             const oldQty = item.qty;
  2580.             updateCartDisplay(productId, oldQty);
  2581.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  2582.         }
  2583.     })
  2584.     .catch(error => {
  2585.         console.error('Erreur:', error);
  2586.         // Restaurer la valeur précédente en cas d'erreur réseau
  2587.         const oldQty = item.qty;
  2588.         updateCartDisplay(productId, oldQty);
  2589.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  2590.     });
  2591. }
  2593. function updateCartDisplay(productId, qty) {
  2594.     const item = cartData[productId];
  2595.     if (!item) return;
  2596.     
  2597.     // Mettre à jour les données locales
  2598.     item.qty = qty;
  2599.     
  2600.     // Mettre à jour la quantité dans l'input
  2601.     const qtyInput = document.getElementById('qty-' + productId);
  2602.     if (qtyInput) {
  2603.         qtyInput.value = qty;
  2604.     }
  2605.     
  2606.     // Mettre à jour le total du produit
  2607.     const totalElement = document.getElementById('total-' + productId);
  2608.     if (totalElement) {
  2609.         const itemTotal = (item.price * qty);
  2610.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  2611.             minimumFractionDigits: 2,
  2612.             maximumFractionDigits: 2
  2613.         }) + ' HTG';
  2614.     }
  2615.     
  2616.     // Mettre à jour les totaux généraux
  2617.     updateCartSummary();
  2618. }
  2620. function updateCartTotals(data) {
  2621.     // Mettre à jour le sous-total depuis les données serveur
  2622.     const subtotalElement = document.getElementById('cart-subtotal');
  2623.     const totalElement = document.getElementById('cart-total');
  2624.     
  2625.     if (subtotalElement) {
  2626.         subtotalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  2627.             minimumFractionDigits: 2,
  2628.             maximumFractionDigits: 2
  2629.         }) + ' HTG';
  2630.     }
  2631.     
  2632.     if (totalElement) {
  2633.         totalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  2634.             minimumFractionDigits: 2,
  2635.             maximumFractionDigits: 2
  2636.         }) + ' HTG';
  2637.     }
  2638.     
  2639.     // Mettre à jour le compteur d'articles
  2640.     const itemCountElement = document.querySelector('.cart-subtotal span');
  2641.     if (itemCountElement) {
  2642.         const totalItems = Object.values(cartData).reduce((sum, item) => sum + item.qty, 0);
  2643.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  2644.         itemCountElement.textContent = itemText;
  2645.     }
  2646. }
  2648. function updateCartSummary() {
  2649.     // Calculer les totaux côté client depuis cartData
  2650.     let subtotal = 0;
  2651.     let totalItems = 0;
  2652.     
  2653.     Object.values(cartData).forEach(item => {
  2654.         subtotal += item.price * item.qty;
  2655.         totalItems += item.qty;
  2656.     });
  2657.     
  2658.     // Mettre à jour l'affichage du sous-total
  2659.     const subtotalElement = document.getElementById('cart-subtotal');
  2660.     if (subtotalElement) {
  2661.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  2662.             minimumFractionDigits: 2,
  2663.             maximumFractionDigits: 2
  2664.         }) + ' HTG';
  2665.     }
  2666.     
  2667.     // Mettre à jour l'affichage du total
  2668.     const totalElement = document.getElementById('cart-total');
  2669.     if (totalElement) {
  2670.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  2671.             minimumFractionDigits: 2,
  2672.             maximumFractionDigits: 2
  2673.         }) + ' HTG';
  2674.     }
  2675.     
  2676.     // Mettre à jour le compteur d'articles
  2677.     const itemCountElement = document.getElementById('cart-item-count');
  2678.     if (itemCountElement) {
  2679.         itemCountElement.textContent = totalItems;
  2680.     }
  2681.     
  2682.     // Mettre à jour le label du sous-total
  2683.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  2684.     if (subtotalLabel) {
  2685.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  2686.         subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  2687.     }
  2688. }
  2690. function removeFromCart(productId) {
  2691.     const item = cartData[productId];
  2692.     const itemName = item ? item.name : 'cet article';
  2693.     
  2694.     showConfirm(
  2695.         'Supprimer l\\'article',
  2696.         `Êtes-vous sûr de vouloir supprimer \"\${itemName}\" de votre panier ?`,
  2697.         function() {
  2698.             // Mettre à jour l'interface immédiatement
  2699.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  2700.             if (row) {
  2701.                 row.style.opacity = '0.5';
  2702.                 row.style.pointerEvents = 'none';
  2703.             }
  2704.             
  2705.             performRemoveFromCart(productId, row);
  2706.         },
  2707.         null,
  2708.         'warning'
  2709.     );
  2710. }
  2712. function performRemoveFromCart(productId, row) {
  2713.     
  2714.     fetch('{{ path(\"ui_cart_remove\") }}', {
  2715.         method: 'POST',
  2716.         headers: { 
  2717.             'Content-Type': 'application/x-www-form-urlencoded',
  2718.             'X-Requested-With': 'XMLHttpRequest'
  2719.         },
  2720.         body: 'productId=' + productId
  2721.     })
  2722.     .then(response => response.json())
  2723.     .then(data => {
  2724.         if (data.ok) {
  2725.             // Supprimer des données locales
  2726.             delete cartData[productId];
  2727.             
  2728.             // Supprimer la ligne du DOM
  2729.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  2730.             if (row) {
  2731.                 row.remove();
  2732.             }
  2733.             
  2734.             // Mettre à jour les totaux
  2735.             updateCartTotals(data);
  2736.             
  2737.             // Mettre à jour le résumé du panier
  2738.             updateCartSummary();
  2739.             
  2740.             // Afficher un message de succès
  2741.             showAlert('Article supprimé', 'L\\'article a été supprimé de votre panier avec succès.', 'success');
  2742.             
  2743.             // Vérifier si le panier est vide
  2744.             if (Object.keys(cartData).length === 0) {
  2745.                 setTimeout(function() {
  2746.                     location.reload();
  2747.                 }, 1500);
  2748.             }
  2749.         } else {
  2750.             // Restaurer l'affichage en cas d'erreur
  2751.             if (row) {
  2752.                 row.style.opacity = '1';
  2753.                 row.style.pointerEvents = 'auto';
  2754.             }
  2755.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\\'article.', 'error');
  2756.         }
  2757.     })
  2758.     .catch(error => {
  2759.         console.error('Erreur:', error);
  2760.         // Restaurer l'affichage en cas d'erreur réseau
  2761.         if (row) {
  2762.             row.style.opacity = '1';
  2763.             row.style.pointerEvents = 'auto';
  2764.         }
  2765.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  2766.     });
  2767. }
  2769. // Script pour forcer l'application des styles des boutons de quantité
  2770. document.addEventListener('DOMContentLoaded', function() {
  2771.     const quantityControls = document.querySelectorAll('.quantity-controls');
  2772.     quantityControls.forEach(function(control) {
  2773.         if (control) {
  2774.             // Forcer les styles sur le conteneur
  2775.             control.style.display = 'flex';
  2776.             control.style.alignItems = 'center';
  2777.             control.style.justifyContent = 'center';
  2778.             control.style.border = '1px solid #ddd';
  2779.             control.style.borderRadius = '4px';
  2780.             control.style.width = '120px';
  2781.             control.style.height = '40px';
  2782.             control.style.position = 'relative';
  2783.             control.style.background = 'white';
  2784.             control.style.overflow = 'hidden';
  2785.             
  2786.             // Forcer les styles sur les boutons
  2787.             const buttons = control.querySelectorAll('.quantity-btn');
  2788.             buttons.forEach(function(btn, index) {
  2789.                 btn.style.background = '#f8f8f8';
  2790.                 btn.style.border = 'none';
  2791.                 btn.style.width = '35px';
  2792.                 btn.style.height = '100%';
  2793.                 btn.style.cursor = 'pointer';
  2794.                 btn.style.fontSize = '18px';
  2795.                 btn.style.fontWeight = '600';
  2796.                 btn.style.color = '#333';
  2797.                 btn.style.display = 'flex';
  2798.                 btn.style.alignItems = 'center';
  2799.                 btn.style.justifyContent = 'center';
  2800.                 btn.style.padding = '0';
  2801.                 btn.style.margin = '0';
  2802.                 btn.style.lineHeight = '1';
  2803.                 btn.style.position = 'relative';
  2804.                 btn.style.zIndex = '1';
  2805.                 
  2806.                 // Ajouter les bordures entre les boutons
  2807.                 if (index === 0) {
  2808.                     btn.style.borderRight = '1px solid #ddd';
  2809.                 } else if (index === buttons.length - 1) {
  2810.                     btn.style.borderLeft = '1px solid #ddd';
  2811.                 }
  2812.             });
  2813.             
  2814.             // Forcer les styles sur l'input
  2815.             const input = control.querySelector('.quantity-input');
  2816.             if (input) {
  2817.                 input.style.border = 'none';
  2818.                 input.style.width = '50px';
  2819.                 input.style.height = '100%';
  2820.                 input.style.textAlign = 'center';
  2821.                 input.style.fontSize = '15px';
  2822.                 input.style.fontWeight = '500';
  2823.                 input.style.padding = '0';
  2824.                 input.style.margin = '0';
  2825.                 input.style.background = 'white';
  2826.                 input.style.color = '#333';
  2827.                 input.style.outline = 'none';
  2828.                 input.style.boxShadow = 'none';
  2829.                 input.style.position = 'relative';
  2830.                 input.style.zIndex = '1';
  2831.             }
  2832.         }
  2833.     });
  2834. });
  2836. </script>
  2837. {% endblock %}", "home/cart.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/cart.html.twig");
  2838.     }
  2839. }