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

<x-user-layout>
    <x-slot name="title">{{ $qrCode->label }}</x-slot>
    @php
        $content = $qrCode->content();
        $publicUrl = route('qr.public.resolve', ['shortCode' => $qrCode->short_code]);
        $typeLabel = \App\Support\Qr\QrTypeCatalog::label($qrCode->type);
    @endphp

    <div class="mx-auto max-w-5xl space-y-6" x-data="{ type: @js($qrCode->type) }">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <a href="{{ route('merchant.storefronts.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>
                    All storefronts
                </a>
                <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
                <p class="mt-1 inline-flex items-center gap-2 text-sm text-slate-500">
                    <span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-semibold text-indigo-700">{{ $typeLabel }}</span>
                    @if($qrCode->is_active)
                        <span class="text-emerald-600">● Live</span>
                    @else
                        <span class="text-slate-400">● Inactive</span>
                    @endif
                </p>
            </div>
            <a href="{{ $publicUrl }}" target="_blank" rel="noopener"
               class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">
                View live
                <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="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            </a>
        </div>

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

        <div class="grid gap-6 lg:grid-cols-[320px_1fr]">
            {{-- QR + sharing --}}
            <div class="space-y-4 lg:sticky lg:top-6 lg:self-start">
                <div class="rounded-2xl border border-slate-200 bg-white p-5 text-center">
                    @if($previewDataUri)
                        <img src="{{ $previewDataUri }}" alt="QR code" class="mx-auto h-44 w-44">
                    @endif
                    <p class="mt-3 break-all text-xs text-slate-400">{{ $publicUrl }}</p>
                    <div class="mt-4 flex justify-center gap-2">
                        @foreach(['png' => 'PNG', 'svg' => 'SVG', 'pdf' => 'PDF'] as $fmt => $flabel)
                            <a href="{{ route('merchant.storefronts.download', [$qrCode, $fmt]) }}"
                               class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50">{{ $flabel }}</a>
                        @endforeach
                    </div>
                </div>

                <form method="post" action="{{ route('merchant.storefronts.destroy', $qrCode) }}"
                      onsubmit="return confirm('Delete this storefront? This cannot be undone.');">
                    @csrf @method('DELETE')
                    <button type="submit" class="w-full rounded-xl border border-red-200 bg-white px-3.5 py-2 text-sm font-semibold text-red-600 hover:bg-red-50">Delete storefront</button>
                </form>
            </div>

            {{-- Edit form --}}
            <form method="post" action="{{ route('merchant.storefronts.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
                @csrf @method('PATCH')

                <div>
                    <label class="block text-sm font-medium text-slate-700">Dashboard label</label>
                    <input type="text" name="label" value="{{ old('label', $qrCode->label) }}" required maxlength="120"
                           class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </div>

                <label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
                    <div>
                        <p class="text-sm font-semibold text-slate-900">Storefront live</p>
                        <p class="mt-0.5 text-xs text-slate-500">Turn off to take the public page offline without deleting it.</p>
                    </div>
                    <div class="relative ml-4 shrink-0">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" class="sr-only peer" @checked(old('is_active', $qrCode->is_active))>
                        <div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
                        <div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
                    </div>
                </label>

                @include('merchant.storefronts.partials.editor-fields', ['content' => $content])

                <button type="submit" class="btn-primary w-full">Save changes</button>
            </form>
        </div>
    </div>
</x-user-layout>