@extends('layouts.app')

@section('title', __('Blog Posts - Admin'))

@section('content')
<div class="container-fluid px-4">
    {{-- Page header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
        <div>
            <h1 class="h3 fw-700 mb-1">
                {{ __('Blog Posts') }}
            </h1>

            <p class="text-muted small mb-0">
                {{ __('Manage all blog posts, drafts and published articles.') }}
            </p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a
                href="{{ route('admin.blog-posts.create') }}"
                class="btn btn-sm btn-primary"
            >
                <i class="fas fa-plus-circle me-1"></i>
                {{ __('New Post') }}
            </a>

            <button
                type="button"
                class="btn btn-sm btn-outline-secondary"
                onclick="window.location.reload()"
            >
                <i class="fas fa-sync-alt me-1"></i>
                {{ __('Refresh') }}
            </button>
        </div>
    </div>

    {{-- Alerts --}}
    @if(session('success'))
        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert"
        >
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if(session('status'))
        <div
            class="alert alert-info alert-dismissible fade show"
            role="alert"
        >
            <i class="fas fa-info-circle me-2"></i>
            {{ session('status') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if(session('error'))
        <div
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
        >
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    {{-- Statistics --}}
    @include('admin.blog.posts.partials.stats', [
        'stats' => $stats,
    ])

    {{-- Filters --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form
                method="GET"
                action="{{ route('admin.blog-posts.index') }}"
                id="filterForm"
            >
                <div class="row g-3">
                    {{-- Search --}}
                    <div class="col-lg-3 col-md-6">
                        <label for="postSearch" class="form-label small fw-600">
                            {{ __('Search') }}
                        </label>

                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="fas fa-search text-muted"></i>
                            </span>

                            <input
                                id="postSearch"
                                type="search"
                                name="q"
                                class="form-control bg-white border-start-0"
                                placeholder="{{ __('Search posts...') }}"
                                value="{{ request('q') }}"
                                maxlength="255"
                            >
                        </div>
                    </div>

                    {{-- Category --}}
                    <div class="col-lg-2 col-md-6">
                        <label for="categoryFilter" class="form-label small fw-600">
                            {{ __('Category') }}
                        </label>

                        <select
                            id="categoryFilter"
                            name="category_id"
                            class="form-select form-select-sm"
                            onchange="this.form.submit()"
                        >
                            <option value="">{{ __('All Categories') }}</option>

                            @foreach($categories as $category)
                                <option
                                    value="{{ $category->id }}"
                                    @selected(
                                        (string) request('category_id') ===
                                        (string) $category->id
                                    )
                                >
                                    {{ $category->name ?: __('Unnamed category') }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Language --}}
                    <div class="col-lg-2 col-md-6">
                        <label for="languageFilter" class="form-label small fw-600">
                            {{ __('Language') }}
                        </label>

                        <select
                            id="languageFilter"
                            name="lang_id"
                            class="form-select form-select-sm"
                            onchange="this.form.submit()"
                        >
                            <option value="">{{ __('All Languages') }}</option>

                            @foreach($languages as $language)
                                <option
                                    value="{{ $language->id }}"
                                    @selected(
                                        (string) request('lang_id') ===
                                        (string) $language->id
                                    )
                                >
                                    {{ $language->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Status --}}
                    <div class="col-lg-2 col-md-6">
                        <label for="statusFilter" class="form-label small fw-600">
                            {{ __('Status') }}
                        </label>

                        <select
                            id="statusFilter"
                            name="status"
                            class="form-select form-select-sm"
                            onchange="this.form.submit()"
                        >
                            <option value="">{{ __('All Statuses') }}</option>

                            <option
                                value="published"
                                @selected(request('status') === 'published')
                            >
                                {{ __('Published') }}
                            </option>

                            <option
                                value="draft"
                                @selected(request('status') === 'draft')
                            >
                                {{ __('Draft') }}
                            </option>
                        </select>
                    </div>

                    {{-- Image filter --}}
                    <div class="col-lg-1 col-md-6">
                        <label for="imageFilter" class="form-label small fw-600">
                            {{ __('Image') }}
                        </label>

                        <select
                            id="imageFilter"
                            name="has_image"
                            class="form-select form-select-sm"
                            onchange="this.form.submit()"
                        >
                            <option value="">{{ __('All') }}</option>
                            <option value="yes" @selected(request('has_image') === 'yes')}>
                                {{ __('Yes') }}
                            </option>
                            <option value="no" @selected(request('has_image') === 'no')}>
                                {{ __('No') }}
                            </option>
                        </select>
                    </div>

                    {{-- Per page --}}
                    <div class="col-lg-2 col-md-6">
                        <label for="perPageFilter" class="form-label small fw-600">
                            {{ __('Per Page') }}
                        </label>

                        <select
                            id="perPageFilter"
                            name="per_page"
                            class="form-select form-select-sm"
                            onchange="this.form.submit()"
                        >
                            @foreach([15, 30, 50, 100] as $perPage)
                                <option
                                    value="{{ $perPage }}"
                                    @selected(
                                        (int) request('per_page', 30) === $perPage
                                    )
                                >
                                    {{ $perPage }} {{ __('per page') }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Preserve sorting --}}
                    <input
                        type="hidden"
                        name="sort"
                        value="{{ request('sort', 'id') }}"
                    >

                    <input
                        type="hidden"
                        name="direction"
                        value="{{ request('direction', 'desc') }}"
                    >

                    <div class="col-12">
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                            <div class="d-flex gap-2">
                                <button
                                    type="submit"
                                    class="btn btn-sm btn-primary"
                                >
                                    <i class="fas fa-filter me-1"></i>
                                    {{ __('Apply Filters') }}
                                </button>

                                <a
                                    href="{{ route('admin.blog-posts.index') }}"
                                    class="btn btn-sm btn-outline-secondary"
                                >
                                    <i class="fas fa-times me-1"></i>
                                    {{ __('Reset') }}
                                </a>
                            </div>

                            <div class="text-muted small">
                                <strong>{{ number_format($posts->total()) }}</strong>
                                {{ trans_choice('post found|posts found', $posts->total()) }}

                                @if($posts->total() > 0)
                                    <span>
                                        ({{ $posts->firstItem() }}–{{ $posts->lastItem() }})
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Bulk actions --}}
    @if($posts->isNotEmpty())
        <div
            id="bulkActions"
            class="mb-3"
            hidden
        >
            <div class="card border-0 shadow-sm bg-light">
                <div class="card-body py-2">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <span class="fw-600 small text-uppercase text-muted me-2">
                            <span id="selectedCount">0</span>
                            {{ __('selected') }}:
                        </span>

                        <button
                            type="button"
                            class="btn btn-sm btn-success"
                            data-bulk-action="publish"
                        >
                            <i class="fas fa-eye me-1"></i>
                            {{ __('Publish') }}
                        </button>

                        <button
                            type="button"
                            class="btn btn-sm btn-warning"
                            data-bulk-action="unpublish"
                        >
                            <i class="fas fa-eye-slash me-1"></i>
                            {{ __('Unpublish') }}
                        </button>

                        <button
                            type="button"
                            class="btn btn-sm btn-danger"
                            data-bulk-action="delete"
                        >
                            <i class="fas fa-trash-alt me-1"></i>
                            {{ __('Delete') }}
                        </button>

                        <button
                            type="button"
                            id="clearSelection"
                            class="btn btn-sm btn-outline-secondary ms-auto"
                        >
                            <i class="fas fa-times"></i>
                            <span class="visually-hidden">
                                {{ __('Clear selection') }}
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Posts table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th style="width:42px;">
                                <input
                                    type="checkbox"
                                    id="selectAll"
                                    class="form-check-input"
                                    aria-label="{{ __('Select all posts') }}"
                                >
                            </th>

                            <th>
                                <a
                                    href="{{ sortable_url('id', 'id') }}"
                                    class="text-dark text-decoration-none"
                                >
                                    {{ __('ID') }}
                                    <i class="fas fa-sort text-muted ms-1"></i>
                                </a>
                            </th>

                            <th>{{ __('Post') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Author') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-center">{{ __('Comments') }}</th>
                            <th class="text-center">{{ __('Date') }}</th>
                            <th class="text-center">{{ __('Actions') }}</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($posts as $post)
                            @php
                                $postTitle = $post->title ?: __('Untitled');

                                $imageUrl = null;

                                if (filled($post->image_small)) {
                                    $imageUrl = $post->storage === 'public'
                                        ? asset('storage/' . ltrim($post->image_small, '/'))
                                        : asset(ltrim($post->image_small, '/'));
                                }
                            @endphp

                            <tr>
                                <td>
                                    <input
                                        type="checkbox"
                                        value="{{ $post->id }}"
                                        class="form-check-input post-checkbox"
                                        aria-label="{{ __('Select :title', [
                                            'title' => $postTitle,
                                        ]) }}"
                                    >
                                </td>

                                <td class="fw-600">
                                    #{{ $post->id }}
                                </td>

                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="flex-shrink-0">
                                            @if($imageUrl)
                                                <img
                                                    src="{{ $imageUrl }}"
                                                    alt="{{ $postTitle }}"
                                                    class="rounded post-thumbnail"
                                                    width="44"
                                                    height="44"
                                                    loading="lazy"
                                                >
                                            @else
                                                <div class="post-thumbnail-placeholder rounded">
                                                    <i class="fas fa-newspaper text-muted"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="min-width-0">
                                            <div
                                                class="fw-600 text-truncate"
                                                style="max-width:220px;"
                                            >
                                                <a
                                                    href="{{ route(
                                                        'admin.blog-posts.show',
                                                        $post
                                                    ) }}"
                                                    class="text-dark text-decoration-none hover-underline"
                                                >
                                                    {{ $postTitle }}
                                                </a>
                                            </div>

                                            <div
                                                class="text-muted small text-truncate"
                                                style="max-width:220px;"
                                            >
                                                {{ \Illuminate\Support\Str::limit(
                                                    $post->slug,
                                                    45
                                                ) }}
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    <span class="badge bg-secondary">
                                        {{ $post->category?->name
                                            ?: __('Uncategorized') }}
                                    </span>
                                </td>

                                <td>
                                    <div class="small">
                                        <div class="fw-600">
                                            {{ $post->author?->username
                                                ?: __('Unknown') }}
                                        </div>

                                        @if(filled($post->author?->email))
                                            <div class="text-muted">
                                                {{ $post->author->email }}
                                            </div>
                                        @endif
                                    </div>
                                </td>

                                <td class="text-center">
                                    @if($post->created_at)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>
                                            {{ __('Published') }}
                                        </span>
                                    @else
                                        <span class="badge bg-warning text-dark">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ __('Draft') }}
                                        </span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <span class="badge bg-secondary">
                                        {{ number_format(
                                            (int) ($post->comments_count ?? 0)
                                        ) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <div class="small">
                                        @if($post->created_at)
                                            <div>
                                                {{ $post->created_at->format('M d, Y') }}
                                            </div>

                                            <div class="text-muted">
                                                {{ $post->created_at->diffForHumans() }}
                                            </div>
                                        @else
                                            <div>{{ __('N/A') }}</div>
                                            <div class="text-muted">
                                                {{ __('Not published') }}
                                            </div>
                                        @endif
                                    </div>
                                </td>

                                {{-- Correct route-generated actions --}}
                                <td class="text-center">
                                    <div
                                        class="d-inline-flex flex-wrap justify-content-center gap-1"
                                        role="group"
                                        aria-label="{{ __('Actions for :title', [
                                            'title' => $postTitle,
                                        ]) }}"
                                    >
                                        {{-- View --}}
                                        <a
                                            href="{{ route(
                                                'admin.blog-posts.show',
                                                $post
                                            ) }}"
                                            class="btn btn-sm btn-outline-primary"
                                            title="{{ __('View post') }}"
                                        >
                                            <i class="fas fa-eye"></i>
                                            <span class="visually-hidden">
                                                {{ __('View') }}
                                            </span>
                                        </a>

                                        {{-- Edit --}}
                                        <a
                                            href="{{ route(
                                                'admin.blog-posts.edit',
                                                $post
                                            ) }}"
                                            class="btn btn-sm btn-outline-secondary"
                                            title="{{ __('Edit post') }}"
                                        >
                                            <i class="fas fa-edit"></i>
                                            <span class="visually-hidden">
                                                {{ __('Edit') }}
                                            </span>
                                        </a>

                                        {{-- Publish/unpublish --}}
                                        <form
                                            method="POST"
                                            action="{{ route(
                                                'admin.blog-posts.toggle-publish',
                                                $post
                                            ) }}"
                                            class="d-inline js-confirm-form"
                                            data-confirm="{{
                                                $post->created_at
                                                    ? __('Move this post back to draft?')
                                                    : __('Publish this post now?')
                                            }}"
                                        >
                                            @csrf
                                            @method('PATCH')

                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-outline-{{
                                                    $post->created_at
                                                        ? 'warning'
                                                        : 'success'
                                                }}"
                                                title="{{
                                                    $post->created_at
                                                        ? __('Unpublish post')
                                                        : __('Publish post')
                                                }}"
                                            >
                                                <i class="fas fa-{{
                                                    $post->created_at
                                                        ? 'eye-slash'
                                                        : 'eye'
                                                }}"></i>

                                                <span class="visually-hidden">
                                                    {{
                                                        $post->created_at
                                                            ? __('Unpublish')
                                                            : __('Publish')
                                                    }}
                                                </span>
                                            </button>
                                        </form>

                                        {{-- Duplicate --}}
                                        <form
                                            method="POST"
                                            action="{{ route(
                                                'admin.blog-posts.duplicate',
                                                $post
                                            ) }}"
                                            class="d-inline js-confirm-form"
                                            data-confirm="{{ __(
                                                'Create a draft copy of this post?'
                                            ) }}"
                                        >
                                            @csrf

                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-outline-info"
                                                title="{{ __('Duplicate post') }}"
                                            >
                                                <i class="fas fa-copy"></i>
                                                <span class="visually-hidden">
                                                    {{ __('Duplicate') }}
                                                </span>
                                            </button>
                                        </form>

                                        {{-- Delete --}}
                                        <form
                                            method="POST"
                                            action="{{ route(
                                                'admin.blog-posts.destroy',
                                                $post
                                            ) }}"
                                            class="d-inline js-confirm-form"
                                            data-confirm="{{ __(
                                                'Permanently delete this post, its tags and all its comments? This action cannot be undone.'
                                            ) }}"
                                        >
                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                class="btn btn-sm btn-outline-danger"
                                                title="{{ __('Delete post') }}"
                                            >
                                                <i class="fas fa-trash-alt"></i>
                                                <span class="visually-hidden">
                                                    {{ __('Delete') }}
                                                </span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td
                                    colspan="9"
                                    class="text-center py-5"
                                >
                                    <i class="fas fa-newspaper fa-3x text-muted opacity-25 mb-3 d-block"></i>

                                    <h6 class="text-muted">
                                        {{ __('No blog posts found') }}
                                    </h6>

                                    <p class="text-muted small">
                                        {{ __('Try adjusting your search or filter criteria.') }}
                                    </p>

                                    <a
                                        href="{{ route('admin.blog-posts.create') }}"
                                        class="btn btn-sm btn-primary mt-2"
                                    >
                                        <i class="fas fa-plus me-1"></i>
                                        {{ __('Create First Post') }}
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Pagination --}}
        @if($posts->hasPages())
            <div class="card-footer bg-white border-0 py-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div class="text-muted small">
                        {{ __('Showing :first to :last of :total posts', [
                            'first' => $posts->firstItem() ?? 0,
                            'last' => $posts->lastItem() ?? 0,
                            'total' => $posts->total(),
                        ]) }}
                    </div>

                    <div>
                        {{ $posts
                            ->withQueryString()
                            ->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

{{-- Bulk-action modal --}}
<div
    class="modal fade"
    id="bulkActionModal"
    tabindex="-1"
    aria-labelledby="bulkActionModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <form
                action="{{ route('admin.blog-posts.bulk-action') }}"
                method="POST"
                id="bulkActionForm"
            >
                @csrf

                <div class="modal-header">
                    <h5
                        class="modal-title"
                        id="bulkActionModalLabel"
                    >
                        {{ __('Bulk Action') }}
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{{ __('Close') }}"
                    ></button>
                </div>

                <div class="modal-body">
                    <p>
                        {{ __('You are about to') }}
                        <strong id="bulkActionLabel">
                            {{ __('process') }}
                        </strong>

                        <strong id="bulkActionCount">0</strong>

                        {{ __('blog posts.') }}
                    </p>

                    <div
                        id="bulkPublishFields"
                        class="alert alert-info"
                        hidden
                    >
                        <i class="fas fa-info-circle me-2"></i>
                        {{ __('Selected posts will be published immediately.') }}
                    </div>

                    <div
                        id="bulkUnpublishFields"
                        class="alert alert-warning"
                        hidden
                    >
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ __('Selected posts will be moved to draft.') }}
                    </div>

                    <div
                        id="bulkDeleteFields"
                        class="alert alert-danger"
                        hidden
                    >
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ __('This action cannot be undone. Selected posts, tags and comments will be deleted.') }}
                    </div>

                    <div id="bulkPostIds"></div>

                    <input
                        type="hidden"
                        name="action"
                        id="bulkActionType"
                        value=""
                    >
                </div>

                <div class="modal-footer">
                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        {{ __('Cancel') }}
                    </button>

                    <button
                        type="submit"
                        class="btn btn-primary"
                        id="bulkActionSubmit"
                    >
                        {{ __('Confirm') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 {
        font-weight: 600;
    }

    .fw-700 {
        font-weight: 700;
    }

    .hover-underline:hover {
        text-decoration: underline !important;
    }

    .min-width-0 {
        min-width: 0;
    }

    .post-thumbnail {
        object-fit: cover;
    }

    .post-thumbnail-placeholder {
        align-items: center;
        background: #f8f9fa;
        display: flex;
        height: 44px;
        justify-content: center;
        width: 44px;
    }

    .table > :not(caption) > * > * {
        padding: .75rem .5rem;
    }

    .d-inline-flex .btn {
        padding: .25rem .5rem;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectAll = document.getElementById('selectAll');
    const bulkActions = document.getElementById('bulkActions');
    const selectedCount = document.getElementById('selectedCount');
    const clearSelectionButton = document.getElementById('clearSelection');
    const bulkModalElement = document.getElementById('bulkActionModal');

    const selectedCheckboxes = function () {
        return Array.from(
            document.querySelectorAll('.post-checkbox:checked')
        );
    };

    const updateBulkActions = function () {
        const selected = selectedCheckboxes();
        const allCheckboxes = Array.from(
            document.querySelectorAll('.post-checkbox')
        );

        if (selectedCount) {
            selectedCount.textContent = String(selected.length);
        }

        if (bulkActions) {
            bulkActions.hidden = selected.length === 0;
        }

        if (selectAll) {
            selectAll.checked =
                allCheckboxes.length > 0 &&
                selected.length === allCheckboxes.length;

            selectAll.indeterminate =
                selected.length > 0 &&
                selected.length < allCheckboxes.length;
        }
    };

    selectAll?.addEventListener('change', function () {
        document.querySelectorAll('.post-checkbox').forEach(
            function (checkbox) {
                checkbox.checked = selectAll.checked;
            }
        );

        updateBulkActions();
    });

    document.querySelectorAll('.post-checkbox').forEach(
        function (checkbox) {
            checkbox.addEventListener(
                'change',
                updateBulkActions
            );
        }
    );

    clearSelectionButton?.addEventListener('click', function () {
        document.querySelectorAll('.post-checkbox').forEach(
            function (checkbox) {
                checkbox.checked = false;
            }
        );

        updateBulkActions();
    });

    document.querySelectorAll('[data-bulk-action]').forEach(
        function (button) {
            button.addEventListener('click', function () {
                const action = button.dataset.bulkAction;
                const selected = selectedCheckboxes();

                if (selected.length === 0) {
                    return;
                }

                document.getElementById('bulkActionCount').textContent =
                    String(selected.length);

                document.getElementById('bulkActionLabel').textContent =
                    action;

                document.getElementById('bulkActionType').value =
                    action;

                document.getElementById('bulkPublishFields').hidden =
                    action !== 'publish';

                document.getElementById('bulkUnpublishFields').hidden =
                    action !== 'unpublish';

                document.getElementById('bulkDeleteFields').hidden =
                    action !== 'delete';

                const postIds = document.getElementById('bulkPostIds');
                postIds.replaceChildren();

                selected.forEach(function (checkbox) {
                    const input = document.createElement('input');

                    input.type = 'hidden';
                    input.name = 'post_ids[]';
                    input.value = checkbox.value;

                    postIds.appendChild(input);
                });

                const submitButton =
                    document.getElementById('bulkActionSubmit');

                const buttonClass = action === 'publish'
                    ? 'success'
                    : action === 'unpublish'
                        ? 'warning'
                        : 'danger';

                submitButton.className =
                    'btn btn-' + buttonClass;

                submitButton.textContent =
                    action.charAt(0).toUpperCase() +
                    action.slice(1) +
                    ' ' +
                    (selected.length === 1 ? 'Post' : 'Posts');

                bootstrap.Modal
                    .getOrCreateInstance(bulkModalElement)
                    .show();
            });
        }
    );

    /*
     * Confirmation handler for publish, duplicate and delete forms.
     * The routes have already been generated by Laravel using the
     * BlogPost model's configured route key.
     */
    document.querySelectorAll('.js-confirm-form').forEach(
        function (form) {
            form.addEventListener('submit', function (event) {
                const message = form.dataset.confirm;

                if (message && !window.confirm(message)) {
                    event.preventDefault();
                }
            });
        }
    );

    updateBulkActions();
});
</script>
@endpush