@extends('layouts.app')

@php
    $items = $cause->acceptsItems() ? $cause->items : collect();
    $presets = $cause->presets;
    $popular = $cause->popular;
    $default = $cause->acceptsAmount() ? ($popular ?: ($presets[1] ?? $presets[0])) : 0;
    $pct = $cause->progress;
    $hasVideo = (bool) $cause->video_id;
@endphp

@section('body_class', 'has-gift-bar page-campaign')

@section('content')
{{-- ===== HERO: title, category, raised / goal / donors, progress ===== --}}
<section class="chero chero--{{ $cause->category->icon }} camp-hero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <div class="container">
        <div class="chero__grid">
            <div class="chero__main">
                <a class="sshow__back" href="{{ route('causes') }}"><svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg>All campaigns</a>
                <div class="chero__row">
                    <span class="chero__icon" aria-hidden="true"><svg class="i i--xl"><use href="#i-{{ $cause->category->icon }}"/></svg></span>
                    <div class="chero__copy">
                        <p class="kicker kicker--light">{{ $cause->category->name }}</p>
                        <h1>{{ $cause->title }}</h1>
                        <p class="chero__lead">{{ $cause->summary }}</p>
                        @if ($cause->organiser)
                            <p class="chero__intro"><svg class="i" aria-hidden="true"><use href="#i-user"/></svg> By {{ $cause->organiser }}</p>
                        @endif
                    </div>
                </div>

                <ul class="chero__stats" aria-label="Campaign summary">
                    <li><strong>{{ \App\Support\Fmt::rupees($cause->raised) }}</strong><span>Raised{{ $pct !== null ? " ({$pct}%)" : '' }}</span></li>
                    @if ($pct !== null)
                        <li><strong>{{ \App\Support\Fmt::rupees($cause->goal) }}</strong><span>Goal</span></li>
                    @endif
                    @if ($cause->donors_count > 0)
                        <li><strong>{{ number_format($cause->donors_count) }}</strong><span>{{ \Illuminate\Support\Str::plural('Donor', $cause->donors_count) }}</span></li>
                    @endif
                    @if ($taxBenefit)
                        <li><strong>80G</strong><span>Tax benefit</span></li>
                    @endif
                </ul>

                @if ($pct !== null)
                    <div class="progress chero__progress" role="progressbar" aria-label="Funding progress" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"><span style="width: {{ max($pct, 2) }}%"></span></div>
                @endif
            </div>
        </div>
    </div>
</section>

<article class="campaign" data-gift data-min="{{ $cause->min_gift }}">
    <div class="container">

        <div class="camp-layout">

            {{-- ===== Banners ===== --}}
            <div class="camp-slider">
                @if ($slides)
                    @include('partials.slider', ['slides' => $slides, 'label' => $cause->title.' photos', 'ribbon' => $taxBenefit ? 'Tax benefit' : null])
                @else
                    <div class="slider slider--empty"><svg class="i i--xl" aria-hidden="true"><use href="#i-{{ $cause->category->icon }}"/></svg></div>
                @endif
            </div>

            {{-- ===== Donate panel (sticky on desktop) ===== --}}
            <aside class="camp-aside" id="gift" aria-label="Donate to this campaign">
                <form class="giftbox card" id="gift-form" action="{{ route('donate') }}" method="get">
                    <input type="hidden" name="cause" value="{{ $cause->slug }}">

                    @if ($taxBenefit || $cause->is_verified)
                        <ul class="badges">
                            @if ($taxBenefit)<li class="badge-pill badge-pill--green">Tax Benefit</li>@endif
                            @if ($cause->is_verified)<li class="badge-pill badge-pill--blue">Verified</li>@endif
                        </ul>
                    @endif

                    @include('partials.share', ['url' => route('causes.show', $cause), 'text' => $cause->title])

                    @if ($cause->acceptsAmount())
                        @include('gift.amount', ['presets' => $presets, 'popular' => $popular, 'min' => $cause->min_gift, 'current' => $default, 'allowCustom' => $cause->allow_custom])
                    @endif

                    @if ($items->isNotEmpty())
                        <div class="gift-lines" data-gift-lines hidden>
                            <p class="field__label">Your items</p>
                            <ul></ul>
                        </div>
                        <p class="gift-hint">
                            @if ($cause->acceptsAmount()) Or give specific items: @else Choose what to give: @endif
                            <a href="#give">see &ldquo;Where your money goes&rdquo;</a>
                        </p>
                    @endif

                    <p class="gift-total">Your gift <strong data-gift-total>{{ \App\Support\Fmt::rupees($default) }}</strong></p>

                    <button class="btn btn--green btn--lg btn--block" type="submit" data-gift-submit>
                        <svg class="i" aria-hidden="true"><use href="#i-heart"/></svg><span data-gift-label>Donate now</span>
                    </button>
                    <p class="qd__note"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>100% secure payment &middot; UPI, cards, net banking</p>
                </form>

                @if ($cause->acceptsAmount())
                    <p class="gift-monthly">Prefer to give every month? <a href="{{ route('donate', ['cause' => $cause->slug, 'frequency' => 'monthly']) }}">Set up a monthly donation</a></p>
                @endif
            </aside>

            {{-- ===== Sections ===== --}}
            <div class="camp-rest">
                <nav class="camp-tabs" aria-label="Campaign sections">
                    <ul>
                        @if ($items->isNotEmpty())<li><a href="#give" data-tab="give">Donations</a></li>@endif
                        <li><a href="#project" data-tab="project">Project</a></li>
                        @if ($cause->updates->isNotEmpty())<li><a href="#updates" data-tab="updates">Updates <b class="count count--soft">{{ $cause->updates->count() }}</b></a></li>@endif
                    </ul>
                </nav>

                @if ($items->isNotEmpty())
                    <section class="camp-sec" id="give" data-section="give" aria-labelledby="give-h">
                        <h2 id="give-h">Where your money goes</h2>
                        <p class="muted">Pick the items you would like to fund and how many.</p>
                        @include('gift.items', ['items' => $items, 'picked' => [], 'form' => 'gift-form'])
                    </section>
                @endif

                <section class="camp-sec" id="project" data-section="project" aria-labelledby="project-h">
                    <h2 id="project-h">Project</h2>

                    @if ($hasVideo)
                        <div class="video" data-video="{{ $cause->video_id }}">
                            <button class="video__play" type="button" aria-label="Play video: {{ $cause->title }}">
                                <span class="video__icon" aria-hidden="true"><svg class="i i--xl"><use href="#i-arrow"/></svg></span>
                                <span class="video__text">Watch the video</span>
                                <small>Opens YouTube when you press play</small>
                            </button>
                        </div>
                    @endif

                    <div class="prose">{!! $cause->body !!}</div>
                </section>

                @if ($cause->updates->isNotEmpty())
                    <section class="camp-sec" id="updates" data-section="updates" aria-labelledby="updates-h">
                        <h2 id="updates-h">Updates</h2>
                        <ol class="updates">
                            @foreach ($cause->updates as $u)
                                <li class="update">
                                    <p class="update__date"><time datetime="{{ optional($u->published_at)->toDateString() }}">{{ optional($u->published_at)->format('j F Y') }}</time></p>
                                    <h3>{{ $u->title }}</h3>
                                    @if ($u->image_url)
                                        <img class="update__img" src="{{ $u->thumb_url }}" srcset="{{ $u->thumb_url }} 640w, {{ $u->image_url }} 1600w" sizes="(min-width: 960px) 600px, 100vw" alt="" width="1200" height="675" loading="lazy" decoding="async">
                                    @endif
                                    <div class="prose">{!! $u->body !!}</div>
                                </li>
                            @endforeach
                        </ol>
                    </section>
                @endif
            </div>
        </div>
    </div>

    {{-- Phones: always-visible total + Donate button (the sticky panel is used on desktop) --}}
    <div class="gift-bar" data-gift-bar>
        <p class="gift-bar__sum"><small>Your gift</small><strong data-gift-total>{{ \App\Support\Fmt::rupees($default) }}</strong></p>
        <button class="btn btn--green btn--lg" type="submit" form="gift-form" data-gift-bar-btn><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg><span data-gift-label>Donate now</span></button>
    </div>
</article>

@if ($related->isNotEmpty())
<section class="section section--tint">
    <div class="container">
        <header class="section__head"><h2>More campaigns</h2></header>
        <ul class="cards cards--gifts">
            @foreach ($related as $c)
                <li>@include('partials.cause-card', ['cause' => $c])</li>
            @endforeach
        </ul>
    </div>
</section>
@endif
@endsection