{{ $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" }}
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}

<script>
 function submitForm(e) {
     e.preventDefault();
     const form = document.getElementById('form');
     const data = new FormData(form);
 
     console.log(data.get("birthdate"));
     const birthdate = new Date(data.get("birthdate"));
     const age = calculate_age(birthdate);
     data.append("age", age);

     let base = "/api/mt-form";
     /* let base = "http://localhost:4242/mt-form"; */

     fetch(base, {
         method: "POST",
         body: data
     }).then((res) => {
         console.log(res);
         if (res.ok) {
             var payment = document.getElementById('registration').value;
             window.location.href = '/mt-health-form?mtregistration=' + payment +
                                    "&firstName=" + data.get('firstname') +
                                    "&lastName=" + data.get('lastname') +
                                    "&parentFirstName=" + data.get('parentfirstname') +
                                    "&parentLastName=" + data.get('parentlastname') +
                                    "&birthdate=" + data.get('birthdate') +
                                    "&street=" + data.get('street') +
                                    "&city=" + data.get('city') +
                                    "&state=" + data.get('state') +
                                    "&zip=" + data.get('zip') +
                                    "&parentPhone=" + data.get('parentphone');
             console.log(res);
         }
     });
 }

 function calculate_age(dob) { 
     var diff_ms = Date.now() - dob.getTime();
     var age_dt = new Date(diff_ms); 
     
     return Math.abs(age_dt.getUTCFullYear() - 1970);
 }

 function process() {
     var studentAgree = document.getElementById("student-agree").checked;
     console.log(studentAgree);
     var parentAgree = document.getElementById("adult-agree").checked;
     console.log(parentAgree);
     if (studentAgree && parentAgree) {
         document.getElementById('mt-form').hidden = false
         console.log("WOOHOO");
     }
     else {
         document.getElementById('form').hidden = true
         document.getElementById('mt-form').hidden = true
         console.log("NEGATORY");
     }
 }
 document.addEventListener('DOMContentLoaded', process);
</script>

<div class="m-4">
  <div class="p-2">
      <input type="checkbox" name="student-agree" id="student-agree"
             onclick="process()" class="form-checkbox {{ $formClasses }}" />
    <label for="student-agree">I agree to the above</label>
  </div>
  <div class="p-2">
      <input type="checkbox" name="adult-agree" id="adult-agree"
             onclick="process()" class="form-checkbox {{ $formClasses }}" />
    <label for="adult-agree">Parent agrees to the above</label>
  </div>
</div>

<div id="mt-form" class="form text-lg w-full">
    <form id='form'
          hx-post="/api/mt-form"
          hx-encoding="multipart/form-data"
          autocomplete="on"
          method="post"
          target="_parent"
          class="w-full items-center flex flex-wrap">
        <h3 class="basis-full">Mission Trip Application</h3>
        <div class="basis-full flex flex-wrap my-4">
            <label for="firstname" class="basis-full mx-2">What is your first and last name?
<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
            <br/>
            <input type="text" id="firstname" name="firstname" required
                   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="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?
<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>

            <input type="text" id="parentfirstname" name="parentfirstname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="First Name">
            <input type="text" id="parentlastname" name="parentlastname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="Last Name">
        </div>
        <div class="basis-full my-4 lg:flex md:flex">
            <div class="lg:basis-1/2">
                <label for="birthdate" class="">When were you born?</label>
                <input type="date" id="birthdate" name="birthdate"
                       class="form-date {{ $formClasses }}">
            </div>
            <div class="lg:basis-1/2">
                <label for="gender" class="">Gender</label>
                <select id="gender" name="gender" class="form-select {{ $formClasses }}">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
        </div>
        <div class="basis-full flex flex-wrap my-4">
            <label for="street" class="basis-full mx-2">What is your address? <span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
            <input type="text" id="street" name="street"
                   class="basis-full form-input {{ $formClasses }}"
                   placeholder="Street Address" required>
            <input type="text" id="city" name="city"
                   class="basis-full form-input {{ $formClasses }}"
                   placeholder="City" required>
            <input type="text" id="state" name="state"
                   class="flex-auto form-input {{ $formClasses }}"
                   placeholder="State" required>
            <input type="text" id="zip" name="zip"
                   class="flex-auto form-input {{ $formClasses }}"
                   placeholder="Zip Code" required>
        </div>
        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
            <label for="cellphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Cell phone</label>
            <input type="tel" id="cellphone" name="cellphone"
                   class="flex-auto form-input {{ $formClasses }}">
        </div>
        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
            <label for="parentphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent phone</label>
            <input type="tel" id="parentphone" name="parentphone"
                   class="flex-auto form-input {{ $formClasses }}">
        </div>
        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
            <label for="email" class="lg:basis-1/4 basis-full mr-4 ml-2">Email</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="flex-auto form-input {{ $formClasses }}">
        </div>
        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
            <label for="parentemail" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent's email?</label>
            <input type="email" id="parentemail" name="parentemail"
                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
                   class="flex-auto form-input {{ $formClasses }}">
        </div>

        <label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
        <input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">

        <div class="basis-full my-4">
            <label for="grade" class=" mx-2">Grade</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="8"
                   class="form-input {{ $formClasses }}" checked>
            <label for="grade" class="">8th</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="freshman"
                   class="form-input {{ $formClasses }}">
            <label for="grade" class="">Freshman</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="sophomore"
                   class="form-input {{ $formClasses }}">
            <label for="grade" class="">Sophomore</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="junior"
                   class="form-input {{ $formClasses }}">
            <label for="grade" class="">Junior</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="senior"
                   class="form-input {{ $formClasses }}">
            <label for="grade" class="">Senior</label>
        </div>
        <div class="basis-full flex flex-wrap my-4">
            <label for="pastorfirstname" class="basis-full mx-2">What is your pastor's name and number?</label>
            <input type="text" id="pastorfirstname" name="pastorfirstname"
                   class="flex-auto form-input {{ $formClasses }}"
                   placeholder="First Name">
            <input type="text" id="pastorlastname" name="pastorlastname"
                   class="flex-auto form-input {{ $formClasses }}"
                   placeholder="Last Name">
            <input type="tel" id="pastorphone" name="pastorphone"
                   class="flex-auto form-input {{ $formClasses }}"
                   placeholder="Phone Number">
        </div>
        <div class="basis-full my-4 flex flex-wrap items-center">
            <label for="church" class="basis-full mx-2">What church do you attend?</label>
            <input type="text" id="church" name="church"
                   class="basis-full form-input {{ $formClasses }}">
            <label for="churchattendance" class="basis-full mt-8 mx-2">Do you attend church regularly? <code id="layout" class="inline-block text-secondary-500">Regularly being 3 times a month</code></label>
            <div class="basis-full flex flex-wrap items-center">
                <input type="radio" id="churchattendance" name="churchattendance"
                       value="yes" class="flex-none form-input {{ $formClasses }}" checked>
                <label for="churchattendance" class="flex-auto">Yes</label>
            </div>
            <div class="basis-full flex flex-wrap items-center">
                <input type="radio" id="churchattendance" name="churchattendance"
                       value="no" class="flex-none form-input {{ $formClasses }}">
                <label for="churchattendance" class="flex-auto">No</label>
            </div>
            <div class="basis-full flex flex-wrap items-center">
                <input type="radio" id="churchattendance" name="churchattendance"
                       value="other" class="flex-none form-input {{ $formClasses }}">
                <input type="text" id="churchattendanceother" name="churchattendanceother"
                       class="flex-auto form-input {{ $formClasses }}" placeholder="Other">
            </div>
        </div>
        <div class="basis-full flex flex-wrap my-4">
            <div class="basis-1/2 flex flex-wrap items-center">
                <label for="tfcgroup" class="flex-initial">TFC Group</label>
                <select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
                    <option value="Phillipsburg">Phillipsburg</option>
                    <option value="Atwood">Atwood</option>
                    <option value="Northern Valley">Northern Valley</option>
                    <option value="Southern Valley">Southern Valley</option>
                    <option value="Thunder Ridge">Thunder Ridge</option>
                    <option value="Logan">Logan</option>
                    <option value="Wakeeney">Wakeeney</option>
                    <option value="Codell">Codell</option>
                    <option value="Colby">Colby</option>
                </select>
            </div>
            <div class="basis-1/2 flex flex-wrap items-center">
                <label for="shirt" class="flex-initial">T-Shirt Size</label>
                <select id="shirt" name="shirt" class="flex-auto form-select {{ $formClasses }}">
                    <option value="small">Small</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                    <option value="xl">XL</option>
                    <option value="xxl">2XL</option>
                    <option value="xxxl">3XL</option>
                </select>
            </div>
        </div>
        <div class="basis-full my-4 mb-8 flex flex-wrap">
            <label for="image" class="basis-full mx-2">
                Please give us a picture you'd like to use on prayer cards.
            </label>
            <input type="file" id="image" name="image"
                   class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
        </div>

        <label class="basis-full mt-8 mx-2" for="trip">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</label>
        <select id="trip" name="trip" class="form-select {{ $formClasses }} basis-full items-center mb-8">
            <option value="SPLASH">SPLASH</option>
            <option value="Tulsa">Tulsa, Oklahoma</option>
            <option value="Cary">Cary Christian Center</option>
        </select>
            <!-- <div class="flex-auto basis-1/3">
                 <label for="trip-2" class="basis-1/2">Mexico</label>
                 <select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="X">X</option>
                 </select>
                 </div> -->

        <div class="basis-full mt-10">
            <label for="tripnotes" class="p-4">
                Is there a trip you cannot go on due to scheduling conflicts? Or do you have any other things you'd wish to inform us about regarding a specific trip?
            </label>
            <br/>
            <textarea id="tripnotes" name="tripnotes"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder="notes..."></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="relationship-with-jesus" class="p-4">
                Describe your relationship with the Lord this past year.
            </label>
            <br/>
            <textarea id="relationship-with-jesus" name="relationship-with-jesus"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="testimony" class="p-4">
                Tell us how your relationship with Jesus began. (How you became a Christian)
            </label>
            <br/>
            <textarea id="testimony" name="testimony"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="involvement-with-group" class="p-4">
                In the last year, how have you been involved in the ministry of TFC (or your church/youth group)?
            </label>
            <br/>
            <textarea id="involvement-with-group" name="involvement-with-group"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="reasons-for-trip-choice" class="p-4">
                Why did you choose the team you applied for as your first choice? (Please let us know if you are unable to do any trip due to previous commitments.)
            </label>
            <br/>
            <textarea id="reasons-for-trip-choice" name="reasons-for-trip-choice"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="strengths" class="p-4">
                The strengths and talents you would bring to this year's team are:
            </label>
            <br/>
            <textarea id="strengths" name="strengths"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="weaknesses" class="p-4">
                Some negative traits that might effect my attitude are:
            </label>
            <br/>
            <textarea id="weaknesses" name="weaknesses"
                      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 you were a part of a previous TFC Mission Trip team, tell us how the trip changed your life?
            </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 my-10">
            <label for="attitude-torward-work" class="p-4">
                If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say?
            </label>
            <br/>
            <textarea id="attitude-torward-work" name="attitude-torward-work"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full my-10">
            <label for="relevant-notes" class="p-4">
                Is there anything else you would like to tell us about yourself that might be relevant as we consider you for a mission trip?
            </label>
            <br/>
            <textarea id="relevant-notes" name="relevant-notes"
                      class="form-input w-full h-64 {{ $formClasses }}"
                      placeholder=""></textarea>
        </div>
        <div class="basis-full my-10">
            <label for="final-agreement" class="px-2">
                I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed.
            </label>
            <div class="my-4">
                <input type="radio" value="yes" id="final-agreement" name="final-agreement"
                       class="form-input {{ $formClasses }}" required>
                <label for="final-agreement" class="mt-4">
                    I understand
                </label>
            </div>
        </div>
        <label for="registration" class="basis-full px-2">
            Would you like to pay the registration fee now or later?
        </label>
        <div class="basis-full">
            <input type="radio" value="now" id="registration" name="registration"
                   class="form-input {{ $formClasses }}" checked>
            <label for="registration" class="">
                Now - $25
            </label>
        </div>
        <div class="basis-full">
            <input type="radio" value="later" id="registration" name="registration"
                   class="form-input {{ $formClasses }}">
            <label for="registration" class="">
                Later - Send $25 to the TFC Office
            </label>
        </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>