@extends('layouts.student-booking-application')
@section('step', 1)
@section('holiday-form-content')

    <form enctype="multipart/form-data"
          action="{{ $url }}"
          method="post" id="booking-form" accept-charset="UTF-8" class="mt-8">
        @csrf

        <div>
            <h4 class="text-3xl mt-8 font-extrabold text-blue-900">Choose holidays</h4>
            <div class="mt-12">
                <div class="flex flex-col gap-4 mt-8 max-w-fit">
                    <p class="text-sm font-medium mb-2 text-gray-900">Please select which event options you are able to attend.</p>
                    @foreach($options as $value => $label)
                        <x-inputs.checkbox name="event_option_ids[{{$loop->index}}]" :label="$label['label']" value="{{$value}}" :help="$label['helpLabel']"/>
                    @endforeach
                </div>
                <x-inputs.error class="mt-2" name="event_option_ids"/>
            </div>

            <div x-data="{ beenBefore: {{ old('been_before') ?? 1 }} }">
                <h4 class="text-xl font-bold text-gray-900 mt-8">Previous Holidays</h4>

                <p class="text-sm font-medium text-gray-900 mt-4">Have you attended an {{$campGroup->name}} Holiday before</p>
                <div class="flex gap-4 mt-4 max-w-fit">
                    <x-inputs.new-radio-group  x-on:change="beenBefore = 1" :checked="old('been_before') === '1'" class="ml-0 flex gap-2" name="been_before" label="Yes" value="1" />
                    <x-inputs.new-radio-group  x-on:change="beenBefore = 0" :checked="old('been_before') === '0'" class="ml-0 flex gap-2" name="been_before" label="No" value="0" />
                </div>
                <x-inputs.error name="been_before" />

                <div class="flex gap-6 p-2 mt-4" x-show="!beenBefore" x-transition>
                    <span class="block bg-gray-400 w-[2px]"></span>
                    <div class="flex flex-col">
                        <x-inputs.new-input
                            name="how_have_you_heard_of_us"
                            label="How did you hear of {{$campGroup->name}} holidays?"
                        />
                        <x-inputs.error name="how_have_you_heard_of_us" />
                    </div>
                </div>

            </div>


            <button type="submit" class="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">
                Next: Your details
            </button>
        </div>
    </form>

@endsection