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

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

@section('pages-content')

    <form method="post" action="{{ route('portal.account.term-volunteer-application.holiday-activities', compact('term_volunteer_application')) }}" id="term_volunteer_application_form">
        @csrf

        <h1 class="mt-8 text-3xl font-extrabold text-blue-900">Holiday activities</h1>

        <p class="text-gray-900 text-sm font-medium mt-10">Please indicate whether you would be happy to be involved in the following activities/responsibilities:</p>

        @if($holiday_activities->isNotEmpty())
            <table class="mt-8 w-full table-fixed border-collapse">
                <thead>
                    <tr>
                        <th></th>
                        @foreach(\App\Models\CampGroupVolunteerHolidayActivity::HOLIDAY_ACTIVITIES_ANSWERS as $holiday_activities_answer)
                            <th class="text-base text-bold text-gray-500">{{$holiday_activities_answer}}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($holiday_activities as $activity)
                        <tr>
                            <td class="leading-none text-base font-normal text-gray-900">
                                <span>{{$activity->label}}</span>
                            </td>
                            @foreach(\App\Models\CampGroupVolunteerHolidayActivity::HOLIDAY_ACTIVITIES_ANSWERS as $holiday_activities_answer)
                                <td class="p-2">
                                    <div class="flex justify-center">
                                        <label class="flex p-2 w-fit" for="holiday_activities_{{$holiday_activities_answer}}_{{$activity->label}}">
                                            <input type="radio"
                                                   id="holiday_activities_{{$holiday_activities_answer}}_{{$activity->label}}"
                                                   name="holiday_activities[{{$activity->label}}]"
                                                   @checked(old('holiday_activities.'.$activity->label) === $holiday_activities_answer)
                                                   value="{{$holiday_activities_answer}}" />
                                        </label>
                                    </div>
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif

        <h4 class="mt-8 text-xl font-bold text-gray-900">Further details</h4>

        <div class="mt-8 flex flex-col gap-8">

            <div>
                <x-inputs.new-input name="activities_additional_preferences"
                                    optional
                                    label="Is there any further information it would be helpful for us to know about your preferences listed above?"/>
                <x-inputs.error name="activities_additional_preferences"/>
            </div>

            <div>
                <x-inputs.new-input name="activities_musical_instruments_details"
                                    optional
                                    label="Please specify if there is a musical instrument you can play or bring"/>
                <x-inputs.error name="activities_musical_instruments_details"/>
            </div>

            <div>
                <x-inputs.new-input name="activities_propositions"
                                    optional
                                    label="Are there any new activities that you would suggest for future events?"/>
                <x-inputs.error name="activities_propositions"/>
            </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-14 w-fit">
            <span>Next: Doctrinal basis agreement</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 mt-4">You are free to fill in each section of the return form in your own
            time.</p>
    </form>
@endsection