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

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

@section('pages-content')

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

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

        <h4 class="mt-8 text-xl font-bold text-gray-900">Select skill areas</h4>

        <p class="text-gray-900 text-sm font-medium mt-4">We provide training, for those willing to grow in certain areas. Which of the below would you be open to training for, or upskilling to move up a level?</p>

        <div class="mt-8">
            @if($errors->any())
                {!! implode('', $errors->all('<div class="text-sm text-red-500 mt-2">:message</div>')) !!}
            @endif
        </div>

        <div class="mt-8 flex flex-col gap-4">
            @foreach($camp_group_training_opportunities as $camp_group_training_opportunity_label)
                <x-inputs.checkbox name="training_opportunities[{{$camp_group_training_opportunity_label}}]"
                                   id="training_opportunities_{{$camp_group_training_opportunity_label}}"
                                   :checked="in_array($camp_group_training_opportunity_label, $term_volunteer_application->training_opportunities ?? [])"
                                   :label="$camp_group_training_opportunity_label"
                                   :value="$camp_group_training_opportunity_label" />
            @endforeach
        </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-8 w-fit">
            <span>Next: Holiday activities</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