@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>Vanaf 13.45</td> <td>Inloop</td>
</tr>
<tr>
<td>14.00 uur</td> <td>Kennismaking met NH Gooi Radio
</tr>
<tr>
<td></td> <td>Eerste ronde speeddates met redacteuren, technici en programmamakers</td>
</tr>
<tr>

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

<td></td> <td> Afsluiting, vragen</td>
</tr>
<tr>

<td>ca. 17.00</td> <td> Einde</td>
</tr>
</table>

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

-->

<p>
De bijeenkomst van 27 november gaat niet door in verband met de aangescherpte coronamaatregelen. Maar als je het leuk vindt om met, bij en voor ons aan de slag te gaan, laat dan hieronder je naam en contactgegevens achter. We nemen dan binnenkort contact met je op voor een persoonlijke kennismaking, of nodigen je uit voor de eerstvolgende bijeenkomst in 2022!
</p>

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

<p>Wil je je aanmelden voor een persoonlijke kennismaking, of de eerstvolgende vrijblijvende kennismakingsbijeenkomst <!-- 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

