@extends('layouts/sidebar')

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

@section('content')
<style>
  tr.uur-header th {
    background-color: #0ba3e1 !important;
    color: white;
    text-align: center;
  }

  #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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<h2>Vroeger of Later Luisterlijst</h2>

<p style="font-weight: bold; color: blue;" id="clockdiv">
    Je hoort de nummer &eacute;&eacute;n over 
        <span class="days"></span> dagen,
        <span class="hours"></span> uur,
        <span class="minutes"></span> minuten en 
        <span class="seconds"></span> seconden!
</p>

<table class="table table-striped table-small">

<tr class="uur-header"><th colspan="3">UUR 1 | 13:00 - 14:00</th><th>Stand 2019</th></tr>

<tr><th>100</th><td>Stef Bos</td><td>Is dit nu later</td><td>(Nieuw)</td></tr>
<tr><th>99</th><td>Circus Custers</td><td>Monica</td><td>20 (-79)</td></tr>
<tr><th>98</th><td>Rob de Nijs</td><td>Malle Babbe</td><td>28 (-70)</td></tr>
<tr><th>97</th><td>Ben Cramer</td><td>De clown</td><td>39 (-58)</td></tr>
<tr><th>96</th><td>Adele Bloemendaal</td><td>De jaren zestig</td><td>50 (-46)</td></tr>
<tr><th>95</th><td>Angela Groothuizen</td><td>Vinkeveen</td><td>48 (-47)</td></tr>
<tr><th>94</th><td>Jules de Corte</td><td>Ik zou wel eens willen weten</td><td>44 (-50)</td></tr>
<tr><th>93</th><td>Drs. P</td><td>Dodenrit</td><td>54 (-39)</td></tr>
<tr><th>92</th><td>Clouseau</td><td>Passie</td><td>83 (-9)</td></tr>
<tr><th>91</th><td>Claudia de Breij</td><td>Ik mis je zo graag</td><td>72 (-19)</td></tr>
<tr><th>90</th><td>Liesbeth List</td><td>Heb het leven lief</td><td>(Nieuw)</td></tr>
<tr><th>89</th><td>Kadanz</td><td>In het donker</td><td>(Nieuw)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 2 | 14:00 - 15:00</th><th>Stand 2019</th></tr>

<tr><th>88</th><td>Bazart</td><td>Goud</td><td>64 (-24)</td></tr>
<tr><th>87</th><td>Alex Klaasen</td><td>Gewoon Opnieuw</td><td>(Nieuw)</td></tr>
<tr><th>86</th><td>Maggie McNeal</td><td>Terug naar de kust</td><td>(Nieuw)</td></tr>
<tr><th>85</th><td>Don Quischocking</td><td>Opa's honderdste verjaardag</td><td>(Nieuw)</td></tr>
<tr><th>84</th><td>Rowwen Heze</td><td>Auto vliegtuug</td><td>82 (-2)</td></tr>
<tr><th>83</th><td>Diggy Dex & JW Roy</td><td>Treur niet (ode aan het leven)</td><td>95 (+12)</td></tr>
<tr><th>82</th><td>Grof geschut</td><td>Verliefd</td><td>69 (-13)</td></tr>
<tr><th>81</th><td>Cornelis Vreeswijk</td><td>Misschien wordt het morgen beter</td><td>84 (+3)</td></tr>
<tr><th>80</th><td>Alex Roeka</td><td>Noem 't geen Liefde</td><td>(Nieuw)</td></tr>
<tr><th>79</th><td>Bløf</td><td>Aan de kust</td><td>(Nieuw)</td></tr>
<tr><th>78</th><td>Marco Borsato</td><td>Dromen zijn bedrog</td><td>(Nieuw)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 3 | 15:00 - 16:00</th><th>Stand 2019</th></tr>

<tr><th>77</th><td>Eefje de Visser</td><td>Stilstand</td><td>(Nieuw)</td></tr>
<tr><th>76</th><td>Raymond van het Groenewoud</td><td>Twee meisjes</td><td>75 (-1)</td></tr>
<tr><th>75</th><td>Wim Sonneveld</td><td>Aan de Amsterdamse grachten</td><td>(Nieuw)</td></tr>
<tr><th>51</th><td>Youp van 't Hek</td><td>Niemand weet hoe laat het is</td><td>74 (+23)</td></tr>
<tr><th>73</th><td>Doe maar</td><td>Belle Helene</td><td>(Nieuw)</td></tr>
<tr><th>72</th><td>Acda en de Munnik</td><td>Niet of nooit geweest</td><td>97 (+25)</td></tr>
<tr><th>71</th><td>Herman van Veen</td><td>Fiets</td><td>(Nieuw)</td></tr>
<tr><th>70</th><td>Boudewijn de Groot</td><td>Weltrusten meneer de President</td><td>96 (+26)</td></tr>
<tr><th>69</th><td>Maarten van Roozendaal</td><td>Doden met verlof</td><td>93 (+24)</td></tr>
<tr><th>68</th><td>Is Ook Schitterend</td><td>Voltooid verleden tijd</td><td>(Nieuw)</td></tr>
<tr><th>67</th><td>Maaike Ouboter</td><td>Dat ik je mis</td><td>(Nieuw)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 4 | 16:00 - 17:00</th><th>Stand 2019</th></tr>

<tr><th>66</th><td>Kiki Schippers</td><td>Guus</td><td>56 (-10)</td></tr>
<tr><th>65</th><td>De Dijk</td><td>Als ze er niet is</td><td>45 (-20)</td></tr>
<tr><th>64</th><td>Cornelis Vreeswijk</td><td>De nozem en de non</td><td>100 (+36)</td></tr>
<tr><th>63</th><td>Drs. P</td><td>Veerpont</td><td>(Nieuw)</td></tr>
<tr><th>62</th><td>Clouseau</td><td>Laat me nu toch niet alleen</td><td>34 (-28)</td></tr>
<tr><th>61</th><td>Kommil Foo</td><td>Madrid</td><td>(Nieuw)</td></tr>
<tr><th>60</th><td>Ramses Shaffy</td><td>Sammy</td><td>(Nieuw)</td></tr>
<tr><th>59</th><td>Frans Halsema & Jenny Arean</td><td>Vluchten kan niet meer</td><td>40 (-19)</td></tr>
<tr><th>58</th><td>Doe Maar</td><td>De bom</td><td>16 (-42)</td></tr>
<tr><th>57</th><td>Hannelore Bedert</td><td>Altijd nooit meer</td><td>49 (-8)</td></tr>
<tr><th>56</th><td>Maarten van Roozendaal</td><td>Moe</td><td>23 (-33)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 5 | 17:00 - 18:00</th><th>Stand 2019</th></tr>

<tr><th>55</th><td>Harrie Jekkers</td><td>Ik hou van mij</td><td>22 (-33)</td></tr>
<tr><th>54</th><td>Twarres</td><td>Wer bisto</td><td>52 (-2)</td></tr>
<tr><th>53</th><td>Wim de Craene</td><td>Tim</td><td>(Nieuw)</td></tr>
<tr><th>52</th><td>Yevgueni</td><td>Als ze lacht</td><td>60 (+8)</td></tr>
<tr><th>51</th><td>Youp van 't Hek</td><td>Niemand weet hoe laat het is</td><td>(Nieuw)</td></tr>
<tr><th>50</th><td>Doe maar</td><td>Is dit alles?</td><td>(Nieuw)</td></tr>
<tr><th>49</th><td>Maarten van Roozendaal</td><td>Jij blijft bij mij</td><td>(Nieuw)</td></tr>
<tr><th>48</th><td>Bram Vermeulen</td><td>Een doodgewone jongen</td><td>53 (+5)</td></tr>
<tr><th>47</th><td>Frans Halsema</td><td>Voor haar</td><td>19 (-28)</td></tr>
<tr><th>46</th><td>Herman van Veen</td><td>Toveren</td><td>18 (-28)</td></tr>
<tr><th>45</th><td>Boudewijn de Groot</td><td>Jimmy</td><td>58 (+13)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 6 | 18:00 - 19:00</th><th>Stand 2019</th></tr>

<tr><th>44</th><td>Bram Vermeulen</td><td>De wedstrijd</td><td>(Nieuw)</td></tr>
<tr><th>43</th><td>Ramses Shaffy</td><td>Mens, durf te leven</td><td>(Nieuw)</td></tr>
<tr><th>42</th><td>Herman van Veen</td><td>Liefde van later</td><td>42 (=)</td></tr>
<tr><th>41</th><td>Herman van Veen</td><td>Suzanne</td><td>35 (-6)</td></tr>
<tr><th>40</th><td>Kommil Foo</td><td>De Volgende</td><td>(Nieuw)</td></tr>
<tr><th>39</th><td>Boudewijn de Groot</td><td>Verdronken vlinder</td><td>21 (-18)</td></tr>
<tr><th>38</th><td>Bazart ft. Eefje de Visser</td><td>Onder ons</td><td>(Nieuw)</td></tr>
<tr><th>37</th><td>Yasmine</td><td>Diep in mij</td><td>(Nieuw)</td></tr>
<tr><th>36</th><td>Elke Vierveijzer</td><td>Zonder Genade</td><td>(Nieuw)</td></tr>
<tr><th>35</th><td>Bløf</td><td>Liefs uit Londen</td><td>(Nieuw)</td></tr>
<tr><th>34</th><td>The Scene</td><td>Iedereen is van de wereld</td><td>36 (+2)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 7 | 19:00 - 20:00</th><th>Stand 2019</th></tr>

<tr><th>33</th><td>Angela Groothuizen</td><td>Niets blijft</td><td>31 (-2)</td></tr>
<tr><th>32</th><td>Guus Meeuwis</td><td>Het is een nacht</td><td>46 (+14)</td></tr>
<tr><th>31</th><td>Herman van Veen</td><td>Hilversum 3</td><td>14 (-17)</td></tr>
<tr><th>30</th><td>Maarten van Roozendaal</td><td>Mooi</td><td>65 (+35)</td></tr>
<tr><th>29</th><td>Frank Boeijen</td><td>Kronenburg park</td><td>33 (+4)</td></tr>
<tr><th>28</th><td>Jan de Wilde</td><td>Fanfare van honger en dorst</td><td>38 (+10)</td></tr>
<tr><th>27</th><td>Bram Vermeulen</td><td>Rode wijn</td><td>77 (+50)</td></tr>
<tr><th>26</th><td>Ramses Shaffy</td><td>Stil in Amsterdam</td><td>(Nieuw)</td></tr>
<tr><th>25</th><td>Boudewijn de Groot</td><td>Testament</td><td>30 (+5)</td></tr>
<tr><th>24</th><td>Bløf en Geike Arnaert</td><td>Zoutelande</td><td>41 (+17)</td></tr>
<tr><th>23</th><td>Van Dik Hout</td><td>Stil in mij</td><td>(Nieuw)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 8 | 20:00 - 21:00</th><th>Stand 2019</th></tr>

<tr><th>22</th><td>Paul van Vliet</td><td>Het noorden</td><td>43 (+21)</td></tr>
<tr><th>21</th><td>Acda en de Munnik</td><td>Het regent zonnestralen</td><td>9 (-12)</td></tr>
<tr><th>20</th><td>Yentl en de Boer</td><td>Ik heb een man gekend</td><td>76 (+56)</td></tr>
<tr><th>19</th><td>Boudewijn de Groot</td><td>Avond</td><td>47 (+28)</td></tr>
<tr><th>18</th><td>Maarten van Roozendaal</td><td>Christoffel</td><td>25 (+7)</td></tr>
<tr><th>17</th><td>Boudewijn de Groot / Elly Nieman</td><td>Prikkebeen</td><td>32 (+15)</td></tr>
<tr><th>16</th><td>Henk Westbroek</td><td>Zelfs je naam is mooi</td><td>12 (-4)</td></tr>
<tr><th>15</th><td>Zjef Vanuytsel</td><td>De zotte morgen</td><td>51 (+36)</td></tr>
<tr><th>14</th><td>Racoon</td><td>Oceaan</td><td>5 (-9)</td></tr>
<tr><th>13</th><td>Abel</td><td>Onderweg</td><td>8 (-5)</td></tr>
<tr><th>12</th><td>Stef Bos</td><td>Papa</td><td>17 (+5)</td></tr>

<tr class="uur-header"><th colspan="3">UUR 9 | 21:00 - 22:00</th><th>Stand 2019</th></tr>

<tr><th>11</th><td>Ramses Shaffy</td><td>We zullen doorgaan</td><td>(Nieuw)</td></tr>
<tr><th>10</th><td>Ramses Shaffy</td><td>Zing, Vecht, Huil, Bid, Lach, Werk en Bewonder</td><td>13 (+3)</td></tr>
<tr><th>9</th><td>Wim Sonneveld</td><td>Het Dorp</td><td>3 (-6)</td></tr>
<tr><th>8</th><td>Clouseau</td><td>Daar gaat ze</td><td>6 (-2)</td></tr>
<tr><th>7</th><td>Ramses Shaffy & Liesbeth List</td><td>Pastorale</td><td>11 (+4)</td></tr>
<tr><th>6</th><td>Kris de Bruyne</td><td>Amsterdam</td><td>15 (+9)</td></tr>
<tr><th>5</th><td>Claudia de Breij</td><td>Mag ik dan bij jou</td><td>7 (+2)</td></tr>
<tr><th>4</th><td>Kommil Foo</td><td>Ruimtevaarder</td><td>10 (+6)</td></tr>
<tr><th>3</th><td>Klein orkest</td><td>Over de Muur</td><td>2 (-1)</td></tr>
<tr><th>2</th><td>Maarten van Roozendaal</td><td>Red mij niet</td><td>4 (+2)</td></tr>
<tr><th>1</th><td>Ramses Shaffy</td><td>Laat me</td><td>1 (=)</td></tr>

</table>

<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 = ('0' + t.days).slice(-2);
        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 = "<div class='panel-body'>De lijst is compleet. Heb je stiekem op ons gedanst? We hopen dat je het leuk vond!</div>";
        }
    }

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

var deadline = new Date("January 2, 2022 21:56:04 UTC+1");
initializeClock('clockdiv', deadline);

</script>

@endsection