121 lines
7.5 KiB
PHP
121 lines
7.5 KiB
PHP
<x-layouts.app :title="$document->exists ? $document->title : __('Create content document')">
|
|
<div class="mx-auto max-w-6xl space-y-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-sm text-zinc-500">
|
|
<a href="{{ route('content.index') }}" class="hover:text-zinc-900 dark:hover:text-white">Content documents</a>
|
|
<span>/</span>
|
|
<span>{{ $document->exists ? 'Edit' : 'Create' }}</span>
|
|
</div>
|
|
<h1 class="mt-1 text-2xl font-semibold">{{ $document->exists ? $document->title : 'Create content document' }}</h1>
|
|
<p class="mt-1 text-sm text-zinc-500">Structured, reusable content that can be placed into one or more page regions.</p>
|
|
</div>
|
|
@if($document->exists)
|
|
<div class="flex flex-wrap gap-2">
|
|
<form method="POST" action="{{ route('content.documents.duplicate', $document) }}">
|
|
@csrf
|
|
<flux:button type="submit" size="sm">Create independent copy</flux:button>
|
|
</form>
|
|
<form method="POST" action="{{ route('content.documents.destroy', $document) }}" onsubmit="return confirm('Delete this document? This is only allowed when it is not used by any page.')">
|
|
@csrf @method('DELETE')
|
|
<flux:button type="submit" size="sm" variant="danger">Delete</flux:button>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if(session('status'))
|
|
<div class="rounded-xl border border-green-300 bg-green-50 p-4 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">{{ session('status') }}</div>
|
|
@endif
|
|
@if($errors->any())
|
|
<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200">
|
|
<strong>The document could not be saved.</strong>
|
|
<ul class="mt-2 list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
|
|
</div>
|
|
@endif
|
|
|
|
@if($document->exists && $document->placements->count() > 1)
|
|
<div class="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
|
|
<strong>Shared document.</strong> This document is used in {{ $document->placements->count() }} page placements. Changes will appear everywhere it is published. Use “Create independent copy” for page-specific content.
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ $document->exists ? route('content.documents.update', $document) : route('content.documents.store') }}" class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
|
|
@csrf
|
|
@if($document->exists) @method('PUT') @endif
|
|
|
|
<div class="space-y-6">
|
|
<flux:card class="space-y-5">
|
|
<h2 class="text-lg font-semibold">Document</h2>
|
|
<flux:input name="title" label="Title" value="{{ old('title', $document->title) }}" required />
|
|
<flux:input name="slug" label="Slug" value="{{ old('slug', $document->slug) }}" description="Leave empty to generate it from the title." />
|
|
<flux:select name="content_type_id" label="Content type" required>
|
|
@foreach($types as $type)
|
|
<option value="{{ $type->id }}" @selected((int) old('content_type_id', $selectedType?->id) === $type->id)>{{ $type->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</flux:card>
|
|
|
|
<flux:card class="space-y-4">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Structured data</h2>
|
|
<p class="text-sm text-zinc-500">This phase retains JSON editing while adding validation, copies, placement controls and preview. Schema-generated field controls follow in the next checkpoint.</p>
|
|
</div>
|
|
<button type="button" id="format-json" class="rounded-lg border border-zinc-300 px-3 py-2 text-sm hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">Format JSON</button>
|
|
</div>
|
|
<textarea id="data-json" class="min-h-[32rem] w-full rounded-xl border border-zinc-300 bg-white p-4 font-mono text-sm text-zinc-900 shadow-sm focus:border-zinc-500 focus:outline-none dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" name="data_json" spellcheck="false">{{ old('data_json', json_encode($document->data ?: [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)) }}</textarea>
|
|
<p id="json-message" class="hidden text-sm"></p>
|
|
</flux:card>
|
|
</div>
|
|
|
|
<aside class="space-y-6">
|
|
<flux:card class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Publishing</h2>
|
|
<flux:select name="status" label="Status">
|
|
<option value="draft" @selected(old('status', $document->status ?: 'draft') === 'draft')>Draft</option>
|
|
<option value="published" @selected(old('status', $document->status) === 'published')>Published</option>
|
|
</flux:select>
|
|
<flux:input type="datetime-local" name="published_at" label="Publish at" value="{{ old('published_at', $document->published_at?->format('Y-m-d\TH:i')) }}" />
|
|
<flux:input type="datetime-local" name="expires_at" label="Expire at" value="{{ old('expires_at', $document->expires_at?->format('Y-m-d\TH:i')) }}" />
|
|
<flux:button type="submit" variant="primary" class="w-full">{{ $document->exists ? 'Save document' : 'Create document' }}</flux:button>
|
|
</flux:card>
|
|
|
|
@if($document->exists)
|
|
<flux:card>
|
|
<h2 class="text-lg font-semibold">Usage</h2>
|
|
<p class="mt-1 text-sm text-zinc-500">{{ $document->placements->count() }} placement{{ $document->placements->count() === 1 ? '' : 's' }}</p>
|
|
<div class="mt-4 space-y-2">
|
|
@forelse($document->placements as $placement)
|
|
<a class="block rounded-lg border border-zinc-200 p-3 text-sm hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800" href="{{ route('content.pages.edit', $placement->page_key) }}">
|
|
<strong>{{ ucfirst($placement->page_key ?: 'Page') }}</strong>
|
|
<span class="block text-xs uppercase text-zinc-500">{{ $placement->region }}</span>
|
|
</a>
|
|
@empty
|
|
<p class="text-sm text-zinc-500">Not currently assigned to a page.</p>
|
|
@endforelse
|
|
</div>
|
|
</flux:card>
|
|
@endif
|
|
</aside>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.getElementById('format-json')?.addEventListener('click', () => {
|
|
const field = document.getElementById('data-json');
|
|
const message = document.getElementById('json-message');
|
|
try {
|
|
field.value = JSON.stringify(JSON.parse(field.value), null, 2);
|
|
message.textContent = 'Valid JSON.';
|
|
message.className = 'text-sm text-green-700 dark:text-green-300';
|
|
} catch (error) {
|
|
message.textContent = error.message;
|
|
message.className = 'text-sm text-red-700 dark:text-red-300';
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-layouts.app>
|