{% extends '@Flexy/FrontBundle/templates/booking/layout.html.twig' %}
{% block body %}
<style>
.countersection .count{
padding:10px !important;
font-size:18px;
}
</style>
<div class="body-wrapper">
<!-- Begin Header Area -->
<!-- Header Area End Here -->
<!-- Begin Li's Breadcrumb Area -->
<div class="breadcrumb-area menu-item">
<div class="container simple-container">
<div class="breadcrumb-content">
<ul>
<li><a href="{{path('front_home')}}">Accueil</a></li>
{% for category in singleOffer.categoriesProduct %}
<li ><a href="{{path('single_category_product',{id:category.id})}}">{{category}}</a></li>
{% endfor %}
<li class="active">{{singleOffer.name}}</li>
</ul>
</div>
</div>
</div>
<!-- Li's Breadcrumb Area End Here -->
<!-- content-wraper start -->
<div class="content-wraper">
<div class="container">
<div class="row single-product-area">
<div class="col-lg-8 col-md-5">
<!-- Details de produit Left -->
<div class="product-details-left sp-tab-style-left-page">
<div class="product-details-images slider-navigation-1">
<div class="lg-image menu-item">
<a class="popup-img venobox vbox-item" href="/uploads/{{asset(singleOffer.image)}}" data-gall="myGallery">
<img src="/uploads/{{asset(singleOffer.image)}}" alt="{{singleOffer.name}}">
</a>
</div>
{% for image in singleOffer.images %}
<div class="lg-image menu-item">
<a class="popup-img venobox vbox-item" href="/uploads/images/products{{asset(image.path)}}" data-gall="myGallery">
<img src="/uploads/images/products{{asset(image.path)}}" alt="{{image.alt}}">
</a>
</div>
{% endfor %}
</div>
<div class="tab-style-left">
<div class="sm-image"><img src="/uploads/{{asset(singleOffer.image)}}" alt="{{singleOffer.name}}"></div>
{% for image in singleOffer.images %}
<div class="sm-image"><img src="/uploads/images/products{{asset(image.path)}}" alt="{{image.alt}}"></div>
{% endfor %}
</div>
</div>
<!--// Details de produit Left -->
</div>
<div class="col-lg-4 col-md-5">
<div class="product-details-view-content pt-60">
<div class="product-info">
<h2>{{singleOffer.name}}</h2>
<p class="sell-by">
{% if singleOffer.brand %} Marque: <a href="#">{{singleOffer.brand}}</a>{% endif %} {% if singleOffer.vendor %} / <a href="#"> Par {{singleOffer.vendor}} </a>{% endif %}</span>
</p>
{% if singleOffer.skuCode %}
<span class="product-details-ref d-none">Reference: {{singleOffer.skuCode}}</span>
{% endif %}
<div class="price-box pt-20">
<span class="new-price new-price-2">MAD {{singleOffer.formattedPrice}}</span>
{% if singleOffer.oldPrice or singleOffer.oldPrice > 0 %}
<span class="old-price">MAD {{singleOffer.oldPrice / 100}}</span>
{% endif %}
</div>
{#<div class="countersection">
<div data-endat="{{singleOffer.endAt|date("Y/m/d")}}" class="li-countdown"></div>
</div>#}
<div style="margin-top:15px;" class="product-desc">
<p>
<span>
{{singleOffer.shortDescription|raw}}
</span>
</p>
</div>
<div class="rating-box pt-20">
<h5>Rating : {{singleOffer.rating|number_format(1, '.', ',')}}/5</h5>
<ul class="rating rating-with-review-item">
{% if singleOffer.rating > 0 %}
{% for stars in 1..singleOffer.rating|number_format %}
<li><i class="fa fa-star"></i></li>
{% endfor %}
{% if singleOffer.rating|number_format < 5 %}
{% for stars in singleOffer.rating|number_format..4 %}
<li class="no-star"><i class="fa fa-star"></i></li>
{% endfor %}
{% endif %}
{% else %}
<li class="no-star"><i class="fa fa-star"></i></li>
<li class="no-star"><i class="fa fa-star"></i></li>
<li class="no-star"><i class="fa fa-star"></i></li>
<li class="no-star"><i class="fa fa-star"></i></li>
<li class="no-star"><i class="fa fa-star"></i></li>
{% endif %}
<li class="menu-item" ><a href="#reviews" id="showcomments"> Avis ({{ singleOffer.comments|length }}) <i class="fa fa-comments" ></i> </a></li>
</ul>
</div>
{#<div class="single-add-to-cart">
<form action="#" class="cart-quantity d-none">
<button data-type="{{singleOffer.productType}}" data-limitedamount="{{singleOffer.vendor.limitedAmount}}" data-weight="{{singleOffer.weight}}" data-collecte="{{singleOffer.vendor.addressCollecte}}" data-vendor="{{singleOffer.vendor.id}}" data-id="{{singleOffer.id}}" data-name="{{singleOffer.name}}" data-image="uploads/{{asset(singleOffer.image)}}" data-price="{{singleOffer.formattedPrice}}" data-url="{{path('single_product',{id:singleOffer.id}) }}" class="add-cart add-to-cart active " >Réserver</button>
</form>
<a class="review-links add-cart add-to-cart mt-3" style="c" href="#" data-toggle="modal" data-target="#book-modal">Réserver maintenant</a>
</div>#}
<div class="single-add-to-cart">
<form action="#" class="cart-quantity">
{# <div class="quantity">
<label>Quantité</label>
<div class="cart-plus-minus">
<input class="cart-plus-minus-box" value="1" type="text">
<div class="dec qtybutton"><i class="fa fa-angle-down"></i></div>
<div class="inc qtybutton"><i class="fa fa-angle-up"></i></div>
</div>
</div>#}
<button data-type="{{singleOffer.productType}}" data-limitedamount="{{singleOffer.vendor.limitedAmount}}" data-weight="{{singleOffer.weight}}" data-collecte="{{singleOffer.vendor.addressCollecte}}" data-vendor="{{singleOffer.vendor.id}}" data-id="{{singleOffer.id}}" data-name="{{singleOffer.name}}" data-image="uploads/{{asset(singleOffer.image)}}" data-price="{{singleOffer.formattedPrice}}" data-url="{{path('single_product',{id:singleOffer.id}) }}" class="add-cart add-to-cart active add-product-to-cart" >Ajouter au panier</button>
</form>
</div>
<div class="booking-form-modal" >
<!-- Begin Prévisualiser | Modal Area -->
<div class="modal fade modal-wrapper" id="book-modal" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-inner-area row">
<div class="col-lg-12">
<div class="li-review-content">
<!-- Begin Feedback Area -->
<div class="feedback-area">
<div class="feedback">
<form action="#" class="cart-quantity">
<div class="quantity d-none">
<label>Quantité</label>
<div class="cart-plus-minus">
<input class="cart-plus-minus-box" value="1" type="text">
<div class="dec qtybutton"><i class="fa fa-angle-down"></i></div>
<div class="inc qtybutton"><i class="fa fa-angle-up"></i></div>
</div>
</div>
<div class="row" >
{% if singleOffer.brand.id == 8 %}
<div class="col-6" >
<p class="feedback-form">
<label for="feedback">Choisissez la date de depart</label>
<input type="datetime-local" name="date-start" />
</p>
</div>
<div class="col-6" >
<p class="feedback-form">
<label for="feedback">Choisissez la date d'arrivée</label>
<input type="datetime-local" name="date-end" />
</p>
</div>
<div class="col-6" >
<p class="feedback-form">
<label for="feedback">Nombre de personnes</label>
<select name="nbrPerson">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</p>
</div>
<div class="col-6" >
<p class="feedback-form">
<label for="feedback">Nombre de chambre</label>
<select name="nbrRooms">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
</div>
{% endif %}
<div class="col-12" >
<p class="feedback-form">
<label for="feedback">Laissez nous une note (Facultatif)</label>
<textarea id="feedback" name="comment" cols="45" rows="2" aria-required="true"></textarea>
</p>
</div>
</div>
<div class="feedback-input">
<div class="feedback-btn pb-15">
<a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Annuler</a>
<button data-limitedamount="{{singleOffer.vendor.limitedAmount}}" data-type="{{singleOffer.productType}}" data-weight="{{singleOffer.weight}}" data-id="{{singleOffer.id}}" data-collecte="{{singleOffer.vendor.addressCollecte}}" data-vendor="{{singleOffer.vendor.id}}" data-name="{{singleOffer.name}}" data-image="uploads/{{asset(singleOffer.image)}}" data-price="{{singleOffer.formattedPrice}}" data-url="{{path('single_offer',{id:singleOffer.id}) }}" class="add-cart add-to-cart active add-product-to-cart" >Réserver</button>
</div>
</div>
</form>
</div>
</div>
<!-- Feedback Area End Here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Prévisualiser | Modal Area End Here -->
</div>
<div class="menu-item product-additional-info pt-25">
<div class="product-social-sharing pt-25">
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
<li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i>Google +</a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram"></i>Instagram</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-lg-3 col-md-3 ">
<div class="block-reassurance ">
<div class="row " >
{% if singleOffer.vendor %}
<div class="col-12 p-3 " >
<div class="card actions p-3">
<h5>Vendeur : <span class="badge badge-warning" >{{singleOffer.vendor}}</span></h5>
<div>
<p>
<small>
100% Evaluation du vendeur<br>
67 abonnés <br>
</small>
<h6>Performance vendeur</h6>
<p>
<span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Expeditions : <span class="badge badge-success text-white" >Excellent</span>
<br>
<span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Qualité : <span class="badge badge-warning text-white" >Moyen</span>
<br>
<span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Avis consommateurs : <span class="badge badge-warning text-white" >Moyen</span>
</p>
</p>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>-->
</div>
</div>
</div>
<!-- content-wraper end -->
<!-- Begin Product Area -->
<div class="product-area pt-35">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="li-product-tab">
<ul class="nav li-product-menu">
<li><a class="active" data-toggle="tab" href="#description" id="description_pro"><span>Description</span></a></li>
<!-- <li><a data-toggle="tab" href="#product-details" id="description_technique"><span>Descriptif technique</span></a></li>-->
<li><a data-toggle="tab" href="#reviews" id="comments"><span>Avis</span></a></li>
</ul>
</div>
<!-- Begin Li's Tab Menu Content Area -->
</div>
</div>
<div class="tab-content">
<div id="description" class="tab-pane active show" role="tabpanel">
<div class="product-description">
<span>
{{singleOffer.description|raw}}
</span>
</div>
</div>
<div id="product-details" class="tab-pane p-5" role="tabpanel">
<table class="table table-sm ">
<tbody>
<tr>
<th scope="row">Modele</th>
<td>MOD{{singleOffer.skuCode}}</td>
</tr>
<tr>
<th scope="row">Marque</th>
<td>{{singleOffer.brand}}</td>
</tr>
<tr>
<th scope="row">SKU</th>
<td>{{singleOffer.skuCode}}</td>
</tr>
<tr>
<th scope="row">Poids (Kg)</th>
<td>0.9 </td>
</tr>
</tbody>
</table>
</div>
<div id="reviews" class="tab-pane" role="tabpanel">
<div class="product-reviews">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="rating-block">
<h4>AVIS </h4>
<h2 class="bold padding-bottom-7"> {{singleOffer.rating|number_format(1, '.', ',')}} <small>/ 5</small></h2>
{% if singleOffer.rating|number_format(1, '.', ',') > 0 %}
{% for stars in 1..singleOffer.rating|number_format %}
<button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
<i class="fa fa-star"></i>
</button>
{% endfor %}
{% if singleOffer.rating|number_format < 5 %}
{% for stars in singleOffer.rating|number_format..4 %}
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">
<i class="fa fa-star"></i>
</button>
{% endfor %}
{% endif %}
{% else %}
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i> </button>
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i> </button>
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i> </button>
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i> </button>
<button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i> </button>
{% endif %}
</div>
</div>
<div class="col-sm-3">
<h4> </h4>
<div class="pull-left">
<div class="pull-left" style="width:35px; line-height:1;">
<div style="height:9px; margin:5px 0;">5 <i class="fa fa-star"></i> </div>
</div>
<div class="pull-left" style="width:180px;">
<div class="progress" style="height:9px; margin:8px 0;">
{% set percentage = 0 %}
{% if singleOffer.getStars5 > 0 %}
{% set percentage = (singleOffer.getStars5 / singleOffer.comments|length ) * 100 %}
{% endif %}
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ percentage }}%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="pull-right" style="margin-left:10px;"> {{singleOffer.getStars5}}</div>
</div>
<div class="pull-left">
<div class="pull-left" style="width:35px; line-height:1;">
<div style="height:9px; margin:5px 0;">4 <i class="fa fa-star"></i> </div>
</div>
<div class="pull-left" style="width:180px;">
<div class="progress" style="height:9px; margin:8px 0;">
{% set percentage = 0 %}
{% if singleOffer.getStars4 > 0 %}
{% set percentage = (singleOffer.getStars4 / singleOffer.comments|length ) * 100 %}
{% endif %}
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="pull-right" style="margin-left:10px;">
{{singleOffer.getStars4}}
</div>
</div>
<div class="pull-left">
<div class="pull-left" style="width:35px; line-height:1;">
<div style="height:9px; margin:5px 0;">3 <i class="fa fa-star"></i></div>
</div>
<div class="pull-left" style="width:180px;">
<div class="progress" style="height:9px; margin:8px 0;">
{% set percentage = 0 %}
{% if singleOffer.getStars3 > 0 %}
{% set percentage = (singleOffer.getStars3 / singleOffer.comments|length ) * 100 %}
{% endif %}
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width:{{percentage}}%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="pull-right" style="margin-left:10px;">{{singleOffer.getStars3}}</div>
</div>
<div class="pull-left">
<div class="pull-left" style="width:35px; line-height:1;">
<div style="height:9px; margin:5px 0;">2 <i class="fa fa-star"></i></div>
</div>
<div class="pull-left" style="width:180px;">
<div class="progress" style="height:9px; margin:8px 0;">
{% set percentage = 0 %}
{% if singleOffer.getStars2 > 0 %}
{% set percentage = (singleOffer.getStars2 / singleOffer.comments|length ) * 100 %}
{% endif %}
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="pull-right" style="margin-left:10px;">{{singleOffer.getStars2}}</div>
</div>
<div class="pull-left">
<div class="pull-left" style="width:35px; line-height:1;">
<div style="height:9px; margin:5px 0;">1 <i class="fa fa-star"></i></div>
</div>
<div class="pull-left" style="width:180px;">
<div class="progress" style="height:9px; margin:8px 0;">
{% set percentage = 0 %}
{% if singleOffer.getStars1 > 0 %}
{% set percentage = (singleOffer.getStars1 / singleOffer.comments|length ) * 100 %}
{% endif %}
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="pull-right" style="margin-left:10px;">{{singleOffer.getStars1}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<hr/>
<div class="review-block">
{% for singleComment in singleOffer.comments %}
<div class="row">
<div class="col-sm-3">
<img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
<div class="review-block-name"><b> {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}</b></div>
<div class="review-block-date">{{singleComment.createdAt|date("Y-m-d H:i")}} </div>
</div>
<div class="col-sm-9">
<div class="review-block-rate">
{% for stars in 1..singleComment.rating %}
<button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
<i class="fa fa-star"></i>
</button>
{% endfor %}
{% if singleComment.rating < 5 %}
{% for stars in singleComment.rating..4 %}
<button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
<i class="fa fa-star"></i>
</button>
{% endfor %}
{% endif %}
</div>
<div class="review-block-title">COMMENTAIRES</div>
<div class="review-block-description">{{singleComment.comment|raw}}</div>
</div>
</div>
<hr/>
{% endfor %}
</div>
</div>
</div>
</div> <!-- /container -->
<div class="product-details-comment-block">
{% for singleComment in singleOffer.comments %}
<!-- <div class="comment-details">
<div class="comment-author-infos pt-25">
<span>
{{singleComment.customer.lastName}} {{singleComment.customer.firstName}}
<ul class="rating d-inline">
{% for stars in 1..singleComment.rating %}
<li><i class="fa fa-star"></i></li>
{% endfor %}
{% if singleComment.rating < 5 %}
{% for stars in singleComment.rating..4 %}
<li class="no-star"><i class="fa fa-star"></i></li>
{% endfor %}
{% endif %}
</ul>
</span>
<em>{{singleComment.createdAt|date("Y-m-d H:i")}}</em>
</div>
<p>{{singleComment.comment|raw}}</p>
</div>
<hr style="margin:0;">-->
{% endfor %}
{% if is_granted("ROLE_CUSTOMER") %}
<div class="review-btn">
<a class="review-links" href="#" data-toggle="modal" data-target="#mymodal">Ajouter un commentaire!</a>
</div>
<!-- Begin Prévisualiser | Modal Area -->
<div class="modal fade modal-wrapper" id="mymodal" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<h3 class="review-page-title">Ajouter un commentaire</h3>
<div class="modal-inner-area row">
<div class="col-lg-6">
<div class="li-review-product">
<img width="200px" src="/uploads/{{asset(singleOffer.image)}}" alt="Li's Product">
<div class="li-review-product-desc">
<p class="li-product-name">{{singleOffer.name}}</p>
<p>
<span>{{singleOffer.shortDescription|raw}}</span>
</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="li-review-content">
<!-- Begin Feedback Area -->
<div class="feedback-area">
<div class="feedback">
<h3 class="feedback-title">Votre avis</h3>
<form action="{{path('comment_product',{id:singleOffer.id})}}" method="POST">
<p class="your-opinion">
<label>Evaluer le produit</label>
<span>
<select name="rating" class="star-rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span>
</p>
<p class="feedback-form">
<label for="feedback">Votre commentaire</label>
<textarea id="feedback" name="comment" cols="45" rows="8" aria-required="true"></textarea>
</p>
<div class="feedback-input">
<div class="feedback-btn pb-15">
<a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Close</a>
<button class="register-button" type="submit">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
<!-- Feedback Area End Here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Prévisualiser | Modal Area End Here -->
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Area End Here -->
<!-- Begin Li's PC Portable Product Area -->
<section class="product-area li-laptop-product pt-30 pb-50">
{# <div class="container">
<div class="row">
<!-- Begin Li's Section Area -->
<div class="col-lg-12">
<div class="li-section-title">
<h2>
<span>Produits en relation</span>
</h2>
</div>
{#
<div class="row">
<div class="product-active owl-carousel">
{% for singleOffer in associatedProducts %}
{%
include "@Flexy/FrontBundle/templates/products/includes/_singleOffer.html.twig" with
{
singleOffer:singleOffer,
}
%}
{% endfor %}
</div>
</div>
#}
</div>
<!-- Li's Section Area End Here -->
</div>
</div>
</section>
<!-- Li's PC Portable Product Area End Here -->
<!-- Begin Footer Area -->
</div>
{% endblock %}
{% block javascripts %}
{{parent()}}
<script>
$(document).ready(function(){
$.ajax({
url: "{{path('departements_ajax')}}",
data:{
city:$("select[name='city']").val()
},
success:function(data){
$("select[name='departement']").html(data);
},
});
$("select[name='city'").change(function(){
$.ajax({
url: "{{path('departements_ajax')}}",
data:{
city:$(this).val()
},
success:function(data){
$("select[name='departement']").html(data);
},
});
});
$("#showcomments").click(function(){
$("#comments").addClass("active show");
$("#reviews").addClass("active show");
$("#description_technique").removeClass("active show");
$("#product-details").removeClass("active show");
$("#description_pro").removeClass("active show");
$("#description").removeClass("active show");
});
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//I'm adding this section so I don't have to keep updating this pen every year :-)
//remove this if you don't need it
let today = new Date(),
dd = String(today.getDate()).padStart(2, "0"),
mm = String(today.getMonth() + 1).padStart(2, "0"),
yyyy = today.getFullYear(),
nextYear = yyyy + 1,
dayMonth = "09/30/",
birthday = dayMonth + yyyy;
today = mm + "/" + dd + "/" + yyyy;
if (today > birthday) {
birthday = dayMonth + nextYear;
}
//end
const countDown = new Date(birthday).getTime(),
x = setInterval(function() {
const now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
}, 0)
}());
});
</script>
{% endblock %}