Initial Ladill Transfer app — file sharing with QR links.
Scaffolded from the Ladill mini/events extraction pattern: multi-file transfers, retention controls, public landing pages, analytics, and Gitea deploy workflow. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -0,0 +1,176 @@
|
||||
<x-user-layout>
|
||||
@php $isContribution = ($qrCode->content()['mode'] ?? 'ticketing') === 'contributions'; @endphp
|
||||
<x-slot name="title">{{ $isContribution ? 'Contributions' : 'Attendees' }} — {{ $qrCode->label }}</x-slot>
|
||||
|
||||
<div class="mx-auto max-w-5xl space-y-6"
|
||||
x-data="{
|
||||
selected: [],
|
||||
toggle(id) { const i = this.selected.indexOf(id); i === -1 ? this.selected.push(id) : this.selected.splice(i, 1); },
|
||||
get qs() { return this.selected.map(id => 'ids[]=' + id).join('&'); },
|
||||
printSelected() { window.open(@js(route('events.badges', $qrCode)) + '?auto=1&' + this.qs, '_blank'); },
|
||||
zplSelected() { window.location = @js(route('events.badges.zpl', $qrCode)) + '?' + this.qs; }
|
||||
}">
|
||||
|
||||
{{-- Flash --}}
|
||||
@foreach(['success', 'error'] as $flash)
|
||||
@if(session($flash))
|
||||
<div class="rounded-xl border px-4 py-3 text-sm {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
|
||||
{{ session($flash) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Header --}}
|
||||
<div>
|
||||
<a href="{{ route('events.show', $qrCode) }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
||||
{{ $qrCode->label }}
|
||||
</a>
|
||||
<h1 class="mt-1.5 text-2xl font-bold text-slate-900">{{ $isContribution ? 'Contributions' : 'Attendees' }}</h1>
|
||||
</div>
|
||||
|
||||
{{-- Share programme outline --}}
|
||||
@if($programme)
|
||||
<div class="flex flex-col gap-3 rounded-2xl border border-indigo-100 bg-indigo-50/60 p-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z"/></svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">Programme outline</p>
|
||||
<p class="text-xs text-slate-500">Email & text the <span class="font-medium text-slate-600">{{ $programme->label }}</span> programme link to all confirmed attendees.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('events.attendees.share-programme', $qrCode) }}"
|
||||
x-data="{ busy: false }"
|
||||
@submit="async ($event) => {
|
||||
if (busy) return;
|
||||
if (! await $store.ladillConfirm.ask({
|
||||
title: 'Send programme?',
|
||||
message: 'Send the programme outline to all confirmed attendees by email and SMS?',
|
||||
confirmLabel: 'Send',
|
||||
variant: 'primary',
|
||||
})) { $event.preventDefault(); return; }
|
||||
busy = true;
|
||||
}"
|
||||
class="shrink-0">
|
||||
@csrf
|
||||
<button type="submit" :disabled="busy"
|
||||
class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
|
||||
<span x-text="busy ? 'Sending…' : 'Share with attendees'">Share with attendees</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Stats --}}
|
||||
<div class="grid {{ $isContribution ? 'grid-cols-2' : 'grid-cols-3' }} gap-3">
|
||||
<div class="rounded-2xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($stats['total']) }}</p>
|
||||
<p class="text-xs text-slate-500">{{ $isContribution ? 'Contributions' : 'Registered' }}</p>
|
||||
</div>
|
||||
@unless($isContribution)
|
||||
<div class="rounded-2xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($stats['checked_in']) }}</p>
|
||||
<p class="text-xs text-slate-500">Checked in</p>
|
||||
</div>
|
||||
@endunless
|
||||
<div class="rounded-2xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-2xl font-bold text-slate-900">GHS {{ number_format($stats['revenue'], 2) }}</p>
|
||||
<p class="text-xs text-slate-500">{{ $isContribution ? 'Total raised' : 'Revenue' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Toolbar --}}
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<form method="GET" class="flex items-center gap-2">
|
||||
<input type="text" name="search" value="{{ request('search') }}" placeholder="Search name, email, code…"
|
||||
class="rounded-xl border border-slate-200 px-3.5 py-2 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
<select name="status" onchange="this.form.submit()" class="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-600 focus:border-indigo-400 focus:outline-none">
|
||||
<option value="">All</option>
|
||||
<option value="confirmed" @selected(request('status') === 'confirmed')>Confirmed</option>
|
||||
<option value="pending" @selected(request('status') === 'pending')>Pending</option>
|
||||
</select>
|
||||
</form>
|
||||
@unless($isContribution)
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span x-show="selected.length" x-cloak class="text-xs font-medium text-slate-500"><span x-text="selected.length"></span> selected</span>
|
||||
<button type="button" x-show="selected.length" x-cloak @click="printSelected()"
|
||||
class="rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-indigo-700 transition">Print selected</button>
|
||||
<button type="button" x-show="selected.length" x-cloak @click="zplSelected()"
|
||||
class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 transition">ZPL selected</button>
|
||||
<a href="{{ route('events.badges', $qrCode) }}?auto=1" target="_blank"
|
||||
class="rounded-xl bg-slate-900 px-3.5 py-2 text-xs font-semibold text-white hover:bg-slate-800 transition">Print all badges</a>
|
||||
<a href="{{ route('events.badges.zpl', $qrCode) }}"
|
||||
class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 transition">Download ZPL</a>
|
||||
</div>
|
||||
@endunless
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="border-b border-slate-100 bg-slate-50/70 text-left text-xs uppercase tracking-wide text-slate-400">
|
||||
<tr>
|
||||
@unless($isContribution)<th class="px-4 py-3 w-8"></th>@endunless
|
||||
<th class="px-4 py-3">{{ $isContribution ? 'Contributor' : 'Attendee' }}</th>
|
||||
<th class="px-4 py-3">{{ $isContribution ? 'Category' : 'Ticket' }}</th>
|
||||
@unless($isContribution)<th class="px-4 py-3">Badge</th>@endunless
|
||||
<th class="px-4 py-3">Status</th>
|
||||
@unless($isContribution)<th class="px-4 py-3 text-right">Check-in</th>@endunless
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
@forelse($registrations as $reg)
|
||||
<tr class="hover:bg-slate-50/60">
|
||||
@unless($isContribution)
|
||||
<td class="px-4 py-3">
|
||||
@if($reg->status === \App\Models\QrEventRegistration::STATUS_CONFIRMED)
|
||||
<input type="checkbox" :checked="selected.includes({{ $reg->id }})" @change="toggle({{ $reg->id }})"
|
||||
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
@endif
|
||||
</td>
|
||||
@endunless
|
||||
<td class="px-4 py-3">
|
||||
<p class="font-semibold text-slate-800">{{ $reg->attendee_name }}</p>
|
||||
<p class="text-xs text-slate-400">{{ $reg->attendee_email }}</p>
|
||||
@foreach(($reg->badge_fields ?? []) as $k => $v)
|
||||
<span class="mr-1 inline-block rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">{{ $k }}: {{ $v }}</span>
|
||||
@endforeach
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="font-medium text-slate-700">{{ $reg->tier_name }}</span>
|
||||
@if($reg->isPaid())<p class="text-xs text-slate-400">GHS {{ number_format($reg->amountCedis(), 2) }}</p>@endif
|
||||
</td>
|
||||
@unless($isContribution)
|
||||
<td class="px-4 py-3"><code class="rounded bg-slate-100 px-2 py-0.5 text-xs">{{ $reg->badge_code }}</code></td>
|
||||
@endunless
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ $reg->status === 'confirmed' ? 'bg-emerald-50 text-emerald-700' : ($reg->status === 'pending' ? 'bg-amber-50 text-amber-700' : 'bg-slate-100 text-slate-500') }}">
|
||||
{{ ucfirst($reg->status) }}
|
||||
</span>
|
||||
</td>
|
||||
@unless($isContribution)
|
||||
<td class="px-4 py-3 text-right">
|
||||
<form method="POST" action="{{ route('events.attendees.check-in', [$qrCode, $reg]) }}">
|
||||
@csrf @method('PATCH')
|
||||
<button type="submit" class="rounded-lg border px-2.5 py-1 text-xs font-semibold transition {{ $reg->checked_in_at ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 text-slate-500 hover:bg-slate-50' }}">
|
||||
{{ $reg->checked_in_at ? '✓ In' : 'Check in' }}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
@endunless
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="{{ $isContribution ? 3 : 6 }}" class="px-4 py-12 text-center text-sm text-slate-400">{{ $isContribution ? 'No contributions yet.' : 'No registrations yet.' }}</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if($registrations->hasPages())
|
||||
<div class="border-t border-slate-100 px-4 py-3">{{ $registrations->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
@@ -0,0 +1,85 @@
|
||||
@php
|
||||
$c = $qrCode->content();
|
||||
$evColor = $c['brand_color'] ?? '#4f46e5';
|
||||
$evName = $c['name'] ?? $qrCode->label;
|
||||
$hasLogo = !empty($c['logo_path']);
|
||||
$logoUrl = $hasLogo ? route('qr.public.event.logo', $qrCode->short_code) : null;
|
||||
$size = $c['badge_size'] ?? '4x3';
|
||||
// Physical badge dimensions (inches)
|
||||
[$bw, $bh] = match ($size) {
|
||||
'4x6' => ['4in', '6in'],
|
||||
'cr80' => ['3.375in', '2.125in'],
|
||||
default => ['4in', '3in'],
|
||||
};
|
||||
$stack = $size === '4x6'; // tall badge → stack vertically
|
||||
@endphp
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@include('partials.favicon')
|
||||
<title>Badges — {{ $evName }}</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #e5e7eb; color: #0f172a; }
|
||||
.toolbar { position: sticky; top: 0; display: flex; gap: 10px; justify-content: center; padding: 14px; background: #fff; border-bottom: 1px solid #e2e8f0; }
|
||||
.toolbar button { border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
|
||||
.btn-print { background: {{ $evColor }}; color: #fff; }
|
||||
.btn-close { background: #f1f5f9; color: #475569; }
|
||||
.sheet { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 24px; }
|
||||
.badge {
|
||||
width: {{ $bw }}; height: {{ $bh }};
|
||||
background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.badge-head { background: {{ $evColor }}; color: #fff; padding: 8px 10px; display: flex; align-items: center; gap: 7px; }
|
||||
.badge-head img { height: 22px; width: 22px; object-fit: contain; background: #fff; border-radius: 4px; padding: 1px; }
|
||||
.badge-head .ev { font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
|
||||
.badge-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; }
|
||||
.badge-name { font-size: 22px; font-weight: 900; line-height: 1.05; }
|
||||
.badge-tier { margin-top: 3px; font-size: 11px; font-weight: 700; color: {{ $evColor }}; text-transform: uppercase; letter-spacing: .05em; }
|
||||
.badge-fields { margin-top: 4px; font-size: 9.5px; color: #64748b; }
|
||||
.badge-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-top: 1px solid #e2e8f0; }
|
||||
.badge-foot code { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
|
||||
.badge-foot img { height: 44px; width: 44px; }
|
||||
@media print {
|
||||
.toolbar { display: none; }
|
||||
body { background: #fff; }
|
||||
.sheet { padding: 0; gap: 0; }
|
||||
.badge { border: none; border-radius: 0; page-break-after: always; break-after: page; }
|
||||
@page { size: {{ $bw }} {{ $bh }}; margin: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body @if($auto) onload="window.print()" @endif>
|
||||
<div class="toolbar">
|
||||
<button class="btn-print" onclick="window.print()">Print {{ count($registrations) }} badge{{ count($registrations) === 1 ? '' : 's' }}</button>
|
||||
<button class="btn-close" onclick="window.close()">Close</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet">
|
||||
@forelse($registrations as $reg)
|
||||
@php $badgeQr = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&margin=0&data=' . urlencode($reg->badge_code); @endphp
|
||||
<div class="badge">
|
||||
<div class="badge-head">
|
||||
@if($hasLogo)<img src="{{ $logoUrl }}" alt="">@endif
|
||||
<span class="ev">{{ $evName }}</span>
|
||||
</div>
|
||||
<div class="badge-body">
|
||||
<div class="badge-name">{{ $reg->attendee_name }}</div>
|
||||
<div class="badge-tier">{{ $reg->tier_name }}</div>
|
||||
@if(!empty($reg->badge_fields))
|
||||
<div class="badge-fields">{{ collect($reg->badge_fields)->map(fn($v,$k) => $v)->implode(' · ') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="badge-foot">
|
||||
<code>{{ $reg->badge_code }}</code>
|
||||
<img src="{{ $badgeQr }}" alt="{{ $reg->badge_code }}">
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p style="padding:40px;color:#64748b;">No confirmed attendees to print.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<x-user-layout>
|
||||
@php
|
||||
$createType = old('type', $requestedType ?? \App\Models\QrCode::TYPE_EVENT);
|
||||
$isProgramme = $createType === \App\Models\QrCode::TYPE_ITINERARY;
|
||||
$defaultStyle = \App\Support\Qr\QrStyleDefaults::merge(old('style') ?: ($accountDefaultStyle ?? null));
|
||||
@endphp
|
||||
<x-slot name="title">{{ $isProgramme ? 'New programme' : 'Create event' }}</x-slot>
|
||||
|
||||
<div class="mx-auto max-w-6xl space-y-6"
|
||||
x-data="qrCustomizer({
|
||||
previewUrl: @js(route('events.style-preview')),
|
||||
csrf: @js(csrf_token()),
|
||||
shortCode: 'preview',
|
||||
style: @js($defaultStyle),
|
||||
balance: @js((float) $wallet->spendableBalance()),
|
||||
price: @js((float) $pricePerQr),
|
||||
topupUrl: @js($topupUrl),
|
||||
type: @js($createType),
|
||||
wizard: @js(! $isProgramme),
|
||||
})">
|
||||
|
||||
@if(session('error'))
|
||||
<div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
|
||||
@endif
|
||||
|
||||
{{-- Mobile page header --}}
|
||||
<div class="flex items-center gap-3 py-1 lg:hidden">
|
||||
<a href="{{ $isProgramme ? route('programmes.index') : route('events.index') }}"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white shadow-sm text-slate-500 hover:text-slate-900 transition">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="text-sm font-semibold text-slate-900">{{ $isProgramme ? 'New programme' : 'Create event' }}</span>
|
||||
</div>
|
||||
|
||||
{{-- Desktop page header --}}
|
||||
<div class="hidden lg:block">
|
||||
<a href="{{ $isProgramme ? route('programmes.index') : route('events.index') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
||||
{{ $isProgramme ? 'Programmes' : 'Events' }}
|
||||
</a>
|
||||
<h1 class="mt-2 text-2xl font-bold text-slate-900">{{ $isProgramme ? 'New programme' : 'Create event' }}</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">
|
||||
{{ $isProgramme ? 'Build a schedule outline and share it with attendees.' : 'Set up your event, then design the QR attendees will scan.' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@unless($isProgramme)
|
||||
{{-- Event creation wizard steps --}}
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 sm:px-6">
|
||||
<ol class="flex items-center justify-between gap-2">
|
||||
@foreach(['Event details', 'QR code', 'Review & create'] as $i => $label)
|
||||
@php $n = $i + 1; @endphp
|
||||
<li class="flex min-w-0 flex-1 items-center gap-2">
|
||||
<span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold transition"
|
||||
:class="step >= {{ $n }} ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-400'">{{ $n }}</span>
|
||||
<span class="hidden truncate text-xs font-semibold sm:block"
|
||||
:class="step >= {{ $n }} ? 'text-slate-900' : 'text-slate-400'">{{ $label }}</span>
|
||||
@if($n < 3)
|
||||
<span class="mx-1 hidden h-px flex-1 bg-slate-200 sm:block"></span>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ol>
|
||||
</div>
|
||||
@endunless
|
||||
|
||||
<form x-ref="createForm" action="{{ route('events.store') }}" method="POST" enctype="multipart/form-data"
|
||||
class="grid grid-cols-1 gap-8"
|
||||
:class="(!wizard || step >= 2) ? 'lg:grid-cols-[380px_1fr]' : ''"
|
||||
@submit="wizard ? wizardSubmit($event) : submitOrTopup($event)">
|
||||
@csrf
|
||||
<input type="hidden" name="type" value="{{ $createType }}">
|
||||
|
||||
{{-- QR preview (step 2 for events, always for programmes) --}}
|
||||
<div class="lg:sticky lg:top-6 lg:self-start"
|
||||
x-show="!wizard || step === 2 || step === 3"
|
||||
x-cloak
|
||||
:class="(!wizard || step >= 2) ? 'block' : 'hidden'">
|
||||
<div class="hidden lg:block">
|
||||
@include('qr-codes.partials.qr-preview-card', ['showDownloads' => false])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 pb-4 lg:pb-0"
|
||||
:class="wizard && step >= 2 ? 'lg:col-start-2' : (wizard && step === 1 ? 'lg:col-span-full' : '')">
|
||||
|
||||
{{-- Step 1 / Programme: Event details --}}
|
||||
<div x-show="!wizard || step === 1" class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-5 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">{{ $isProgramme ? 'Programme details' : 'Event details' }}</h2>
|
||||
<p class="mt-0.5 text-xs text-slate-400">{{ $isProgramme ? 'Title, schedule, and venue for this outline.' : 'Name, dates, ticketing, and registration settings.' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 p-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-600">Label</label>
|
||||
<input type="text" name="label" value="{{ old('label') }}" required maxlength="120"
|
||||
class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"
|
||||
placeholder="{{ $isProgramme ? 'e.g. Annual conference programme' : 'e.g. Tech summit 2026' }}">
|
||||
</div>
|
||||
|
||||
<div x-data="{
|
||||
slug: @js(old('custom_short_code', '')),
|
||||
status: '',
|
||||
timer: null,
|
||||
checkUrl: @js(route('events.check-slug')),
|
||||
baseUrl: @js(\App\Models\QrCode::publicBaseUrl() . '/q'),
|
||||
check() {
|
||||
clearTimeout(this.timer);
|
||||
const s = this.slug.trim();
|
||||
if (s === '') { this.status = ''; return; }
|
||||
if (!/^[a-z0-9][a-z0-9-]{1,18}[a-z0-9]$/.test(s)) { this.status = 'invalid'; return; }
|
||||
this.status = 'checking';
|
||||
this.timer = setTimeout(() => {
|
||||
fetch(this.checkUrl + '?code=' + encodeURIComponent(s))
|
||||
.then(r => r.json())
|
||||
.then(d => { this.status = d.available ? 'available' : 'taken'; })
|
||||
.catch(() => { this.status = ''; });
|
||||
}, 400);
|
||||
},
|
||||
}">
|
||||
<label class="block text-xs font-semibold text-slate-600">Custom link <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<div class="mt-1.5 flex items-stretch rounded-xl border focus-within:border-indigo-400 focus-within:ring-1 focus-within:ring-indigo-400/30"
|
||||
:class="status === 'available' ? 'border-green-400' : status === 'taken' || status === 'invalid' ? 'border-red-400' : 'border-slate-200'">
|
||||
<span class="flex items-center rounded-l-xl border-r border-slate-200 bg-slate-50 px-3 text-xs text-slate-400 whitespace-nowrap select-none"
|
||||
:class="status === 'available' ? 'border-green-400' : status === 'taken' || status === 'invalid' ? 'border-red-400' : 'border-slate-200'">
|
||||
{{ \App\Models\QrCode::publicBaseUrl() }}/q/
|
||||
</span>
|
||||
<input type="text" name="custom_short_code"
|
||||
x-model="slug"
|
||||
@input="check()"
|
||||
maxlength="20"
|
||||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||||
class="min-w-0 flex-1 rounded-r-xl bg-white px-3 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none"
|
||||
placeholder="my-brand">
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center gap-1.5 text-[11px]">
|
||||
<template x-if="status === 'checking'"><span class="text-slate-400">Checking…</span></template>
|
||||
<template x-if="status === 'available'">
|
||||
<span class="flex items-center gap-1 text-green-600">
|
||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
|
||||
Available
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="status === 'taken'"><span class="text-red-500">Already taken</span></template>
|
||||
<template x-if="status === 'invalid'"><span class="text-red-500">Invalid format</span></template>
|
||||
<template x-if="status === ''"><span class="text-slate-400">Leave blank to auto-generate</span></template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
@include('qr-codes.partials.type-fields-create')
|
||||
</div>
|
||||
|
||||
@unless($isProgramme)
|
||||
<p class="rounded-xl bg-slate-50 px-3.5 py-2.5 text-xs leading-5 text-slate-400">
|
||||
You will design the QR code in the next step. Details can be updated anytime without reprinting.
|
||||
</p>
|
||||
@else
|
||||
<p class="rounded-xl bg-slate-50 px-3.5 py-2.5 text-xs leading-5 text-slate-400">
|
||||
Attendees scan your Ladill event link — update details anytime without reprinting the QR.
|
||||
</p>
|
||||
@endunless
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Step 2: QR customization (events) or inline (programmes) --}}
|
||||
<div x-show="!wizard || step === 2">
|
||||
@include('qr-codes.partials.customization-fields', [
|
||||
'style' => $defaultStyle,
|
||||
'moduleStyles' => $moduleStyles,
|
||||
'cornerOuterStyles' => $cornerOuterStyles,
|
||||
'cornerInnerStyles' => $cornerInnerStyles,
|
||||
'frameStyles' => $frameStyles,
|
||||
])
|
||||
</div>
|
||||
|
||||
{{-- Step 3: Review & create (events only) --}}
|
||||
<div x-show="wizard && step === 3" x-cloak class="space-y-5">
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-5 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">Review your event</h2>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Confirm details before publishing. GHS {{ number_format($pricePerQr, 2) }} will be charged from your QR balance.</p>
|
||||
</div>
|
||||
<div class="space-y-3 p-5 text-sm">
|
||||
<div class="flex justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<span class="text-slate-500">Event</span>
|
||||
<span class="font-semibold text-slate-900 text-right" x-text="reviewEventName()"></span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<span class="text-slate-500">Admin label</span>
|
||||
<span class="font-semibold text-slate-900 text-right" x-text="reviewLabel()"></span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<span class="text-slate-500">QR balance after</span>
|
||||
<span class="font-semibold text-slate-900">GHS <span x-text="Math.max(0, balance - price).toFixed(2)"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden">
|
||||
@include('qr-codes.partials.qr-preview-card', ['showDownloads' => false])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Desktop navigation --}}
|
||||
<div class="hidden gap-3 lg:flex">
|
||||
<button type="button" x-show="wizard && step > 1" x-cloak @click="prevStep()"
|
||||
class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-600 hover:bg-slate-50 transition">
|
||||
Back
|
||||
</button>
|
||||
<button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
|
||||
class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
|
||||
Continue
|
||||
</button>
|
||||
<button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
|
||||
class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
|
||||
{{ $isProgramme ? 'Create programme' : 'Create event' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{-- Mobile sticky action bar --}}
|
||||
<div x-show="!showPreviewModal"
|
||||
class="mobile-action-bar lg:hidden">
|
||||
<div class="mobile-action-bar__toolbar">
|
||||
<button type="button" x-show="wizard && step > 1" x-cloak @click="prevStep()"
|
||||
class="rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-600">
|
||||
Back
|
||||
</button>
|
||||
<button type="button" x-show="wizard && (step === 2 || step === 3)" @click="showPreviewModal = true"
|
||||
class="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
|
||||
</svg>
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
|
||||
class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
|
||||
Continue
|
||||
</button>
|
||||
<button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
|
||||
class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-action-bar__inset-fill" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
{{-- Preview modal --}}
|
||||
<div x-show="showPreviewModal" x-cloak
|
||||
x-transition:enter="transition-opacity duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@keydown.escape.window="showPreviewModal = false"
|
||||
class="fixed inset-0 z-[60] flex flex-col bg-black/60 backdrop-blur-sm lg:hidden"
|
||||
style="padding-bottom: env(safe-area-inset-bottom, 0px)">
|
||||
<div class="flex items-center justify-between px-5 py-4">
|
||||
<span class="text-sm font-semibold text-white">Preview</span>
|
||||
<button type="button" @click="showPreviewModal = false"
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30 transition">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center p-8">
|
||||
<div class="w-full max-w-xs overflow-hidden rounded-2xl bg-white shadow-2xl"
|
||||
:style="frameStyle === 'thin'
|
||||
? 'box-shadow: 0 0 0 2px ' + frameColor + ', 0 25px 50px -12px rgb(0 0 0 / 0.25)'
|
||||
: 'box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.06)'">
|
||||
<div :class="{
|
||||
'p-[8px]': frameStyle === 'thin',
|
||||
'p-[14px]': frameStyle === 'scan_me' || frameStyle === 'tap_to_scan',
|
||||
'p-4': frameStyle === 'none',
|
||||
}">
|
||||
<div x-ref="qrPreviewModal"
|
||||
class="aspect-square w-full [&>svg]:block [&>svg]:h-full [&>svg]:w-full"></div>
|
||||
<div x-show="frameStyle === 'scan_me'" x-cloak
|
||||
:style="'border-top: 1px solid ' + frameColor + '40; color: ' + frameColor"
|
||||
class="pt-2.5 pb-0.5 text-center">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'SCAN ME').toUpperCase()"
|
||||
class="text-[11px] font-bold tracking-[0.18em]"></span>
|
||||
</div>
|
||||
<div x-show="frameStyle === 'tap_to_scan'" x-cloak class="mt-2.5 flex justify-center pb-0.5">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'TAP TO SCAN').toUpperCase()"
|
||||
:style="'background-color: ' + frameColor + '; color: ' + frameTextColor"
|
||||
class="rounded-full px-5 py-1.5 text-[10px] font-bold tracking-widest"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-user-layout>
|
||||
@@ -0,0 +1,86 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">Events</x-slot>
|
||||
|
||||
<div class="space-y-6"
|
||||
x-data="balanceGate({
|
||||
balance: @js((float) $wallet->spendableBalance()),
|
||||
price: @js((float) $pricePerQr),
|
||||
topupUrl: @js($topupUrl),
|
||||
href: @js(route('events.create')),
|
||||
})">
|
||||
@foreach(['success', 'error'] as $flash)
|
||||
@if(session($flash))
|
||||
<div class="rounded-lg border px-4 py-3 {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
|
||||
<p class="text-sm">{{ session($flash) }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-violet-50/80 via-white to-indigo-50/60"></div>
|
||||
<div class="relative px-6 py-8 sm:px-10">
|
||||
<div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-xl">
|
||||
<div class="inline-flex items-center gap-1.5 rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">
|
||||
Tickets · Contributions · Free registration
|
||||
</div>
|
||||
<h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Your events</h1>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-600">
|
||||
Create ticketed events, manage attendees, print badges, and attach programme outlines.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button type="button"
|
||||
@click="goOrTopup($event)"
|
||||
class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Create event
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
|
||||
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
||||
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
|
||||
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
|
||||
</div>
|
||||
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
||||
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $qrCodes->count() }}</p>
|
||||
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Events</p>
|
||||
</div>
|
||||
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
||||
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($totalRegistrations) }}</p>
|
||||
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Registrations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-slate-200 bg-white overflow-hidden">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">Your events</h2>
|
||||
</div>
|
||||
@if($qrCodes->isEmpty())
|
||||
<p class="px-6 py-10 text-center text-sm text-slate-500">No events yet. Create your first event to get started.</p>
|
||||
@else
|
||||
<div class="divide-y divide-slate-100">
|
||||
@foreach($qrCodes as $code)
|
||||
<a href="{{ route('events.show', $code) }}" class="flex items-center gap-4 px-6 py-4 transition hover:bg-slate-50">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $code->is_active ? 'bg-violet-100' : 'bg-slate-100 opacity-50' }}">
|
||||
<img src="{{ asset('images/ladill-icons/events.svg') }}?v={{ @filemtime(public_path('images/ladill-icons/events.svg')) ?: '1' }}" alt="" class="h-5 w-5 object-contain" width="20" height="20">
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-semibold text-slate-900">{{ $code->label }}</p>
|
||||
<p class="truncate text-xs text-slate-500">{{ $code->typeLabel() }} · {{ $code->publicUrl() }}</p>
|
||||
</div>
|
||||
<div class="text-right text-xs text-slate-500">
|
||||
<p class="font-semibold text-slate-900">{{ number_format($code->registrations_count) }} registered</p>
|
||||
<p>{{ $code->is_active ? 'Active' : 'Paused' }}</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
@@ -0,0 +1,530 @@
|
||||
@php
|
||||
$style = \App\Support\Qr\QrStyleDefaults::merge($style ?? null);
|
||||
$moduleStyles = $moduleStyles ?? \App\Support\Qr\QrModuleStyleCatalog::visible();
|
||||
$cornerOuterStyles = $cornerOuterStyles ?? \App\Support\Qr\QrCornerStyleCatalog::outerStyles();
|
||||
$cornerInnerStyles = $cornerInnerStyles ?? \App\Support\Qr\QrCornerStyleCatalog::innerStyles();
|
||||
$frameStyles = $frameStyles ?? \App\Support\Qr\QrFrameStyleCatalog::visible();
|
||||
$qrBits = [1,0,1,0,1, 0,1,1,0,0, 1,1,0,1,1, 0,0,1,0,1, 1,0,1,1,0];
|
||||
@endphp
|
||||
|
||||
@include('qr-codes.partials.qr-customizer-script')
|
||||
|
||||
{{-- ── Quick style presets ──────────────────────────────────────────── --}}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-5 py-3.5">
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Quick styles</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-px bg-slate-100/80">
|
||||
@foreach([
|
||||
[
|
||||
'key' => 'classic',
|
||||
'label' => 'Classic',
|
||||
'fg' => '#000000',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'square',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'rounded',
|
||||
'label' => 'Rounded',
|
||||
'fg' => '#111827',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'rounded',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'branded',
|
||||
'label' => 'Branded',
|
||||
'fg' => '#1d4ed8',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'rounded',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'dots',
|
||||
'label' => 'Dots',
|
||||
'fg' => '#0f172a',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'square',
|
||||
'inner' => 'dot',
|
||||
'dot' => true,
|
||||
],
|
||||
] as $preset)
|
||||
@php
|
||||
$outerRadius = match($preset['outer']) { 'rounded' => '3px', 'circle' => '50%', default => '1px' };
|
||||
$innerRadius = $preset['inner'] === 'dot' ? '50%' : '1px';
|
||||
$dotRadius = $preset['dot'] ? '50%' : '1px';
|
||||
@endphp
|
||||
<button type="button"
|
||||
@click="setStylePreset('{{ $preset['key'] }}')"
|
||||
class="group flex flex-col items-center gap-2.5 bg-white px-3 py-4 text-center transition hover:bg-slate-50/80 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-400">
|
||||
|
||||
{{-- Mini QR illustration --}}
|
||||
<span class="relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg"
|
||||
style="background-color: {{ $preset['bg'] }}">
|
||||
|
||||
{{-- Top-left finder --}}
|
||||
<span class="absolute left-[4px] top-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Top-right finder --}}
|
||||
<span class="absolute right-[4px] top-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Bottom-left finder --}}
|
||||
<span class="absolute bottom-[4px] left-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Data dots (5×3 grid, avoiding finder corners) --}}
|
||||
<span class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="grid grid-cols-3 gap-[2px] translate-x-[5px]">
|
||||
@foreach([1,0,1,0,1,0,1,1,0] as $bit)
|
||||
<span class="h-[3px] w-[3px]"
|
||||
style="{{ $bit ? 'background:' . $preset['fg'] . ';border-radius:' . $dotRadius : '' }}"></span>
|
||||
@endforeach
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="text-[11px] font-semibold text-slate-600 group-hover:text-slate-900">{{ $preset['label'] }}</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
|
||||
{{-- Pill tab nav --}}
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
|
||||
<div class="flex gap-1 rounded-xl bg-slate-200/50 p-1">
|
||||
@foreach([
|
||||
['id' => 'body', 'label' => 'Body'],
|
||||
['id' => 'colors', 'label' => 'Colors'],
|
||||
['id' => 'eyes', 'label' => 'Eyes'],
|
||||
['id' => 'logo', 'label' => 'Logo'],
|
||||
['id' => 'frame', 'label' => 'Frame'],
|
||||
] as $tab)
|
||||
<button type="button"
|
||||
@click="openSection = '{{ $tab['id'] }}'"
|
||||
:class="openSection === '{{ $tab['id'] }}'
|
||||
? 'bg-white shadow-sm text-slate-900'
|
||||
: 'text-slate-500 hover:text-slate-700'"
|
||||
class="flex-1 rounded-lg py-1.5 text-[11px] font-semibold transition-all duration-150">
|
||||
{{ $tab['label'] }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-5">
|
||||
|
||||
{{-- ── Body ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'body'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100">
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Dot shape</p>
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
@foreach($moduleStyles as $key => $meta)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[module_style]" value="{{ $key }}" x-model="moduleStyle" class="sr-only">
|
||||
<span class="flex items-center gap-3 rounded-xl border-2 bg-white px-3.5 py-3 transition-all"
|
||||
:class="moduleStyle === '{{ $key }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
@if ($key === 'square')
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-800" fill="currentColor">
|
||||
<path d="M0,0V11H11V0H0ZM7,7h-3v-3h3v3ZM13,0V11h11V0H13Zm7,7h-3v-3h3v3ZM0,13v11H11V13H0Zm7,7h-3v-3h3v3Zm10-3h-4v-4h4v4Zm3,3h-3v-3h3v3Zm-3,4h-4v-4h4v4Zm7-7h-4v-4h4v4Z"/>
|
||||
</svg>
|
||||
@elseif ($key === 'dots')
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-800" fill="currentColor">
|
||||
<path d="M7,0h-3C1.794,0,0,1.794,0,4v3c0,2.206,1.794,4,4,4h3c2.206,0,4-1.794,4-4V4C11,1.794,9.206,0,7,0Zm2,7c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2V4c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3Zm-2-2v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1Zm10,6h3c2.206,0,4-1.794,4-4V4C24,1.794,22.206,0,20,0h-3C14.794,0,13,1.794,13,4v3c0,2.206,1.794,4,4,4Zm-2-7c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2V4Zm2,2v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1ZM7,13h-3c-2.206,0-4,1.794-4,4v3c0,2.206,1.794,4,4,4h3c2.206,0,4-1.794,4-4v-3c0-2.206-1.794-4-4-4Zm2,7c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2v-3c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3Zm-2-2v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1Zm10-3.5v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Zm3,4h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5Zm-3,3v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Zm7-7v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Z"/>
|
||||
</svg>
|
||||
@else
|
||||
<span class="grid grid-cols-4 gap-[2px] p-1.5">
|
||||
@foreach($qrBits as $bit)
|
||||
<span class="block aspect-square {{ $bit ? ('bg-slate-800 ' . ($meta['circular'] ? 'rounded-full' : '')) : 'bg-transparent' }}"></span>
|
||||
@endforeach
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
<span class="text-xs font-semibold text-slate-700">{{ $meta['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Colors ───────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'colors'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Quick presets</p>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
@foreach([
|
||||
['fg' => '#000000', 'bg' => '#ffffff', 'label' => 'Classic'],
|
||||
['fg' => '#1d4ed8', 'bg' => '#ffffff', 'label' => 'Blue'],
|
||||
['fg' => '#047857', 'bg' => '#ffffff', 'label' => 'Green'],
|
||||
['fg' => '#7c3aed', 'bg' => '#ffffff', 'label' => 'Purple'],
|
||||
['fg' => '#c2410c', 'bg' => '#fff7ed', 'label' => 'Orange'],
|
||||
['fg' => '#be185d', 'bg' => '#fdf4ff', 'label' => 'Pink'],
|
||||
['fg' => '#0f172a', 'bg' => '#ecfdf5', 'label' => 'Dark teal'],
|
||||
] as $preset)
|
||||
<button type="button"
|
||||
@click="fg = '{{ $preset['fg'] }}'; bg = '{{ $preset['bg'] }}'; schedulePreview()"
|
||||
title="{{ $preset['label'] }}"
|
||||
class="h-8 w-8 rounded-full border-2 border-white shadow ring-1 ring-slate-300/60 transition hover:scale-110 hover:ring-indigo-400"
|
||||
style="background-color: {{ $preset['fg'] }}"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Foreground</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[foreground]" x-model="fg" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="fg" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Background</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[background]" x-model="bg" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="bg" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Gradient</p>
|
||||
<input type="hidden" name="style[gradient_type]" :value="gradientType">
|
||||
<div class="flex gap-1 rounded-xl bg-slate-200/50 p-1">
|
||||
@foreach([['none', 'None'], ['linear', 'Linear'], ['radial', 'Radial']] as [$val, $lbl])
|
||||
<button type="button"
|
||||
@click="gradientType = '{{ $val }}'"
|
||||
:class="gradientType === '{{ $val }}' ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700'"
|
||||
class="flex-1 rounded-lg py-1.5 text-[11px] font-semibold transition-all duration-150">
|
||||
{{ $lbl }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
<div x-show="gradientType !== 'none'" x-cloak class="mt-3 space-y-3">
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Start color</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[gradient_color1]" x-model="gradientColor1" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="gradientColor1" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">End color</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[gradient_color2]" x-model="gradientColor2" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="gradientColor2" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="gradientType === 'linear'" class="space-y-1">
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Rotation</span>
|
||||
<span x-text="gradientRotation + '°'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[gradient_rotation]" min="0" max="360" x-model.number="gradientRotation"
|
||||
class="w-full accent-indigo-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Eyes ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'eyes'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Outer frame</p>
|
||||
<div class="grid grid-cols-3 gap-2.5">
|
||||
@foreach([
|
||||
['value' => 'square', 'label' => 'Square', 'shape' => 'h-7 w-7 border-[3px] border-slate-800'],
|
||||
['value' => 'rounded', 'label' => 'Rounded', 'shape' => 'h-7 w-7 rounded-[5px] border-[3px] border-slate-800'],
|
||||
['value' => 'circle', 'label' => 'Circle', 'shape' => 'h-7 w-7 rounded-full border-[3px] border-slate-800'],
|
||||
] as $opt)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[finder_outer]" value="{{ $opt['value'] }}" x-model="finderOuter" class="sr-only">
|
||||
<span class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="finderOuter === '{{ $opt['value'] }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="{{ $opt['shape'] }}"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">{{ $opt['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Inner dot</p>
|
||||
<div class="grid grid-cols-3 gap-2.5">
|
||||
@foreach([
|
||||
['value' => 'square', 'label' => 'Square', 'shape' => 'h-5 w-5 rounded-[2px] bg-slate-800'],
|
||||
['value' => 'rounded', 'label' => 'Rounded', 'shape' => 'h-5 w-5 rounded-[4px] bg-slate-800'],
|
||||
['value' => 'dot', 'label' => 'Dot', 'shape' => 'h-5 w-5 rounded-full bg-slate-800'],
|
||||
] as $opt)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[finder_inner]" value="{{ $opt['value'] }}" x-model="finderInner" class="sr-only">
|
||||
<span class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="finderInner === '{{ $opt['value'] }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="{{ $opt['shape'] }}"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">{{ $opt['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Logo ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'logo'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-4">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-slate-700">Center logo</p>
|
||||
<p class="mt-0.5 text-xs leading-5 text-slate-400">Placed in the center. Error correction is raised automatically when a logo is present.</p>
|
||||
</div>
|
||||
<label class="flex cursor-pointer flex-col items-center gap-3 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/60 py-8 text-center transition hover:border-indigo-400 hover:bg-indigo-50/20">
|
||||
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-slate-200/60">
|
||||
<svg class="h-6 w-6 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-700">Click to upload</p>
|
||||
<p class="text-xs text-slate-400">PNG, JPG, GIF, WebP · max 2 MB</p>
|
||||
</div>
|
||||
<input type="file" name="logo" accept="image/png,image/jpeg,image/gif,image/webp" x-ref="logoInput" @change="onLogoChange()" class="sr-only">
|
||||
</label>
|
||||
|
||||
{{-- Logo options: shown when a logo is present (uploaded or existing) --}}
|
||||
<div x-show="hasExistingLogo || _rawLogoFile" x-cloak class="space-y-4 border-t border-slate-100 pt-4">
|
||||
|
||||
{{-- Size --}}
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Logo size</span>
|
||||
<span x-text="Math.round(logoSize * 100) + '%'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" min="10" max="40" step="1"
|
||||
:value="Math.round(logoSize * 100)"
|
||||
@input="logoSize = parseFloat($event.target.value) / 100"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
<input type="hidden" name="style[logo_size]" :value="logoSize">
|
||||
</div>
|
||||
|
||||
{{-- Padding --}}
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Padding</span>
|
||||
<span x-text="logoMargin" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[logo_margin]" min="0" max="15" x-model.number="logoMargin"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
|
||||
{{-- White background toggle --}}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-semibold text-slate-600">White background</span>
|
||||
<button type="button" role="switch" :aria-checked="logoWhiteBg"
|
||||
@click="logoWhiteBg = !logoWhiteBg"
|
||||
:class="logoWhiteBg ? 'bg-indigo-500' : 'bg-slate-200'"
|
||||
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none">
|
||||
<span :class="logoWhiteBg ? 'translate-x-5' : 'translate-x-1'"
|
||||
class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform"></span>
|
||||
</button>
|
||||
<input type="hidden" name="style[logo_white_bg]" :value="logoWhiteBg ? '1' : '0'">
|
||||
</div>
|
||||
|
||||
{{-- Shape --}}
|
||||
<div>
|
||||
<p class="mb-2 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Shape</p>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
{{-- Original: landscape rectangle — logo keeps its natural aspect ratio --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'none'"
|
||||
:class="logoShape === 'none' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-4 w-7 rounded-[2px] bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Original</span>
|
||||
</button>
|
||||
{{-- Rounded: square crop with rounded corners --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'rounded'"
|
||||
:class="logoShape === 'rounded' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-7 w-7 rounded-xl bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Rounded</span>
|
||||
</button>
|
||||
{{-- Circle: square crop clipped to circle --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'circle'"
|
||||
:class="logoShape === 'circle' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-7 w-7 rounded-full bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" name="style[logo_shape]" :value="logoShape">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@if(!empty($showRemoveLogo))
|
||||
<label class="flex items-center gap-2.5 text-sm text-slate-600">
|
||||
<input type="checkbox" name="remove_logo" value="1" x-model="removeLogo" @change="schedulePreview()"
|
||||
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
Remove current logo
|
||||
</label>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- ── Frame ────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'frame'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Frame style</p>
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
@foreach($frameStyles as $key => $meta)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[frame_style]" value="{{ $key }}" x-model="frameStyle" class="sr-only">
|
||||
<span class="flex items-center gap-3 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="frameStyle === '{{ $key }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-10 w-9 shrink-0 items-end justify-center overflow-hidden rounded-lg border border-slate-200 bg-white p-1 shadow-sm">
|
||||
@if($key === 'none')
|
||||
<span class="h-8 w-8 rounded-sm bg-slate-200 opacity-40"></span>
|
||||
@elseif($meta['mode'] === 'border')
|
||||
<span class="h-8 w-8 rounded-sm border-2 border-slate-500 bg-slate-100"></span>
|
||||
@elseif($meta['mode'] === 'label')
|
||||
<span class="flex h-9 w-8 flex-col items-stretch gap-0.5">
|
||||
<span class="flex-1 rounded-sm border border-slate-300 bg-slate-100"></span>
|
||||
<span class="rounded-sm bg-slate-700 py-0.5 text-center text-[5px] font-bold leading-none text-white">SCAN</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="flex h-9 w-8 flex-col items-stretch gap-0.5">
|
||||
<span class="flex-1 rounded-sm border border-slate-300 bg-slate-100"></span>
|
||||
<span class="rounded-full bg-slate-700 py-0.5 text-center text-[5px] font-bold leading-none text-white">TAP</span>
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-xs font-semibold text-slate-800">{{ $meta['label'] }}</span>
|
||||
<span class="block text-[10px] leading-4 text-slate-400">{{ $meta['description'] }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Frame colour --}}
|
||||
<div x-show="frameStyle !== 'none'" x-cloak class="space-y-1">
|
||||
<label class="block text-xs font-semibold text-slate-600">Frame colour</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="color" name="style[frame_color]" x-model="frameColor" @input="schedulePreview()"
|
||||
class="h-9 w-9 shrink-0 cursor-pointer rounded-lg border border-slate-200 bg-white p-0.5">
|
||||
<input type="text" x-model="frameColor" @change="schedulePreview()" maxlength="7"
|
||||
class="flex-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Frame text -- only for frames that show a CTA label --}}
|
||||
<div x-show="frameStyle === 'scan_me' || frameStyle === 'tap_to_scan'" x-cloak class="space-y-1">
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Label text</span>
|
||||
<span class="font-normal text-slate-400" x-text="frameStyle === 'tap_to_scan' ? 'Default: TAP TO SCAN' : 'Default: SCAN ME'"></span>
|
||||
</label>
|
||||
<input type="text" name="style[frame_text]" x-model="frameText"
|
||||
maxlength="100"
|
||||
:placeholder="frameStyle === 'tap_to_scan' ? 'TAP TO SCAN' : 'SCAN ME'"
|
||||
class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 border-t border-slate-100 pt-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-600">Error correction</label>
|
||||
<select name="style[error_correction]" x-model="ecc"
|
||||
class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none">
|
||||
<option value="L">Low — 7% recovery</option>
|
||||
<option value="M">Medium — 15% recovery</option>
|
||||
<option value="Q">Quartile — 25% recovery</option>
|
||||
<option value="H">High — 30% recovery</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Output scale</span>
|
||||
<span x-text="scale + '×'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[scale]" min="4" max="16" x-model.number="scale"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Quiet zone</span>
|
||||
<span x-text="margin + ' modules'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[margin]" min="0" max="10" x-model.number="margin"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,669 @@
|
||||
@once('qr-customizer-alpine')
|
||||
<script>
|
||||
(function () {
|
||||
const registerQrCustomizer = () => {
|
||||
Alpine.data('qrCustomizer', (config) => ({
|
||||
previewUrl: config.previewUrl,
|
||||
shortCode: config.shortCode || 'preview',
|
||||
qrData: config.qrData || 'https://ladill.com',
|
||||
existingLogoPath: config.existingLogoPath || null,
|
||||
hasExistingLogo: Boolean(config.hasExistingLogo),
|
||||
removeLogo: false,
|
||||
previewLoading: false,
|
||||
previewTimer: null,
|
||||
showPreviewModal: false,
|
||||
openSection: config.openSection || 'body',
|
||||
balance: config.balance ?? null,
|
||||
price: config.price ?? null,
|
||||
topupModalId: config.topupModalId ?? null,
|
||||
topupUrl: config.topupUrl ?? null,
|
||||
canonicalSyncUrl: config.canonicalSyncUrl ?? null,
|
||||
csrf: config.csrf ?? null,
|
||||
_canonicalSynced: false,
|
||||
type: config.type ?? 'url',
|
||||
wizard: Boolean(config.wizard),
|
||||
step: config.wizard ? 1 : 0,
|
||||
fg: config.style.foreground,
|
||||
bg: config.style.background,
|
||||
ecc: config.style.error_correction,
|
||||
margin: Number(config.style.margin),
|
||||
moduleStyle: config.style.module_style,
|
||||
finderOuter: config.style.finder_outer,
|
||||
finderInner: config.style.finder_inner,
|
||||
frameStyle: config.style.frame_style,
|
||||
frameText: config.style.frame_text || '',
|
||||
frameColor: config.style.frame_color || '#000000',
|
||||
scale: Number(config.style.scale),
|
||||
gradientType: config.style.gradient_type || 'none',
|
||||
gradientColor1: config.style.gradient_color1 || '#000000',
|
||||
gradientColor2: config.style.gradient_color2 || '#7c3aed',
|
||||
gradientRotation: Number(config.style.gradient_rotation ?? 45),
|
||||
logoSize: Number(config.style.logo_size ?? 0.3),
|
||||
logoMargin: Number(config.style.logo_margin ?? 5),
|
||||
logoWhiteBg: Boolean(config.style.logo_white_bg),
|
||||
logoShape: config.style.logo_shape || 'none',
|
||||
_rawLogoFile: null,
|
||||
_processedLogoUrl: null,
|
||||
init() {
|
||||
[
|
||||
'fg', 'bg', 'ecc', 'margin', 'moduleStyle',
|
||||
'finderOuter', 'finderInner', 'frameStyle', 'frameText', 'frameColor', 'scale',
|
||||
'gradientType', 'gradientColor1', 'gradientColor2', 'gradientRotation',
|
||||
'logoSize', 'logoMargin',
|
||||
].forEach((field) => {
|
||||
this.$watch(field, () => this.schedulePreview());
|
||||
});
|
||||
|
||||
// These require canvas re-processing before preview
|
||||
['logoWhiteBg', 'logoShape'].forEach((field) => {
|
||||
this.$watch(field, () => this._reprocessLogo());
|
||||
});
|
||||
|
||||
this.schedulePreview();
|
||||
|
||||
if (config.existingLogoUrl) {
|
||||
this._loadExistingLogo(config.existingLogoUrl);
|
||||
}
|
||||
|
||||
this.$watch('showPreviewModal', (val) => {
|
||||
if (val) this.schedulePreview();
|
||||
});
|
||||
},
|
||||
toggleSection(id) {
|
||||
this.openSection = this.openSection === id ? null : id;
|
||||
},
|
||||
schedulePreview() {
|
||||
clearTimeout(this.previewTimer);
|
||||
this.previewTimer = setTimeout(() => this.refreshPreview(), 200);
|
||||
},
|
||||
async onLogoChange() {
|
||||
const input = this.$refs.logoInput;
|
||||
this._rawLogoFile = input?.files?.[0] || null;
|
||||
if (this._rawLogoFile) {
|
||||
await this._reprocessLogo();
|
||||
} else {
|
||||
this._processedLogoUrl = null;
|
||||
this.schedulePreview();
|
||||
}
|
||||
},
|
||||
async _reprocessLogo() {
|
||||
if (!this._rawLogoFile) return;
|
||||
const result = await this._processLogoImage(this._rawLogoFile);
|
||||
if (result) {
|
||||
this._processedLogoUrl = result;
|
||||
this.schedulePreview();
|
||||
}
|
||||
},
|
||||
// Load existing logo from data URI (edit view) and apply canvas processing
|
||||
_loadExistingLogo(dataUri) {
|
||||
fetch(dataUri)
|
||||
.then(r => r.blob())
|
||||
.then(blob => {
|
||||
this._rawLogoFile = new File([blob], 'logo', { type: blob.type || 'image/png' });
|
||||
return this._processLogoImage(this._rawLogoFile);
|
||||
})
|
||||
.then(result => {
|
||||
if (result) {
|
||||
this._processedLogoUrl = result;
|
||||
this.schedulePreview();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this._processedLogoUrl = dataUri;
|
||||
this.schedulePreview();
|
||||
});
|
||||
},
|
||||
// Apply shape clipping and/or white background to logo via canvas.
|
||||
// For circle/rounded shapes a center-square crop is used so the shape looks balanced.
|
||||
// For no-shape logos the natural aspect ratio is preserved.
|
||||
_processLogoImage(file) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
const raw = URL.createObjectURL(file);
|
||||
img.onload = () => {
|
||||
const needsSquareCrop = this.logoShape !== 'none';
|
||||
const sw = img.naturalWidth;
|
||||
const sh = img.naturalHeight;
|
||||
|
||||
let cw, ch, sx, sy, sSize;
|
||||
if (needsSquareCrop) {
|
||||
// Crop to center square for circle/rounded shapes
|
||||
sSize = Math.min(sw, sh);
|
||||
sx = (sw - sSize) / 2;
|
||||
sy = (sh - sSize) / 2;
|
||||
cw = ch = 300;
|
||||
} else {
|
||||
// Preserve natural aspect ratio
|
||||
const MAX = 600;
|
||||
const scale = Math.min(1, MAX / Math.max(sw, sh));
|
||||
cw = Math.round(sw * scale);
|
||||
ch = Math.round(sh * scale);
|
||||
sx = sy = 0;
|
||||
sSize = null;
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = cw;
|
||||
canvas.height = ch;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
if (needsSquareCrop) {
|
||||
ctx.beginPath();
|
||||
if (this.logoShape === 'circle') {
|
||||
ctx.arc(cw / 2, ch / 2, cw / 2, 0, Math.PI * 2);
|
||||
} else {
|
||||
// Rounded — 20% corner radius
|
||||
const r = cw * 0.2;
|
||||
ctx.moveTo(r, 0);
|
||||
ctx.lineTo(cw - r, 0);
|
||||
ctx.arcTo(cw, 0, cw, r, r);
|
||||
ctx.lineTo(cw, ch - r);
|
||||
ctx.arcTo(cw, ch, cw - r, ch, r);
|
||||
ctx.lineTo(r, ch);
|
||||
ctx.arcTo(0, ch, 0, ch - r, r);
|
||||
ctx.lineTo(0, r);
|
||||
ctx.arcTo(0, 0, r, 0, r);
|
||||
ctx.closePath();
|
||||
}
|
||||
ctx.clip();
|
||||
}
|
||||
|
||||
if (this.logoWhiteBg) {
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, cw, ch);
|
||||
}
|
||||
|
||||
if (sSize !== null) {
|
||||
ctx.drawImage(img, sx, sy, sSize, sSize, 0, 0, cw, ch);
|
||||
} else {
|
||||
ctx.drawImage(img, 0, 0, cw, ch);
|
||||
}
|
||||
|
||||
URL.revokeObjectURL(raw);
|
||||
resolve(canvas.toDataURL('image/png'));
|
||||
};
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(raw);
|
||||
resolve(null);
|
||||
};
|
||||
img.src = raw;
|
||||
});
|
||||
},
|
||||
setStylePreset(preset) {
|
||||
const presets = {
|
||||
classic: {
|
||||
fg: '#000000', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'square', finderInner: 'square',
|
||||
frameStyle: 'none', ecc: 'M', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
rounded: {
|
||||
fg: '#111827', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'rounded', finderInner: 'square',
|
||||
frameStyle: 'scan_me', ecc: 'Q', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
branded: {
|
||||
fg: '#1d4ed8', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'rounded', finderInner: 'square',
|
||||
frameStyle: 'tap_to_scan', ecc: 'Q', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
dots: {
|
||||
fg: '#0f172a', bg: '#ffffff', moduleStyle: 'dots',
|
||||
finderOuter: 'square', finderInner: 'dot',
|
||||
frameStyle: 'scan_me', ecc: 'H', margin: 5,
|
||||
gradientType: 'none',
|
||||
},
|
||||
};
|
||||
Object.assign(this, presets[preset] || presets.classic);
|
||||
this.schedulePreview();
|
||||
},
|
||||
setEyePreset(preset) {
|
||||
const presets = {
|
||||
square: { finderOuter: 'square', finderInner: 'square' },
|
||||
rounded: { finderOuter: 'rounded', finderInner: 'square' },
|
||||
target: { finderOuter: 'circle', finderInner: 'dot' },
|
||||
};
|
||||
Object.assign(this, presets[preset] || presets.square);
|
||||
this.schedulePreview();
|
||||
},
|
||||
redirectTopup() {
|
||||
if (this.topupUrl) {
|
||||
window.location.href = this.topupUrl;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.topupModalId) {
|
||||
window.dispatchEvent(new CustomEvent('open-modal', {
|
||||
detail: this.topupModalId,
|
||||
bubbles: true,
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
checkBalance(event) {
|
||||
if (this.balance === null || this.price === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.balance <= 0 || this.balance < this.price) {
|
||||
event?.preventDefault();
|
||||
this.redirectTopup();
|
||||
}
|
||||
},
|
||||
nextStep(event) {
|
||||
if (!this.wizard) {
|
||||
return;
|
||||
}
|
||||
if (this.step === 1 && !this.validateWizardStep1()) {
|
||||
event?.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (this.step < 3) {
|
||||
this.step++;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
prevStep() {
|
||||
if (this.wizard && this.step > 1) {
|
||||
this.step--;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
validateWizardStep1() {
|
||||
const form = this.$refs.createForm;
|
||||
const label = form?.querySelector('[name=label]');
|
||||
if (!label?.value?.trim()) {
|
||||
label?.focus();
|
||||
label?.reportValidity?.();
|
||||
return false;
|
||||
}
|
||||
return label.checkValidity?.() !== false;
|
||||
},
|
||||
wizardSubmit(event) {
|
||||
if (this.wizard && this.step < 3) {
|
||||
event?.preventDefault();
|
||||
this.nextStep(event);
|
||||
return;
|
||||
}
|
||||
this.submitOrTopup(event);
|
||||
},
|
||||
reviewLabel() {
|
||||
return this.$refs.createForm?.querySelector('[name=label]')?.value?.trim() || '';
|
||||
},
|
||||
reviewEventName() {
|
||||
const eventBlock = this.$refs.createForm?.querySelector('[data-event-name]');
|
||||
return eventBlock?.value?.trim() || this.reviewLabel();
|
||||
},
|
||||
submitOrTopup(event) {
|
||||
if (this.balance <= 0 || this.balance < this.price) {
|
||||
event?.preventDefault();
|
||||
this.redirectTopup();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event?.type === 'submit') {
|
||||
return;
|
||||
}
|
||||
|
||||
const form = this.$el.tagName === 'FORM' ? this.$el : this.$refs.createForm;
|
||||
form?.requestSubmit();
|
||||
},
|
||||
_buildGradient() {
|
||||
if (this.gradientType === 'none') return null;
|
||||
return {
|
||||
type: this.gradientType,
|
||||
rotation: this.gradientType === 'linear' ? (Math.PI * this.gradientRotation / 180) : 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: this.gradientColor1 },
|
||||
{ offset: 1, color: this.gradientColor2 },
|
||||
],
|
||||
};
|
||||
},
|
||||
_buildQrOptions(width, height) {
|
||||
const dotsTypeMap = { square: 'square', dots: 'dots' };
|
||||
const cornersSquareMap = { square: 'square', rounded: 'extra-rounded', circle: 'dot' };
|
||||
// 'rounded' maps to 'square'; SVG post-processing applies the actual corner radius
|
||||
const cornersDotMap = { square: 'square', rounded: 'square', dot: 'dot' };
|
||||
|
||||
const gradient = this._buildGradient();
|
||||
|
||||
const options = {
|
||||
width,
|
||||
height,
|
||||
type: 'svg',
|
||||
data: this.qrData,
|
||||
margin: Math.round(Number(this.margin) * 4),
|
||||
qrOptions: { errorCorrectionLevel: this.ecc || 'M' },
|
||||
dotsOptions: {
|
||||
type: dotsTypeMap[this.moduleStyle] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
cornersSquareOptions: {
|
||||
type: cornersSquareMap[this.finderOuter] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
cornersDotOptions: {
|
||||
type: cornersDotMap[this.finderInner] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
backgroundOptions: { color: this.bg },
|
||||
};
|
||||
|
||||
if (this._processedLogoUrl && !this.removeLogo) {
|
||||
options.image = this._processedLogoUrl;
|
||||
options.imageOptions = {
|
||||
crossOrigin: 'anonymous',
|
||||
margin: this.logoMargin,
|
||||
imageSize: this.logoSize,
|
||||
hideBackgroundDots: true,
|
||||
};
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
// Post-process SVG to give corner inner dots rounded corners.
|
||||
// qr-code-styling renders square cornersDot as <rect> elements inside <clipPath> in <defs>.
|
||||
// Adding rx/ry directly to those rects rounds the clip mask → the visible dot appears rounded.
|
||||
_applyRoundedInnerDot(container) {
|
||||
const svg = container.querySelector('svg');
|
||||
if (!svg) return;
|
||||
|
||||
const defs = svg.querySelector('defs');
|
||||
if (!defs) { this._applyRoundedInnerDotFallback(container); return; }
|
||||
|
||||
// Collect all square <rect> elements (width === height) inside <clipPath> elements,
|
||||
// grouped by their size value.
|
||||
const groups = new Map();
|
||||
defs.querySelectorAll('clipPath rect').forEach(rect => {
|
||||
const w = rect.getAttribute('width');
|
||||
const h = rect.getAttribute('height');
|
||||
if (w && h && w === h) {
|
||||
if (!groups.has(w)) groups.set(w, []);
|
||||
groups.get(w).push(rect);
|
||||
}
|
||||
});
|
||||
|
||||
// Find the group of exactly 3 with the smallest size — that is the inner finder dot
|
||||
// (one rect per finder eye; outer ring uses <path>, individual modules form much larger groups).
|
||||
let targetRects = null, minSize = Infinity;
|
||||
for (const [sizeStr, rects] of groups) {
|
||||
if (rects.length !== 3) continue;
|
||||
const size = parseFloat(sizeStr);
|
||||
if (size < minSize) { minSize = size; targetRects = rects; }
|
||||
}
|
||||
|
||||
if (!targetRects) { this._applyRoundedInnerDotFallback(container); return; }
|
||||
|
||||
const r = (minSize * 0.28).toFixed(3);
|
||||
for (const rect of targetRects) {
|
||||
rect.setAttribute('rx', r);
|
||||
rect.setAttribute('ry', r);
|
||||
}
|
||||
},
|
||||
// Fallback: use qrcode-generator to compute finder inner dot pixel positions, then
|
||||
// overdraw rounded SVG <rect> elements at those positions.
|
||||
_applyRoundedInnerDotFallback(container) {
|
||||
const svg = container.querySelector('svg');
|
||||
if (!svg || typeof window.qrcode === 'undefined') return;
|
||||
try {
|
||||
const qr = window.qrcode(0, this.ecc || 'M');
|
||||
qr.addData(this.qrData);
|
||||
qr.make();
|
||||
const n = qr.getModuleCount();
|
||||
const svgW = svg.viewBox?.baseVal?.width || parseFloat(svg.getAttribute('width') || '500');
|
||||
const marginPx = Math.round(Number(this.margin) * 4);
|
||||
const modulePx = (svgW - 2 * marginPx) / n;
|
||||
const dotSize = modulePx * 3;
|
||||
const r = dotSize * 0.28;
|
||||
const fill = this.gradientType !== 'none' ? this.gradientColor1 : this.fg;
|
||||
const NS = 'http://www.w3.org/2000/svg';
|
||||
for (const [row, col] of [[2, 2], [2, n - 5], [n - 5, 2]]) {
|
||||
const x = marginPx + col * modulePx;
|
||||
const y = marginPx + row * modulePx;
|
||||
// Cover the square dot with the background color
|
||||
const eraser = document.createElementNS(NS, 'rect');
|
||||
eraser.setAttribute('x', x); eraser.setAttribute('y', y);
|
||||
eraser.setAttribute('width', dotSize); eraser.setAttribute('height', dotSize);
|
||||
eraser.setAttribute('fill', this.bg);
|
||||
svg.appendChild(eraser);
|
||||
// Draw rounded corner dot
|
||||
const dot = document.createElementNS(NS, 'rect');
|
||||
dot.setAttribute('x', x); dot.setAttribute('y', y);
|
||||
dot.setAttribute('width', dotSize); dot.setAttribute('height', dotSize);
|
||||
dot.setAttribute('rx', r); dot.setAttribute('ry', r);
|
||||
dot.setAttribute('fill', fill);
|
||||
svg.appendChild(dot);
|
||||
}
|
||||
} catch (_) { /* silent */ }
|
||||
},
|
||||
refreshPreview() {
|
||||
if (typeof window.QRCodeStyling === 'undefined') return;
|
||||
|
||||
this.previewLoading = true;
|
||||
|
||||
try {
|
||||
const container = this.$refs.qrPreview;
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
new window.QRCodeStyling(this._buildQrOptions(500, 500)).append(container);
|
||||
if (this.finderInner === 'rounded') this._applyRoundedInnerDot(container);
|
||||
}
|
||||
|
||||
const modalContainer = this.$refs.qrPreviewModal;
|
||||
if (modalContainer && this.showPreviewModal) {
|
||||
modalContainer.innerHTML = '';
|
||||
new window.QRCodeStyling(this._buildQrOptions(320, 320)).append(modalContainer);
|
||||
if (this.finderInner === 'rounded') this._applyRoundedInnerDot(modalContainer);
|
||||
}
|
||||
} finally {
|
||||
this.previewLoading = false;
|
||||
this._maybeSyncCanonical();
|
||||
}
|
||||
},
|
||||
|
||||
// Persist the exact rendered QR as the canonical SVG+PNG (single source of
|
||||
// truth) so downloads match the preview. Only on pages with a real /q code
|
||||
// (canonicalSyncUrl set — i.e. the show page), once per load.
|
||||
_maybeSyncCanonical() {
|
||||
if (!this.canonicalSyncUrl || this._canonicalSynced) return;
|
||||
if (typeof window.QRCodeStyling === 'undefined') return;
|
||||
const svgEl = this.$refs.qrPreview?.querySelector('svg');
|
||||
if (!svgEl) return;
|
||||
this._canonicalSynced = true;
|
||||
// Defer so finder-dot post-processing + DOM settle before serializing.
|
||||
setTimeout(() => this.syncCanonical(), 300);
|
||||
},
|
||||
async syncCanonical() {
|
||||
try {
|
||||
const svgEl = this.$refs.qrPreview?.querySelector('svg');
|
||||
if (!svgEl) return;
|
||||
const inner = new XMLSerializer().serializeToString(svgEl);
|
||||
const finalSvg = this._buildFramedSvg(inner);
|
||||
const png = await this._svgToPng(finalSvg);
|
||||
if (!png) return;
|
||||
const fd = new FormData();
|
||||
fd.append('svg', finalSvg);
|
||||
fd.append('png', png);
|
||||
await fetch(this.canonicalSyncUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': this.csrf || '', 'Accept': 'application/json' },
|
||||
body: fd,
|
||||
});
|
||||
} catch (_) { /* non-fatal: server fallback render remains */ }
|
||||
},
|
||||
_xmlEscape(s) {
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
},
|
||||
// Composite the CSS preview frame (thin border / SCAN ME label / TAP TO
|
||||
// SCAN pill) into a single vector SVG, with the QR nested as vector — so
|
||||
// downloads include the frame exactly like the preview. No frame => QR as-is.
|
||||
_buildFramedSvg(qrSvg) {
|
||||
const fs = this.frameStyle;
|
||||
if (!fs || fs === 'none') return qrSvg;
|
||||
|
||||
const color = this.frameColor || '#000000';
|
||||
const Q = 1000, pad = 72, radius = 56;
|
||||
const W = Q + pad * 2;
|
||||
|
||||
// Nest the QR vector: ensure a viewBox, drop intrinsic width/height, place it.
|
||||
const wm = qrSvg.match(/<svg\b[^>]*?\swidth\s*=\s*"([\d.]+)/i);
|
||||
const hm = qrSvg.match(/<svg\b[^>]*?\sheight\s*=\s*"([\d.]+)/i);
|
||||
const ow = wm ? wm[1] : '500';
|
||||
const oh = hm ? hm[1] : '500';
|
||||
let qr = qrSvg;
|
||||
if (!/viewBox\s*=/i.test(qr)) {
|
||||
qr = qr.replace(/<svg\b/i, `<svg viewBox="0 0 ${ow} ${oh}"`);
|
||||
}
|
||||
qr = qr
|
||||
.replace(/(<svg\b[^>]*?)\swidth\s*=\s*"[^"]*"/i, '$1')
|
||||
.replace(/(<svg\b[^>]*?)\sheight\s*=\s*"[^"]*"/i, '$1')
|
||||
.replace(/<svg\b/i, `<svg x="${pad}" y="${pad}" width="${Q}" height="${Q}"`);
|
||||
|
||||
let labelH = 0, labelMarkup = '', border = '';
|
||||
if (fs === 'scan_me') {
|
||||
labelH = 124;
|
||||
const txt = ((this.frameText && this.frameText.trim()) ? this.frameText : 'SCAN ME').toUpperCase();
|
||||
labelMarkup =
|
||||
`<line x1="${pad}" y1="${Q + pad + 26}" x2="${W - pad}" y2="${Q + pad + 26}" stroke="${color}" stroke-opacity="0.25" stroke-width="2"/>` +
|
||||
`<text x="${W / 2}" y="${Q + pad + 86}" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="44" font-weight="700" letter-spacing="7" fill="${color}">${this._xmlEscape(txt)}</text>`;
|
||||
} else if (fs === 'tap_to_scan') {
|
||||
labelH = 142;
|
||||
const txt = ((this.frameText && this.frameText.trim()) ? this.frameText : 'TAP TO SCAN').toUpperCase();
|
||||
const pillH = 78;
|
||||
const pillW = Math.min(W - pad * 2, 160 + txt.length * 24);
|
||||
const pillX = (W - pillW) / 2, pillY = Q + pad + 30;
|
||||
labelMarkup =
|
||||
`<rect x="${pillX}" y="${pillY}" width="${pillW}" height="${pillH}" rx="${pillH / 2}" fill="${color}"/>` +
|
||||
`<text x="${W / 2}" y="${pillY + pillH / 2 + 13}" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="36" font-weight="700" letter-spacing="5" fill="${this.frameTextColor}">${this._xmlEscape(txt)}</text>`;
|
||||
}
|
||||
const H = Q + pad * 2 + labelH;
|
||||
if (fs === 'thin') {
|
||||
border = `<rect x="11" y="11" width="${W - 22}" height="${H - 22}" rx="${radius - 6}" fill="none" stroke="${color}" stroke-width="18"/>`;
|
||||
}
|
||||
|
||||
// No XML prolog here — the server's sanitizeSvg prepends it (a literal
|
||||
// XML prolog in a Blade file would be read as a PHP open tag).
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">` +
|
||||
`<rect x="0" y="0" width="${W}" height="${H}" rx="${radius}" fill="#ffffff"/>` +
|
||||
border + qr + labelMarkup +
|
||||
'</svg>';
|
||||
},
|
||||
_svgToPng(svgString) {
|
||||
return new Promise((resolve) => {
|
||||
try {
|
||||
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
try {
|
||||
const w = img.naturalWidth || 1000;
|
||||
const h = img.naturalHeight || 1000;
|
||||
const f = Math.max(1, 1000 / Math.max(w, h)); // upscale small to ~1000 for crisp print
|
||||
const cw = Math.round(w * f), ch = Math.round(h * f);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = cw; c.height = ch;
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = (this.frameStyle && this.frameStyle !== 'none') ? '#ffffff' : (this.bg || '#ffffff');
|
||||
ctx.fillRect(0, 0, cw, ch);
|
||||
ctx.drawImage(img, 0, 0, cw, ch);
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(c.toDataURL('image/png'));
|
||||
} catch (_) { URL.revokeObjectURL(url); resolve(null); }
|
||||
};
|
||||
img.onerror = () => { URL.revokeObjectURL(url); resolve(null); };
|
||||
img.src = url;
|
||||
} catch (_) { resolve(null); }
|
||||
});
|
||||
},
|
||||
|
||||
// Returns black or white depending on frameColor luminance, for readable CTA text
|
||||
get frameTextColor() {
|
||||
return this._hexToLuminance(this.frameColor) > 0.35 ? '#000000' : '#ffffff';
|
||||
},
|
||||
|
||||
// ── Scanability validation ────────────────────────────────────────
|
||||
get scanability() {
|
||||
let score = 100;
|
||||
const warnings = [];
|
||||
|
||||
// Contrast check — use gradient start colour when gradient is active
|
||||
const effectiveFg = this.gradientType !== 'none' ? this.gradientColor1 : this.fg;
|
||||
const ratio = this._contrastRatio(effectiveFg, this.bg);
|
||||
|
||||
if (ratio < 2.0) {
|
||||
score -= 50;
|
||||
warnings.push('Very low contrast — code will likely fail to scan.');
|
||||
} else if (ratio < 3.0) {
|
||||
score -= 30;
|
||||
warnings.push('Low contrast between foreground and background.');
|
||||
} else if (ratio < 4.5) {
|
||||
score -= 10;
|
||||
warnings.push('Contrast is acceptable but could be improved.');
|
||||
}
|
||||
|
||||
// Logo size checks
|
||||
const hasLogo = Boolean(this._processedLogoUrl) && !this.removeLogo;
|
||||
if (hasLogo) {
|
||||
if (this.logoSize > 0.40) {
|
||||
score -= 25;
|
||||
warnings.push('Logo is too large and may block scanning.');
|
||||
} else if (this.logoSize > 0.30) {
|
||||
score -= 10;
|
||||
warnings.push('Large logo — use High (H) error correction.');
|
||||
}
|
||||
|
||||
if (this.logoSize > 0.25 && this.ecc === 'L') {
|
||||
score -= 15;
|
||||
warnings.push('Logo requires at least Medium (M) error correction.');
|
||||
}
|
||||
}
|
||||
|
||||
// Extreme customisation warning
|
||||
const hasGradient = this.gradientType !== 'none';
|
||||
const complexEyes = this.finderOuter === 'circle' || this.finderInner === 'dot';
|
||||
if (hasLogo && hasGradient && complexEyes && this.ecc === 'L') {
|
||||
score -= 10;
|
||||
warnings.push('Many effects combined — consider higher error correction.');
|
||||
}
|
||||
|
||||
score = Math.max(0, score);
|
||||
|
||||
let label, level;
|
||||
if (score >= 80) { label = 'Excellent'; level = 'excellent'; }
|
||||
else if (score >= 60) { label = 'Good'; level = 'good'; }
|
||||
else { label = 'Warning'; level = 'warning'; }
|
||||
|
||||
return { score, label, level, warnings };
|
||||
},
|
||||
_hexToLuminance(hex) {
|
||||
hex = (hex || '#000000').replace('#', '');
|
||||
if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
|
||||
if (hex.length !== 6) return 0;
|
||||
const r = parseInt(hex.slice(0, 2), 16) / 255;
|
||||
const g = parseInt(hex.slice(2, 4), 16) / 255;
|
||||
const b = parseInt(hex.slice(4, 6), 16) / 255;
|
||||
const lin = c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||||
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
|
||||
},
|
||||
_contrastRatio(hex1, hex2) {
|
||||
const l1 = this._hexToLuminance(hex1);
|
||||
const l2 = this._hexToLuminance(hex2);
|
||||
const light = Math.max(l1, l2);
|
||||
const dark = Math.min(l1, l2);
|
||||
return (light + 0.05) / (dark + 0.05);
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
if (window.Alpine) {
|
||||
registerQrCustomizer();
|
||||
} else {
|
||||
document.addEventListener('alpine:init', registerQrCustomizer);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endonce
|
||||
@@ -0,0 +1,188 @@
|
||||
@php
|
||||
$showDownloads = $showDownloads ?? true;
|
||||
@endphp
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
|
||||
{{-- QR display area with gradient background --}}
|
||||
<div class="relative flex items-center justify-center bg-gradient-to-br from-indigo-50/60 via-white to-violet-50/40 px-8 py-10">
|
||||
|
||||
{{-- Spinner overlay --}}
|
||||
<div x-show="previewLoading" x-cloak
|
||||
class="absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[2px]">
|
||||
<svg class="h-8 w-8 animate-spin text-indigo-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
|
||||
<path class="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{{-- Floating QR card --}}
|
||||
<div class="w-full max-w-xs transition-all duration-300"
|
||||
:class="previewLoading ? 'opacity-40 scale-[0.97]' : 'opacity-100 scale-100'">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-2xl"
|
||||
:style="frameStyle === 'thin'
|
||||
? 'box-shadow: 0 0 0 2px ' + frameColor + ', 0 25px 50px -12px rgb(0 0 0 / 0.25)'
|
||||
: 'box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.06)'">
|
||||
|
||||
{{-- Frame wrapper: adds padding + CTA for label/pill frames --}}
|
||||
<div :class="{
|
||||
'p-[8px]': frameStyle === 'thin',
|
||||
'p-[14px]': frameStyle === 'scan_me' || frameStyle === 'tap_to_scan',
|
||||
'p-4': frameStyle === 'none',
|
||||
}">
|
||||
{{-- QR code area — SVG renderer only, no static fallback --}}
|
||||
<div x-ref="qrPreview"
|
||||
class="aspect-square w-full [&>svg]:block [&>svg]:h-full [&>svg]:w-full"></div>
|
||||
|
||||
{{-- Scan me label --}}
|
||||
<div x-show="frameStyle === 'scan_me'" x-cloak
|
||||
:style="'border-top: 1px solid ' + frameColor + '40; color: ' + frameColor"
|
||||
class="pt-2.5 pb-0.5 text-center">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'SCAN ME').toUpperCase()"
|
||||
class="text-[11px] font-bold tracking-[0.18em]"></span>
|
||||
</div>
|
||||
|
||||
{{-- Tap to scan pill --}}
|
||||
<div x-show="frameStyle === 'tap_to_scan'" x-cloak
|
||||
class="mt-2.5 flex justify-center pb-0.5">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'TAP TO SCAN').toUpperCase()"
|
||||
:style="'background-color: ' + frameColor + '; color: ' + frameTextColor"
|
||||
class="rounded-full px-5 py-1.5 text-[10px] font-bold tracking-widest"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Scanability score --}}
|
||||
<div class="border-t border-slate-100 px-5 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Scan quality</span>
|
||||
<span class="text-xs font-bold tabular-nums"
|
||||
:class="{
|
||||
'text-emerald-600': scanability.level === 'excellent',
|
||||
'text-amber-500': scanability.level === 'good',
|
||||
'text-red-500': scanability.level === 'warning',
|
||||
}"
|
||||
x-text="scanability.score + '% — ' + scanability.label"></span>
|
||||
</div>
|
||||
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
|
||||
<div class="h-full rounded-full transition-all duration-300"
|
||||
:style="'width: ' + scanability.score + '%'"
|
||||
:class="{
|
||||
'bg-emerald-500': scanability.level === 'excellent',
|
||||
'bg-amber-400': scanability.level === 'good',
|
||||
'bg-red-500': scanability.level === 'warning',
|
||||
}"></div>
|
||||
</div>
|
||||
<template x-if="scanability.warnings.length > 0">
|
||||
<ul class="mt-2.5 space-y-1.5">
|
||||
<template x-for="w in scanability.warnings" :key="w">
|
||||
<li class="flex items-start gap-1.5">
|
||||
<svg class="mt-px h-3.5 w-3.5 shrink-0 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span class="text-[11px] leading-4 text-amber-700" x-text="w"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- Download + Share buttons --}}
|
||||
@if($showDownloads && isset($qrCode))
|
||||
@php
|
||||
$shareUrl = $qrCode->publicUrl();
|
||||
$shareEnc = urlencode($shareUrl);
|
||||
$shareText = urlencode($qrCode->label . ' — scan my QR code');
|
||||
@endphp
|
||||
<div class="border-t border-slate-100 bg-slate-50/50 px-6 py-5">
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Download & Share</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'png']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-indigo-300 hover:bg-indigo-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12M12 16.5V3"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-indigo-700">PNG</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'svg']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-violet-300 hover:bg-violet-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-violet-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-violet-700">SVG</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'pdf']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-rose-300 hover:bg-rose-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-rose-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-rose-700">PDF</span>
|
||||
</a>
|
||||
|
||||
{{-- Share button with popover --}}
|
||||
<div class="relative" x-data="{ open: false, copied: false }">
|
||||
<button type="button"
|
||||
@click="open = !open"
|
||||
:class="open ? 'border-sky-300 bg-sky-50' : 'border-slate-200 bg-white hover:border-sky-300 hover:bg-sky-50'"
|
||||
class="group flex w-full flex-col items-center gap-1.5 rounded-xl border py-3.5 text-center transition">
|
||||
<svg class="h-4 w-4 transition" :class="open ? 'text-sky-500' : 'text-slate-400 group-hover:text-sky-500'" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold transition" :class="open ? 'text-sky-700' : 'text-slate-600 group-hover:text-sky-700'">Share</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open" x-cloak
|
||||
@click.outside="open = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute bottom-full right-0 z-50 mb-2 w-52 origin-bottom-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl">
|
||||
|
||||
<a href="https://wa.me/?text={{ $shareText }}%20{{ $shareEnc }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-green-500" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
|
||||
WhatsApp
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?url={{ $shareEnc }}&text={{ $shareText }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-slate-800" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
X (Twitter)
|
||||
</a>
|
||||
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareEnc }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||
Facebook
|
||||
</a>
|
||||
|
||||
<div class="my-1 border-t border-slate-100"></div>
|
||||
|
||||
<button type="button"
|
||||
@click="navigator.clipboard.writeText('{{ $shareUrl }}').then(() => { copied = true; setTimeout(() => { copied = false; open = false }, 1500) })"
|
||||
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition hover:bg-slate-50"
|
||||
:class="copied ? 'text-emerald-600' : 'text-slate-700'">
|
||||
<svg x-show="!copied" class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>
|
||||
<svg x-show="copied" x-cloak class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||||
<span x-text="copied ? 'Copied!' : 'Copy link'">Copy link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,343 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">{{ $qrCode->label }}</x-slot>
|
||||
|
||||
@php
|
||||
$qrStyle = $qrCode->style();
|
||||
@endphp
|
||||
|
||||
<div class="mx-auto max-w-6xl space-y-6"
|
||||
x-data="qrCustomizer({
|
||||
previewUrl: @js(route('events.style-preview')),
|
||||
csrf: @js(csrf_token()),
|
||||
canonicalSyncUrl: @js(route('events.canonical-image', $qrCode)),
|
||||
shortCode: @js($qrCode->short_code),
|
||||
qrData: @js($qrCode->encodedPayload()),
|
||||
initialPreview: @js($previewDataUri),
|
||||
existingLogoPath: @js($qrStyle['logo_path'] ?? null),
|
||||
existingLogoUrl: @js($logoDataUri ?? null),
|
||||
hasExistingLogo: @js(! empty($qrStyle['logo_path'])),
|
||||
style: @js(\App\Support\Qr\QrStyleDefaults::merge($qrStyle)),
|
||||
})">
|
||||
|
||||
@foreach(['success', 'error'] as $flash)
|
||||
@if(session($flash))
|
||||
<div class="rounded-xl border px-4 py-3 text-sm {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
|
||||
{{ session($flash) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Mobile page header --}}
|
||||
<div class="flex items-center gap-3 py-1 lg:hidden">
|
||||
<a href="{{ route('events.index') }}"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white shadow-sm text-slate-500 hover:text-slate-900 transition">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900">{{ $qrCode->label }}</span>
|
||||
</div>
|
||||
|
||||
{{-- Desktop page header --}}
|
||||
<div class="hidden lg:block">
|
||||
<a href="{{ route('events.index') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
||||
QR Codes
|
||||
</a>
|
||||
<h1 class="mt-1.5 text-2xl font-bold text-slate-900">{{ $qrCode->label }}</h1>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $qrCode->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-500' }}">
|
||||
{{ $qrCode->is_active ? 'Active' : 'Paused' }}
|
||||
</span>
|
||||
<span class="text-xs text-slate-400">{{ $qrCode->typeLabel() }}</span>
|
||||
<code class="rounded-lg bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{{ $qrCode->publicUrl() }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Main 2-column layout --}}
|
||||
<form x-ref="updateForm" action="{{ route('events.update', $qrCode) }}" method="POST" enctype="multipart/form-data"
|
||||
class="grid grid-cols-1 gap-8 lg:grid-cols-[380px_1fr]">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
|
||||
{{-- Left: Sticky preview + downloads (desktop only) --}}
|
||||
<div class="hidden lg:block lg:sticky lg:top-6 lg:self-start">
|
||||
@include('qr-codes.partials.qr-preview-card', [
|
||||
'qrCode' => $qrCode,
|
||||
'previewDataUri' => $previewDataUri,
|
||||
'showDownloads' => true,
|
||||
])
|
||||
</div>
|
||||
|
||||
{{-- Right: Controls --}}
|
||||
<div class="space-y-5 pb-4 lg:pb-0">
|
||||
|
||||
{{-- Content first --}}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-5 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">Content</h2>
|
||||
<p class="mt-0.5 text-xs text-slate-400">
|
||||
@if($qrCode->type === \App\Models\QrCode::TYPE_WIFI)
|
||||
Auto-join is locked to the network set when this code was created. Editing updates your saved info but won't change the printed code.
|
||||
@else
|
||||
Edits are free. The printed QR stays the same.
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-4 p-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-600">Label</label>
|
||||
<input type="text" name="label" value="{{ $qrCode->label }}"
|
||||
class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
</div>
|
||||
@include('qr-codes.partials.type-fields-edit')
|
||||
<label class="flex items-center gap-2.5 text-sm text-slate-700">
|
||||
<input type="checkbox" name="is_active" value="1" @checked($qrCode->is_active)
|
||||
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
QR is active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Customizer --}}
|
||||
@include('qr-codes.partials.customization-fields', [
|
||||
'style' => $qrStyle,
|
||||
'moduleStyles' => $moduleStyles,
|
||||
'cornerOuterStyles' => $cornerOuterStyles,
|
||||
'cornerInnerStyles' => $cornerInnerStyles,
|
||||
'frameStyles' => $frameStyles,
|
||||
'showRemoveLogo' => ! empty($qrStyle['logo_path']),
|
||||
])
|
||||
|
||||
{{-- Desktop save button --}}
|
||||
<button type="submit"
|
||||
class="hidden lg:block w-full rounded-xl bg-slate-900 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-700 focus:ring-offset-2">
|
||||
Save changes
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{-- Mobile sticky action bar --}}
|
||||
<div x-show="!showPreviewModal"
|
||||
class="mobile-action-bar lg:hidden">
|
||||
<div class="mobile-action-bar__toolbar">
|
||||
<button type="button"
|
||||
@click="showPreviewModal = true"
|
||||
class="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
|
||||
</svg>
|
||||
Preview
|
||||
</button>
|
||||
<button type="button"
|
||||
@click="$refs.updateForm?.requestSubmit()"
|
||||
class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-slate-900 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-700">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-action-bar__inset-fill" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
{{-- Preview modal --}}
|
||||
<div x-show="showPreviewModal" x-cloak
|
||||
x-transition:enter="transition-opacity duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@keydown.escape.window="showPreviewModal = false"
|
||||
class="fixed inset-0 z-[60] flex flex-col bg-black/60 backdrop-blur-sm lg:hidden"
|
||||
style="padding-bottom: env(safe-area-inset-bottom, 0px)">
|
||||
<div class="flex items-center justify-between px-5 py-4">
|
||||
<span class="text-sm font-semibold text-white">Preview</span>
|
||||
<button type="button" @click="showPreviewModal = false"
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30 transition">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center p-8">
|
||||
<div class="w-full max-w-xs overflow-hidden rounded-2xl bg-white shadow-2xl"
|
||||
:style="frameStyle === 'thin'
|
||||
? 'box-shadow: 0 0 0 2px ' + frameColor + ', 0 25px 50px -12px rgb(0 0 0 / 0.25)'
|
||||
: 'box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.06)'">
|
||||
<div :class="{
|
||||
'p-[8px]': frameStyle === 'thin',
|
||||
'p-[14px]': frameStyle === 'scan_me' || frameStyle === 'tap_to_scan',
|
||||
'p-4': frameStyle === 'none',
|
||||
}">
|
||||
<div x-ref="qrPreviewModal"
|
||||
class="aspect-square w-full [&>svg]:block [&>svg]:h-full [&>svg]:w-full"></div>
|
||||
<div x-show="frameStyle === 'scan_me'" x-cloak
|
||||
:style="'border-top: 1px solid ' + frameColor + '40; color: ' + frameColor"
|
||||
class="pt-2.5 pb-0.5 text-center">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'SCAN ME').toUpperCase()"
|
||||
class="text-[11px] font-bold tracking-[0.18em]"></span>
|
||||
</div>
|
||||
<div x-show="frameStyle === 'tap_to_scan'" x-cloak class="mt-2.5 flex justify-center pb-0.5">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'TAP TO SCAN').toUpperCase()"
|
||||
:style="'background-color: ' + frameColor + '; color: ' + frameTextColor"
|
||||
class="rounded-full px-5 py-1.5 text-[10px] font-bold tracking-widest"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Downloads pinned to bottom of modal --}}
|
||||
@php
|
||||
$mobileShareUrl = $qrCode->publicUrl();
|
||||
$mobileShareText = urlencode($qrCode->label . ' — scan my QR code');
|
||||
$mobileShareEnc = urlencode($mobileShareUrl);
|
||||
@endphp
|
||||
<div class="grid grid-cols-4 gap-2 px-6 pb-6">
|
||||
<a href="{{ route('events.download', [$qrCode, 'png']) }}"
|
||||
class="flex flex-col items-center gap-1 rounded-xl border border-white/20 bg-white/10 py-3 text-center text-white transition hover:bg-white/20">
|
||||
<span class="text-xs font-semibold">PNG</span>
|
||||
</a>
|
||||
<a href="{{ route('events.download', [$qrCode, 'svg']) }}"
|
||||
class="flex flex-col items-center gap-1 rounded-xl border border-white/20 bg-white/10 py-3 text-center text-white transition hover:bg-white/20">
|
||||
<span class="text-xs font-semibold">SVG</span>
|
||||
</a>
|
||||
<a href="{{ route('events.download', [$qrCode, 'pdf']) }}"
|
||||
class="flex flex-col items-center gap-1 rounded-xl border border-white/20 bg-white/10 py-3 text-center text-white transition hover:bg-white/20">
|
||||
<span class="text-xs font-semibold">PDF</span>
|
||||
</a>
|
||||
<button type="button"
|
||||
@click="if(navigator.share){navigator.share({title:@js($qrCode->label),url:@js($mobileShareUrl)}).catch(()=>{})}else{window.open('https://wa.me/?text={{ $mobileShareText }}%20{{ $mobileShareEnc }}','_blank')}"
|
||||
class="flex flex-col items-center gap-1 rounded-xl border border-sky-400/40 bg-sky-500/20 py-3 text-center text-sky-200 transition hover:bg-sky-500/30">
|
||||
<span class="text-xs font-semibold">Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Orders (Book / Menu / Shop) --}}
|
||||
@if(isset($orders) && !is_null($orders))
|
||||
<div class="mt-10 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-base font-semibold text-slate-900">Orders</h2>
|
||||
<span class="text-xs text-slate-400">{{ $orders->count() }} paid</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ $orders->count() }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Total orders</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">GHS {{ number_format((float) $orders->sum('amount_ghs'), 2) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Revenue earned</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($orders->isEmpty())
|
||||
<div class="rounded-2xl border border-dashed border-slate-200 bg-white p-8 text-center">
|
||||
<p class="text-sm text-slate-400">No paid orders yet.</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-slate-100 bg-slate-50/70">
|
||||
<th class="px-5 py-3 text-left text-xs font-semibold text-slate-500">Customer</th>
|
||||
<th class="hidden px-5 py-3 text-left text-xs font-semibold text-slate-500 sm:table-cell">Items</th>
|
||||
<th class="px-5 py-3 text-right text-xs font-semibold text-slate-500">Amount</th>
|
||||
<th class="px-5 py-3 text-right text-xs font-semibold text-slate-500">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
@foreach($orders as $order)
|
||||
<tr class="transition-colors hover:bg-slate-50/50">
|
||||
<td class="px-5 py-3.5">
|
||||
<p class="text-sm font-medium text-slate-900">{{ $order->customer_name ?: '—' }}</p>
|
||||
<p class="text-xs text-slate-400">{{ $order->customer_email ?: '' }}</p>
|
||||
</td>
|
||||
<td class="hidden px-5 py-3.5 text-sm text-slate-600 sm:table-cell">
|
||||
{{ collect($order->items)->map(fn($i) => ($i['qty'] > 1 ? $i['qty'].'× ' : '').$i['name'])->join(', ') }}
|
||||
</td>
|
||||
<td class="px-5 py-3.5 text-right text-sm font-semibold text-slate-900 whitespace-nowrap">
|
||||
GHS {{ number_format((float) $order->amount_ghs, 2) }}
|
||||
</td>
|
||||
<td class="px-5 py-3.5 text-right text-xs text-slate-400 whitespace-nowrap">
|
||||
{{ $order->paid_at?->format('M j, Y') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Scan analytics --}}
|
||||
<div class="mt-10 space-y-5">
|
||||
<h2 class="text-base font-semibold text-slate-900">Analytics</h2>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($summary['total_scans']) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Total scans</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($summary['unique_scans']) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Unique scans</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($summary['scans_7d']) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Last 7 days</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($summary['scans_30d']) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Last 30 days</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm">
|
||||
<h3 class="text-sm font-semibold text-slate-900">Scans — last 30 days</h3>
|
||||
@php $maxDaily = max(1, $dailyScans->max('total')); @endphp
|
||||
<div class="mt-5 flex h-28 items-end gap-px">
|
||||
@foreach($dailyScans as $day)
|
||||
<div class="group relative flex flex-1 flex-col items-center justify-end"
|
||||
title="{{ $day->date }}: {{ $day->total }}">
|
||||
<div class="w-full rounded-t-sm bg-indigo-400/70 transition-colors group-hover:bg-indigo-600"
|
||||
style="height: {{ max(2, ($day->total / $maxDaily) * 100) }}%"></div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<h3 class="text-sm font-semibold text-slate-900">Devices</h3>
|
||||
<ul class="mt-4 space-y-2.5">
|
||||
@forelse($devices as $row)
|
||||
<li class="flex items-center justify-between text-sm">
|
||||
<span class="text-slate-600">{{ ucfirst($row['label']) }}</span>
|
||||
<span class="font-semibold text-slate-900">{{ $row['total'] }}</span>
|
||||
</li>
|
||||
@empty
|
||||
<li class="text-sm text-slate-400">No scans yet</li>
|
||||
@endforelse
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
|
||||
<h3 class="text-sm font-semibold text-slate-900">Browsers</h3>
|
||||
<ul class="mt-4 space-y-2.5">
|
||||
@forelse($browsers as $row)
|
||||
<li class="flex items-center justify-between text-sm">
|
||||
<span class="text-slate-600">{{ $row['label'] }}</span>
|
||||
<span class="font-semibold text-slate-900">{{ $row['total'] }}</span>
|
||||
</li>
|
||||
@empty
|
||||
<li class="text-sm text-slate-400">No scans yet</li>
|
||||
@endforelse
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-user-layout>
|
||||
Reference in New Issue
Block a user