usher-manage-stack/resources/views/admin/articles/create.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                建立文章
            </h2>
            <a href="{{ route('admin.articles.index') }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                ← 返回列表
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <form method="POST" action="{{ route('admin.articles.store') }}" enctype="multipart/form-data" class="space-y-6 p-6">
                    @csrf

                    <!-- Title -->
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標題 <span class="text-red-500">*</span></label>
                        <input type="text" name="title" id="title" value="{{ old('title') }}" required
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="輸入文章標題">
                        @error('title')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">網址代碼（選填，自動產生）</label>
                        <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="my-article-slug">
                        @error('slug')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Content Type -->
                    <div>
                        <label for="content_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">文章類型 <span class="text-red-500">*</span></label>
                        <select name="content_type" id="content_type" required
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
                            <option value="blog" {{ old('content_type') === 'blog' ? 'selected' : '' }}>部落格</option>
                            <option value="notice" {{ old('content_type') === 'notice' ? 'selected' : '' }}>公告</option>
                            <option value="document" {{ old('content_type') === 'document' ? 'selected' : '' }}>文件</option>
                            <option value="related_news" {{ old('content_type') === 'related_news' ? 'selected' : '' }}>相關新聞</option>
                        </select>
                        @error('content_type')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Summary -->
                    <div>
                        <label for="summary" class="block text-sm font-medium text-gray-700 dark:text-gray-300">摘要（選填）</label>
                        <textarea name="summary" id="summary" rows="3"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="文章摘要，顯示於列表頁">{{ old('summary') }}</textarea>
                        @error('summary')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Content (Markdown Editor) -->
                    <div>
                        <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">內容 <span class="text-red-500">*</span></label>
                        <textarea name="content" id="content" rows="15" required>{{ old('content') }}</textarea>
                        @error('content')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Featured Image -->
                    <div>
                        <label for="featured_image" class="block text-sm font-medium text-gray-700 dark:text-gray-300">精選圖片（選填）</label>
                        <input type="file" name="featured_image" id="featured_image" accept="image/*"
                            class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">最大 5MB，支援 JPG, PNG, GIF, WebP</p>
                        @error('featured_image')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Featured Image Alt -->
                    <div>
                        <label for="featured_image_alt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">圖片替代文字（選填）</label>
                        <input type="text" name="featured_image_alt" id="featured_image_alt" value="{{ old('featured_image_alt') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="描述圖片內容（無障礙用途）">
                    </div>

                    <!-- Categories -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">分類（選填）</label>
                        <div class="mt-2 space-y-2">
                            @foreach($categories as $category)
                                <label class="inline-flex items-center mr-4">
                                    <input type="checkbox" name="categories[]" value="{{ $category->id }}"
                                        {{ in_array($category->id, old('categories', [])) ? 'checked' : '' }}
                                        class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ $category->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Tags -->
                    <div>
                        <label for="tags_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標籤（選填，逗號分隔）</label>
                        <input type="text" name="tags_input" id="tags_input" value="{{ old('tags_input') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="標籤1, 標籤2, 標籤3">
                    </div>

                    <!-- Author Name -->
                    <div>
                        <label for="author_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">作者名稱（選填）</label>
                        <input type="text" name="author_name" id="author_name" value="{{ old('author_name') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="顯示於文章的作者名稱">
                    </div>

                    <!-- Access Level -->
                    <div>
                        <label for="access_level" class="block text-sm font-medium text-gray-700 dark:text-gray-300">存取權限 <span class="text-red-500">*</span></label>
                        <select name="access_level" id="access_level" required
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
                            <option value="public" {{ old('access_level', 'public') === 'public' ? 'selected' : '' }}>公開（所有人可見）</option>
                            <option value="members" {{ old('access_level') === 'members' ? 'selected' : '' }}>會員（需付費會籍）</option>
                            <option value="board" {{ old('access_level') === 'board' ? 'selected' : '' }}>理事會（僅理事可見）</option>
                            <option value="admin" {{ old('access_level') === 'admin' ? 'selected' : '' }}>管理員（僅管理員可見）</option>
                        </select>
                        @error('access_level')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Published At -->
                    <div>
                        <label for="published_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">發布時間（選填，留空則立即發布）</label>
                        <input type="datetime-local" name="published_at" id="published_at" value="{{ old('published_at') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">設定未來時間可排程發布</p>
                        @error('published_at')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Expires At -->
                    <div>
                        <label for="expires_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">過期時間（選填）</label>
                        <input type="datetime-local" name="expires_at" id="expires_at" value="{{ old('expires_at') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
                        @error('expires_at')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Meta Description -->
                    <div>
                        <label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SEO 描述（選填）</label>
                        <textarea name="meta_description" id="meta_description" rows="2"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
                            placeholder="搜尋引擎描述">{{ old('meta_description') }}</textarea>
                    </div>

                    <!-- Is Pinned -->
                    <div class="flex items-center">
                        <input type="checkbox" name="is_pinned" id="is_pinned" value="1" {{ old('is_pinned') ? 'checked' : '' }}
                            class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
                        <label for="is_pinned" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">置頂此文章</label>
                    </div>

                    <!-- Display Order -->
                    <div id="display_order_container" style="display: none;">
                        <label for="display_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">顯示順序</label>
                        <input type="number" name="display_order" id="display_order" value="{{ old('display_order', 0) }}" min="0"
                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">數字越小越優先顯示</p>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
                        <a href="{{ route('admin.articles.index') }}" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                            取消
                        </a>
                        <button type="submit" name="save_action" value="draft" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                            儲存為草稿
                        </button>
                        <button type="submit" name="save_action" value="publish" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
                            發布文章
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    @endpush

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // EasyMDE Markdown Editor
            const easyMDE = new EasyMDE({
                element: document.getElementById('content'),
                spellChecker: false,
                autosave: {
                    enabled: true,
                    uniqueId: 'article-create',
                    delay: 10000,
                },
                placeholder: '使用 Markdown 撰寫文章內容...',
                toolbar: [
                    'bold', 'italic', 'heading', '|',
                    'quote', 'unordered-list', 'ordered-list', '|',
                    'link', 'image', 'table', '|',
                    'preview', 'side-by-side', 'fullscreen', '|',
                    'guide'
                ],
            });

            // Pin toggle
            const isPinnedCheckbox = document.getElementById('is_pinned');
            const displayOrderContainer = document.getElementById('display_order_container');

            function toggleDisplayOrder() {
                displayOrderContainer.style.display = isPinnedCheckbox.checked ? 'block' : 'none';
            }

            isPinnedCheckbox.addEventListener('change', toggleDisplayOrder);
            toggleDisplayOrder();
        });
    </script>
    @endpush
</x-app-layout>