@extends('page')

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

@section('content')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<style>
  form .row label { 
    width: 10%;
    margin-right: 4%; 
  }

  form .row input, form .row textarea {
    width: 85%;
    display: inline;
  }

  form .row .index { 
    position: absolute; 
    margin-left: -1em;
    margin-top: 5px;
  }

  #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>

@php
  function veld($prefix, $index) {
    $id = "keuze-$prefix-$index-";
    $naam = "keuzes[$prefix][$index]";
    $titel = isset($_POST['keuzes']) ? $_POST['keuzes'][$prefix][$index]['titel'] : "";
    $artiest = isset($_POST['keuzes']) ? $_POST['keuzes'][$prefix][$index]['artiest'] : "";
    echo '<div class="row-group">
  <div class="row keuze">
    <div class="index">' . $index . '.</div>
    <div class="col-lg-6"><label for="'.  $id . '-titel">Titel:</label><input class="form-control titel" id="' . $id . '-titel" name="' . $naam . '[titel]" value="' . $titel . '" ></div>
    <div class="col-lg-6"><label for="'.  $id . '-artiest">Artiest:</label><input class="form-control artiest" id="' . $id . '-artiest" name="' . $naam . '[artiest]" value="' . $artiest . '" ></div>
</div><!--/.row-->
</div><!--/.row-group-->';
  }
@endphp

<h2>Vroeger of Later Luisterlijst</h2>

@if(isset($message))
<div class="panel panel-primary text-primary">
<div class="panel-body">
{!!$message!!}
</div>
</div>
@endif

<div class="panel panel-info" style="float: right; margin-left: 5px; width: 300px;">
  <div class="panel-heading"><b>Inspiratie nodig?</b></div>
  <div class="panel-body">
    <span id="inspiratie">Klik op het icoontje voor een idee.</span>
  </div>
  <div class="panel-footer"> 
    <a href="#" onclick="javascript:inspireer();return false;" class="link text-primary"><span class="fa fa-sync"></span> <b>Geef mij nog een idee!</b></a><br />
    <a href="/luisterlijst/2019" class="small p-2 text-info"><span class="fa fa-history"></span> Bekijk de lijst van vorig jaar</a>
  </div>
</div>

<h3>Mijn lijst...</h3>
<p>Op zondag 2 januari 2022 van 14:00 tot 22:00 uur zendt NH Gooi Radio in samenwerking met Radio 9 Oostzaan de Vroeger of Later Luisterlijst uit. Honderd van de beste Nederlandstalige liedjes, door jou &mdash; de luisteraar &mdash; in willekeurige volgorde gerangschikt.</p>

<p>Tot maandag 27 december 23:00 uur kan je stemmen via deze pagina.</p>

<h2>Hoe werkt het stemmen?</h2>

<p>Hieronder vind je een aantal categorie&euml;n. Dat ziet er misschien afschrikwekkend uit, maar je mag zoveel invullen of leeglaten als je wilt. Je kunt dus overal alleen je nummer 1 invullen, of &eacute;&eacute;n categorie helemaal en een andere helemaal niet. We nodigen je natuurlijk uit zoveel mogelijk in te vullen, want hoe meer liedjes je aangeeft, hoe meer invloed je hebt op de lijst! De enige eis die we stellen, is dat liedjes Nederlandstalig, dus Nederlands of Vlaams (dialect), gezongen moeten zijn.</p>

<p>Per categorie kennen we een aantal punten toe aan je nummer 1, 2 en 3. Daarnaast krijgen alle liedjes in je eind-top-10 die je niet in &eacute;&eacute;n van de eerdere categorie&euml;n gezet hebt ook een aantal punten. Het totaal aantal punten per nummer bepaalt de volgorde in de lijst.</p>

<p>Weet je het nog niet helemaal zeker? Als je op 'Bewaren' onderaan deze pagina drukt, gebruiken we &eacute;&eacute;nmalig een cookie om je ingevulde waarden tijdelijk te onthouden. Zo kan je later terugkomen om je lijst verder in te vullen.</p>

<p style="font-weight: bold; color: blue;" id="clockdiv">
    Stem nu! Je hebt nog 
        <span class="days"></span> dagen,
        <span class="hours"></span> uur,
        <span class="minutes"></span> minuten en 
        <span class="seconds"></span> seconden!
</p>

<form method="post">
{!! csrf_field() !!}
<h4>Kleinkunstklassiekers</h4>
<p>Vroeger of Later is natuurlijk vooral een kleinkunst- en theaterprogramma. Vaste luisteraars kennen onze rubriek de Kleinkunstklassieker, maar welke Nederlandstalige klassieken mogen zeker niet ontbreken in de lijst?</p>

@for($i = 1; $i <= 3; ++$i)
  @php(veld('klassieker', $i))
@endfor

<p class="small text-primary"><span class="fa fa-info-circle"></span> De teksten in het grijs zijn voorbeelden, ze worden niet ingestuurd tenzij je zelf iets invult!</p>

<h4>Ondergewaardeerde liedjes</h4>
<p>Bij je top 10 zitten misschien de wat bekendere nummers, maar in deze categorie zijn we juist op zoek naar de pareltjes die je bijna nooit hoort.</p>
@for($i = 1; $i <= 3; ++$i)
  @php(veld('ondergewaardeerd', $i))
@endfor

<h4>Recente klassiekers-in-spe</h4>
<p>Vroeger was alles beter, maar later werd ook nog mooie muziek gemaakt. Wat zijn je favoriete Nederlandstalige nummers van na 2000?</p>
@for($i = 1; $i <= 3; ++$i)
  @php(veld('recent', $i))
@endfor

<h4>Corona-tijd</h4>
{{--<p>Muziek raakt. Door een paar noten kan je stemming veranderen of je wordt in gedachten mee terug genomen naar een bepaald moment. Bij welke liedjes heb jij een goed verhaal?</p>--}}
<p>Muziek troost en is vaak verbonden aan bijzondere periodes. Voor iedereen was 2020 een vreemd jaar. Welke Nederlandstalig plaat &mdash; nieuw of oud &mdash; heeft voor jou dit jaar een speciale betekenis, en waarom?</p>

@for($i = 1; $i <= 3; ++$i)
  <div class="row-group">
  @php(veld('verhaal', $i))
  <div class="row">
  <div class="col-lg-12">
    <label for="" style="width: 100%;">Mijn verhaal bij deze plaat:</label>
    <textarea class="form-control" style="width: 100%;" id="keuze-verhaal-{{$i}}-toelichting" name="keuzes[verhaal][{{$i}}][toelichting]">{{ isset($_POST['keuzes']) ? $_POST['keuzes']['verhaal'][$i]['toelichting'] : "" }}</textarea></div>
  </div><!--/.row-->
  </div><!--/.rowgroup-->
@endfor

<h4>Mijn top 10</h4>
<p>En natuurlijk zoals het hoort bij een lijstje... de top 10. Let op: de nummers die je hierboven al ingevuld hebt tellen we hier niet nogmaals mee, om je te stimuleren een zo breed mogelijke lijst in te vullen. Weet je er maar drie? Dat mag natuurlijk ook!</p>

@for($i = 1; $i <= 10; ++$i)
  @php(veld('top10', $i))
@endfor

<h4>Mijn gegevens</h4>
<p>Je e-mailadres en telefoonnummer zijn niet verplicht, maar als je ze invult nemen we misschien contact met je op voor nadere informatie voor onze uitzending. Verder leggen we geen persoonlijke gegevens vast, je IP-adres ({{substr($_SERVER['REMOTE_ADDR'], 0, 10)}}*****) wordt alleen meegestuurd om te voorkomen dat je h&eacute;&eacute;l vaak stemt.</p>

<div class="form-row">
  <div class="col-lg-6"><label for="">Voornaam*:</label>{{Form::text('voornaam', null, ['class' => 'form-control', 'required' => 'required'])}}</div>
  <div class="col-lg-6"><label for="">Woonplaats:</label>{{Form::text('woonplaats', null, ['class' => 'form-control'])}}</div>
  <div class="col-lg-6"><label for="">E-mailadres:</label>{{Form::text('mailadres', null, ['class' => 'form-control'])}}</div>
  <div class="col-lg-6"><label for="">Telefoonnummer:</label>{{Form::text('telefoonnummer', null, ['class' => 'form-control'])}}</div>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="checkbox-mag-contacten" name='checkbox[Kan contact opnemen]' value='Contact opnemen mag' {{ isset($_POST['checkbox']) && isset($_POST['checkbox']['Kan contact opnemen']) ? 'checked="checked"' : ''}}> 
  <label class="form-check-label" for="checkbox-mag-contacten">Jullie mogen contact met mij opnemen voor meer informatie</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="checkbox-mag-in-uitzending" name='checkbox[Kan in de uitzending]' value='Mag in de uitzending' {{ isset($_POST['checkbox']) && isset($_POST['checkbox']['Kan in de uitzending']) ? 'checked="checked"' : ''}}> 
  <label class="form-check-label" for="checkbox-mag-in-uitzending">Jullie mogen contact met mij opnemen in de uitzending (natuurlijk laten we dat even van tevoren weten!)</label>
</div>

@if(!isset($submitted) || !$submitted)
<div class="row">
  <div class="col-lg-3"></div>
  <div class="col-lg-3 ml-3">
    <button type="submit" name="insturen" value="1" class="btn btn-primary d-inline"><span class="fa fa-forward"></span> Lijst indienen!</button>
  </div>
  <div class="col-lg-3 ml-3">
    <button type="submit" class="btn btn-info d-inline"><span class="fa fa-save"></span> Lijst bewaren voor later</button>
  </div>
</div> 
  <p class="small text-primary"><span class="fa fa-info-circle"></span> Als je op 'Bewaren' drukt, gebruiken we &eacute;&eacute;nmalig een cookie om je ingevulde waarden tijdelijk te onthouden. Zo kan je later terugkomen om je lijst verder in te vullen.</p>
@endif

</form>
@endsection

@push('scripts')
<script type="text/javascript">
  var voorbeelden = [
["Marco Borsato", "Wat Is Mijn Hart"],
["De Dijk", "Niemand In De Stad"],
["Paul de Leeuw", "De Steen"],
["Acda en de Munnik", "Lopen Tot De Zon Komt"],
["Kasper van Kooten", "Mooie Blouse"],
["I.O.S.", "Uit De Schaduw"],
["Spinvis", "De Zevende Nacht"],
["De Jazzpolitie", "Ze Zijn Terug"],
["Zijlstra", "Durgerdam Slaapt"],
["Ramses Shaffy & Liesbeth List", "Pastorale"],
["Raymond van het Groenewoud", "Je Veux L'Amour"],
["Circus Custers", "Monica"],
["De Kast", "Woorden Zonder Woorden"],
["De Poema\'s", "Laat Me Niet Staan"],
["Frank Boeijen", "De Verzoening"],
["Het Goede Doel", "Vriendschap"],
["Robert Long", "Heeft Een Kind Een Toekomst"],
["Volumia!", "Afscheid"],
["Tröckener Kecks", "Met Hart En Ziel"],
["Trijntje Oosterhuis", "Vlieg Met Me Mee"],
["Guus Meeuwis", "Toen Ik Je Zag"],
["Clouseau", "Passie"],
["Mathilde Santing", "De Appels Op De Tafelsprei"],
["Simplisties Verbond", "Zoek Jezelf"],
["Van Dik Hout", "Meer Dan Een Ander"],
["Martine Bijl, Simone Kleinsma, Robert Paul & Robert Long", "Vanmorgen Vloog Ze Nog"],
["Herman van Veen", "Liefde Van Later"],
["Lichter Laaie", "Zo'n Mooie Planeet"],
["Ramses Shaffy", "'T Is Stil In Amsterdam"],
["Klein Orkest", "Over De Muur"],
["Volumia!", "Hou Me Vast"],
["Dolf Jansen", "Begin"],
["Paul Van Vliet", "Meisjes Van 13"],
["Bert Heerink", "Julie, July"],
["Rob de Nijs", "Tegen Beter Weten In"],
["Henk Westbroek", "Waar Ze Loopt Te Wandelen"],
["Willem Nijholt", "Sorry Dat Ik Besta"],
["Adèle Bloemendaal", "Afscheidsbrief Van Een Lelijk Meisje"],
["Skik", "Dankjewel Voor De Zon"],
["De Dijk", "Zevende Hemel"],
["Veldhuis", "Oud Geboren"],
["Jacques Brel", "Mijn Vlakke Land"],
["Liesbeth List", "Meisjes Van Dertig"],
["De Kast", "Hart Van Mijn Gevoel"],
["Frans Mulder", "Zeilen Op De Wind"],
["Marcel De Groot", "De Wals"],
["Frans Halsema & Jenny Arean", "Vluchten Kan Niet Meer"],
["Arthur Umbgrove", "Mooie Dag"],
["Ruth Jacott", "Vrede"],
["Van Dik Hout", "De Stilte Valt Zo Hard"],
["The Scene", "Rigoreus"],
["Herman van Veen", "Fiets"],
["Theo Nijland", "Glooiende Heuvels"],
["Jan Tekstra", "Neem Me Mee"],
["Is Ook Schitterend!", "Ze Speelt Met Mij"],
["Erik Mesie", "Zonder Jou"],
["Raymond van het Groenewoud", "Liefde Voor Muziek"],
["Jules De Corte", "Het Feest Dat Nooit Gevierd Werd"],
["Armand", "Ben Ik Te Min"],
["Klein Orkest", "Mijn Vader"],
["Frank Boeijen", "De Piano Van Beethoven"],
["Karin Bloemen", "Pas Toen Ik"],
["Paul de Leeuw", "'k Heb Je Lief"],
["Splitsing", "Wind En Zeilen"],
["Ruth Jacott", "Leun Op Mij"],
["Ernst Jansz", "Huiswaarts"],
["Frederique Spigt", "Mijn Hart Kan Dat Niet Aan"],
["Jan Rot", "Rocker In Holland"],
["Maggie MacNeal", "Terug Naar De Kust"],
["Amazing Stroopwafels", "Oude Maasweg"],
["Liesbeth List", "Laat Me Niet Alleen"],
["Henk Westbroek", "Zelfs Je Naam Is Mooi"],
["De Poema\'s", "Dat Was Het Dan"],
["Rita Hovink", "Laat Me Alleen"],
["De Jazzpolitie", "Liefdesliedjes"],
["Ramses Shaffy", "5 Uur"],
["Het Goede Doel", "Alles Geprobeerd"],
["Frans Halsema", "Voor Haar"],
["Peter Koelewijn", "Kl 204 (Als Ik God Was)"],
["Willeke Alberti", "Telkens Weer"],
["Karin Bloemen", "Geen Kind Meer"],
["Acda en de Munnik", "Als Je Bij Me Weggaat"],
["Huub van der Lubbe", "Tegen De Tijd"],
["Jenny Arean", "Het Is Over"],
["Paul de Leeuw & Ruth Jacott", "Blijf Bij Mij"],
["The Lau", "Draai"],
["Maarten van Roozendaal", "Tranen"],
["Skik", "Op Fietse"],
["Bram Vermeulen", "Doodlopende Straat"],
["Boudewijn de Groot", "De Kinderballade"],
["Astrid Nijgh", "Ik Doe Wat Ik Doe"],
["Willem Nijholt", "Spijt"],
["I.O.S.", "Hoe Het Voelt"],
["Frederique Spigt", "Ga Maar Vast Vooruit"],
["Marcel de Groot", "Kringen In De Rivier"],
["Peter Koelewijn", "De Sprong In Het Duister"],
["Kadanz", "In Het Donker"],
["The Scene", "Iedereen Is Van De Wereld"],
["Ramses Shaffy & Liesbeth List", "Aan De Andere Kant Van De Heuvels"],
["Wim Sonneveld", "Het Dorp"],
["Cornelis Vreeswijk", "Daarom Noem Ik Je \"M'n Liefste\" In Een Lied"],
["Doe Maar", "Nachtzuster"],
["Toon Hermans", "Als De Liefde"],
['Hugo Raspoet', 'Helena'], 
['Kris de Bruyne', 'Amsterdam'], 
['Jan de Wilde', 'Vrolijk lente lied'], 
['De Held', 'Weet je wat het is'], 
['Hermitage', 'Verander'], 
['Buurman', 'Tot de zon weer voor u schijnt'], 
['Yevgueni', 'Als ze lacht'], 
['Mira', 'In de fleur'], 
['Senne Guns', 'Goudvis'], 
['Clouseau', 'Anne'], 
['Raymond van het Groenewoud', 'Maria, Maria, Ik hou van jou'], 
['Biezebaaze', 'Loetjebollekezoetje'], 
['Kommil Foo', 'Ruimtevaarder'], 
['Jonas Winterland', 'Altijd halverwege'], 
['Lenny en de Wespen', 'Meneertje nee'], 
['Zjef Vanuytsel', 'Zotte morgen'], 
['Walter de Buck', 't Vliegerke'], 
['Willem Vermandere', 'Bange blanke man'], 
['Kadril', 'Nooit met krijt'], 
['Hannelore Bedert', 'Altijd nooit meer'], 
['Jan de Wilde', 'Fanfare van honger en dorst'], 
['Boudewijn de Groot', 'Er komen andere tijden'], 
['Rob de Nijs', 'Ritme van de regen'], 
['Ramses Shaffy & Liesbeth List', 'Aan de andere kant van de heuvels'], 
['Frédérique Spigt', 'Isis'], 
['Vera Mann', 'Nog een kans'], 
['Abel', 'Onderweg'], 
['Andre Hazes', 'Zij gelooft in mij'], 
['Acda en de Munnik', 'Ren Lenny Ren'], 
['Twarres', 'Wer bisto'], 
['Acda en de Munnik', 'Voor Jou'], 
['Normaal', 'Oerend hard'], 
['Circus Custers', 'Monica'], 
['Herman van Veen', 'Hilversum 3'], 
['Wim Sonneveld', 'Het Dorp'], 
['Karin Bloemen', 'Geen kind meer'], 
['The Scene', 'Iedereen is van de wereld'], 
['Ramses Shaffy', 'Laat me'], 
['Doe Maar', 'De bom'], 
['Frank Boeijen', 'Zwart Wit'], 
['Clouseau', 'Daar gaat ze'], 
['Lenny Kuhr', 'De Troubadour'], 
['Marco Borsato', 'De Waarheid'], 
['Willeke Alberti', 'Samen zijn'], 
['Claudia de Breij', 'Mag ik dan bij jou'], 
['Abel', 'Onderweg'], 
['Acda en de Munnik', 'Niet of nooit geweest'], 
['Ben Cramer', 'De clown'], 
['Danny de Munk', 'Zo verdomd alleen'], 
['Andre Hazes', 'De vlieger'], 
['Willeke en Willy Alberti', 'De glimlach van een kind'], 
['Stef Bos', 'Papa'], 
['Wim Sonneveld', 'Het Dorp'], 
['Ramses Shaffy', 'Zing, vecht, huil, bid, lach, werk en bewonder'], 
['Frank Boeijen', 'Kronenburg Park'], 
['Anneke Grönloh', 'Brandend Zand'], 
['Volumia!', 'Afscheid'], 
['Klein Orkest', 'Over de muur'], 
['Racoon', 'Oceaan'], 
['Claudia de Breij', 'Mag ik dan Bij jou'], 
['Maaike Ouboter', 'Dat ik je mis'], 
['Louis Davids', 'De olieman heeft een Fordje opgedaan'], 
['Sylvain Poons, Oetze Verschoor', 'Zuiderzeeballade'], 
['Vader Abraham', 't Kleine café aan de haven'], 
['Clouseau', 'Laat me nu toch niet alleen'], 
['Bazart', 'Goud'], 
['Marco Borsato', 'Als Jij Maar Naar Me Lacht'], 
['Klein Orkest', 'Over de muur'], 
['Ramses Shaffy', 'Zing, vecht, huil, bid, lach, werk en bewonder'], 
['Jules de Corte', 'Ik zou wel eens willen weten'], 
['Elke Vierveijzer', 'Zonder Genade'], 
['Alex Roeka', 'Dit kleine hart van mij'], 
['Angela Groothuizen', 'Niets blijft'], 
['Maarten van Roozendaal', 'Red Mij Niet'], 
['Kommil Foo', 'Ruimtevaarder'], 
['Claudia de Breij', 'Mag ik dan bij Jou'], 
['Maarten van Roozendaal', 'Olielamp'], 
['Paul van Vliet', 'Het Noorden'], 
['Maarten van Roozendaal', 'Waarom huil je nou'], 
['Maarten van Roozendaal', 'Mooi'], 
['Marcel de Gr oot', 'Woordenman'], 
['Cornelis Vreeswijk', 'Misschien wordt het later Beter'], 
['Kiki Schippers', 'Guus'], 
['Ramses Shaffy', 'Laat me'], 
['Louise Korthals', 'Jij Mens'], 
['Micheline van Hautem', 'Ik weet wel mijn Lief'], 
['Bram Vermeulen', 'Een Doodgewone Jongen'], 
['Yasmine', 'Diep in Mij'], 
['Gerard van Maasakkers', 'D\'n Boom'], 
['Brigitte Kaandorp', 'Andries Knevel'], 
['Herman van Veen', 'Toveren'], 
['Wim Sonneveld', 'Tearoom Tango'], 
['Harry Jekkers', 'Ik hou van mij'], 
['Ramses Shaffy', 'Mens, durf te leven'], 
['The Scene', 'Open'], 
['Marco Borsato', 'Dochters'], 
['De Dijk', 'Dansen op de vulkaan'], 
['Splitsing', 'Wind en zeilen'], 
['Doe Maar', 'Pa'], 
['Boudewijn de Groot', 'Weltrusten meneer de President'], 
['Het Goede Doel', 'Nooduitgang (live)'], 
['Robert Long', 'Iedereen doet het'], 
['Is Ook Schitterend', 'Voltooid verleden tijd'], 
['Racoon', 'Oceaan'], 
['Drs. P', 'Dodenrit'], 
['Wim Sonneveld', 'Het Dorp'], 
['Andre Hazes', 'Leef'], 
['Ramses Shaffy', 'Laat me'], 
['Frans Halsema & Jenny Arean', 'Vluchten kan niet meer'], 
['Jacques Brel', 'Mijn vlakke land'], 
['Zwarte Riek', 'Amsterdam huilt'], 
['Rene Froger', 'Alles kan een mens gelukkig maken'], 
['Ramses Shaffy', 'Laat me'], 
['Klein Orkest', 'Over de muur'], 
['Wim Sonneveld', 'Het Dorp'], 
['Circus Custers', 'Monica'], 
['Herman van Veen', 'Blauwe plekken'], 
['Fluitsma en van Thijn', '15 miljoen mensen'], 
['Goede doel', 'Zwijgen'], 
['Toontje lager', 'Stiekem gedanst'], 
['De Dijk', 'Als ze er niet is'], 
['Acda en de Munnik', 'Het Regent Zonnestralen'], 
['The Scene', 'Iedereen is van de wereld'], 
['Blof en Geike Arnaert', 'Zoutelande'], 
['Pasadena Dream Band', 'Zandvoort'], 
['Marco Borsato', 'Rood'], 
['Wim Sonneveld', 'Het Dorp'], 
['Ramses Shaffy', 'Laat Me'], 
['Herman van Veen', 'Liefde van later'], 
['Gerard Cox', 'Het is weer voorbij die mooie zomer'], 
['Toontje Lager', 'Zoveel te doen'], 
['Doe Maar', 'Belle Helene'], 
['Blof en Geike Arnaert', 'Zoutelande'], 
['Andre Hazes', 'Leef'], 
['Guus Meeuwis', 'Brabant'], 
['Guus Meeuwis', 'Per spoor'], 
['Acda en de Munnik', 'Het Regent Zonnestralen'], 
['K3', 'Teleromeo'], 
['Spinvis', 'Lotus Europa'], 
['Bløf', 'Liefs uit Londen'], 
['Guus Meeuwis', 'Het is een nacht'], 
['V.O.F. de Kunst', 'Suzanne'], 
['Het Goede Doel', 'België'], 
['Don Quishocking', 'De Oude School'], 
['Paul van Vliet', 'Er is nog zoveel niet gezegd'], 
['Herman van Veen', 'Waar blijft de tijd'], 
['Grof Geschut', 'Verliefd'], 
['Fay Lovsky', 'Hou van elkaar'], 
['Doe Maar', 'Aan de bewoners van dit pand'], 
['Tom Pintens', 'In Charleroi'], 
['Spinvis', 'Astronaut'], 
['Zijlstra', 'De pont naar Noord'], 
['Maarten van Roozendaal', 'Moe'], 
['Circus Custers', 'Verliefd'], 
['Spinvis', 'Bagagedrager'], 
['Ramses Shaffy', 'We zullen doorgaan'], 
['Maarten van Roozendaal', 'Zwerver'], 
['Het Goede Doel', 'Gijzelaar'], 
['Paul van Vliet', 'Het huis dat ik bewoon'], 
['Neerlands Hoop', 'Peter'], 
['Thomas van Luyn', 'Het Heelal'], 
['Ad Visser', 'De Gooise Matras'], 
['Bram Vermeulen en De Toekomst', 'Politiek'], 
['Axel Lukkien', 'Ik mis je'], 
['Ramses Shaffy & Liesbeth List', 'Pastorale'], 
['Klein Orkest', 'Over de muur'], 
['Claudia de Breij', 'Mag ik dan bij jou'], 
];

function kiesRandom(row) {
    var $titel = $(".titel", row);
    var $artiest = $(".artiest", row);
    var nummer = voorbeelden[Math.floor(Math.random() * voorbeelden.length)];
    $artiest.attr('placeholder', nummer[0]);
    $titel.attr('placeholder', nummer[1]);
}

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 27, 2021 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

function inspireer() {
  var nummer = voorbeelden[Math.floor(Math.random() * voorbeelden.length)];
  document.getElementById('inspiratie').innerHTML = "Wat dacht je van <b>" + nummer[1] + "</b> van <i>" + nummer[0] + "</i>?";
}
inspireer();
</script>
@endpush