ladill-give/resources/views/give/giving-pages/show.blade.php

<x-user-layout>
    <x-slot name="title">{{ $qrCode->label }}</x-slot>
    @php $c = $qrCode->content(); @endphp
    <div class="mx-auto max-w-6xl space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="min-w-0 flex-1">
                <a href="{{ route('give.giving-pages.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All giving pages</a>
                <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
                <p class="mt-1 text-sm text-slate-500">{{ $c['name'] ?? '' }}@if(!empty($c['denomination'])) · {{ $c['denomination'] }}@endif</p>
            </div>
            @include('give.giving-pages.partials.header-actions', ['qrCode' => $qrCode])
        </div>

        @if(session('success'))
            <div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif

        <div class="grid gap-6 lg:grid-cols-[380px_1fr]">
            <div class="lg:sticky lg:top-6 lg:self-start">
                @include('give.giving-pages.partials.preview-card', [
                    'qrCode' => $qrCode,
                    'previewDataUri' => $previewDataUri,
                    'showDownloads' => false,
                ])
                <p class="mt-4 break-all text-center text-sm text-indigo-600">{{ $qrCode->publicUrl() }}</p>
            </div>

            <div class="space-y-4">
                <form method="post" action="{{ route('give.giving-pages.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
                    @csrf
                    @method('PATCH')
                    <h2 class="font-semibold text-slate-900">Settings</h2>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Dashboard label</label>
                        <input type="text" name="label" value="{{ old('label', $qrCode->label) }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Organisation name</label>
                        <input type="text" name="name" value="{{ old('name', $c['name'] ?? '') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Description / denomination</label>
                        <input type="text" name="denomination" value="{{ old('denomination', $c['denomination'] ?? '') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
                    </div>
                    <textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm">{{ old('description', $c['description'] ?? '') }}</textarea>
                    <div class="grid gap-3 sm:grid-cols-2">
                        <input type="text" name="phone" value="{{ old('phone', $c['phone'] ?? '') }}" placeholder="Phone" class="rounded-xl border-slate-200 text-sm">
                        <input type="email" name="email" value="{{ old('email', $c['email'] ?? '') }}" placeholder="Email" class="rounded-xl border-slate-200 text-sm">
                    </div>
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="accepts_payment" value="1" @checked(old('accepts_payment', $c['accepts_payment'] ?? false)) class="rounded border-slate-300 text-indigo-600">
                        Accept online giving
                    </label>
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="is_active" value="1" @checked($qrCode->is_active) class="rounded border-slate-300 text-indigo-600">
                        Page is active
                    </label>
                    <div class="grid gap-3 sm:grid-cols-2">
                        <div>
                            <label class="block text-xs text-slate-500">Replace logo</label>
                            <input type="file" name="church_logo" accept="image/*" class="mt-1 block w-full text-xs">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500">Replace cover</label>
                            <input type="file" name="church_cover" accept="image/*" class="mt-1 block w-full text-xs">
                        </div>
                    </div>
                    @foreach($c['collection_types'] ?? ['Offering','Tithe','Donation'] as $i => $type)
                        <input type="hidden" name="collection_types[]" value="{{ $type }}">
                    @endforeach
                    <button type="submit" class="btn-primary">Save changes</button>
                </form>

                <div class="rounded-2xl border border-red-100 bg-red-50/40 p-6">
                    <h2 class="font-semibold text-red-700">Danger zone</h2>
                    <p class="mt-1 text-sm text-slate-500">Remove this giving page and deactivate its QR.</p>
                    <button type="button" @click="$dispatch('open-modal', 'delete-giving-page')"
                            class="mt-4 rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 hover:bg-red-50">
                        Delete giving page
                    </button>
                </div>
                @include('give.giving-pages.partials.delete-modal', ['qrCode' => $qrCode])
            </div>
        </div>
    </div>
</x-user-layout>