yico/app/Filament/Resources/NewsResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\NewsResource\Pages;
use App\Models\News;
use App\Models\NewsCategory;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Tabs;
use Filament\Forms\Components\Tabs\Tab;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Radio;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Toggle;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Get;
use Filament\Forms\Form;
use Filament\Forms\Set;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
use Malzariey\FilamentLexicalEditor\Enums\ToolbarItem;
use Malzariey\FilamentLexicalEditor\FilamentLexicalEditor;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;
use RalphJSmit\Filament\SEO\SEO;
use Illuminate\Support\HtmlString;

class NewsResource extends Resource
{
    protected static ?string $model = News::class;
    protected static ?string $modelLabel = "文章管理";
    protected static ?string $navigationIcon = 'heroicon-o-newspaper';
    protected static ?string $navigationGroup = '上稿內容管理';
    protected static ?string $navigationLabel = "文章管理";

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                //
                Section::make("新增 文章")->schema([
                    Group::make()->schema([
                        Select::make("news_category_id")
                        ->options(NewsCategory::get()->pluck("name","id"))
                        ->label("文章分類")
                        ->columnSpan(1)
                        ->native(false)
                        ->afterStateHydrated(function ($component, $state) {
                            // ✅ 如果沒有值，設定為第一項
                            if (empty($state)) {
                                $firstCategoryId = NewsCategory::first()?->id;
                                if ($firstCategoryId) {
                                    $component->state($firstCategoryId);
                                }
                            }
                        })
                        ->required(),
                    ])->columnSpanFull()->columns(2),
                    Group::make()->schema([
                        DatePicker::make('post_date')
                        ->label("文章日期")
                        ->closeOnDateSelection()->required(),
                        DateTimePicker::make('start_date')
                        ->label("預約發布時間")
                        ->closeOnDateSelection(),
                        DateTimePicker::make('end_date')
                        ->label("預約下架時間")
                        ->closeOnDateSelection(),
                    ])->columnSpanFull()->columns(3),
                    FileUpload::make('news_img_pc')->label("列表圖(desktop)")
                    ->disk("public")
                    ->helperText('檔案大小限制為1MB以下')
                    // ->helperText('建議寬高限制為:1280*720px，檔案大小限制為1M以下')->maxSize('1024')
                    ->directory("news"),
                    FileUpload::make('news_img_mobile')->label("列表圖(mobile)")
                    ->disk("public")
                    ->helperText('檔案大小限制為1MB以下')
                    // ->helperText('建議寬高限制為:600*896px，檔案大小限制為1M以下')->maxSize('1024')
                    ->directory("news"),
                    Translate::make()->schema(fn (string $locale) => [
                        TextInput::make('title')
                        ->label("標題")
                        ->reactive()
                        ->helperText(function (callable $get) {

                            $activeLocale = $locale ?? 'zh_TW';

                            $value = $get('title');

                            $text = is_array($value)
                                ? (string) ($value[$activeLocale] ?? '')
                                : (string) ($value ?? '');

                            $length = mb_strlen($text);
                            $max = 24;

                            $divClass = 'text-limit-amount';

                            return new HtmlString("
                                <div class='{$divClass} text-sm'>
                                    目前字數：{$length} / {$max}
                                </div>
                            ");
                        })
                        ->columnSpan(1),
                        TextInput::make('written_by')
                        ->label("發佈者")->columnSpan(1),
                        

                        Textarea::make("description")
                        ->rows(5)
                        ->columnSpanFull()
                        ->label("短文")
                        
                        ->reactive()
                        ->helperText(function (callable $get) {

                            $activeLocale = $locale ?? 'zh_TW';

                            $value = $get('description');

                            $text = is_array($value)
                                ? (string) ($value[$activeLocale] ?? '')
                                : (string) ($value ?? '');

                            $length = mb_strlen($text);
                            $max = 84;

                            $divClass = 'text-limit-amount';

                            return new HtmlString("
                                <div class='{$divClass} text-sm'>
                                    目前字數：{$length} / {$max}
                                </div>
                            ");
                        })
                    ])->locales(["zh_TW", "en"])
                    ->id("main")
                    ->columnSpanFull()->columns(3),
                    
                    TextInput::make('order')->label("排序")->integer()->default(0),
                ])->columns(3),
                Section::make("SEO")->schema([
                    // SEO::make(),
                    Translate::make()->schema(fn (string $locale) => [
                        TextInput::make('meta_title')->label("SEO 標題")->columnSpan(1),
                        Textarea::make("meta_keyword")->rows(5)->columnSpanFull()->label("SEO 關鍵字"),
                        Textarea::make("meta_description")->rows(5)->columnSpanFull()->label("SEO 短文"),
                    ])
                    ->locales(["zh_TW", "en"])
                    ->id("seo"),
                    FileUpload::make('meta_img')->label("放大預覽圖")->disk("public")
                    ->helperText('檔案大小限制為1MB以下')
                    // ->helperText('建議寬高限制為:1200*630px，檔案大小限制為1M以下')->maxSize('1024')
                    ->directory("seo/news"),
                ])->columnSpanFull(),
                Section::make("文章內容")->schema([
                    Repeater::make("paragraphs")->schema([
                        TextInput::make('item_key')
                            ->default(fn () => Str::random())
                            ->hidden()
                            ->afterStateHydrated(function (TextInput $component, $state) {
                                if (empty($state)) {
                                    $component->state(Str::random());
                                }
                            }),
                        Radio::make("paragraph_type")->options([
                            1 => "圖片",
                            2 => "文字",
                            3 => "影音",
                        ])->label("")->default(1)->Live(),
                        Group::make()->schema([
                            Section::make('')->schema([
                                Repeater::make("multiple_images")->schema([
                                    TextInput::make('para_img_item_key')
                                        ->default(fn () => Str::random())
                                        ->hidden()
                                        ->afterStateHydrated(function (TextInput $component, $state) {
                                            if (empty($state)) {
                                                $component->state(Str::random());
                                            }
                                        }),
                                    Translate::make()->schema(fn (string $locale) => [
                                        TextInput::make('image_alt')->label("圖片註文"),
                                    ])->locales(["zh_TW", "en"])
                                    ->id(fn ($get) => "para_img_mul_" . $get('para_img_item_key')),
                                    FileUpload::make('image_url')->label("")->disk("public")
                                    ->helperText('檔案大小限制為1MB以下')
                                    // ->helperText('建議寬高限制為:1080*675px，檔案大小限制為1M以下')->maxSize('1024')
                                    ->directory("news/extraPhoto")
                                    ->maxFiles(10),
                                ])
                                ->relationship("photos")
                                ->label("")
                                ->orderColumn('order')
                            ])
                        ])->visible(fn (Get $get):bool => $get("paragraph_type") == 1),//
                        Group::make()->schema([
                            FilamentLexicalEditor::make('text_content_tw')
                                // ->label('繁體中文內容')
                                ->label(new \Illuminate\Support\HtmlString('繁體中文內容 <p href="#" style="cursor:pointer;color:blue;" onclick="var img = this.closest(\'div\').querySelector(\'img\');img.style.display = (img.style.display === \'none\') ? \'block\' : \'none\';"> 工具列說明</p><img src="' . asset('images/tool-bar.png') . '" style="display:none;">'))
                                ->id(fn ($get) => "text_content_tw_" . $get('item_key') . "_" . uniqid())
                                ->enabledToolbars([
                                    ToolbarItem::UNDO, ToolbarItem::REDO, ToolbarItem::NORMAL,
                                    ToolbarItem::H2, ToolbarItem::H3, ToolbarItem::H4, ToolbarItem::H5,
                                    ToolbarItem::BULLET, ToolbarItem::NUMBERED, ToolbarItem::FONT_SIZE,
                                    ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE,
                                    ToolbarItem::LINK, ToolbarItem::TEXT_COLOR, ToolbarItem::BACKGROUND_COLOR,
                                    ToolbarItem::SUBSCRIPT, ToolbarItem::LOWERCASE, ToolbarItem::DIVIDER,
                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR, ToolbarItem::FONT_FAMILY
                                ])
                                ->live(onBlur: true)
                                ->columnSpanFull(),
                            FilamentLexicalEditor::make('text_content_en')
                                ->label('English Content')
                                ->id(fn ($get) => "text_content_en_" . $get('item_key') . "_" . uniqid())
                                ->enabledToolbars([
                                    ToolbarItem::UNDO, ToolbarItem::REDO, ToolbarItem::NORMAL,
                                    ToolbarItem::H2, ToolbarItem::H3, ToolbarItem::H4, ToolbarItem::H5,
                                    ToolbarItem::BULLET, ToolbarItem::NUMBERED, ToolbarItem::FONT_SIZE,
                                    ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE,
                                    ToolbarItem::LINK, ToolbarItem::TEXT_COLOR, ToolbarItem::BACKGROUND_COLOR,
                                    ToolbarItem::SUBSCRIPT, ToolbarItem::LOWERCASE, ToolbarItem::DIVIDER,
                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR, ToolbarItem::FONT_FAMILY
                                ])
                                ->columnSpanFull(),
                        ])->visible(fn (Get $get):bool => $get("paragraph_type") == 2),
                        Group::make()->schema([
                            Section::make("")->schema([
                                FileUpload::make('video_img')->label("影片底圖")
                                ->disk("public")
                                ->helperText('檔案大小限制為1MB以下')
                                ->directory("news/paragraph/video"),
                                // ->helperText('建議寬高限制為:2000*720px，出血寬度720px，主要圖像範圍為:1280*720px，檔案大小限制為1M以下')->maxSize('1024'),
                                Translate::make()->schema(fn (string $locale) => [
                                    TextInput::make('video_img_alt')->label("圖片註文")->columnSpan(1),
                                ])->locales(["zh_TW", "en"])
                                ->id(fn ($get) => "para_video_img_alt_" . $get('item_key')),
                                Radio::make("video_type")->label("")->options([
                                    1 => "網址",
                                    2 => "檔案"
                                ])->columnSpanFull()->default(1)->Live(),
                                Group::make()->schema([
                                    Translate::make()->schema(fn (string $locale) => [
                                        TextInput::make('link')->label("網址")->nullable()->columnSpan(1)
                                    ])->locales(["zh_TW", "en"])
                                    ->id(fn ($get) => "para_link_" . $get('item_key')),
                                ])->visible(fn (Get $get):bool => $get("video_type") == 1)->columnSpanFull(),
                                Group::make()->schema([
                                    FileUpload::make('video_url')->label("")->disk("public")->directory("news/paragraph/video")
                                    ->helperText('檔案大小限制為100MB以下')
                                    // ->helperText('建議影片寬高限制為:1920*1080px，出血寬度720px，大小限制為:100M以下')
                                    // ->maxSize(102400)
                                    ->nullable(),
                                ])->visible(fn (Get $get):bool => $get("video_type") == 2)->columnSpanFull(),
                            ]),
                        ])->visible(fn (Get $get):bool => $get("paragraph_type") == 3),
                    ])
                    ->relationship("paragraphs")
                    ->label("段落")
                    ->collapsible()
                    ->reorderableWithButtons()
                    ->orderColumn('order')
                    ->cloneable()
                    ->mutateRelationshipDataBeforeFillUsing(function (array $data): array {

                        if ($data['paragraph_type'] == 2 && !empty($data['text_content'])) {
                            $content = is_string($data['text_content'])
                                ? json_decode($data['text_content'], true)
                                : $data['text_content'];

                            if (is_array($content)) {
                                $data['text_content_tw'] = $content['zh_TW'] ?? '';
                                $data['text_content_en'] = $content['en'] ?? '';
                            }
                        }

                        return $data;
                    })
                    ->mutateRelationshipDataBeforeSaveUsing(function (array $data): array{
                        if ($data['paragraph_type'] == 2) {
                            $data["text_content"] = ["zh_TW" => $data["text_content_tw"], "en" => $data["text_content_en"]];
                            // 移除臨時的分離欄位，只保留合併的 JSON 欄位
                            unset($data['text_content_tw']);
                            unset($data['text_content_en']);
                        }
                        return $data;
                    })
                ]),
            ]);
    }

    public static function table(Table $table): Table
    {
        $url = env('APP_URL')=="https://webdev.yico.tw:8088/" ? "https://demo.blockstudio.tw/yichiu/zh/news/" : "https://www.yico.tw/" ;

        return $table
            ->columns([
                //
                TextColumn::make("newsCategory.name")->label("分類")->alignCenter(),
                TextColumn::make("title")->label("標題")->alignCenter(),
                TextColumn::make("written_by")->label("發佈者")->alignCenter(),
                TextColumn::make("post_date")->label("文章時間")->dateTime('Y/m/d')->alignCenter(),
                ImageColumn::make("news_img_pc_url")->label("列表圖")->alignCenter(),
                TextColumn::make("list_audit_state")->label("狀態")->badge()
                ->color(fn (string $state): string => match ($state) {
                    '暫存' => 'warning',
                    '已發佈' => 'success',
                }),
                IconColumn::make("on_top")->label("置頂")
                ->color(fn (string $state): string => match ($state) {
                    1 => 'success',
                    default => ''
                })
                ->icon(fn (string $state): string => match ($state) {
                    1 => 'heroicon-o-check-circle',
                    default => ''
                })
                ->action(function ($record): void {
                    $record->on_top = !$record->on_top;
                    $record->save();
                }),
                TextColumn::make("start_date")->label("預計發佈時間")->dateTime('Y/m/d H:i:s')->alignCenter(),
                TextColumn::make("end_date")->label("預計下架時間")->dateTime('Y/m/d H:i:s')->alignCenter(),
                TextColumn::make("created_at")->label("建立時間")->dateTime('Y/m/d H:i:s')->alignCenter(),
                TextColumn::make("updated_at")->label("更新時間")->dateTime()->alignCenter(),
            ])
            ->filters([
                SelectFilter::make('news_category_id')->label("分類")
                ->options(NewsCategory::orderBy("order")->pluck("name", "id"))
                ->attribute('news_category_id'),
                SelectFilter::make('post_date')->label("年份")
                ->options(News::select(DB::raw("DATE_FORMAT(post_date, '%Y') as year"))->whereNotNull("post_date")->distinct()->pluck("year","year")->toArray())
                ->query(
                    fn (array $data, Builder $query): Builder =>
                    $query->when(
                        $data['value'],
                        fn (Builder $query, $value): Builder => $query->where('post_date', 'like', $data['value']. "%")
                    )
                ),
                SelectFilter::make('visible')->label("狀態")
                ->options([
                    0 => "暫存",
                    1 => "已發佈",
                ])
                ->query(
                    fn (array $data, Builder $query): Builder =>
                    $query->when(
                        $data['value'],
                        fn (Builder $query, $value): Builder => $query->where('visible', $data['value'])
                    )
                ),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
                \Filament\Tables\Actions\Action::make("audit")
                ->label(fn ($record) => match ($record->visible) {
                    0 => '發佈',
                    1 => '下架',
                })
                ->color(fn ($record) => match ($record->visible) {
                    0 => 'warning',
                    1 => 'gray',
                })
                ->icon(fn ($record) => match ($record->visible) {
                    0 => 'heroicon-m-chevron-double-up',
                    1 => 'heroicon-m-chevron-double-down',
                })
                ->action(function ($record): void {
                    $record->visible = !$record->visible;
                    $record->save();
                })
                ->outlined()
                ->requiresConfirmation(),
                Tables\Actions\Action::make('preview')
                ->label('前台預覽')
                ->icon('heroicon-m-arrow-top-right-on-square')
                ->color('info')
                ->url(fn ($record) => $url.$record->id."?preview=true")
                ->openUrlInNewTab()
                ->outlined(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->defaultSort('order', 'desc')
            ->defaultSort('created_at', 'desc');
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListNews::route('/'),
            'create' => Pages\CreateNews::route('/create'),
            'edit' => Pages\EditNews::route('/{record}/edit'),
            'view' => Pages\ViewNews::route('/{record}/view'),
        ];
    }
}