@extends('layouts.admin_master')
@section('content')
<div class="card">
    <h2>Manage News Posts</h2>
    <form id="postForm" enctype="multipart/form-data">
        <input type="text" id="title" placeholder="Title" required>
        <textarea id="content" placeholder="Content" required></textarea>
        <select id="category_id" required>
            <option value="">Choose Category</option>
            @foreach(\App\Models\Category::all() as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
            @endforeach
        </select>
        <select id="reporter_id">
            <option value="">No Reporter</option>
            @foreach(\App\Models\Reporter::all() as $rep)
                <option value="{{ $rep->id }}">{{ $rep->name }}</option>
            @endforeach
        </select>
        <input type="file" id="image">
        <button id="addBtn" type="submit">Add Post</button>
    </form>
    <table id="postTable" border="1" width="100%" style="margin-top:24px;">
        <thead>
            <tr><th>Title</th><th>Category</th><th>Reporter</th><th>Actions</th></tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<!-- Edit Modal -->
<div id="editModal" style="display:none; position:fixed; top:10%; left:0; right:0; z-index:1000; background:#fff; border-radius:10px; box-shadow:0 4px 20px #0005; max-width:400px; margin:auto; padding:25px;">
    <h3>Edit Post</h3>
    <form id="editPostForm" enctype="multipart/form-data">
        <input type="hidden" id="edit_id">
        <input type="text" id="edit_title" placeholder="Title" required><br>
        <textarea id="edit_content" placeholder="Content" required></textarea><br>
        <select id="edit_category_id" required>
            <option value="">Choose Category</option>
            @foreach(\App\Models\Category::all() as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
            @endforeach
        </select><br>
        <select id="edit_reporter_id">
            <option value="">No Reporter</option>
            @foreach(\App\Models\Reporter::all() as $rep)
                <option value="{{ $rep->id }}">{{ $rep->name }}</option>
            @endforeach
        </select><br>
        <input type="file" id="edit_image">
        <button type="submit">Save</button>
        <button type="button" onclick="closeEditModal()">Cancel</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
const ENDPOINT = '/admin/posts';
const CSRF = '{{ csrf_token() }}';

// Table rendering (with modal edit)
function loadPosts() {
    fetch(ENDPOINT)
    .then(r=>r.json())
    .then(posts=>{
        let tbody = document.querySelector('#postTable tbody');
        tbody.innerHTML = '';
        posts.forEach(post=>{
            let tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${post.title}</td>
                <td>${post.category ? post.category.name : ''}</td>
                <td>${post.reporter ? post.reporter.name : ''}</td>
                <td>
                    <button onclick="editPost(${post.id})">Edit</button>
                    <button onclick="deletePost(${post.id})">Delete</button>
                </td>`;
            tbody.appendChild(tr);
        });
    });
}
window.onload = loadPosts;

// Add Post AJAX
document.getElementById('postForm').onsubmit = function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    fetch(ENDPOINT, {
        method:'POST',
        headers: { 'X-CSRF-TOKEN': CSRF },
        body: formData
    })
    .then(r=>r.json())
    .then(data=>{ loadPosts(); this.reset(); });
};

// Edit Modal Logic
let currentEditId = null;
function editPost(id) {
    fetch(ENDPOINT)
    .then(r=>r.json())
    .then(posts => {
      let post = posts.find(p=>p.id==id);
      document.getElementById('edit_id').value = post.id;
      document.getElementById('edit_title').value = post.title;
      document.getElementById('edit_content').value = post.content;
      document.getElementById('edit_category_id').value = post.category_id;
      document.getElementById('edit_reporter_id').value = post.reporter_id || '';
      currentEditId = id;
      document.getElementById('editModal').style.display = 'block';
    });
}

function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
    currentEditId = null;
}

// Edit form submission
document.getElementById('editPostForm').onsubmit = function(e) {
    e.preventDefault();
    let id = document.getElementById('edit_id').value;
    let formData = new FormData(this);
    fetch(`${ENDPOINT}/${id}`, {
        method:'PUT',
        headers: { 'X-CSRF-TOKEN': CSRF },
        body: formData
    })
    .then(r=>r.json())
    .then(data=>{
        closeEditModal();
        loadPosts();
    });
};

// Delete Post
function deletePost(id) {
    if(confirm('Delete this post?')) {
        fetch(`${ENDPOINT}/${id}`, {
            method:'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF }
        })
        .then(r=>r.json())
        .then(data=>loadPosts());
    }
}
</script>
@endsection