{# ========================================================================= #}
{# :: Intro #}
{# ========================================================================= #}
{#
  Tell us more about this partial ;D!
#}

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "general/atoms/input/input-macros.njk" as input %}
{% import "general/atoms/checkbox/checkbox-macros.njk" as checkbox %}
{% import "villapila/molecules/booking-info/booking-info-macros.njk" as bookinginfo %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}

<div class="m-section m-content">
  <div class="l-container o-page">
    <header class="m-section__header o-page__header ">
      <h1 class="m-section__title"><a href="/" class="o-page__header__icon icon-arrow-left"></a> Plan je bezoek nu!</h1>
    </header>

    <div class="o-booking">
      <form class="o-form o-booking__section o-booking__section--form">
        <fieldset class="o-form__section">
          <div class="o-form__section__sub l-grid l-grid--form">
            {{input.datepicker("l-grid__col-12-12", {
              text: "Kies een datum"
            })}}
          </div>
        </fieldset>
        <fieldset class="o-form__section">
          <legend class="o-form__section__title">School gegevens</legend>
          <div class="o-form__section__sub l-grid l-grid--form">
            {{input.defaultWithPretext("l-grid__col-12-12", {
                type: "text",
                label: "Bebat schoolcode",
                name: "form-schoolCode",
                pretext: "L"
            })}}
            {{input.default("l-grid__col-12-12", {
                type: "text",
                label: "School",
                name: "form-school"
            })}}
            {{input.default("l-grid__col-12-12", {
                type: "text",
                label: "Straat",
                name: "form-street"
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "number",
                label: "Nummer",
                name: "form-number",
                min: 0,
                step: 1
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Bus",
                name: "form-bus"
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "number",
                label: "Postcode",
                name: "form-zip"
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Gemeente",
                name: "form-city"
            })}}
          </div>
        </fieldset>
        <fieldset class="o-form__section">
          <legend class="o-form__section__title">Contact gegegevens</legend>

          <div class="o-form__section__sub l-grid l-grid--form">
            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Voornaam",
                name: "form-firstName"
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Naam",
                name: "form-lastName"
            })}}
            {{input.default("l-grid__col-12-12", {
                type: "email",
                label: "E-mail",
                name: "form-email"
            })}}
            {{input.default("l-grid__col-12-12", {
                type: "number",
                label: "Telefoonnummer",
                name: "form-telephone"
            })}}
          </div>
        </fieldset>
        <fieldset class="o-form__section">
          <legend class="o-form__section__title">Details</legend>

          <div class="o-form__section__sub l-grid l-grid--form">
            {{input.default("l-grid__col-6-12", {
                type: "number",
                label: "Begeleiders",
                name: "form-numberOfSupervisors",
                min: 0,
                max: 50
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "number",
                label: "Leerlingen",
                name: "form-numberOfStudents",
                min: 2,
                max: 48
            })}}
            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Leerjaar",
                name: "form-grade",
                min: 0
            })}}
            {{input.select("l-grid__col-6-12", {
              label: "Vervoer",
              name: "form-transport",
              options: ["Met het openbaar vervoer", "Met eigen vervoer van de school", "Ik wil een bus reserveren via Bebat met mijn gespaarde punten"]
            })}}
            {{input.textarea("l-grid__col-12-12", {
              label: "Opmerkingen",
              name: "form-remarks",
              optional: true,
              row: 6
            })}}
          </div>

        </fieldset>
        <fieldset class="o-form__section">
          {{checkbox.default("l-grid__col-7-12 a-booking-condition", {
            text: "Ik ga akkoord met de",
            name: "form-conditions-checkbox",
            info: "<a class='a-hyperlink a-hyperlink--checkbox' href='#'>algemene voorwaarden</a>"
          })}}
        </fieldset>
        <div class="o-form__section o-form__submit-btn">
          <button class="a-button" disabled>Reserveer</button>
        </div>
      </form>


      {{bookinginfo.default("o-booking__section o-booking__section--info", [
        {
          titel: "Voorwaarden",
          body: [
            "Een bezoek aan Villa Pila is gratis. Villa Pila richt zich tot leerlingen van het 3e tot en met het 6e leerjaar. Het bezoek duurt ongeveer 3u.", 
            "Selecteer een bezoekdatum in de kalender en vul alle gegevens in. Na verzending ontvang je per mail een bevestiging en is je reservatie definitief.",
            "Maximum capaciteit: <strong>48 personen</strong><br>Optimale capaciteit: <strong>30 personen</strong>",
            "Het programma kan ten laatste starten om 10:00, gelieve hier rekening mee te houden bij het vertrekuur aan de school."
          ]
        },
        {
          titel: "Hoe kunnen wij helpen?",
          body: ["Heb je een vraag of een probleem? Contacteer ons:
            <ul class='m-list m-list--no-type'>
            <li><strong>Bebat &amp; Villa Pila</strong></li>
            <li class='u-margin-none'>Walstraat 5 - 3300 Tienen</li>
            <li class='u-margin-none'>016 76 88 50 - <a class='a-link a-link--inline' href='#'>villapila@bebat.be</a></li>
            </ul>"
          ]
        }
      ])}}
     
    </div>
  </div>
</div>