@extends('layouts.admin_master')
@section('content')
<div class="card">
    <h2>E-paper Upload</h2>
    <form id="epaperForm" enctype="multipart/form-data">
        <input type="date" id="date" required>
        <input type="file" id="file" accept="application/pdf" required>
        <button id="addEpaperBtn" type="submit">Upload PDF</button>
    </form>
    <table id="epaperTable" border="1" width="100%" style="margin-top:24px;">
        <thead>
            <tr>
                <th>Date</th>
                <th>PDF</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
@endsection

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

function loadEpapers() {
    fetch(ENDPOINT)
    .then(r => r.json())
    .then(epapers => {
        let tbody = document.querySelector('#epaperTable tbody');
        tbody.innerHTML = '';
        epapers.forEach(e => {
            let tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${e.date}</td>
                <td><a href="/storage/${e.file_path}" target="_blank">View/Download</a></td>
                <td>
                    <button onclick="deleteEpaper(${e.id})">Delete</button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    });
}
window.onload = loadEpapers;

// Add epaper
document.getElementById('epaperForm').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=>{ loadEpapers(); this.reset(); });
};

// Delete epaper
function deleteEpaper(id) {
    if(confirm('Delete this e-paper PDF?')) {
        fetch(`${ENDPOINT}/${id}`, {
            method:'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF }
        })
        .then(r=>r.json())
        .then(data=>loadEpapers());
    }
}
</script>
@endsection