@extends('term-volunteer-application-forms.volunteer-application-layout')
@section('step', 1)

@section('back-button-url')
    {{route('portal.account.term-volunteer-application.show', compact('term_volunteer_application'))}}
@stop

@section('pages-content')

    <h1 class="mt-8 text-3xl font-extrabold text-blue-900">Personal and contact details</h1>

    <form action="{{ route('portal.account.term-volunteer-application.personal-and-contact-details', compact('term_volunteer_application')) }}" method="post"
          id="term_volunteer_application_form" class="mt-10 flex flex-col gap-4">
        @csrf

        <div class="max-w-[168px]">
            <x-inputs.select name="title" label="Title" :options="\App\Models\User::getTitlesAsSelectArray()"/>
            <x-inputs.error name="title"/>
        </div>
        <div>
            <x-inputs.new-input name="first_name" label="First Name" class="sm:max-w-full"/>
            <x-inputs.error name="first_name"/>
        </div>
        <div>
            <x-inputs.new-input name="last_name" label="Last Name" class="sm:max-w-full"/>
            <x-inputs.error name="last_name"/>
        </div>

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

        <div>
            <x-inputs.select class="max-w-[192px] !mt-0" name="marital_status" label="Marital status"
                             :options="\App\Models\User::getMaritalStatusesAsSelectArray()"/>
            <x-inputs.error name="marital_status"/>
        </div>

        <div x-data="{ is_qualified_to_drive: {{ old('is_qualified_to_drive') == '1' ? 'true' : 'false' }} }">
            <h3 class="text-gray-900 text-sm font-semibold">
                Are you qualified to drive?
            </h3>
            <div class="flex flex-col gap-4 mt-6 max-w-fit">
                <x-inputs.new-radio-group x-on:change="is_qualified_to_drive = true" :checked="old('is_qualified_to_drive') == '1'" class="ml-0 flex gap-2" name="is_qualified_to_drive" label="Yes" value="1" />
                <x-inputs.new-radio-group x-on:change="is_qualified_to_drive = false" :checked="old('is_qualified_to_drive') == '0'" class="ml-0 flex gap-2" name="is_qualified_to_drive" label="No" value="0" />
            </div>
            <div class="flex gap-6 p-2 mt-4" x-cloak x-show="is_qualified_to_drive" x-transition>
                <span class="block bg-gray-400 w-[2px]"></span>
                <div class="flex flex-col gap-4">
                    <h3 class="text-gray-900 text-sm font-medium">When did you acquire your license?</h3>
                    <div class="flex gap-4">
                        <x-inputs.select class="w-[140px] !mt-0" name="acquire_drive_licence_date[month]" label="Month"
                                         :options="config('date.months')" placeholder=""/>
                        <x-inputs.new-input class="w-[140px]" name="acquire_drive_licence_date[year]" label="Year"/>
                    </div>
                    <x-inputs.error name="acquire_drive_licence_date"/>
                </div>
            </div>
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Contact details</h4>
        <div>
            <x-inputs.new-input type="email" name="email" label="Email" class="sm:max-w-full"/>
            <x-inputs.error name="email"/>
        </div>
        <div>
            <x-inputs.new-input type="phone" name="mobile_number" label="Mobile number" class="sm:max-w-full"/>
            <x-inputs.error name="mobile_number"/>
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Home address</h4>
        <div>
            <x-inputs.new-input name="address1" label="Address 1" class="sm:max-w-full"/>
            <x-inputs.error name="address1"/>
        </div>

        <div>
            <x-inputs.new-input optional name="address2" label="Address 2" class="sm:max-w-full"/>
            <x-inputs.error name="address2"/>
        </div>

        <div class="flex gap-8">
            <div>
                <x-inputs.new-input name="county" label="County" class="sm:max-w-full"/>
                <x-inputs.error name="county"/>
            </div>

            <div>
                <x-inputs.new-input name="postcode" label="Postcode" class="sm:max-w-full"/>
                <x-inputs.error name="postcode"/>
            </div>
        </div>

        <h4 class="mt-6 text-xl font-bold text-gray-900">Next of kin</h4>
        <p class="text-gray-500 text-base font-normal">This will be our next of kin contact during the holiday, if needed</p>

        <div>
            <x-inputs.new-input name="next_of_kin_name" label="Next of kin name" class="sm:max-w-full"/>
            <x-inputs.error name="next_of_kin_name"/>
        </div>

        <div>
            <x-inputs.new-input name="next_of_kin_phone_number" label="Next of kin phone number" class="sm:max-w-full"/>
            <x-inputs.error name="next_of_kin_phone_number"/>
        </div>

        <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-4 w-fit">
            <span>Next: Your availability</span>
        </button>

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

@endsection