{% extends "layout/layout.html.twig" %}
{% block title %}GFS::Menu Builder Detail
{% endblock %}
{% block content %}
<!--Menu Page Builder Banner Start-->
<section class="menu-page-builder-banner">
<div class="container container-sm">
<div class="row">
<div class="col-12 col-lg-6 menuBuilder-content-column">
<div class="upper-nav">
<div class="training-detail-container-box">
<div class="info-section">
<section class="bread-crumbs-section">
<div class="container container-lg">
<div class="bread-crumbs-section-box">
<div class="breadcrumb-holder">
<ol class="breadcrumb menuBuilder-breadcrumb">
<li class="breadcrumb-item"><a href="/{{app.request.locale}}">{{'Home'|trans}}</a></li>
<li class="breadcrumb-item"><a href="/{{app.request.locale}}/resources">{{'Resources'|trans}}</a></li>
<li class="breadcrumb-item">{{"Tools"|trans}}</li>
<li class="breadcrumb-item"><a href="/{{app.request.locale}}/menu-builder">{{"Menu Builder"|trans}}</a></li>
<li class="breadcrumb-item">{{menu_builder_details.name}}</li>
</ol>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<h1 class="title-lg">{{menu_builder_details.name}}</span>
</h1>
<div class="step-tags">
{% set length = menu_builder_details.tags|length %}
{% if length >= 4 %}
{% for i in 0..3 %}
<a href="javascript:;" class="tag">
<span>{{menu_builder_details.tags[i].tag_name}}
<img src="/static/assets/images/Ellipse.png" class="img-fluid" alt="Ellipse"/></span>
</a>
{% endfor %}
{% else %}
{% for tags in menu_builder_details.tags %}
<a href="javascript:;" class="tag">
<span>{{tags.tag_name}}
<img src="/static/assets/images/Ellipse.png" class="img-fluid" alt="Ellipse"/></span>
</a>
{% endfor %}
{% endif %}
</div>
<p>
{{menu_builder_details.description}}
</p>
{% set unitcost = 0 %}
{% set unitvalue = 0 %}
{% set multiply = 0 %}
{% set total_unit_cost = 0 %}
{% set serve = menu_builder_details.serves %}
{% for ingrident in menu_builder_details.serving_options %}
{% for ing in ingrident.ingredeints %}
{% if ing.recipe_ing.data is defined %}
{% 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' %}
{% set multiply = ((ing.multiply.data) * 1000) %}
{% set unitvalue = (multiply)/(menu_builder_details.serves) %}
{% else %}
{% set multiply = ing.multiply.data %}
{% set unitvalue = (multiply)/(menu_builder_details.serves) %}
{% endif %}
{% set unitcost = (unitvalue) * (ing.recipe_ing.data.price) %}
{% set total_unit_cost = total_unit_cost + unitcost %}
{% endif %}
{% endfor %}
{% endfor %}
{% set total_cost = total_unit_cost * serve %}
{% set vat_percentage = menu_builder_details.recipe_manu_vat_oercebtage %}
{% set total_cost_vat = ((total_cost * vat_percentage) / 100) %}
{% set total_cost = (total_cost - total_cost_vat) %}
{% set profit_percentage = (menu_builder_details.profit_percentage is not null) ? menu_builder_details.profit_percentage : 0 %}
{% set profit = ((total_cost * profit_percentage ) / (100)) %}
{% set menu_price = (total_cost + profit) %}
<div class = "d-md-flex d-lg-flex align-items-center d-xl-flex menu-builder-counter">
<div class="order-count-title menubuilder-serving-count-title mb-3 ">{{"Servings"|trans}}</div>
<div class="order-count-number justify-content-center">
<span class="minus" id="minusx"><img src="/static/assets/images/icon-minus-blue.svg" alt="icon minus"></span>
<input class="count numeric-remove-spiner valuechange" id="valuechangeprice" type="number" value="{{ menu_builder_details.serves}}"/>
<span class="plus" id="plusx"><img src="/static/assets/images/icon-plus-blue.svg" alt="icon plus"></span>
</div>
</div>
<div class="cost-card-area d-md-flex">
<div class="card">
<span>{{"Food Cost"|trans}}*</span>
<h4 id = "food_cost">{{total_cost|round(1)}}</h4>
<h6>{{"SAR"|trans}}</h6>
</div>
<div class="card">
<span>Menu Price*</span>
<h4 id = "food_price">{{menu_price|round(1)}}</h4>
<h6>{{"SAR"|trans}}</h6>
</div>
<div class="card">
<span>{{"Profit"|trans}}*</span>
<h4 id = "food_profit">{{profit|round(1)}}</h4>
<h6>{{"SAR"|trans}}</h6>
</div>
</div>
<div class="final-card-area">
<div class="frequently-bought">
<div class="frequently-bought-box">
<h5 class="title">Frequently Product</h5>
{% for product in menu_builder_details.serving_options.Items %}
{# {% for i in 0..product|length %} #}
{% for featured_product in product.recipe_feature_product %}
<div class="product-box product-box-horizon product-box-small">
<a href = '{{'/' ~ app.request.locale ~ '/' ~ 'product/' ~ featured_product.url}}'>
<figure class="slide-img">
<img src="{{featured_product.attrimage.Items[0]}}" alt="{{featured_product.name}}">
{# {% if featured_product.attrimage.Items[0] %}
{{ featured_product.attrimage.Items[0].thumbnail('354x244').getHTML({imgAttributes: {class:'',alt:"featured_product.name" }})|raw }}
{% endif %} #}
</figure></a>
<div class="slide-info">
<div class="">
<h5 class="title"><a href = '{{'/' ~ app.request.locale ~ '/' ~ 'product/' ~ featured_product.url}}'>{{featured_product.name}}</a>
{% set user = app.session.get('loginUID') %}
{% if user is not null %}
<span class=""> <img src="/static/assets/images/featured-like.svg" alt="featured like"></span>
{% else %}
<span class="logged-out"> <img src="/static/assets/images/featured-like.svg" alt="featured like"></span>
{% endif %}
</h5>
</div>
<div class="kg">{{featured_product.size}}</div>
<div class="inline-info btn-holder">
<div class="price">{{featured_product.region[0]['price'].data}}
{{featured_product.region[0]['currency_symbol'].data|trans}}</div>
{% set points = (((featured_product.region[0]['price'].data)/100)*10)|round %}
<div class="award d-none">
<i class="far fa-star"></i>{{"Earn"|trans}}
{{points}}
{{"Rewards Points"|trans}}</div>
</div>
<div class="frequently-product-buttons">
<a href="javascript:;" class="btn btn-custom btn-green" onclick="addCart(this, {{featured_product.id}}, 1)">{{"Buy Now"|trans}}</a>
{% set user = app.session.get('loginUID') %}
{% if user is not null %}
{% set points = (((featured_product.region[0]['price'].data)/100)*10)|round %}
<a href="javascript:;" class="btn btn-custom btn-green d-none" onclick="inventoryProgram(this,{{points}},{{featured_product.id}})">{{"Add to Inventory"|trans}}</a>
<div class="alert alert-success ml-0" id="success-alertt-inventory{{featured_product.id}}">
<button class="close" data-dismiss="alert" type="button"></button>Thank you for adding this product to Inventory.</div>
<div class="alert alert-warning ml-0" id="failed-alertt-inventory{{featured_product.id}}">
<button class="close" data-dismiss="alert" type="button"></button>
This product is already added to Inventory.</div>
{% else %}
<a href="javascript:;" class="btn btn-custom btn-green product-logged-out d-none">{{"Add to Inventory"|trans}}</a>
{% endif %}
</div>
<div class="product-inventry-alert"></div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
<p>* Based on approximate total plate food costs, including average distributor markup.</p>
</div>
<div class="col-12 col-lg-6 menuBuilder-image-column">
<div class="dish-image">
<img src="{{menu_builder_details.featured_image}}" class="img-fluid" alt="Manu Builder feature image">
</div>
<div class="extra-area">
<ul class="d-flex social-info recipe-info">
{% set user = app.session.get('loginUID') %}
{% if user is not null %}
{% if Liked|length == 0 %}
<li class='like' onclick="loyaltyProgram(this, {{ menu_builder_details.id }},'{{ menu_builder_details.name }}',30,'Recipe','Like' , '{{app.request.locale}}')">{{"Like"|trans}}</li>
{% else %}
<li class="liked">{{"Like"|trans}}</li>
{% endif %}
<li id = "add_to_menu"onclick="addtomenu(this , {{user}},{{ menu_builder_details.id }} , {{ menu_builder_details.serves }})">
<span><img src="/static/assets/images/addToMenu.svg" class="img-fluid " alt="addToMenu"></span> {{"Add To Menu"|trans}}</li>
<div class="alert alert-success ml-0" id="success-alertt-addtomenu">
<button class="close" data-dismiss="alert" type="button"></button>Thank you for adding this recipe to menu.</div>
<div class="alert alert-success ml-0" id="success-alertt-addtomenu_update">
<button class="close" data-dismiss="alert" type="button"></button>Thank you for updating this recipe to menu.</div>
<div class="alert alert-warning ml-0" id="failed-alertt-addtomenu">
<button class="close" data-dismiss="alert" type="button"></button>
Something went worng.</div>
<div class="alert alert-warning ml-0" id="failed-alertt-addtomenu_error_missing_params">
<button class="close" data-dismiss="alert" type="button"></button>
Some required values are null.</div>
<li onclick="loyaltyProgram(this, {{ menu_builder_details.id }},'{{ menu_builder_details.name }}',30,'Recipe','Like' , '{{app.request.locale}}')">
<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> {{"Share"|trans}}</li>
{% else %}
<li class='logged-out'>
<span><img src="/static/assets/images/like-menu.svg" class="img-fluid " alt="like-menu"></span> {{"Like"|trans}}</li>
<li class='add-menu-logged-out'>
<span><img src="/static/assets/images/addToMenu.svg" class="img-fluid " alt="addToMenu"></span> {{"Add To Menu"|trans}}</li>
<li>
<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> {{"Share"|trans}}</li>
{% endif %}
<li>
<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> {{"Download"|trans}}</li></a>
<li>
<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> {{"Print"|trans}}</li></a>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--Menu Page Builder Banner End-->
<section class="featured-recipes-section inner-featured-recipe product-using-products menu-builder-featured-recipe">
<div class="container container-sm">
{% if similar_menu_ideas|length > 0 %}
<h2 class="heading">Similar Menu Ideas</h2>
{% endif %}
<div class="featured-recipes">
<div class="custom-slider featured-recipes-slider">
{% for similar_menu_ideas_recipes in similar_menu_ideas %}
<div class="slide">
<div class="slide-holder">
<a href="/{{app.request.locale}}/menu-builder/{{similar_menu_ideas_recipes.url}}">
<figure class="slide-img">
<img src="{{similar_menu_ideas_recipes.featured_image}}" alt="{{similar_menu_ideas_recipes.name}}">
</figure>
</a>
<div class="slide-content">
<a href="/{{app.request.locale}}/menu-builder/{{similar_menu_ideas_recipes.url}}">
<h3>{{similar_menu_ideas_recipes.name}}</h3>
</a>
<p>{{similar_menu_ideas_recipes.short_description}}</p>
<div class="">
<a href="javascript:;">{{"With"|trans}}
{{similar_menu_ideas_recipes.featured_product[0].brands.name}}</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<section class="loyal-section d-none">
<div class="container-fluid p-0">
<div class="row">
<div class="col-12 col-lg-4">
<img src="/static/assets/images/loyal-image.svg" class="img-fluid loyal-section-image" alt="loyal-image">
</div>
<div class="col-12 col-lg-8">
<div class="custom-flex">
<div>
<div class="content">
<h3 class="title-sm">{{'Loyalty Program'|trans}}</h3>
<h2 class="title-lg">Lorem Epsum Lorem Lorem</h2>
<h2 class="title-lg">Lorem Epsum Lorem Lorem Lorem Lorem
<span>Lorem Lorem</span>
</h2>
</div>
</div>
<div class="btn-holder m-lg-auto">
<div class="btn-border">
<a href="javascript:void(0)" class="btn btn-custom btn-lg-o-black">Start Earning Now!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% if (app.request.locale =='ar') %}
{% set topMenu ="/en/menu-builder/" ~ menu_builder_details.url('en') %}
{% else %}
{% set topMenu ="/ar/menu-builder/" ~ menu_builder_details.url('ar') %}
{% endif %}
<script>
var _TopMenuLink = "{{ topMenu }}";
function addtomenu(element, userid, objectId, serving) {
var userid = userid;
var objectId = objectId;
var serving = serving;
var form_data = new FormData(); // Creates new FormData object
form_data.append("userid", userid);
form_data.append("objectId", objectId);
form_data.append("serving", serving);
$.ajax({
url: "/addtomenu",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success: function (response) {
console.log(response)
if (response.success == 1) { // document.getElementById('newsletter').reset();
$("#success-alertt-addtomenu_update").fadeTo(5000, 500).slideUp(500, function () {
$("#success-alertt-addtomenu_update").slideUp(500);
});
} else if(response.success == 2) {
$("#success-alertt-addtomenu").fadeTo(5000, 500).slideUp(500, function () {
$("#success-alertt-addtomenu").slideUp(500);
});
} else if(response.success == 3) {
$("#failed-alertt-addtomenu_error_missing_params").fadeTo(5000, 500).slideUp(500, function () {
$("#failed-alertt-addtomenu_error_missing_params").slideUp(500);
});
} else {
$("#failed-alertt-addtomenu").fadeTo(5000, 500).slideUp(500, function () {
$("#failed-alertt-addtomenu").slideUp(500);
});
}
}
})
}
// Menubuilder calculator start
$(document).ready(function () {
var userId = '{{ user }}';
var obId = {{ menu_builder_details.id }};
$("#valuechangeprice").on('keyup change', function () {
var countTxt = parseInt($('.count').val(), 10);
var unit_cost = {{total_unit_cost}} ;
var vat_percentage = {{vat_percentage}};
var unit_cost_vat = ((unit_cost * vat_percentage) / 100);
unit_cost = (unit_cost - unit_cost_vat );
var profit_percentage = {{profit_percentage}};
var unit_profit = ((unit_cost * profit_percentage)/ 100);
var unit_menu_price = (unit_cost + unit_profit);
$('#food_cost').text((unit_cost *countTxt).toFixed(1));
$('#food_price').text((unit_menu_price *countTxt).toFixed(1));
$('#food_profit').text((unit_profit *countTxt).toFixed(1));
$('#add_to_menu').attr('onclick', 'addtomenu( this ,'+ userId +', '+ obId +', '+ countTxt +')');
});
});
// Menubuilder calculator end
// Download and Print Recipe According to serving ingerident quantity srart
$(document).ready(function () {
var serving = {{ menu_builder_details.serves}};
$("a.directions-link").each(function() {
var $this = $(this);
const _href = $this.attr("href");
$(".valuechange").on('keyup change', function () {
var countTxt = parseInt($('.count').val(), 10);
$(".directions-link").attr("href", _href+"~portion="+countTxt);
});
$(".directions-link").attr("href", _href+"~portion="+serving);
console.log(countTxt);
});
});
// Download and Print Recipe According to serving ingerident quantity end
</script>
{% endblock %}