@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">
            @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">Surname <span class="text-red-600">*</span></label>
            <input type="text" id="surname" name="surname">

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

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


            <input type="checkbox" id="is_attending" name="is_attending" checked>
            <label class="light" for="is_attending">I will attend the event</label>
            <input type="checkbox" id="consent_form" name="consent_form" checked>
            <label class="light" for="consent_form">I give consent for making photos</label><br>

            <label for="file" class="flex flex-col items-center justify-center border-4 border-gray-300 border-dashed rounded h-36 px-6 text-lg text-gray-600 focus:outline-none focus:ring focus:border-blue-300 cursor-pointer"" autocomplete="off">
                <svg class="w-8 h-8 text-gray-600
                " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                <span id="choose_btn" class="mt-2 text-base leading-normal text-blue-500 font-bold">Choose file</span><br/>
                <span id="filename" class="mt-2 text-base leading-normal text-dark-500 font-bold"></span>
                <input type="file" id="file" name="file" class="hidden"/>
           </label>
            <p class="py-2 text-gray-400">Upload types: png | jpg | pdf </p>

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

        </form>
    </div>
    <script>
        document.getElementById('file').onchange = function () {
            var filename = this.value.replace(/.*[\/\\]/, '');
            document.getElementById('choose_btn').innerText = "Click here to choose another file";
            document.getElementById('filename').innerText = filename;
        };
    </script>
@endsection