@extends('layouts/full')

@section('title')
  Kennismakingsbijeenkomst
@endsection

@section('content')
@parent

@if(isset($bevestiging))
<div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;">
<p>Dank je wel voor je aanmelding! Een bevestiging hiervan is gestuurd naar <code>{{ $bevestiging }}</code>.</p>
</div>
@endif 

<h3 class="page_margin_top">Programma informatiebijeenkomst NH Gooi 27 november 2021</h3>
<table>
<tr>
<td>14.00</td> <td>Welkom</td>
</tr>
<tr>
<td>14.10</td> <td>Kennismaking met NH Gooi Radio
<ul>
<li>Wie zijn we?</li>
<li>Wat doen we?</li>
<li>Ambities</li>
<li>Kansen voor nieuwe medewerkers
<ul>
<li>Redactie radio / tv</li>
<li>Programmamaker</li>
<li>Podcast producer</li>
<li>Technicus</li>
<li>Marketing-communicatiemedewerkers</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>14.30</td> <td>Uitleg kennismakingsrondes (speeddates)</td>
</tr>
<tr>
<td>14.45</td> <td>Start eerste ronde speeddates met redacteuren, technici en programmamakers</td>
</tr>
<tr>

<td>15.15</td> <td> Start Tweede ronde speeddates met redacteuren, technici en programmamakers</td>
</tr>
<tr>

<td>15.45</td> <td> Pauze</td>
</tr>
<tr>

<td>16.15</td> <td> Meer over de begeleiders</td>
</tr>
<tr>

<td>16.30</td> <td> Vragen?</td>
</tr>
<tr>

<td>17.00</td> <td> Afsluiting</td>
</tr>
</table>

<p>
<b>Locatie:</b> <a href="https://goo.gl/maps/X55jy4YKG8CZZMis9">IJsselmeerstraat 3B, Huizen (NH)</a>
</p>

@if(!isset($bevestiging))
<h4 class="box_header">
	Aanmelden
</h4>

<p>Wil je je aanmelden voor de vrijblijvende kennismakingsbijeenkomst op 27 november? Vul dan het formulier in voor een uitnodiging.</p>
<form class="forr margin_top_15" id="form" method="post" action="/vacatures/ontmoet-ons" style="background: none;">
	{{ csrf_field() }}
        <fieldset style="display: inline;">
	<p>Ja, ik kom graag naar  de kennismakingsbijeenkomst! </p>
	</fieldset>
	<fieldset class="">
		<div class="block">
			<label for="name">Naam</label>
			<input class="text_input hint" id="name" name="name" type="text" placeholder="Naam" required="required">
		</div>
	</fieldset>
	<fieldset class="">
		<div class="block">
			<label for="email">E-mailadres</label>
			<input class="text_input hint" id="email" name="email" type="text" placeholder="Emailadres" required="required">
		</div>
	</fieldset>
	<fieldset class="">
		<div class="block">
			<label for="phone">Telefoonnummer</label>
			<input class="text_input hint" id="phone" name="phone" type="text" placeholder="Telefoonnummer" required="required">
		</div>
	</fieldset>
	<fieldset>
		<div class="block">
                        <p style="padding-bottom: 0;">Korte toelichting: wat wil je doen en welke ervaring heb je eventueel al?</p>
		</div>
		<textarea name="message" placeholder="Toelichting" class="hint"></textarea>
	</fieldset>
	<fieldset>
		<input type="hidden" name="action" value="contact_form">
		<input type="submit" name="submit" value="Aanmelden!" class="more active">
	</fieldset>
</form>
<p style="color: #333; font-size: 80%;">Privacy-statement: bovenstaande informatie wordt alleen gebruikt door geselecteerde medewerkers om contact met je op te nemen over je aanmelding en je informatie te sturen over de bijeenkomst. Je gegevens worden verder niet opgeslagen en na de bijeenkomst danwel je tijdige afmelding verwijderd, tenzij we deze gegevens nog nodig hebben omdat je (vrijwillige) werkzaamheden wilt gaan verrichten bij NH Gooi.</p>
@endif

<style>
  table { width: 100%; }
  td {
    border-top: solid 1px #ddd;
    vertical-align: top;
    color: #444;
    line-height: 150%;
  }
  li {
    margin-left: 10px;
    padding-top: 2px;
    margin-top: 0;
    padding-left: 25px;
  }
  td > ul > li {
    background-repeat: no-repeat;
    background-position: left 10px;
    background-image: url("/images/icons/other/bullet_style_2.png");
  }

  fieldset .block { 
    display: flex;
    margin-bottom: 3px;
  }

  fieldset label {
    display: block;
    flex: 0 1 150px;
    margin-top: auto;
    margin-bottom: auto;
    color: #777;
  }

  fieldset input {
    flex: 1 1;
  }
  
  fieldset textarea {
   width: 100%;
  }

  @media screen and (max-width: 479px) {
    fieldset .block {
      flex-wrap: wrap;
      margin-top: 15px;
    }

    fieldset label {
    }
  } 
</style>

@endsection