@extends('layouts.return-form')
@section('step', 5)
@section('back-button-form-url')
    {{ route('portal.account.booking.return-form.medical-details', ['booking' => $booking]) }}
@stop
@section('holiday-form-content')

    <form enctype="multipart/form-data"
          action="{{route('portal.account.booking.return-form.requirements-and-needs', ['booking' => $booking])}}"
          method="post" id="return-form" accept-charset="UTF-8"
          class="mt-10"
    >
        @csrf

        <h4 class="mt-8 text-3xl font-extrabold text-blue-900">Requirements and needs</h4>

        <div class="mt-10">

            <h4 class="text-xl font-bold text-gray-900">Accommodation</h4>
            <x-inputs.new-input name="accommodation_details" label="{{ __($lang_file.'.requirements_and_needs.accommodation_details.caption', ['name' => $attendee_name]) }}" class="!font-medium !mt-4" optional/>

            <div x-data="{ have_dietary_requirements: {{ old('have_dietary_requirements') == '1' ? 'true' : 'false' }} }">
                <h4 class="text-xl font-bold text-gray-900 mt-10">Dietary requirements</h4>
                <p class="leading-tight text-sm text-gray-900 mt-6">{{ __($lang_file.'.requirements_and_needs.have_dietary_requirements.caption', ['name' => $attendee_name, 'camp_group' => $booking->eventOption->event->campGroup->name]) }}</p>

                <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>
                <x-inputs.error name="have_dietary_requirements"/>

                <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>
                        <x-inputs.new-input
                            name="dietary_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_details"/>

                        <x-inputs.new-input
                            class="mt-6"
                            name="symptoms_allergic_reaction"
                            optional
                            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="symptoms_allergic_reaction"/>
                    </div>
                </div>
            </div>


            <div x-data="{ educational_needs: {{ old('educational_needs') == '1' ? 'true' : 'false' }} }" class="mt-10">
                <h4 class="text-xl font-bold text-gray-900">Educational needs</h4>
                <p class="leading-tight text-sm text-gray-900 mt-6">{{ __($lang_file.'.requirements_and_needs.educational_needs.caption', ['name' => $attendee_name]) }}</p>

                <div class="flex flex-col gap-4 mt-6 max-w-fit">
                    <x-inputs.new-radio-group  x-on:change="educational_needs = true" :checked="old('educational_needs') == '1'" class="ml-0 flex gap-2" name="educational_needs" label="Yes" value="1" />
                    <x-inputs.new-radio-group  x-on:change="educational_needs = false" :checked="old('educational_needs') == '0'" class="ml-0 flex gap-2" name="educational_needs" label="No" value="0" />
                </div>
                <x-inputs.error name="educational_needs"/>

                <div class="flex gap-6 p-2 mt-4" x-cloak x-show="educational_needs" x-transition>
                    <span class="block bg-gray-400 w-[2px]"></span>
                    <div>
                        <x-inputs.new-input
                            name="educational_details"
                            label="Please provide details on any special educational needs we should be aware of so that we can best care for your child while they are on holiday with us."
                        />
                        <p class="mt-2 leading-tight text-sm text-gray-500">If you would like to discuss these further with us please get in touch.</p>
                    </div>
                </div>
                <x-inputs.error name="educational_details"/>
            </div>

            @if($booking->returnForm->isSubmitted())
                <button type="submit" name="update" 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-8">
                    <span>Update</span>
                </button>
            @else
                <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-10">
                    <span>Next: Consent</span>
                </button>

                <button type="submit" name="save-draft-submit" form="return-form" class="flex 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="mt-4 text-xs text-gray-500">You are free to fill in each section of the return form in your own time.</p>
            @endif
        </div>
    </form>

@endsection