@extends('term-volunteer-application-forms.volunteer-application-layout')
@section('step', 3)

@section('back-button-url')
    {{route('portal.account.term-volunteer-application.your-availability', compact('term_volunteer_application'))}}
@stop

@section('pages-content')

    <h1 class="mt-8 text-3xl font-extrabold text-blue-900">Requirements and medical details</h1>

    <form action="{{ route('portal.account.term-volunteer-application.requirements-and-medical-details', compact('term_volunteer_application')) }}" method="post"
          class="mt-10 flex flex-col gap-4" id="term_volunteer_application_form">
        @csrf


        <h4 class="text-xl font-bold text-gray-900">Dietary requirements</h4>
        <p class="text-gray-900 text-sm font-medium">There is always plenty of food choice at {{$term_volunteer_application->term->campGroup->name}}.</p>

        <div class="mt-2" x-data="{ have_dietary_requirements: {{ old('have_dietary_requirements') == '1' ? 'true' : 'false' }} }">
            <h3 class="text-gray-900 text-sm font-medium">
                Do you have any specific dietary requirements?
            </h3>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group x-on:change="have_dietary_requirements = true" :checked="old('have_dietary_requirements') == '1'" class="ml-0 flex gap-2" name="have_dietary_requirements" label="Yes" value="1" />
                <x-inputs.new-radio-group x-on:change="have_dietary_requirements = false" :checked="old('have_dietary_requirements') == '0'" class="ml-0 flex gap-2" name="have_dietary_requirements" label="No" value="0" />
            </div>
            <div class="flex gap-6 p-2 mt-4" x-cloak x-show="have_dietary_requirements" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-6 w-full">
                    <div>
                        <x-inputs.new-input name="dietary_requirements_details" label="Please give details of any specific dietary requirements (e.g. vegetarian/vegan) or any specific food intolerances or allergies (e.g. nuts, lactose, gluten etc)"/>
                        <x-inputs.error name="dietary_requirements_details"/>
                    </div>
                    <div>
                        <x-inputs.new-input name="dietary_requirements_symptoms" label="Please also explain the symptoms of the allergic reaction (e.g. anaphylactic shock/skin rash), and the severity of the intolerance or allergy."/>
                        <x-inputs.error name="dietary_requirements_symptoms"/>
                    </div>
                </div>
            </div>
        </div>


        <h4 class="mt-6 text-xl font-bold text-gray-900">Mental health</h4>
        <p class="text-gray-900 text-sm font-medium">Leading at {{$term_volunteer_application->term->campGroup->name}} can be physically and emotionally demanding, so to help us make sure that we give you the right level of responsibility and are able to take good care of you as you serve, please could you answer the following questions:</p>

        <div class="mt-2" x-data="{ previously_have_illness: {{ old('previously_have_illness') == '1' ? 'true' : 'false' }} }">
            <h3 class="text-gray-900 text-sm font-medium">
                Have you previously, or are you currently suffering from a depressive or other mental illness?
            </h3>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group x-on:change="previously_have_illness = true" :checked="old('previously_have_illness') == '1'" class="ml-0 flex gap-2" name="previously_have_illness" label="Yes" value="1" />
                <x-inputs.new-radio-group x-on:change="previously_have_illness = false" :checked="old('previously_have_illness') == '0'" class="ml-0 flex gap-2" name="previously_have_illness" label="No" value="0" />
            </div>
            <div class="flex gap-6 p-2 mt-4" x-cloak x-show="previously_have_illness" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-6 w-full">
                    <div>
                        <x-inputs.new-input name="previously_have_illness_details" label="Please provide details"/>
                        <x-inputs.error name="previously_have_illness_details"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-2" x-data="{ on_mental_medication: {{ old('on_mental_medication') == '1' ? 'true' : 'false' }} }">
            <h3 class="text-gray-900 text-sm font-medium">
                Are you on any medication for mental health of which we should be aware?
            </h3>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group x-on:change="on_mental_medication = true" :checked="old('on_mental_medication') == '1'" class="ml-0 flex gap-2" name="on_mental_medication" label="Yes" value="1" />
                <x-inputs.new-radio-group x-on:change="on_mental_medication = false" :checked="old('on_mental_medication') == '0'" class="ml-0 flex gap-2" name="on_mental_medication" label="No" value="0" />
            </div>
            <div class="flex gap-6 p-2 mt-4" x-cloak x-show="on_mental_medication" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-6 w-full">
                    <div>
                        <x-inputs.new-input name="on_mental_medication_details" label="Please provide details"/>
                        <x-inputs.error name="on_mental_medication_details"/>
                    </div>
                </div>
            </div>
        </div>


        <h4 class="mt-6 text-xl font-bold text-gray-900">Further health information</h4>

        <div>
            <x-inputs.new-input name="further_health_details" optional label="Please provide any further medical details that we should be aware of, includng any "/>
            <x-inputs.error name="further_health_details"/>
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Medication</h4>

        <div class="mt-2" x-data="{ on_regular_medication: {{ old('on_regular_medication') == '1' ? 'true' : 'false' }} }">
            <h3 class="text-gray-900 text-sm font-medium">
                Are you taking regular medication
            </h3>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group x-on:change="on_regular_medication = true" :checked="old('on_regular_medication') == '1'" class="ml-0 flex gap-2" name="on_regular_medication" label="Yes" value="1" />
                <x-inputs.new-radio-group x-on:change="on_regular_medication = false" :checked="old('on_regular_medication') == '0'" class="ml-0 flex gap-2" name="on_regular_medication" label="No" value="0" />
            </div>
            <div class="flex gap-6 p-2 mt-4" x-cloak x-show="on_regular_medication" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-6 w-full">
                    <div>
                        <x-inputs.new-input name="on_regular_medication_details" label="Please provide full details of medication that you will require during the Holiday"/>
                        <x-inputs.error name="on_regular_medication_details"/>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit"
                class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 mt-4 w-fit">
            <span>Next: Qualifications</span>
        </button>

        <button type="submit" name="save-draft-submit" class="flex w-fit gap-2 items-center text-primary-600 hover:text-white hover:bg-primary-600 border border-primary-600 font-medium rounded-lg text-sm px-5 py-3 mt-8">
            <span>Save and leave</span>
        </button>

        <p class="text-xs text-gray-500">You are free to fill in each section of the return form in your own time.</p>
    </form>

@endsection