{{ $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 src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.js" crossorigin="anonymous"></script>

<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);

     if (data.get("parentemail") == "") {
         document.getElementById('warning-email').style.visibility = 'visible';
         document.getElementById('warning-email').style.height = '';
         document.getElementById('warning-email').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-email').style.visibility = 'hidden';
         document.getElementById('warning-email').style.height = '0';
         document.getElementById('warning-email').style.margin = '0';
     }
     if (data.get("firstname") == "") {
         document.getElementById('warning-name').style.visibility = 'visible';
         document.getElementById('warning-name').style.height = '';
         document.getElementById('warning-name').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-name').style.visibility = 'hidden';
         document.getElementById('warning-name').style.height = '0';
         document.getElementById('warning-name').style.margin = '0';
     }
     if (data.get("lastname") == "") {
         document.getElementById('warning-name').style.visibility = 'visible';
         document.getElementById('warning-name').style.height = '';
         document.getElementById('warning-name').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-name').style.visibility = 'hidden';
         document.getElementById('warning-name').style.height = '0';
         document.getElementById('warning-name').style.margin = '0';
     }
     if (data.get("parentfirstname") == "") {
         document.getElementById('warning-name').style.visibility = 'visible';
         document.getElementById('warning-name').style.height = '';
         document.getElementById('warning-name').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-name').style.visibility = 'hidden';
         document.getElementById('warning-name').style.height = '0';
         document.getElementById('warning-name').style.margin = '0';
     }
     if (data.get("parentlastname") == "") {
         document.getElementById('warning-name').style.visibility = 'visible';
         document.getElementById('warning-name').style.height = '';
         document.getElementById('warning-name').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-name').style.visibility = 'hidden';
         document.getElementById('warning-name').style.height = '0';
         document.getElementById('warning-name').style.margin = '0';
     }
     if (data.get("final-agreement") == "") {
         document.getElementById('warning-agreement').style.visibility = 'visible';
         document.getElementById('warning-agreement').style.height = '';
         document.getElementById('warning-agreement').style.margin = '';
         return false;
     } else {
         document.getElementById('warning-agreement').style.visibility = 'hidden';
         document.getElementById('warning-agreement').style.height = '0';
         document.getElementById('warning-agreement').style.margin = '0';
     }

     let base = "http://localhost:4242/camp-form";
     /* let base = "https://api.tfcconnection.org/camp-form"; */

     fetch(base, {
         method: "POST",
         body: data
     }).then((res) => {
         console.log(res);
         if (res.ok) {
             let payment = data.get('registration');
             let health = data.get('health');
             if (health === 'later') {
                 if (payment === 'now')
                     window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JPJ';
                 else if (payment === 'full')
                     window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JQE';
                 else
                     window.location.href = '/thankyou/';
             }
             else {
                 window.location.href = '/camp-health-form?registration=' + payment;
             }
         }
     });
 }

 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() {
     /* document.getElementById('mt-form').hidden = false */
     document.getElementById('warning-email').style.visibility = 'hidden';
     document.getElementById('warning-email').style.height = '0';
     document.getElementById('warning-email').style.margin = '0';
     document.getElementById('warning-name').style.visibility = 'hidden';
     document.getElementById('warning-name').style.height = '0';
     document.getElementById('warning-name').style.margin = '0';
     document.getElementById('warning-agreement').style.visibility = 'hidden';
     document.getElementById('warning-agreement').style.height = '0';
     document.getElementById('warning-agreement').style.margin = '0';
     document.getElementById('warning-other').style.visibility = 'hidden';
     document.getElementById('warning-other').style.height = '0';
     document.getElementById('warning-other').style.margin = '0';
 }
 document.addEventListener('DOMContentLoaded', process);
</script>

<div id="mt-form" class="form text-lg w-full">
    <form id='form' data-hx-post="http://localhost:4242/camp-api" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
        <h3 class="basis-full">Camp Form</h3>
        <div class="basis-full flex flex-wrap my-4">
            <label for="firstname" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
            <br/>
            <input type="text" id="firstname" name="firstname"
                   placeholder="First Name" class="flex-1 form-input {{ $formClasses }}"
                   required>
            <input type="text" id="lastname" name="lastname"
                   placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}"
                   required>
        </div>
        <div class="basis-full flex flex-wrap my-4">
            <label for="parentfirstname" class="basis-full">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
            <input type="text" id="parentfirstname" name="parentfirstname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="First Name" required>
            <input type="text" id="parentlastname" name="parentlastname"
                   class="flex-1 form-input {{ $formClasses }}"
                   placeholder="Last Name" required>
        </div>

        <label for="birthdate" class="basis-full">When were you born? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
        <input type="date" id="birthdate" name="birthdate"
               class="basis-full form-date {{ $formClasses }}" required>
        <label for="gender" class="basis-full">Gender <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
        <select id="gender" name="gender" class="basis-full form-select {{ $formClasses }}" required>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>

        <div class="basis-full flex flex-wrap my-4">
            <label for="street" class="basis-full">What is your address? <span class='inline-block text-[#f39] text-sm align-sub'>* 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="flex-auto 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="basis-full my-4">
            <label for="grade" class="">Grade this Fall <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
            <br/>
            <input type="radio" id="grade" name="grade" value="6"
                   class="form-input {{ $formClasses }}" checked>
            <label for="grade" class="">6th</label>
            <br/>
            <input type="radio" id="grade" name="grade" value="7"
                   class="form-input {{ $formClasses }}" checked>
            <label for="grade" class="">7th</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>
            <br/>
            <input type="radio" id="grade" name="grade" value="college-freshman"
                   class="form-input {{ $formClasses }}">
            <label for="grade" class="">College Freshman</label>
        </div>

        <label for="parentphone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
        <input type="tel" id="parentphone" name="parentphone"
               class="basis-full form-input {{ $formClasses }}"
               required>

        <label for="parentemail" class="basis-full">Guardian's Email
            <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
            <input type="parentemail" id="parentemail" name="parentemail"
                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
                   class="basis-full peer form-input {{ $formClasses }} invalid:text-[#F39] invalid:ring-[#f39] focus:invalid:ring-[#f39]  focus:invalid:border-[#f39]">
            <span class='invisible text-[#f39] text-sm peer-invalid:visibile'>Please use a valid email</span>

        </label>
        <label for="allergies" class="basis-full">Do you have any food allergies?</label>
        <input type="text" id="allergies" name="allergies"
               class="basis-full form-input {{ $formClasses }}">

        <label for="week" class="basis-full">My Camp Plan <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
        <select id="week" name="week" class="flex-auto form-select {{ $formClasses }}">
            <option value="week1">Week 1: July 22-26</option>
            <option value="week2">Week 2: July 29-Aug 2</option>
        </select> 

        <label for="shirt" class="basis-full">T-Shirt Size <span class='inline-block text-[#f39] text-sm'>all t-shirts are in adult sizes only</span></label>
        <select id="shirt" name="shirt" class="mb-8 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 class="basis-full my-2">
            <label for="final-agreement">
                I understand that in order to go to camp I need to have this form, a health form, and the total cost paid.
            </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 <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
                </label>
            </div>
        </div>
        <label for="health" class="basis-full my-2">
            Would you like to fill out the health form now or later? Your health form is not required right now, but you cannot go to camp without one.
        </label>
        <div class="basis-full mt-4">
            <input type="radio" value="now" id="health" name="health"
                   class="form-input {{ $formClasses }}" checked>
            <label for="health" class="">
                Now
            </label>
        </div>
        <div class="basis-full mb-4">
            <input type="radio" value="later" id="health" name="health"
                   class="form-input {{ $formClasses }}">
            <label for="health" class="">
                Later
            </label>
        </div>
        <label for="registration" class="basis-full my-2">
            Would you like to pay the registration fee or the full cost now or later?
        </label>
        <div class="basis-full mt-4">
            <input type="radio" value="now" id="registration" name="registration"
                   class="form-input {{ $formClasses }}" checked>
            <label for="registration" class="">
                Now - $65
            </label>
        </div>
        <div class="basis-full">
            <input type="radio" value="full" id="registration" name="registration"
                   class="form-input {{ $formClasses }}">
            <label for="registration" class="">
                Full Cost - $165
            </label>
        </div>
        <div class="basis-full mb-4">
            <input type="radio" value="later" id="registration" name="registration"
                   class="form-input {{ $formClasses }}">
            <label for="registration" class="">
                Later - Send $65 or $165 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>

        <div id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
                {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
                Make sure you have included an email for your guardian so we can contact them.
            </span>
        </div>

        <div id="warning-name" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
                {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
                Make sure that all names are filled out
            </span>
        </div>

        <div id="warning-agreement" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
                {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
                You have to agree to the registration information.
            </span>
        </div>

        <div id="warning-other" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
                {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
                Have you checked to make sure all required fields are filled out?
            </span>
        </div>

    </form>
</div>