@extends('layouts.app')

@section('body_class', 'page-donate')

@php
    $freq = old('frequency', $frequency);
    $pickedNow = old('items') ? array_filter(array_map('intval', old('items')), fn ($q) => $q > 0) : $picked;
    $popular = $cause ? $cause->popular : (in_array(config('parhit.campaign_popular'), $presets, true) ? config('parhit.campaign_popular') : null);
    $default = $popular ?: ($presets[1] ?? $presets[0]);
    $cur = old('other') ?: (old('amount') ?: ($pickedNow ? 0 : ($amount ?: $default)));
    $showAmount = ! $cause || $cause->acceptsAmount();
    $showItems = $cause && $cause->acceptsItems() && $cause->items->isNotEmpty();
    $taxOpen = $errors->hasAny(['pan', 'address', 'city', 'state', 'pincode']) || old('pan') || old('address');
    $personalOpen = $errors->hasAny(['dedication_type', 'dedication_name', 'message']) || old('dedication_name') || old('message');
    $slugNow = $cause?->slug;
@endphp

@section('content')
{{-- HERO --}}
<section class="ihero dhero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <svg class="ihero__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-heart"/></svg>
    <div class="container dhero__in">
        <div class="dhero__copy">
            <p class="kicker kicker--light">Donate securely</p>
            <h1>Make a <span class="hl">donation</span></h1>
            <p class="ihero__lead">Every gift, big or small, helps someone today. Pay securely by UPI, card or net banking.</p>
        </div>
        <ul class="dhero__pts" aria-label="Why give with us">
            <li><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>Secure payment</li>
            <li><svg class="i" aria-hidden="true"><use href="#i-download"/></svg>Instant receipt</li>
            @if ($site('reg_80g'))<li><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>80G tax benefit</li>@endif
            <li><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Cancel monthly anytime</li>
        </ul>
    </div>
</section>

<section class="section section--tight dsection">
    <div class="container donate-wrap donate-grid">
        <div class="donate-main">

        @if (! $available)
            <div class="callout callout--left">
                <h2>Online payments are not available right now</h2>
                <p>Please contact us and we will be happy to help you donate.</p>
                <div class="callout__btns">
                    @if ($site('whatsapp'))
                        <a class="btn btn--green" href="https://wa.me/{{ \App\Support\Fmt::digits($site('whatsapp')) }}" target="_blank" rel="noopener"><svg class="i" aria-hidden="true"><use href="#i-whatsapp"/></svg>Chat on WhatsApp</a>
                    @endif
                    <a class="btn btn--ghost" href="{{ route('contact') }}">Contact us</a>
                </div>
            </div>
        @else
            @if ($testMode)
                <div class="alert alert--warn" role="note"><svg class="i" aria-hidden="true"><use href="#i-info"/></svg><p><strong>Test mode.</strong> No real money is charged on this site right now.</p></div>
            @endif

            @if ($errors->has('payment'))
                <div class="alert alert--err" role="alert" tabindex="-1" id="flash"><svg class="i" aria-hidden="true"><use href="#i-info"/></svg><p>{{ $errors->first('payment') }}</p></div>
            @elseif ($errors->any())
                <div class="alert alert--err" role="alert" tabindex="-1" id="flash"><svg class="i" aria-hidden="true"><use href="#i-info"/></svg><p>{{ $errors->first('amount') ?: ($errors->first('frequency') ?: 'Please fix the highlighted fields and try again.') }}</p></div>
            @endif

            {{-- Choose where the gift goes (reloads the page with that campaign) --}}
            <form class="dpick" action="{{ route('donate') }}" method="get" data-autosubmit>
                <label class="field__label" for="d-cause">Where should your gift go?</label>
                <div class="dpick__row">
                    <select class="input" id="d-cause" name="cause">
                        <option value="">Where it is needed most</option>
                        @foreach ($campaigns->groupBy(fn ($c) => $c->category->name) as $group => $list)
                            <optgroup label="{{ $group }}">
                                @foreach ($list as $c)
                                    <option value="{{ $c->slug }}" @selected($slugNow === $c->slug)>{{ $c->title }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                    <noscript><button class="btn btn--blue btn--sm" type="submit">Update</button></noscript>
                </div>
            </form>

            <form class="donate" id="donate-form" action="{{ route('donate.store') }}" method="post" novalidate
                  data-gift data-min="{{ $min }}" data-pan-from="{{ $panFrom }}">
                @csrf
                <div class="hp" aria-hidden="true"><label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
                @if ($cause)<input type="hidden" name="cause" value="{{ $cause->slug }}">@endif

                {{-- ===== 1. The gift ===== --}}
                <fieldset class="dcard">
                    <legend class="dcard__title"><span class="dcard__n" aria-hidden="true">1</span>Your gift</legend>

                    @if ($cause)
                        <p class="dcause"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg><span>Giving to <a href="{{ route('causes.show', $cause) }}">{{ $cause->title }}</a></span></p>
                    @endif

                    <div class="seg" role="radiogroup" aria-label="Donation type" id="d-freq">
                        <label class="seg__opt"><input type="radio" name="frequency" value="once" @checked($freq === 'once')><span>One-time</span></label>
                        <label class="seg__opt"><input type="radio" name="frequency" value="monthly" @checked($freq === 'monthly')><span>Monthly</span></label>
                    </div>
                    <p class="field__hint" id="d-freq-note" hidden>Items can only be given as a one-time donation.</p>

                    @if ($showAmount)
                        @include('gift.amount', ['presets' => $presets, 'popular' => $popular, 'min' => $min, 'current' => $cur, 'allowCustom' => $cause ? $cause->allow_custom : true])
                    @endif

                    @if ($showItems)
                        <h3 class="dcard__sub">@if ($showAmount) Or choose items @else Choose items @endif</h3>
                        @include('gift.items', ['items' => $cause->items, 'picked' => $pickedNow])
                    @endif

                    @error('amount')<p class="field__err">{{ $message }}</p>@enderror
                    @error('frequency')<p class="field__err">{{ $message }}</p>@enderror

                    <div class="gift-lines" data-gift-lines hidden>
                        <p class="field__label">Your items</p>
                        <ul></ul>
                    </div>
                    <p class="dtotal" aria-live="polite">Your gift: <strong data-gift-total>{{ \App\Support\Fmt::rupees($cur) }}</strong> <span data-d-freq></span></p>
                </fieldset>

                {{-- ===== 2. Details ===== --}}
                <fieldset class="dcard">
                    <legend class="dcard__title"><span class="dcard__n" aria-hidden="true">2</span>Your details</legend>

                    <x-field name="name" label="Full name" required autocomplete="name" maxlength="100" />
                    <div class="form__row">
                        <x-field name="email" label="Email" type="email" required autocomplete="email" inputmode="email" hint="Your receipt is sent here." />
                        <x-field name="phone" label="Mobile number" type="tel" required autocomplete="tel" inputmode="tel" />
                    </div>

                    <details class="dmore" id="d-tax" @if ($taxOpen) open @endif>
                        <summary>Need a tax receipt? Add PAN and address <svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg></summary>
                        <div class="dmore__body">
                            <p class="muted" id="d-pan-note">PAN is optional, but needed for donations of {{ \App\Support\Fmt::rupees($panFrom) }} or more.</p>
                            <x-field name="pan" label="PAN" autocomplete="off" maxlength="10" hint="For example ABCDE1234F." />
                            <x-field name="address" label="Address" type="textarea" :rows="2" autocomplete="street-address" maxlength="300" />
                            <div class="form__row">
                                <x-field name="city" label="City" autocomplete="address-level2" maxlength="100" />
                                <x-field name="state" label="State" autocomplete="address-level1" maxlength="100" />
                            </div>
                            <x-field name="pincode" label="PIN code" autocomplete="postal-code" inputmode="numeric" maxlength="6" />
                        </div>
                    </details>

                    <details class="dmore" @if ($personalOpen) open @endif>
                        <summary>Make it personal: dedicate your gift <svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg></summary>
                        <div class="dmore__body">
                            <div class="form__row">
                                <div class="field">
                                    <label class="field__label" for="d-ded">Dedication <span class="opt">(optional)</span></label>
                                    <select class="input" id="d-ded" name="dedication_type">
                                        <option value="">None</option>
                                        @foreach ($dedications as $k => $label)
                                            <option value="{{ $k }}" @selected(old('dedication_type') === $k)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <x-field name="dedication_name" label="Their name" maxlength="100" />
                            </div>
                            <x-field name="message" label="A short message" type="textarea" :rows="2" maxlength="500" />
                            <label class="check check--plain"><input type="checkbox" name="anonymous" value="1" @checked(old('anonymous'))><span>Keep my name private (donate anonymously)</span></label>
                        </div>
                    </details>
                </fieldset>

                {{-- ===== 3. Confirm ===== --}}
                <div class="dconfirm">
                    <label class="check check--plain"><input type="checkbox" name="whatsapp_optin" value="1" @checked(old('whatsapp_optin', true))><span>Send me updates on WhatsApp</span></label>
                    <div class="field @error('consent') has-error @enderror">
                        <label class="check check--plain"><input type="checkbox" name="consent" value="1" @checked(old('consent')) @error('consent') aria-invalid="true" @enderror><span>I agree to the <a href="{{ route('terms') }}" target="_blank" rel="noopener">Terms</a> and <a href="{{ route('privacy') }}" target="_blank" rel="noopener">Privacy Policy</a>.</span></label>
                        @error('consent')<p class="field__err">{{ $message }}</p>@enderror
                    </div>

                    <button class="btn btn--green btn--lg btn--block" type="submit" id="d-submit"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg><span data-d-label>Continue to payment</span></button>
                    <p class="qd__note"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>Secure payment by UPI, cards &amp; net banking</p>
                </div>
            </form>
        @endif
        </div>

        <aside class="dside" aria-label="About your gift">
            @if ($cause)
                <a class="dside__cause" href="{{ route('causes.show', $cause) }}">
                    @if ($cause->thumb_url)
                        <img src="{{ $cause->thumb_url }}" alt="" width="640" height="400" loading="lazy">
                    @else
                        <span class="dside__ph" aria-hidden="true"><svg class="i i--xl"><use href="#i-{{ $cause->category->icon ?? 'heart' }}"/></svg></span>
                    @endif
                    <span class="dside__cause-body">
                        <small>You are giving to</small>
                        <strong>{{ $cause->title }}</strong>
                        <span>{{ $cause->summary }}</span>
                    </span>
                </a>
            @endif

            <div class="dside__card">
                <h2>Your gift, <span class="hl">protected</span></h2>
                <ul class="dside__list">
                    <li><span class="dside__ico"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg></span><div><strong>Secure payments</strong><p>Handled by a trusted gateway. We never see or store your card details.</p></div></li>
                    <li><span class="dside__ico"><svg class="i" aria-hidden="true"><use href="#i-download"/></svg></span><div><strong>Instant receipt</strong><p>Sent to your email as soon as your payment succeeds.</p></div></li>
                    <li><span class="dside__ico"><svg class="i" aria-hidden="true"><use href="#i-eye"/></svg></span><div><strong>Open reporting</strong><p>Our reports are published for anyone to read.</p></div></li>
                </ul>
            </div>

            <div class="dside__help">
                <span class="dside__help-ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-mail"/></svg></span>
                <div>
                    <strong>Need help donating?</strong>
                    <p>Write to us and we will help.</p>
                </div>
                <a class="btn btn--ghost btn--sm" href="{{ route('contact') }}">Contact</a>
            </div>
        </aside>
    </div>
</section>
@endsection