{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}

<script>
 function submitForm(e) {
     e.preventDefault();
     const form = document.getElementById('form');
     const data = new FormData(form);
 
     // For use in dev
     // Can now start using this in production IF,
     // I get the server running on the server
     let base = "https://api.tfcconnection.org/parent-form";
     /* let base = "http://localhost:4242/parent-form"; */
     fetch(base, {
         method: "POST",
         body: data
     }).then((res) => {
         console.log(res);
         if (res.ok) {
             window.location.href = '/thankyou/';
         }
     });

     console.log(data);
     console.log("Hallo!");
     return false;
 }
</script>

<div id="mt-form" class="form text-lg w-full">
    <form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
        <div class="basis-full flex flex-wrap my-4">
            <label for="firstname" class="basis-full">What is your first and last name?</label>
            <br/>
            <input type="text" id="firstname" name="firstname"
                   placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
            <input type="text" id="lastname" name="lastname"
                   placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
        </div>
        <div class="basis-full flex flex-wrap my-4">
            <label for="studentnfirstname" class="basis-full">Teenager's first and last name?</label>
            <input type="text" id="studentfirstname" name="studentfirstname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="First Name">
            <input type="text" id="studentlastname" name="studentlastname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="Last Name">
        </div>
        <label for="email" class="basis-full">What is your email address?</label>
        <input type="email" id="email" name="email"
               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
               class="basis-full form-input {{ $formClasses }}">
        <div class="basis-full mt-10">
            <label for="authority" class="p-4">
                Describe how your teenager responds to authority (towards you and others):
            </label>
            <br/>
            <textarea id="authority" name="authority"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder="notes..."></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="positive" class="p-4">
                Positive characteristics you see in your teenager are:
            </label>
            <br/>
            <textarea id="positive" name="positive"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="negative" class="p-4">
                Negative characteristics you see in your teenager are:
            </label>
            <br/>
            <textarea id="negative" name="negative"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="family-relation" class="p-4">
                How does your teenager relate and respond within your family unit?
            </label>
            <br/>
            <textarea id="family-relation" name="family-relation"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="previous-trip-info" class="p-4">
                If your teen has been on a previous Mission Trip, describe any positive or negative changes you noticed in their lives.
            </label>
            <br/>
            <textarea id="previous-trip-info" name="previous-trip-info"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="trip-feelings" class="p-4">
                Please tell us any negative or positive feelings you have about your teenager being involved in this trip:
            </label>
            <br/>
            <textarea id="trip-feelings" name="trip-feelings"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="extra-info" class="p-4">
                What else would you like to tell us about your teenager that might be relevant as we consider them for a Mission Trip?
            </label>
            <br/>
            <textarea id="extra-info" name="extra-info"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-8">
            <button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
        </div>
    </form>
</div>