isaaccladandCursor
dac095ef92
Deploy Ladill Events / deploy (push) Successful in 31s
Replace the QR-first create and edit experience with simple programme forms that auto-generate Ladill Link codes like events do. Co-authored-by: Cursor <cursoragent@cursor.com>
76 lines
4.5 KiB
PHP
76 lines
4.5 KiB
PHP
<x-user-layout>
|
|
<x-slot name="title">New programme</x-slot>
|
|
|
|
<div class="mx-auto max-w-2xl space-y-6" x-data="{ type: 'itinerary' }">
|
|
<div>
|
|
<a href="{{ route('programmes.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>
|
|
Programmes
|
|
</a>
|
|
<h1 class="mt-2 text-xl font-semibold text-slate-900">New programme</h1>
|
|
<p class="mt-1 text-sm text-slate-500">Build a schedule outline you can attach to events and share with attendees. A Ladill Link QR code is generated automatically.</p>
|
|
</div>
|
|
|
|
@if(session('error'))
|
|
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
|
|
@endif
|
|
@if($errors->any())
|
|
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
<ul class="list-inside list-disc space-y-0.5">
|
|
@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="post" action="{{ route('events.store') }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
|
|
@csrf
|
|
<input type="hidden" name="type" value="itinerary">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Dashboard label</label>
|
|
<input type="text" name="label" value="{{ old('label') }}" required maxlength="120"
|
|
placeholder="e.g. Annual conference programme"
|
|
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<p class="mt-1 text-xs text-slate-400">Private name to find this programme in your dashboard.</p>
|
|
</div>
|
|
|
|
<div x-data="{
|
|
slug: @js(old('custom_short_code', '')),
|
|
status: '',
|
|
timer: null,
|
|
checkUrl: @js(route('events.check-slug')),
|
|
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-sm font-medium text-slate-700">Custom link <span class="font-normal text-slate-400">(optional)</span></label>
|
|
<div class="mt-1 flex items-stretch rounded-xl border focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500"
|
|
: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">{{ \App\Support\LadillLink::baseUrl() }}/</span>
|
|
<input type="text" name="custom_short_code" x-model="slug" @input="check()" maxlength="20" autocomplete="off"
|
|
class="min-w-0 flex-1 rounded-r-xl bg-white px-3 py-2.5 text-sm focus:outline-none" placeholder="summit-programme">
|
|
</div>
|
|
<p class="mt-1 text-xs text-slate-400">Leave blank to auto-generate your Ladill Link.</p>
|
|
</div>
|
|
|
|
@include('qr-codes.partials.type-fields-create')
|
|
|
|
<p class="rounded-xl bg-slate-50 px-3.5 py-2.5 text-xs leading-5 text-slate-500">
|
|
GHS {{ number_format($pricePerQr, 2) }} will be charged from your wallet when you create this programme.
|
|
</p>
|
|
|
|
<button type="submit" class="btn-primary w-full">Create programme</button>
|
|
</form>
|
|
</div>
|
|
</x-user-layout>
|