{#
/*
* Autheur:Marweni Marwen
* Email:Marwenimarwen63@gmail.com
* Date de création :13/1/2020
* modifier par :Salim abbessi
* Date de modification:15/01/2020
* Description: Page 5 sur 5
*/#}
{% extends 'Accueil/layoutAccueil.html.twig' %}
{% block LinksCss %}
{{ parent() }}
<link href="{{ asset ('css/Parent/css/layoutparent.css')}}" type="text/css" rel="stylesheet" >
<link href="{{ asset ('Accueil/css/album.css')}}" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block Head %}
{{ parent() }}
{% endblock %}
{% block Header %}
{% if app.user %}
{{ render(controller('App\\Controller\\EspaceParentController::headerparenrt')) }}
<style>
@media (max-width: 1200px) {
.imageLogo {
width: 145px !important;
height: 80.7px !important;
margin-left: 49px !important;
margin-top: -20px;
bottom: 0px !important;
}
}</style>
{% else %}
{{ render(controller('App\\Controller\\AccueilController::header')) }}
<style>
@media (max-width: 1200px) {
.imageLogo {
width: 145px !important;
height: 80.7px !important;
margin-left: 49px !important;
margin-top: -20px;
bottom: 45px !important;
}
}</style>
{% endif %}
{% endblock %}
{% block Content %}
<div class="parent">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"style="z-index: 1000000;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="text-align:center;" >
<h3 class="textpop"> Veuillez d'abord vous connecter !
</h3>
</div>
<div class="modal-footer" style="text-align:center;" >
<a href="/">
<button type="button" class="btn-primary"> OK </button> </a>
</div>
</div>
</div>
</div>
{% for produit in produit %}
{% if produit.labeleType!="Connexion" %}
<div id="{{produit.labeleType|replace({' ': ''})}}" class="carousel slide" data-ride="carousel" style="display: none;">
<div class="carousel-inner">
<div class="carousel-item activeweb">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-5 col-xs-5 col-sm-5" style="text-align:center">
<span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">×</span>
<img id="expandedImg" class="photoAlbum" src=" {{(produit.attachements[0].idAttachement.path)}}">
<div id="imgtext"></div>
<div class="row overflow">
{% for prod in produit.attachements %}
{% if prod.statut=="pageProduit" %}
<div class="column">
<img src="{{prod.idAttachement.path}}" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-7 col-xs-7 col-sm-7 divcont">
<div class="divRight">
<h2 class="titre">
{{ produit.labeleType}}
</h2>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
<h4 class="titreCaract">
Caractéristiques produit
</h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span></p>
</div>
</div>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/LesPlus5sur5.svg')}}">
<h4 class="titreCaract"> Les plus produit </h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {{ produit.plusDescription|nl2br }}</span></p>
</div>
</div>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
<h4 class="titreCaract">
Tarif & Frais de port
</h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {{ produit.tarifs|nl2br }}</span></p>
</div>
</div>
{% if app.user %}
{% if is_granted('ROLE_PARENT') %}
<button class="btn-primary dispnone" onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
{%endif%}
{% if is_granted('ROLE_ACC') %}
<button class="btn-primary dispnone" onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
{%endif%}
{%endif%}
{% if not app.user %}
<button class="btn-primary dispnone" data-toggle="modal" data-target="#exampleModal">Commander</button>
{%endif%}
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" onclick="plusSlides(-1)" role="button" data-slide="prev">
<span aria-hidden="true" ><img class="chev" src="{{ asset('images/300ppi/5sur5-fleche gauche.png')}}"></span>
</a>
<a class="carousel-control-next" onclick="plusSlides(1)" role="button" data-slide="next">
<img class="chev" src="{{ asset('images/300ppi/5sur5-fleche droite.png')}}">
</a>
</div>
</div>
{% endif %}
{% endfor %}
<div class="activemobile">
<div class="slider autoplay">
{% for produit in produit %}
{% if produit.labeleType!="Connexion" %}
<div class="col-sm-12 col-md-12 no-padding">
<div class="card">
<span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">×</span>
<img id="expandedImg2" class="card-img-top" src=" {{(produit.attachements[0].idAttachement.path)}}" >
<div id="imgtext2"></div>
<div class="row overflow">
{% for prod in produit.attachements %}
{% if prod.statut=="pageProduit" %}
{% if prod.idAttachement.path != produit.attachements[0].idAttachement.path %}
<div class="column">
<img src="{{prod.idAttachement.path}}" alt="Nature" style="width:100%" onclick="myFunction2(this);">
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="card-body">
<div class="descri1">
<h1 class="card-title">
{{ produit.labeleType}}
</h1>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
<h4 class="titreCaract">
Caracteristiques produit
</h4>
<p class="card-text1">
<span class="paraSpice"> {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span>
</p>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/LesPlus5sur5.svg')}}">
<h4 class="titreCaract">
Les plus produit
</h4>
<p class="card-text1"><span class="paraSpice"> {{ produit.plusDescription|nl2br }}</span></p>
</div>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
<h4 class="titreCaract">
Tarif & Frais de port
</h4>
<p class="card-text1"><span class="paraSpice">{{ produit.tarifs|nl2br }}</span></p>
{% if app.user %}
{% if is_granted('ROLE_PARENT') %}
<button class="dispnone btn-primary" onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
{%endif%}
{% if is_granted('ROLE_ACC') %}
<button class=" dispnone btn-primary " onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
{%endif%}
{%else%}
<button class=" dispnone btn-primary" data-toggle="modal" data-target="#exampleModal">Commander</button>
{%endif%}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block Footer %}
{{ parent() }}
{% endblock %}
{% block javascript %}
{{ parent() }}
<script>
function myFunction(imgs) {
$(imgs).parent().parent().prev().prev().attr('src', $(imgs).attr('src'));
{# var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";#}
}
</script>
<script>
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
});
</script>
<script>
function myFunction2(imgs) {
$(imgs).parent().parent().prev().prev().attr('src', $(imgs).attr('src'));
{# var expandImg = document.getElementById("expandedImg2");
var imgText = document.getElementById("imgtext2");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";#}
}
</script>
<script>
var slideIndex = 1;
$(document).ready(function ()
{
{% if showArt == "ALL" %}
var slides = document.getElementsByClassName("slide");
slides[slideIndex - 1].style.display = "block";
{% else %}
$id = "{{showArt|replace({' ': ''})}}";
$('.slide').each(function () {
$(this).css('display', 'none');
})
$('#' + $id).css('display', 'block');
{% endif %}
});
//
//
// showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
function showSlidePreci(n) {
console.log(n);
var idSLide = "";
$('.slide').each(function () {
$(this).css('display', 'none');
if ($(this).attr('id').indexOf(n) !== -1) {
idSLide = $(this).attr('id');
}
$('#' + idSLide).css('display', 'block');
});
}
</script>
{% endblock %}