{% extends '@Flexy/FrontBundle/templates/booking/layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{% block body %}
<!-- Begin Body Wrapper -->
<div class="body-wrapper">
<div class="container simple-container">
<div class="row">
<!-- Begin Category Menu Area -->
<div class="col-lg-2 col-md-2" style="padding-left:3px;padding-right:3px;">
<!--Category Menu Start-->
<div class="category-menu">
<div class="category-heading">
<h2 class="categories-toggle"><span>categories</span></h2>
</div>
<div id="cate-toggle" class="category-menu-list" >
<ul>
{% for categoriesOffers in categoriesProduct %}
<li class="menu-item right-menu first" >
<a href="#{{categoriesOffers.id}}" >
{{ categoriesOffers.name}}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!--Category Category Menu End-->
</div>
<!-- Category Menu end Here -->
<!-- Begin Slider Area -->
<div class="col-lg-10 col-md-10" style="height:430px;overflow:hidden;padding-left:3px;padding-right:3px;" >
<div class="slider-area">
<div class="slider-active owl-carousel">
<!-- Begin Single Slide Area -->
<div style="background-image:url('https://res.cloudinary.com/simplotel/image/upload/x_0,y_128,w_1457,h_654,r_0,c_crop,q_90,fl_progressive/w_1457,f_auto,c_fit/sarovar-hotels---indias-leading-hotel-chain/Sarovar_Summer-offer_May-2019_Website-banner_kkjpuu');background-position: center;background-size:cover;" class="single-slide align-center-left animation-style-01 bg-1">
<div class="slider-progress"></div>
</div>
<!-- Single Slide Area End Here -->
<!-- Begin Single Slide Area -->
<div style="background-image:url('https://i0.wp.com/www.agoda.com/wp-content/uploads/2021/11/Shopee-Agoda-RG.png?fit=1262%2C707&ssl=1');background-position: center;background-size:cover;" class="single-slide align-center-left animation-style-01 bg-1">
<div class="slider-progress"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{% for categoriesOffers in categoriesProduct %}
<section id="{{ categoriesOffers.id}}" class="product-area pt-20 pb-0" >
<div class="container" >
<nav class="navbar navbar-light rounded " style="background-color:#E1BEE7;">
<span class="navbar-brand mb-0 h1 text-center " > {{ categoriesOffers.name}} </span>
</nav>
<div class="row container">
<!-- Begin Single Banner Area -->
{% for singleBrand in offrebrand %}
{% if singleBrand.categorie == categoriesOffers.id %}
<div class="col-lg-2 col-md-2 menu-item ">
<div class="single-banner">
{% if singleBrand.image %}
<a href="{{path('single_brand_product',{id:singleBrand.id})}}"> <img class="brand" src="/uploads/{{asset(singleBrand.image)}}" alt="" />
</a>
{% else %}
<a href="{{path('single_brand_product',{id:singleBrand.id})}}"> <img class="brand" height="136" src="{{asset("bundles/flexyfront/assets/images/picture.png")}}" alt="">
</a>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
<!-- <div class="col-lg-2 col-md-2 ">
<div class="single-banner">
<a href="#">
<img class="rounded" src="https://www.travelpesoph.com/public/uploads/service-11.jpg" alt="">
</a>
</div>
</div> -->
<!-- Single Banner Area End Here -->
</div>
</div>
</section>
{% endfor %}
<!-- Begin Deals Li's Special Product Area
<section class="product-area li-laptop-product Special-product pt-60 pb-45">
<div class="container">
<!-- <div class="row">
Begin Li's Section Area -->
<!-- <div class="col-lg-12">
<div class="li-section-title">
<h2>
<span>Hôtels</span>
</h2>
</div>
<div class="row">
<div class="special-offers owl-carousel">
{# {% for singleOffer in offers %}
{%
include "@Flexy/FrontBundle/templates/booking/singleOffer/_singleOffer.html.twig" with
{
singleOffer:singleOffer,
isDeal:true
}
%}
{% endfor %}
#}
</div>
</div>
</div>
</div>
</div>
</section>
Li's Deals Special Product Area End Here -->
<section class="product-area li-laptop-product Special-product pt-60 pb-45">
</section>
<div class="container simple-container">
<div class="row">
<!-- Begin Single Banner Area -->
<div class="col-lg-6 col-md-6 ">
<div class="single-banner">
<a href="#">
<img src="https://www.travelpesoph.com/public/uploads/service-11.jpg" alt="">
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 ">
<div class="single-banner">
<a href="#">
<img src="https://i.ytimg.com/vi/G2F6pOTxb8s/maxresdefault.jpg" alt="">
</a>
</div>
</div>
<!-- Single Banner Area End Here -->
</div>
</div>
</div>
<!-- Body Wrapper End Here -->
<!-- Begin Deals Li's Special Product Area -->
<section class="product-area li-laptop-product Special-product pt-60 pb-45">
</section>
<!-- Li's Deals Special Product Area End Here -->
{% endblock %}
{% block javascripts %}
{{parent()}}
<script>
$(".special-offers").owlCarousel({
loop: true,
nav: false,
dots: false,
autoplay: false,
autoplayTimeout: 5000,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-left"></i>'],
item: 4,
responsive: {
0: {
items: 1
},
480: {
items: 1
},
768: {
items: 3
},
992: {
items: 3
},
1200: {
items: 4
}
}
});
</script>
{% endblock %}