@php
    use App\Helpers\Helper;
@endphp

{{-- Volunteer application form. Shared by the Volunteer page and the homepage. --}}
@php
    $types = $types ?? \App\Enum\GenderTypeEnum::cases();
    $dailyAvailabilitytypes = $dailyAvailabilitytypes ?? \App\Enum\DailyAvailabilityEnum::cases();
@endphp

        <div id="volunteer-form" class="container-page pt-10 md:pt-16 pb-16 md:pb-20 scroll-mt-28">
          <div class="card-ui card-pad p-6! md:p-10! max-w-5xl mx-auto">
            <h2 class="text-h2 font-bold text-gray-900 text-center mb-2">{!! Helper::content('pages.volunteer_form') !!}</h2>
            <p class="text-center text-gray-600 mb-8">Tell us about yourself and when you would like to volunteer. Fields marked * are required.</p>
            <form class="space-y-4"action="{{ route('volunteer-page.store') }}" method="POST"
                enctype="multipart/form-data">
                @csrf

                <h3 class="text-lg font-bold text-primary border-b border-gray-200 pb-2">{!! Helper::content('pages.volunteer_personal_details') !!}</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Full Name -->
                    <x-fields.text-field label="{{ __('pages.full_name') }}" :data="old('full_name')" fieldName="full_name"
                        :required=true />

                    <!-- Date of Birth (AD) -->
                    <x-fields.date-field label="{{ __('pages.date_of_birth_ad') }}" :data="old('date_of_birth_ad')"
                        fieldName="date_of_birth_ad" :required=true />

                    <!-- Date of Birth (BS) -->
                    <x-fields.text-field label="{{ __('pages.date_of_birth_bs') }}" :data="old('date_of_birth_bs')"
                        fieldName="date_of_birth_bs" :required=true />

                    <!-- Age -->
                    <x-fields.integer-field label="{{ __('pages.age') }}" :data="old('age')" fieldName="age" :required=true
                        id="age" attribute="readonly" />

                    <!-- Gender -->
                    <x-fields.select-enum-field label="{{ __('pages.gender') }}" :data="old('gender')" fieldName="gender"
                        :required=true :loopValue="$types" useEnum="GenderTypeEnum" />

                    <!-- Other Gender -->
                    <x-fields.text-field id="otherGenderField" class="hidden" label="{{ __('pages.specify_gender') }}"
                        fieldName="other_gender" :data="old('other_gender')" :required=false />

                    <!-- Nationality -->
                    <x-fields.text-field label="{{ __('pages.nationality') }}" :data="old('nationality')" fieldName="nationality"
                        :required=true />

                    <!-- Passport Number -->
                    <x-fields.tel-field label="{{ __('pages.passport_no') }}" :data="old('passport_number')" fieldName="passport_number"
                        :required=false />

                    <!-- Email -->
                    <x-fields.email-field label="{{ __('pages.email') }}" :data="old('email')" fieldName="email"
                        :required=true />

                    <!-- Contact Number -->
                    <x-fields.tel-field label="{{ __('pages.contact_no') }}" :data="old('contact_no')" fieldName="contact_no"
                        :required=true />

                    <!-- Current Address -->
                    <x-fields.text-field label="{{ __('pages.current_address') }}" :data="old('current_address')"
                        fieldName="current_address" :required=true />
                </div>

                <fieldset class="w-full border border-gray-200 rounded-xl p-4 md:p-5">
                    <legend class="block text-sm font-semibold text-gray-700 px-5">{{ __('pages.emergency_detail') }}
                    </legend>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- Emergency Full Name -->
                        <x-fields.text-field label="{{ __('pages.full_name') }}" :data="old('emergency_full_name')"
                            fieldName="emergency_full_name" :required=true />

                        <!-- Emergency Relationship -->
                        <x-fields.text-field label="{{ __('pages.relationship') }}" :data="old('emergency_relationship')"
                            fieldName="emergency_relationship" :required=true />

                        <!-- Emergency Contact Number -->
                        <x-fields.tel-field label="{{ __('pages.contact_no') }}" :data="old('emergency_contact_number')"
                            fieldName="emergency_contact_number" :required=true />

                        <!-- Emergency Email -->
                        <x-fields.email-field label="{{ __('pages.email') }}" :data="old('emergency_email')"
                            fieldName="emergency_email" :required=true />
                    </div>
                </fieldset>

                <h3 class="text-lg font-bold text-primary border-b border-gray-200 pb-2 mt-2">{!! Helper::content('pages.volunteer_about_heading') !!}</h3>
                <div class="grid grid-cols-1 gap-4">
                    <!-- Area of Interest -->
                    <x-fields.textarea-summernote-field label="{{ __('pages.area_of_interest') }}" :data="old('area_of_interest')"
                        fieldName="area_of_interest" :required=true />

                    <!-- Skll Experties -->
                    <x-fields.textarea-summernote-field label="{{ __('pages.skill_experties') }}" :data="old('skill_experties')"
                        fieldName="skill_experties" :required=true />

                    <!-- Motivation -->
                    <x-fields.textarea-summernote-field label="{{ __('pages.motivation') }}" :data="old('motivation')"
                        fieldName="motivation" :required=true />

                    <!-- Previous Volunteer Experience -->
                    <x-fields.textarea-summernote-field label="{{ __('pages.volunteer_experience') }}" :data="old('previous_volunteer_experience')"
                        fieldName="previous_volunteer_experience" :required=true />
                </div>

                <h3 class="text-lg font-bold text-primary border-b border-gray-200 pb-2 mt-2">{!! Helper::content('pages.volunteer_availability_heading') !!}</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Start Date -->
                    <x-fields.date-field label="{{ __('pages.start_date') }}" :data="old('start_date')" fieldName="start_date"
                        :required=true />

                    <!-- Start Date -->
                    <x-fields.date-field label="{{ __('pages.end_date') }}" :data="old('end_date')" fieldName="end_date"
                        :required=true />

                    <!-- Daily Availability -->
                    <x-fields.select-enum-field label="{{ __('pages.daily_availability') }}" :data="old('daily_availability')"
                        fieldName="daily_availability" :required=true :loopValue="$dailyAvailabilitytypes" useEnum="DailyAvailabilityEnum" />

                    <!-- Insurance Proof -->
                    <x-fields.file-upload-field label="{{ __('pages.insurance_proof') }}" :data="old('insurance_proof')"
                        fieldName="insurance_proof" currentName="current_file" :required=true
                        accept=".pdf, .doc, .docx, .xls, .xlsx" />

                    <!-- CV -->
                    <x-fields.file-upload-field label="{{ __('pages.cv') }}" :data="old('cv')" fieldName="cv"
                        currentName="current_file" :required=true accept=".pdf, .doc, .docx, .xls, .xlsx" />

                    <!-- Passport Copy -->
                    <x-fields.image-upload-field label="{{ __('pages.passport_copy') }}" :data="old('passport_copy')"
                        fieldName="passport_copy" currentName="current_image" :required=true />

                    <!-- Visa Copy -->
                    <x-fields.image-upload-field label="{{ __('pages.visa_copy') }}" :data="old('visa_copy')"
                        fieldName="visa_copy" currentName="current_image" :required=true />

                    <!-- Digital Signature -->
                    <x-fields.image-upload-field label="{{ __('pages.digital_signature') }}" :data="old('digital_signature')"
                        fieldName="digital_signature" currentName="current_image" :required=true />

                    <!-- Accomendation Required -->
                    <x-fields.boolean-field label="{{ __('pages.accomodation_required') }}?" :data="old('accomodation_required')"
                        fieldName="accomodation_required" :required=false />

                    <!-- Travel Insurance -->
                    <x-fields.boolean-field label="{{ __('pages.travel_insurance') }}?" :data="old('travel_insurance')"
                        fieldName="travel_insurance" :required=false />


                    <!-- Criminal Record -->
                    <x-fields.boolean-field label="{{ __('pages.criminal_record') }}?" :data="old('criminal_record')"
                        fieldName="criminal_record" :required=false />

                    <!-- Medical Condition -->
                    <x-fields.boolean-field label="{{ __('pages.medical_condition') }}?" :data="old('medical_condition')"
                        fieldName="medical_condition" :required=false />
                </div>

                <h3 class="text-lg font-bold text-primary border-b border-gray-200 pb-2 mt-2">{!! Helper::content('pages.volunteer_health_heading') !!}</h3>
                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4 mt-2">
                    <!-- Medical Description -->
                    <x-fields.textarea-field id="medicalDescription" label="{{ __('pages.medical_description') }}"
                        :data="old('medical_description')" fieldName="medical_description" :required=true />

                    <!-- Dietary Restriction -->
                    <x-fields.textarea-field label="{{ __('pages.dietary_restriction') }}" :data="old('dietary_restriction')"
                        fieldName="dietary_restriction" :required=false />
                </div>

                <div class="col-span-1 md:col-span-2 lg:col-span-3 flex items-center gap-2 mt-3">
                    <input type="checkbox" id="aggrement" name="aggrement"
                        class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-primary focus:ring-2"
                        value="1" {{ old('aggrement') == 1 ? 'checked' : '' }}>
                    <label for="aggrement" class="block text-sm font-semibold text-gray-700">
                        {!! app()->getLocale() == 'en'
                            ? 'I accept all the <a href="#" class="text-blue-600 hover:underline">Terms and Conditions</a>.'
                            : 'म सबै <a href="#" class="text-blue-600 hover:underline">नियम तथा शर्तहरू</a> स्वीकृत गर्दछु' !!}
                    </label>
                    <br>
                    @error('aggrement')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <x-recaptcha action="volunteer" />
                </div>

                <hr>

                <div class="w-full flex justify-center">
                    <button type="submit"
                        class="btn w-full sm:w-auto sm:min-w-48 border-2 border-primary bg-primary text-white hover:bg-white hover:text-primary cursor-pointer tracking-wide my-6 font-semibold shadow-md hover:shadow-lg">
                        {{ __('pages.submit') }}
                    </button>
                </div>
            </form>
          </div>
        </div>