@extends('layouts.app') @section('title',$campaign->title) @section('content')<section class="campaign"><div><div class="campaign-cover" style="background-image:url('{{ $campaign->cover_image ? asset('storage/'.$campaign->cover_image) : asset('css/placeholder.svg') }}')"></div><span class="tag">{{$campaign->category ?: 'Community'}}</span><h1>{{$campaign->title}}</h1><p class="muted">Organised by {{$campaign->owner->name}} · {{$campaign->country ?: 'Community fundraiser'}}</p><div class="prose">{!! nl2br(e($campaign->story)) !!}</div><div class="campaign-actions">@auth<form method="post" action="{{route('campaigns.save',$campaign)}}">@csrf<button class="btn ghost">Save campaign</button></form><button class="btn ghost" onclick="document.getElementById('report').showModal()">Report</button>@endauth</div><div class="updates"><h2>Updates</h2>@forelse($campaign->updates as $u)<article><h3>{{$u->title}}</h3><p>{!! nl2br(e($u->body)) !!}</p><small>{{$u->created_at->format('M j, Y')}}</small></article>@empty<p class="muted">No updates yet.</p>@endforelse</div><div class="comments"><h2>Supporters</h2>@auth@if($campaign->comments_enabled)<form method="post" action="{{route('comments.store',$campaign)}}">@csrf<textarea name="body" placeholder="Leave an encouraging message" required></textarea><button class="btn">Post message</button></form>@endif@endauth @foreach($campaign->comments as $c)<div class="comment"><b>{{$c->name ?: 'Supporter'}}</b><p>{{e($c->body)}}</p></div>@endforeach</div></div><aside class="donate-box"><div class="meta"><b>{{$campaign->currency}} {{number_format($campaign->raised,2)}}</b><span>of {{$campaign->currency}} {{number_format($campaign->goal,2)}}</span></div><div class="meter"><i style="width:{{$campaign->progress}}%"></i></div><p><strong>{{$campaign->progress}}%</strong> funded · {{$campaign->donor_count}} donors</p><form method="post" action="{{route('donations.store',$campaign)}}">@csrf<input type="hidden" name="idempotency_key" value="{{\Illuminate\Support\Str::uuid()}}"><input name="amount" type="number" min="1" step="0.01" placeholder="Amount" required><input type="hidden" name="currency" value="{{$campaign->currency}}"><div class="muted">Donation currency: <strong>{{$campaign->currency}}</strong></div><input name="donor_name" placeholder="Your name"><input name="donor_email" type="email" placeholder="Email"><input name="donor_phone" placeholder="Phone / M-Pesa number"><select name="provider"><option value="mpesa">M-Pesa</option><option value="stripe">Card / Stripe</option><option value="paypal">PayPal</option>@if(in_array($campaign->currency, config('services.square.currencies', []), true))<option value="square">Square (Card)</option>@endif</select><div id="square-card-container" style="display:none"><div id="square-card"></div><input type="hidden" name="square_source_id" id="square-source-id"></div><textarea name="message" placeholder="Leave a message (optional)"></textarea><label><input type="checkbox" name="anonymous" value="1"> Give anonymously</label><button class="btn full">Donate securely</button></form></aside></section>@if(config('services.square.application_id') && in_array($campaign->currency, config('services.square.currencies', []), true))<script src="{{ config('services.square.environment','sandbox') === 'production' ? 'https://web.squarecdn.com/v1/square.js' : 'https://sandbox.web.squarecdn.com/v1/square.js' }}"></script><script>document.addEventListener('DOMContentLoaded',async()=>{const form=document.querySelector('form[action="{{route('donations.store',$campaign)}}"]');if(!form)return;const provider=form.querySelector('[name=provider]'),box=document.getElementById('square-card-container'),hidden=document.getElementById('square-source-id');let card=null;const toggle=async()=>{const on=provider.value==='square';box.style.display=on?'block':'none';if(on&&!card){try{const payments=Square.payments(@json(config('services.square.application_id')),@json(config('services.square.location_id')));card=await payments.card();await card.attach('#square-card');}catch(e){box.insertAdjacentHTML('beforeend','<p class="muted">Square card form could not be loaded. Please try another payment method.</p>');}}};provider.addEventListener('change',toggle);await toggle();form.addEventListener('submit',async e=>{if(provider.value!=='square'||hidden.value)return;if(!card){e.preventDefault();return;}e.preventDefault();const result=await card.tokenize();if(result.status==='OK'){hidden.value=result.token;form.submit();}else{alert(result.errors?.map(x=>x.message).join(' ')||'Please check your card details.');}});});</script>@endif<dialog id="report"><form method="post" action="{{route('campaigns.report',$campaign)}}">@csrf<h2>Report fundraiser</h2><select name="reason" required><option value="Suspicious or fraudulent">Suspicious or fraudulent</option><option value="Misleading information">Misleading information</option><option value="Other">Other</option></select><textarea name="details" placeholder="Tell our review team what you noticed"></textarea><button class="btn">Submit report</button></form></dialog>@endsection