@extends('layouts.admin')
@section('title', 'Blog Posts')
@section('page-title', 'Blog Posts')

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px">
    <div>
        <h2 style="font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800">Blog Posts</h2>
        <p style="color:var(--text-muted);font-size:.85rem;margin-top:4px">{{ $posts->total() }} total posts</p>
    </div>
    <button class="btn btn-primary" onclick="openModal('addBlogModal')">
        <i class="fas fa-pen-nib"></i> New Post
    </button>
</div>

<div class="card" style="padding:0">
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Author</th>
                    <th>Status</th>
                    <th>Published</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($posts as $post)
                <tr>
                    <td>
                        <div style="font-weight:600;font-size:.875rem;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $post->title }}</div>
                        <div style="font-size:.75rem;color:var(--text-muted);margin-top:2px">{{ Str::limit($post->excerpt ?? $post->content, 60) }}</div>
                    </td>
                    <td><span class="badge badge-primary">{{ $post->category ?? 'General' }}</span></td>
                    <td style="font-size:.83rem">{{ $post->author->name ?? 'Admin' }}</td>
                    <td>
                        <span class="badge {{ $post->status=='published'?'badge-success':'badge-warning' }}">
                            {{ $post->status=='published' ? '✓ Published' : '◷ Draft' }}
                        </span>
                    </td>
                    <td style="font-size:.78rem;color:var(--text-muted)">{{ optional($post->published_at)->format('d M Y') ?? '—' }}</td>
                    <td>
                        <div style="display:flex;gap:6px">
                            <button onclick="openModal('editBlog{{ $post->id }}')" class="btn btn-ghost btn-sm" title="Edit"><i class="fas fa-edit"></i></button>
                            <form action="{{ route('admin.blogs.update', $post->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm {{ $post->status=='published'?'':'btn-success' }}" style="{{ $post->status=='published'?'background:rgba(255,107,53,.15);color:#FF6B35':'' }}" title="{{ $post->status=='published'?'Unpublish':'Publish' }}">
                                    <i class="fas fa-{{ $post->status=='published'?'eye-slash':'eye' }}"></i>
                                </button>
                            </form>
                            <form action="{{ route('admin.blogs.destroy', $post->id) }}" method="POST" onsubmit="return confirm('Delete this post?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm" style="background:rgba(229,62,62,.15);color:#FC8181" title="Delete"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>

                <!-- EDIT MODAL -->
                <div class="modal-overlay" id="editBlog{{ $post->id }}">
                    <div class="modal" style="max-width:600px">
                        <div class="modal-header">
                            <h3 class="modal-title">Edit Post</h3>
                            <button class="modal-close" onclick="closeModal('editBlog{{ $post->id }}')">✕</button>
                        </div>
                        <form action="{{ route('admin.blogs.update', $post->id) }}" method="POST">
                            @csrf @method('PUT')
                            <div class="form-group">
                                <label class="form-label">Title</label>
                                <input type="text" name="title" class="form-control" value="{{ $post->title }}" required>
                            </div>
                            <div class="grid-2">
                                <div class="form-group">
                                    <label class="form-label">Category</label>
                                    <select name="category" class="form-control">
                                        @foreach(['Career Tips','Industry Insights','Success Stories','Education','Mental Health','Pakistan Jobs'] as $cat)
                                        <option value="{{ $cat }}" {{ $post->category==$cat?'selected':'' }}>{{ $cat }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Published?</label>
                                    <select name="published" class="form-control">
                                        <option value="1" {{ $post->status=='published'?'selected':'' }}>Yes – Publish</option>
                                        <option value="0" {{ $post->status!='published'?'selected':'' }}>No – Draft</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Excerpt</label>
                                <textarea name="excerpt" class="form-control" rows="2">{{ $post->excerpt }}</textarea>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Content</label>
                                <textarea name="body" class="form-control" rows="5">{{ $post->content }}</textarea>
                            </div>
                            <div style="display:flex;gap:10px;margin-top:8px">
                                <button type="button" onclick="closeModal('editBlog{{ $post->id }}')" class="btn btn-ghost" style="flex:1">Cancel</button>
                                <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-save"></i> Save</button>
                            </div>
                        </form>
                    </div>
                </div>
                @empty
                <tr>
                    <td colspan="6" style="text-align:center;padding:50px;color:var(--text-muted)">
                        <i class="fas fa-newspaper" style="font-size:2.5rem;margin-bottom:12px;display:block;opacity:.4"></i>
                        No blog posts yet
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($posts->hasPages())
<div style="margin-top:20px">{{ $posts->links() }}</div>
@endif

<!-- ADD MODAL -->
<div class="modal-overlay" id="addBlogModal">
    <div class="modal" style="max-width:600px">
        <div class="modal-header">
            <h3 class="modal-title">New Blog Post</h3>
            <button class="modal-close" onclick="closeModal('addBlogModal')">✕</button>
        </div>
        <form action="{{ route('admin.blogs.store') }}" method="POST">
            @csrf
            <div class="form-group">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-control" placeholder="Post title..." required>
            </div>
            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <select name="category" class="form-control">
                        @foreach(['Career Tips','Industry Insights','Success Stories','Education','Mental Health','Pakistan Jobs'] as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Publish Now?</label>
                    <select name="published" class="form-control">
                        <option value="1">Yes – Publish</option>
                        <option value="0">No – Save as Draft</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Excerpt (short summary)</label>
                <textarea name="excerpt" class="form-control" rows="2" placeholder="Brief summary shown in listings..."></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Content</label>
                <textarea name="body" class="form-control" rows="6" placeholder="Full post content..." required></textarea>
            </div>
            <div style="display:flex;gap:10px;margin-top:8px">
                <button type="button" onclick="closeModal('addBlogModal')" class="btn btn-ghost" style="flex:1">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-pen-nib"></i> Publish Post</button>
            </div>
        </form>
    </div>
</div>
@endsection