<style>
.hide_block {
display: none !important;
}
.show_block {
display: block !important;
}
.btn-coupon {
width: 330px;
display: block;
margin: 0;
margin-bottom: 15px;
background: #5ce1e6;
color: #fff;
border-color: #5ce1e6;
padding: var(--padding_btn_qv_add_to_cart) !important ;
margin-right:12px;
}
#str_timer>span {
border-bottom: 1px solid #b3b3b3;
margin-right: 10px;
font-size: 16px;
color: #505050;
}
.countdown_container {
margin-bottom: 20px;
margin-top: 20px;
}
.countdown_time{
margin-top: 0px;
/* background:#efefef; */
padding: 10px 10px 10px 0;
display: flex;
flex-wrap: wrap;
}
.countdown_time .timer-block{
width: max-content;
font-size: 18px;
font-weight: 500;
line-height: 29px;
color: #202020;

}
.countdown_time .timer-block span{
display: block;
text-align: center;

}
.timer-block {
display: flex;
}
.d-none{
display:none;
}
</style>


{% if end_date %}
<div id="str_timer_{{product.id}}" class="timer_{{serial}} align-items-center d-flex" >
<span class="pr-2">Closes in:</span>
<div class="timer-display countdown_time justify-content-center pr-0">
<div class="timer-block" id="day_block_{{serial}}">
<span class="timer-block__num js-timer-days_{{serial}}">00</span>
<span class="timer-block__unit pr-1" >D</span>
<!-- <span>&nbsp:&nbsp</span> -->
</div>
<div class="timer-block" id="hour_block_{{serial}}">
<span class="timer-block__num js-timer-hours_{{serial}}">00</span>
<span class="timer-block__unit pr-1" >H</span>
<!-- <span class="min_{{serial}}">&nbsp:&nbsp</span> -->
</div>
<div class="timer-block" id="minute_block_{{serial}}">
<span class="timer-block__num js-timer-minutes_{{serial}}">00</span>
<span class="timer-block__unit pr-1" >M</span>
<!-- <span class="sec_{{serial}}">&nbsp:&nbsp</span> -->
</div>
<div class="timer-block" id="second_block_{{serial}}">
<span class="timer-block__num js-timer-seconds_{{serial}}">00</span>
<span class="timer-block__unit" >S</span>
</div>
</div>

</div>

{% endif %}





<script type="text/javascript">
var second_{{serial}} = 1000,
minute_{{serial}} = second_{{serial}} * 60,
hour_{{serial}} = minute_{{serial}} * 60,
day_{{serial}} = hour_{{serial}} * 24;
var start_date_{{serial}}= new Date('{{- startdate -}}').getTime();
var countDown_{{serial}} = new Date('{{- end_date -}}').getTime();
var current_time_{{serial}}= new Date().getTime();
if(start_date_{{serial}} <= current_time_{{serial}}){
x_{{serial}} = setInterval(function() {

$('.btn11').addClass('hide_block');
var now_{{serial}} = new Date().getTime(),
distance_{{serial}} = countDown_{{serial}} - now_{{serial}};

if(distance_{{serial}} >= 0){
$('.add2coll-{{serial}}').addClass('hide_block');

}else{
$('.add2coll-{{serial}}').removeClass('hide_block');
$('.sold_out_prod_{{serial}}').show();
$(".single-product.whole_sells_{{serial}} a").removeAttr("href");
}
if(distance_{{serial}} < 0){
$('.timer_{{serial}}').addClass('hide_block');
$('.deal-coup-{{serial}}').addClass('hide_block');
}else{

if(Math.floor(distance_{{serial}} / (day_{{serial}}))==0){
$('#day_block_{{serial}}').addClass('hide_block');
}
if(Math.floor(distance_{{serial}} / (day_{{serial}}))>0 && Math.floor(distance_{{serial}} / (hour_{{serial}}))>0){
$('#second_block_{{serial}}').addClass('hide_block');
$('#minute_block_{{serial}}').addClass('hide_block');
$('.min_{{serial}}').addClass('hide_block');
$('.sec_{{serial}}').addClass('hide_block');
}
if(Math.floor(distance_{{serial}} / (day_{{serial}}))==0 && Math.floor(distance_{{serial}} / (hour_{{serial}}))>0){
$('#second_block_{{serial}}').addClass('hide_block');
$('.sec_{{serial}}').addClass('hide_block');
}
if(Math.floor(distance_{{serial}} / (day_{{serial}}))==0 && Math.floor(distance_{{serial}} / (hour_{{serial}}))==0){
$('#second_block_{{serial}}').removeClass('hide_block');
$('.sec_{{serial}}').removeClass('hide_block');
$('#minute_block_{{serial}}').removeClass('hide_block');
$('.min_{{serial}}').removeClass('hide_block');
$('.sec_{{serial}}').removeClass('hide_block');
$('#day_block_{{serial}}').addClass('hide_block');
$('#hour_block_{{serial}}').addClass('hide_block');
}
if(Math.floor(distance_{{serial}} / (hour_{{serial}}))==0){
$('#hour_block_{{serial}}').addClass('hide_block');
}
document.querySelector('.js-timer-days_{{serial}}').innerText = Math.floor(distance_{{serial}} / (day_{{serial}})),
document.querySelector('.js-timer-hours_{{serial}}').innerText = Math.floor((distance_{{serial}} % (day_{{serial}})) / (hour_{{serial}})),
document.querySelector('.js-timer-minutes_{{serial}}').innerText = Math.floor((distance_{{serial}} % (hour_{{serial}})) / (minute_{{serial}})),
document.querySelector('.js-timer-seconds_{{serial}}').innerText = Math.floor((distance_{{serial}} % (minute_{{serial}})) / second_{{serial}});


}

}, 1000)

}else{
$('.timer').addClass('hide_block');

}
</script>