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

@section('back-button-url')
    {{route('portal.account.term-volunteer-application.personal-and-contact-details', compact('term_volunteer_application'))}}
@stop

@section('pages-content')
    <h1 class="mt-8 text-3xl font-extrabold text-blue-900">Your availability</h1>

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

        <p class="mb-0 text-gray-900 text-sm font-medium">Please tick the holiday or holidays for which you are available. By ticking a box you are confirming that vou will be available to lead for the entirety of this period.</p>

        <div class="mt-6 flex flex-col gap-4">
            @foreach($grouped_event_options as $start_date => $grouped_event_options_by_end_date)
                @foreach($grouped_event_options_by_end_date as $end_date => $event_options)
                    @php
                        $is_checked = false;
                        if(old('availability_data_range[]')) {
                            foreach ($event_options->pluck('id') as $id) {
                                $is_checked = in_array($id, old('availability_data_range[]'));
                                if($is_checked) {
                                    break;
                                }
                            }
                        }
                    @endphp
                    <x-inputs.checkbox :checked="$is_checked" name="availability_data_range[]" id="availability_data_range_{{$event_options->pluck('id')->implode('_')}}" label="{{\App\Http\Controllers\TermVolunteerApplicationFormsController::formatPeriodForYouAvailabilityEventOption($start_date,$end_date)}}" value="{{$event_options->pluck('id')->implode(',')}}">
                        <x-slot:help>
                            <div class="flex flex-col">
                                @foreach($event_options as $event_option)
                                    <span>{{ $event_option->full_name }}</span>
                                @endforeach
                            </div>
                        </x-slot:help>
                    </x-inputs.checkbox>
                @endforeach
            @endforeach
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Preferences</h4>
        <div class="px-2.5">
            <x-inputs.input optional name="availability_preferences_note" :value="$term_volunteer_application->event_option_preferences['note']" label="If you'd like to make any further note about your availability please add that below"/>
            <p class="mt-2 text-gray-500 leading-tight text-sm font-normal">Examples: ‘I'd like to do 2 holidays in total’, ‘I'd like to do one senior and one junior.</p>
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Family information</h4>
        <div class="px-2">
            <x-inputs.input optional :value="$term_volunteer_application->event_option_preferences['family_information']" name="availability_family_note" label="If you have a spouse and children who would like to come please give all their names and the children's dates of birth"/>
            <p class="mt-2.5 text-gray-500 leading-tight text-sm font-normal">For children, date of birth is preferable to age because it will help us with planning in the future. There's no need to repeat dates of birth if you gave them last year.</p>
        </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: Requirements and medical details</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