@extends('layouts.event-volunteer')
@section('step', 4)
@section('back-button-form-url')
    {{route('volunteer-application-form.context.store', ['back'])}}
@stop
@section('holiday-form-content')
    <form enctype="multipart/form-data"
          action="{{route('volunteer-application-form.context.store')}}"
          method="post" id="booking-form" accept-charset="UTF-8">
        @csrf

        <h4 class="mt-8 mb-8 text-3xl font-bold sm:font-extrabold text-blue-900">Context</h4>

        <x-inputs.new-input label="How did you hear about us?" name="how_have_you_heard_of_us" optional="optional" />

        <div class="mt-10" x-data="{ isShowing: {{ old('part_of_church_community') ?? 'false' }} }">
            <p class="text-sm font-medium text-gray-900">Are you a part of a Church community?</p>
            <div class="flex gap-4 mt-4 max-w-fit">
                <x-inputs.new-radio-group  x-on:change="isShowing = true" :checked="old('part_of_church_community') === '1'" class="ml-0 flex gap-2" name="part_of_church_community" label="Yes" value="1" />
                <x-inputs.new-radio-group  x-on:change="isShowing = false" :checked="old('part_of_church_community') === '0'" class="ml-0 flex gap-2" name="part_of_church_community" label="No" value="0" />
            </div>
            <x-inputs.error name="part_of_church_community"/>

            <div class="flex gap-6 p-2 mt-4" x-show="isShowing" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-6 flex-1 max-w-[397px]">
                    <div>
                        <x-inputs.new-input
                            name="church_name"
                            label="What is the name of the church?"
                        />
                        <x-inputs.error name="church_name"/>
                    </div>
                    <div>
                        <x-inputs.new-input
                            name="church_location"
                            label="Church location / area"
                        />
                        <x-inputs.error name="church_location" />
                    </div>
                </div>
            </div>
        </div>

        @include('components.input-groups.privacy_policy_agreement')

        <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-2.5 mt-12 w-full sm:w-auto">
            <span>Submit application</span>
            <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.39419 0.553886C9.31105 0.388005 9.1834 0.248526 9.02551 0.151052C8.86763 0.0535775 8.68574 0.00195312 8.50019 0.00195312C8.31464 0.00195312 8.13275 0.0535775 7.97487 0.151052C7.81698 0.248526 7.68933 0.388005 7.60619 0.553886L0.60619 14.5539C0.519334 14.7275 0.484875 14.9226 0.507016 15.1154C0.529157 15.3083 0.606942 15.4905 0.730882 15.6399C0.854821 15.7893 1.01956 15.8993 1.20499 15.9567C1.39043 16.0141 1.58855 16.0162 1.77519 15.9629L6.77519 14.5339C6.98417 14.4741 7.16798 14.3479 7.29879 14.1743C7.42961 14.0007 7.50031 13.7892 7.50019 13.5719V9.00089C7.50019 8.73567 7.60555 8.48132 7.79308 8.29378C7.98062 8.10624 8.23497 8.00089 8.50019 8.00089C8.76541 8.00089 9.01976 8.10624 9.2073 8.29378C9.39483 8.48132 9.50019 8.73567 9.50019 9.00089V13.5719C9.50007 13.7892 9.57077 14.0007 9.70159 14.1743C9.8324 14.3479 10.0162 14.4741 10.2252 14.5339L15.2252 15.9619C15.4118 16.0153 15.6099 16.0133 15.7953 15.9561C15.9808 15.8988 16.1456 15.7889 16.2696 15.6396C16.3936 15.4904 16.4715 15.3082 16.4938 15.1154C16.5162 14.9226 16.4819 14.7275 16.3952 14.5539L9.39519 0.553886H9.39419Z" fill="white"/>
            </svg>
        </button>
    </form>
@endsection