@extends('page')

@section('title')
  Vroeger of Later Luisterlijst
@endsection

@section('content')

<style>
  #clockdiv {
      vertical-align: middle;
  }
  
  #clockdiv span {
      padding: 5px;
      border-radius: 3px;
      background: rgb(200,210,255);
      display: inline-block;
      width: 2em;
      height: 2em;
      text-align: center;
      vertical-align: middle;
  }

  .smalltext{
      padding-top: 5px;
      font-size: 16px;
      color: black;
  }
</style>

<h2>Vroeger of Later Luisterlijst</h2>

<div class="panel panel-primary text-primary">
<div class="panel-body">
Helaas, stemmen kan niet meer. 'k Zou niet weten hoe... <br/>
Kijk hier vanaf maandag 23 december om 12:00 uur voor de volledige lijst.
</div>
</div>

<p>Op maandag 23 december van 12:00 tot 23:00 uur zendt NH Gooi Radio de Vroeger of Later Luisterlijst uit. Honderd van de beste Nederlandstalige liedjes, door jou &mdash; de luisteraar &mdash; in willekeurige volgorde gerangschikt.</p>

<p>Vanaf dat tijdstip kan je op deze pagina ook live meekijken en -luisteren met de uitzending, en vind je hier de volledige lijst.</p>

<p style="font-weight: bold; color: blue;" id="clockdiv">
    Nog
        <span class="days"></span> dagen,
        <span class="hours"></span> uur,
        <span class="minutes"></span> minuten en 
        <span class="seconds"></span> seconden
    tot de luisterlijst begint!
</p>

<script type="text/javascript">
function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds,
        'alreadyhappened': t <= 0
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
 
       var t = getTimeRemaining(endtime);
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.alreadyhappened) {
            clearInterval(timeinterval);
            clock.innerHTML = "";
        }
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date("December 23, 2019 12:00 UTC+1");
initializeClock('clockdiv', deadline);

@if(isset($submitted) && $submitted)
$("input,textarea").attr('disabled', 'disabled');
@else
setInterval(function() {
  var $keuzes = $(".row.keuze");
  kiesRandom( $keuzes[Math.floor(Math.random() * $keuzes.length)] );
}, 800);
$(function() { $(".row.keuze").each(function() { kiesRandom(this); }); });
@endif

</script>

@endsection