@extends('layouts.return-form')
@section('step', 1)
@section('back-button-form-url')
    {{ route('portal.account.booking', ['booking' => $booking]) }}
@stop
@section('holiday-form-content')

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

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

        <div class="mt-12">
            <h4 class="text-xl font-bold text-gray-900 mt-8 mb-6">Arrival</h4>
            <p class="text-sm font-medium text-gray-900">{{ __($lang_file.'.travel_details.arriving_by.caption', ['name' => $attendee_name, 'date' => $booking->eventOption->start->format(config('formats.datetime.date-without-year-with-day-name'))]) }}</p>
            <div class="mt-6">
                <div class="flex flex-col gap-4 max-w-fit">
                        <x-inputs.new-radio-group class="!ml-0 flex gap-4" name="arriving_by" label="Arriving by car" :checked="old('arriving_by') === 'car'" value="car"/>
                        <x-inputs.new-radio-group class="!ml-0 flex gap-4" name="arriving_by" label="Arriving by train" :checked="old('arriving_by') === 'train'" value="train"/>
                </div>
            </div>

            <x-inputs.new-input name="arriving_details" label="{{ __($lang_file.'.travel_details.arriving_details.caption', ['name' => $attendee_name]) }}" class="!font-medium !mt-7" optional/>
            <p class="mt-2 leading-tight text-sm text-gray-500">e.g. They will be arriving late</p>

            <h4 class="text-xl font-bold text-gray-900 mt-8 mb-6">Departure</h4>
            <p class="text-sm font-medium text-gray-900">{{ __($lang_file.'.travel_details.departing_by.caption', ['name' => $attendee_name, 'date' => $booking->eventOption->end->format(config('formats.datetime.date-without-year-with-day-name'))]) }}</p>
            <div class="mt-6">
                <div class="flex flex-col gap-4 max-w-fit">
                    <x-inputs.new-radio-group class="!ml-0 flex gap-4" name="departing_by" label="Departing by car" :checked="old('departing_by') === 'car'" value="car"/>
                    <x-inputs.new-radio-group class="!ml-0 flex gap-4" name="departing_by" label="Departing by train" :checked="old('departing_by') === 'train'" value="train"/>
                </div>
            </div>

            <x-inputs.new-input name="departing_details" label="{{ __($lang_file.'.travel_details.departing_details.caption', ['name' => $attendee_name]) }}" class="!font-medium !mt-7" optional/>
            <p class="mt-2 leading-tight text-sm text-gray-500">e.g. They will be leaving early</p>

            @if($booking->returnForm->isSubmitted())
                <button type="submit" name="update" 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">
                    <span>Update</span>
                </button>
            @else
                <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">
                    <span>Next: Personal and contact details</span>
                </button>

                <button type="submit" name="save-draft-submit" form="return-form" class="flex 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="mt-4 text-xs text-gray-500">You are free to fill in each section of the return form in your own time.</p>
            @endif
        </div>
    </form>

@endsection