@extends('layouts.event-volunteer')
@section('step', 1)
@section('holiday-form-content')

    <form enctype="multipart/form-data"
          action="{{route('volunteer-application-form.your-details.store')}}"
          method="post" id="booking-form" accept-charset="UTF-8">
        @csrf

        <h4 class="mt-8 text-3xl font-bold sm:font-extrabold text-blue-900">Your details</h4>
        <div class="mt-12">
            <x-inputs.select name="title" label="Title" :options="\App\Models\User::getTitlesAsSelectArray()" class="max-w-[107px]"/>
            <x-inputs.error name="title" />

            <div class="mt-4">
                <x-inputs.new-input name="first_name" label="First Name" />
                <x-inputs.error name="first_name"/>
            </div>

            <div class="mt-4">
                <x-inputs.new-input name="last_name" label="Last Name" />
                <x-inputs.error name="last_name"/>
            </div>
            <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] mt-4">
                <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" />


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

            <div class="mt-4">
                <x-inputs.new-input name="email" type="email" label="Email"/>
                <x-inputs.error name="email" />
            </div>

            <div class="mt-4">
                <x-inputs.new-input name="mobile_number" type="tel" label="Mobile Number" class="max-w-[384px]"/>
                <x-inputs.error name="mobile_number" />
            </div>

            <button type="submit" class="text-white bg-primary-600 w-full sm:w-auto 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: Address
            </button>
        </div>
    </form>

@endsection