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

    <form enctype="multipart/form-data"
          action="{{route('portal.account.booking.return-form.personal-and-contact-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">Personal and contact details</h4>

        <div class="mt-12">

            <p class="text-sm font-semibold text-gray-900 mt-4">{{ __($lang_file.'.personal_and_contact_details.date_of_birth.caption', ['name' => $attendee_name]) }}</p>
            <div class="flex gap-4 justify-between sm:justify-start sm:max-w-[300px]">
                <x-inputs.input name="date_of_birth[day]" label="Day"/>
                <x-inputs.select name="date_of_birth[month]" class="flex-1" label="Month" :options="config('date.months')" placeholder=""/>
                <x-inputs.input name="date_of_birth[year]" label="Year"/>
            </div>

            <x-inputs.error name="date_of_birth" />

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

            <p class="text-sm font-medium text-gray-900">This will be our next of kin contact during the holiday, if needed</p>
            <x-inputs.new-input name="primary_contact_next_of_kin_name" label="Name of next of kin" class="!font-medium !mt-4"/>
            <x-inputs.error name="primary_contact_next_of_kin_name" />
            <x-inputs.new-input name="primary_contact_phone_number" label="Contact phone number" class="!font-medium !mt-4"/>
            <x-inputs.error name="primary_contact_phone_number" />
            <p class="mt-2 leading-tight text-sm text-gray-500">A mobile number is preferable</p>

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

            <p class="text-sm font-medium text-gray-900">{{ __($lang_file.'.personal_and_contact_details.secondary_contact_details.caption', ['name' => $attendee_name]) }}</p>
            <x-inputs.new-input name="secondary_contact_name" label="Name" class="!font-medium !mt-4"/>
            <x-inputs.error name="secondary_contact_name" />
            <x-inputs.new-input name="secondary_relationship" label="{{ __($lang_file.'.personal_and_contact_details.secondary_relationship.caption', ['name' => $attendee_name]) }}" class="!font-medium !mt-4"/>
            <x-inputs.error name="secondary_relationship" />
            <p class="mt-2 leading-tight text-sm text-gray-500">e.g. Grandmother, Family friend</p>
            <x-inputs.new-input name="secondary_mobile_phone_number" label="Mobile phone number" class="!font-medium !mt-4 max-w-[384px]"/>
            <x-inputs.error name="secondary_mobile_phone_number" />
            <x-inputs.new-input name="secondary_home_phone_number" label="Home phone number" class="!font-medium !mt-4 max-w-[384px]" optional />


            <h4 class="text-xl font-bold text-gray-900 mt-8 mb-6">Doctor’s contact details</h4>
            <p class="text-sm font-medium text-gray-900">{{ __($lang_file.'.personal_and_contact_details.doctor_contact_details.caption', ['name' => $attendee_name]) }}</p>

            <x-inputs.new-input name="doctor_name" label="Doctor's name" class="!font-medium !mt-4"/>
            <x-inputs.error name="doctor_name" />
            <x-inputs.new-input name="doctor_address" label="Doctor's address" class="!font-medium !mt-4"/>
            <x-inputs.error name="doctor_address" />
            <x-inputs.new-input name="doctor_phone_number" label="Doctor's telephone number" class="!font-medium !mt-4 max-w-[384px]"/>
            <x-inputs.error name="doctor_phone_number" />
            <p class="mt-2 leading-tight text-sm text-gray-500">A mobile number is preferable</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: {{ $booking->isSingleUser() ? 'Medical details' : 'Holiday activities' }}</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