templates/front/command/basket.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block meta %}
  4.     <title>Mon panier</title>
  5.     <meta name="description" content="{{ products|length }} produits pour le moment">
  6. {% endblock %}
  8. {% block style %}
  9.     <style>
  10.         .indicationSupp:hover {
  11.             
  12.         }
  13.         .inputQtyOpt {
  14.             width: 63px;
  15.             height: 39px;
  16.             padding: 0 5px;
  17.             text-align: center;
  18.             background-color: transparent;
  19.             border: 1px solid #efefef;
  20.         }
  21.         .imgOptModal {
  22.             height:50px;
  23.             border-radius:2px
  24.         }
  25.         .modifProdSess {
  26.             color: white !important;
  27.             display: flex;
  28.             align-items: center;
  29.         }
  30.         {# css loading... #}
  31.         #MyLoading {
  32.             visibility: hidden;
  33.         }
  34.         #MyLoading.MyShow {
  35.             visibility: visible;
  36.         }
  37.         @media screen and (max-width: 576px) {
  38.             .modifProdSess {
  39.                 padding: 8px 7px;
  40.                 font-size: 7px;
  41.             }
  42.             .indicationSupp {
  43.                 padding: 10px 15px;
  44.             }
  45.         }
  46.         {# modadl option #}
  47.         @media screen and (min-width: 800px) {    
  48.             .myWidth {
  49.                 max-width: 800px;
  50.             }
  51.         }
  52.         {# choice option #}
  53.         .labold {
  54.             font-weight: 500;
  55.             font-size: 18px;
  56.         }
  57.         .mt9 {
  58.             margin-top: 9px;
  59.         }
  60.         .myPadding {
  61.             padding: 8px 0px;
  62.         }
  63.     </style>
  64. {% endblock %}
  66. {% block body %}
  67.     <!-- Modal -->
  69.     {# Modal modif groupe d'option #}
  71.     <div class="modal fade" id="modalOptionGP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  72.         <div class="modal-dialog myWidth" role="document">
  73.             <div class="modal-content">
  74.                 {# <form action=""> #}
  75.                     <div class="modal-header">
  76.                         <h5 class="modal-title" id="">Modifier les groupes d'options</h5>
  77.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  78.                             <span aria-hidden="true">&times;</span>
  79.                         </button>
  80.                     </div>
  81.                     <div class="modal-body">
  82.                         <div class="row" id="valeurgropOption">
  83.                             {# <input type="hidden" id="id_optionmodal">
  84.                             <div class="col-lg-6 col-12" >
  85.                                 <div id="optionsimage">
  86.                                     {# <img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ product.photos.toArray()[0].url) }}" alt=""> #}
  87.                                 {# </div>
  88.                             </div>  #}
  89.                             
  90.                             {# <div class="col-lg-6 col-12"  style="display: block"> #}
  91.                                 {# <div class="row">
  92.                                     <div class="col-8">
  93.                                         <label for="" class="labold">Couleur</label>
  94.                                         <div class="custom-checkbox myPadding" style="position: relative">
  95.                                             <input type="checkbox" name="" id="vert" class="custom-control-input">
  96.                                             <label for="vert" class="custom-control-label" style="margin-left: 25px;">Vert (3€)</label>
  97.                                         </div>
  98.                                         <div class="custom-checkbox myPadding" style="position: relative">
  99.                                             <input type="checkbox" name="" id="rouge" class="custom-control-input">
  100.                                             <label for="rouge" class="custom-control-label" style="margin-left: 25px;">Rouge (4€)</label>
  101.                                         </div>
  102.                                         <div class="custom-checkbox myPadding" style="position: relative">
  103.                                             <input type="checkbox" name="" id="bleu" class="custom-control-input">
  104.                                             <label for="bleu" class="custom-control-label" style="margin-left: 25px;">Bleu (6€)</label>
  105.                                         </div>
  106.                                     </div>
  107.                                     <div class="col-4">
  108.                                         <label for="qt1" class="mt9">Quantité</label>
  109.                                         <input type="number" name="" min="0" id="" class="form-control">
  110.                                         <input type="number" name="" min="0" id="" class="form-control">
  111.                                         <input type="number" name="" min="0" id="" class="form-control">
  112.                                     </div>
  113.                                 </div><br>
  114.                                 <div class="row">
  115.                                     <div class="col-8">
  116.                                         <label class="labold" for="">Taille</label>
  117.                                         <select name="" id="" class="form-control wide" style="display: block !important;">    
  118.                                             <option value="">M (6€)</option>
  119.                                             <option value="">L (8€)</option>
  120.                                             <option value="">XL (10€)</option>
  121.                                         </select>    
  122.                                     </div>
  123.                                     <div class="col-4">
  124.                                         <label for="qt1" class="mt9">Quantité</label>
  125.                                         <input type="number" name="" min="0" id="" class="form-control">
  126.                                     </div>
  127.                                 </div><br>
  128.                                 <div class="row">
  129.                                     <div class="col-8">
  130.                                         <label class="labold" for="">Type tissu</label>
  131.                                         <select name="" id="" class="form-control wide" style="display: block !important;">
  132.                                             <option value="">Semi-cotton (2€)</option>
  133.                                             <option value="">Cotton (4€)</option>
  134.                                             <option value="">t-shirt rétréci (5€)</option>
  135.                                         </select>
  136.                                     </div>
  137.                                     <div class="col-4">
  138.                                         <label for="qt1" class="mt9">Quantité</label>
  139.                                         <input type="number" name="" min="0" id="" class="form-control">
  140.                                     </div>
  141.                                 </div><br> #}
  142.                             {# </div> #}
  144.                         </div>
  145.                     </div>
  146.                     {# {% endfor %}
  147.                     {% endif %} #}
  148.                     <div class="modal-footer">
  149.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  150.                         <button type="submit" class="btn btn-primary" id="" onclick="validechoiModalGroupoption()">Ok</button>
  151.                     </div>
  152.                 {# </form> #}
  153.             </div>
  154.         </div>
  155.     </div>
  157.     {# Fin Modal modif groupe d'option #}
  159.     {# Modal faire part #}
  161.     <div class="modal fade" id="modifAchatFairePart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  162.     {% set idSessOpt = app.session.get('idProduit') %}
  163.     
  164.         <div class="modal-dialog" role="document" style="max-width: 700px">
  165.             <div class="modal-content">
  166.                 <form action="{{path('update_option')}}" method="POST">
  167.                     <div class="modal-header">
  168.                         <h5 class="modal-title" id="exampleModalLongTitle">Modifier les options</h5>
  169.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  170.                             <span aria-hidden="true">&times;</span>
  171.                         </button>
  172.                     </div>
  173.                     <div class="modal-body">
  174.                         {# <span class="font-weight-bold">Options disponibles :</span><span id="MyLoadingFP"> Chargement en cours...</span> #}
  175.                         <div class="containerOptionFP pl-3 row">
  176.                                 
  177.                             <div class="col-lg-5 col-12">
  178.                                 <input type="hidden" id="id_produit">
  179.                                 <input type="hidden" id="price_produit">
  180.                                 <input type="hidden" id="qte_produit">
  181.                                 <div id="tousOptions"></div>
  182.                             </div>
  184.                             <div class="col-lg-7 col-12">
  185.                                <div class="m-info">Si vous souhaitez ajouter une option différente de celle d'avant, cochez votre choix et modifiez-le si nécessaire</div>
  186.                                <div class="forme_options" style="display: none !important">
  187.                                 <form action="">
  188.                                     <input type="hidden" id="id_optionFP">
  189.                                     <input type="hidden" id="name_optionFP">
  190.                                     <input type="hidden" id="image_optionFP">
  191.                                     <div class="optionFP_color">
  192.                                         <label for="optionFP_color">Couleur</label>
  193.                                         <select name="" id="optionFP_color" class="wide form-control">
  194.                                         </select>
  195.                                     </div>
  196.                                     <div class="optionFP_format">
  197.                                         <label for="optionFP_format">Format</label>
  198.                                         <select name="" id="optionFP_format" class="wide form-control">
  199.                                         </select>
  200.                                     </div>
  201.                                     <div class="optionFP_finition">
  202.                                         <label for="optionFP_finition">Finition</label>
  203.                                         <select name="" id="optionFP_finition" class="wide form-control">    
  204.                                         </select>
  205.                                     </div>
  206.                                     <div class="optionFP_papier">
  207.                                         <label for="optionFP_papier">Papier</label>
  208.                                         <select name="" id="optionFP_papier" class="wide form-control">
  209.                                         </select>
  210.                                     </div>
  211.                                     <div class="optionFP_etiquette">
  212.                                         <label for="optionFP_etiquette">Etiquette</label>
  213.                                         <select name="" id="optionFP_etiquette" class="wide form-control">
  214.                                         </select>
  215.                                     </div>
  216.                                     <div class="optionFP_ruban">
  217.                                         <label for="optionFP_ruban">Ruban</label>
  218.                                         <select name="" id="optionFP_ruban" class="wide form-control">
  219.                                         </select>
  220.                                     </div>
  221.                                     <div class="optionFP_quantite">
  222.                                         <label for="optionFP_quantite">Quantite</label>
  223.                                         <select name="" id="optionFP_quantite" class="wide form-control">
  224.                                         </select>
  225.                                     </div>
  226.                                     <div class="validerModifFP mt-3">
  227.                                         <button class="btn btn-secondary" type="button" onclick="Anulleroption()">Annuler</button>
  228.                                         <button class="btn btn-primary" type="button" onclick="validechoioption()">Valider</button>
  229.                                     </div>
  230.                                 </form>
  231.                             </div>
  232.                             </div>
  233.                         </div>
  234.                         {# {% endset %} #}
  235.                     <!-- form modifsession prod -->
  236.                     </div>
  237.                     <div class="modal-footer">
  238.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  239.                         <button type="submit" class="btn btn-primary" onclick="validechoiModaloption()">Modifier</button>
  240.                     </div>
  241.                 </form>
  242.             </div>
  243.         </div>
  244.     </div>
  246.     {# Fin modal faire Part #}    
  248.     <div class="modal fade" id="modifAchatProd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  249.     {% set idSessOpt = app.session.get('idProduit') %}
  250.     
  251.         <div class="modal-dialog" role="document">
  252.             <div class="modal-content">
  253.                 <form action="{{path('update_option')}}" method="POST">
  254.                     <div class="modal-header">
  255.                         <h5 class="modal-title" id="exampleModalLongTitle">Modifier les options</h5>
  256.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  257.                             <span aria-hidden="true">&times;</span>
  258.                         </button>
  259.                     </div>
  260.                     <div class="modal-body">
  261.                     <!-- form modifsession prod -->
  262.                         {# <div class="form-group">
  263.                             <label for="quantity_product">Quantité</label><br>
  264.                             <div class="quantity buttons_added">
  265.                                 <input type="button" value="-" class="minus">
  266.                                 <input id="quantity_product" type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="" inputmode="">
  267.                                 <input type="button" value="+" class="plus">
  268.                             </div>
  269.                         </div> #}
  270.                         <span class="font-weight-bold">Options disponibles :</span><span id="MyLoading"> Chargement en cours...</span>
  271.                         <div class="containerOption pl-3 row">
  273.                             <div class="oneOption col-12 row">
  274.                                 <div class="col-8">
  275.                                     <div class="row">
  276.                                         <div class="col-4">
  277.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  278.                                         </div>
  279.                                         <div class="col-4">
  280.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  281.                                         </div>
  282.                                     </div>
  283.                                     <div class="custom-checkbox" style="position: relative">
  284.                                         <input type="checkbox" data-price="" name="" value="" class="custom-control-input" id="checkbo">
  285.                                         <label class="custom-control-label" for="checkbo">
  286.                                             <strong style="margin-left: 31px;">10 €</strong>
  287.                                             <span>-
  288.                                             Name option</span>
  289.                                             </label>
  290.                                     </div>
  291.                                 </div>
  292.                                 <div class="col-4">
  293.                                     <div style="height:36px"></div>
  294.                                     <input type="number" name="" id="" class="inputQtyOpt" min="1" value="1"/>
  295.                                 </div>
  296.                             </div>
  297.                             <div class="oneOption col-12 row">
  298.                                 <div class="col-8">
  299.                                     <div class="row">
  300.                                         <div class="col-4">
  301.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  302.                                         </div>
  303.                                         <div class="col-4">
  304.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  305.                                         </div>
  306.                                     </div>
  307.                                     <div class="custom-checkbox" style="position: relative">
  308.                                         <input type="checkbox" data-price="" name="" value="" class="custom-control-input" id="checkbo1">
  309.                                         <label class="custom-control-label" for="checkbo1">
  310.                                             <strong style="margin-left: 31px;">10 €</strong>
  311.                                             -
  312.                                             Name option</label>
  313.                                     </div>
  314.                                 </div>
  315.                                 <div class="col-4">
  316.                                     <div style="height:36px"></div>
  317.                                     <input type="number" name="" id="" class="inputQtyOpt" min="1" value="1"/>
  318.                                 </div>
  319.                             </div>
  320.                             <div class="oneOption col-12 row">
  321.                                 <div class="col-8">
  322.                                     <div class="row">
  323.                                         <div class="col-4">
  324.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  325.                                         </div>
  326.                                         <div class="col-4">
  327.                                             <img src="/upload/produits/vernis-a-ongles-laques-fuchsia-fiesta-1-62a2e00ab1b53.jpeg" style="height:50px;border-radius:2px">
  328.                                         </div>
  329.                                     </div>
  330.                                     <div class="custom-checkbox" style="position: relative">
  331.                                         <input type="checkbox" data-price="" name="" value="" class="custom-control-input" id="checkbo2">
  332.                                         <label class="custom-control-label" for="checkbo2">
  333.                                             <strong style="margin-left: 31px;">10 €</strong>
  334.                                             -
  335.                                             Name option</label>
  336.                                     </div>
  337.                                 </div>
  338.                                 <div class="col-4">
  339.                                     <div style="height:36px"></div>
  340.                                     <input type="number" name="" id="" class="inputQtyOpt" min="1" value="1"/>
  341.                                 </div>
  342.                             </div>
  343.                         </div>
  344.                         {# {% endset %} #}
  345.                     <!-- form modifsession prod -->
  346.                     </div>
  347.                     <div class="modal-footer">
  348.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  349.                         <button type="submit" class="btn btn-primary">Modifier</button>
  350.                     </div>
  351.                 {# {% endfor %}
  352.             {% endif %} #}
  353.                 </form>
  354.             </div>
  355.         </div>
  356.     </div>
  357.     
  358.     <!-- Modal -->
  360.     <div class="content mt-5 mb-5" style="margin-bottom:100px!important">
  361.         <div class="container">
  362.             <div class="row mb-5">
  363.                 <div class="tab-pane fade active show" id="allguest" role="tabpanel" aria-labelledby="allguest-tab" style="width:100%">
  364.                     <div class="card-body row justify-content-between">
  365.                         <h3>Mon panier ({{ products|length }}
  366.                             produit
  367.                             {% if products|length > 1 %}s
  368.                             {% endif %})</h3>
  369.                         <a href="{{path('pdf_generate')}} " class="btn btn-primary float-right">Télécharger mon devis</a>
  370.                     </div>
  371.                     <div class="table-responsive" style="width:100%">
  372.                         <table class="table mt-4">
  373.                             <thead>
  374.                                 <tr>
  375.                                     <th class="wedding-budget-event">Designation</th>
  376.                                     <th class="wedding-budget-estimate">Aperçu</th>
  377.                                     <th class="wedding-budget-estimate">Prix à l'unité</th>
  378.                                     <th class="wedding-budget-actual">Quantité</th>
  379.                                     <th class="wedding-budget-paid">Total produit</th>
  380.                                     <th class="wedding-budget-paid"></th>
  381.                                 </tr>
  382.                             </thead>
  383.                             <tbody>
  384.                                 {% if pack %}
  385.                                     <tr>
  386.                                         <td>{{ pack.name }}</td>
  387.                                         <td><img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ pack.image }}" style="height:50px;border-radius:2px"></td>
  388.                                         <td>
  389.                                             <span class="total-amount">{{ pack.price|number_format(2, '.') }}€</span>
  390.                                         </td>
  391.                                         <td>1</td>
  392.                                         <td>
  393.                                             <span class="total-amount">{{ pack.price|number_format(2, '.') }}€</span>
  394.                                         </td>
  395.                                         <td class="paid-total">
  396.                                             <a href="{{ path('front_my_basket_remove_pack', {'id': pack.id}) }}" class="btn btn-rounded btn-default">Supprimer du panier</a>
  397.                                         </td>
  398.                                     </tr>
  399.                                 {% endif %}
  400.                                 {% set TotalPriceProduct = 0 %}
  401.                                 {% set totOpt = 0 %}
  402.                                 {% set totGpOpt = 0 %}
  403.                                 {% for product in products %}
  404.                                     {% set optionObjectByProd = filter_service.getProductOptionByProduit(product.product) %}
  405.                                     
  406.                                     {# Product added #}
  407.                                         <tr class="border-bottom" style="border-top: 1px solid #dee2e6 !important;"> 
  408.                                         <td>{{ product.product.name }}
  409.                                             {% set isClothing = null %}
  410.                                             {% for subcategory in product.product.subCategories %}
  411.                                                 {% if subcategory.isClothing %}
  412.                                                     {% set isClothing = true %}
  413.                                                 {% endif %}
  414.                                             {% endfor %}
  415.                                             {% if isClothing %}
  416.                                                 <br><strong>Taille :
  417.                                                     {{ product.size }}</strong>
  418.                                             {% endif %}
  420.                                             {% set isColor = null %}
  421.                                             {% for subcategory in product.product.subCategories %}
  422.                                             
  423.                                                 {% if subcategory.isColor %}
  424.                                                     {% set isColor = true %}
  425.                                                 {% endif %}
  426.                                             {% endfor %}
  427.                                             {% if isColor %}
  428.                                                 <br><strong>Couleur :
  429.                                                     {{ product.color }}</strong>
  430.                                             {% endif %}
  431.                                         </td>
  432.                                         <td>
  433.                                             {% if product.product.photos.first != false %}
  434.                                                 <img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ product.product.photos.first.url }}" style="height:50px;border-radius:2px">
  435.                                             {% else %}
  436.                                                 <img src="{{ asset('images/vecteezy_vector-gear-logo-design-with-multi-colors-range_6172776.jpg') }}" style="height:50px;border-radius:2px">
  437.                                             {% endif %}
  438.                                         </td>
  439.                                         {% if product.promo %}
  440.                                             {% set ProductPrice = product.product.price - product.promo %}
  441.                                         {% else %}
  442.                                             {% set ProductPrice = product.product.price %}
  443.                                         {% endif %}
  444.                                         <td class="estimate-total">
  445.                                             <span class="total-amount">
  446.                                                 {% if product.promo %}
  447.                                                     <small>
  448.                                                         <del>{{ product.product.price|number_format(2, '.') }}€</del>
  449.                                                     </small>
  450.                                                     <strong>{{ ProductPrice|number_format(2, '.') }}€</strong>
  451.                                                 {% else %}
  452.                                                     {{ ProductPrice|number_format(2, '.') }}€
  453.                                                 {% endif %}
  454.                                             </span><br>
  455.                                             {% if product.promo %}(code promo -{{ product.promo }}€)
  456.                                             {% endif %}
  457.                                         </td>
  458.                                         {# Quantity product #}
  459.                                         <td class="actual-total">{{ product.quantity }}</td>
  460.                                         {% set TotalWithQuantity = product.quantity * ProductPrice %}
  461.                                         {% set TotalPriceProduct = TotalPriceProduct + TotalWithQuantity %}
  462.                                         <td class="paid-total">
  463.                                             <span class="total-amount">{{ TotalWithQuantity|number_format(2, '.') }}€</span>
  464.                                         </td>
  465.                                         <td class="paid-total d-flex justify-content-around" style="column-gap: 5px;">
  466.                                             <a href="{{ path('front_my_basket_remove_product', {'id': product.product.id}) }}" class="btn btn-rounded btn-danger indicationSupp" title="Supprimer du panier" style="font-size: 17px;display: flex;align-items: center;"><i class="fa fa-trash" aria-hidden="true"></i></a>
  467.                                             {# Supprimer du panier #}
  468.                                             {# onclick="getOptionByIdProd({{product.product.id}})" data-id="{{product.product.id}}" #}
  469.                                             <!-- Button trigger modal -->
  470.                                         {% for subcategory in product.product.subCategories %}
  471.                                             {% if subcategory.subCategorySlug != "faire-part" %}
  472.                                                 <a onclick="getGroupOption({{product.product.id}})" data-id="{{product.product.id}}" class="btn btn-rounded btn-default modifProdSess" data-toggle="modal" data-target="#modalOptionGP">
  473.                                                     Ajouter des options
  474.                                                 </a>
  475.                                             {% else %}
  476.                                                 <a onclick="ajouterOptions('{{product.product.id}}','{{product.quantity}}','{{ProductPrice}}','{{ app.request.getSchemeAndHttpHost() }}');" id="ajoutOption" class="btn btn-rounded btn-default modifProdSess" data-toggle="modal">
  477.                                                     Ajouter des options
  478.                                                 </a>
  479.                                                 {# data-target="#modifAchatFairePart" #}
  480.                                             {% endif %}
  481.                                         {% endfor %}
  483.                                         </td>
  484.                                     </tr>
  485.                                     {# Fin Product added #}
  487.                                     {# Option #}
  489.                                     {% for subCategories in product.product.subCategories.snapshot %}
  490.                                         {% if subCategories.subCategorySlug != "faire-part" %}
  491.                                         
  492.                                             {% for key,option in product.options %}
  493.                                                 {% set optionObject = filter_service.getProductOption(key) %}
  494.                                                 {# {% set TotalPriceProduct = TotalPriceProduct + optionObject.price %} #}
  495.                                                 <tr class="" style="background:#fff">
  496.                                                     <td class="pl-4">
  497.                                                         <strong>Option :</strong>
  498.                                                         {{ optionObject.name }}</td>
  499.                                                         {# {% if isClothing %}
  500.                                                             <br><strong>Taille :
  501.                                                                 {{ product.size }}</strong>
  502.                                                         {% endif %} #}
  503.                                                     <td>
  504.                                                     {# {% if optionObject.image1 %}
  505.                                                         <img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ optionObject.image1 }}" style="height:50px;border-radius:2px">
  506.                                                     {% endif %} #}
  507.                                                     </td>
  508.                                                     <td class="estimate-total">
  509.                                                         {# <span class="total-amount">{{ optionObject.price|number_format(2, '.') }}€</span> #}
  510.                                                         <span class="total-amount"></span>
  511.                                                     </td>
  512.                                                     {# qty option #}
  513.                                                     <td></td>
  514.                                                     {# {% set totalOpt = null %}
  515.                                                     {% for key,qty in product.qtyOption %}
  516.                                                         {% if optionObject.id == key %}
  517.                                                             <td class="actual-total">{{qty}}</td>
  518.                                                             {% set totqtyOpt = optionObject.price * qty %}
  519.                                                             <td class="paid-total">
  520.                                                                 <span class="total-amount">{{ totqtyOpt|number_format(2, '.') }}€</span>
  521.                                                             </td>
  522.                                                             {% set totOpt = totOpt + totqtyOpt %}
  523.                                                         {% endif %} 
  524.                                                     {% endfor %} #}
  525.                                                     {# qty option #}
  526.                                                     <td class="paid-total"></td>
  527.                                                 </tr>
  528.                                                 
  529.                                                 {% for valOption in option %}
  530.                                                     <tr>
  531.                                                         <td class="pl-5">{{ valOption["valeur"] }}</td>
  532.                                                         <td></td>
  533.                                                         <td class="estimate-total"><span class="total-amount">{{ valOption["prix"] }} €</span></td>
  534.                                                         <td>{{ valOption["qte"] ? valOption["qte"] : 1 }}</td>
  535.                                                         {# <pre>
  536.                                                             {{ dump(valOption["qte"]) }}
  537.                                                         </pre> #}
  538.                                                         {% set totval = valOption["prix"] * (valOption["qte"] ? valOption["qte"] : 1)  %}
  539.                                                         <td class="estimate-total"><span class="total-amount">{{ totval }} €</spna></td>
  540.                                                         {% set totGpOpt = totGpOpt + totval %}
  541.                                                     </tr>
  542.                                                 {% endfor %}
  543.                                             {% endfor %}
  544.                                         {% else %}
  545.                                             {% if product.options_farep is defined %}
  546.                                                 {% for option in product.options_farep %}
  547.                                             
  548.                                                     <tr style="background:#fff">
  549.                                                         <td class="pl-4">
  550.                                                             <strong>Option :</strong>
  551.                                                             {{ option.nomoption }}
  552.                                                             
  553.                                                                 {# <br><strong>Format :
  554.                                                                     {{ option.form }}</strong>
  555.                                                                 <br><strong>Finition :
  556.                                                                     {{ option.finition }}</strong>
  557.                                                                 <br><strong>Papier :
  558.                                                                     {{ option.papier}}</strong>
  559.                                                                 <br><strong>Etiquette :
  560.                                                                     {{ option.etiquette}} #}
  561.                                                                     </strong></td>
  562.                                                             
  563.                                                         <td>
  564.                                                         {% if option.imageoption %}
  565.                                                             <img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ option.imageoption }}" style="height:50px;border-radius:2px">
  566.                                                         {% endif %}
  567.                                                         </td>
  568.                                                         <td class="estimate-total">
  569.                                                             <span class="total-amount">{{ option.price|number_format(2, '.') }}€</span>
  570.                                                         </td> 
  571.                                                         {# qty option #}
  572.                                                         {# {% set totalOpt = null %}#}
  573.                                                         
  574.                                                                 <td class="actual-total">{{option.quantite}}</td>
  575.                                                                 {% set totqtyOpt = option.price * option.quantite %}
  576.                                                                 <td class="paid-total">
  577.                                                                     <span class="total-amount">{{ totqtyOpt|number_format(2, '.') }}€</span>
  578.                                                                 </td>
  579.                                                                 {% set totOpt = totOpt + totqtyOpt %}
  580.                                                             
  581.                                                         <td class="paid-total"></td>
  582.                                                     </tr>
  583.                                                 {% endfor %}
  584.                                             {% endif %}
  585.                                             
  586.                                         {% endif %}     
  587.                                     {% endfor %}
  588.                                     {# Fin Option #}
  589.                                 {% endfor %}
  591.                                 {% if pack or products is not empty %}
  592.                                     <tr>
  593.                                         <td>TOTAL :</td>
  594.                                         <td></td>
  595.                                         <td></td>
  596.                                         <td></td>
  597.                                         {% if pack %}
  598.                                             {% set TotalPriceProduct = TotalPriceProduct + pack.price  %}
  599.                                         {% endif %}
  600.                                         {% set totOptions = totOpt + totGpOpt %}
  601.                                         <td>{{ (TotalPriceProduct + totOptions)|number_format(2, '.') }}€</td>
  602.                                     </tr>
  603.                                 {% endif %}
  604.                                 {% if not pack and products is empty %}
  605.                                     <tr>
  606.                                         <td>Aucun produit ajouté au panier</td>
  607.                                     </tr>
  608.                                 {% endif %}
  609.                             </tbody>
  610.                         </table>
  611.                     </div>
  612.                     <div class="card-footer" style="height:70px">
  613.                         {% if products|length > 0 or pack is not null %}
  614.                             {% if is_granted('ROLE_ENTERPRISE') == false %}
  615.                                 <div class="float-left">
  616.                                     {{ form_start(form, {'attr': {'class': 'form-inline'}}) }}
  617.                                     <div class="form-group">
  618.                                         {{ form_widget(form.codePromo) }}
  619.                                     </div>
  620.                                     <button type="submit" class="btn btn-default ml-3">Valider</button>
  621.                                     {{ form_end(form) }}
  622.                                     {% if isMessagePromo is defined and isMessagePromo %}
  623.                                         <span style="color:green">Code promo valide !</span>
  624.                                     {% endif %}
  625.                                 </div>
  626.                                 <div class="float-right">
  627.                                     <a href="{{ path('front_command_livraison') }}" class="btn btn-primary">Commander</a>
  628.                                 </div>
  629.                             {% endif %}
  630.                         {% endif %}
  631.                     </div>
  632.                 </div>
  633.             </div>
  634.         </div>
  635.     </div>
  636. {% endblock %}
  638. {% block javascript %}
  639.     <script>
  640.         function wcqib_refresh_quantity_increments() {
  641.             jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function (a, b) {
  642.                 var c = jQuery(b);
  643.                 c.addClass("buttons_added"),
  644.                     c.children().first().before('<input type="button" value="-" class="minus" />'),
  645.                     c.children().last().after('<input type="button" value="+" class="plus" />')
  646.             })
  647.         }
  648.         String.prototype.getDecimals || (String.prototype.getDecimals = function () {
  649.             var a = this,
  650.                 b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
  651.             return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? + b[2] : 0)) : 0
  652.         }),
  653.             jQuery(document).ready(function () {
  654.                 wcqib_refresh_quantity_increments()
  655.             }),
  656.             jQuery(document).on("updated_wc_div", function () {
  657.                 wcqib_refresh_quantity_increments()
  658.             }),
  659.             jQuery(document).on("click", ".plus, .minus", function () {
  660.                 var a = jQuery(this).closest(".quantity").find(".qty"),
  661.                     b = parseFloat(a.val()),
  662.                     c = parseFloat(a.attr("max")),
  663.                     d = parseFloat(a.attr("min")),
  664.                     e = a.attr("step");
  665.                 b && "" !== b && "NaN" !== b || (b = 0),
  666.                     "" !== c && "NaN" !== c || (c = ""),
  667.                     "" !== d && "NaN" !== d || (d = 0),
  668.                     "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1),
  669.                     jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())),
  670.                     a.trigger("change")
  671.             });
  672.     </script>
  673.     <script>
  675.         {# Lading script... #}
  676.         const loader = document.querySelector('#MyLoading');
  678.         function afficheLoading() {
  679.             loader.classList.add('MyShow');
  680.         }
  682.         function cacherLoading() {
  683.             loader.classList.remove('MyShow');
  684.         }
  685.         {# Fin Lading script... #}
  687.         const containerOpt = document.querySelector('.containerOption');
  688.         
  689.         
  690.         function getOptionByIdProd(idProd) {
  692.             afficheLoading();
  693.             
  694.             const data = {
  695.                 idProd: idProd
  696.             };
  698.             let datas = new FormData();
  699.             datas.append("data", JSON.stringify(data));
  701.             if (containerOpt.children) {
  702.                 var first = containerOpt.firstElementChild;
  703.                 while (first) {
  704.                     first.remove();
  705.                     first = containerOpt.firstElementChild;
  706.                 }
  707.             }
  709.             fetch(`/get-option/${idProd}`)
  710.             .then(response => response.json())
  711.             .then(data => {
  712.                 cacherLoading();
  713.                 console.log(data);
  714.                 data[0].map((item)=>{
  715.                     //console.log("idOpt vao miditra",item.id);
  716.                     let objQty = data[1].qty;
  718.                     let idProd = document.createElement('input');
  719.                     idProd.type = "hidden";
  720.                     idProd.value = data[2];
  721.                     idProd.setAttribute('name','idProd');
  722.                     let oneOpt = document.createElement('div');
  723.                     oneOpt.classList.add('col-12');
  724.                     oneOpt.classList.add('row');
  725.                     let col8 = document.createElement('div');
  726.                     col8.classList.add('col-8');
  727.                     let row = document.createElement('div');
  728.                     row.classList.add('row');
  729.                     let col4a = document.createElement('div');
  730.                     col4a.classList.add('col-4');
  731.                     let col4b = document.createElement('div');
  732.                     col4b.classList.add('col-4');
  733.                     let img1 = document.createElement('img');
  734.                     img1.classList.add('imgOptModal');
  736.                     // image
  737.                     if (item.image1 == null){
  738.                         img1.style.display = "none";
  739.                     } else {
  740.                         img1.src = `/upload/produits/${item.image1}`;
  741.                     }
  743.                     let img2 = document.createElement('img');
  744.                     img2.classList.add('imgOptModal');
  746.                     if (item.image2 == null){
  747.                         img2.style.display = "none";
  748.                     } else {
  749.                         img2.src = `/upload/produits/${item.image2}`;
  750.                     }
  752.                     let customCheckBox = document.createElement('div');
  753.                     customCheckBox.classList.add('custom-checkbox');
  754.                     customCheckBox.style.position = "relative";
  756.                     let inputCheckBox = document.createElement('input');
  757.                     inputCheckBox.type = "checkbox";
  758.                     inputCheckBox.classList.add('custom-control-input');
  759.                     inputCheckBox.classList.add('option-checkbox');
  760.                     inputCheckBox.setAttribute('id',`idCheck${item.id}`);
  761.                     inputCheckBox.setAttribute('name',`options[${item.id}]`);
  762.                     inputCheckBox.setAttribute('value',`${item.price}`);
  765.                     // checked if already in session
  766.                     for (const idOpt in objQty) {
  767.                         if(item.id == idOpt){
  768.                             inputCheckBox.checked = true;
  769.                         }
  770.                     }
  772.                     let customControlLabel = document.createElement('label');
  773.                     customControlLabel.classList.add('custom-control-label');
  774.                     customControlLabel.setAttribute('for',`idCheck${item.id}`);
  775.                     
  776.                     let nameStrong = document.createElement('strong');
  777.                     nameStrong.innerHTML = `${item.price} €`;
  778.                     nameStrong.style.marginLeft = "31px";
  779.                     let nameSpan = document.createElement('span');
  780.                     nameSpan.innerHTML = `- ${item.name}`;
  781.                     let nameSpan2 = document.createElement('span');
  782.                     nameSpan2.innerHTML = `<button type="button">modif</button>`;
  784.                     let col4 = document.createElement('div');
  785.                     col4.classList.add('col-4');
  786.                     let myheight = document.createElement('div');
  787.                     myheight.style.height = "36px";
  788.                     let inputQty = document.createElement('input');
  789.                     inputQty.type = "number";
  790.                     inputQty.classList.add('inputQtyOpt');
  791.                     inputQty.setAttribute('min','1');
  792.                     inputQty.setAttribute('id',`QtyidCheck${item.id}`);
  793.                     inputQty.setAttribute('name',`QtyOption[${item.id}]`);
  794.                     inputQty.setAttribute('value','1');
  796.                     // get value qty in session
  797.                     for (const idOpt in objQty) {
  798.                         if(item.id == idOpt) {
  799.                             inputQty.setAttribute('value',`${objQty[idOpt]}`);
  800.                         } 
  801.                     }
  803.                     col4.appendChild(myheight);
  804.                     col4.appendChild(inputQty);
  806.                     col4a.appendChild(img1);
  807.                     col4b.appendChild(img2);
  808.                     row.appendChild(col4a);
  809.                     row.appendChild(col4b);
  810.                     customControlLabel.appendChild(nameStrong);
  811.                     customControlLabel.appendChild(nameSpan);
  812.                     customCheckBox.appendChild(inputCheckBox);
  813.                     customCheckBox.appendChild(customControlLabel);
  814.                     col8.appendChild(row);
  815.                     col8.appendChild(customCheckBox);
  816.                     oneOpt.appendChild(idProd);
  817.                     oneOpt.appendChild(col8);
  818.                     oneOpt.appendChild(col4);
  819.                     containerOpt.appendChild(oneOpt);
  820.                 });
  821.                 
  822.                 /*let idp = document.createElement("p");
  823.                 idp.textContent = data;
  824.                 containerOpt.appendChild(idp);*/
  826.                 /*fetch('/get-option')
  827.                 .then(obj => obj.json())
  828.                 .then(objjs => console.log(objjs));*/
  829.                 if(data) {
  830.                     const optionCheckbox = document.querySelectorAll('.option-checkbox');
  831.                     
  832.                     for (var i = 0; i < optionCheckbox.length; i++) {
  833.                         let qtyOpt = document.getElementById(`Qty${optionCheckbox[i].id}`);
  834.                         // disable unchecked checkbox
  835.                         if(!optionCheckbox[i].checked) {
  836.                             qtyOpt.disabled = true;
  837.                             qtyOpt.style.display = "none";
  838.                         }
  839.                         optionCheckbox[i].addEventListener('change', (optMod) => {
  840.                             if (optMod.target.checked) {
  841.                                 qtyOpt.disabled = false;
  842.                                 qtyOpt.style.display = "block";
  843.                             } else {
  844.                                 qtyOpt.disabled = true;
  845.                                 qtyOpt.style.display = "none";
  846.                             }
  847.                         })
  848.                     }
  849.                 }
  850.             });
  852.         }
  854.     </script>
  855.     <script>
  856.     function getGroupOption(id_prod) {
  857.         // console.log('kokokoko',url);
  858.         console.log('isID',id_prod);
  859.         // var id_product=314;
  860.         $("#valeurgropOption").html("");
  861.         fetch(`/tous-options-groups/${id_prod}`)
  862.         .then(response=> response.json())
  863.         .then(data=>{
  864.             console.log('tous option', data);
  865.             $("#valeurgropOption").append(data);
  866.         });
  867.         
  868.     }
  869.     function validechoiModalGroupoption() {
  870.         // $("#modalOptionGP").modal("hide");
  871.         
  872.         var url = window.location.href.split('/');
  873.         var param_url = url[0]+'//'+url[2];
  874.         const formData = new FormData();
  875.         var idProduit = $('#id_produit').val();
  876.         console.log("id_porduit",idProduit);
  877.         
  878.         var goption= document.getElementsByClassName('goption');
  879.         var labels =new Array();
  881.         for (let i = 0; i < goption.length; i++) {
  882.             var id_goption = goption[i].id.split("_");
  883.             var label= document.getElementsByClassName('label_'+id_goption[1]);
  884.             var hidden= document.getElementsByClassName('hidden_'+id_goption[1]);
  885.             var qte= document.getElementsByClassName('qte_'+id_goption[1]);
  886.             
  887.             // console.log('labeb',label);
  888.             var compter=0;
  889.             
  890.             var lab =new Array();
  891.             var qt =new Array();
  892.             for (let l = 0; l < label.length; l++) {
  893.             console.log('type', label[l].type);
  894.                 if (label[l].type=="checkbox" && label[l].checked) {
  895.                     
  896.                     lab[compter] = hidden[l].value;
  897.                     qt[compter] = qte[l].value;
  898.                     compter++
  899.                 }
  900.                 if (label[l].type=="select-one" && label[l].value != "") {    
  901.                     lab[compter] = label[l].value;
  902.                     qt[compter] = qte[l].value;
  903.                     compter++
  904.                 }
  905.             }
  906.             labels[i] = {idoption: id_goption[1], labelo: lab, qte: qt};
  907.         }
  908.             console.log('valin label',labels);
  909.             
  910.             // localStorage.setItem('produit_groups', JSON.stringify(labels));
  911.             
  912.             formData.append("modifGroupOption", JSON.stringify(labels));
  913.             fetch(`${param_url}/updateOptionGroups/${idProduit}`, {
  914.             method: "POST",
  915.             body: formData
  916.                 })
  917.                 .then(response=> response.json())
  918.                 .then(data=>{
  919.                 console.log('data_io',data);
  920.                 if (data.message == "ok") {
  921.                     window.location.reload();
  922.                 }
  923.                 $("#modalOptionGP").modal("hide");
  924.             });
  925.     }
  926.     </script>
  927.     <script>
  928.     function ajouterOptions(idproduit,qte,prix,url) { 
  929.         
  930.         fetch(`${url}/tousoption/${idproduit}`)
  931.         .then(response=> response.json())
  932.         .then(data=>{
  933.             var templ="";
  934.             var tousId=[];
  935.             console.log("cocher",data.opt_pre);
  936.             for (let i = 0; i < data.options.length; i++) {
  937.                 tousId.push(data.options[i].id);
  938.                 templ+=`<div class="oneOptionFP">
  939.                             <div class="row">
  940.                 
  941.                                 <div class="col-4">
  942.                                     <img id="optionbtn1img" src="/upload/produits/${data.options[i].image1}" style="height:50px;border-radius:2px">
  943.                                 </div>
  944.                                 <div class="col-4">
  945.                                     <img id="optionbtn1img" src="/upload/produits/${data.options[i].image2}" style="height:50px;border-radius:2px">
  946.                                 </div>
  947.                             </div>
  948.                             <div class="custom-checkbox my-1" style="position: relative">
  949.                                 <input type="checkbox" data-price="${data.options[i].price}" data-id="${data.options[i].id}" name="" value="" class="custom-control-input checkboxFP" id="checkboFP_${[i]}">
  950.                                 <label class="custom-control-label position-relative" for="checkboFP_${[i]}">
  951.                                     <strong style="margin-left: 31px;">${data.options[i].price}</strong>
  952.                                     <span>-
  953.                                     ${data.options[i].name}</span>
  954.                                     </label>
  955.                                 <button class="btn" id="boutonModif_${[i]}" onclick="modifOption('${data.options[i].id}');" type="button" style="display: none">Modifier</button>
  956.                             </div>
  957.                         </div>`;            
  958.             }
  959.         
  960.             $('#id_produit').val(idproduit);
  961.             $('#price_produit').val(prix);
  962.             $('#qte_produit').val(qte);
  963.             $('#modifAchatFairePart').modal("show");
  964.             $('#tousOptions').html(templ);
  966.             for (let k = 0; k < tousId.length; k++) {
  967.                console.log('atooo',tousId,tousId.length);
  968.                 console.log('dataio',data.opt_pre);
  969.                 // for (let a = 0; a < data.opt_pre.length; a++) {
  970.                     // console.log('avvvvvi',data.opt_pre.length);
  971.                     for(var i in data.opt_pre) {
  972.                         if(tousId[k]== data.opt_pre[i].idoption){
  973.                             console.log("tonga aty ihany");
  974.                             $('#checkboFP_'+[k]).prop('checked', true);    
  975.                         }
  976.                     }
  977.                 // }
  978.                 for (const key in $('#checkboFP_'+[k])) {
  979.                     if ($('#checkboFP_'+[k])[key].checked) {    
  980.                         $('#boutonModif_'+[k]).attr("style", "display: block !important");
  981.                     }
  982.                     else{
  984.                         var evt = document.getElementById('checkboFP_'+[k]);
  985.                         evt.addEventListener('change',(event) => {
  986.                             if (event.target.checked) {
  987.                                 $('#boutonModif_'+[k]).attr("style", "display: block !important");
  988.                             }else{
  989.                                 $('#boutonModif_'+[k]).attr("style", "display: none !important");
  990.                                 $(".forme_options").attr("style", "display: none !important")
  991.                                 $(".m-info").attr("style", "display: block !important")
  992.                             }
  993.                         });
  994.                     }
  995.                 }
  996.             }
  997.         });
  998.     }
  1000.     function modifOption(idopt) {
  1001.         
  1002.         var url = window.location.href.split('/');
  1003.         var param_url = url[0]+'//'+url[2];
  1004.         fetch(`${param_url}/option/${idopt}`)
  1005.         .then(response=> response.json())
  1006.         .then(data=>{
  1007.         
  1008.             $(".m-info").attr("style", "display: none !important")
  1009.             $(".forme_options").attr("style", "display: block !important")
  1010.             $(".nice-select").attr("style", "display: none !important");
  1011.             $("#id_optionFP").val(idopt);
  1012.             $("#name_optionFP").val(data.options.name);
  1013.             $("#image_optionFP").val(data.options.image1);
  1014.     
  1015.             if ( typeof data.options.colorsOption != "undefined" && data.options.colorsOption != null && data.options.colorsOption.length != null && data.options.colorsOption.length > 0) {
  1016.                 var colorso ="";
  1017.                 for (let i = 0; i < data.options.colorsOption.length; i++) {
  1018.                     colorso +='<option>'+ data.options.colorsOption[i]+'</option>'
  1019.                 }
  1020.                 $("#optionFP_color").html(colorso);
  1021.                 $(".optionFP_color").attr("style", "display: block !important");
  1022.                 $("#optionFP_color").attr("style", "display: block !important");
  1023.             }
  1024.             else{
  1025.                 $(".optionFP_color").attr("style", "display: none !important");
  1026.             }
  1028.             if (typeof data.options.format != "undefined" && data.options.format != null && data.options.format.length != null && data.options.format.length > 0) {
  1029.                 var formatopt ="";
  1030.                 for (let i = 0; i < data.options.format.length; i++) {
  1031.                     formatopt +='<option>'+data.options.format[i]+'</option>'
  1032.                 }
  1033.                 $("#optionFP_format").html(formatopt);
  1034.                 $(".optionFP_format").attr("style", "display: block !important");
  1035.                 $("#optionFP_format").attr("style", "display: block !important");
  1036.             }
  1037.             else{
  1038.                 $(".optionFP_format").attr("style", "display: none !important");
  1039.             }
  1041.             if (typeof data.options.finition != "undefined" && data.options.finition != null && data.options.finition.length != null && data.options.finition.length > 0) {
  1042.                 var finitions ="";
  1043.                 for (let i = 0; i < data.options.finition.length; i++) {
  1044.                     finitions +='<option>'+data.options.finition[i]+'</option>'
  1045.                 }
  1046.                 $("#optionFP_finition").html(finitions);
  1047.                 $(".optionFP_finition").attr("style", "display: block !important");
  1048.                 $("#optionFP_finition").attr("style", "display: block !important");
  1049.             }
  1050.             else{
  1051.                 $(".optionFP_finition").attr("style", "display: none !important");
  1052.             }
  1054.             if (typeof data.options.papier != "undefined" && data.options.papier != null && data.options.papier.length != null && data.options.papier.length > 0) {
  1055.                 var papiers ="";
  1056.                 for (let i = 0; i < data.options.papier.length; i++) {
  1057.                     papiers +='<option>'+data.options.papier[i]+'</option>'
  1058.                 }
  1059.                 $("#optionFP_papier").html(papiers);
  1060.                 $(".optionFP_papier").attr("style", "display: block !important");
  1061.                 $("#optionFP_papier").attr("style", "display: block !important");
  1062.             }
  1063.             else{
  1064.                 $(".optionFP_papier").attr("style", "display: none !important");
  1065.             }
  1067.             if (typeof data.options.quantite != "undefined" && data.options.quantite != null && data.options.quantite.length != null && data.options.quantite.length > 0) {
  1068.                 var quantites ="";
  1069.                 for (let i = 0; i < data.options.quantite.length; i++) {
  1070.                     quantites +='<option>'+data.options.quantite[i]+'</option>'
  1071.                 }
  1072.                 $("#optionFP_quantite").html(quantites);
  1073.                 $(".optionFP_quantite").attr("style", "display: block !important");
  1074.                 $("#optionFP_quantite").attr("style", "display: block !important");
  1075.             }
  1076.             else{
  1077.                 $(".optionFP_quantite").attr("style", "display: none !important");
  1078.             }
  1080.             if (typeof data.options.etiquette != "undefined" && data.options.etiquette != null && data.options.etiquette.length != null && data.options.etiquette.length > 0) {
  1081.                 var etiquettes ="";
  1082.                 for (let i = 0; i < data.options.etiquette.length; i++) {
  1083.                     etiquettes +='<option>'+data.options.etiquette[i]+'</option>'
  1084.                 }
  1085.                 $("#optionFP_etiquette").html(etiquettes);
  1086.                 $(".optionFP_etiquette").attr("style", "display: block !important");
  1087.                 $("#optionFP_etiquette").attr("style", "display: block !important");
  1088.             }
  1089.             else{
  1090.                 $(".optionFP_etiquette").attr("style", "display: none !important");
  1091.             }
  1093.             if (typeof data.options.ruban != "undefined" && data.options.ruban != null && data.options.ruban.length != null && data.options.ruban.length > 0) {
  1094.                 var rubans ="";
  1095.                 for (let i = 0; i < data.options.ruban.length; i++) {
  1096.                     rubans +='<option>'+data.options.ruban[i]+'</option>'
  1097.                 }
  1098.                 $("#optionFP_ruban").html(rubans);
  1099.                 $(".optionFP_ruban").attr("style", "display: block !important");
  1100.                 $("#optionFP_ruban").attr("style", "display: block !important");
  1101.             }
  1102.             else{
  1103.                 $(".optionFP_ruban").attr("style", "display: none !important");
  1104.             }
  1105.         });    
  1106.     }
  1108.     function Anulleroption() {
  1109.         $(".forme_options").attr("style", "display: none !important")
  1110.         $(".m-info").attr("style", "display: block !important")
  1111.     }
  1113.     function validechoioption() {
  1114.         $(".forme_options").attr("style", "display: none !important")
  1115.         $(".m-info").attr("style", "display: block !important")
  1116.         const data = {
  1117.                 idoption: $("#id_optionFP").val(),
  1118.                 nomoption: $("#name_optionFP").val(),
  1119.                 imageoption: $("#image_optionFP").val(),
  1120.                 color: $("#optionFP_color").val(),
  1121.                 form: $("#optionFP_format").val(),
  1122.                 finition: $("#optionFP_finition").val(),
  1123.                 papier: $("#optionFP_papier").val(),
  1124.                 quantite: $("#optionFP_quantite").val(),
  1125.                 etiquette: $("#optionFP_etiquette").val(),
  1126.                 ruban: $("#optionFP_ruban").val(),
  1127.             };
  1129.         localStorage.setItem($("#id_optionFP").val(), JSON.stringify(data));
  1130.             
  1131.     }
  1133.     function validechoiModaloption() {
  1135.         var url = window.location.href.split('/');
  1136.         var param_url = url[0]+'//'+url[2];
  1137.         const formData = new FormData();
  1138.         var idProduit = $('#id_produit').val();
  1139.         formData.append("quantity",$('#qte_produit').val());
  1140.         formData.append("price",$('#price_produit').val());
  1141.        if (Object.keys(localStorage).length != 0) {
  1142.         var values = [],
  1143.         keys = Object.keys(localStorage),
  1144.         i = keys.length;
  1145.      
  1146.         while ( i-- ) {
  1147.             values.push( localStorage.getItem(keys[i]) );
  1148.             localStorage.removeItem(keys[i]);
  1149.         }
  1150.         
  1151.         formData.append("tail",values.length);
  1152.         console.log("zzzzz",values);
  1153.         for (let j = 0; j < values.length; j++) {    
  1154.            formData.append("OpId_"+j, values[j]);
  1155.         }
  1156.        }
  1157.        
  1158.         var checkOpt = document.querySelectorAll('.checkboxFP');
  1159.         console.log("fff", checkOpt);
  1160.         console.log("eee", checkOpt.length);
  1161.         var valeur=[];
  1162.         for (var p = 0; p < checkOpt.length; p++) {
  1163.             
  1164.             if (checkOpt[p].checked) {
  1165.                 var idOpt = checkOpt[p].getAttribute('data-id');
  1166.                 valeur.push(idOpt);
  1167.             }
  1168.         }
  1169.             formData.append("idoptions",valeur);
  1170.        
  1171.         fetch(`${param_url}/updateOptionFairepart/${idProduit}`, {
  1172.             method: "POST",
  1173.             body: formData
  1174.         })
  1175.         .then(response=> response.json())
  1176.         .then(data=>{
  1177.           console.log('data_io',data);
  1178.           if (data.message == "ok") {
  1179.             window.location.reload();
  1180.           }
  1181.        $("#modifAchatFairePart").modal("hide");
  1182.         });
  1183.     }
  1184.     </script>
  1185. {% endblock %}