@extends('layouts.pages.page')

@section('additional-page-content')

    <div class="events-content">

        <div class="grid-row">

            <div class="event-info content grid-col">

                <h2>{{$page->content->side_content->typeName}}</h2>

                {{ $page->content->side_content->description }}

            </div>

        </div>

        <div class="grid-row events-form">

            {{-- Form --}}
            @include('forms.events')

        </div>

    </div>

@endsection

@section('additional-page-js')
    <script src="/js/form.js"></script>
    <script>
        //Define form
        var eventForm = new Form('eventForm', [
            'nameOrganisation',
            'addressOrganisation',
            'zipOrganisation',
            'cityOrganisation',
            'nameContactPerson',
            'phoneContactPerson',
            'emailContactPerson',
            'namePaymaster',
            'addressPaymaster',
            'zipPaymaster',
            'emailPaymaster',
            'startDateTime',
            'endDateTime',
            'descriptionEvent',
            'attendees',
            'visitors',
            'location',
            'firstAidPersons'
        ]);

        // Submit button
        document.querySelector('#eventForm .submit').addEventListener('click', function () {

            eventForm.validate();
            if (eventForm.valid) eventForm.send();

        });
    </script>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

@endsection