@extends('layouts.admin')

@section('title', 'Blog Management')
@section('page_title', 'Blogs Management')

@push('styles')
<style>
    .metric-card {
        border: 1px solid #e2e8f0;
        background: #ffffff;
        border-radius: 0.75rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    }
    .metric-icon {
        width: 44px;
        height: 44px;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
    }
    .ordering-disabled thead th {
        cursor: default !important;
        pointer-events: none !important;
    }
    .blog-preview-content {
        line-height: 1.75;
        color: #334155;
    }
    .blog-preview-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
    }
    .blog-preview-content blockquote {
        border-left: 4px solid #3b82f6;
        padding-left: 1rem;
        font-style: italic;
        color: #64748b;
    }
    .extra-small {
        font-size: 0.75rem;
    }
    #blogs-table th,
    #blogs-table td {
        vertical-align: middle;
    }
    .hover-primary {
        transition: color 0.15s ease;
    }
    .hover-primary:hover {
        color: #2563eb !important;
        text-decoration: underline !important;
    }
    .cursor-pointer {
        cursor: pointer;
    }

    /* Sticky Action column so Edit, View, and Delete buttons are ALWAYS visible */
    #blogs-table thead th:last-child {
        position: sticky;
        right: 0;
        background-color: #f8fafc !important;
        z-index: 5;
        box-shadow: -3px 0 6px rgba(0, 0, 0, 0.05);
    }
    #blogs-table tbody td:last-child {
        position: sticky;
        right: 0;
        background-color: #ffffff;
        z-index: 4;
        box-shadow: -3px 0 6px rgba(0, 0, 0, 0.05);
    }
    #blogs-table tbody tr:hover td:last-child {
        background-color: #f1f5f9;
    }
    .dataTables_wrapper .dataTables_scroll {
        border-radius: 0.5rem;
    }
</style>
@endpush

@section('content')
<!-- Top Metric Summary Cards -->
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="metric-card p-3 d-flex align-items-center gap-3">
            <div class="metric-icon bg-primary-subtle text-primary">
                <i class="bi bi-journal-text"></i>
            </div>
            <div>
                <div class="text-muted small fw-medium">Total Articles</div>
                <h4 class="fw-bold m-0 text-dark">{{ $stats['total_blogs'] ?? 0 }}</h4>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="metric-card p-3 d-flex align-items-center gap-3">
            <div class="metric-icon bg-success-subtle text-success">
                <i class="bi bi-check2-circle"></i>
            </div>
            <div>
                <div class="text-muted small fw-medium">Published Live</div>
                <h4 class="fw-bold m-0 text-dark">{{ $stats['published_blogs'] ?? 0 }}</h4>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="metric-card p-3 d-flex align-items-center gap-3">
            <div class="metric-icon bg-info-subtle text-info">
                <i class="bi bi-clock-history"></i>
            </div>
            <div>
                <div class="text-muted small fw-medium">Scheduled Future</div>
                <h4 class="fw-bold m-0 text-dark">{{ $stats['scheduled_blogs'] ?? 0 }}</h4>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="metric-card p-3 d-flex align-items-center gap-3">
            <div class="metric-icon bg-warning-subtle text-warning-emphasis">
                <i class="bi bi-file-earmark-diff"></i>
            </div>
            <div>
                <div class="text-muted small fw-medium">Drafts</div>
                <h4 class="fw-bold m-0 text-dark">{{ $stats['draft_blogs'] ?? 0 }}</h4>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-header bg-white py-3 d-flex flex-wrap align-items-center justify-content-between gap-2 border-0">
        <h6 class="m-0 font-weight-bold text-dark d-flex align-items-center gap-2">
            <i class="bi bi-journal-richtext text-primary"></i>
            <span>All Blog Posts</span>
        </h6>

        <div class="d-flex align-items-center gap-2 flex-wrap">
            @can('add-blog')
            <a href="{{ route('admin.blogs.create') }}" class="btn btn-primary rounded-3 btn-sm d-flex align-items-center gap-1.5 shadow-sm" id="createBlogBtn">
                <i class="bi bi-plus-lg"></i>
                <span class="ms-1">Create New Blog</span>
            </a>
            @endcan
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            {!! $dataTable->table(['class' => 'table table-hover table-striped align-middle w-100', 'id' => 'blogs-table']) !!}
        </div>
    </div>
</div>

<!-- Blog Quick Preview Modal -->
<div class="modal fade" id="viewBlogModal" tabindex="-1" aria-labelledby="viewBlogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-bottom py-3 px-4 bg-light-subtle">
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1">Preview</span>
                    <h5 class="modal-title fw-bold text-dark m-0" id="viewBlogModalLabel">Blog Preview</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Featured Image -->
                <div id="previewImageWrapper" class="mb-3 d-none">
                    <img id="previewFeaturedImage" src="" alt="Featured Image" class="w-100 rounded-3 shadow-xs border" style="max-height: 260px; object-fit: cover;">
                    <div id="previewImageAltWrapper" class="text-muted extra-small mt-1.5 fst-italic d-none">
                        <span class="fw-semibold"><i class="bi bi-card-text me-1"></i>Alt text:</span> <span id="previewImageAlt"></span>
                    </div>
                </div>

                <div class="mb-3">
                    <h3 class="fw-bold text-dark mb-2" id="previewTitle"></h3>
                    <div class="d-flex flex-wrap align-items-center gap-3 text-muted small pb-3 border-bottom">
                        <span id="previewAuthor" class="d-flex align-items-center gap-1">
                            <i class="bi bi-person text-primary"></i> <span class="author-name"></span>
                        </span>
                        <span id="previewDate" class="d-flex align-items-center gap-1">
                            <i class="bi bi-calendar3 text-secondary"></i> <span class="date-val"></span>
                        </span>
                        <span id="previewReadingTime" class="d-flex align-items-center gap-1">
                            <i class="bi bi-stopwatch text-warning"></i> <span class="reading-time-val"></span>
                        </span>
                        <span id="previewStatusBadge"></span>
                    </div>
                </div>

                <!-- SEO Meta Information Collapsible Box -->
                <div class="p-3 bg-light rounded-3 border mb-4">
                    <h6 class="fw-bold text-dark small mb-2 d-flex align-items-center gap-1.5">
                        <i class="bi bi-search text-primary"></i> Search Engine Preview (Google SERP)
                    </h6>
                    <div class="p-3 bg-white rounded-3 border">
                        <div class="text-truncate text-muted extra-small" id="serpUrl" style="font-family: Arial, sans-serif;">{{ url('/blog') }}/<span id="serpSlug">...</span></div>
                        <div class="text-primary fw-medium text-truncate" id="serpTitle" style="font-size: 1.05rem; font-family: Arial, sans-serif;"></div>
                        <div class="text-secondary extra-small mt-1" id="serpSnippet" style="line-height: 1.4; font-family: Arial, sans-serif;"></div>
                    </div>
                    <div class="mt-2 text-muted extra-small d-flex align-items-center gap-2">
                        <span class="fw-semibold">Keywords:</span>
                        <span id="previewKeywords" class="text-dark font-monospace">None</span>
                    </div>
                </div>

                <!-- Blog HTML Content (Rendered CKEditor HTML) -->
                <div>
                    <h6 class="fw-bold text-dark small mb-3 border-bottom pb-2">
                        <i class="bi bi-file-earmark-richtext text-primary me-1"></i> Content Body
                    </h6>
                    <div id="previewDescription" class="blog-preview-content p-2"></div>
                </div>
            </div>
            <div class="modal-footer border-top-0 pt-0 px-4 pb-4">
                <a href="#" id="previewEditBtn" class="btn btn-outline-primary rounded-3 px-3">
                    <i class="bi bi-pencil me-1"></i> Edit Blog
                </a>
                <button type="button" class="btn btn-secondary px-4 rounded-3" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{!! $dataTable->scripts(attributes: ['type' => 'module']) !!}

<script type="module">
    $(document).ready(function () {
        const tableId = '#blogs-table';

        // View Blog Quick Preview Modal
        $(document).on('click', '.view-blog-btn', function (e) {
            e.preventDefault();
            const btn = $(this);
            const blogId = btn.data('id');
            if (!blogId) return;

            $.ajax({
                url: `/admin/blogs/${blogId}`,
                method: 'GET',
                success: function (res) {
                    if (res.success) {
                        const blog = res.data;
                        $('#previewTitle').text(blog.title);
                        $('#previewAuthor .author-name').text(blog.author);
                        $('#previewDate .date-val').text(blog.published_at ? 'Published: ' + blog.published_at : blog.created_at);
                        $('#previewReadingTime .reading-time-val').text(blog.reading_time);

                        if (blog.featured_image_url) {
                            $('#previewFeaturedImage').attr('src', blog.featured_image_url);
                            $('#previewFeaturedImage').attr('alt', blog.featured_image_alt || blog.title);
                            if (blog.featured_image_alt) {
                                $('#previewImageAlt').text(blog.featured_image_alt);
                                $('#previewImageAltWrapper').removeClass('d-none');
                            } else {
                                $('#previewImageAltWrapper').addClass('d-none');
                            }
                            $('#previewImageWrapper').removeClass('d-none');
                        } else {
                            $('#previewFeaturedImage').attr('src', '');
                            $('#previewImageWrapper').addClass('d-none');
                        }

                        if (blog.status === 'published') {
                            $('#previewStatusBadge').html('<span class="badge bg-success-subtle text-success border border-success-subtle">Published</span>');
                        } else if (blog.status === 'scheduled') {
                            $('#previewStatusBadge').html('<span class="badge bg-primary-subtle text-primary border border-primary-subtle"><i class="bi bi-clock-history me-1"></i>Scheduled</span>');
                        } else if (blog.status === 'draft') {
                            $('#previewStatusBadge').html('<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Draft</span>');
                        } else {
                            $('#previewStatusBadge').html('<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">' + blog.status + '</span>');
                        }

                        // SERP Preview
                        $('#serpSlug').text(blog.slug);
                        $('#serpTitle').text(blog.meta_title || blog.title);
                        $('#serpSnippet').text(blog.meta_description || 'No meta description provided. Search engines may display an excerpt from the article content.');
                        $('#previewKeywords').text(blog.meta_keywords || 'None');

                        // Render CKEditor HTML
                        $('#previewDescription').html(blog.description);

                        // Update Edit Button link
                        $('#previewEditBtn').attr('href', `/admin/blogs/${blog.id}/edit`);

                        $('#viewBlogModal').modal('show');
                    }
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Could not load blog preview.'
                    });
                }
            });
        });

        // Toggle published/draft status
        $(document).on('change', '.blog-status-toggle', function () {
            const checkbox = $(this);
            const blogId = checkbox.data('id');
            const isChecked = checkbox.is(':checked');
            const targetStatus = isChecked ? 'Published' : 'Draft';

            checkbox.prop('checked', !isChecked); // Revert until confirmation

            Swal.fire({
                title: 'Change Publication Status?',
                text: `Set this blog post status to "${targetStatus}"?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Update Status'
            }).then((result) => {
                if (result.isConfirmed) {
                    checkbox.prop('checked', isChecked);

                    $.ajax({
                        url: `/admin/blogs/${blogId}/toggle-status`,
                        method: 'POST',
                        success: function (res) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated!',
                                text: res.message || 'Status updated successfully.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            if ($.fn.DataTable && $.fn.DataTable.isDataTable(tableId)) {
                                $(tableId).DataTable().ajax.reload(null, false);
                            }
                        },
                        error: function (xhr) {
                            checkbox.prop('checked', !isChecked);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Failed to update status.'
                            });
                        }
                    });
                }
            });
        });

        // Delete Blog with SweetAlert confirmation
        $(document).on('click', '.delete-blog-btn', function (e) {
            e.preventDefault();
            const btn = $(this).closest('.delete-blog-btn');
            const blogId = btn.data('id') || btn.attr('data-id');
            if (!blogId) return;

            AdminAjax.confirmDelete({
                url: `/admin/blogs/${blogId}`,
                dataTable: tableId,
                title: 'Delete Blog Post?',
                text: 'Are you sure you want to delete this blog post? It will be moved to trash.',
                confirmText: 'Yes, Delete Post'
            });
        });
    });
</script>
@endpush