@extends('public.layout.app')
@section('title', __('front.donation'))

@section('body')
<section class="online-form-shell">
    <div class="container">
        <div class="online-form-top public-animated-block">
            <div>
                <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm mb-4">
                    <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
                </a>
                <span class="online-form-kicker"><i class="fa-solid fa-hand-holding-heart"></i> {{ __('front.donation') }}</span>
                <h1 class="online-form-title">{{ __('front.donation_form') }}</h1>
                <p class="online-form-subtitle">Support students, learning resources, scholarships, and public online education services.</p>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success-soft mb-3">
                {{ session('success') }}
            </div>
        @endif

        <div class="online-form-layout">
            <aside class="online-form-side">
                <span class="online-form-icon"><i class="fa-solid fa-seedling"></i></span>
                <h2>Support learning</h2>
                <p>Your donation helps Afghan learners access courses, resources, and educational opportunities.</p>
                <div class="online-form-step"><span>1</span><div><strong>Donor details</strong><small>Name, phone, and email.</small></div></div>
                <div class="online-form-step"><span>2</span><div><strong>Donation</strong><small>Amount, currency, type, method.</small></div></div>
                <div class="online-form-step"><span>3</span><div><strong>Receipt</strong><small>Optional receipt upload.</small></div></div>
                @include('public.partials.form-help-notice', [
                    'roleEn' => 'After submitting, your role is supporter/donor. The finance team reviews payment details and receipt information for confirmation.',
                    'rolePs' => 'له سپارلو وروسته ستاسو رول ملاتړی/مرسته کوونکی دی. د مالي چارو ټیم د تادیې معلومات او رسید د تایید لپاره ګوري.',
                    'roleFa' => 'پس از ارسال، نقش شما حامی/کمک‌کننده است. تیم مالی معلومات پرداخت و رسید را برای تأیید بررسی می‌کند.',
                ])
            </aside>

            <div class="online-form-card">
                <form method="POST" action="{{ route('front.donation.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.full_name') }}</label>
                            <input type="text" name="full_name" value="{{ old('full_name') }}" class="form-control @error('full_name') is-invalid @enderror" placeholder="{{ __('front.your_name') }}">
                            @error('full_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">{{ __('front.phone') }}</label>
                            <input type="text" name="phone" value="{{ old('phone') }}" class="form-control @error('phone') is-invalid @enderror" placeholder="+93...">
                            @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">{{ __('front.email_2') }}</label>
                            <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" placeholder="mail@example.com">
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.amount') }}</label>
                            <input type="number" step="0.01" name="amount" value="{{ old('amount') }}" class="form-control @error('amount') is-invalid @enderror" placeholder="0.00">
                            @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.currency') }}</label>
                            <select name="currency" class="form-select @error('currency') is-invalid @enderror">
                                @foreach($currencies as $c)
                                    <option value="{{ $c }}" @selected(old('currency','AFN')==$c)>{{ $c }}</option>
                                @endforeach
                            </select>
                            @error('currency') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.donation_type') }}</label>
                            <select name="donation_type" class="form-select @error('donation_type') is-invalid @enderror">
                                @foreach($types as $k=>$v)
                                    <option value="{{ $k }}" @selected(old('donation_type','general')==$k)>{{ $v }}</option>
                                @endforeach
                            </select>
                            @error('donation_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.payment_method') }}</label>
                            <select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror">
                                @foreach($methods as $k=>$v)
                                    <option value="{{ $k }}" @selected(old('payment_method','cash')==$k)>{{ $v }}</option>
                                @endforeach
                            </select>
                            @error('payment_method') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.reference_transaction_no_optional') }}</label>
                            <input type="text" name="reference_no" value="{{ old('reference_no') }}" class="form-control @error('reference_no') is-invalid @enderror" placeholder="{{ __('front.trx_receipt_no') }}">
                            @error('reference_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ __('front.message_optional') }}</label>
                            <textarea name="message" rows="3" class="form-control @error('message') is-invalid @enderror" placeholder="{{ __('front.your_note') }}">{{ old('message') }}</textarea>
                            @error('message') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ __('front.upload_receipt_optional') }}</label>
                            <input type="file" name="receipt" class="form-control @error('receipt') is-invalid @enderror">
                            <div class="online-form-note small mt-1">{{ __('front.jpg_png_pdf_max_2mb') }}</div>
                            @error('receipt') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12 mt-2">
                            <button class="btn btn-accent w-100 py-2" type="submit">
                                {{ __('front.submit_donation') }} <i class="fa-solid fa-paper-plane ms-2"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection