@extends('layouts.app')

@section('content')
    <div style="display:flex; justify-content: center; align-items: center; min-height: 100%; width: 100%">
        <form class="p-4" action="/submit" method="post" enctype="multipart/form-data">
            {!! $event->form_text !!}
            <br/>
            @csrf
            <input type="hidden" value="{{ $event->id }}" name="event_id">

            <label for="name">Name <span class="text-red-600">*</span></label>
            <input type="text" id="name" name="name" required>

            <label for="name">Organization <span class="text-red-600">*</span></label>
            <input type="text" id="name" name="ogranization">

            <label for="email">Email <span class="text-red-600">*</span></label>
            <input type="email" id="mail" name="email">
            <br/><br/>

            <p class="text-red-800">
                *Upon your confirmation of the following, you will receive a QR code to your e-mail which you must present at the registration together with your ID.
            </p><br/>

            <input type="radio" id="is_attending" name="is_attending" onclick="showConsent()" required value="1">
            <label class="light" for="is_attending">I confirm my participation</label>

            <input type="radio" name="is_attending" id="not_attending" onclick="hideConsent()" required value="0">
            <label class="light" for="not_attending">I decline the invitation</label>

            <br/> <br/>

            <div id="hideBlock">
                <p class="text-red-800">
                    *Please read EEAS PRIVACY STATEMENT  -  DATA PROTECTION NOTICE and sign the CONSENT FORM Purpose of the filming/photo shooting
                </p><a class="text-blue-500 flex" href="/storage/{{ $event->file }}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
                    </svg>
                    consent form
                </a><br/>

                <input type="radio" id="consent_form" name="consent_form" required value="1">
                <label class="light" for="consent_form">I consent to filming/photo shooting</label>

                <input type="radio" name="consent_form" id="not_consent_form" required value="0">
                <label class="light" for="not_consent_form">I decline to be filmed</label>

                <br/><br/>
            </div>


        <button class="p-2 bg-blue-700 text-gray-100 mb-2" type="submit">Submit</button>

        </form>
    </div>
    <script>
        function hideConsent(){
            var elem = document.getElementById('not_consent_form');
            elem.setAttribute('checked', true);
            var hideblock = document.getElementById('hideBlock');
            hideblock.setAttribute('style', 'display:none');
        }

        function showConsent(){
            var elem = document.getElementById('not_consent_form');
            elem.removeAttribute('checked');
            var hideblock = document.getElementById('hideBlock');
            hideblock.setAttribute('style', 'display:block');
        }
    </script>
@endsection