@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{ __('messages.getinvolved') }}" bgImage="assets/images/backgrounds/page-header-bg.png"
        homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    <x-flash />

    <!--Donation Details Start (reuse donation-details UI) -->
    <section class="donation-details">
        <div class="container">
            <div class="donation-details__inner">
                <div class="donation-details__personal-info">
                    <h3 class="donation-details__personal-info-title">{{ __('messages.getinvolved') }}</h3>
                    <p class="donation-details__input-box-title mb-3">{{ __('messages.getinvolved_intro') }}</p>

                    <form class="donation-details__form" action="{{ route('get-involved.store') }}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-xl-12 col-lg-12">
                                <div class="donation-details__input-box">
                                    <p class="donation-details__input-box-title">{{ __('messages.yourname') }}*</p>
                                    <input type="text" name="name" placeholder="{{ __('messages.yourname') }}..." required value="{{ old('name') }}">
                                    @error('name')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-xl-12 col-lg-12">
                                <div class="donation-details__input-box">
                                    <p class="donation-details__input-box-title">{{ __('messages.emailaddress') }}*</p>
                                    <input type="email" name="email" placeholder="{{ __('messages.emailaddress') }}..." required value="{{ old('email') }}">
                                    @error('email')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-xl-12 col-lg-12">
                                <div class="donation-details__input-box">
                                    <p class="donation-details__input-box-title">{{ __('messages.message') }}*</p>
                                    <textarea name="message" placeholder="{{ __('messages.message') }}..." rows="5" required>{{ old('message') }}</textarea>
                                    @error('message')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-xl-12 col-lg-12">
                                <div class="donation-details__payment-method-box">
                                    <h3 class="donation-details__payment-method-title">{{ __('messages.purpose_select') }}</h3>
                                    <div class="donation-details__quote-radio">
                                        @foreach(\App\Models\GetInvolvedRequest::purposeOptions() as $value => $label)
                                            <label class="custom-radio">
                                                <input type="radio" name="purpose" value="{{ $value }}" {{ old('purpose', 'volunteer') === $value ? 'checked' : '' }}>
                                                <span class="radio-dot"></span>
                                                <span class="radio-text">{{ __("messages.purpose_{$value}") }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('purpose')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div class="donation-details__btn-box">
                                    <button type="submit" class="thm-btn donation-details__btn">{{ __('messages.submit') }}<span><i class="icon-arrow-right"></i></span></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--Donation Details End -->
@endsection