@extends('layouts.admin.app')

@section('title', __('pages/admin/blog.title'))

@section('content')
<div
    class="animate-fade-in"
    x-data="blogManagementPage({ 
        indexUrl: @js(route('admin.blog.index')), 
        hasRecords: @js($totalBlogs > 0),
        totalBlogs: @js($totalBlogs ?? 0),
        isArchivedPage: false,
        messages: @js(__('pages/admin/blog.messages')),
        lang: {
            dialogs: {
                delete: {
                    title: @js(__('pages/admin/blog.dialogs.delete.title')),
                    description: @js(__('pages/admin/blog.dialogs.delete.description')),
                },
            },
            buttons: {
                delete: @js(__('buttons.delete')),
            }
        }
    })">

    {{-- Breadcrumb + Page Header --}}
    <div class="px-4 py-4 flex items-center justify-between">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/blog.title')],
        ]" />
    </div>

    <div class="px-6 pb-6 space-y-4">

        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2" x-show="hasRecords" x-cloak>
            <div class="flex items-center gap-2 min-w-0">

                {{-- Search --}}

                <div class="w-52 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        x-model="filters.search"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        placeholder="{{ __('pages/common.search', ['resource' => __('pages/admin/blog.heading.plural')]) }}" />
                </div>

                {{-- Filter Dropdown --}}
                <x-common.table-filter>
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/common.status.label') }}</x-forms.label>
                        <x-forms.select data-cb-filter="status">
                            <option value="">{{ __('pages/common.status.all') }}</option>
                            <option value="publish" {{ request()->get('status') == 'publish' ? 'selected' : '' }}>{{ __('buttons.publish') }}</option>
                            <option value="unpublish" {{ request()->get('status') == 'unpublish' ? 'selected' : '' }}>{{ __('buttons.unpublish') }}</option>
                            <option value="draft" {{ request()->get('status') == 'draft' ? 'selected' : '' }}>{{ __('buttons.draft') }}</option>
                        </x-forms.select>
                    </div>
                </x-common.table-filter>

                <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    Reset
                </x-buttons.secondary>

            </div>

            {{-- Right: bulk actions + add new --}}
            <div class="flex items-center gap-2 flex-shrink-0">
                {{-- Bulk Delete --}}
                <div
                    class="flex items-center gap-2 shrink-0"
                    x-show="selectedIds.length > 0"
                    x-cloak
                    x-transition>
                    <span class="text-sm font-medium text-surface-600 dark:text-surface-400" x-text="selectedIds.length + ' selected'"></span>

                    <x-buttons.danger
                        type="button"
                        @click="$store.confirmDialog.show({
                                title: '{{ __('pages/common.bulk_delete_confirm.title', ['resource' => __('pages/admin/blog.heading.plural')]) }}',
                                description: `{{ __('pages/common.bulk_delete_confirm.description', ['resource' => __('pages/admin/blog.heading.plural'), 'selected' => ':selected']) }}`.replace(':selected', selectedIds.length),
                                confirmText: '{{ __('pages/common.bulk_delete_confirm.button') }}',
                                confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-red-600 hover:bg-red-700 text-white',
                                heroicon: 'o-trash',
                                iconWrapperClass: 'bg-red-100 dark:bg-amber-950 flex h-14 items-center justify-center rounded-full shrink-0 w-14',
                                onConfirm: () => bulkDelete('{{ route('admin.blog.bulk-delete') }}')
                            })">
                        <x-heroicon-o-trash class="w-3.5 h-3.5" />
                        {{ __('buttons.delete') }}
                    </x-buttons.danger>
                </div>

                <a href="{{ route('admin.blog.create') }}">
                    <x-buttons.primary type="button">
                        <x-heroicon-o-plus class="w-4 h-4" />
                        {{ __('pages/common.add_new', ['resource' => __('pages/admin/blog.heading.singular')]) }}
                    </x-buttons.primary>
                </a>
            </div>
        </div>

        {{-- Module-specific skeleton template for AJAX partial table --}}
        <div class="hidden" data-cb-skeleton-template>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
                <div class="overflow-x-auto overflow-y-clip">
                    <table class="w-full table-fixed text-left text-sm text-muted-foreground" cellpadding="16">
                        <tbody>
                            @for($i = 0; $i < (int) config('pagination.skeleton_rows', 7); $i++)
                                <tr class="border-t border-border bg-card">
                                <td class="align-middle w-10">
                                    <x-skeleton.horizontal class="h-4 w-4 max-w-full rounded" />
                                </td>
                                <td class="align-middle">
                                    <div class="flex items-center gap-3">
                                        <x-skeleton.avatar size="md" />
                                        <x-skeleton.horizontal class="h-4 w-32 max-w-full rounded" />
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-4 w-24 max-w-full rounded" />
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-5 w-16 rounded-full" />
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-4 w-24 max-w-full rounded" />
                                </td>
                                <td class="text-right align-middle">
                                    <div class="flex items-center justify-end gap-1">
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                    </div>
                                </td>
                                </tr>
                                @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Empty state template --}}
        <div class="hidden" data-cb-empty-template>
            <x-no-data-available
                title="{{ __('pages/admin/blog.no_data.title') }}"
                description="{{ __('pages/admin/blog.no_data.description') }}"
                button-text="{{ __('pages/common.add_new', ['resource' => __('pages/admin/blog.heading.singular')]) }}"
                button_href="{{ route('admin.blog.create') }}" />
        </div>
        <div id="table-container"></div>

    </div>

</div>

<x-alert-dialog />
@endsection

@push('before-app-js')
@vite(['resources/js/admin/blog.js'])
@endpush