@extends('layouts.return-form')
@section('step', 4)
@section('back-button-form-url')
    {{ route($booking->isSingleUser() ? 'portal.account.booking.return-form.personal-and-contact-details' : 'portal.account.booking.return-form.holiday-activities', ['booking' => $booking]) }}
@stop
@section('holiday-form-content')

    <form enctype="multipart/form-data"
          action="{{route('portal.account.booking.return-form.medical-details', ['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">Medical details</h4>

        <div class="mt-10">

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

            <x-inputs.new-input name="medical_treatment_details" label="{{ __($lang_file.'.medical_details.medical_treatment_details.caption', ['name' => $attendee_name]) }} has received in the last 6 months" class="!font-medium !mt-4" optional/>

            <h4 class="text-xl font-bold text-gray-900 mt-10">Medical conditions</h4>
            <p class="text-sm font-medium text-gray-900 mt-6">{{ __($lang_file.'.medical_details.medical_conditions.caption', ['name' => $attendee_name]) }} <span class="text-gray-600 text-sm ml-1">(optional)</span></p>

            <div class="leading-none mt-6">
                @foreach(old('medical_conditions') as $key => $condition)
                    <div class="flex gap-2 leading-none @if(!$loop->first)
                    mt-4
                    @endif">
                        <input type="checkbox" class="w-4 h-4 text-blue-600 border bg-gray-50 border-gray-400 rounded focus:ring-blue-500"
                                           name="medical_conditions[{{$key}}]"
                                           id="medical_conditions[{{$key}}]"
                                           value="true"
                                           @checked($condition)

                        />
                        <label class="leading-none text-sm font-medium text-gray-900" for="medical_conditions[{{$key}}]">{{$key}}</label>
                    </div>
                @endforeach
            </div>
            <div class="flex gap-6 p-2 mt-4">
                <span class="block bg-gray-400 w-[2px]"></span>
                <label class="block text-sm font-semibold text-gray-900 w-full">
                    <span>Please provide further details</span>
                    <span class="text-sm font-normal">(optional)</span>
                    <input
                        class="bg-gray-50 border border-gray-400 text-gray-900 font-normal text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-4 py-3 mt-2"
                        name="medical_details"
                        value="{{old('medical_details') }}"
                    />
                </label>
            </div>



            <div x-data="{ regular_medication_need: {{ old('regular_medication_need') == '1' ? 'true' : 'false' }} }">
                <h4 class="text-xl font-bold text-gray-900 mt-12">Medication</h4>
                <p class="leading-tight text-sm text-gray-500 mt-4">{{ __($lang_file.'.medical_details.medication.caption', ['name' => $attendee_name]) }}</p>


                <p class="text-sm font-medium text-gray-900 mt-6">{{ __($lang_file.'.medical_details.regular_medication_need.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="regular_medication_need = true" :checked="old('regular_medication_need') == '1'" class="ml-0 flex gap-2" name="regular_medication_need" label="Yes" value="1" />
                    <x-inputs.new-radio-group  x-on:change="regular_medication_need = false" :checked="old('regular_medication_need') == '0'" class="ml-0 flex gap-2" name="regular_medication_need" label="No" value="0" />
                </div>

                <div class="flex gap-6 p-2 mt-4" x-cloak x-show="regular_medication_need" x-transition>
                    <span class="block bg-gray-400 w-[2px]"></span>
                    <x-inputs.new-input
                        name="regular_medication_details"
                        label="{{ __($lang_file.'.medical_details.regular_medication_list_field.caption', ['name' => $attendee_name]) }}"
                    />
                </div>
                <x-inputs.error name="regular_medication_details"/>
            </div>


            <p class="text-sm font-medium text-gray-900 mt-6">{{ __($lang_file.'.medical_details.required_basic_medication.caption', ['name' => $attendee_name]) }}</p>

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

            <x-inputs.error name="required_basic_medication"/>


            <h4 class="text-xl font-bold text-gray-900 mt-12">Vaccinations</h4>
            <p class="text-sm font-medium text-gray-900 mt-6">{{ __($lang_file.'.medical_details.date_of_anti_tetanus_injection.caption', ['name' => $attendee_name]) }}</p>
            <div class="flex gap-4 justify-between sm:justify-start">
                <x-inputs.select name="date_of_anti_tetanus_injection[month]" class="flex-1 sm:max-w-[165px]" label="Month" :options="config('date.months')" placeholder=""/>
                <x-inputs.input name="date_of_anti_tetanus_injection[year]" label="Year" class="sm:max-w-[165px]"/>
            </div>
            @error('date_of_anti_tetanus_injection')
                <div class="form-group-error-box font-normal text-md text-red-500">
                    <small>{!! $message !!}</small>
                </div>
            @enderror


            <p class="text-sm font-medium text-gray-900 mt-6">Was the primary course and booster tetanus completed?</p>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group :checked="old('primary_course_booster_completed') == '1'" class="ml-0 flex gap-2" name="primary_course_booster_completed" label="Yes" value="1" />
                <x-inputs.new-radio-group :checked="old('primary_course_booster_completed') == '0'" class="ml-0 flex gap-2" name="primary_course_booster_completed" label="No" value="0" />
            </div>
            <x-inputs.error name="primary_course_booster_completed"/>


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


            @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: Requirements and needs</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