templates/menubuilder/menu-builder-detail.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  2. {% block title %}GFS::Menu Builder Detail
  3. {% endblock %}
  4. {% block content %}
  5.     <!--Menu Page Builder Banner Start-->
  6.     <section class="menu-page-builder-banner">
  7.         <div class="container container-sm">
  8.             <div class="row">
  9.                 <div class="col-12 col-lg-6 menuBuilder-content-column">
  10.                     <div class="upper-nav">
  11.                         <div class="training-detail-container-box">
  12.                             <div class="info-section">
  13.                                 <section class="bread-crumbs-section">
  14.                                     <div class="container container-lg">
  15.                                         <div class="bread-crumbs-section-box">
  16.                                             <div class="breadcrumb-holder">
  17.                                                 <ol class="breadcrumb menuBuilder-breadcrumb">
  18.                                                     <li class="breadcrumb-item"><a href="/{{app.request.locale}}">{{'Home'|trans}}</a></li>
  19.                                                     <li class="breadcrumb-item"><a href="/{{app.request.locale}}/resources">{{'Resources'|trans}}</a></li>
  20.                                                     <li class="breadcrumb-item">{{"Tools"|trans}}</li>
  21.                                                     <li class="breadcrumb-item"><a href="/{{app.request.locale}}/menu-builder">{{"Menu Builder"|trans}}</a></li>
  22.                                                     <li class="breadcrumb-item">{{menu_builder_details.name}}</li>
  23.                                                 </ol>
  24.                                             </div>
  25.                                         </div>
  26.                                     </div>
  27.                                 </section>
  28.                             </div>
  29.                         </div>
  30.                     </div>
  31.                     <h1 class="title-lg">{{menu_builder_details.name}}</span>
  32.                 </h1>
  33.                 <div class="step-tags">
  34.                     {% set length = menu_builder_details.tags|length %}
  35.                     {% if length  >= 4  %}
  36.                         {% for i in 0..3 %}
  37.                             <a href="javascript:;" class="tag">
  38.                                 <span>{{menu_builder_details.tags[i].tag_name}}
  39.                                     &nbsp;<img src="/static/assets/images/Ellipse.png" class="img-fluid" alt="Ellipse"/></span>
  40.                             </a>
  41.                         {% endfor %}
  42.                     {% else %}
  43.                         {% for tags in menu_builder_details.tags %}
  44.                             <a href="javascript:;" class="tag">
  45.                                 <span>{{tags.tag_name}}
  46.                                     &nbsp;<img src="/static/assets/images/Ellipse.png" class="img-fluid" alt="Ellipse"/></span>
  47.                             </a>
  48.                         {% endfor %}
  49.                     {% endif %}
  50.                 </div>
  51.                 <p>
  52.                     {{menu_builder_details.description}}
  53.                 </p>
  54.                 
  55.                 {% set unitcost = 0 %}
  56.                 {% set unitvalue = 0 %}
  57.                 {% set multiply = 0 %}
  58.                 {% set total_unit_cost = 0 %}
  59.                 {% set serve = menu_builder_details.serves %}
  60.                         {% for ingrident in menu_builder_details.serving_options %}
  61.                             {% for ing in ingrident.ingredeints %}
  62.                                 {% if ing.recipe_ing.data is defined %}
  63.                                     {% if ing.unit.data == 'kg' or ing.unit.data == 'Kg' or ing.unit.data == 'KG' or ing.unit.data == 'l' or ing.unit.data == 'L' %}
  64.                                         {% set multiply = ((ing.multiply.data) * 1000)  %}
  65.                                         {% set unitvalue = (multiply)/(menu_builder_details.serves) %}
  66.                                     {% else %}
  67.                                         {% set multiply = ing.multiply.data %}
  68.                                         {% set unitvalue = (multiply)/(menu_builder_details.serves) %}
  69.                                     {% endif %}
  70.                                     {% set unitcost = (unitvalue) * (ing.recipe_ing.data.price) %}
  71.                                     {% set total_unit_cost = total_unit_cost + unitcost %}
  72.                                 {% endif %}
  73.                                                                                                     
  74.                             {% endfor %}
  75.                                                             
  76.                         {% endfor %}
  77.                         {% set total_cost =  total_unit_cost * serve %}
  78.                         {% set vat_percentage =  menu_builder_details.recipe_manu_vat_oercebtage %}
  79.                         {% set total_cost_vat =  ((total_cost * vat_percentage) / 100) %}
  80.                         {% set total_cost =  (total_cost - total_cost_vat)  %}
  81.                         {% set profit_percentage =  (menu_builder_details.profit_percentage is not null) ? menu_builder_details.profit_percentage : 0 %}
  82.                     
  83.                         {% set profit =  ((total_cost * profit_percentage ) / (100)) %}
  84.                         {% set menu_price = (total_cost + profit) %}
  85.                         
  86.                     <div class = "d-md-flex d-lg-flex align-items-center d-xl-flex menu-builder-counter">
  87.                          <div class="order-count-title menubuilder-serving-count-title mb-3 ">{{"Servings"|trans}}</div>
  88.                             <div class="order-count-number justify-content-center">
  89.                                 <span class="minus" id="minusx"><img src="/static/assets/images/icon-minus-blue.svg" alt="icon minus"></span>
  90.                                 <input class="count numeric-remove-spiner valuechange" id="valuechangeprice" type="number" value="{{ menu_builder_details.serves}}"/>
  91.                                 <span class="plus" id="plusx"><img src="/static/assets/images/icon-plus-blue.svg" alt="icon plus"></span>
  92.                             </div>
  93.                      </div>
  94.                 <div class="cost-card-area d-md-flex">
  95.                     <div class="card">
  96.                         <span>{{"Food Cost"|trans}}*</span>
  97.                         <h4 id = "food_cost">{{total_cost|round(1)}}</h4>
  98.                         <h6>{{"SAR"|trans}}</h6>
  99.                     </div>
  100.                     <div class="card">
  101.                         <span>Menu Price*</span>
  102.                         <h4 id = "food_price">{{menu_price|round(1)}}</h4>
  103.                         <h6>{{"SAR"|trans}}</h6>
  104.                     </div>
  105.                     <div class="card">
  106.                         <span>{{"Profit"|trans}}*</span>
  107.                         <h4 id = "food_profit">{{profit|round(1)}}</h4>
  108.                         <h6>{{"SAR"|trans}}</h6>
  109.                     </div>
  110.                 </div>
  111.             
  112.                 <div class="final-card-area">
  113.                     <div class="frequently-bought">
  114.                         <div class="frequently-bought-box">
  115.                             <h5 class="title">Frequently Product</h5>
  116.                             {% for product in  menu_builder_details.serving_options.Items %}
  117.                                 {# {% for i in 0..product|length %} #}
  118.                                 {% for featured_product in product.recipe_feature_product %}
  119.                                     <div class="product-box product-box-horizon product-box-small">
  120.                                     <a href = '{{'/' ~ app.request.locale ~ '/' ~ 'product/' ~ featured_product.url}}'>
  121.                                         <figure class="slide-img">
  122.                                             <img src="{{featured_product.attrimage.Items[0]}}" alt="{{featured_product.name}}">
  123.                                             {# {% if featured_product.attrimage.Items[0] %}
  124.                                             {{ featured_product.attrimage.Items[0].thumbnail('354x244').getHTML({imgAttributes: {class:'',alt:"featured_product.name" }})|raw }}
  125.                                             {% endif %} #}
  126.                                         </figure></a>
  127.                                         <div class="slide-info">
  128.                                             <div class="">
  129.                                                 <h5 class="title"><a href = '{{'/' ~ app.request.locale ~ '/' ~ 'product/' ~ featured_product.url}}'>{{featured_product.name}}</a>
  130.                                                 {% set user = app.session.get('loginUID') %}
  131.                                                 {% if user is not null %}
  132.                                                     <span class="">&nbsp;<img src="/static/assets/images/featured-like.svg" alt="featured like"></span>
  133.                                                 
  134.                                                     {% else %}
  135.                                                     <span class="logged-out">&nbsp;<img src="/static/assets/images/featured-like.svg" alt="featured like"></span>
  136.                                                     {% endif %}
  137.                                                 </h5>
  138.                                             </div>
  139.                                             <div class="kg">{{featured_product.size}}</div>
  140.                                             <div class="inline-info btn-holder">
  141.                                                 <div class="price">{{featured_product.region[0]['price'].data}}
  142.                                                     {{featured_product.region[0]['currency_symbol'].data|trans}}</div>
  143.                                                 {% set points =   (((featured_product.region[0]['price'].data)/100)*10)|round %}
  144.                                                 <div class="award d-none">
  145.                                                     <i class="far fa-star"></i>{{"Earn"|trans}}
  146.                                                     {{points}}
  147.                                                     {{"Rewards Points"|trans}}</div>
  148.                                             </div>
  149.                                             <div class="frequently-product-buttons">
  150.                                                 <a href="javascript:;" class="btn btn-custom btn-green" onclick="addCart(this, {{featured_product.id}}, 1)">{{"Buy Now"|trans}}</a>
  151.                                                 {% set user = app.session.get('loginUID') %}
  152.                                                 {% if user is not null %}
  153.                                                     {% set points =   (((featured_product.region[0]['price'].data)/100)*10)|round %}
  154.                                                     <a href="javascript:;" class="btn btn-custom btn-green d-none" onclick="inventoryProgram(this,{{points}},{{featured_product.id}})">{{"Add to Inventory"|trans}}</a>
  155.                                                     <div class="alert alert-success ml-0" id="success-alertt-inventory{{featured_product.id}}">
  156.                                                         <button class="close" data-dismiss="alert" type="button"></button>Thank you for adding this product to Inventory.</div>
  157.                                                     <div class="alert alert-warning ml-0" id="failed-alertt-inventory{{featured_product.id}}">
  158.                                                         <button class="close" data-dismiss="alert" type="button"></button>
  159.                                                         This product is already added to Inventory.</div>
  160.                                                 {% else %}
  161.                                                     <a href="javascript:;" class="btn btn-custom btn-green product-logged-out d-none">{{"Add to Inventory"|trans}}</a>
  162.                                                 {% endif %}
  163.                                             </div>
  164.                                             <div class="product-inventry-alert"></div>
  165.                                         </div>
  166.                                     </div>
  167.                                 {% endfor %}
  168.                             {% endfor %}
  169.                         </div>
  170.                     </div>
  171.                 </div>
  172.                 <p>* Based on approximate total plate food costs, including average distributor markup.</p>
  173.             </div>
  174.             <div class="col-12 col-lg-6 menuBuilder-image-column">
  175.                 <div class="dish-image">
  176.                     <img src="{{menu_builder_details.featured_image}}" class="img-fluid" alt="Manu Builder feature image">
  177.                 </div>
  178.                 <div class="extra-area">
  179.                     <ul class="d-flex social-info recipe-info">
  180.                         {% set user = app.session.get('loginUID') %}
  181.                         {% if user is not null %}
  182.                             {% if Liked|length == 0 %}
  183.                                 <li class='like' onclick="loyaltyProgram(this, {{ menu_builder_details.id }},'{{ menu_builder_details.name }}',30,'Recipe','Like' , '{{app.request.locale}}')">{{"Like"|trans}}</li>
  184.                             {% else %}
  185.                                 <li class="liked">{{"Like"|trans}}</li>
  186.                             {% endif %}
  187.                             <li id = "add_to_menu"onclick="addtomenu(this , {{user}},{{ menu_builder_details.id }} , {{ menu_builder_details.serves }})">
  188.                                 <span><img src="/static/assets/images/addToMenu.svg" class="img-fluid " alt="addToMenu"></span>&nbsp; {{"Add To Menu"|trans}}</li>
  189.                             <div class="alert alert-success ml-0" id="success-alertt-addtomenu">
  190.                                 <button class="close" data-dismiss="alert" type="button"></button>Thank you for adding this recipe to menu.</div>
  191.                             <div class="alert alert-success ml-0" id="success-alertt-addtomenu_update">
  192.                                 <button class="close" data-dismiss="alert" type="button"></button>Thank you for updating this recipe to menu.</div>
  193.                             <div class="alert alert-warning ml-0" id="failed-alertt-addtomenu">
  194.                                 <button class="close" data-dismiss="alert" type="button"></button>
  195.                                 Something went worng.</div>
  196.                             <div class="alert alert-warning ml-0" id="failed-alertt-addtomenu_error_missing_params">
  197.                                 <button class="close" data-dismiss="alert" type="button"></button>
  198.                                 Some required values are null.</div>
  199.                             <li onclick="loyaltyProgram(this, {{ menu_builder_details.id }},'{{ menu_builder_details.name }}',30,'Recipe','Like' , '{{app.request.locale}}')">
  200.                                 <span><img src="/static/assets/images/share.svg" class="img-fluid logged-out" alt="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_builder_details.url}}' , '{{ " share goody recipe with your friends"|trans }}')"></span>&nbsp; {{"Share"|trans}}</li>
  201.                         {% else %}
  202.                             <li class='logged-out'>
  203.                                 <span><img src="/static/assets/images/like-menu.svg" class="img-fluid " alt="like-menu"></span>&nbsp; {{"Like"|trans}}</li>
  204.                             <li class='add-menu-logged-out'>
  205.                                 <span><img src="/static/assets/images/addToMenu.svg" class="img-fluid " alt="addToMenu"></span>&nbsp; {{"Add To Menu"|trans}}</li>
  206.                             <li>
  207.                                 <span><img src="/static/assets/images/share.svg" class="img-fluid logged-out" alt="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_builder_details.url}}' , '{{ " share goody recipe with your friends"|trans }}')"></span>&nbsp; {{"Share"|trans}}</li>
  208.                         {% endif %}
  209.                         <li>
  210.                             <a class="directions-link" target="_blank" href ="/{{app.request.locale}}/print/recipe/{{menu_builder_details.url}}"><span><img src="/static/assets/images/down-arrow.svg" class="img-fluid" alt="download"></span>&nbsp; {{"Download"|trans}}</li></a>
  211.                         <li>
  212.                             <a class="directions-link" target="_blank" href ="/{{app.request.locale}}/print/recipe/{{menu_builder_details.url}}"><span><img src="/static/assets/images/print.svg" class="img-fluid" alt="print"></span>&nbsp; {{"Print"|trans}}</li></a>
  213.                     </ul>
  214.                 </div>
  215.             </div>
  216.         </div>
  217.     </div>
  218. </section>
  219. <!--Menu Page Builder Banner End-->
  220. <section class="featured-recipes-section inner-featured-recipe product-using-products menu-builder-featured-recipe">
  221.     <div class="container container-sm">
  222.         {% if similar_menu_ideas|length > 0 %}
  223.             <h2 class="heading">Similar Menu Ideas</h2>
  224.         {% endif %}
  225.         <div class="featured-recipes">
  226.             <div class="custom-slider featured-recipes-slider">
  227.                 {% for similar_menu_ideas_recipes in similar_menu_ideas %}
  228.                     <div class="slide">
  229.                         <div class="slide-holder">
  230.                             <a href="/{{app.request.locale}}/menu-builder/{{similar_menu_ideas_recipes.url}}">
  231.                                 <figure class="slide-img">
  232.                                     <img src="{{similar_menu_ideas_recipes.featured_image}}" alt="{{similar_menu_ideas_recipes.name}}">
  233.                                 </figure>
  234.                             </a>
  235.                             <div class="slide-content">
  236.                                 <a href="/{{app.request.locale}}/menu-builder/{{similar_menu_ideas_recipes.url}}">
  237.                                     <h3>{{similar_menu_ideas_recipes.name}}</h3>
  238.                                 </a>
  239.                                 <p>{{similar_menu_ideas_recipes.short_description}}</p>
  240.                                 <div class="">
  241.                                     <a href="javascript:;">{{"With"|trans}}
  242.                                         {{similar_menu_ideas_recipes.featured_product[0].brands.name}}</a>
  243.                                 </div>
  244.                             </div>
  245.                         </div>
  246.                     </div>
  247.                 {% endfor %}
  248.             </div>
  249.         </div>
  250.     </div>
  251. </section>
  252. <section class="loyal-section d-none">
  253.     <div class="container-fluid p-0">
  254.         <div class="row">
  255.             <div class="col-12 col-lg-4">
  256.                 <img src="/static/assets/images/loyal-image.svg" class="img-fluid loyal-section-image" alt="loyal-image">
  257.             </div>
  258.             <div class="col-12 col-lg-8">
  259.                 <div class="custom-flex">
  260.                     <div>
  261.                         <div class="content">
  262.                             <h3 class="title-sm">{{'Loyalty Program'|trans}}</h3>
  263.                             <h2 class="title-lg">Lorem Epsum Lorem Lorem</h2>
  264.                             <h2 class="title-lg">Lorem Epsum Lorem Lorem Lorem Lorem
  265.                                 <span>Lorem Lorem</span>
  266.                             </h2>
  267.                         </div>
  268.                     </div>
  269.                     <div class="btn-holder m-lg-auto">
  270.                         <div class="btn-border">
  271.                             <a href="javascript:void(0)" class="btn btn-custom btn-lg-o-black">Start Earning Now!</a>
  272.                         </div>
  273.                     </div>
  274.                 </div>
  275.             </div>
  276.         </div>
  277.     </div>
  278. </section>
  279. {% if (app.request.locale =='ar') %}
  280.     {% set topMenu ="/en/menu-builder/" ~ menu_builder_details.url('en') %}
  281. {% else %}
  282.     {% set topMenu ="/ar/menu-builder/" ~ menu_builder_details.url('ar') %}
  283. {% endif %}
  284. <script>
  285.     var _TopMenuLink = "{{ topMenu }}";
  286.         function addtomenu(element, userid, objectId, serving) {
  287.         var userid = userid;
  288.         var objectId = objectId;
  289.         var serving = serving;
  290.         var form_data = new FormData(); // Creates new FormData object
  291.         form_data.append("userid", userid);
  292.         form_data.append("objectId", objectId);
  293.         form_data.append("serving", serving);
  294.         $.ajax({
  295.         url: "/addtomenu",
  296.         type: "POST",
  297.         data: form_data,
  298.         contentType: false,
  299.         cache: false,
  300.         processData: false,
  301.         success: function (response) {
  302.         console.log(response)
  303.         if (response.success == 1) { // document.getElementById('newsletter').reset();
  304.             $("#success-alertt-addtomenu_update").fadeTo(5000, 500).slideUp(500, function () {
  305.             $("#success-alertt-addtomenu_update").slideUp(500);
  306.             });
  307.         } else if(response.success == 2) {
  308.             $("#success-alertt-addtomenu").fadeTo(5000, 500).slideUp(500, function () {
  309.             $("#success-alertt-addtomenu").slideUp(500);
  310.             });
  311.         } else if(response.success == 3) {
  312.             $("#failed-alertt-addtomenu_error_missing_params").fadeTo(5000, 500).slideUp(500, function () {
  313.             $("#failed-alertt-addtomenu_error_missing_params").slideUp(500);
  314.             });
  315.         } else {
  316.             $("#failed-alertt-addtomenu").fadeTo(5000, 500).slideUp(500, function () {
  317.             $("#failed-alertt-addtomenu").slideUp(500);
  318.             });
  319.         }
  320.         }
  321.         })
  322.         }
  323.             // Menubuilder calculator start
  324.             $(document).ready(function () {
  325.                 var userId = '{{ user }}';
  326.                 var obId = {{ menu_builder_details.id }};
  327.                 $("#valuechangeprice").on('keyup change', function () {
  328.                         var countTxt = parseInt($('.count').val(), 10);
  329.                         var unit_cost = {{total_unit_cost}} ;
  330.                         var vat_percentage = {{vat_percentage}};
  331.                         var unit_cost_vat =  ((unit_cost * vat_percentage) / 100);
  332.                             unit_cost = (unit_cost - unit_cost_vat );
  333.                         var profit_percentage = {{profit_percentage}};
  334.                         var unit_profit = ((unit_cost * profit_percentage)/ 100);
  335.                         var unit_menu_price =  (unit_cost + unit_profit);
  336.                         $('#food_cost').text((unit_cost *countTxt).toFixed(1));
  337.                         $('#food_price').text((unit_menu_price *countTxt).toFixed(1));
  338.                         $('#food_profit').text((unit_profit *countTxt).toFixed(1));
  339.                         $('#add_to_menu').attr('onclick', 'addtomenu( this ,'+ userId +', '+ obId +', '+ countTxt +')');
  340.                     });
  341.             });
  342.             // Menubuilder calculator end
  343.                 // Download and Print Recipe According to serving ingerident quantity srart    
  344.                     $(document).ready(function () {
  345.                         var serving = {{ menu_builder_details.serves}};
  346.                         $("a.directions-link").each(function() {
  347.                             var $this = $(this);       
  348.                             const _href = $this.attr("href"); 
  349.                             $(".valuechange").on('keyup change', function () {
  350.                             var countTxt = parseInt($('.count').val(), 10);
  351.                             $(".directions-link").attr("href", _href+"~portion="+countTxt);
  352.                             });
  353.                             $(".directions-link").attr("href", _href+"~portion="+serving);
  354.                             console.log(countTxt);
  355.                         });
  356.                     });
  357.                 // Download and Print Recipe According to serving ingerident quantity end    
  358. </script>
  359. {% endblock %}