templates/Recipe/recipesdetail.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  2. {% block content %}
  3.   {% set locale = app.request.locale %}
  4. {% if locale == 'en_GB' %}
  5.     {% set locale = 'en' %}
  6. {% endif %}
  7.   <!--Start Banner Video-->
  8.     <span class = "pagetype d-none" >Recipe Detail Page</span>
  9.     <div class="banner-video abc">
  10.         {% if recipedetails.banner_video %}
  11.           <video id="banner-video" class="video-js" muted autoplay loop preload="auto" poster="{{ recipedetails.video_thumbnail}}" data-setup="{}">
  12.             <source src="{{recipedetails.banner_video.data}}" type="video/mp4">
  13.           </video>
  14.           <!-- <img class="banner-video" width="100%" src="/static/assets/images/Products Listing Image (spotlight) Desktop.png" alt=""> -->
  15.         {% else %}
  16.           <img class="banner-video" width="100%" src="{{ recipedetails.video_thumbnail}}" alt="{{recipedetails.name}}">
  17.         {% endif %}
  18.       <!--Start Floating Button-->
  19.       <div class="float-holder">
  20.         <div class="float-btn">
  21.           <a href="#GiveReviewtoForm">
  22.             <i class="icon-favorite-circle"></i>
  23.             <span>{{ "Giveyourreview"|trans }}</span>
  24.             <!-- {{"Giveyourreview"|trans }} -->
  25.           </a>
  26.         </div>
  27.       </div>
  28.       <!--End Floating Button-->
  30.     </div>
  32.     <div class="banner-video home-mobile-slider ">
  33.         {% if recipedetails.banner_video_mobile %}
  34.           <video id="banner-video" class="video-js" muted autoplay playsinline loop preload="auto" poster="{{recipedetails.video_thumbnail_mobile}}" data-setup="{}">
  35.             <source src="{{recipedetails.banner_video_mobile.data}}" type="video/mp4">
  36.           </video>
  37.           <!-- <img class="banner-video" width="100%" src="/static/assets/images/Products Listing Image (spotlight) Desktop.png" alt=""> -->
  38.         {% else %} 
  39.           <img class="banner-video-mobile" width="100%" src="{{recipedetails.video_thumbnail_mobile}}" alt="{{recipedetails.name}}">
  40.         {% endif %}
  42.       <!--Start Floating Button-->
  43.       <div class="float-holder">
  44.         <div class="float-btn">
  45.           <a href="#GiveReviewtoForm">
  46.             <i class="icon-favorite-circle"></i>
  47.             <span>{{"Giveyourreview"|trans }}</span>
  48.             <!-- {{"Giveyourreview"|trans }} -->
  49.           </a>
  50.         </div>
  51.       </div>
  52.       <!--End Floating Button-->
  54.     </div>
  55.   <!--End Banner Video-->
  57.   <!--Start Recipe Holder-->
  58.     <section class="recipe-holder">
  59.       <div class="container custom-container">
  60.         <!--Start Breadcrumbs-->
  61.         <nav aria-label="breadcrumb" class="breadcrumb-holder">
  62.           <ol class="breadcrumb custom-breadcrumb-class">
  63.             <li class="breadcrumb-item"><a href="/{{locale}}">{{"Home"|trans }}</a></li>
  64.             <li class="breadcrumb-item"><a href="/{{locale}}/{{"recipes-link"|trans }}">{{"Recipes"|trans }}</a></li>
  65.             <li class="breadcrumb-item"><a href="javascript:;">{{(recipedetails.category) ? recipedetails.category[0].name : ''}}</a></li>
  66.             <li class="breadcrumb-item active" aria-current="page">{{recipedetails.name}}</li>
  67.           </ol>
  68.         </nav>
  69.         <!--End Breadcrumbs-->
  71.         <!--Start Recipe Box-->
  72.         <div class="recipe-box">
  74.           <!--Start Recipe Image and Title-->
  75.           <div class="row recipe-box-1">
  76.             <!--Start Recipe Image-->
  77.             <div class="col-md-5 col-xl-5 order-md-2 recipe-img-holder  aos-init aos-animate" data-aos="zoom-in-left"
  78.                 data-aos-duration="500">
  79.               <!-- <figure class="recipe-img">
  80.                     <img alt="" class="" src="assets/images/recipe-img.png" />
  81.                   </figure> -->
  82.               <figure class="recipe-img recipe-imgshow aos-init aos-animate" data-aos="zoom-in-up" data-aos-offset="500">
  83.                 <img alt="{{recipedetails.name}}" src="{{recipedetails.featured_image}}" />
  84.               </figure>
  85.             </div>
  86.             <!--End Recipe Image-->
  88.             <!--Start Recipe Title-->
  89.             <div class="col-md-7 col-xl-7 order-md-1">
  90.               <h1 class="main-heading gtm-contentval" >{{recipedetails.name}}</h1>
  91.             </div>
  92.             <!--End Recipe Title-->
  93.           </div>
  94.           <!--End Recipe Image and Title-->
  96.           <!--Start Rating Holder-->
  97.           <div class="recipe-box-2">
  99.             <!--Start Rating Info-->
  100.             <div class="rating-holder">
  101.               <!--Start Rating Star-->
  102.             
  103.               {% set max = 0 %}
  104.               {% set n = reviews|length %}
  106.               {% if reviews %}
  107.                 {% for Reviews in reviews %}
  108.                   {% if Reviews.name %}
  109.                     {% set max = max + Reviews.rating %}
  110.                   {% endif %}
  111.                 {% endfor %}
  112.               {% endif %}
  114.               {% if max != 0 %}
  115.                 {% set rating = (max / n)|round %}
  116.               {% else %}
  117.                 {% set rating = 0 %}
  118.               {% endif %}
  120.               {% if n > 0 %}
  121.                 {% for key , Reviews in reviews %}
  123.                   {% if key == 0 %}
  125.                     <fieldset class="ratings">
  126.                 
  127.                         {% if rating == '5' %} 
  128.                           <input type="radio" value="5" checked>
  129.                         {% else %}
  130.                           <input type="radio"  value="5" >
  131.                         {% endif %}
  132.                         <label class="full" for="1rviewar5" title="5 stars"></label>
  134.                         {% if rating == '4' %} 
  135.                           <input type="radio"  value="4" checked>
  136.                         {% else %}
  137.                           <input type="radio"  value="4" >
  138.                         {% endif %} 
  139.                         <label class="full" for="1reviwstar4" title=" 4 stars"></label>
  141.                         {% if rating == '3' %} 
  142.                           <input type="radio"  value="3" checked>
  143.                         {% else %}
  144.                           <input type="radio"  value="3" >
  145.                         {% endif %}
  146.                         <label class="full" for="1reviewsar3" title="3 stars"></label>
  148.                         {% if rating == '2' %} 
  149.                           <input type="radio"  value="2" checked>
  150.                         {% else %}
  151.                           <input type="radio"  value="2" >
  152.                         {% endif %}
  153.                         <label class="full" for="1reviestar2" title="2 stars"></label>
  155.                         {% if rating == '1' %} 
  156.                           <input type="radio"  value="1" checked>
  157.                         {% else %}
  158.                           <input type="radio"  value="1">
  159.                         {% endif %}
  160.                         <label class="full" for="1reviewar1" title="1 star"></label>
  162.                     </fieldset>
  164.                   {% endif %}
  166.                 {% endfor %}
  167.             
  168.               {% else %}
  169.                 <fieldset class="ratings">
  170.                       <input type="radio" id="naddreviewstar5" name="naddreviewrating" value="5">
  171.                       <label class="full" for="naddreviewstar5" title="5 stars"></label>
  173.                       <input type="radio" id="naddreviewstar4" name="naddreviewrating" value="4">
  174.                       <label class="full" for="naddreviewstar4" title=" 4 stars"></label>
  176.                       <input type="radio" id="naddreviewstar3" name="naddreviewrating" value="3">
  177.                       <label class="full" for="naddreviewstar3" title="3 stars"></label>
  179.                       <input type="radio" id="naddreviewstar2" name="naddreviewrating" value="2">
  180.                       <label class="full" for="naddreviewstar2" title="2 stars"></label>
  182.                       <input type="radio" id="naddreviewstar1" name="naddreviewrating" value="1">
  183.                       <label class="full" for="naddreviewstar1" title="1 star"></label>
  184.                     </fieldset>
  185.               {% endif %}
  186.               <!--End Rating Star-->
  188.               <!--Start Rating and Review Count-->
  189.               <div class="rating-info">
  190.                 <span class="rating-count">{{ratingcount}} {{"Ratings"|trans }}</span><span class="review-count"> {{ratingcount}} {{"Reviews"|trans }}</span>
  191.               </div>
  192.               <!--End Rating and Review Count-->
  193.             </div>
  194.             <!--End Rating Info-->
  196.             <!--Start Serving Info-->
  197.             <div class="serving-info">
  198.               <ul class="list-unstyled">
  199.                 <li class="time">{{recipedetails.time }} {{"mins"|trans }}</li>
  200.                 <li class="serve">{{recipedetails.serving }} {{"servings"|trans }}</li>
  201.                 {# <li class="calories">{{ floor(recipedetails.calories/recipedetails.serving) }} {{"kcal"|trans }}</li> #}
  202.               </ul>
  203.             </div>
  204.             <!--End Serving Info-->
  205.           </div>
  206.           <!--End Rating Holder-->
  208.           <!--Start Recipe Detail Section-->
  209.           <div class="recipe-box-3">
  211.             <!--Start Recipe Detail-->
  212.             <div class="overflow-bg recipe-detail rd-box" data-aos="zoom-in-right">
  213.               <div class="row">
  214.                 <div class="col-md-8 col-xl-7">
  215.                   <span class="gtm-contentval">{{ recipedetails.description|striptags }}</span>
  216.                 </div>
  217.               </div>
  218.             </div>
  219.             <!--End Recipe Detail-->
  221.             <!--Start Share Box-->  
  222.             {% if app.session.get('loginUserName') %}
  223.                 <div class="share-box">
  224.                   <ul class="list-unstyled">
  226.                           {% if Likedcount == 1 %}                  
  227.                             <li class="liked" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500">
  228.                               <a id="btnRecipeLike" href="javascript:void(0);">{{"like-btn"|trans }}</a>
  229.                             </li>
  230.                           {% else %}
  231.                             <li class="like" onclick="loyaltyProgram(this,{{recipedetails.id}},'Like','{{locale}}')" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500">
  232.                               <a id="btnRecipeLike" href="javascript:void(0);">{{"like-btn"|trans }}</a>
  233.                             </li>
  234.                           {% endif %}
  236.                           {% if Sharedcount == 1 %}       
  237.                             <li class="shared recipeshare" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500">
  238.                               <a  href="javascript:void(0);" class="" >{{"share-btn"|trans }}</a>
  239.                             </li>
  241.                           {% else %}
  242.                             <li class="share recipeshare" onclick="loyaltyProgram(this,{{recipedetails.id}},'Share','{{locale}}')" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500">
  243.                               <a  href="javascript:void(0);" class="" >{{"share-btn"|trans }}</a>
  244.                             </li>
  245.                           {% endif %}
  247.                           {% if Savedcount == 1 %}  
  248.                             <li class="saved" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500" >
  249.                               <a id="btnRecipeSave" href="javascript:void(0);" >{{"Save"|trans }}</a>
  250.                             </li>
  251.                           {% else %}
  252.                             <li class="save" onclick="loyaltyProgram(this,{{recipedetails.id}},'Save','{{locale}}')"  data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500" >
  253.                               <a id="btnRecipeSave" href="javascript:void(0);" >{{"Save"|trans }}</a>
  254.                             </li>
  255.                           {% endif %}
  257.                           <!-- <li class="print" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500"><p onclick="window.print()"><?= $this->translate("Print-icon"|trans }}</p></li> -->
  258.                   </ul>
  259.                 </div>
  260.             {% endif %}
  261.             <!--End Share Box-->
  262.           </div>
  263.           <!--End Recipe Detail Section-->
  265.         </div>
  266.         <!--End Recipe Box-->
  268.         <!--Start Tabs-->
  269.         <div class="cooking-tabs">
  270.           <!--Start Tab Titles-->
  271.           <ul class="row nav nav-pills" id="cooking-tab" role="tablist">
  272.             <li class="col-md-6 col-xl-6 nav-item" role="presentation">
  273.               <a class="nav-link sub-sm-heading active" id="ingredients-tab" data-toggle="pill" href="#ingredients"  role="tab" aria-controls="ingredients" aria-selected="true"> {{"ingredients"|trans }} ( {{recipedetails.serving_options.items[0].ingredient|length }}  )</a>
  274.               <!-- <= $this->translate("IngredientHeading"|trans }} -->
  275.             </li>
  276.             <li class="col-md-6 col-xl-6 nav-item" role="presentation">
  277.               <a class="nav-link sub-sm-heading" id="instruction-tab"  data-toggle="pill" href="#instruction" role="tab" aria-controls="instruction" aria-selected="false">{{"instructions"|trans }}</a>
  278.             </li>
  279.           </ul>
  280.           <!--End Tab Titles-->
  282.           <!--Start Tab Content-->
  283.           <div class="row tab-content" id="cooking-tabContent">
  285.             <!--Start Ingredients Tab Content-->
  286.             <div class="col-md-6 col-xl-6 tab-pane fade show active" id="ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
  288.               <!--Start Serving Count-->
  289.                 <div class="number-holder">
  290.                   <!-- <div class="number">
  291.                     <span class="btn minus">
  292.                       <i class="icon-minus-circle"></i>
  293.                     </span>
  294.                     <input type="text" value="1 Servings" />
  295.                     <span class="btn plus">
  296.                       <i class="icon-add-circle"></i>
  297.                     </span>
  298.                   </div> -->
  299.                   <!-- <= $this->translate("Serving-icon"); > -->
  300.                   <form action="" method="get">
  301.                     <div class="select">
  302.                       <select name="select_catalog" id="select_catalog" class="selectpicker">
  303.                         {% for key , servingoptions in recipedetails.serving_options %}
  304.                           <option value="{{key}}">{{"Servings"|trans }}
  305.                               {{servingoptions.Serving}} 
  306.                           </option>
  307.                         {% endfor %}
  308.                       </select>
  309.                     </div>
  310.                   </form>
  312.                 </div>
  313.                 <!--End Serving Count-->
  315.               <!--Start Ingredients List-->
  316.               <ul class="list-unstyled ingredients-list">
  317.               {% set shareing = []  %}
  318.             {% for i , servingoptions in recipedetails.serving_options %}
  319.                 {% for k , ingredients in servingoptions.ingredient %}
  320.                     {% if locale == 'ar' %}
  321.                         {% set shareing = shareing|merge([ingredients.ingqtyunit_ar.data ~ " " ~ ingredients.ingredient.data.name]) %}
  322.                   {% else %}
  323.                         {% set shareing = shareing|merge([ingredients.ingqtyunit.data ~ " " ~ ingredients.ingredient.data.name]) %}               
  324.                     {% endif %}
  326.                   {# <li style="display:{{ (i == 0) ? 'block' : 'none' }}" class="wel switching{{i}} hideingredients" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="3{{ k * 2 }}0" > #}
  327.                   <li class="wel switching{{i}} hideingredients  {{ (i == 0) ? 'display-blockk' : 'display-nonee' }} " data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="3{{ k * 2 }}0" >
  328.                     {# {{ (locale =='en') ? serve:serve_ar}} #}
  329.                   <label class="getingred check-cbox" for="switching{{ i ~ k }}">
  330.                     <input type="checkbox" class="check-control" id="switching{{ i ~ k }}"  value="switching{{ i ~ k }}">
  331.                     <span class="check-mark"></span>
  332.                     {% if locale == 'ar' %}
  333.                       <span>{{ingredients.ingqtyunit_ar.data ~ ' ' ~ ingredients.ingredient.data.name}}</span>
  335.                       {% else %}
  337.                     <span>{{ingredients.ingqtyunit.data  ~ ' ' ~ ingredients.ingredient.data.name}}</span>
  338.                       {% endif %}
  339.                     <div class="lable-img">
  340.                       <img alt="" class="" src="{{ ingredients.ingredient.data.image }}" />
  341.                     </div>
  342.                   </label>
  345.                   </li>
  346.                   {% if k == 1 %}
  347.                     {% if recipedetails.featured_product %}
  348.                       {% for recipe_feature_products in recipedetails.featured_product %}
  350.               
  351.                           {% set regions = recipe_feature_products.regions %}
  352.                           {% set show = false %}
  354.                             {% if regions %}
  355.                               {% for key , region in regions %}
  357.                                   {% if region in  groupids %}
  358.                                     {% set show = true %}
  359.                                   {% endif %}
  361.                               {% endfor %}
  363.                           {% endif %}
  365.                           {% if show %}
  366.                   
  367.                           
  368.                           {% set regionslinks = recipe_feature_products.attributes()[0].buttonlinks %}
  369.                           {% set rlink =  [] %}
  370.                             {% for key , link in regionslinks %}
  371.                                 {% if link['country'].data == country %}
  372.                                     {% set rlink = link %}
  373.                                 {% endif %}
  375.                             {% endfor %}
  378.                               {% if not rlink %}
  379.                                 {% for key , link in regionslinks %}
  380.                                     {% if link['country'].data == 'AE' %}
  381.                                         {% set rlink = link %}
  382.                                     {% endif %}
  384.                                 {% endfor %}
  386.                             {% endif %}
  388.                       
  390.                         <li class="hel switching{{ i }} hideingredients featured-product  {{ (i == 0) ? 'display-blockk' : 'display-nonee' }}" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="360">
  392.                     <!-- <= $this->translate("FeaturedProduct"|trans }} -->
  394.                         <!-- <h3 class="sub-heading head-desktop">Featured Product</h3> -->
  395.                     <div class="product-holder">
  397.                       <div class="row">
  398.                         <div class="col-5 col-md-5 col-xl-5 product-img">
  399.                         {# {% for item in recipe_feature_products.images.Items %} #}
  400.                           {% if recipe_feature_products.attributes()[0].images %}
  401.                             <a  href="/{{locale}}/{{"products-link"|trans }}/{{recipe_feature_products.attributes()[0].url }}"><img class="img-fluid"  src="{{recipe_feature_products.attributes()[0].images[0].path ~ recipe_feature_products.attributes()[0].images[0].filename}}"  /></a>
  402.                             {% endif %}
  403.                         {# {% endfor %} #}
  404.                         </div>
  405.                         <div class="col-7 col-md-7 col-xl-7 product-links">
  406.                           <!-- <h5 class="product-name head-mobile">Rainbow Evaporated Milk Original (385ml)</h5> -->
  407.                           <a class="remove-anchor-style1"  href="/{{locale}}/{{"products-link"|trans }}/recipe_feature_products.attributes()[0].url }}"><h5 class="product-name">{{ recipe_feature_products.name }}</h5></a>
  408.                           <div class="links-holder">
  409.                             <button class="btn btn-primary ico-btn productbuynow " 
  410.                             data-lulu="{{ (rlink['lulu']) ? rlink['lulu'].data : '' }}"
  411.                       data-union="{{ (rlink['unioncool']) ? rlink['unioncool'].data : '' }}"
  412.                       data-amazon="{{ (rlink['amazon']) ? rlink['amazon'].data : '' }}"
  413.                       data-carrefour="{{ (rlink['carrefour']) ? rlink['carrefour'].data : '' }}"
  414.                         data-c4="{{ (rlink['c4']) ? rlink['c4'].data : '' }}"
  415.                         data-noon="{{ (rlink['noon']) ? rlink['noon'].data : '' }}"
  416.                         data-danube="{{ (rlink['danube']) ? rlink['danube'].data : '' }}"
  417.                         data-tawseel="{{ (rlink['tawseel']) ? rlink['tawseel'].data : '' }}"
  418.                         data-sultancenter="{{ (rlink['sultancenter']) ? rlink['sultancenter'].data : '' }}" tabindex="0"  data-aos="zoom-in-up" >
  419.                               <i><img src="/static/assets/images/shopping-cart.svg" alt=""></i>
  420.                               <span>{{"BuyNow"|trans }}</span>
  421.                               <!-- <= $this->translate("BuyNow"|trans }} -->
  422.                             </button>
  423.                             <a  href="/{{locale}}/{{"products-link"|trans }}/{{recipe_feature_products.attributes()[0].url }}" class="btn btn-link" >{{"readmore"|trans }}</a>
  424.                           </div>
  425.                         </div>
  426.                       </div>
  427.                     </div>
  430.                     <label class="check-cbox" for="featured-product">
  431.                             <input type="checkbox" class="check-control" id="featured-product"  value="featured-product">
  432.                             <span class="check-mark"></span>
  433.                     </label>
  437.                   </li>
  439.                         {% endif %}
  440.                       {% endfor %}
  441.                     {% endif %}
  442.                   {% endif %}
  443.                 {% endfor %}
  444.                 {% endfor %}
  445.                   <span class="getshare" data-getting='{{ shareing|json_encode()}}'></span>
  447.                 <!-- <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="300">
  448.                   <input class="styled-checkbox" id="1" type="checkbox" value="1">
  449.                   <label for="1">1KG full chicken
  450.                     <span class="lable-img">
  451.                       <img alt="" class="" src="/static/assets/images/ing-01.jpg" />
  452.                     </span>
  453.                   </label>
  454.                 </li>
  455.                 <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="320">
  456.                   <input class="styled-checkbox" id="2" type="checkbox" value="2">
  457.                   <label for="2">1 large onion chopped
  458.                     <span class="lable-img">
  459.                       <img alt="" class="" src="/static/assets/images/ing-02.jpg" />
  460.                     </span>
  461.                   </label>
  462.                 </li>
  463.                 <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="340">
  464.                   <input class="styled-checkbox" id="3" type="checkbox" value="3">
  465.                   <label for="3">250G fresh sliced Mushroom
  466.                     <span class="lable-img">
  467.                       <img alt="" class="" src="/static/assets/images/ing-03.jpg" />
  468.                     </span>
  469.                   </label>
  470.                 </li>
  471.                 <li class="featured-product" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="360">
  472.                   <h3 class="sub-heading head-desktop">Featured Products</h3>
  474.                   <div class="product-holder">
  475.                     <h5 class="product-name">Rainbow Evaporated Milk Original (385ml)</h5>
  476.                     <div class="row">
  477.                       <div class="col-5 col-md-4 col-xl-4 product-img">
  478.                         <img alt="" class="" src="/static/assets/images/p1.png" />
  479.                       </div>
  480.                       <div class="col-7 col-md-8 col-xl-8 product-links">
  481.                         <h5 class="product-name head-mobile">Rainbow Evaporated Milk Original (385ml)</h5>
  482.                         <div class="links-holder">
  483.                           <button class="btn btn-primary ico-btn">
  484.                             <i><img src="/static/assets/images/shopping-cart.svg" alt=""></i>
  485.                             <span>Buy Now!!!!</span>
  486.                           </button>
  487.                           <a href="javascript:void:;" class="btn btn-link">Read More</a>
  488.                         </div>
  489.                       </div>
  490.                     </div>
  491.                   </div>
  493.                   <input class="styled-checkbox" id="featured-product" type="checkbox" value="featured-product">
  494.                   <label for="featured-product"></label>
  495.                 </li>
  496.                 <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="380">
  497.                   <input class="styled-checkbox" id="4" type="checkbox" value="4">
  498.                   <label for="4">1 TSP all seasoning (Flavored Salt)
  499.                     <span class="lable-img">
  500.                       <img alt="" class="" src="/static/assets/images/ing-04.jpg" />
  501.                     </span>
  502.                   </label>
  503.                 </li>
  504.                 <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="400">
  505.                   <input class="styled-checkbox" id="5" type="checkbox" value="5">
  506.                   <label for="5">3 TBSP unsalted butter
  507.                     <span class="lable-img">
  508.                       <img alt="" class="" src="/static/assets/images/ing-05.jpg" />
  509.                     </span>
  510.                   </label>
  511.                 </li>
  512.                 <li data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="420">
  513.                   <input class="styled-checkbox" id="6" type="checkbox" value="6">
  514.                   <label for="6">1 TBSP all-purpose flour
  515.                     <span class="lable-img">
  516.                       <img alt="" class="" src="/static/assets/images/ing-06.jpg" />
  517.                     </span>
  518.                   </label>
  519.                 </li> -->
  520.               </ul>
  521.               <!--End Ingredients List-->
  523.               <!--Start Share Buttons-->
  524.               <div class="ingredient-share-btns">
  525.                 <button class="d-inline-block d-md-none btn btn-secondary ico-btn s-ingredient">
  526.                   <i><img src="/static/assets/images/share.svg" alt=""></i>
  527.                   <span>{{"ShareIngredients"|trans }}</span>
  529.                   <!-- <= $this->translate("ShareIngredients"|trans }} -->
  530.                 </button>
  531.                 <button class="btn btn-primary ico-btn copytoclipboard">
  532.                   <i><img src="/static/assets/images/copy.svg" alt=""></i>
  534.                   <span>{{"CopytoClipboard"|trans }}</span></button>
  535.                   <!-- <= $this->translate("CopytoClipboard"|trans }} -->
  536.               </div>
  537.               <!--End Share Buttons-->
  539.             </div>
  540.             <!--End Ingredients Tab Content-->
  542.             <!--Start Instruction Tab Content-->
  543.             <div class="col-md-6 col-xl-6 tab-pane fade" id="instruction" role="tabpanel" aria-labelledby="instruction-tab">
  545.               <!--Start Instruction Video-->
  546.               {# <?php
  547.                 // $fsteps = $this->recipee->getSteps();
  548.                 // foreach ($fsteps as $fstep) {
  549.                 //   if($fstep['video']->getData()){
  550.                 //   $fvideo  =  $fstep['video']->getData()->getData();
  551.                 // }else{
  552.                 //   $fvideo = false;
  553.                 // }
  554.                 //   $fthmb  =  $fstep['thumbnail']->getData();
  555.                 //   // dd();
  556.                 //   break;
  557.                 // }
  560.                 //    $Mfsteps = $this->recipee->getSteps();
  561.                 // foreach ($Mfsteps as $Mfstep) {
  562.                 //   if($Mfstep['video_mobile']->getData()){
  563.                 //   $Mfvideo  =  $Mfstep['video_mobile']->getData()->getData();
  564.                 // }else{
  565.                 //   $Mfvideo = false;
  566.                 // }
  567.                 //   $Mfthmb  =  $fstep['thumbnail_mobile']->getData();
  568.                 //   // dd();
  569.                 //   break;
  570.                 // }
  574.               ?> #}
  575.             
  578.                       {% set insth = recipedetails.instruction_thumbnail  %}
  579.                     {% set insthm = recipedetails.instruction_thumbnail_mobile %}
  580.                       {% if recipedetails.instruction  %}
  581.                       {% set ins = recipedetails.instruction.data %}
  582.                         {% set res = true %}
  583.                       {% else %}
  584.                         {% set res = false %}
  585.                       {% endif %}
  587.                       {% if recipedetails.instruction_mobile %}
  588.                       {% set insm = recipedetails.instruction_mobile.data %}
  589.                         {% set res1 = true %}
  590.                     {% else %}
  591.                         {% set res1 = false %}
  592.                       {% endif %}
  594.                 
  598.           
  599.               <div class="instruction-video">
  600.               {% if ins is defined %}
  601.                   {% set res = true %}
  602.               
  603.                 <video class="video-js" controls playsinline preload="auto" height="395" poster="{{ insth }}"
  604.                       data-setup="{}">
  605.                       <source src="{{ins}}" type="video/mp4">
  606.                     </video>
  607.                   {% else %}
  608.                     <img  class="video-js" src="{{ insth }}">
  609.                   {% endif %}
  610.               </div>
  613.               <div class="instruction-video home-mobile d-none">
  614.               {% if insm is defined %}
  615.                     {% set res1 = true %}
  616.               
  617.                 <video class="video-js" controls playsinline preload="auto" height="395" poster="{{insthm}}"
  618.                       data-setup="{}">
  619.                       <source src="{{insm}}" type="video/mp4">
  620.                     </video>
  621.                   {% else %}
  622.                     <img  class="video-js" src="{{insthm}}">
  623.                 {% endif %}
  624.               </div>
  625.               <!--End Instruction Video-->
  627.               <!--Start Step by Step Guide-->
  629.               <div class="stepguide-holder abc">
  630.               {% set steps = recipedetails.steps %}
  631.               {% set SV = [] %}
  632.               {% for step in steps %}
  634.                     {% if step['video'].data is defined %}
  635.                     {% set SV = step['video'].data %}
  636.                     {% endif %}
  638.                       {% endfor %}
  639.                     {% if SV != '' %}
  640.                 <div class="btn-holder">
  641.                   <button class="btn btn-primary ico-btn" data-toggle="modal" data-target="#stepguide">
  642.                     <i class="icon-dishstep"></i>
  643.                     <span>{{"StepbyStepGuide"|trans }}</span>
  644.                     <!-- <= $this->translate("StepbyStepGuide"|trans }} -->
  645.                   </button>
  646.                 </div>
  647.             {% endif %}
  649.                 <ul class="list-unstyled stepguide-list">
  650.                 {% set steps = recipedetails.steps %}
  651.                   {% set stepcount = 0  %}
  652.                   {% set recipesteps = []  %}
  653.                   
  654.                     {% for step in steps %}
  655.                     
  657.                 
  658.                   {% if step['video'].data is defined %}
  659.                   {% set SV = step['video'].data %}
  660.                   {% endif %}
  661.                           
  662.                 
  664.                     <li data-aos="fade-left" data-aos-anchor-placement="top-bottom"  data-aos-duration="5{{ stepcount * 2 }}0">
  666.                       <label class="getingred check-cbox" for="step{{ stepcount + 1 }}">
  667.                           <input type="checkbox" class="check-control" id="step{{ stepcount + 1 }}" name="step{{ stepcount + 1 }}">
  668.                           <span class="check-mark"></span>     
  669.                           {% if locale == 'ar' %}               
  670.                             <span>{{ step.label_ar.data }}</span>      
  671.                             {% else %}
  672.                             <span>{{ step.label.data  }}</span>    
  673.                           {% endif %}           
  674.                       </label>        
  676.                       {% if locale == 'ar' %}               
  677.                             <p>{{ step.description_ar.data }}</p>
  678.                             {% else %}
  679.                           <p>{{ step.description.data }}</p>
  680.                           {% endif %}         
  681.                        
  682.                     
  683.                       {# <p><?php echo $con; ?></p> #}
  685.                     </li>
  686.                 
  687.                     {% set stepcount = stepcount + 1 %}
  688.                   {% endfor %}
  689.                 
  690.                     <span class="stepguide-holder-to-copy" data-recipesteps='{{ (recipesteps)|json_encode }}'></span>
  692.                 </ul>
  693.               </div>
  695.               <!--End Step by Step Guide-->
  697.             </div>
  698.             <!--End Instruction Tab Content-->
  700.           </div>
  701.           <!--End Tab Content-->
  702.         </div>
  703.         <!--End Tabs-->
  705.         <!--Start Tips & Facts-->
  706.         <!-- <div class="tipsfacts-holder"> -->
  708.           <!--Start -->
  709.           <!-- <div class="overflow-bg overflowhalf-bg tip-text">
  710.             <strong>
  711.               <i><img src="/static/assets/images/tip.svg" alt="" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500" /></i>
  712.               <= $this->translate("Tips & Facts"|trans }}
  713.               <= $this->translate("TipsAndFacts"|trans }}
  714.             </strong>
  715.             {# <span data-aos="zoom-in-left" data-aos-offset="200" data-aos-duration="500"><?php echo $this->recipee->getTips(|trans }}</span> #}
  716.           </div> -->
  718.           <!--Start Share Box-->
  719.           <!-- <div class="share-box">
  720.             <ul class="list-unstyled">
  721.               <li class="like" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="500"><a href="javascript:void:;">Like</a></li>
  722.               <li class="share" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="520"><a href="javascript:void(0);" class="recipeshare" tabindex="0"><?= $this->translate("share-btn"|trans }}</a></li>
  723.               <li class="save" style=" display: none;" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="540"><a href="javascript:void:;" >Save</a></li>
  724.               <li class="print" data-aos="zoom-in-up" data-aos-offset="200" data-aos-duration="560"><p onclick="window.print()"><?= $this->translate("Print-icon"|trans }}</p></li> -->
  726.               <!-- <= $this->translate("Like-btn"|trans }} -->
  727.               <!-- <= $this->translate("share-icon"|trans }}
  728.               <= $this->translate("Save-icon"|trans }}
  729.               <= $this->translate("Print-icon"|trans }} -->
  730.             <!-- </ul>
  731.           </div> -->
  732.           <!--End Share Box-->
  734.         <!-- </div> -->
  735.         <!--End Tips & Facts-->
  737.         <!--Start Nutrition Facts and Share Dish-->
  738.         <div class="nutrition-dish-holder">
  739.           <div class="row">
  740.             <!--Start Nutrition Facts-->
  741.             <div class="col-md-6 col-xl-6">
  742.               <div class="nutrition-holder">
  743.                 <h3 class="sub-sm-heading">{{"RecipePerServingInfo"|trans }}</h3>
  744.                 <!-- <= $this->translate("NutritionFactsbtn"|trans }} -->
  745.                 <div class="facts-board" data-aos="fade-right"  data-aos-duration="1500">
  746.                   <strong>{{"PerServing"|trans }}</strong>
  747.                   <!-- <= $this->translate("PerServing"|trans }} -->
  748.                   {% if recipedetails.nutrition_facts()[0].text.data is defined%}
  749.                   <p>{{recipedetails.nutrition_facts()[0].text.data}}</p>
  750.                   {% endif %}
  752.                   <a href="javascript:void:;" class="btn btn-primary ico-btn" data-aos="fade-up" data-aos-offset="300" data-aos-duration="300">
  753.                     <i class="icon-diet"></i>
  754.                     <span class ="gtm-contentval">{{"FullNutrition"|trans }}</span>
  755.                     <!-- <= $this->translate("FullNutrition"|trans }} -->
  756.                   </a>
  758.                 </div>
  759.               </div>
  760.             </div>
  761.             <!--End Nutrition Facts-->
  763.             <!--Start Share Dish-->
  764.             <div class="col-md-6 col-xl-6">
  765.               <div class="sharedish-holder">
  766.                 <h3 class="sub-sm-heading">{{"Shareyourdish"|trans }}</h3>
  767.                 <!-- <= $this->translate("Shareyourdish"|trans }} -->
  768.                 <div class="sharedish-box" data-aos="fade-left"  data-aos-duration="1500">
  769.                   <div class="row">
  770.                     <div class="col-8 col-xl-8 sharedish-info">
  771.                       <h5>{{"Didyoutrythisrecipe"|trans }}</h5>
  772.                       <p>{{"Clickapictureandmention"|trans }}<br />
  773.                         <!-- <a href="javascript:void:;">@rainbow.recipes</a><br /> -->
  774.                       {% if locale == 'ar' %}
  775.                           <a href="javascript:void:;">RainbowMilk@</a><br />
  776.                     {{"ortagus"|trans }}<br />
  777.                         <a href="javascript:void:;">RainbowKitchenMagic#</a><br />
  778.                     {{"inInstagramorTwitter"|trans }}
  779.                     {% else %}
  780.                         <a href="javascript:void:;">@RainbowMilk</a><br />
  781.                     {{"ortagus"|trans }}<br />
  782.                         <a href="javascript:void:;">#RainbowKitchenMagic</a><br />
  783.                     {{"inInstagramorTwitter"|trans }}
  784.                     {% endif %}
  785.                       
  786.                       </p>
  787.                     </div>
  788.                     <div class="col-4 col-xl-4 sharedish-img">
  789.                       <a href="https://www.instagram.com/rainbowmilk/" data-aos="fade-up" ><img src="/static/assets/images/instagram.png" alt="" class="insta"></a>
  790.                       <a href="https://twitter.com/rainbowmilk" data-aos="fade-up" ><img src="/static/assets/images/twitter1.png" alt="" class="twitter"></a>
  791.                     </div>
  792.                   </div>
  794.                 </div>
  795.               </div>
  796.             </div>
  797.             <!--End Share Dish-->
  798.           </div>
  799.         </div>
  800.         <!--End Nutrition Facts and Share Dish-->
  802.       </div>
  803.     </section>
  804.   <!--End Recipe Holder-->
  806.   <!--Start Similar Recipes-->
  807.     <section class="similar-recipes">
  808.         {% if featuredrecipe|length > 0 %}
  809.           <div class="container-xl custom-container-xl">
  810.             <h3 class="sub-sm-heading gtm-contentval">{{"SimilarRecipes"|trans }}</h3>
  811.             <!-- <= $this->translate("SimilarRecipes"|trans }} -->
  813.             <!--Start Slider-->
  814.             <div class="row custom-slider fill-dots similar-slider">
  815.                 {% for featured in featuredrecipe %}
  816.                 
  817.                     {% if recipedetails.name != featured.name %}
  819.                       {% if recipedetails.category[0].name == featured.category[0].name  %}
  820.                 
  821.                           <div class="col-xl-3 slide boxs" data-aos="fade-up">
  822.                           
  823.                             <div class="slide-box s-slide-wrap">
  825.                                 <figure class="similar-img">
  826.                                   <a  href="{{ featured.url }}"><img src="{{ featured.featured_image }}" alt="{{ featured.name }}" class="img-fluid"></a>
  827.                                 </figure>
  829.                                 <a class="remove-anchor-style1" href="{{ featured.url }}"><h3 class="similar-title">{{ featured.name }}</h3></a>
  830.                                 <!-- <php echo getmyavg($featured->getId()|trans }} -->
  831.                                         {% set rating = 0 %}
  832.                                         {% set totalrating = 0 %}
  833.                                         {% set totalreviews = 0 %}
  835.                                         {% for Reaturedreviews in featuredreviews %}
  837.                                           {% if Reaturedreviews.recipe_id.id ==  featured.id %}
  838.                                           
  839.                                               {% set totalreviews = totalreviews + 1 %}
  840.                                               {% set totalrating = totalrating + Reaturedreviews.rating %}
  841.                                               {% set rating = (totalrating / totalreviews)|round %}
  843.                                           {% endif %}
  845.                                         {% endfor %}
  847.                                         <!--Start Rating Star-->
  848.                                           <div class="rating-holder">
  849.                                               <fieldset class="ratings ratings-sm">
  850.                                                     {% if rating == '5' %}
  851.                                                       <input type="radio" value="5" checked>
  852.                                                     {% else %}
  853.                                                       <input type="radio"  value="5" >
  854.                                                     {% endif %}
  855.                                                     <label class="full" for="1rviewar5" title="5 stars"></label>
  857.                                                     {% if rating == '4' %}
  858.                                                       <input type="radio"  value="4" checked>
  859.                                                     {% else %}
  860.                                                       <input type="radio"  value="4" >
  861.                                                     {% endif %}
  862.                                                     <label class="full" for="1reviwstar4" title=" 4 stars"></label>
  864.                                                     {% if rating == '3' %}
  865.                                                       <input type="radio"  value="3" checked>
  866.                                                     {% else %}
  867.                                                       <input type="radio"  value="3" >
  868.                                                     {% endif %}
  869.                                                     <label class="full" for="1reviewsar3" title="3 stars"></label>
  871.                                                     {% if rating == '2' %}
  872.                                                       <input type="radio"  value="2" checked>
  873.                                                     {% else %}
  874.                                                       <input type="radio"  value="2" >
  875.                                                     {% endif %}
  876.                                                     <label class="full" for="1reviestar2" title="2 stars"></label>
  878.                                                     {% if rating == '1' %}
  879.                                                       <input type="radio"  value="1" checked>
  880.                                                     {% else %}
  881.                                                       <input type="radio"  value="1">
  882.                                                     {% endif %}
  883.                                                     <label class="full" for="1reviewar1" title="1 star"></label>
  884.                                               </fieldset>
  885.                                           </div> 
  886.                                         <!--End Rating Star-->
  888.                                           <div class="serving-info">
  889.                                             <ul class="list-unstyled">
  890.                                               <li class="time">{{ featured.time }}{{"mins"|trans }}</li>
  891.                                               <li class="serve">{{ featured.serving_options.Items[0].Serving }} {{"Serving"|trans }}</li>     
  892.                                             </ul>
  893.                                           </div>
  894.                                           
  895.                                           <div class="disc_mobile">
  896.                                             <p>{{ featured.description|striptags }}</p>
  897.                                           </div>
  898.                             </div>
  900.                           </div>
  901.                   
  902.                       {% endif %}
  904.                   {% endif %}
  906.                 {% endfor %}
  907.             </div>
  908.             <!--End Slider-->
  909.           </div>
  910.         {% endif %}
  911.         {#
  912.         <!-- <div class="stepguide-holder-to-copy" style="display: none;">
  914.                   <?php
  915.                   $steps = $this->recipee->getSteps();
  916.                   $stepcount = 0 ;
  917.                   foreach ($steps as $step) {
  918.                     $SL = @$step['label']->getData();
  919.                     $SD = @$step['description']->getData();
  920.                     $SL_AR = @$step['label_ar']->getData();
  921.                     $SD_AR = @$step['description_ar']->getData();
  922.                     $SV = @$step['video']->getData();
  923.                           //dd($SV);?>
  925.                           <?php if($this->getLocale() == 'ar'){ ?>
  926.                           <pack><?php echo $SL_AR; ?></pack>
  927.                           <?php  }else{ ?>
  928.                             <p><?php echo $SL; ?></p>
  929.                           <?php } ?>
  931.                       <?php if($this->getLocale() == 'ar'){ ?>
  932.                       <p><?php echo $SD_AR; ?></p>
  933.                       <?php  }else{ ?>
  934.                         <p><?php echo $SD; ?></p>
  935.                         <?php } ?>
  936.                       <p><?php echo $con; ?></p>
  938.                   <?php
  939.                   $stepcount++;
  940.                   }
  941.                   ?>
  944.         </div> -->
  945.         #}
  946.     </section>
  947.   <!--End Similar Recipes-->
  949.   <!--Start All Topics-->
  950.     <section class="all-topics">
  951.       <div class="container custom-container">
  952.         <h3 class="main-sm-heading">All Topics in {{recipedetails.name}}</h3>
  953.         <ul class="list-unstyled all-topics-list">
  954.       
  955.         {% for tags in recipedetails.tags %}
  956.           <li data-aos="fade-up" data-aos-offset="400" data-aos-duration="400"><a href="{{ '/' ~ locale ~ '/' ~ 'searchbytag'|trans ~ '/' ~ tags.tag }}">{{ tags.tag }}</a></li>
  957.       {% endfor %}
  958.         </ul>
  959.       </div>
  960.     </section>
  961.   <!--End All Topics-->
  963.   <!--Start Reviews & Ratings Section-->
  964.     <section class="reviews-ratings-section">
  966.       <!--Start Add Review Section-->
  967.       <div class="add-review-box">
  968.         <div class="container custom-container">
  969.           <div class="heading-holder">
  970.             <h2 class="sub-xl-heading">{{"Reviews&Ratings"|trans }}</h2>
  971.             <div class="rating-info">
  972.               <span class="rating-count">{{ ratingcount ? ratingcount : '0'  }} {{"Ratings"|trans }}</span><span class="review-count">{{ reviewcount ? reviewcount : '0'}} {{"Reviews"|trans }}</span>
  973.             </div>
  974.           </div>
  975.           <form action="../review" method="post" >
  976.             <div class="overflow-bg overflowhalf-bg add-review-head">
  977.               <div class="review-text">
  978.                 <p>{{"Yourinsightsareimportanttous."|trans }}</p>
  979.                 <p>{{"Giveusfeedbackonthisrecipe."|trans }}</p>
  980.               </div>
  981.               <div class="rating-holder">
  982.                 <!--Start Rating Star-->
  984.                 <fieldset class="rating">
  986.                     <input type="radio"  value="5"  checked>
  987.                     <label class="full" for="naddreviewstar5" title="5 stars"></label>
  989.                     <input type="radio"  value="4" checked>
  990.                     <label class="full" for="naddreviewstar4" title="4 stars"></label>
  992.                     <input type="radio"  value="3"  checked>
  993.                     <label class="full" for="naddreviewstar3" title="3 stars"></label>
  995.                     <input type="radio"  value="2"  checked>
  996.                     <label class="full" for="naddreviewstar2" title="2 stars"></label>
  998.                     <input type="radio"  value="1" checked>
  999.                     <label class="full" for="naddreviewstar1" title="1 star"></label>
  1000.                     
  1001.                 </fieldset>
  1002.                 <!--End Rating Star-->
  1004.                 <!--Start Rating and Review Count-->
  1006.                 <!--End Rating and Review Count-->
  1007.               </div>
  1008.               <input type="hidden" class="form-control" name="recipe_id" value="{{ recipedetails.id }}"/>
  1009.               <input type="hidden" class="form-control" name="recipe_url" value="{{ recipedetails.url }}"/>
  1010.               <a href="#cmnt" type="button" class="btn btn-primary ico-btn" data-aos="fade-up" data-aos-duration="400">
  1011.                 <i class="icon-favorite"></i>
  1012.                 <span>{{"AddReview&Ratings"|trans }}</span>
  1013.               </a>
  1014.             </div>
  1015.           </form>
  1017.         </div>
  1018.       </div>
  1019.       <!--End Add Review Section-->
  1021.       <!--Start Read Review Section-->
  1022.     
  1023.       <div class="read-reviews marge-top" id="cmnt">
  1024.         <div class="container custom-container">
  1026.           <div class="read-reviews-holder">
  1028.             <!--Start Add Reviews-->
  1029.             <div class="overflow-bg overflowhalf-bg add-review-holder">
  1031.               <div class="add-review-box">
  1033.                 <form action="../reviews" method="post" id="GiveReviewtoForm">
  1035.                     <div class="clearfix read-imgbox">
  1036.                         <figure class="read-img">
  1037.                           <img src="/static/assets/images/user.png" alt="">
  1038.                         </figure>
  1039.                     </div>
  1041.                     <div class="clearfix detail-box">
  1042.                         <strong class="name">&nbsp;</strong>
  1043.                     </div>
  1045.                     <div class="row write-comment" id = "message-alertt">
  1047.                         <div class="col-md-8 col-xl-10 comment-box">
  1048.                           <input type="text" class="form-control" name="name" placeholder="{{"Name"|trans }}" required/>
  1049.                           <input type="email" class="form-control" name="email" placeholder="{{"Email"|trans }}" required/>
  1050.                           <input type="hidden" class="form-control" name="recipe_id" value="{{recipedetails.id}}"/>
  1051.                           <input type="hidden" class="form-control" name="recipe_url" value="{{recipedetails.url}}"/>
  1052.                           <input type="hidden" class="form-control" name="rates" value="yes"/>
  1053.                           <textarea class="form-control" name="comment" required placeholder="{{"writeyourcommenthere"|trans }}"></textarea>
  1054.                         </div>
  1056.                         <div class="col-md-4 col-xl-2 comment-rating">
  1057.                           <strong>{{"Ratethisrecipe"|trans }}</strong>
  1059.                           <fieldset class="rating rating-white ratings-md">
  1061.                             <input type="radio" id="addreviewstar5" class="star-check5" name="addreviewrating" value="5">
  1062.                             <label class="full" for="addreviewstar5" title="5 stars"></label>
  1064.                             <input type="radio" id="addreviewstar4" class="star-check4" name="addreviewrating" value="4">
  1065.                             <label class="full" for="addreviewstar4" title=" 4 stars"></label>
  1067.                             <input type="radio" id="addreviewstar3" class="star-check3" name="addreviewrating" value="3">
  1068.                             <label class="full" for="addreviewstar3" title="3 stars"></label>
  1070.                             <input type="radio" id="addreviewstar2" class="star-check2" name="addreviewrating" value="2">
  1071.                             <label class="full" for="addreviewstar2" title="2 stars"></label>
  1073.                             <input type="radio" id="addreviewstar1" class="star-check1" name="addreviewrating" value="1" >
  1074.                             <label class="full" for="addreviewstar1" title="1 star"></label>
  1075.                           
  1076.                           </fieldset>
  1077.                         </div>
  1079.                     </div>
  1081.                   
  1082.                       <div class="g-recaptcha" data-sitekey="6LePrpohAAAAAH-q_y6n_eK9e8haH7s8_cGJy_8j" data-theme="light" data-size="normal" data-image="image" id="recaptcha"></div>
  1083.                     
  1084.                       <div class="col-md-8 col-xl-10 comment-box">
  1085.                       <div class="alert alert-success alert_display__opacity" id="success-alert-comment"><button class="close" data-dismiss="alert" type="button">x</button> Thank you for your feedback.</div>
  1086.                       <div class="alert alert-warning alert_display__opacity" id="warning-alertt-comment"><button class="close" data-dismiss="alert" type="button">x</button> Please check the the captcha form.</div>
  1087.                       <div class="alert alert-danger alert_display__opacity" id="failed-alert-comment"><button class="close" data-dismiss="alert" type="button">x</button> something went wrong.</div>
  1088.                       </div>
  1091.                     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  1093.                     <div class="btn-holder postcmnt" >
  1094.                       <button  type= "submit" name="typereivew"  class="btn btn-primary ico-btn" data-aos="fade-up" data-aos-duration="400">
  1095.                         <i><img src="/static/assets/images/icon-comment.svg" alt=""></i>
  1096.                         <span>{{"postcomment"|trans }}</span>
  1097.                       </button>
  1098.                     </div>
  1100.                 </form>
  1101.               </div>
  1103.             </div>
  1104.             <!--End Add Reviews-->
  1105.               {% set mycount = 0 %}
  1106.               {% for Count in count %}
  1107.               {% set mycount = Count.comments_counts %}
  1110.               {% endfor %}
  1111.               {% set readmore = 1 %}
  1112.               {% set read = "r1" %}
  1113.               
  1114.                 {% if reviews %}
  1115.                   {% for key , review in reviews %}
  1116.                     {% if review.name %}
  1117.                       {% if key == readmore * mycount %}
  1118.                         {% set readmore = readmore + 1 %}
  1119.                         {% set read = "r" ~ readmore %}
  1120.                       {% endif %}
  1122.                 <div class="box-holder read-review-box  {{ read == 'r1' ? read : read ~ ' d-none' }}">
  1123.                   <div class="clearfix read-imgbox">
  1124.                     <figure class="read-img">
  1125.                       <img src="/static/assets/images/user.png" alt="">
  1126.                     </figure>
  1128.                     <fieldset class="rating">
  1129.                   
  1130.                       {% if review.rating == '5' %}
  1131.                       <input type="radio" value="5" checked>
  1132.                       {% else %}
  1133.                       <input type="radio"  value="5" >
  1134.                       {% endif %}
  1135.                       <label class="full" for="1rviewar5" title="5 stars"></label>
  1137.                     
  1138.                       {% if review.rating == '4' %}
  1139.                       <input type="radio"  value="4" checked>
  1140.                       {% else %}
  1141.                       <input type="radio"  value="4" >
  1142.                       {% endif %}
  1143.                       <label class="full" for="1reviwstar4" title=" 4 stars"></label>
  1145.                     
  1146.                       {% if review.rating == '3' %}
  1147.                       <input type="radio"  value="3" checked>
  1148.                       {% else %}
  1149.                       <input type="radio"  value="3" >
  1150.                       {% endif %}
  1151.                       <label class="full" for="1reviewsar3" title="3 stars"></label>
  1153.                   
  1154.                       {% if review.rating == '2' %}
  1155.                       <input type="radio"  value="2" checked>
  1156.                       {% else %}
  1157.                       <input type="radio"  value="2" >
  1158.                       {% endif %}
  1159.                       <label class="full" for="1reviestar2" title="2 stars"></label>
  1161.                       
  1162.                       {% if review.rating == '1' %}
  1163.                       <input type="radio"  value="1" checked>
  1164.                       {% else %}
  1165.                       <input type="radio"  value="1">
  1166.                       {% endif %}
  1167.                       <label class="full" for="1reviewar1" title="1 star"></label>
  1168.                     </fieldset>
  1170.                   </div>
  1173.                   <div class="clearfix detail-box">
  1174.                     <strong class="name">{{ review.name}}</strong>
  1175.                     <small class="date">{{ review.mydate }}</small>
  1176.                   </div>
  1178.                   <p class="review-detail">
  1179.                   {{ review.comment}}
  1180.                   </p>
  1182.                 </div>
  1183.               
  1184.               {% endif %}
  1185.               {% endfor %}
  1186.               {% endif %}
  1190.           </div>
  1191.           {% set rev = reviews|length %}
  1192.           {% for Count in count %}
  1193.             {% if rev > Count.comments_counts %}
  1194.           
  1195.           <div class="btn-holder readmoreow" data-more='2' data-final='{{ Count.comments_counts }}'>
  1196.             <a href="javascript:void:;" class="btn btn-primary ico-btn" data-aos="fade-up" data-aos-duration="400">
  1197.               <i class="icon-commentary"></i>
  1198.               <span>Read More</span>
  1199.             </a>
  1200.           </div>
  1201.         {% endif %}
  1202.         {% endfor %}
  1204.         </div>
  1205.       </div>
  1206.       
  1207.       <!--End Read Review Section-->
  1209.     </section>
  1210.   <!--End Reviews & Ratings Section-->
  1212. <!-- Modal Section -->
  1213.   <!--Start Step By Step Modal-->
  1214.     <div class="modal fade white-modal stepguide-modal" id="stepguide" tabindex="-1" aria-labelledby="stepguideModalLabel"
  1215.       aria-hidden="true" data-backdrop="static">
  1216.       <div class="modal-dialog">
  1217.         <div class="modal-content">
  1219.           <div class="modal-header">
  1220.             <h5 class="modal-title" id="stepguideModalLabel">{{recipedetails.name}}</h5>
  1221.             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1222.               <span aria-hidden="true">&times;</span>
  1223.             </button>
  1224.           </div>
  1226.           <div class="modal-body">
  1227.             <div class="guide-slider">
  1228.                   {% for step in steps %}
  1229.                     <div class="slide">
  1230.                       <div class="video-holder">
  1231.                         {% if step['video'].data.data is defined %}
  1232.                           <video class="video-js"  muted autoplay loop playsinline preload="auto" height="485" poster=""
  1233.                             data-setup="{}">
  1234.                             <source src="{{step['video'].data.data}}" type="video/mp4">
  1235.                           </video>
  1236.                         {% else %}
  1237.                           <img class="video-js" src="{{step['thumbnail'].data}}">
  1238.                         {% endif %}
  1239.                       </div>
  1240.                       <ul class="list-unstyled stepguide-list">
  1241.                         <li>
  1242.                        
  1243.                           <strong>
  1244.                            {% if locale == 'ar' %}               
  1245.                             <span>{{ step.label_ar.data }}</span>      
  1246.                             {% else %}
  1247.                             <span>{{ step.label.data }}</span>    
  1248.                           {% endif %}    
  1249.                           
  1250.                           
  1251.                           </strong>
  1252.                            {% if locale == 'ar' %}               
  1253.                             <p>{{ step.description.data }}</p>      
  1254.                             {% else %}
  1255.                             <p>{{ step.description.data }}</p>    
  1256.                           {% endif %}    
  1257.                           
  1258.                    
  1259.                         </li>
  1260.                       </ul>
  1261.                     </div>
  1262.                 {% endfor %}
  1263.           
  1264.               <!-- <div class="slide">
  1265.                 <div class="video-holder">
  1266.                   <video class="video-js" controls preload="auto" height="485" poster="/static/assets/images/banner-vdo.png"
  1267.                     data-setup="{}">
  1268.                     <source src="/static/assets/video/videoplayback.mp4" type="video/mp4">
  1269.                   </video>
  1270.                 </div>
  1271.                 <ul class="list-unstyled stepguide-list">
  1272.                   <li>
  1273.                     <strong>Step 02</strong>
  1274.                     <p>In a food processor, combine the shallots, jalape�os, ginger, macadamia nuts, coriander and
  1275.                       turmeric with 2 tablespoons of the fish sauce and 2 tablespoons of the canola oil; puree until
  1276.                       smooth.</p>
  1277.                   </li>
  1278.                 </ul>
  1279.               </div>
  1281.               <div class="slide">
  1282.                 <div class="video-holder">
  1283.                   <video class="video-js" controls preload="auto" height="485" poster="/static/assets/images/banner-vdo.png"
  1284.                     data-setup="{}">
  1285.                     <source src="/static/assets/video/videoplayback.mp4" type="video/mp4">
  1286.                   </video>
  1287.                 </div>
  1288.                 <ul class="list-unstyled stepguide-list">
  1289.                   <li>
  1290.                     <strong>Step 03</strong>
  1291.                     <p>In a soup pot, heat the remaining 2 tablespoons of oil. Add the seasoning paste and cook over
  1292.                       moderate heat, stirring, until fragrant, about 2 minutes. Add the lemongrass and cook, stirring
  1293.                       occasionally, until the mixture darkens slightly and the oil separates, about 10 minutes.</p>
  1294.                   </li>
  1295.                 </ul>
  1296.               </div>
  1298.               <div class="slide">
  1299.                 <div class="video-holder">
  1300.                   <video class="video-js" controls preload="auto" height="485" poster="/static/assets/images/banner-vdo.png"
  1301.                     data-setup="{}">
  1302.                     <source src="/static/assets/video/videoplayback.mp4" type="video/mp4">
  1303.                   </video>
  1304.                 </div>
  1305.                 <ul class="list-unstyled stepguide-list">
  1306.                   <li>
  1307.                     <strong>Step 04</strong>
  1308.                     <p>Add the reserved shrimp stock, coconut milk, brown sugar and the remaining 2 tablespoons of fish
  1309.                       sauce. Simmer over moderate heat until the soup is reduced to 6 cups, about 15 minutes.</p>
  1310.                   </li>
  1311.                 </ul>
  1312.               </div>
  1314.               <div class="slide">
  1315.                 <div class="video-holder">
  1316.                   <video class="video-js" controls preload="auto" height="485" poster="/static/assets/images/banner-vdo.png"
  1317.                     data-setup="{}">
  1318.                     <source src="/static/assets/video/videoplayback.mp4" type="video/mp4">
  1319.                   </video>
  1320.                 </div>
  1321.                 <ul class="list-unstyled stepguide-list">
  1322.                   <li>
  1323.                     <strong>Step 05</strong>
  1324.                     <p>Meanwhile, in a large pot of boiling water, cook the rice noodles just until pliable, about 1
  1325.                       minute. Drain, shaking out the excess water. Transfer to 8 soup bowls.</p>
  1326.                   </li>
  1327.                 </ul>
  1328.               </div>
  1330.               <div class="slide">
  1331.                 <div class="video-holder">
  1332.                   <video class="video-js" controls preload="auto" height="485" poster="/static/assets/images/banner-vdo.png"
  1333.                     data-setup="{}">
  1334.                     <source src="/static/assets/video/videoplayback.mp4" type="video/mp4">
  1335.                   </video>
  1336.                 </div>
  1337.                 <ul class="list-unstyled stepguide-list">
  1338.                   <li>
  1339.                     <strong>Step 06</strong>
  1340.                     <p>Add the shrimp to the soup and cook until pink and curled, about 5 minutes. Season the soup with
  1341.                       salt and ladle it over the noodles. Garnish with lime wedges and serve.</p>
  1342.                   </li>
  1343.                 </ul>
  1344.               </div> -->
  1346.               <div class="slide">
  1347.                   <div class="video-holder">
  1348.                       {% if recipedetails.Final_Step_Image is defined %}
  1349.                         <img class="video-js" src="{{ recipedetails.Final_Step_Image }}">
  1350.                       {% endif %}
  1351.                       {#
  1352.                       <!-- <video class="video-js" controls playsinline preload="auto" height="395" poster="<?php echo $fstepim ?>"
  1353.                         data-setup="{}">
  1354.                         <source src="<php echo $video->getPath() . $video->getFilename(|trans }}" type="video/mp4">
  1355.                       </video> -->
  1356.                       #}
  1357.                   </div>
  1358.                   <div class="video-holder-mbl">
  1359.                     {% if recipedetails.Final_Step_Image_Mobile is defined %}
  1360.                         <img class="video-js" src="{{ recipedetails.Final_Step_Image_Mobile }}">
  1361.                     {% endif %}
  1362.                     {#
  1363.                     <!-- <video class="video-js" controls playsinline preload="auto" height="395" poster="<?php echo $fstepim ?>"
  1364.                       data-setup="{}">
  1365.                       <source src="<php echo $video->getPath() . $video->getFilename(|trans }}" type="video/mp4">
  1366.                     </video> -->
  1367.                     #}
  1368.                   </div>
  1369.                 <ul class="list-unstyled stepguide-list rd-laststep-content">
  1370.                   <li>
  1371.                     <strong>{{"Shareyourdish"|trans }}</strong>
  1372.                     <p>{{"Letusknowhowyourdishlooksprepared."|trans }}</p>
  1373.                     <div class="sharebox">
  1374.                       <div class="row">
  1375.                         <div class="col-xl-8">
  1376.                           <p class="title">{{"Clickapictureandmention"|trans }}</p>
  1377.                           <p><a href="javascript:void:;">@RainbowMilk</a> {{"ortagus"|trans }}</p>
  1378.                           <p><a href="javascript:void:;">#RainbowKitchenMagic</a> {{"onInstaorTwitter"|trans }}</p>
  1379.                         </div>
  1380.                         <div class="col-xl-4 sharebox-icons">
  1381.                           <a href="https://www.instagram.com/rainbowmilk/"><img src="/static/assets/images/instagram.png" alt="" class="insta"></a>
  1382.                           <a href="https://twitter.com/rainbowmilk"><img src="/static/assets/images/twitter.png" alt="" class="twitter"></a>
  1383.                         </div>
  1384.                       </div>
  1385.                     </div>
  1386.                   </li>
  1387.                 </ul>
  1388.               </div>
  1390.             </div>
  1392.             <div class="guide-dots"></div>
  1394.             <div class="guide-btns"></div>
  1396.           </div>
  1398.         </div>
  1399.       </div>
  1400.     </div>
  1401.   <!--End Step By Step Modal-->
  1403.   <!--Start-->
  1404.   <div class="modal fade custom-modal recrecipe-modal" id="recrecipe" tabindex="-1" aria-hidden="true"
  1405.     data-backdrop="static">
  1407.     <div class="modal-dialog"> 
  1408.       <div class="modal-content">
  1410.         <div class="modal-header">
  1411.      {{"SuggestedRecipe"|trans }} 
  1412.    
  1413.         </div>
  1414.         <div class="modal-body">
  1415.           <div class="row">
  1416.           {% for key , featured in myrecipes %}
  1417.           
  1418.             {% if recipedetails.category[0].name == featured.category[0].name %}
  1419.               {% if recipedetails.name != featured.name %}
  1420.                   {% if key == 1 %}
  1421.             <div class="col-md-7 col-xl-7 recrecipe-text">
  1422.             <a class="remove-anchor-style1" href="{{featured.url}}">
  1423.               <h5 class="main-xs-heading">{{ featured.name }}</h5>
  1424.             </a>
  1425.               <div class="rating-holder">
  1426.                 <!--Start Rating Star-->
  1427.                 {% set max = 0 %}
  1428.                 {% set n = reviews|length %}
  1429.                 {% if reviews %}
  1430.                   {% for Reviews in reviews %}
  1431.                     {% if Reviews.name %}
  1432.                       {% set max  = max + Reviews.rating %}
  1433.                     {% endif %}
  1434.                   {% endfor %}
  1435.                 {% endif %}
  1437.                
  1438.           {% if max != 0 %}
  1439.             {% set rating = (max / n)|round %}
  1440.           {% else %}
  1441.             {% set rating = 0 %}
  1442.           {% endif %}  
  1444.           {% if n > 0 %}
  1445.             {% for key , Reviews in reviews %}
  1446.             {% if key == 1 %}
  1447.           <fieldset class="ratings">
  1449.              
  1450.               {% if rating == 5 %}
  1451.               <input type="radio" value="5" checked>
  1452.               {% else %}
  1453.               <input type="radio"  value="5" >
  1454.              {% endif %}  
  1455.               <label class="full" for="1rviewar5" title="5 stars"></label>
  1457.              {% if rating == 4 %}
  1458.               <input type="radio"  value="4" checked>
  1459.                {% else %}
  1460.               <input type="radio"  value="4" >
  1461.              {% endif %}  
  1462.               <label class="full" for="1reviwstar4" title=" 4 stars"></label>
  1464.              {% if rating == 3 %}
  1465.               <input type="radio"  value="3" checked>
  1466.               {% else %}
  1467.               <input type="radio"  value="3" >
  1468.               {% endif %}  
  1469.               <label class="full" for="1reviewsar3" title="3 stars"></label>
  1471.               {% if rating == 2 %}
  1472.               <input type="radio"  value="2" checked>
  1473.               {% else %}
  1474.               <input type="radio"  value="2" >
  1475.             {% endif %}  
  1476.               <label class="full" for="1reviestar2" title="2 stars"></label>
  1478.                 {% if rating == 1 %}
  1479.               <input type="radio"  value="1" checked>
  1480.               {% else %}
  1481.               <input type="radio"  value="1">
  1482.              {% endif %}  
  1483.               <label class="full" for="1reviewar1" title="1 star"></label>
  1485.             </fieldset>
  1486.                 {% endif %}
  1487.               {% endfor %}
  1488.           {% else %}
  1489.             <fieldset class="rating">
  1490.                   <input type="radio" id="naddreviewstar5" name="naddreviewrating" value="5">
  1491.                   <label class="full" for="naddreviewstar5" title="5 stars"></label>
  1493.                   <input type="radio" id="naddreviewstar4" name="naddreviewrating" value="4">
  1494.                   <label class="full" for="naddreviewstar4" title=" 4 stars"></label>
  1496.                   <input type="radio" id="naddreviewstar3" name="naddreviewrating" value="3">
  1497.                   <label class="full" for="naddreviewstar3" title="3 stars"></label>
  1499.                   <input type="radio" id="naddreviewstar2" name="naddreviewrating" value="2">
  1500.                   <label class="full" for="naddreviewstar2" title="2 stars"></label>
  1502.                   <input type="radio" id="naddreviewstar1" name="naddreviewrating" value="1">
  1503.                   <label class="full" for="naddreviewstar1" title="1 star"></label>
  1504.                 </fieldset>
  1505.               
  1506.           {% endif %}
  1507.           <!--End Rating Star-->
  1509.           <!--Start Rating and Review Count-->
  1510.           <div class="rating-info">
  1511.             <span class="rating-count">{{ ratingcount ? ratingcount : '0'}} {{"Ratings"|trans }}</span><span class="review-count">{{ reviewcount ? reviewcount : '0'}} {{"Reviews"|trans }}</span>
  1512.           </div>
  1513.           <!--End Rating and Review Count-->
  1514.         </div>
  1515.               <div class="btn-box">
  1516.                 <a href="/{{locale}}/{{"all-recipes"|trans }}" class="btn btn-primary ico-btn">
  1517.                   <i class="icon-dish"></i>
  1518.                   <span>{{"ViewallRecipes"|trans }}</span>
  1519.                 </a>
  1520.               </div>
  1521.             </div>
  1522.             <div class="col-md-5 col-xl-5 recrecipe-img">
  1523.               <figure>
  1524.               <a  href="{{'/' ~ locale ~ '/' }}{{"all-recipes"|trans}}{{ '/' ~ featured.url }}"><img src="{{ featured.featured_image }}" alt="{{featured.name}}" ></a>
  1526.               </figure>
  1527.             </div>
  1528.                   {% endif %} 
  1529.                 {% endif %} 
  1530.               {% endif %}  
  1531.                 {# <?php  if ($this->recipee->getName() != $featured->getName()){ break; } ?> #}
  1532.             {% endfor %}
  1533.           </div>
  1534.         </div>
  1536.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1537.           <span aria-hidden="true">
  1538.             <i><img src="/static/assets/images/pop-close.svg" alt="" /></i>
  1539.               {{"Close"|trans }}
  1540.           </span>
  1541.         </button>
  1543.       </div>
  1544.     </div>
  1546.   </div>
  1548.     {% if (locale =='ar') %}
  1549.         {% set topMenu ="/en/all-recipes/" ~ recipedetails.url('en') %}
  1550.     {% else %}
  1551.         {% set topMenu ="/ar/كل-الوصفات/" ~ recipedetails.url('ar') %}
  1552.     {% endif %}
  1554. <script type="text/javascript">
  1555.   {# $(document).ready(function(){
  1556.       $('.recipeshare').click(function(){
  1557.           $('#myshare').modal('show');
  1558.       });
  1559.   }); #}
  1560.   var _TopMenuLink = "{{topMenu }}"
  1561. </script>
  1562. {% endblock %}