{{--
    Task Detail Modal/Drawer — include in any page that shows task cards
    The modal auto-opens when clicking a .task-card with [data-task-id]
--}}
<div id="taskDetailModal" style="display:none;position:fixed;inset:0;z-index:9999;
     background:rgba(0,0,0,.65);backdrop-filter:blur(4px);" onclick="closeTaskModal(event)">
    <div id="taskDetailPanel"
         style="position:absolute;right:0;top:0;bottom:0;width:100%;max-width:520px;
                background:#1a2035;overflow-y:auto;padding:2rem 1.75rem;
                box-shadow:-8px 0 40px rgba(0,0,0,.5);transition:transform .25s ease;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
            <h3 id="modalTitle" style="color:#f3f4f6;font-size:1rem;font-weight:700;margin:0;">Loading…</h3>
            <button onclick="document.getElementById('taskDetailModal').style.display='none'"
                    style="background:rgba(255,255,255,.08);border:none;color:#9ca3af;
                           width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;">×</button>
        </div>
        <div id="modalBody" style="font-size:.87rem;color:#d1d5db;">
            <div style="text-align:center;padding:3rem 0;color:#6b7280;">Loading task…</div>
        </div>
    </div>
</div>

<style>
    .modal-meta-label { font-size:.7rem;color:#6b7280;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem; }
    .modal-meta-value { font-size:.88rem;color:#f3f4f6;font-weight:500;margin-bottom:1rem; }
    .modal-badge { display:inline-block;font-size:.65rem;font-weight:700;padding:2px 9px;border-radius:4px;text-transform:uppercase; }
    .modal-badge-high   { background:rgba(239,68,68,.2);color:#f87171; }
    .modal-badge-medium { background:rgba(234,179,8,.2); color:#fbbf24; }
    .modal-badge-low    { background:rgba(34,197,94,.2); color:#4ade80; }
    .modal-status { font-size:.75rem;padding:2px 12px;border-radius:999px;font-weight:600; }
    .modal-status-to_do       { background:rgba(107,114,128,.2);color:#9ca3af; }
    .modal-status-in_progress { background:rgba(59,130,246,.2);  color:#60a5fa; }
    .modal-status-done        { background:rgba(16,185,129,.2);  color:#34d399; }
    .modal-desc { background:#111827;border-radius:7px;padding:.85rem 1rem;
        font-size:.85rem;color:#d1d5db;line-height:1.65;white-space:pre-wrap;margin:1rem 0; }
    .modal-action-btn { border:none;padding:8px 18px;border-radius:7px;font-size:.8rem;
        font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;margin-right:.4rem;margin-bottom:.4rem; }
    .modal-btn-done     { background:#10b981;color:#fff; }
    .modal-btn-progress { background:#3b82f6;color:#fff; }
    .modal-btn-todo     { background:rgba(107,114,128,.3);color:#d1d5db; }
    .modal-btn-view     { background:rgba(255,255,255,.08);color:#d1d5db;border:1px solid rgba(255,255,255,.12); }
</style>

<script>
function openTaskModal(taskId) {
    document.getElementById('taskDetailModal').style.display = 'block';
    document.getElementById('modalBody').innerHTML = '<div style="text-align:center;padding:3rem 0;color:#6b7280;">Loading…</div>';

    fetch(`/tasks/${taskId}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'text/html'
        }
    })
    .then(r => {
        if (!r.ok) throw new Error('Failed');
        // If JSON (shouldn't be), fall back to redirect
        window.location.href = `/tasks/${taskId}`;
    })
    .catch(() => {
        window.location.href = `/tasks/${taskId}`;
    });
}

function closeTaskModal(e) {
    if (e.target === document.getElementById('taskDetailModal')) {
        document.getElementById('taskDetailModal').style.display = 'none';
    }
}

function changeTaskStatus(taskId, status) {
    fetch(`/tasks/${taskId}/status`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ status })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            document.getElementById('taskDetailModal').style.display = 'none';
            window.location.reload();
        }
    });
}

// ESC to close
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') document.getElementById('taskDetailModal').style.display = 'none';
});
</script>