{% extends "layout/layout.html.twig" %}
{# {% block title %}GFS::Menu Builder{% endblock %} #}
{% block content %}
{% if editmode %}
{{'Recipe Categories'}}
{{ pimcore_relations("recipecategory", {
"types": ["object"],
"subtypes": {
"object": ["object"]
},
"classes": ["recipecategory"]
}) }}
{{'Recipe Brands'}}
{{ pimcore_relations("recipebrands", {
"types": ["object"],
"subtypes": {
"object": ["object"]
},
"classes": ["brands"]
}) }}
{% endif %}
{{
pimcore_areablock("content", {
"allowed": ["menu-builder-main-area"],
})
}}
<!--Start Product Box-->
{% if not editmode %}
<section class="product-result-container recipe-result-container menu-builder">
<div class="container container-sm">
<div class="row">
<div class="col-12 col-md-12 col-xl-3 filter-box">
<h4 class="title">{{'Filters'|trans}}</h4>
<div class="filder-options">
<div class="input-holder">
<input type="text" placeholder="{{'Search for product'|trans}}" class="form-control" name="query" id="search" value={{ filters.query }}>
</div>
</div>
<div class="filter-accordion">
<div class="card filter-card" id="filter1">
<div class="card-header">
<button type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
{{'Category'|trans}}
</button>
</div>
<div id="collapse1" class="collapse show" data-parent="#filter1">
<div class="card-body">
<ul class="list-unstyled check-list">
{% for recipecategories in pimcore_relations("recipecategory") %}
<li><input class="styled-checkbox category_checkbox" name='Category' id="{{recipecategories.id}}" type="checkbox" value="{{recipecategories.id}}" {{recipecategories.id}} {{ (recipecategories.id in filters.category_ids) ? 'checked' : '' }}>
<label for="{{recipecategories.id}}">{{recipecategories.recipecategoryname}}</label>
</li>
{% endfor %}
</ul>
<div class="btn-holder clear-filter">
<a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.category_checkbox')">{{'Clear Filter'|trans}}</a>
</div>
</div>
</div>
</div>
<div class="card filter-card" id="filter2">
<div class="card-header">
<button type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
{{'Brands'|trans}}
</button>
</div>
<div id="collapse2" class="collapse show" data-parent="#filter2">
<div class="card-body">
<ul class="list-unstyled check-list">
{% for recipe_brands in pimcore_relations("recipebrands") %}
<li><input class="styled-checkbox brand_checkbox" id="{{recipe_brands.id}}" type="checkbox" value="{{recipe_brands.id}}" {{recipe_brands.id}} {{ (recipe_brands.id in filters.brand_ids) ? 'checked' : ''}}>
<label for="{{recipe_brands.id}}">{{recipe_brands.name}}</label>
</li>
{% endfor %}
</ul>
<div class="btn-holder clear-filter">
<a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.brand_checkbox')">{{'Clear Filter'|trans}}</a>
</div>
</div>
</div>
</div>
<div class="card filter-card" id="filter3">
<div class="card-header">
<button type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
{{'Type'|trans}}
</button>
</div>
<div id="collapse3" class="collapse show" data-parent="#filter3">
<div class="card-body">
<ul class="list-unstyled check-list">
<li><input class="styled-checkbox type_checkbox" id="Lunch" type="checkbox" value="Lunch" {{ ('Lunch' in filters.meal_type) ? 'checked' : '' }}>
<label for="Lunch">{{'Lunch'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="Dinner" type="checkbox" value="Dinner" {{ ('Dinner' in filters.meal_type) ? 'checked' : '' }}>
<label for="Dinner">{{'Dinner'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="Dessert" type="checkbox" value="Dessert" {{ ('Dessert' in filters.meal_type) ? 'checked' : '' }}>
<label for="Dessert">{{'Dessert'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="Drink" type="checkbox" value="Drink" {{ ('Drink' in filters.meal_type) ? 'checked' : '' }}>
<label for="Drink">{{'Drink'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="Breakfast" type="checkbox" value="Breakfast" {{ ('Breakfast' in filters.meal_type) ? 'checked' : '' }}>
<label for="Breakfast">{{'Breakfast1'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="snack" type="checkbox" value="snack" {{ ('snack' in filters.meal_type) ? 'checked' : '' }}>
<label for="snack">{{'snack'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="bakery" type="checkbox" value="bakery" {{ ('bakery' in filters.meal_type) ? 'checked' : '' }}>
<label for="bakery">{{'bakery'|trans}}</label>
</li>
<li><input class="styled-checkbox type_checkbox" id="Appetizer" type="checkbox" value="Appetizer" {{ ('Appetizer' in filters.meal_type) ? 'checked' : '' }}>
<label for="Appetizer">{{'Appetizer'|trans}}</label>
</li>
</ul>
<div class="btn-holder clear-filter">
<a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.type_checkbox')">{{'Clear Filter'|trans}}</a>
</div>
</div>
</div>
</div>
<div class="apply-filter">
<a href="javascript:void(0)" onclick="searchFilter(this)" class="btn btn-custom btn-green">{{'Apply Filter'|trans}}</a>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-xl-9 product-results">
<div class="recipe-box-holder">
<div class="row">
{% for menu_recipes in recipes %}
<div class="col-12 col-md-6 col-lg-4 product-result">
<div class="slide">
<div class="slide-holder">
<a href="/{{app.request.locale}}/menu-builder/{{menu_recipes.url}}" tabindex="0">
<figure
class="slide-img">
{# <img src="{{menu_recipes.featured_image}}" alt="{{menu_recipes.name}}"> #}
{% if menu_recipes.featured_image %}
{{ menu_recipes.featured_image.thumbnail('354x244').getHTML({imgAttributes: {class:'',alt: menu_recipes.name}})|raw }}
{% endif %}
</figure>
</a>
<div class="slide-content">
<div class="frecipes-box">
<a href="/{{app.request.locale}}/menu-builder/{{menu_recipes.url}}" tabindex="0">
<h3>{{menu_recipes.name}}</h3>
</a>
<p>{{menu_recipes.short_description}}</p>
{% if menu_recipes.featured_product %}
<div class="chef-names">{{menu_recipes.featured_product[0].brands.name}}</div>
{% endif %}
</div>
<ul class="list-unstyled social-info recipe-info">
{% set user = app.session.get('loginUserName') %}
{% if user is not null %}
{% if menu_recipes.id in LikedId %}
<li class='liked'>{{'Like'|trans}}</li>
{% set break = true %}
{% else %}
<li class="like training_list" onclick="loyaltyProgram(this,{{menu_recipes.id}},'{{menu_recipes.name}}',30,'Recipe','Like' , '{{app.request.locale}}')">{{'Like'|trans}}</li>
{% endif %}
{% else %}
<li class="like logged-out">{{'Like'|trans}}</li>
{% endif %}
<li class="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_recipes.url}}' , '{{ " share goody recipe with your friends"|trans }}')">
<span onclick="loyaltyProgram(this,{{menu_recipes.id}},'{{menu_recipes.name}}',30,'Recipe','Share' , '{{app.request.locale}}')">{{'Share'|trans}}</span>
</li>
{# <li class="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_recipes.url}}' , '{{ "SHARE GOODY RECIPE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</li> #}
{# <li class="save" id="save">Save</li> #}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!--Start pagination Section-->
{% set page = app.request.get('page') %}
<section class="pagination-section">
<nav aria-label="Page navigation" class="goody-navigation">
<ul class="pagination justify-content-center">
<li class="page-item">
{% if total_pages > 1 %}
{% if page == 1 or page == ''%}
<a class="page-link">{{"First"|trans}}</a>
{% else %}
<a class="page-link" href="{{ pimcore_url({'page': 1}) }}">{{"First"|trans}}</a>
{% endif %}
{% endif %}
</li>
{% if total_pages > 1 %}
<li class="page-item {{ (page == 1 or page == '') ? 'active' : '' }}">
<a class="page-link" href="{{ pimcore_url({'page': 1}) }}" tabindex="-1">1</a>
</li>
{% endif %}
{% for i in 1..total_pages %}
{% if i != 1 and i != total_pages %}
<li class="page-item {{ (loop.index == page) ? 'active' : '' }}">
<a class="page-link" href="{{ pimcore_url({'page': i}) }}">{{i}}</a>
</li>
{% endif %}
{% endfor %}
{% if total_pages > 1 %}
<li class="page-item {{ (page == total_pages) ? 'active' : '' }}">
<a class="page-link" href="{{ pimcore_url({'page': total_pages}) }}">{{total_pages}}</a>
</li>
<li class="page-item">
{% if page == total_pages %}
<a class="page-link">{{"Last"|trans}}</a>
{% else %}
<a class="page-link" href="{{ pimcore_url({'page': total_pages}) }}">{{"Last"|trans}}</a>
{% endif %}
</li>
{% endif %}
</ul>
</nav>
</section>
<!--End pagination Section-->
</div>
</div>
</div>
</section>
{% endif %}
<!--End Product Box-->
<!--Start GFS Loyalty Program-->
{{
pimcore_areablock("content-loyalty", {
"allowed": ["loyalty-banner"],
})
}}
<section class="menu-builder-loyalty d-none">
<div class="info-media loyalty-program">
<div class="container container-sm">
<div class="info-section">
<h5>{{'Loyalty Program'|trans}}</h5>
<h4>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading')}}</h4>
<h3>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading1')}}</h3>
<p>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('description')}}</p>
<div class="btn-holder">
<div class="btn-border">
<a href="/{{app.request.locale}}/loyalty-program" class="btn btn-custom btn-green">{{'Discover More'|trans}}</a>
</div>
<div class="newsletter-subscribe">
<h4 class="cstsmLP">"{{'Coming Soon'|trans}}"</h4>
</div>
<div class="btn-border btn-border-black d-none">
<a href="javascript:void(0)" class="btn btn-custom btn-lg-o-black">Sign-up Now!</a>
</div>
</div>
</div>
<div class="media-section ">
<img src="{{loyaltybanner.sliders[0].slider_image.data}}" alt="loyalty banner slide image">
</div>
</div>
</div>
</section>
{% if (app.request.locale =='ar') %}
{% set topMenu ="/en/menu-builder" %}
{% else %}
{% set topMenu ="/ar/menu-builder" %}
{% endif %}
<script>
var _TopMenuLink = "{{ topMenu }}";
</script>
<!--End GFS Loyalty Program-->
<script>
// {# $('.pagination li').on('click', function () {
// $('.active').removeClass('active');
// $(this).addClass('active');
// });
// #}
function searchFilter(e) {
let new_path = 'category_id=';
let new_brand = '&brand_id=';
let new_type = '&meal_type=';
let category_count = 1
let brand_count = 1
let cuisine_count = 1
let type_count = 1
let query = '';
$('.category_checkbox').each(function (index, value) {
if ($(this).is(':checked')) {
if (category_count > 1) {
new_path += '_';
}
new_path += $(this).val();
category_count++;
}
});
$('.brand_checkbox').each(function (index, value) {
if ($(this).is(':checked')) {
if (brand_count > 1) {
new_brand += '_';
}
new_brand += $(this).val();
brand_count++;
}
});
$('.type_checkbox').each(function (index, value) {
if ($(this).is(':checked')) {
if (type_count > 1) {
new_type += '_';
}
new_type += $(this).val();
type_count++;
}
});
if ($('#search').val()) {
query = '&query=' + $('#search').val();
}
window.location.href = '?' + new_path + new_brand + new_type + query;
}
function clearFilter(c) {
$(c).each(function (index, value) {
$(this).prop('checked', false);
});
}
</script>
{% endblock %}