{% extends 'base_front.html.twig' %}
{% block meta %}
<title>Produits du pack {{ pack.name }}</title>
<meta name="description" content="le {{ pack.name }} contient {{ pack.products|length }} produits à un prix attractif.">
{% endblock %}
{% block body %}
<div class="page-header" style="background: url({{ asset('images/background-page-header.jpg') }}) no-repeat center;background-size: cover">
<div class="container">
<div class="row">
<!-- page caption -->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="page-caption">
<h1 class="page-title">Pack {{ pack.name }}</h1>
</div>
</div>
<!-- /.page caption -->
</div>
</div>
<!-- page caption -->
<div class="page-breadcrumb">
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('front_home') }}" class="breadcrumb-link">Accueil</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Contenu du pack {{ pack.name }}</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- page breadcrumb -->
</div>
<!-- /.page-header -->
<!-- vendor-section -->
<div class="content">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-7 col-sm-12 col-12">
<h3>Ce pack contient les produits suivants :</h3>
{% for productPercent in pack.productPercents %}
<div class="vendor-thumbnail list-view">
<!-- Vendor thumbnail -->
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 border-right pr-0">
<div class="vendor-img">
<!-- Vendor img -->
<a href="{{ path('front_product_single', {'slug': productPercent.product.subCategories[0].categories[0].slug, 'subCategorySlug': productPercent.product.subCategories[0].subCategorySlug, 'product_id': productPercent.product.id, 'productSlug': productPercent.product.productSlug}) }}"><div class="zoomimg"><img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ productPercent.product.photos.first.url) }}" alt="" class="img-fluid"></div></a>
<div class="wishlist-sign">
{% if app.user and app.user.roles == ['ROLE_USER'] %}
{% set isWish = filter_service.getIfIsWish(app.user, productPercent.product) %}
{% if isWish %}
<a href="#" class="btn-wishlist" style="background-color:#ff4d4d;"><i class="fa fa-heart" style="color:#fff"></i></a>
{% else %}
<a href="#" class="btn-wishlist"><i class="fa fa-heart"></i></a>
{% endif %}
{% endif %}
</div>
</div>
</div>
<!-- /.Vendor img -->
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12 pl-0">
<div class="vendor-content">
<!-- Vendor Content -->
<h2 class="vendor-title"><a href="{{ path('front_product_single', {'slug': productPercent.product.subCategories[0].categories[0].slug, 'subCategorySlug': productPercent.product.subCategories[0].subCategorySlug, 'product_id': productPercent.product.id, 'productSlug': productPercent.product.productSlug}) }}" class="title">{{ productPercent.product.name }}</a></h2>
<p class="vendor-address">
{% for department in productPercent.product.departments %}
{{ department.name }}{% if not loop.last %},{% endif %}
{% else %}
Toute la France
{% endfor %}
</p>
<!-- /.Vendor meta -->
</div>
<div class="vendor-meta m-0">
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="vendor-price">
{{ productPercent.product.price|number_format(2, '.') }}€
</span>
<span class="vendor-text">Prix</span></div>
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="vendor-guest">
{{ productPercent.product.quantity }}
</span>
<span class="vendor-text">Quantité restante</span>
</div>
{% set notes = 0 %}
{% for avi in productPercent.product.avis %}
{% set notes = notes + avi.globalNote %}
{% endfor %}
{% set noteTotal = (notes > 0) ? notes / productPercent.product.avis|length : 0 %}
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="rating-star">
{% for i in 1..5 %}
{% if i < noteTotal %}
<i class="fa fa-star rated"></i>
{% else %}
<i class="fa fa-star rate-mute"></i>
{% endif %}
{% endfor %}
</span>
<span class="rating-count vendor-text">({{ productPercent.product.avis|length }})</span></div>
</div>
<!-- /.Vendor Content -->
</div>
</div>
</div>
{% else %}
<div class="vendor-thumbnail list-view p-4">Aucun service correspondant</div>
{% endfor %}
<!-- /.paginations -->
</div>
<!-- sidebar-section -->
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
<div class="sidebar-venue" >
<div class="card">
<div class="card-body">
<form method="post" action="{{ path('front_product_add_pack_basket', {'id': pack.id}) }}" id="form_add_bascket">
<div class="form-group">
<label for="quantity_product">Prix du pack : </label><br>
<div class="quantity buttons_added">
<span style="color:#A066F2;font-size:1.4em">{{ pack.price|number_format(2, '.') }}€</span>
</div>
</div>
<div class="form-group mt-5">
{% if app.session.get('packs') == pack.id %}
<button type="submit" class="btn btn-rounded btn-danger mt-3" id="btn_add">Supprimer du panier</button>
{% else %}
<button type="submit" class="btn btn-rounded btn-primary mt-3" id="btn_add">Ajouter au panier</button>
{% endif %}
</div>
<div id="message_form"></div>
</form>
</div>
</div>
</div>
</div>
<!-- /.sidebar-section -->
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('form_add_bascket');
form.addEventListener('submit', (e) => {
e.preventDefault();
let form = e.target;
const formData = new FormData(form);
fetch(form.action, { method: form.method, body: formData })
.then(response => response.json())
.then(data => {
if (data.message === 'ok') {
if (data.response === 'added') {
const btnAdd = document.getElementById('btn_add');
btnAdd.classList.replace('btn-primary', 'btn-danger');
btnAdd.textContent = 'Supprimer du panier';
const msgElt = document.getElementById('message_form');
msgElt.classList.add('text-success');
msgElt.classList.add('text-center');
msgElt.textContent = 'Produit ajouté au panier !';
} else {
const btnAdd = document.getElementById('btn_add');
btnAdd.classList.replace('btn-danger', 'btn-primary');
btnAdd.textContent = 'Ajouter au panier';
const msgElt = document.getElementById('message_form');
msgElt.classList.add('text-success');
msgElt.classList.add('text-center');
msgElt.textContent = 'Produit supprimé du panier !';
}
}
});
return false;
})
})
</script>
{% endblock %}