ladill-merchant/resources/views/merchant/storefronts/create.blade.php

<x-user-layout>
    <x-slot name="title">Create Giving Page</x-slot>
    @php
        $giveOldTypes = old('collection_types', ['Offering','Tithe','Order','Harvest']);
        $giveOldOrg = old('org_type', 'shop');
    @endphp
    <div class="mx-auto max-w-2xl space-y-6" x-data="{
        orgType: @js($giveOldOrg),
        orgMeta: {
            church:  { namePh: 'Church name *', descriptorLabel: 'Denomination', descriptorPh: 'e.g. Presbyterian', timesLabel: 'Service times', timesPh: 'e.g. Sundays 9am', presets: ['Offering','Tithe','Order','Harvest'] },
            school:  { namePh: 'School name *', descriptorLabel: 'Motto', descriptorPh: 'School motto', timesLabel: 'School hours', timesPh: 'Mon–Fri 7:30am', presets: ['School Fees','PTA Levy','Development Fund'] },
            mosque:  { namePh: 'Mosque name *', descriptorLabel: 'Community', descriptorPh: 'Jama\'ah', timesLabel: 'Prayer times', timesPh: 'Jumu\'ah 1pm', presets: ['Sadaqah','Zakat','Waqf'] },
            ngo:     { namePh: 'Organisation name *', descriptorLabel: 'Mission', descriptorPh: 'Mission statement', timesLabel: 'Office hours', timesPh: 'Mon–Fri 9am', presets: ['General Order','Project Fund','Emergency Relief'] },
            club:    { namePh: 'Club name *', descriptorLabel: 'Tagline', descriptorPh: 'Club tagline', timesLabel: 'Meeting times', timesPh: 'Fridays 5pm', presets: ['Membership Dues','Event Fund','Order'] },
        },
        get cfg() { return this.orgMeta[this.orgType]; },
        types: @js($giveOldTypes),
        addInput: '',
        setOrg(t) { this.orgType = t; this.types = [...this.orgMeta[t].presets]; },
        addType() { const v = this.addInput.trim(); if (v && !this.types.includes(v)) this.types.push(v); this.addInput = ''; },
        removeType(i) { this.types.splice(i, 1); }
    }">
        <div>
            <a href="{{ route('merchant.storefronts.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All storefronts</a>
            <h1 class="mt-2 text-xl font-semibold text-slate-900">Create storefront</h1>
            <p class="mt-1 text-sm text-slate-500">Set up your organisation, causes, and online merchant QR.</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
        <form method="post" action="{{ route('merchant.storefronts.store') }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf
            <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. Main church merchant"
                       class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            <div>
                <p class="mb-2 text-xs font-semibold text-slate-600">Organisation type</p>
                <div class="grid grid-cols-3 gap-2 sm:grid-cols-5">
                    @foreach(['shop'=>'Church','school'=>'School','mosque'=>'Mosque','ngo'=>'NGO','club'=>'Club'] as $key => $label)
                        <button type="button" @click="setOrg('{{ $key }}')"
                                :class="orgType === '{{ $key }}' ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-500'"
                                class="rounded-xl border-2 px-2 py-2 text-[11px] font-semibold">{{ $label }}</button>
                    @endforeach
                </div>
                <input type="hidden" name="org_type" :value="orgType">
            </div>
            <input type="text" name="name" value="{{ old('name') }}" required :placeholder="cfg.namePh"
                   class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
            <div>
                <label class="block text-xs font-medium text-slate-500" x-text="cfg.descriptorLabel">Descriptor</label>
                <input type="text" name="denomination" value="{{ old('denomination') }}" :placeholder="cfg.descriptorPh"
                       class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            <textarea name="description" rows="2" placeholder="Short description"
                      class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
            <div class="grid gap-3 sm:grid-cols-2">
                <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Phone" class="rounded-xl border-slate-200 text-sm">
                <input type="email" name="email" value="{{ old('email') }}" placeholder="Email" class="rounded-xl border-slate-200 text-sm">
            </div>
            <input type="text" name="service_times" value="{{ old('service_times') }}" :placeholder="cfg.timesPh"
                   class="w-full rounded-xl border-slate-200 text-sm">
            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="block text-xs font-medium text-slate-500">Logo</label>
                    <input type="file" name="church_logo" accept="image/*" class="mt-1 block w-full text-xs">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-500">Cover image</label>
                    <input type="file" name="church_cover" accept="image/*" class="mt-1 block w-full text-xs">
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Brand color</label>
                <input type="color" name="brand_color" value="{{ old('brand_color', '#1a3a5c') }}" class="mt-1 h-10 w-full rounded-xl border border-slate-200">
            </div>
            <div>
                <p class="mb-2 text-xs font-semibold text-slate-600">Giving categories</p>
                <template x-for="t in types" :key="t">
                    <input type="hidden" name="collection_types[]" :value="t">
                </template>
                <div class="flex flex-wrap gap-2 mb-2">
                    <template x-for="(t, i) in types" :key="t">
                        <span class="inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold">
                            <span x-text="t"></span>
                            <button type="button" @click="removeType(i)" class="text-slate-400 hover:text-red-500">×</button>
                        </span>
                    </template>
                </div>
                <div class="flex gap-2">
                    <input type="text" x-model="addInput" @keydown.enter.prevent="addType()" placeholder="Add category…" class="flex-1 rounded-xl border-slate-200 text-sm">
                    <button type="button" @click="addType()" class="rounded-xl bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-600">Add</button>
                </div>
            </div>
            <button type="submit" class="btn-primary w-full">Create storefront</button>
        </form>
    </div>
</x-user-layout>