@extends('donations.layout')

@section('title', 'Make a Donation')

@section('content')
    <div class="intro">
        <span class="eyebrow">Support our work</span>
        <h1>Make a Donation</h1>
        <p>Your contribution helps women and girls access education, leadership, and new opportunities.</p>
        <p><strong>All donations are charged in Nigerian naira (NGN).</strong></p>
    </div>

    <form class="card" method="POST" action="{{ route('donations.checkout') }}" id="donationForm">
        @csrf
        <input type="hidden" name="request_key" value="{{ old('request_key', $requestKey) }}">

        @if ($errors->has('payment'))
            <div class="alert alert-error" role="alert">{{ $errors->first('payment') }}</div>
        @endif

        <div class="field full">
            <label>Choose an amount (NGN)</label>
            <div class="amount-options" role="group" aria-label="Suggested donation amounts">
                @foreach ([2500, 5000, 10000, 25000] as $preset)
                    <button class="amount-option" type="button" data-amount="{{ $preset }}" aria-pressed="{{ old('amount') == $preset ? 'true' : 'false' }}">₦{{ number_format($preset) }}</button>
                @endforeach
            </div>
        </div>

        <div class="grid">
            <div class="field">
                <label for="amount">Donation amount (₦) <span class="required">*</span></label>
                <input id="amount" name="amount" type="number" inputmode="decimal" min="500" max="5000000" step="0.01" value="{{ old('amount') }}" placeholder="Enter an amount" required aria-describedby="amount-hint @error('amount') amount-error @enderror" @error('amount') aria-invalid="true" @enderror>
                <span class="currency-note" id="amount-hint">Custom donations must be between ₦500 and ₦5,000,000.</span>
                @error('amount')<span class="error" id="amount-error">{{ $message }}</span>@enderror
            </div>
            <div class="field">
                <label for="donor_name">Full name <span class="required">*</span></label>
                <input id="donor_name" name="donor_name" type="text" autocomplete="name" maxlength="255" value="{{ old('donor_name') }}" required @error('donor_name') aria-invalid="true" @enderror>
                @error('donor_name')<span class="error">{{ $message }}</span>@enderror
            </div>
            <div class="field">
                <label for="donor_email">Email address <span class="required">*</span></label>
                <input id="donor_email" name="donor_email" type="email" autocomplete="email" maxlength="255" value="{{ old('donor_email') }}" required @error('donor_email') aria-invalid="true" @enderror>
                @error('donor_email')<span class="error">{{ $message }}</span>@enderror
            </div>
            <div class="field">
                <label for="donor_phone">Phone number <span>(optional)</span></label>
                <input id="donor_phone" name="donor_phone" type="tel" autocomplete="tel" maxlength="30" value="{{ old('donor_phone') }}" @error('donor_phone') aria-invalid="true" @enderror>
                @error('donor_phone')<span class="error">{{ $message }}</span>@enderror
            </div>
            <div class="field full">
                <label for="message">Donation message <span>(optional)</span></label>
                <textarea id="message" name="message" maxlength="1000" placeholder="Add a note for our team">{{ old('message') }}</textarea>
                @error('message')<span class="error">{{ $message }}</span>@enderror
            </div>
        </div>

        <p class="privacy">Pay securely with card, bank, USSD, QR, mobile money, or bank transfer where available. Paystack will show the methods enabled for your account. DFHA does not collect or store card details.</p>
        <button class="button full-width" type="submit" id="donationSubmit">Continue to secure payment</button>
    </form>

    <script>
        (function () {
            var form = document.getElementById('donationForm');
            var amount = document.getElementById('amount');
            var presets = document.querySelectorAll('.amount-option');
            var submit = document.getElementById('donationSubmit');

            presets.forEach(function (button) {
                button.addEventListener('click', function () {
                    amount.value = button.dataset.amount;
                    presets.forEach(function (option) {
                        option.setAttribute('aria-pressed', option === button ? 'true' : 'false');
                    });
                });
            });

            amount.addEventListener('input', function () {
                presets.forEach(function (button) {
                    button.setAttribute('aria-pressed', Number(button.dataset.amount) === Number(amount.value) ? 'true' : 'false');
                });
            });

            form.addEventListener('submit', function () {
                submit.disabled = true;
                submit.textContent = 'Preparing secure checkout…';
            });
        })();
    </script>
@endsection