@extends('layouts.app')

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

@section('content')
@php
    $firstName = strtok($user->name, ' ') ?: $user->name;
    $paidDonations = $donations->where('status', 'paid');
    $activeMonthly = $subscriptions->filter(fn ($subscription): bool => $subscription->isActive());
    $firstGiftAt = optional($paidDonations->last())->paid_at;
    $lastGiftAt = optional($paidDonations->first())->paid_at;
    $donationsByYear = $donations->groupBy(fn ($donation): string => optional($donation->paid_at)->format('Y') ?? 'Earlier');
    $yearTotal = $givingByMonth->sum('amount');
    $monthPeak = max(1, $givingByMonth->max('amount'));
    $viewingAsAdmin = session()->has(\App\Http\Controllers\Admin\DonorsController::IMPERSONATOR_KEY);
@endphp

<section class="dhub">
    <div class="container">
        @if ($viewingAsAdmin)
            <div class="dimp" role="status">
                <span class="dimp__ico" aria-hidden="true"><svg class="i"><use href="#i-shield"/></svg></span>
                <p><strong>Admin view.</strong> You are seeing {{ $user->name }}&rsquo;s account exactly as they do.</p>
                <form action="{{ route('donor.impersonation.stop') }}" method="post">
                    @csrf
                    <button class="btn btn--blue btn--sm" type="submit"><svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg>Back to admin</button>
                </form>
            </div>
        @endif

        <header class="dhub__top">
            <div class="dhub__hello">
                <span class="dhub__av" aria-hidden="true">{{ mb_strtoupper(mb_substr($firstName, 0, 1)) }}</span>
                <div>
                    <h1>Hello, {{ $firstName }}</h1>
                    <p class="dhub__lead">@if ($firstGiftAt)Giving since {{ $firstGiftAt->format('F Y') }} &middot; @endif{{ $user->email }}</p>
                </div>
            </div>
            <div class="dhub__actions">
                <a class="btn btn--green btn--sm" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate again</a>
                @unless ($viewingAsAdmin)
                    <form action="{{ route('donor.logout') }}" method="post">
                        @csrf
                        <button class="btn btn--ghost btn--sm" type="submit"><svg class="i" aria-hidden="true"><use href="#i-logout"/></svg>Sign out</button>
                    </form>
                @endunless
            </div>
        </header>

        @include('partials.flash')
        @error('subscription')<div class="alert alert--err" role="alert"><svg class="i" aria-hidden="true"><use href="#i-info"/></svg><p>{{ $message }}</p></div>@enderror

        <ul class="dhub__stats" aria-label="Your giving at a glance">
            <li>
                <span class="dhub__stat-ico" aria-hidden="true"><svg class="i"><use href="#i-heart"/></svg></span>
                <span class="dhub__stat-txt"><small>Total given</small><strong>{{ \App\Support\Fmt::rupees($total) }}</strong></span>
            </li>
            <li>
                <span class="dhub__stat-ico" aria-hidden="true"><svg class="i"><use href="#i-gift"/></svg></span>
                <span class="dhub__stat-txt"><small>Donations</small><strong>{{ $paidDonations->count() }}</strong></span>
            </li>
            <li>
                <span class="dhub__stat-ico" aria-hidden="true"><svg class="i"><use href="#i-chart"/></svg></span>
                <span class="dhub__stat-txt"><small>Monthly gifts</small><strong>{{ $activeMonthly->count() }} active</strong></span>
            </li>
            <li>
                <span class="dhub__stat-ico" aria-hidden="true"><svg class="i"><use href="#i-check"/></svg></span>
                <span class="dhub__stat-txt"><small>Last gift</small><strong>{{ $lastGiftAt ? $lastGiftAt->format('j M Y') : '—' }}</strong></span>
            </li>
        </ul>

        <div class="dhub__grid">
            <div class="dhub__col">
                <section class="dpanel dchart" aria-labelledby="dchart-title">
                    <header class="dpanel__head">
                        <h2 id="dchart-title">Your giving</h2>
                        <span class="dpanel__meta">Last 12 months &middot; {{ \App\Support\Fmt::rupees($yearTotal) }}</span>
                    </header>
                    <ol class="dchart__bars">
                        @foreach ($givingByMonth as $month)
                            <li @class(['is-now' => $month['is_current']])>
                                <span class="dchart__col">
                                    <span @class(['dchart__bar', 'is-empty' => ! $month['amount']]) style="--h: {{ $month['amount'] ? max(6, (int) round($month['amount'] / $monthPeak * 100)) : 0 }}%">
                                        <b aria-hidden="true">{{ \App\Support\Fmt::rupees($month['amount']) }}</b>
                                    </span>
                                </span>
                                <span class="dchart__label" aria-hidden="true">{{ $month['label'] }}</span>
                                <span class="sr-only">{{ $month['title'] }}: {{ \App\Support\Fmt::rupees($month['amount']) }}</span>
                            </li>
                        @endforeach
                    </ol>
                </section>

                <section class="dpanel" aria-labelledby="dlist-title">
                    <header class="dpanel__head">
                        <h2 id="dlist-title">Your donations</h2>
                        @if ($donations->isNotEmpty())<span class="dhub__count">{{ $donations->count() }}</span>@endif
                    </header>

                    @if ($donations->isEmpty())
                        <div class="dhub-empty">
                            <span class="dhub-empty__ico" aria-hidden="true"><svg class="i i--lg"><use href="#i-heart"/></svg></span>
                            <h3>No donations yet</h3>
                            <p>When you give, every donation and its receipt will appear here.</p>
                            <a class="btn btn--green btn--sm" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Make your first donation</a>
                        </div>
                    @else
                        @foreach ($donationsByYear as $year => $yearDonations)
                            <h3 class="dlist__year">
                                <span>{{ $year }}</span>
                                <small>{{ \App\Support\Fmt::rupees($yearDonations->where('status', 'paid')->sum('amount')) }} given</small>
                            </h3>
                            <ul class="dlist">
                                @foreach ($yearDonations as $d)
                                    <li @class(['drow', 'drow--monthly' => $d->frequency === 'monthly', 'is-refunded' => $d->status === 'refunded'])>
                                        <span class="drow__ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $d->frequency === 'monthly' ? 'chart' : 'heart' }}"/></svg></span>
                                        <div class="drow__main">
                                            <strong>{{ $d->purpose }}</strong>
                                            <small>{{ optional($d->paid_at)->format('j M Y') }}@if ($d->receipt_no) &middot; {{ $d->receipt_no }}@endif</small>
                                        </div>
                                        <div class="drow__amt">
                                            <strong>{{ \App\Support\Fmt::rupees($d->amount) }}</strong>
                                            @if ($d->status === 'refunded')
                                                <span class="dpill dpill--red">Refunded</span>
                                            @elseif ($d->frequency === 'monthly')
                                                <span class="dpill dpill--blue">Monthly</span>
                                            @endif
                                        </div>
                                        <a class="drow__btn" href="{{ route('receipt', $d) }}" target="_blank" rel="noopener" title="Download receipt">
                                            <svg class="i" aria-hidden="true"><use href="#i-download"/></svg><span class="drow__btn-txt">Receipt</span><span class="sr-only"> {{ $d->receipt_no }} (opens in a new tab)</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endforeach
                    @endif
                </section>
            </div>

            <aside class="dhub__side" aria-label="Monthly giving, causes and help">
                <section class="dpanel" aria-labelledby="dmonthly-title">
                    <header class="dpanel__head"><h2 id="dmonthly-title">Monthly giving</h2></header>
                    @forelse ($subscriptions as $s)
                        <div @class(['dmonthly', 'is-active' => $s->isActive()])>
                            <div class="dmonthly__top">
                                <strong>{{ \App\Support\Fmt::rupees($s->amount) }}<small>/month</small></strong>
                                <span @class(['dpill', 'dpill--green' => $s->isActive(), 'dpill--grey' => ! $s->isActive()])>{{ $s->isActive() ? 'Active' : ucfirst($s->status) }}</span>
                            </div>
                            <p class="dmonthly__cause">{{ $s->cause?->title ?? 'Where it is needed most' }}</p>
                            <div class="dmonthly__foot">
                                <span>Since {{ $s->started_at->format('j M Y') }}</span>
                                @if ($s->isActive())
                                    <form action="{{ route('donor.subscription.cancel', $s->public_id) }}" method="post" data-confirm="Stop this monthly donation? You can start a new one any time.">
                                        @csrf
                                        <button class="dmonthly__stop" type="submit">Stop</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="dpanel__note">No monthly gift yet. A small amount each month helps us plan ahead.</p>
                        <a class="btn btn--ghost btn--sm" href="{{ route('donate') }}">Give monthly</a>
                    @endforelse
                </section>

                @if ($givingByCause->isNotEmpty())
                    <section class="dpanel" aria-labelledby="dcause-title">
                        <header class="dpanel__head"><h2 id="dcause-title">Causes you support</h2></header>
                        <ul class="dcause">
                            @foreach ($givingByCause as $cause)
                                <li>
                                    <div class="dcause__top">
                                        <span>{{ $cause['title'] }}</span>
                                        <strong>{{ \App\Support\Fmt::rupees($cause['amount']) }}</strong>
                                    </div>
                                    <span class="dcause__track" aria-hidden="true"><span style="width: {{ max(4, $cause['share']) }}%"></span></span>
                                    <small>{{ $cause['share'] }}% of your giving &middot; {{ $cause['count'] }} {{ $cause['count'] === 1 ? 'gift' : 'gifts' }}</small>
                                </li>
                            @endforeach
                        </ul>
                        <a class="dpanel__link" href="{{ route('impact') }}">See what your gifts make possible<svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                    </section>
                @endif

                <section class="dpanel dpanel--help">
                    <span class="dpanel__ico" aria-hidden="true"><svg class="i"><use href="#i-mail"/></svg></span>
                    <p><strong>Need help?</strong> Questions about a donation or receipt? <a href="{{ route('contact') }}">Contact us</a>.</p>
                </section>
            </aside>
        </div>
    </div>
</section>
@endsection