@extends('layouts.booking-application')
@section('step', 4)
@section('back-button-form-url')
    {{route('event.booking.child-details.store', ['event_slug' => $event->slug, 'back'])}}
@stop
@section('holiday-form-content')

            <form enctype="multipart/form-data"
                  action="{{route('event.booking.child-details.store', ['event_slug' => $event->slug])}}"
                  method="post" id="booking-form" accept-charset="UTF-8"
                  class="mt-10"
            >
                @csrf

            <h4 class="mt-8 text-3xl font-extrabold text-blue-900">Child details</h4>

                <div class="mt-12">
                    <x-inputs.input name="child_firstname" label="First Name"/>
                    <x-inputs.input name="child_lastname" label="Last Name"/>

                    <p class="text-sm font-semibold text-gray-900 mt-4">Date of birth</p>
                    <div class="flex gap-4 justify-between sm:justify-start sm:max-w-[300px]">
                        <x-inputs.input name="child_dateofbirth[day]" label="Day"/>
                        <x-inputs.select name="child_dateofbirth[month]" label="Month" :options="config('date.months')" placeholder=""/>
                        <x-inputs.input name="child_dateofbirth[year]" label="Year"/>
                    </div>
                    <x-inputs.error name="child_dateofbirth" />

                    <x-inputs.select name="child_gender" label="Gender" :options="\App\Enums\Gender::asSelectArray()" class="max-w-[168px]"/>
                    <x-inputs.error name="child_gender" />

                    <h4 class="text-xl font-bold text-gray-900 mt-8 mb-6">School</h4>

                    <x-inputs.input name="child_school" label="School"/>
                    <x-inputs.select name="child_school_year" class="max-w-[156px]" label="School year" :options="$event->campGroup->getSchoolYearsAsSelectArray()"/>
                    <x-inputs.error name="child_school_year" />

                    <x-inputs.input optional="true" name="child_friends" label="Friends" help="This could be the name of a specific friend or friends your child would like to share a room with on the holiday. We seek to meet requests, but cannot guarantee to do so. Many come without specific friends and soon make them!"/>

                    <div class="mt-10">
                        <x-inputs.checkbox name="child_bursary" optional label="Send me information about a bursary" help="Limited bursaries are available for those who otherwise feel they would not be able to attend." value="1"/>
                    </div>

                    @include('components.input-groups.privacy_policy_agreement')
                    @include('components.input-groups.booking_conditions_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-14 py-2.5 mt-16">
                        <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>
                </div>
            </form>

@endsection