@extends('admin.layout')

@section('title', 'Blog Articles')

@section('content')
<div class="container-fluid p-0">
    <!-- Header Page Action Bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="fw-bold font-heading mb-1 text-dark">
                <i class="bi bi-file-earmark-richtext-fill text-warning me-2"></i> Blog Articles
            </h2>
       
        </div>
        <div>
            <!-- Direct link to create page (NO POPUP) -->
            <a href="{{ route('admin.blogcontent.create') }}" class="btn btn-warning rounded-pill px-4 fw-semibold shadow-sm d-flex align-items-center gap-2 text-dark" style="background-color: var(--iq-orange); border: none; color: #fff !important;">
                <i class="bi bi-pencil-square"></i> Write New Article
            </a>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Articles Table Card -->
    <div class="card border-0 rounded-4 shadow-sm overflow-hidden">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex justify-content-between align-items-center">
      
            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 fw-semibold">
                {{ $posts->total() }} Total Article(s)
            </span>
        </div>

        <div class="card-body p-0">
            @if($posts->isEmpty())
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-journal-x fs-1 text-secondary opacity-50 d-block mb-3"></i>
                    <h5 class="fw-semibold text-dark">No Articles Published Yet</h5>
                    <p class="small text-muted mb-3">
                        Write and publish your first article using the rich content editor.
                    </p>
                    <a href="{{ route('admin.blogcontent.create') }}" class="btn btn-sm btn-primary rounded-pill px-4">
                        <i class="bi bi-plus-lg me-1"></i> Write First Article
                    </a>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4" style="width: 80px;">ID</th>
                                <th>Article Title</th>
                                <th>Category</th>
                                <th>Author</th>
                                <th>SEO URL Slug</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th class="text-end pe-4" style="width: 140px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($posts as $post)
                            <tr>
                                <td class="ps-4">
                                    <span class="badge bg-light text-dark border font-monospace px-2 py-1">
                                        #{{ $post->blogid }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        @if($post->blogimage)
                                            <img src="{{ asset($post->blogimage) }}" alt="Thumbnail" class="rounded-3 border shadow-sm" style="width: 54px; height: 38px; object-fit: cover; flex-shrink: 0;">
                                        @else
                                            <div class="rounded-3 bg-light border text-muted d-flex align-items-center justify-content-center" style="width: 54px; height: 38px; flex-shrink: 0;">
                                                <i class="bi bi-image text-secondary opacity-50"></i>
                                            </div>
                                        @endif
                                        <div class="overflow-hidden">
                                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                                <div class="fw-bold text-dark text-truncate" style="max-width: 260px;">
                                                    {{ $post->title }}
                                                </div>
                                                @if($post->is_featured)
                                                    <span class="badge bg-warning text-dark rounded-pill px-2 py-1" style="font-size: 0.7rem;" title="Featured on Home/Blog Page">
                                                        <i class="bi bi-stars"></i> Featured
                                                    </span>
                                                @endif
                                            </div>
                                            @if($post->metadesp)
                                                <small class="text-muted d-block text-truncate" style="max-width: 290px;">
                                                    {{ $post->metadesp }}
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($post->category)
                                        <span class="badge bg-warning-subtle text-dark rounded-pill px-2 py-1 small">
                                            {{ $post->category->catname }}
                                        </span>
                                    @else
                                        <span class="text-muted small">Uncategorized</span>
                                    @endif
                                </td>
                                <td>
                                    @if($post->author)
                                        <div class="small fw-semibold text-dark">
                                            <i class="bi bi-person me-1"></i>{{ $post->author->blogauthorname }}
                                        </div>
                                    @else
                                        <span class="text-muted small">Anonymous</span>
                                    @endif
                                </td>
                                <td>
                                    <code class="text-primary bg-primary-subtle px-2 py-1 rounded small">
                                        /blog/{{ $post->seourl }}
                                    </code>
                                </td>
                                <td>
                                    @if($post->status === 'published')
                                        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2">
                                            <i class="bi bi-check-circle-fill me-1"></i> Published
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3 py-2">
                                            <i class="bi bi-clock-history me-1"></i> Draft
                                        </span>
                                    @endif
                                </td>
                                <td class="text-muted small">
                                    <div class="fw-semibold text-dark">
                                        <i class="bi bi-calendar-event me-1 text-muted"></i>
                                        {{ $post->publish_date ? $post->publish_date->format('M d, Y') : ($post->created_at ? $post->created_at->format('M d, Y') : 'N/A') }}
                                    </div>
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-inline-flex gap-2">
                                        <!-- Edit button linking to dedicated edit page (NO POPUP) -->
                                        <a href="{{ route('admin.blogcontent.edit', $post->blogid) }}" class="btn btn-sm btn-outline-primary rounded-circle" title="Edit Article">
                                            <i class="bi bi-pencil-fill"></i>
                                        </a>

                                        <!-- Delete button -->
                                        <form action="{{ route('admin.blogcontent.destroy', $post->blogid) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete &quot;{{ $post->title }}&quot;?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle" title="Delete Article">
                                                <i class="bi bi-trash-fill"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($posts->hasPages())
                    <div class="p-4 border-top">
                        {{ $posts->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection