var/cache/dev/twig/c2/c224d21395ebef29d69a3ef70e9293d0.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_120158e7ea77c8a776f55513944d6d80 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 quantity-btn-decrease\" id=\"decrease-btn-";
  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 "\" data-product-id=\"";
  180.             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);
  181.             yield "\" onclick=\"handleDecreaseOrRemove(";
  182.             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);
  183.             yield ")\">
  184.                                                     ";
  185.             // line 57
  186.             if ((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 57) == 1)) {
  187.                 // line 58
  188.                 yield "                                                        <i class=\"lnr lnr-trash\"></i>
  189.                                                     ";
  190.             } else {
  191.                 // line 60
  192.                 yield "                                                        <span>−</span>
  193.                                                     ";
  194.             }
  195.             // line 62
  196.             yield "                                                </button>
  197.                                                 <input type=\"text\" value=\"";
  198.             // line 63
  199.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 63), "html", null, true);
  200.             yield "\" class=\"quantity-input\" id=\"qty-";
  201.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 63), "html", null, true);
  202.             yield "\" onchange=\"updateQuantity(";
  203.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 63), "html", null, true);
  204.             yield ", this.value)\">
  205.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity(";
  206.             // line 64
  207.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 64), "html", null, true);
  208.             yield ", 1)\">+</button>
  209.                                             </div>
  210.                                         </td>
  211.                                         <td data-label=\"Total\">
  212.                                             <span class=\"cart-item-total\" id=\"total-";
  213.             // line 68
  214.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 68), "html", null, true);
  215.             yield "\">";
  216.             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, 68) * CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 68)), 2, ".", " "), "html", null, true);
  217.             yield " HTG</span>
  218.                                         </td>
  219.                                         <td data-label=\"Action\">
  220.                                             <button class=\"remove-btn\" onclick=\"removeFromCart(";
  221.             // line 71
  222.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 71), "html", null, true);
  223.             yield ")\">Supprimer</button>
  224.                                         </td>
  225.                                     </tr>
  226.                                     ";
  227.             $context['_iterated'] = true;
  228.         }
  229.         // line 74
  230.         if (!$context['_iterated']) {
  231.             // line 75
  232.             yield "                                        <tr>
  233.                                             <td colspan=\"5\" style=\"text-align: center; padding: 50px;\">
  234.                                                 Votre panier est vide.
  235.                                                 <br>
  236.                                                 <a href=\"";
  237.             // line 79
  238.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  239.             yield "\" style=\"color: #007185;\">Continuer vos achats</a>
  240.                                             </td>
  241.                                         </tr>
  242.                                     ";
  243.         }
  244.         $_parent = $context['_parent'];
  245.         unset($context['_seq'], $context['_key'], $context['item'], $context['_parent'], $context['_iterated']);
  246.         $context = array_intersect_key($context, $_parent) + $_parent;
  247.         // line 83
  248.         yield "                                </tbody>
  249.                             </table>
  250.                         </div>
  251.                     </div>
  252.                 </div>
  253.                 <div class=\"col-lg-4\">
  254.                     <div class=\"cart-summary\">
  255.                         <h3>Résumé de la commande</h3>
  256.                         <div class=\"cart-subtotal\">
  257.                             <span id=\"cart-subtotal-label\">Sous-total (<span id=\"cart-item-count\">";
  258.         // line 92
  259.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["items"] ?? null)), "html", null, true);
  260.         yield "</span> article";
  261.         yield (((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["items"] ?? null)) > 1)) ? ("s") : (""));
  262.         yield ")</span>
  263.                             <span id=\"cart-subtotal\">";
  264.         // line 93
  265.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(($context["subtotal"] ?? null), 2, ".", " "), "html", null, true);
  266.         yield " HTG</span>
  267.                         </div>
  268.                         <div class=\"cart-total\">
  269.                             <span>Total</span>
  270.                             <span id=\"cart-total\">";
  271.         // line 97
  272.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(($context["subtotal"] ?? null), 2, ".", " "), "html", null, true);
  273.         yield " HTG</span>
  274.                         </div>
  275.                         <button class=\"checkout-btn mt-3\" onclick=\"proceedToCheckout()\">Passer la commande</button>
  276.                         <button class=\"continue-shopping\" onclick=\"window.location.href='";
  277.         // line 100
  278.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  279.         yield "'\">Continuer vos achats</button>
  280.                     </div>
  281.                 </div>
  282.             </div>
  283.         </div>
  284.     </section>
  285.     <!--================End Cart Area =================-->
  287.     <!-- Modal personnalisé -->
  288.     <div id=\"customModal\" class=\"custom-modal\">
  289.         <div class=\"custom-modal-overlay\"></div>
  290.         <div class=\"custom-modal-content\">
  291.             <div class=\"custom-modal-header\">
  292.                 <h3 class=\"custom-modal-title\" id=\"modalTitle\">Titre</h3>
  293.                 <button class=\"custom-modal-close\" onclick=\"closeCustomModal()\" aria-label=\"Fermer\">
  294.                     <span>&times;</span>
  295.                 </button>
  296.             </div>
  297.             <div class=\"custom-modal-body\" id=\"modalBody\">
  298.                 <p id=\"modalMessage\">Message</p>
  299.             </div>
  300.             <div class=\"custom-modal-footer\" id=\"modalFooter\">
  301.                 <button class=\"custom-modal-btn custom-modal-btn-primary\" id=\"modalConfirmBtn\" onclick=\"confirmModalAction()\">Confirmer</button>
  302.                 <button class=\"custom-modal-btn custom-modal-btn-secondary\" id=\"modalCancelBtn\" onclick=\"closeCustomModal()\">Annuler</button>
  303.             </div>
  304.         </div>
  305.     </div>
  307. ";
  308.         
  309.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  311.         
  312.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  314.         yield from [];
  315.     }
  317.     // line 130
  318.     /**
  319.      * @return iterable<null|scalar|\Stringable>
  320.      */
  321.     public function block_stylesheets(array $context, array $blocks = []): iterable
  322.     {
  323.         $macros = $this->macros;
  324.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  325.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  327.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  328.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  330.         // line 131
  331.         yield "<style>
  332. .cart_area {
  333.     background-color: #f8f8f8;
  334.     padding: 20px 0;
  335. }
  337. .cart_inner {
  338.     background: white;
  339.     border-radius: 8px;
  340.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  341.     overflow: hidden;
  342. }
  344. .table th {
  345.     background-color: #f3f3f3;
  346.     border-bottom: 2px solid #ddd;
  347.     font-weight: 600;
  348.     color: #333;
  349.     padding: 15px;
  350. }
  352. .table td {
  353.     vertical-align: middle;
  354.     padding: 15px;
  355. }
  357. .cart-item {
  358.     display: flex;
  359.     align-items: center;
  360. }
  362. .cart-item-image {
  363.     width: 80px;
  364.     height: 80px;
  365.     object-fit: cover;
  366.     border-radius: 8px;
  367.     margin-right: 15px;
  368. }
  370. .cart-item-info {
  371.     flex-grow: 1;
  372. }
  374. .cart-item-name {
  375.     font-weight: 500;
  376.     color: #007185;
  377.     text-decoration: none;
  378.     margin-bottom: 5px;
  379. }
  381. .cart-item-name:hover {
  382.     text-decoration: underline;
  383. }
  385. .cart-item-price {
  386.     color: #333;
  387.     font-size: 18px;
  388.     font-weight: 700;
  389. }
  391. .quantity-controls {
  392.     display: flex !important;
  393.     align-items: center !important;
  394.     justify-content: center !important;
  395.     border: 1px solid #ddd !important;
  396.     border-radius: 4px !important;
  397.     width: 120px !important;
  398.     height: 40px !important;
  399.     position: relative !important;
  400.     background: white !important;
  401.     overflow: hidden !important;
  402. }
  404. .quantity-controls .quantity-btn {
  405.     background: #f8f8f8 !important;
  406.     border: none !important;
  407.     width: 35px !important;
  408.     height: 100% !important;
  409.     min-width: 35px !important;
  410.     cursor: pointer !important;
  411.     font-size: 18px !important;
  412.     font-weight: 600 !important;
  413.     color: #333 !important;
  414.     display: flex !important;
  415.     align-items: center !important;
  416.     justify-content: center !important;
  417.     padding: 0 !important;
  418.     margin: 0 !important;
  419.     line-height: 1 !important;
  420.     transition: background-color 0.2s ease !important;
  421.     position: relative !important;
  422.     z-index: 1 !important;
  423. }
  425. .quantity-controls .quantity-btn:first-child {
  426.     border-right: 1px solid #ddd !important;
  427. }
  429. .quantity-controls .quantity-btn:last-child {
  430.     border-left: 1px solid #ddd !important;
  431. }
  433. .quantity-controls .quantity-btn:hover {
  434.     background: #e7e7e7 !important;
  435.     color: #000 !important;
  436. }
  438. .quantity-controls .quantity-btn:active {
  439.     background: #d0d0d0 !important;
  440. }
  442. .quantity-controls .quantity-btn-remove {
  443.     background: #f8f8f8 !important;
  444.     color: #dc3545 !important;
  445. }
  447. .quantity-controls .quantity-btn-remove:hover {
  448.     background: #dc3545 !important;
  449.     color: white !important;
  450. }
  452. .quantity-controls .quantity-btn-remove i {
  453.     font-size: 16px !important;
  454. }
  456. .quantity-controls .quantity-btn-decrease span {
  457.     font-size: 24px !important;
  458.     font-weight: 300 !important;
  459.     line-height: 1 !important;
  460. }
  462. .quantity-controls .quantity-input {
  463.     border: none !important;
  464.     width: 50px !important;
  465.     min-width: 50px !important;
  466.     height: 100% !important;
  467.     text-align: center !important;
  468.     font-size: 15px !important;
  469.     font-weight: 500 !important;
  470.     padding: 0 !important;
  471.     margin: 0 !important;
  472.     background: white !important;
  473.     color: #333 !important;
  474.     outline: none !important;
  475.     box-shadow: none !important;
  476.     -moz-appearance: textfield !important;
  477.     position: relative !important;
  478.     z-index: 1 !important;
  479. }
  481. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  482. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  483.     -webkit-appearance: none !important;
  484.     margin: 0 !important;
  485. }
  487. /* Surcharger les styles externes qui pourraient interférer */
  488. .cart_inner .table tbody tr td .quantity-controls,
  489. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  490. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  491.     position: relative !important;
  492. }
  494. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  495. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  496.     display: none !important;
  497.     content: none !important;
  498. }
  500. .cart-item-total {
  501.     font-size: 18px;
  502.     font-weight: 700;
  503.     color: #333;
  504. }
  506. /* Animation pour le badge du panier */
  507. @keyframes bounce {
  508.     0%, 20%, 50%, 80%, 100% {
  509.         transform: translateY(0);
  510.     }
  511.     40% {
  512.         transform: translateY(-5px);
  513.     }
  514.     60% {
  515.         transform: translateY(-3px);
  516.     }
  517. }
  519. /* Responsive Styles */
  520. @media (max-width: 991.98px) {
  521.     .cart_area {
  522.         padding: 15px 0;
  523.     }
  524.     
  525.     .cart-summary {
  526.         margin-top: 2rem;
  527.     }
  528. }
  530. @media (max-width: 767.98px) {
  531.     .cart_inner {
  532.         border-radius: 0;
  533.     }
  534.     
  535.     .table {
  536.         font-size: 0.875rem;
  537.     }
  538.     
  539.     .table th {
  540.         padding: 10px 8px;
  541.         font-size: 0.8rem;
  542.     }
  543.     
  544.     .table td {
  545.         padding: 10px 8px;
  546.     }
  547.     
  548.     .cart-item {
  549.         flex-direction: column;
  550.         align-items: flex-start;
  551.     }
  552.     
  553.     .cart-item-image {
  554.         width: 60px;
  555.         height: 60px;
  556.         margin-right: 0;
  557.         margin-bottom: 10px;
  558.     }
  559.     
  560.     .cart-item-name {
  561.         font-size: 0.9rem;
  562.     }
  563.     
  564.     .cart-item-price,
  565.     .cart-item-total {
  566.         font-size: 1rem;
  567.     }
  568.     
  569.     .quantity-controls {
  570.         width: 110px !important;
  571.         height: 38px !important;
  572.     }
  573.     
  574.     .quantity-controls .quantity-btn {
  575.         width: 32px !important;
  576.         font-size: 16px !important;
  577.     }
  578.     
  579.     .quantity-controls .quantity-input {
  580.         width: 46px !important;
  581.         font-size: 14px !important;
  582.     }
  583.     
  584.     .cart-summary {
  585.         margin-top: 1.5rem;
  586.         padding: 1.5rem;
  587.     }
  588.     
  589.     .checkout-btn,
  590.     .continue-shopping {
  591.         width: 100%;
  592.         margin-bottom: 0.5rem;
  593.     }
  594. }
  596. @media (max-width: 575.98px) {
  597.     .table thead {
  598.         display: none;
  599.     }
  600.     
  601.     .table tbody tr {
  602.         display: block;
  603.         margin-bottom: 1rem;
  604.         border: 1px solid #dee2e6;
  605.         border-radius: 8px;
  606.         padding: 1rem;
  607.     }
  608.     
  609.     .table tbody td {
  610.         display: flex;
  611.         justify-content: space-between;
  612.         align-items: center;
  613.         padding: 0.5rem 0;
  614.         border: none;
  615.         text-align: right;
  616.     }
  617.     
  618.     .table tbody td::before {
  619.         content: attr(data-label);
  620.         font-weight: bold;
  621.         text-align: left;
  622.         margin-right: 1rem;
  623.     }
  624.     
  625.     .table tbody td:first-child {
  626.         flex-direction: column;
  627.         align-items: flex-start;
  628.     }
  629.     
  630.     .cart-item-image {
  631.         width: 100%;
  632.         height: 200px;
  633.         margin-bottom: 1rem;
  634.     }
  635.     
  636.     .cart-item-name {
  637.         font-size: 1rem;
  638.         margin-bottom: 0.5rem;
  639.     }
  640.     
  641.     .quantity-controls {
  642.         width: 100% !important;
  643.         max-width: 150px !important;
  644.         margin: 0 auto !important;
  645.         justify-content: center !important;
  646.         height: 40px !important;
  647.     }
  648.     
  649.     .quantity-controls .quantity-btn {
  650.         width: 40px !important;
  651.         font-size: 18px !important;
  652.     }
  653.     
  654.     .quantity-controls .quantity-input {
  655.         width: 60px !important;
  656.         font-size: 16px !important;
  657.     }
  658.     
  659.     .remove-btn {
  660.         width: 100%;
  661.         margin-top: 0.5rem;
  662.     }
  663. }
  665. .remove-btn {
  666.     background: #ff9900;
  667.     color: white;
  668.     border: none;
  669.     padding: 8px 16px;
  670.     border-radius: 4px;
  671.     cursor: pointer;
  672.     font-size: 12px;
  673. }
  675. .remove-btn:hover {
  676.     background: #e68900;
  677. }
  679. .cart-summary {
  680.     background: white;
  681.     border-radius: 8px;
  682.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  683.     padding: 20px;
  684.     height: fit-content;
  685. }
  687. .cart-subtotal {
  688.     display: flex;
  689.     justify-content: space-between;
  690.     padding: 10px 0;
  691.     border-bottom: 1px solid #ddd;
  692.     margin-bottom: 15px;
  693. }
  695. .cart-total {
  696.     font-size: 20px;
  697.     font-weight: 700;
  698.     color: #333;
  699. }
  701. .checkout-btn {
  702.     background: #ffa200;
  703.     color: white;
  704.     border: none;
  705.     padding: 12px 24px;
  706.     border-radius: 4px;
  707.     cursor: pointer;
  708.     width: 100%;
  709.     font-size: 16px;
  710.     font-weight: 600;
  711. }
  713. .checkout-btn:hover {
  714.     background: #e68900;
  715. }
  717. .checkout-btn:disabled,
  718. .checkout-btn.disabled {
  719.     background: #cccccc !important;
  720.     color: #666666 !important;
  721.     cursor: pointer !important; /* Garder le curseur pointer pour indiquer que c'est cliquable */
  722.     opacity: 0.6;
  723.     pointer-events: auto !important; /* S'assurer que le clic fonctionne */
  724. }
  726. .checkout-btn:disabled:hover,
  727. .checkout-btn.disabled:hover {
  728.     background: #cccccc !important;
  729.     transform: none !important;
  730.     box-shadow: none !important;
  731. }
  733. .continue-shopping {
  734.     background: #095ad3;
  735.     color: #ffffff;
  736.     border: none;
  737.     padding: 12px 24px;
  738.     border-radius: 4px;
  739.     cursor: pointer;
  740.     width: 100%;
  741.     font-size: 16px;
  742.     font-weight: 600;
  743.     margin-top: 10px;
  744. }
  746. .continue-shopping:hover {
  747.     background: #e68900;
  748.     color: #ffffff
  749. }
  751. /* ============================================
  752.    MODAL PERSONNALISÉ
  753.    ============================================ */
  754. .custom-modal {
  755.     display: none;
  756.     position: fixed;
  757.     top: 0;
  758.     left: 0;
  759.     width: 100%;
  760.     height: 100%;
  761.     z-index: 10000;
  762.     opacity: 0;
  763.     transition: opacity 0.3s ease;
  764. }
  766. .custom-modal.show {
  767.     display: flex;
  768.     align-items: center;
  769.     justify-content: center;
  770.     opacity: 1;
  771. }
  773. .custom-modal-overlay {
  774.     position: absolute;
  775.     top: 0;
  776.     left: 0;
  777.     width: 100%;
  778.     height: 100%;
  779.     background: rgba(0, 0, 0, 0.5);
  780.     backdrop-filter: blur(4px);
  781.     -webkit-backdrop-filter: blur(4px);
  782. }
  784. .custom-modal-content {
  785.     position: relative;
  786.     background: white;
  787.     border-radius: 12px;
  788.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  789.     max-width: 500px;
  790.     width: 90%;
  791.     max-height: 90vh;
  792.     overflow: hidden;
  793.     transform: scale(0.9) translateY(-20px);
  794.     transition: transform 0.3s ease;
  795.     z-index: 10001;
  796. }
  798. .custom-modal.show .custom-modal-content {
  799.     transform: scale(1) translateY(0);
  800. }
  802. .custom-modal-header {
  803.     display: flex;
  804.     align-items: center;
  805.     justify-content: space-between;
  806.     padding: 20px 24px;
  807.     border-bottom: 1px solid #e0e0e0;
  808.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  809. }
  811. .custom-modal-header.error {
  812.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  813. }
  815. .custom-modal-header.success {
  816.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  817. }
  819. .custom-modal-header.warning {
  820.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  821. }
  823. .custom-modal-header.info {
  824.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  825. }
  827. .custom-modal-title {
  828.     margin: 0;
  829.     font-size: 20px;
  830.     font-weight: 600;
  831.     color: white;
  832.     display: flex;
  833.     align-items: center;
  834.     gap: 10px;
  835. }
  837. .custom-modal-title::before {
  838.     content: '';
  839.     width: 24px;
  840.     height: 24px;
  841.     display: inline-block;
  842.     background-size: contain;
  843.     background-repeat: no-repeat;
  844.     background-position: center;
  845. }
  847. .custom-modal-title.success::before {
  848.     content: '✓';
  849.     font-size: 20px;
  850.     font-weight: bold;
  851. }
  853. .custom-modal-title.error::before {
  854.     content: '✕';
  855.     font-size: 20px;
  856.     font-weight: bold;
  857. }
  859. .custom-modal-title.warning::before {
  860.     content: '⚠';
  861.     font-size: 20px;
  862.     font-weight: bold;
  863. }
  865. .custom-modal-title.info::before {
  866.     content: 'ℹ';
  867.     font-size: 20px;
  868.     font-weight: bold;
  869. }
  871. .custom-modal-close {
  872.     background: rgba(255, 255, 255, 0.15);
  873.     border: 2px solid rgba(255, 255, 255, 0.3);
  874.     color: white;
  875.     font-size: 22px;
  876.     font-weight: 300;
  877.     line-height: 1;
  878.     width: 36px;
  879.     height: 36px;
  880.     border-radius: 50%;
  881.     cursor: pointer;
  882.     display: flex;
  883.     align-items: center;
  884.     justify-content: center;
  885.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  886.     padding: 0;
  887.     margin: 0;
  888.     position: relative;
  889.     overflow: hidden;
  890. }
  892. .custom-modal-close::before {
  893.     content: '';
  894.     position: absolute;
  895.     top: 50%;
  896.     left: 50%;
  897.     width: 0;
  898.     height: 0;
  899.     border-radius: 50%;
  900.     background: rgba(255, 255, 255, 0.2);
  901.     transform: translate(-50%, -50%);
  902.     transition: width 0.3s ease, height 0.3s ease;
  903. }
  905. .custom-modal-close:hover {
  906.     background: rgba(255, 255, 255, 0.25);
  907.     border-color: rgba(255, 255, 255, 0.5);
  908.     transform: rotate(90deg) scale(1.1);
  909.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  910. }
  912. .custom-modal-close:hover::before {
  913.     width: 100%;
  914.     height: 100%;
  915. }
  917. .custom-modal-close:active {
  918.     transform: rotate(90deg) scale(0.95);
  919.     background: rgba(255, 255, 255, 0.3);
  920. }
  922. .custom-modal-close span {
  923.     position: relative;
  924.     z-index: 1;
  925.     display: block;
  926.     line-height: 1;
  927. }
  929. .custom-modal-body {
  930.     padding: 24px;
  931.     font-size: 16px;
  932.     line-height: 1.6;
  933.     color: #333;
  934.     max-height: 60vh;
  935.     overflow-y: auto;
  936. }
  938. .custom-modal-body p {
  939.     margin: 0;
  940. }
  942. .custom-modal-footer {
  943.     display: flex;
  944.     gap: 12px;
  945.     justify-content: flex-end;
  946.     padding: 16px 24px;
  947.     border-top: 1px solid #e0e0e0;
  948.     background: #f8f9fa;
  949. }
  951. .custom-modal-footer.single-button {
  952.     justify-content: center;
  953. }
  955. .custom-modal-btn {
  956.     padding: 10px 24px;
  957.     border: none;
  958.     border-radius: 6px;
  959.     font-size: 15px;
  960.     font-weight: 500;
  961.     cursor: pointer;
  962.     transition: all 0.2s ease;
  963.     min-width: 100px;
  964. }
  966. .custom-modal-btn-primary {
  967.     background: #ffa200;
  968.     color: white;
  969. }
  971. .custom-modal-btn-primary:hover {
  972.     background: #e68900;
  973.     transform: translateY(-1px);
  974.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  975. }
  977. .custom-modal-btn-secondary {
  978.     background: #6c757d;
  979.     color: white;
  980. }
  982. .custom-modal-btn-secondary:hover {
  983.     background: #5a6268;
  984.     transform: translateY(-1px);
  985.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  986. }
  988. .custom-modal-btn-success {
  989.     background: #28a745;
  990.     color: white;
  991. }
  993. .custom-modal-btn-success:hover {
  994.     background: #218838;
  995.     transform: translateY(-1px);
  996.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  997. }
  999. .custom-modal-btn-danger {
  1000.     background: #dc3545;
  1001.     color: white;
  1002. }
  1004. .custom-modal-btn-danger:hover {
  1005.     background: #c82333;
  1006.     transform: translateY(-1px);
  1007.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  1008. }
  1010. /* Animation pour les modals */
  1011. @keyframes modalFadeIn {
  1012.     from {
  1013.         opacity: 0;
  1014.     }
  1015.     to {
  1016.         opacity: 1;
  1017.     }
  1018. }
  1020. @keyframes modalSlideIn {
  1021.     from {
  1022.         transform: scale(0.9) translateY(-20px);
  1023.         opacity: 0;
  1024.     }
  1025.     to {
  1026.         transform: scale(1) translateY(0);
  1027.         opacity: 1;
  1028.     }
  1029. }
  1031. .custom-modal.show .custom-modal-overlay {
  1032.     animation: modalFadeIn 0.3s ease;
  1033. }
  1035. .custom-modal.show .custom-modal-content {
  1036.     animation: modalSlideIn 0.3s ease;
  1037. }
  1039. /* Responsive */
  1040. @media (max-width: 575.98px) {
  1041.     .custom-modal-content {
  1042.         width: 95%;
  1043.         margin: 20px;
  1044.     }
  1045.     
  1046.     .custom-modal-header {
  1047.         padding: 16px 20px;
  1048.     }
  1049.     
  1050.     .custom-modal-title {
  1051.         font-size: 18px;
  1052.     }
  1053.     
  1054.     .custom-modal-body {
  1055.         padding: 20px;
  1056.         font-size: 15px;
  1057.     }
  1058.     
  1059.     .custom-modal-footer {
  1060.         flex-direction: column;
  1061.         padding: 16px 20px;
  1062.     }
  1063.     
  1064.     .custom-modal-btn {
  1065.         width: 100%;
  1066.     }
  1067. }
  1068. </style>
  1069. ";
  1070.         
  1071.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1073.         
  1074.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1076.         yield from [];
  1077.     }
  1079.     // line 871
  1080.     /**
  1081.      * @return iterable<null|scalar|\Stringable>
  1082.      */
  1083.     public function block_javascripts(array $context, array $blocks = []): iterable
  1084.     {
  1085.         $macros = $this->macros;
  1086.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1087.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1089.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1090.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1092.         // line 872
  1093.         yield "<script>
  1094. // Variables globales pour le modal
  1095. let modalConfirmCallback = null;
  1096. let modalCancelCallback = null;
  1098. // Fonctions pour gérer le modal personnalisé
  1099. function showCustomModal(options) {
  1100.     const modal = document.getElementById('customModal');
  1101.     const title = document.getElementById('modalTitle');
  1102.     const message = document.getElementById('modalMessage');
  1103.     const footer = document.getElementById('modalFooter');
  1104.     const confirmBtn = document.getElementById('modalConfirmBtn');
  1105.     const cancelBtn = document.getElementById('modalCancelBtn');
  1106.     const header = modal.querySelector('.custom-modal-header');
  1107.     
  1108.     // Réinitialiser les classes
  1109.     header.className = 'custom-modal-header';
  1110.     title.className = 'custom-modal-title';
  1111.     footer.className = 'custom-modal-footer';
  1112.     
  1113.     // Définir le titre et le message
  1114.     title.textContent = options.title || 'Information';
  1115.     message.textContent = options.message || '';
  1116.     
  1117.     // Définir le type (success, error, warning, info)
  1118.     const type = options.type || 'info';
  1119.     header.classList.add(type);
  1120.     title.classList.add(type);
  1121.     
  1122.     // Configurer les boutons
  1123.     if (options.showCancel !== false) {
  1124.         cancelBtn.style.display = 'block';
  1125.         footer.classList.remove('single-button');
  1126.     } else {
  1127.         cancelBtn.style.display = 'none';
  1128.         footer.classList.add('single-button');
  1129.     }
  1130.     
  1131.     // Configurer le bouton de confirmation
  1132.     if (options.confirmText) {
  1133.         confirmBtn.textContent = options.confirmText;
  1134.     }
  1135.     
  1136.     if (options.confirmClass) {
  1137.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  1138.     } else {
  1139.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  1140.     }
  1141.     
  1142.     // Stocker les callbacks
  1143.     modalConfirmCallback = options.onConfirm || null;
  1144.     modalCancelCallback = options.onCancel || null;
  1145.     
  1146.     // Afficher le modal
  1147.     modal.classList.add('show');
  1148.     document.body.style.overflow = 'hidden';
  1149. }
  1151. function closeCustomModal() {
  1152.     const modal = document.getElementById('customModal');
  1153.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  1154.     
  1155.     modal.classList.remove('show');
  1156.     document.body.style.overflow = '';
  1157.     
  1158.     // Réinitialiser les callbacks
  1159.     modalConfirmCallback = null;
  1160.     modalCancelCallback = null;
  1161.     
  1162.     // Appeler le callback d'annulation si présent
  1163.     if (cancelCallback) {
  1164.         cancelCallback();
  1165.     }
  1166. }
  1168. function confirmModalAction() {
  1169.     if (modalConfirmCallback) {
  1170.         modalConfirmCallback();
  1171.     }
  1172.     closeCustomModal();
  1173. }
  1175. // Fermer le modal en cliquant sur l'overlay
  1176. document.addEventListener('DOMContentLoaded', function() {
  1177.     const modal = document.getElementById('customModal');
  1178.     const overlay = modal.querySelector('.custom-modal-overlay');
  1179.     
  1180.     overlay.addEventListener('click', function() {
  1181.         closeCustomModal();
  1182.     });
  1183.     
  1184.     // Fermer avec la touche Escape
  1185.     document.addEventListener('keydown', function(e) {
  1186.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  1187.             closeCustomModal();
  1188.         }
  1189.     });
  1190. });
  1192. // Fonctions utilitaires pour différents types de modals
  1193. function showAlert(title, message, type = 'info') {
  1194.     showCustomModal({
  1195.         title: title,
  1196.         message: message,
  1197.         type: type,
  1198.         showCancel: false,
  1199.         confirmText: 'OK'
  1200.     });
  1201. }
  1203. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  1204.     showCustomModal({
  1205.         title: title,
  1206.         message: message,
  1207.         type: type,
  1208.         showCancel: true,
  1209.         confirmText: 'Confirmer',
  1210.         cancelText: 'Annuler',
  1211.         onConfirm: onConfirm,
  1212.         onCancel: onCancel
  1213.     });
  1214. }
  1216. function proceedToCheckout() {
  1217.     // Vérifier qu'il y a des articles dans le panier
  1218.     if (Object.keys(cartData).length === 0) {
  1219.         showCustomModal({
  1220.             title: 'Panier vide',
  1221.             message: 'Votre panier est vide. Veuillez ajouter des articles avant de procéder à la commande.',
  1222.             type: 'warning',
  1223.             showCancel: false,
  1224.             confirmText: 'OK',
  1225.             onConfirm: function() {
  1226.                 // Rediriger vers la page de listing pour encourager l'ajout d'articles
  1227.                 window.location.href = '";
  1228.         // line 1006
  1229.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  1230.         yield "';
  1231.             }
  1232.         });
  1233.         return;
  1234.     }
  1236.     // Rediriger vers la page de checkout
  1237.     window.location.href = '";
  1238.         // line 1013
  1239.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_checkout");
  1240.         yield "';
  1241. }
  1243. function changeQuantity(productId, delta) {
  1244.     const qtyInput = document.getElementById('qty-' + productId);
  1245.     if (!qtyInput) return;
  1246.     
  1247.     const currentQty = parseInt(qtyInput.value) || 0;
  1248.     const newQty = Math.max(0, currentQty + delta);
  1249.     
  1250.     updateQuantity(productId, newQty);
  1251. }
  1253. function handleDecreaseOrRemove(productId) {
  1254.     const qtyInput = document.getElementById('qty-' + productId);
  1255.     if (!qtyInput) return;
  1256.     
  1257.     const currentQty = parseInt(qtyInput.value) || 0;
  1258.     
  1259.     if (currentQty === 1) {
  1260.         // Si la quantité est 1, supprimer le produit
  1261.         removeFromCart(productId);
  1262.     } else {
  1263.         // Sinon, diminuer la quantité
  1264.         changeQuantity(productId, -1);
  1265.     }
  1266. }
  1268. // Initialiser les données du panier
  1269. let cartData = {}; // Stocker les données du panier côté client
  1271. ";
  1272.         // line 1044
  1273.         $context['_parent'] = $context;
  1274.         $context['_seq'] = CoreExtension::ensureTraversable(($context["items"] ?? null));
  1275.         foreach ($context['_seq'] as $context["_key"] => $context["item"]) {
  1276.             // line 1045
  1277.             yield "    ";
  1278.             $context["image"] = (((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", true, true, false, 1045) && CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", false, false, false, 1045))) ? (CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image", [], "any", false, false, false, 1045)) : ($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg")));
  1279.             // line 1046
  1280.             yield "cartData[";
  1281.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 1046), "html", null, true);
  1282.             yield "] = {
  1283.     id: ";
  1284.             // line 1047
  1285.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 1047), "html", null, true);
  1286.             yield ",
  1287.     name: '";
  1288.             // line 1048
  1289.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 1048), "html", null, true);
  1290.             yield "',
  1291.     price: ";
  1292.             // line 1049
  1293.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price", [], "any", false, false, false, 1049), "html", null, true);
  1294.             yield ",
  1295.     qty: ";
  1296.             // line 1050
  1297.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "qty", [], "any", false, false, false, 1050), "html", null, true);
  1298.             yield ",
  1299.     image: '";
  1300.             // line 1051
  1301.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["image"] ?? null), "html", null, true);
  1302.             yield "',
  1303.     slug: '";
  1304.             // line 1052
  1305.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "slug", [], "any", false, false, false, 1052), "html", null, true);
  1306.             yield "'
  1307. };
  1308. ";
  1309.         }
  1310.         $_parent = $context['_parent'];
  1311.         unset($context['_seq'], $context['_key'], $context['item'], $context['_parent']);
  1312.         $context = array_intersect_key($context, $_parent) + $_parent;
  1313.         // line 1055
  1314.         yield "
  1315. function updateQuantity(productId, newQty) {
  1316.     const item = cartData[productId];
  1317.     
  1318.     if (!item) {
  1319.         console.error('Produit non trouvé:', productId);
  1320.         return;
  1321.     }
  1322.     
  1323.     // Validation de la quantité
  1324.     newQty = Math.max(0, parseInt(newQty) || 0);
  1325.     
  1326.     if (newQty === 0) {
  1327.         removeFromCart(productId);
  1328.         return;
  1329.     }
  1330.     
  1331.     if (newQty > 99) {
  1332.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  1333.         return;
  1334.     }
  1335.     
  1336.     // Mettre à jour l'interface immédiatement (optimistic update)
  1337.     updateCartDisplay(productId, newQty);
  1338.     
  1339.     // Envoyer la requête au serveur
  1340.     fetch('";
  1341.         // line 1081
  1342.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_update");
  1343.         yield "', {
  1344.         method: 'POST',
  1345.         headers: { 
  1346.             'Content-Type': 'application/x-www-form-urlencoded',
  1347.             'X-Requested-With': 'XMLHttpRequest'
  1348.         },
  1349.         body: 'productId=' + productId + '&qty=' + newQty
  1350.     })
  1351.     .then(response => {
  1352.         console.log('🔍 Réponse HTTP:', response.status, response.statusText);
  1354.         // Vérifier si la réponse est OK avant de parser
  1355.         if (!response.ok) {
  1356.             throw new Error('Erreur HTTP ' + response.status + ': ' + response.statusText);
  1357.         }
  1359.         return response.json();
  1360.     })
  1361.     .then(data => {
  1362.         console.log('📦 Données reçues:', data);
  1364.         if (data.ok) {
  1365.             // Les données serveur confirment la mise à jour
  1366.             // Mettre à jour le sous-total avec les valeurs exactes du serveur
  1367.             if (data.subtotal !== undefined) {
  1368.                 updateSubtotalDisplay(data);
  1369.                 updateCartBadge(data.totalQty || 0);
  1370.             }
  1371.             console.log('✅ Panier mis à jour avec succès - Sous-total:', data.subtotal, 'HTG');
  1372.         } else {
  1373.             // En cas d'erreur, restaurer la valeur précédente
  1374.             const oldQty = item.qty;
  1375.             updateCartDisplay(productId, oldQty);
  1376.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  1377.         }
  1378.     })
  1379.     .catch(error => {
  1380.         console.error('❌ Erreur détaillée:', error);
  1381.         console.error('❌ Type d\\'erreur:', error.constructor.name);
  1382.         console.error('❌ Message d\\'erreur:', error.message);
  1384.         // Restaurer la valeur précédente en cas d'erreur
  1385.         const oldQty = item.qty;
  1386.         updateCartDisplay(productId, oldQty);
  1388.         // Afficher un message d'erreur plus détaillé
  1389.         let errorMessage = 'Une erreur de connexion est survenue. Veuillez réessayer.';
  1390.         if (error.message.includes('HTTP')) {
  1391.             errorMessage = 'Erreur du serveur: ' + error.message;
  1392.         } else if (error.message.includes('JSON')) {
  1393.             errorMessage = 'Erreur de traitement des données. Veuillez recharger la page.';
  1394.         }
  1396.         showAlert('Erreur de connexion', errorMessage, 'error');
  1397.     });
  1398. }
  1400. function updateCartDisplay(productId, qty) {
  1401.     const item = cartData[productId];
  1402.     if (!item) return;
  1403.     
  1404.     // Mettre à jour les données locales
  1405.     item.qty = qty;
  1406.     
  1407.     // Mettre à jour la quantité dans l'input
  1408.     const qtyInput = document.getElementById('qty-' + productId);
  1409.     if (qtyInput) {
  1410.         qtyInput.value = qty;
  1411.     }
  1412.     
  1413.     // Mettre à jour le bouton de diminution/suppression
  1414.     const decreaseBtn = document.getElementById('decrease-btn-' + productId);
  1415.     if (decreaseBtn) {
  1416.         if (qty === 1) {
  1417.             // Changer en bouton de suppression (poubelle)
  1418.             decreaseBtn.innerHTML = '<i class=\"lnr lnr-trash\"></i>';
  1419.             decreaseBtn.classList.add('quantity-btn-remove');
  1420.             decreaseBtn.classList.remove('quantity-btn-decrease');
  1421.         } else {
  1422.             // Changer en bouton de diminution (moins)
  1423.             decreaseBtn.innerHTML = '<span>−</span>';
  1424.             decreaseBtn.classList.add('quantity-btn-decrease');
  1425.             decreaseBtn.classList.remove('quantity-btn-remove');
  1426.         }
  1427.     }
  1428.     
  1429.     // Mettre à jour le total du produit
  1430.     const totalElement = document.getElementById('total-' + productId);
  1431.     if (totalElement) {
  1432.         const itemTotal = (item.price * qty);
  1433.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  1434.             minimumFractionDigits: 2,
  1435.             maximumFractionDigits: 2
  1436.         }) + ' HTG';
  1437.     }
  1438.     
  1439.     // Mettre à jour les totaux généraux
  1440.     updateCartSummary();
  1441. }
  1443. function updateCartTotals(data) {
  1444.     // Utiliser la fonction unifiée pour mettre à jour les totaux
  1445.     updateSubtotalDisplay(data);
  1446. }
  1448. function updateCartSummary() {
  1449.     // Calculer les totaux côté client depuis cartData
  1450.     let subtotal = 0;
  1451.     let totalItems = 0;
  1453.     Object.values(cartData).forEach(item => {
  1454.         subtotal += item.price * item.qty;
  1455.         totalItems += item.qty;
  1456.     });
  1458.     // Mettre à jour l'affichage du sous-total
  1459.     const subtotalElement = document.getElementById('cart-subtotal');
  1460.     if (subtotalElement) {
  1461.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1462.             minimumFractionDigits: 2,
  1463.             maximumFractionDigits: 2
  1464.         }) + ' HTG';
  1465.     }
  1467.     // Mettre à jour l'affichage du total
  1468.     const totalElement = document.getElementById('cart-total');
  1469.     if (totalElement) {
  1470.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1471.             minimumFractionDigits: 2,
  1472.             maximumFractionDigits: 2
  1473.         }) + ' HTG';
  1474.     }
  1476.     // Mettre à jour le compteur d'articles
  1477.     const itemCountElement = document.getElementById('cart-item-count');
  1478.     if (itemCountElement) {
  1479.         itemCountElement.textContent = totalItems;
  1480.     }
  1482.     // Mettre à jour le label du sous-total
  1483.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  1484.     if (subtotalLabel) {
  1485.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1486.         subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1487.     }
  1489.     // Mettre à jour l'état du bouton checkout
  1490.     updateCheckoutButtonState();
  1491. }
  1493. // Fonction pour mettre à jour l'état du bouton checkout
  1494. function updateCheckoutButtonState() {
  1495.     const checkoutBtn = document.querySelector('.checkout-btn');
  1496.     const isCartEmpty = Object.keys(cartData).length === 0;
  1498.     if (checkoutBtn) {
  1499.         if (isCartEmpty) {
  1500.             checkoutBtn.classList.add('disabled');
  1501.             checkoutBtn.title = 'Votre panier est vide';
  1502.         } else {
  1503.             checkoutBtn.classList.remove('disabled');
  1504.             checkoutBtn.title = 'Procéder à la commande';
  1505.         }
  1506.     }
  1507. }
  1509. // Fonction pour mettre à jour le badge du panier
  1510. function updateCartBadge(totalQty) {
  1511.     const cartBadge = document.querySelector('.cart-badge');
  1512.     if (cartBadge) {
  1513.         cartBadge.textContent = totalQty || 0;
  1514.         console.log('🛒 Badge du panier mis à jour:', totalQty);
  1516.         // Animation du badge si la quantité change
  1517.         if (totalQty > 0) {
  1518.             cartBadge.style.animation = 'none';
  1519.             cartBadge.offsetHeight; // Trigger reflow
  1520.             cartBadge.style.animation = 'bounce 0.5s ease';
  1521.         }
  1522.     }
  1523. }
  1525. // Fonction améliorée pour mettre à jour le sous-total avec débogage
  1526. function updateSubtotalDisplay(data = null) {
  1527.     // Si des données serveur sont fournies, les utiliser (priorité absolue)
  1528.     if (data && data.subtotal !== undefined) {
  1529.         console.log('🔄 Mise à jour sous-total avec données serveur:', data.subtotal, 'HTG');
  1531.         const subtotalElement = document.getElementById('cart-subtotal');
  1532.         const totalElement = document.getElementById('cart-total');
  1534.         const formattedSubtotal = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1535.             minimumFractionDigits: 2,
  1536.             maximumFractionDigits: 2
  1537.         }) + ' HTG';
  1539.         if (subtotalElement) {
  1540.             subtotalElement.textContent = formattedSubtotal;
  1541.         }
  1543.         if (totalElement) {
  1544.             totalElement.textContent = formattedSubtotal;
  1545.         }
  1547.         // Mettre à jour le compteur d'articles
  1548.         const itemCountElement = document.getElementById('cart-item-count');
  1549.         if (itemCountElement && data.totalQty !== undefined) {
  1550.             const totalItems = data.totalQty;
  1551.             console.log('🔢 Mise à jour compteur articles:', totalItems, 'articles au total');
  1553.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1554.             const subtotalLabel = document.getElementById('cart-subtotal-label');
  1555.             if (subtotalLabel) {
  1556.                 subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1557.                 console.log('📊 Label mis à jour:', subtotalLabel.innerHTML);
  1558.             }
  1559.         }
  1561.         // Vérification de cohérence (debug)
  1562.         let clientSubtotal = 0;
  1563.         let clientTotalItems = 0;
  1564.         Object.values(cartData).forEach(item => {
  1565.             clientSubtotal += parseFloat(item.price) * parseInt(item.qty);
  1566.             clientTotalItems += parseInt(item.qty);
  1567.         });
  1569.         const serverSubtotal = parseFloat(data.subtotal);
  1570.         if (Math.abs(clientSubtotal - serverSubtotal) > 0.01) {
  1571.             console.warn('⚠️ Incohérence détectée:', {
  1572.                 client: clientSubtotal.toFixed(2),
  1573.                 server: serverSubtotal.toFixed(2),
  1574.                 difference: Math.abs(clientSubtotal - serverSubtotal).toFixed(2)
  1575.             });
  1576.         }
  1578.     } else {
  1579.         // Calcul de secours côté client (si pas de données serveur)
  1580.         console.log('🔄 Calcul sous-total côté client (secours)');
  1582.         let subtotal = 0;
  1583.         let totalItems = 0;
  1585.         Object.values(cartData).forEach(item => {
  1586.             subtotal += parseFloat(item.price) * parseInt(item.qty);
  1587.             totalItems += parseInt(item.qty);
  1588.         });
  1590.         const formattedSubtotal = subtotal.toLocaleString('fr-FR', {
  1591.             minimumFractionDigits: 2,
  1592.             maximumFractionDigits: 2
  1593.         }) + ' HTG';
  1595.         // Mettre à jour l'affichage du sous-total
  1596.         const subtotalElement = document.getElementById('cart-subtotal');
  1597.         if (subtotalElement) {
  1598.             subtotalElement.textContent = formattedSubtotal;
  1599.         }
  1601.         const totalElement = document.getElementById('cart-total');
  1602.         if (totalElement) {
  1603.             totalElement.textContent = formattedSubtotal;
  1604.         }
  1606.         // Mettre à jour le label du sous-total
  1607.         const subtotalLabel = document.getElementById('cart-subtotal-label');
  1608.         if (subtotalLabel) {
  1609.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1610.             subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1611.         }
  1612.     }
  1613. }
  1615. function removeFromCart(productId) {
  1616.     const item = cartData[productId];
  1617.     const itemName = item ? item.name : 'cet article';
  1618.     
  1619.     showConfirm(
  1620.         'Supprimer l\\'article',
  1621.         `Êtes-vous sûr de vouloir supprimer \"\${itemName}\" de votre panier ?`,
  1622.         function() {
  1623.             // Mettre à jour l'interface immédiatement
  1624.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  1625.             if (row) {
  1626.                 row.style.opacity = '0.5';
  1627.                 row.style.pointerEvents = 'none';
  1628.             }
  1629.             
  1630.             performRemoveFromCart(productId, row);
  1631.         },
  1632.         null,
  1633.         'warning'
  1634.     );
  1635. }
  1637. function performRemoveFromCart(productId, row) {
  1638.     
  1639.     fetch('";
  1640.         // line 1377
  1641.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_remove");
  1642.         yield "', {
  1643.         method: 'POST',
  1644.         headers: { 
  1645.             'Content-Type': 'application/x-www-form-urlencoded',
  1646.             'X-Requested-With': 'XMLHttpRequest'
  1647.         },
  1648.         body: 'productId=' + productId
  1649.     })
  1650.     .then(response => response.json())
  1651.     .then(data => {
  1652.         if (data.ok) {
  1653.             // Supprimer des données locales
  1654.             delete cartData[productId];
  1655.             
  1656.             // Supprimer la ligne du DOM
  1657.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  1658.             if (row) {
  1659.                 row.remove();
  1660.             }
  1661.             
  1662.             // Mettre à jour les totaux
  1663.             updateCartTotals(data);
  1664.             
  1665.             // Mettre à jour le résumé du panier
  1666.             updateCartSummary();
  1667.             
  1668.             // Afficher un message de succès
  1669.             showAlert('Article supprimé', 'L\\'article a été supprimé de votre panier avec succès.', 'success');
  1670.             
  1671.             // Vérifier si le panier est vide
  1672.             if (Object.keys(cartData).length === 0) {
  1673.                 setTimeout(function() {
  1674.                     location.reload();
  1675.                 }, 1500);
  1676.             }
  1677.         } else {
  1678.             // Restaurer l'affichage en cas d'erreur
  1679.             if (row) {
  1680.                 row.style.opacity = '1';
  1681.                 row.style.pointerEvents = 'auto';
  1682.             }
  1683.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\\'article.', 'error');
  1684.         }
  1685.     })
  1686.     .catch(error => {
  1687.         console.error('Erreur:', error);
  1688.         // Restaurer l'affichage en cas d'erreur réseau
  1689.         if (row) {
  1690.             row.style.opacity = '1';
  1691.             row.style.pointerEvents = 'auto';
  1692.         }
  1693.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1694.     });
  1695. }
  1697. // Script pour forcer l'application des styles des boutons de quantité et initialiser l'état du bouton checkout
  1698. document.addEventListener('DOMContentLoaded', function() {
  1699.     // Initialiser l'état du bouton checkout
  1700.     updateCheckoutButtonState();
  1702.     const quantityControls = document.querySelectorAll('.quantity-controls');
  1703.     quantityControls.forEach(function(control) {
  1704.         if (control) {
  1705.             // Forcer les styles sur le conteneur
  1706.             control.style.display = 'flex';
  1707.             control.style.alignItems = 'center';
  1708.             control.style.justifyContent = 'center';
  1709.             control.style.border = '1px solid #ddd';
  1710.             control.style.borderRadius = '4px';
  1711.             control.style.width = '120px';
  1712.             control.style.height = '40px';
  1713.             control.style.position = 'relative';
  1714.             control.style.background = 'white';
  1715.             control.style.overflow = 'hidden';
  1717.             // Forcer les styles sur les boutons
  1718.             const buttons = control.querySelectorAll('.quantity-btn');
  1719.             buttons.forEach(function(btn, index) {
  1720.                 btn.style.background = '#f8f8f8';
  1721.                 btn.style.border = 'none';
  1722.                 btn.style.width = '35px';
  1723.                 btn.style.height = '100%';
  1724.                 btn.style.cursor = 'pointer';
  1725.                 btn.style.fontSize = '18px';
  1726.                 btn.style.fontWeight = '600';
  1727.                 btn.style.color = '#333';
  1728.                 btn.style.display = 'flex';
  1729.                 btn.style.alignItems = 'center';
  1730.                 btn.style.justifyContent = 'center';
  1731.                 btn.style.padding = '0';
  1732.                 btn.style.margin = '0';
  1733.                 btn.style.lineHeight = '1';
  1734.                 btn.style.position = 'relative';
  1735.                 btn.style.zIndex = '1';
  1737.                 // Ajouter les bordures entre les boutons
  1738.                 if (index === 0) {
  1739.                     btn.style.borderRight = '1px solid #ddd';
  1740.                 } else if (index === buttons.length - 1) {
  1741.                     btn.style.borderLeft = '1px solid #ddd';
  1742.                 }
  1743.             });
  1745.             // Forcer les styles sur l'input
  1746.             const input = control.querySelector('.quantity-input');
  1747.             if (input) {
  1748.                 input.style.border = 'none';
  1749.                 input.style.width = '50px';
  1750.                 input.style.height = '100%';
  1751.                 input.style.textAlign = 'center';
  1752.                 input.style.fontSize = '15px';
  1753.                 input.style.fontWeight = '500';
  1754.                 input.style.padding = '0';
  1755.                 input.style.margin = '0';
  1756.                 input.style.background = 'white';
  1757.                 input.style.color = '#333';
  1758.                 input.style.outline = 'none';
  1759.                 input.style.boxShadow = 'none';
  1760.                 input.style.position = 'relative';
  1761.                 input.style.zIndex = '1';
  1762.             }
  1763.         }
  1764.     });
  1765. });
  1767. </script>
  1768. ";
  1769.         
  1770.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1772.         
  1773.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1775.         yield from [];
  1776.     }
  1778.     /**
  1779.      * @codeCoverageIgnore
  1780.      */
  1781.     public function getTemplateName(): string
  1782.     {
  1783.         return "home/cart.html.twig";
  1784.     }
  1786.     /**
  1787.      * @codeCoverageIgnore
  1788.      */
  1789.     public function isTraitable(): bool
  1790.     {
  1791.         return false;
  1792.     }
  1794.     /**
  1795.      * @codeCoverageIgnore
  1796.      */
  1797.     public function getDebugInfo(): array
  1798.     {
  1799.         return array (  1641 => 1377,  1342 => 1081,  1314 => 1055,  1305 => 1052,  1301 => 1051,  1297 => 1050,  1293 => 1049,  1289 => 1048,  1285 => 1047,  1280 => 1046,  1277 => 1045,  1273 => 1044,  1239 => 1013,  1229 => 1006,  1093 => 872,  1080 => 871,  331 => 131,  318 => 130,  278 => 100,  272 => 97,  265 => 93,  259 => 92,  248 => 83,  238 => 79,  232 => 75,  230 => 74,  222 => 71,  214 => 68,  207 => 64,  199 => 63,  196 => 62,  192 => 60,  188 => 58,  186 => 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,);
  1800.     }
  1802.     public function getSourceContext(): Source
  1803.     {
  1804.         return new Source("{% extends 'base_home.html.twig' %}
  1806. {% block title %}Panier | MaketOu{% endblock %}
  1808. {% block body %}
  1809.     <!-- Start Banner Area -->
  1810.     <section class=\"banner-area organic-breadcrumb\">
  1811.         <div class=\"container\">
  1812.             <div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  1813.                 <div class=\"col-first\">
  1814.                     <h1>Panier</h1>
  1815.                     <nav class=\"d-flex align-items-center\">
  1816.                         <a href=\"{{ path('ui_home') }}\">Accueil<span class=\"lnr lnr-arrow-right\"></span></a>
  1817.                         <a href=\"javascript:void(0)\">Panier</a>
  1818.                     </nav>
  1819.                 </div>
  1820.             </div>
  1821.         </div>
  1822.     </section>
  1823.     <!-- End Banner Area -->
  1825.     <!--================Cart Area =================-->
  1826.     <section class=\"cart_area\">
  1827.         <div class=\"container\">
  1828.             <div class=\"row\">
  1829.                 <div class=\"col-lg-8\">
  1830.                     <div class=\"cart_inner\">
  1831.                         <div class=\"table-responsive\">
  1832.                             <table class=\"table\">
  1833.                                 <thead>
  1834.                                     <tr>
  1835.                                         <th scope=\"col\">Produit</th>
  1836.                                         <th scope=\"col\">Prix</th>
  1837.                                         <th scope=\"col\">Quantité</th>
  1838.                                         <th scope=\"col\">Total</th>
  1839.                                         <th scope=\"col\">Action</th>
  1840.                                     </tr>
  1841.                                 </thead>
  1842.                                 <tbody>
  1843.                                     {% for item in items %}
  1844.                                     <tr>
  1845.                                         <td data-label=\"Produit\">
  1846.                                             <div class=\"cart-item\">
  1847.                                                 {% set image = (item.image is defined and item.image|length > 0) ? item.image : asset('ui/img/category/s-p1.jpg') %}
  1848.                                                 <img src=\"{{ image }}\" alt=\"{{ item.name }}\" class=\"cart-item-image\">
  1849.                                                 <div class=\"cart-item-info\">
  1850.                                                     <a href=\"{{ path('ui_product_show', { slug: item.slug }) }}\" class=\"cart-item-name\">{{ item.name }}</a>
  1851.                                                 </div>
  1852.                                             </div>
  1853.                                         </td>
  1854.                                         <td data-label=\"Prix\">
  1855.                                             <span class=\"cart-item-price\">{{ item.price|number_format(2, '.', ' ') }} HTG</span>
  1856.                                         </td>
  1857.                                         <td data-label=\"Quantité\">
  1858.                                             <div class=\"quantity-controls\">
  1859.                                                 <button class=\"quantity-btn quantity-btn-decrease\" id=\"decrease-btn-{{ item.id }}\" data-product-id=\"{{ item.id }}\" onclick=\"handleDecreaseOrRemove({{ item.id }})\">
  1860.                                                     {% if item.qty == 1 %}
  1861.                                                         <i class=\"lnr lnr-trash\"></i>
  1862.                                                     {% else %}
  1863.                                                         <span>−</span>
  1864.                                                     {% endif %}
  1865.                                                 </button>
  1866.                                                 <input type=\"text\" value=\"{{ item.qty }}\" class=\"quantity-input\" id=\"qty-{{ item.id }}\" onchange=\"updateQuantity({{ item.id }}, this.value)\">
  1867.                                                 <button class=\"quantity-btn\" onclick=\"changeQuantity({{ item.id }}, 1)\">+</button>
  1868.                                             </div>
  1869.                                         </td>
  1870.                                         <td data-label=\"Total\">
  1871.                                             <span class=\"cart-item-total\" id=\"total-{{ item.id }}\">{{ (item.price * item.qty)|number_format(2, '.', ' ') }} HTG</span>
  1872.                                         </td>
  1873.                                         <td data-label=\"Action\">
  1874.                                             <button class=\"remove-btn\" onclick=\"removeFromCart({{ item.id }})\">Supprimer</button>
  1875.                                         </td>
  1876.                                     </tr>
  1877.                                     {% else %}
  1878.                                         <tr>
  1879.                                             <td colspan=\"5\" style=\"text-align: center; padding: 50px;\">
  1880.                                                 Votre panier est vide.
  1881.                                                 <br>
  1882.                                                 <a href=\"{{ path('ui_listing') }}\" style=\"color: #007185;\">Continuer vos achats</a>
  1883.                                             </td>
  1884.                                         </tr>
  1885.                                     {% endfor %}
  1886.                                 </tbody>
  1887.                             </table>
  1888.                         </div>
  1889.                     </div>
  1890.                 </div>
  1891.                 <div class=\"col-lg-4\">
  1892.                     <div class=\"cart-summary\">
  1893.                         <h3>Résumé de la commande</h3>
  1894.                         <div class=\"cart-subtotal\">
  1895.                             <span id=\"cart-subtotal-label\">Sous-total (<span id=\"cart-item-count\">{{ items|length }}</span> article{{ items|length > 1 ? 's' : '' }})</span>
  1896.                             <span id=\"cart-subtotal\">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  1897.                         </div>
  1898.                         <div class=\"cart-total\">
  1899.                             <span>Total</span>
  1900.                             <span id=\"cart-total\">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  1901.                         </div>
  1902.                         <button class=\"checkout-btn mt-3\" onclick=\"proceedToCheckout()\">Passer la commande</button>
  1903.                         <button class=\"continue-shopping\" onclick=\"window.location.href='{{ path('ui_listing') }}'\">Continuer vos achats</button>
  1904.                     </div>
  1905.                 </div>
  1906.             </div>
  1907.         </div>
  1908.     </section>
  1909.     <!--================End Cart Area =================-->
  1911.     <!-- Modal personnalisé -->
  1912.     <div id=\"customModal\" class=\"custom-modal\">
  1913.         <div class=\"custom-modal-overlay\"></div>
  1914.         <div class=\"custom-modal-content\">
  1915.             <div class=\"custom-modal-header\">
  1916.                 <h3 class=\"custom-modal-title\" id=\"modalTitle\">Titre</h3>
  1917.                 <button class=\"custom-modal-close\" onclick=\"closeCustomModal()\" aria-label=\"Fermer\">
  1918.                     <span>&times;</span>
  1919.                 </button>
  1920.             </div>
  1921.             <div class=\"custom-modal-body\" id=\"modalBody\">
  1922.                 <p id=\"modalMessage\">Message</p>
  1923.             </div>
  1924.             <div class=\"custom-modal-footer\" id=\"modalFooter\">
  1925.                 <button class=\"custom-modal-btn custom-modal-btn-primary\" id=\"modalConfirmBtn\" onclick=\"confirmModalAction()\">Confirmer</button>
  1926.                 <button class=\"custom-modal-btn custom-modal-btn-secondary\" id=\"modalCancelBtn\" onclick=\"closeCustomModal()\">Annuler</button>
  1927.             </div>
  1928.         </div>
  1929.     </div>
  1931. {% endblock %}
  1933. {% block stylesheets %}
  1934. <style>
  1935. .cart_area {
  1936.     background-color: #f8f8f8;
  1937.     padding: 20px 0;
  1938. }
  1940. .cart_inner {
  1941.     background: white;
  1942.     border-radius: 8px;
  1943.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  1944.     overflow: hidden;
  1945. }
  1947. .table th {
  1948.     background-color: #f3f3f3;
  1949.     border-bottom: 2px solid #ddd;
  1950.     font-weight: 600;
  1951.     color: #333;
  1952.     padding: 15px;
  1953. }
  1955. .table td {
  1956.     vertical-align: middle;
  1957.     padding: 15px;
  1958. }
  1960. .cart-item {
  1961.     display: flex;
  1962.     align-items: center;
  1963. }
  1965. .cart-item-image {
  1966.     width: 80px;
  1967.     height: 80px;
  1968.     object-fit: cover;
  1969.     border-radius: 8px;
  1970.     margin-right: 15px;
  1971. }
  1973. .cart-item-info {
  1974.     flex-grow: 1;
  1975. }
  1977. .cart-item-name {
  1978.     font-weight: 500;
  1979.     color: #007185;
  1980.     text-decoration: none;
  1981.     margin-bottom: 5px;
  1982. }
  1984. .cart-item-name:hover {
  1985.     text-decoration: underline;
  1986. }
  1988. .cart-item-price {
  1989.     color: #333;
  1990.     font-size: 18px;
  1991.     font-weight: 700;
  1992. }
  1994. .quantity-controls {
  1995.     display: flex !important;
  1996.     align-items: center !important;
  1997.     justify-content: center !important;
  1998.     border: 1px solid #ddd !important;
  1999.     border-radius: 4px !important;
  2000.     width: 120px !important;
  2001.     height: 40px !important;
  2002.     position: relative !important;
  2003.     background: white !important;
  2004.     overflow: hidden !important;
  2005. }
  2007. .quantity-controls .quantity-btn {
  2008.     background: #f8f8f8 !important;
  2009.     border: none !important;
  2010.     width: 35px !important;
  2011.     height: 100% !important;
  2012.     min-width: 35px !important;
  2013.     cursor: pointer !important;
  2014.     font-size: 18px !important;
  2015.     font-weight: 600 !important;
  2016.     color: #333 !important;
  2017.     display: flex !important;
  2018.     align-items: center !important;
  2019.     justify-content: center !important;
  2020.     padding: 0 !important;
  2021.     margin: 0 !important;
  2022.     line-height: 1 !important;
  2023.     transition: background-color 0.2s ease !important;
  2024.     position: relative !important;
  2025.     z-index: 1 !important;
  2026. }
  2028. .quantity-controls .quantity-btn:first-child {
  2029.     border-right: 1px solid #ddd !important;
  2030. }
  2032. .quantity-controls .quantity-btn:last-child {
  2033.     border-left: 1px solid #ddd !important;
  2034. }
  2036. .quantity-controls .quantity-btn:hover {
  2037.     background: #e7e7e7 !important;
  2038.     color: #000 !important;
  2039. }
  2041. .quantity-controls .quantity-btn:active {
  2042.     background: #d0d0d0 !important;
  2043. }
  2045. .quantity-controls .quantity-btn-remove {
  2046.     background: #f8f8f8 !important;
  2047.     color: #dc3545 !important;
  2048. }
  2050. .quantity-controls .quantity-btn-remove:hover {
  2051.     background: #dc3545 !important;
  2052.     color: white !important;
  2053. }
  2055. .quantity-controls .quantity-btn-remove i {
  2056.     font-size: 16px !important;
  2057. }
  2059. .quantity-controls .quantity-btn-decrease span {
  2060.     font-size: 24px !important;
  2061.     font-weight: 300 !important;
  2062.     line-height: 1 !important;
  2063. }
  2065. .quantity-controls .quantity-input {
  2066.     border: none !important;
  2067.     width: 50px !important;
  2068.     min-width: 50px !important;
  2069.     height: 100% !important;
  2070.     text-align: center !important;
  2071.     font-size: 15px !important;
  2072.     font-weight: 500 !important;
  2073.     padding: 0 !important;
  2074.     margin: 0 !important;
  2075.     background: white !important;
  2076.     color: #333 !important;
  2077.     outline: none !important;
  2078.     box-shadow: none !important;
  2079.     -moz-appearance: textfield !important;
  2080.     position: relative !important;
  2081.     z-index: 1 !important;
  2082. }
  2084. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  2085. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  2086.     -webkit-appearance: none !important;
  2087.     margin: 0 !important;
  2088. }
  2090. /* Surcharger les styles externes qui pourraient interférer */
  2091. .cart_inner .table tbody tr td .quantity-controls,
  2092. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  2093. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  2094.     position: relative !important;
  2095. }
  2097. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  2098. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  2099.     display: none !important;
  2100.     content: none !important;
  2101. }
  2103. .cart-item-total {
  2104.     font-size: 18px;
  2105.     font-weight: 700;
  2106.     color: #333;
  2107. }
  2109. /* Animation pour le badge du panier */
  2110. @keyframes bounce {
  2111.     0%, 20%, 50%, 80%, 100% {
  2112.         transform: translateY(0);
  2113.     }
  2114.     40% {
  2115.         transform: translateY(-5px);
  2116.     }
  2117.     60% {
  2118.         transform: translateY(-3px);
  2119.     }
  2120. }
  2122. /* Responsive Styles */
  2123. @media (max-width: 991.98px) {
  2124.     .cart_area {
  2125.         padding: 15px 0;
  2126.     }
  2127.     
  2128.     .cart-summary {
  2129.         margin-top: 2rem;
  2130.     }
  2131. }
  2133. @media (max-width: 767.98px) {
  2134.     .cart_inner {
  2135.         border-radius: 0;
  2136.     }
  2137.     
  2138.     .table {
  2139.         font-size: 0.875rem;
  2140.     }
  2141.     
  2142.     .table th {
  2143.         padding: 10px 8px;
  2144.         font-size: 0.8rem;
  2145.     }
  2146.     
  2147.     .table td {
  2148.         padding: 10px 8px;
  2149.     }
  2150.     
  2151.     .cart-item {
  2152.         flex-direction: column;
  2153.         align-items: flex-start;
  2154.     }
  2155.     
  2156.     .cart-item-image {
  2157.         width: 60px;
  2158.         height: 60px;
  2159.         margin-right: 0;
  2160.         margin-bottom: 10px;
  2161.     }
  2162.     
  2163.     .cart-item-name {
  2164.         font-size: 0.9rem;
  2165.     }
  2166.     
  2167.     .cart-item-price,
  2168.     .cart-item-total {
  2169.         font-size: 1rem;
  2170.     }
  2171.     
  2172.     .quantity-controls {
  2173.         width: 110px !important;
  2174.         height: 38px !important;
  2175.     }
  2176.     
  2177.     .quantity-controls .quantity-btn {
  2178.         width: 32px !important;
  2179.         font-size: 16px !important;
  2180.     }
  2181.     
  2182.     .quantity-controls .quantity-input {
  2183.         width: 46px !important;
  2184.         font-size: 14px !important;
  2185.     }
  2186.     
  2187.     .cart-summary {
  2188.         margin-top: 1.5rem;
  2189.         padding: 1.5rem;
  2190.     }
  2191.     
  2192.     .checkout-btn,
  2193.     .continue-shopping {
  2194.         width: 100%;
  2195.         margin-bottom: 0.5rem;
  2196.     }
  2197. }
  2199. @media (max-width: 575.98px) {
  2200.     .table thead {
  2201.         display: none;
  2202.     }
  2203.     
  2204.     .table tbody tr {
  2205.         display: block;
  2206.         margin-bottom: 1rem;
  2207.         border: 1px solid #dee2e6;
  2208.         border-radius: 8px;
  2209.         padding: 1rem;
  2210.     }
  2211.     
  2212.     .table tbody td {
  2213.         display: flex;
  2214.         justify-content: space-between;
  2215.         align-items: center;
  2216.         padding: 0.5rem 0;
  2217.         border: none;
  2218.         text-align: right;
  2219.     }
  2220.     
  2221.     .table tbody td::before {
  2222.         content: attr(data-label);
  2223.         font-weight: bold;
  2224.         text-align: left;
  2225.         margin-right: 1rem;
  2226.     }
  2227.     
  2228.     .table tbody td:first-child {
  2229.         flex-direction: column;
  2230.         align-items: flex-start;
  2231.     }
  2232.     
  2233.     .cart-item-image {
  2234.         width: 100%;
  2235.         height: 200px;
  2236.         margin-bottom: 1rem;
  2237.     }
  2238.     
  2239.     .cart-item-name {
  2240.         font-size: 1rem;
  2241.         margin-bottom: 0.5rem;
  2242.     }
  2243.     
  2244.     .quantity-controls {
  2245.         width: 100% !important;
  2246.         max-width: 150px !important;
  2247.         margin: 0 auto !important;
  2248.         justify-content: center !important;
  2249.         height: 40px !important;
  2250.     }
  2251.     
  2252.     .quantity-controls .quantity-btn {
  2253.         width: 40px !important;
  2254.         font-size: 18px !important;
  2255.     }
  2256.     
  2257.     .quantity-controls .quantity-input {
  2258.         width: 60px !important;
  2259.         font-size: 16px !important;
  2260.     }
  2261.     
  2262.     .remove-btn {
  2263.         width: 100%;
  2264.         margin-top: 0.5rem;
  2265.     }
  2266. }
  2268. .remove-btn {
  2269.     background: #ff9900;
  2270.     color: white;
  2271.     border: none;
  2272.     padding: 8px 16px;
  2273.     border-radius: 4px;
  2274.     cursor: pointer;
  2275.     font-size: 12px;
  2276. }
  2278. .remove-btn:hover {
  2279.     background: #e68900;
  2280. }
  2282. .cart-summary {
  2283.     background: white;
  2284.     border-radius: 8px;
  2285.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  2286.     padding: 20px;
  2287.     height: fit-content;
  2288. }
  2290. .cart-subtotal {
  2291.     display: flex;
  2292.     justify-content: space-between;
  2293.     padding: 10px 0;
  2294.     border-bottom: 1px solid #ddd;
  2295.     margin-bottom: 15px;
  2296. }
  2298. .cart-total {
  2299.     font-size: 20px;
  2300.     font-weight: 700;
  2301.     color: #333;
  2302. }
  2304. .checkout-btn {
  2305.     background: #ffa200;
  2306.     color: white;
  2307.     border: none;
  2308.     padding: 12px 24px;
  2309.     border-radius: 4px;
  2310.     cursor: pointer;
  2311.     width: 100%;
  2312.     font-size: 16px;
  2313.     font-weight: 600;
  2314. }
  2316. .checkout-btn:hover {
  2317.     background: #e68900;
  2318. }
  2320. .checkout-btn:disabled,
  2321. .checkout-btn.disabled {
  2322.     background: #cccccc !important;
  2323.     color: #666666 !important;
  2324.     cursor: pointer !important; /* Garder le curseur pointer pour indiquer que c'est cliquable */
  2325.     opacity: 0.6;
  2326.     pointer-events: auto !important; /* S'assurer que le clic fonctionne */
  2327. }
  2329. .checkout-btn:disabled:hover,
  2330. .checkout-btn.disabled:hover {
  2331.     background: #cccccc !important;
  2332.     transform: none !important;
  2333.     box-shadow: none !important;
  2334. }
  2336. .continue-shopping {
  2337.     background: #095ad3;
  2338.     color: #ffffff;
  2339.     border: none;
  2340.     padding: 12px 24px;
  2341.     border-radius: 4px;
  2342.     cursor: pointer;
  2343.     width: 100%;
  2344.     font-size: 16px;
  2345.     font-weight: 600;
  2346.     margin-top: 10px;
  2347. }
  2349. .continue-shopping:hover {
  2350.     background: #e68900;
  2351.     color: #ffffff
  2352. }
  2354. /* ============================================
  2355.    MODAL PERSONNALISÉ
  2356.    ============================================ */
  2357. .custom-modal {
  2358.     display: none;
  2359.     position: fixed;
  2360.     top: 0;
  2361.     left: 0;
  2362.     width: 100%;
  2363.     height: 100%;
  2364.     z-index: 10000;
  2365.     opacity: 0;
  2366.     transition: opacity 0.3s ease;
  2367. }
  2369. .custom-modal.show {
  2370.     display: flex;
  2371.     align-items: center;
  2372.     justify-content: center;
  2373.     opacity: 1;
  2374. }
  2376. .custom-modal-overlay {
  2377.     position: absolute;
  2378.     top: 0;
  2379.     left: 0;
  2380.     width: 100%;
  2381.     height: 100%;
  2382.     background: rgba(0, 0, 0, 0.5);
  2383.     backdrop-filter: blur(4px);
  2384.     -webkit-backdrop-filter: blur(4px);
  2385. }
  2387. .custom-modal-content {
  2388.     position: relative;
  2389.     background: white;
  2390.     border-radius: 12px;
  2391.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  2392.     max-width: 500px;
  2393.     width: 90%;
  2394.     max-height: 90vh;
  2395.     overflow: hidden;
  2396.     transform: scale(0.9) translateY(-20px);
  2397.     transition: transform 0.3s ease;
  2398.     z-index: 10001;
  2399. }
  2401. .custom-modal.show .custom-modal-content {
  2402.     transform: scale(1) translateY(0);
  2403. }
  2405. .custom-modal-header {
  2406.     display: flex;
  2407.     align-items: center;
  2408.     justify-content: space-between;
  2409.     padding: 20px 24px;
  2410.     border-bottom: 1px solid #e0e0e0;
  2411.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  2412. }
  2414. .custom-modal-header.error {
  2415.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  2416. }
  2418. .custom-modal-header.success {
  2419.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  2420. }
  2422. .custom-modal-header.warning {
  2423.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  2424. }
  2426. .custom-modal-header.info {
  2427.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  2428. }
  2430. .custom-modal-title {
  2431.     margin: 0;
  2432.     font-size: 20px;
  2433.     font-weight: 600;
  2434.     color: white;
  2435.     display: flex;
  2436.     align-items: center;
  2437.     gap: 10px;
  2438. }
  2440. .custom-modal-title::before {
  2441.     content: '';
  2442.     width: 24px;
  2443.     height: 24px;
  2444.     display: inline-block;
  2445.     background-size: contain;
  2446.     background-repeat: no-repeat;
  2447.     background-position: center;
  2448. }
  2450. .custom-modal-title.success::before {
  2451.     content: '✓';
  2452.     font-size: 20px;
  2453.     font-weight: bold;
  2454. }
  2456. .custom-modal-title.error::before {
  2457.     content: '✕';
  2458.     font-size: 20px;
  2459.     font-weight: bold;
  2460. }
  2462. .custom-modal-title.warning::before {
  2463.     content: '⚠';
  2464.     font-size: 20px;
  2465.     font-weight: bold;
  2466. }
  2468. .custom-modal-title.info::before {
  2469.     content: 'ℹ';
  2470.     font-size: 20px;
  2471.     font-weight: bold;
  2472. }
  2474. .custom-modal-close {
  2475.     background: rgba(255, 255, 255, 0.15);
  2476.     border: 2px solid rgba(255, 255, 255, 0.3);
  2477.     color: white;
  2478.     font-size: 22px;
  2479.     font-weight: 300;
  2480.     line-height: 1;
  2481.     width: 36px;
  2482.     height: 36px;
  2483.     border-radius: 50%;
  2484.     cursor: pointer;
  2485.     display: flex;
  2486.     align-items: center;
  2487.     justify-content: center;
  2488.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  2489.     padding: 0;
  2490.     margin: 0;
  2491.     position: relative;
  2492.     overflow: hidden;
  2493. }
  2495. .custom-modal-close::before {
  2496.     content: '';
  2497.     position: absolute;
  2498.     top: 50%;
  2499.     left: 50%;
  2500.     width: 0;
  2501.     height: 0;
  2502.     border-radius: 50%;
  2503.     background: rgba(255, 255, 255, 0.2);
  2504.     transform: translate(-50%, -50%);
  2505.     transition: width 0.3s ease, height 0.3s ease;
  2506. }
  2508. .custom-modal-close:hover {
  2509.     background: rgba(255, 255, 255, 0.25);
  2510.     border-color: rgba(255, 255, 255, 0.5);
  2511.     transform: rotate(90deg) scale(1.1);
  2512.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  2513. }
  2515. .custom-modal-close:hover::before {
  2516.     width: 100%;
  2517.     height: 100%;
  2518. }
  2520. .custom-modal-close:active {
  2521.     transform: rotate(90deg) scale(0.95);
  2522.     background: rgba(255, 255, 255, 0.3);
  2523. }
  2525. .custom-modal-close span {
  2526.     position: relative;
  2527.     z-index: 1;
  2528.     display: block;
  2529.     line-height: 1;
  2530. }
  2532. .custom-modal-body {
  2533.     padding: 24px;
  2534.     font-size: 16px;
  2535.     line-height: 1.6;
  2536.     color: #333;
  2537.     max-height: 60vh;
  2538.     overflow-y: auto;
  2539. }
  2541. .custom-modal-body p {
  2542.     margin: 0;
  2543. }
  2545. .custom-modal-footer {
  2546.     display: flex;
  2547.     gap: 12px;
  2548.     justify-content: flex-end;
  2549.     padding: 16px 24px;
  2550.     border-top: 1px solid #e0e0e0;
  2551.     background: #f8f9fa;
  2552. }
  2554. .custom-modal-footer.single-button {
  2555.     justify-content: center;
  2556. }
  2558. .custom-modal-btn {
  2559.     padding: 10px 24px;
  2560.     border: none;
  2561.     border-radius: 6px;
  2562.     font-size: 15px;
  2563.     font-weight: 500;
  2564.     cursor: pointer;
  2565.     transition: all 0.2s ease;
  2566.     min-width: 100px;
  2567. }
  2569. .custom-modal-btn-primary {
  2570.     background: #ffa200;
  2571.     color: white;
  2572. }
  2574. .custom-modal-btn-primary:hover {
  2575.     background: #e68900;
  2576.     transform: translateY(-1px);
  2577.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  2578. }
  2580. .custom-modal-btn-secondary {
  2581.     background: #6c757d;
  2582.     color: white;
  2583. }
  2585. .custom-modal-btn-secondary:hover {
  2586.     background: #5a6268;
  2587.     transform: translateY(-1px);
  2588.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  2589. }
  2591. .custom-modal-btn-success {
  2592.     background: #28a745;
  2593.     color: white;
  2594. }
  2596. .custom-modal-btn-success:hover {
  2597.     background: #218838;
  2598.     transform: translateY(-1px);
  2599.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  2600. }
  2602. .custom-modal-btn-danger {
  2603.     background: #dc3545;
  2604.     color: white;
  2605. }
  2607. .custom-modal-btn-danger:hover {
  2608.     background: #c82333;
  2609.     transform: translateY(-1px);
  2610.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  2611. }
  2613. /* Animation pour les modals */
  2614. @keyframes modalFadeIn {
  2615.     from {
  2616.         opacity: 0;
  2617.     }
  2618.     to {
  2619.         opacity: 1;
  2620.     }
  2621. }
  2623. @keyframes modalSlideIn {
  2624.     from {
  2625.         transform: scale(0.9) translateY(-20px);
  2626.         opacity: 0;
  2627.     }
  2628.     to {
  2629.         transform: scale(1) translateY(0);
  2630.         opacity: 1;
  2631.     }
  2632. }
  2634. .custom-modal.show .custom-modal-overlay {
  2635.     animation: modalFadeIn 0.3s ease;
  2636. }
  2638. .custom-modal.show .custom-modal-content {
  2639.     animation: modalSlideIn 0.3s ease;
  2640. }
  2642. /* Responsive */
  2643. @media (max-width: 575.98px) {
  2644.     .custom-modal-content {
  2645.         width: 95%;
  2646.         margin: 20px;
  2647.     }
  2648.     
  2649.     .custom-modal-header {
  2650.         padding: 16px 20px;
  2651.     }
  2652.     
  2653.     .custom-modal-title {
  2654.         font-size: 18px;
  2655.     }
  2656.     
  2657.     .custom-modal-body {
  2658.         padding: 20px;
  2659.         font-size: 15px;
  2660.     }
  2661.     
  2662.     .custom-modal-footer {
  2663.         flex-direction: column;
  2664.         padding: 16px 20px;
  2665.     }
  2666.     
  2667.     .custom-modal-btn {
  2668.         width: 100%;
  2669.     }
  2670. }
  2671. </style>
  2672. {% endblock %}
  2674. {% block javascripts %}
  2675. <script>
  2676. // Variables globales pour le modal
  2677. let modalConfirmCallback = null;
  2678. let modalCancelCallback = null;
  2680. // Fonctions pour gérer le modal personnalisé
  2681. function showCustomModal(options) {
  2682.     const modal = document.getElementById('customModal');
  2683.     const title = document.getElementById('modalTitle');
  2684.     const message = document.getElementById('modalMessage');
  2685.     const footer = document.getElementById('modalFooter');
  2686.     const confirmBtn = document.getElementById('modalConfirmBtn');
  2687.     const cancelBtn = document.getElementById('modalCancelBtn');
  2688.     const header = modal.querySelector('.custom-modal-header');
  2689.     
  2690.     // Réinitialiser les classes
  2691.     header.className = 'custom-modal-header';
  2692.     title.className = 'custom-modal-title';
  2693.     footer.className = 'custom-modal-footer';
  2694.     
  2695.     // Définir le titre et le message
  2696.     title.textContent = options.title || 'Information';
  2697.     message.textContent = options.message || '';
  2698.     
  2699.     // Définir le type (success, error, warning, info)
  2700.     const type = options.type || 'info';
  2701.     header.classList.add(type);
  2702.     title.classList.add(type);
  2703.     
  2704.     // Configurer les boutons
  2705.     if (options.showCancel !== false) {
  2706.         cancelBtn.style.display = 'block';
  2707.         footer.classList.remove('single-button');
  2708.     } else {
  2709.         cancelBtn.style.display = 'none';
  2710.         footer.classList.add('single-button');
  2711.     }
  2712.     
  2713.     // Configurer le bouton de confirmation
  2714.     if (options.confirmText) {
  2715.         confirmBtn.textContent = options.confirmText;
  2716.     }
  2717.     
  2718.     if (options.confirmClass) {
  2719.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  2720.     } else {
  2721.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  2722.     }
  2723.     
  2724.     // Stocker les callbacks
  2725.     modalConfirmCallback = options.onConfirm || null;
  2726.     modalCancelCallback = options.onCancel || null;
  2727.     
  2728.     // Afficher le modal
  2729.     modal.classList.add('show');
  2730.     document.body.style.overflow = 'hidden';
  2731. }
  2733. function closeCustomModal() {
  2734.     const modal = document.getElementById('customModal');
  2735.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  2736.     
  2737.     modal.classList.remove('show');
  2738.     document.body.style.overflow = '';
  2739.     
  2740.     // Réinitialiser les callbacks
  2741.     modalConfirmCallback = null;
  2742.     modalCancelCallback = null;
  2743.     
  2744.     // Appeler le callback d'annulation si présent
  2745.     if (cancelCallback) {
  2746.         cancelCallback();
  2747.     }
  2748. }
  2750. function confirmModalAction() {
  2751.     if (modalConfirmCallback) {
  2752.         modalConfirmCallback();
  2753.     }
  2754.     closeCustomModal();
  2755. }
  2757. // Fermer le modal en cliquant sur l'overlay
  2758. document.addEventListener('DOMContentLoaded', function() {
  2759.     const modal = document.getElementById('customModal');
  2760.     const overlay = modal.querySelector('.custom-modal-overlay');
  2761.     
  2762.     overlay.addEventListener('click', function() {
  2763.         closeCustomModal();
  2764.     });
  2765.     
  2766.     // Fermer avec la touche Escape
  2767.     document.addEventListener('keydown', function(e) {
  2768.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  2769.             closeCustomModal();
  2770.         }
  2771.     });
  2772. });
  2774. // Fonctions utilitaires pour différents types de modals
  2775. function showAlert(title, message, type = 'info') {
  2776.     showCustomModal({
  2777.         title: title,
  2778.         message: message,
  2779.         type: type,
  2780.         showCancel: false,
  2781.         confirmText: 'OK'
  2782.     });
  2783. }
  2785. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  2786.     showCustomModal({
  2787.         title: title,
  2788.         message: message,
  2789.         type: type,
  2790.         showCancel: true,
  2791.         confirmText: 'Confirmer',
  2792.         cancelText: 'Annuler',
  2793.         onConfirm: onConfirm,
  2794.         onCancel: onCancel
  2795.     });
  2796. }
  2798. function proceedToCheckout() {
  2799.     // Vérifier qu'il y a des articles dans le panier
  2800.     if (Object.keys(cartData).length === 0) {
  2801.         showCustomModal({
  2802.             title: 'Panier vide',
  2803.             message: 'Votre panier est vide. Veuillez ajouter des articles avant de procéder à la commande.',
  2804.             type: 'warning',
  2805.             showCancel: false,
  2806.             confirmText: 'OK',
  2807.             onConfirm: function() {
  2808.                 // Rediriger vers la page de listing pour encourager l'ajout d'articles
  2809.                 window.location.href = '{{ path('ui_listing') }}';
  2810.             }
  2811.         });
  2812.         return;
  2813.     }
  2815.     // Rediriger vers la page de checkout
  2816.     window.location.href = '{{ path('ui_checkout') }}';
  2817. }
  2819. function changeQuantity(productId, delta) {
  2820.     const qtyInput = document.getElementById('qty-' + productId);
  2821.     if (!qtyInput) return;
  2822.     
  2823.     const currentQty = parseInt(qtyInput.value) || 0;
  2824.     const newQty = Math.max(0, currentQty + delta);
  2825.     
  2826.     updateQuantity(productId, newQty);
  2827. }
  2829. function handleDecreaseOrRemove(productId) {
  2830.     const qtyInput = document.getElementById('qty-' + productId);
  2831.     if (!qtyInput) return;
  2832.     
  2833.     const currentQty = parseInt(qtyInput.value) || 0;
  2834.     
  2835.     if (currentQty === 1) {
  2836.         // Si la quantité est 1, supprimer le produit
  2837.         removeFromCart(productId);
  2838.     } else {
  2839.         // Sinon, diminuer la quantité
  2840.         changeQuantity(productId, -1);
  2841.     }
  2842. }
  2844. // Initialiser les données du panier
  2845. let cartData = {}; // Stocker les données du panier côté client
  2847. {% for item in items %}
  2848.     {% set image = (item.image is defined and item.image) ? item.image : asset('ui/img/category/s-p1.jpg') %}
  2849. cartData[{{ item.id }}] = {
  2850.     id: {{ item.id }},
  2851.     name: '{{ item.name }}',
  2852.     price: {{ item.price }},
  2853.     qty: {{ item.qty }},
  2854.     image: '{{ image }}',
  2855.     slug: '{{ item.slug }}'
  2856. };
  2857. {% endfor %}
  2859. function updateQuantity(productId, newQty) {
  2860.     const item = cartData[productId];
  2861.     
  2862.     if (!item) {
  2863.         console.error('Produit non trouvé:', productId);
  2864.         return;
  2865.     }
  2866.     
  2867.     // Validation de la quantité
  2868.     newQty = Math.max(0, parseInt(newQty) || 0);
  2869.     
  2870.     if (newQty === 0) {
  2871.         removeFromCart(productId);
  2872.         return;
  2873.     }
  2874.     
  2875.     if (newQty > 99) {
  2876.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  2877.         return;
  2878.     }
  2879.     
  2880.     // Mettre à jour l'interface immédiatement (optimistic update)
  2881.     updateCartDisplay(productId, newQty);
  2882.     
  2883.     // Envoyer la requête au serveur
  2884.     fetch('{{ path(\"ui_cart_update\") }}', {
  2885.         method: 'POST',
  2886.         headers: { 
  2887.             'Content-Type': 'application/x-www-form-urlencoded',
  2888.             'X-Requested-With': 'XMLHttpRequest'
  2889.         },
  2890.         body: 'productId=' + productId + '&qty=' + newQty
  2891.     })
  2892.     .then(response => {
  2893.         console.log('🔍 Réponse HTTP:', response.status, response.statusText);
  2895.         // Vérifier si la réponse est OK avant de parser
  2896.         if (!response.ok) {
  2897.             throw new Error('Erreur HTTP ' + response.status + ': ' + response.statusText);
  2898.         }
  2900.         return response.json();
  2901.     })
  2902.     .then(data => {
  2903.         console.log('📦 Données reçues:', data);
  2905.         if (data.ok) {
  2906.             // Les données serveur confirment la mise à jour
  2907.             // Mettre à jour le sous-total avec les valeurs exactes du serveur
  2908.             if (data.subtotal !== undefined) {
  2909.                 updateSubtotalDisplay(data);
  2910.                 updateCartBadge(data.totalQty || 0);
  2911.             }
  2912.             console.log('✅ Panier mis à jour avec succès - Sous-total:', data.subtotal, 'HTG');
  2913.         } else {
  2914.             // En cas d'erreur, restaurer la valeur précédente
  2915.             const oldQty = item.qty;
  2916.             updateCartDisplay(productId, oldQty);
  2917.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  2918.         }
  2919.     })
  2920.     .catch(error => {
  2921.         console.error('❌ Erreur détaillée:', error);
  2922.         console.error('❌ Type d\\'erreur:', error.constructor.name);
  2923.         console.error('❌ Message d\\'erreur:', error.message);
  2925.         // Restaurer la valeur précédente en cas d'erreur
  2926.         const oldQty = item.qty;
  2927.         updateCartDisplay(productId, oldQty);
  2929.         // Afficher un message d'erreur plus détaillé
  2930.         let errorMessage = 'Une erreur de connexion est survenue. Veuillez réessayer.';
  2931.         if (error.message.includes('HTTP')) {
  2932.             errorMessage = 'Erreur du serveur: ' + error.message;
  2933.         } else if (error.message.includes('JSON')) {
  2934.             errorMessage = 'Erreur de traitement des données. Veuillez recharger la page.';
  2935.         }
  2937.         showAlert('Erreur de connexion', errorMessage, 'error');
  2938.     });
  2939. }
  2941. function updateCartDisplay(productId, qty) {
  2942.     const item = cartData[productId];
  2943.     if (!item) return;
  2944.     
  2945.     // Mettre à jour les données locales
  2946.     item.qty = qty;
  2947.     
  2948.     // Mettre à jour la quantité dans l'input
  2949.     const qtyInput = document.getElementById('qty-' + productId);
  2950.     if (qtyInput) {
  2951.         qtyInput.value = qty;
  2952.     }
  2953.     
  2954.     // Mettre à jour le bouton de diminution/suppression
  2955.     const decreaseBtn = document.getElementById('decrease-btn-' + productId);
  2956.     if (decreaseBtn) {
  2957.         if (qty === 1) {
  2958.             // Changer en bouton de suppression (poubelle)
  2959.             decreaseBtn.innerHTML = '<i class=\"lnr lnr-trash\"></i>';
  2960.             decreaseBtn.classList.add('quantity-btn-remove');
  2961.             decreaseBtn.classList.remove('quantity-btn-decrease');
  2962.         } else {
  2963.             // Changer en bouton de diminution (moins)
  2964.             decreaseBtn.innerHTML = '<span>−</span>';
  2965.             decreaseBtn.classList.add('quantity-btn-decrease');
  2966.             decreaseBtn.classList.remove('quantity-btn-remove');
  2967.         }
  2968.     }
  2969.     
  2970.     // Mettre à jour le total du produit
  2971.     const totalElement = document.getElementById('total-' + productId);
  2972.     if (totalElement) {
  2973.         const itemTotal = (item.price * qty);
  2974.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  2975.             minimumFractionDigits: 2,
  2976.             maximumFractionDigits: 2
  2977.         }) + ' HTG';
  2978.     }
  2979.     
  2980.     // Mettre à jour les totaux généraux
  2981.     updateCartSummary();
  2982. }
  2984. function updateCartTotals(data) {
  2985.     // Utiliser la fonction unifiée pour mettre à jour les totaux
  2986.     updateSubtotalDisplay(data);
  2987. }
  2989. function updateCartSummary() {
  2990.     // Calculer les totaux côté client depuis cartData
  2991.     let subtotal = 0;
  2992.     let totalItems = 0;
  2994.     Object.values(cartData).forEach(item => {
  2995.         subtotal += item.price * item.qty;
  2996.         totalItems += item.qty;
  2997.     });
  2999.     // Mettre à jour l'affichage du sous-total
  3000.     const subtotalElement = document.getElementById('cart-subtotal');
  3001.     if (subtotalElement) {
  3002.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  3003.             minimumFractionDigits: 2,
  3004.             maximumFractionDigits: 2
  3005.         }) + ' HTG';
  3006.     }
  3008.     // Mettre à jour l'affichage du total
  3009.     const totalElement = document.getElementById('cart-total');
  3010.     if (totalElement) {
  3011.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  3012.             minimumFractionDigits: 2,
  3013.             maximumFractionDigits: 2
  3014.         }) + ' HTG';
  3015.     }
  3017.     // Mettre à jour le compteur d'articles
  3018.     const itemCountElement = document.getElementById('cart-item-count');
  3019.     if (itemCountElement) {
  3020.         itemCountElement.textContent = totalItems;
  3021.     }
  3023.     // Mettre à jour le label du sous-total
  3024.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  3025.     if (subtotalLabel) {
  3026.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  3027.         subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  3028.     }
  3030.     // Mettre à jour l'état du bouton checkout
  3031.     updateCheckoutButtonState();
  3032. }
  3034. // Fonction pour mettre à jour l'état du bouton checkout
  3035. function updateCheckoutButtonState() {
  3036.     const checkoutBtn = document.querySelector('.checkout-btn');
  3037.     const isCartEmpty = Object.keys(cartData).length === 0;
  3039.     if (checkoutBtn) {
  3040.         if (isCartEmpty) {
  3041.             checkoutBtn.classList.add('disabled');
  3042.             checkoutBtn.title = 'Votre panier est vide';
  3043.         } else {
  3044.             checkoutBtn.classList.remove('disabled');
  3045.             checkoutBtn.title = 'Procéder à la commande';
  3046.         }
  3047.     }
  3048. }
  3050. // Fonction pour mettre à jour le badge du panier
  3051. function updateCartBadge(totalQty) {
  3052.     const cartBadge = document.querySelector('.cart-badge');
  3053.     if (cartBadge) {
  3054.         cartBadge.textContent = totalQty || 0;
  3055.         console.log('🛒 Badge du panier mis à jour:', totalQty);
  3057.         // Animation du badge si la quantité change
  3058.         if (totalQty > 0) {
  3059.             cartBadge.style.animation = 'none';
  3060.             cartBadge.offsetHeight; // Trigger reflow
  3061.             cartBadge.style.animation = 'bounce 0.5s ease';
  3062.         }
  3063.     }
  3064. }
  3066. // Fonction améliorée pour mettre à jour le sous-total avec débogage
  3067. function updateSubtotalDisplay(data = null) {
  3068.     // Si des données serveur sont fournies, les utiliser (priorité absolue)
  3069.     if (data && data.subtotal !== undefined) {
  3070.         console.log('🔄 Mise à jour sous-total avec données serveur:', data.subtotal, 'HTG');
  3072.         const subtotalElement = document.getElementById('cart-subtotal');
  3073.         const totalElement = document.getElementById('cart-total');
  3075.         const formattedSubtotal = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  3076.             minimumFractionDigits: 2,
  3077.             maximumFractionDigits: 2
  3078.         }) + ' HTG';
  3080.         if (subtotalElement) {
  3081.             subtotalElement.textContent = formattedSubtotal;
  3082.         }
  3084.         if (totalElement) {
  3085.             totalElement.textContent = formattedSubtotal;
  3086.         }
  3088.         // Mettre à jour le compteur d'articles
  3089.         const itemCountElement = document.getElementById('cart-item-count');
  3090.         if (itemCountElement && data.totalQty !== undefined) {
  3091.             const totalItems = data.totalQty;
  3092.             console.log('🔢 Mise à jour compteur articles:', totalItems, 'articles au total');
  3094.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  3095.             const subtotalLabel = document.getElementById('cart-subtotal-label');
  3096.             if (subtotalLabel) {
  3097.                 subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  3098.                 console.log('📊 Label mis à jour:', subtotalLabel.innerHTML);
  3099.             }
  3100.         }
  3102.         // Vérification de cohérence (debug)
  3103.         let clientSubtotal = 0;
  3104.         let clientTotalItems = 0;
  3105.         Object.values(cartData).forEach(item => {
  3106.             clientSubtotal += parseFloat(item.price) * parseInt(item.qty);
  3107.             clientTotalItems += parseInt(item.qty);
  3108.         });
  3110.         const serverSubtotal = parseFloat(data.subtotal);
  3111.         if (Math.abs(clientSubtotal - serverSubtotal) > 0.01) {
  3112.             console.warn('⚠️ Incohérence détectée:', {
  3113.                 client: clientSubtotal.toFixed(2),
  3114.                 server: serverSubtotal.toFixed(2),
  3115.                 difference: Math.abs(clientSubtotal - serverSubtotal).toFixed(2)
  3116.             });
  3117.         }
  3119.     } else {
  3120.         // Calcul de secours côté client (si pas de données serveur)
  3121.         console.log('🔄 Calcul sous-total côté client (secours)');
  3123.         let subtotal = 0;
  3124.         let totalItems = 0;
  3126.         Object.values(cartData).forEach(item => {
  3127.             subtotal += parseFloat(item.price) * parseInt(item.qty);
  3128.             totalItems += parseInt(item.qty);
  3129.         });
  3131.         const formattedSubtotal = subtotal.toLocaleString('fr-FR', {
  3132.             minimumFractionDigits: 2,
  3133.             maximumFractionDigits: 2
  3134.         }) + ' HTG';
  3136.         // Mettre à jour l'affichage du sous-total
  3137.         const subtotalElement = document.getElementById('cart-subtotal');
  3138.         if (subtotalElement) {
  3139.             subtotalElement.textContent = formattedSubtotal;
  3140.         }
  3142.         const totalElement = document.getElementById('cart-total');
  3143.         if (totalElement) {
  3144.             totalElement.textContent = formattedSubtotal;
  3145.         }
  3147.         // Mettre à jour le label du sous-total
  3148.         const subtotalLabel = document.getElementById('cart-subtotal-label');
  3149.         if (subtotalLabel) {
  3150.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  3151.             subtotalLabel.innerHTML = 'Sous-total (<span id=\"cart-item-count\">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  3152.         }
  3153.     }
  3154. }
  3156. function removeFromCart(productId) {
  3157.     const item = cartData[productId];
  3158.     const itemName = item ? item.name : 'cet article';
  3159.     
  3160.     showConfirm(
  3161.         'Supprimer l\\'article',
  3162.         `Êtes-vous sûr de vouloir supprimer \"\${itemName}\" de votre panier ?`,
  3163.         function() {
  3164.             // Mettre à jour l'interface immédiatement
  3165.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  3166.             if (row) {
  3167.                 row.style.opacity = '0.5';
  3168.                 row.style.pointerEvents = 'none';
  3169.             }
  3170.             
  3171.             performRemoveFromCart(productId, row);
  3172.         },
  3173.         null,
  3174.         'warning'
  3175.     );
  3176. }
  3178. function performRemoveFromCart(productId, row) {
  3179.     
  3180.     fetch('{{ path(\"ui_cart_remove\") }}', {
  3181.         method: 'POST',
  3182.         headers: { 
  3183.             'Content-Type': 'application/x-www-form-urlencoded',
  3184.             'X-Requested-With': 'XMLHttpRequest'
  3185.         },
  3186.         body: 'productId=' + productId
  3187.     })
  3188.     .then(response => response.json())
  3189.     .then(data => {
  3190.         if (data.ok) {
  3191.             // Supprimer des données locales
  3192.             delete cartData[productId];
  3193.             
  3194.             // Supprimer la ligne du DOM
  3195.             const row = document.querySelector(`tr:has(#qty-\${productId})`);
  3196.             if (row) {
  3197.                 row.remove();
  3198.             }
  3199.             
  3200.             // Mettre à jour les totaux
  3201.             updateCartTotals(data);
  3202.             
  3203.             // Mettre à jour le résumé du panier
  3204.             updateCartSummary();
  3205.             
  3206.             // Afficher un message de succès
  3207.             showAlert('Article supprimé', 'L\\'article a été supprimé de votre panier avec succès.', 'success');
  3208.             
  3209.             // Vérifier si le panier est vide
  3210.             if (Object.keys(cartData).length === 0) {
  3211.                 setTimeout(function() {
  3212.                     location.reload();
  3213.                 }, 1500);
  3214.             }
  3215.         } else {
  3216.             // Restaurer l'affichage en cas d'erreur
  3217.             if (row) {
  3218.                 row.style.opacity = '1';
  3219.                 row.style.pointerEvents = 'auto';
  3220.             }
  3221.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\\'article.', 'error');
  3222.         }
  3223.     })
  3224.     .catch(error => {
  3225.         console.error('Erreur:', error);
  3226.         // Restaurer l'affichage en cas d'erreur réseau
  3227.         if (row) {
  3228.             row.style.opacity = '1';
  3229.             row.style.pointerEvents = 'auto';
  3230.         }
  3231.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  3232.     });
  3233. }
  3235. // Script pour forcer l'application des styles des boutons de quantité et initialiser l'état du bouton checkout
  3236. document.addEventListener('DOMContentLoaded', function() {
  3237.     // Initialiser l'état du bouton checkout
  3238.     updateCheckoutButtonState();
  3240.     const quantityControls = document.querySelectorAll('.quantity-controls');
  3241.     quantityControls.forEach(function(control) {
  3242.         if (control) {
  3243.             // Forcer les styles sur le conteneur
  3244.             control.style.display = 'flex';
  3245.             control.style.alignItems = 'center';
  3246.             control.style.justifyContent = 'center';
  3247.             control.style.border = '1px solid #ddd';
  3248.             control.style.borderRadius = '4px';
  3249.             control.style.width = '120px';
  3250.             control.style.height = '40px';
  3251.             control.style.position = 'relative';
  3252.             control.style.background = 'white';
  3253.             control.style.overflow = 'hidden';
  3255.             // Forcer les styles sur les boutons
  3256.             const buttons = control.querySelectorAll('.quantity-btn');
  3257.             buttons.forEach(function(btn, index) {
  3258.                 btn.style.background = '#f8f8f8';
  3259.                 btn.style.border = 'none';
  3260.                 btn.style.width = '35px';
  3261.                 btn.style.height = '100%';
  3262.                 btn.style.cursor = 'pointer';
  3263.                 btn.style.fontSize = '18px';
  3264.                 btn.style.fontWeight = '600';
  3265.                 btn.style.color = '#333';
  3266.                 btn.style.display = 'flex';
  3267.                 btn.style.alignItems = 'center';
  3268.                 btn.style.justifyContent = 'center';
  3269.                 btn.style.padding = '0';
  3270.                 btn.style.margin = '0';
  3271.                 btn.style.lineHeight = '1';
  3272.                 btn.style.position = 'relative';
  3273.                 btn.style.zIndex = '1';
  3275.                 // Ajouter les bordures entre les boutons
  3276.                 if (index === 0) {
  3277.                     btn.style.borderRight = '1px solid #ddd';
  3278.                 } else if (index === buttons.length - 1) {
  3279.                     btn.style.borderLeft = '1px solid #ddd';
  3280.                 }
  3281.             });
  3283.             // Forcer les styles sur l'input
  3284.             const input = control.querySelector('.quantity-input');
  3285.             if (input) {
  3286.                 input.style.border = 'none';
  3287.                 input.style.width = '50px';
  3288.                 input.style.height = '100%';
  3289.                 input.style.textAlign = 'center';
  3290.                 input.style.fontSize = '15px';
  3291.                 input.style.fontWeight = '500';
  3292.                 input.style.padding = '0';
  3293.                 input.style.margin = '0';
  3294.                 input.style.background = 'white';
  3295.                 input.style.color = '#333';
  3296.                 input.style.outline = 'none';
  3297.                 input.style.boxShadow = 'none';
  3298.                 input.style.position = 'relative';
  3299.                 input.style.zIndex = '1';
  3300.             }
  3301.         }
  3302.     });
  3303. });
  3305. </script>
  3306. {% endblock %}", "home/cart.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/cart.html.twig");
  3307.     }
  3308. }