@extends('layouts/sidebar')

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

@section('content')
@php($top10 = 0)
<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 kan bijna stemmen... nog 
        <span class="days"></span> dagen,
        <span class="hours"></span> uur,
        <span class="minutes"></span> minuten en 
        <span class="seconds"></span> seconden!
</p>
{{--
<div class="panel panel-info" style="float: right; margin-left: 5px; width: 300px;" id="clockdiv">
  <div class="panel-heading">
    <i class="fa fa-fw fa-eye"></i>
    <b>Meeluisteren of -kijken?</b>
  </div>
  <div class="panel-body">
    Nog
        <span class="hours"></span> uur,
        <span class="minutes"></span> minuten en 
        <span class="seconds"></span> seconden
    tot de lijst compleet is!
  </div>
  <div class="panel-footer"> 
    <ul style="list-style: none; padding: 0;">
      <li> <a href="{{ $player = url('luister/radio') }}" target="_radioplayer" onclick="window.open('{{$player}}', '_radioplayer','width=400,height=450'); return false;" class="text-primary"><i class="fa fa-play fa-fw"></i> Luister via de stream</a> </li>
      <li> <b><a href="/kijk/studio" class="text-primary"><i class="fa fa-video-camera fa-fw"></i> Kijk live mee in de studio</a></b> </li>
    </ul>
  </div><!--/.panel-footer-->
</div><!--/.panel-->
--}}

<h3>De lijst van 2019</h3>
<p>Hier issie dan... honderd van de mooiste Nederlandstalige liedjes. Door jou gekozen, door ons op volgorde gezet!</p>
<p>Tussen 12:00 uur en 14:00 uur draaien we jullie ondergewaardeerde nummers die het niet gehaald hebben, en vanaf 14:00 uur hoor je de top 100.</p>
<p>Laat ons weten wat je vindt via <a href="mailto:vroegeroflater@nhgooi.nl">vroegeroflater@nhgooi.nl</a> of <a href="https://facebook.com/vroegerlater">via Facebook</a>.</p>

<table class="table table-striped table-small">
<tr class="uur-header"><th colspan="3">UUR 1 | 14:00 - 15:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>100</th><td>Cornelis Vreeswijk</td><td>De Nozem en en Non</td></tr>
<tr><th>99</th><td>Het Goede Doel</td><td>België</td></tr>
<tr><th>98</th><td>Paul van Vliet</td><td>Er is nog zoveel niet gezegd</td></tr>
<tr><th>97</th><td>Acda en de Munnik</td><td>Niet of nooit geweest</td></tr>
<tr><th>96</th><td>Boudewijn de Groot</td><td>Weltrusten meneer de President</td></tr>
<tr><th>95</th><td>Diggy Dex & JW Roy</td><td>Treur niet (ode aan het leven)</td></tr>
<tr><th>94</th><td>Rob de Nijs</td><td>Ritme van de regen</td></tr>
<tr><th>93</th><td>Maarten van Roozendaal</td><td>Doden met verlof</td></tr>
<tr><th>92</th><td>Zijlstra</td><td>De pont naar Noord</td></tr>
<tr><th>91</th><td>Toontje lager</td><td>Stiekem gedanst</td></tr>
<tr><th>90</th><td>Doe Maar</td><td>Pa</td></tr>
<tr><th>89</th><td>Karin Bloemen</td><td>Geen kind meer</td></tr>

<tr class="uur-header"><th colspan="3">UUR 2 | 15:00 - 16:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>88</th><td>Kommil Foo</td><td>Angst is maar voor even</td></tr>
<tr><th>87</th><td>Maarten van Roozendaal</td><td>Zwerver</td></tr>
<tr><th>86</th><td>Het Goede Doel</td><td>Gijzelaar</td></tr>
<tr><th>85</th><td>Splitsing</td><td>Wind en zeilen</td></tr>
<tr><th>84</th><td>Cornelis Vreeswijk</td><td>Misschien wordt het morgen beter</td></tr>
<tr><th>83</th><td>Clouseau</td><td>Passie</td></tr>
<tr><th>82</th><td>Rowwen Heze</td><td>Auto vliegtuug</td></tr>
<tr><th>81</th><td>De Dijk</td><td>Dansen op de vulkaan</td></tr>
<tr><th>80</th><td>Ramses Shaffy</td><td>'t Is stil in Amsterdam</td></tr>
<tr><th>79</th><td>Loeki Knol</td><td>Algebra</td></tr>
<tr><th>78</th><td>Kommil Foo</td><td>Ik red me wel</td></tr>

<tr class="uur-header"><th colspan="3">UUR 3 | 16:00 - 17:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>77</th><td>Bram Vermeulen</td><td>Rode wijn</td></tr>
<tr><th>76</th><td>Yentl en de Boer</td><td>Ik heb een man gekend</td></tr>
<tr><th>75</th><td>Raymond van het Groenewoud</td><td>Twee meisjes</td></tr>
<tr><th>74</th><td>Youp van 't Hek & Matangi</td><td>Niemand weet hoe laat het is</td></tr>
<tr><th>73</th><td>Herman van Veen</td><td>Anne</td></tr>
<tr><th>72</th><td>Claudia de Breij</td><td>Ik mis je zo graag</td></tr>
<tr><th>71</th><td>Armand</td><td>Ben ik te min</td></tr>
<tr><th>70</th><td>Daniel Lohues</td><td>Mooie dag</td></tr>
<tr><th>69</th><td>Grof Geschut</td><td>Verliefd</td></tr>
<tr><th>68</th><td>Doe Maar</td><td>Belle Hélène</td></tr>
<tr><th>67</th><td>Gerard Cox</td><td>Het is weer voorbij die mooie zomer</td></tr>

<tr class="uur-header"><th colspan="3">UUR 4 | 17:00 - 18:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>66</th><td>Marco Borsato</td><td>Dochters</td></tr>
<tr><th>65</th><td>Maarten van Roozendaal</td><td>Mooi</td></tr>
<tr><th>64</th><td>Bazart</td><td>Goud</td></tr>
<tr><th>63</th><td>Anneke Grönloh</td><td>Brandend Zand</td></tr>
<tr><th>62</th><td>Marco Borsato</td><td>De Waarheid</td></tr>
<tr><th>61</th><td>Andre Hazes</td><td>Zij gelooft in mij</td></tr>
<tr><th>60</th><td>Yevgueni</td><td>Als ze lacht</td></tr>
<tr><th>59</th><td>Gerard van Maasakkers</td><td>D'n Boom</td></tr>
<tr><th>58</th><td>Boudewijn de Groot</td><td>Jimmy</td></tr>
<tr><th>57</th><td>Alex Roeka</td><td>Dit kleine hart van mij</td></tr>

<tr class="uur-header"><th colspan="3">UUR 5 | 18:00 - 19:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>56</th><td>Kiki Schippers</td><td>Guus</td></tr>
<tr><th>55</th><td>Andre Hazes Jr.</td><td>Leef</td></tr>
<tr><th>54</th><td>Drs. P</td><td>Dodenrit</td></tr>
<tr><th>53</th><td>Bram Vermeulen</td><td>Een Doodgewone Jongen</td></tr>
<tr><th>52</th><td>Twarres</td><td>Wer bisto</td></tr>
<tr><th>51</th><td>Zjef Vanuytsel</td><td>De zotte morgen</td></tr>
<tr><th>50</th><td>Adele Bloemendaal</td><td>De jaren zestig</td></tr>
<tr><th>49</th><td>Hannelore Bedert</td><td>Altijd nooit meer</td></tr>
<tr><th>48</th><td>Angela Groothuizen</td><td>Vinkeveen</td></tr>
<tr><th>47</th><td>Boudewijn de Groot</td><td>Avond</td></tr>
<tr><th>46</th><td>Guus Meeuwis</td><td>Het is een nacht</td></tr>

<tr class="uur-header"><th colspan="3">UUR 6 | 19:00 - 20:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>45</th><td>De Dijk</td><td>Als ze er niet is</td></tr>
<tr><th>44</th><td>Jules de Corte</td><td>Ik zou wel eens willen weten</td></tr>
<tr><th>43</th><td>Paul van Vliet</td><td>Het Noorden</td></tr>
<tr><th>42</th><td>Herman van Veen</td><td>Liefde van later</td></tr>
<tr><th>41</th><td>Blof en Geike Arnaert</td><td>Zoutelande</td></tr>
<tr><th>40</th><td>Frans Halsema & Jenny Arean</td><td>Vluchten kan niet meer</td></tr>
<tr><th>39</th><td>Ben Cramer</td><td>De clown</td></tr>
<tr><th>38</th><td>Jan de Wilde</td><td>Fanfare van honger en dorst</td></tr>
<tr><th>37</th><td>I.O.S.</td><td>Voltooid verleden tijd</td></tr>
<tr><th>36</th><td>The Scene</td><td>Iedereen is van de wereld</td></tr>
<tr><th>35</th><td>Herman van Veen</td><td>Suzanne</td></tr>
<tr><th>34</th><td>Clouseau</td><td>Laat me nu toch niet alleen</td></tr>

<tr class="uur-header"><th colspan="3">UUR 7 | 20:00 - 21:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>

<tr><th>33</th><td>Frank Boeijen</td><td>Kronenburg Park</td></tr>
<tr><th>32</th><td>Boudewijn de Groot / Elly Nieman</td><td>Prikkebeen</td></tr>
<tr><th>31</th><td>Angela Groothuizen</td><td>Niets blijft</td></tr>
<tr><th>30</th><td>Boudewijn de Groot</td><td>Testament</td></tr>
<tr><th>29</th><td>Acda en de Munnik</td><td>Ren Lenny Ren</td></tr>
<tr><th>28</th><td>Rob de Nijs</td><td>Malle Babbe</td></tr>
<tr><th>27</th><td>Ramses Shaffy</td><td>Wij zullen doorgaan</td></tr>
<tr><th>26</th><td>Guus Meeuwis</td><td>Brabant</td></tr>
<tr><th>25</th><td>Maarten van Roozendaal</td><td>Christoffel</td></tr>
<tr><th>24</th><td>Spinvis</td><td>Bagagedrager</td></tr>

<tr class="uur-header"><th colspan="3">UUR 8 | 21:00 - 22:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>


<tr><th>22</th><td>Harrie Jekkers</td><td>Ik hou van mij</td></tr>
<tr><th>21</th><td>Boudewijn de Groot</td><td>Verdronken vlinder</td></tr>
<tr><th>20</th><td>Circus Custers</td><td>Monica</td></tr>
<tr><th>19</th><td>Frans Halsema</td><td>Voor haar</td></tr>
<tr><th>18</th><td>Herman van Veen</td><td>Toveren</td></tr>
<tr><th>17</th><td>Stef Bos</td><td>Papa</td></tr>
<tr><th>16</th><td>Doe Maar</td><td>De bom</td></tr>
<tr><th>15</th><td>Kris de Bruyne</td><td>Amsterdam</td></tr>
<tr><th>14</th><td>Herman van Veen</td><td>Hilversum 3</td></tr>
<tr><th>13</th><td>Ramses Shaffy</td><td>Zing, vecht, huil, bid, lach, werk en bewonder</td></tr>
<tr><th>12</th><td>Henk Westbroek</td><td>Zelfs je naam is mooi</td></tr>
<tr><th>11</th><td>Ramses Shaffy & Liesbeth List</td><td>Pastorale</td></tr>

<tr class="uur-header"><th colspan="3">UUR 9 | 22:00 - 23:00 uur</th></tr>
  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
<?php $top10data = [
  ["Kommil Foo", "Ruimtevaarder"],
  ["Acda en de Munnik", "Het regent zonnestralen"],
  ["Abel", "Onderweg"],
  ["Claudia de Breij", "Mag ik dan bij jou"],
  ["Clouseau", "Daar gaat ze"],
  ["Racoon", "Oceaan"],
  ["Maarten van Roozendaal", "Red Mij Niet"],
  ["Wim Sonneveld", "Het Dorp"],
  ["Klein Orkest", "Over de muur"],
  ["Ramses Shaffy", "Laat me"]]; 
  for($i = 0; $i < 10; ++$i) {
    $show = $i < 10 - $top10;
    echo '<tr><th>' . (10 - $i) . '</th><td>' . ($show ? $top10data[$i][0] : '?') . '</td><td>' . ($show ? $top10data[$i][1] : '?') . '</td></tr>';
  }
?>
</tbody>
</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>";
            clock.innerHTML = "<div class='panel-body'>Stem <a href='/luisterlijst/stem'>hier</a> voor de lijst van 2021!</div>";
        }
    }

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

var deadline = new Date("November 30, 2020 22:30 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