@extends('layouts.goberdata')

@section('title', 'Mis tareas')
@section('page_title', 'Mis tareas')
@section('page_sub', 'Lo que tienes asignado esta semana')

@section('content')
<div class="grid g4" style="margin-bottom:14px">
    <div class="kpi" style="--accent:var(--cian)"><div class="kpi-l">Total</div><div class="kpi-v" id="totalTasks">0</div></div>
    <div class="kpi" style="--accent:var(--amber)"><div class="kpi-l">Pendientes</div><div class="kpi-v" id="pendingTasks">0</div></div>
    <div class="kpi" style="--accent:var(--ok)"><div class="kpi-l">Completadas</div><div class="kpi-v" id="completedTasks">0</div></div>
    <div class="kpi" style="--accent:var(--violet)"><div class="kpi-l">Horas</div><div class="kpi-v" id="totalHours">0</div></div>
</div>

<div class="toolbar">
    <select id="statusFilter" class="sel">
        <option value="">Todos los estados</option>
        <option value="pending">Pendientes</option>
        <option value="in_progress">En progreso</option>
        <option value="completed">Completadas</option>
        <option value="cancelled">Canceladas</option>
    </select>
    <select id="priorityFilter" class="sel">
        <option value="">Todas las prioridades</option>
        <option value="urgent">Urgente</option>
        <option value="high">Alta</option>
        <option value="medium">Media</option>
        <option value="low">Baja</option>
    </select>
    <select id="typeFilter" class="sel">
        <option value="">Todos los tipos</option>
        <option value="canvassing">Volanteo</option>
        <option value="phone_calls">Llamadas</option>
        <option value="event_support">Apoyo eventos</option>
        <option value="data_entry">Registro datos</option>
        <option value="social_media">Redes</option>
        <option value="other">Otros</option>
    </select>
    <a class="btn btn-ghost btn-sm" href="{{ url('/volunteer/dashboard') }}">Volver al panel</a>
</div>

<div class="card">
    <div class="card-h"><div class="card-t">Lista de tareas</div></div>
    <div class="tbl-wrap">
        <table class="tbl">
            <thead>
                <tr>
                    <th>Tarea</th>
                    <th>Tipo</th>
                    <th>Prioridad</th>
                    <th>Estado</th>
                    <th>Fecha límite</th>
                    <th>Horas</th>
                </tr>
            </thead>
            <tbody id="tasksTableBody"></tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
let tasks = [];
let filteredTasks = [];

async function loadTasks() {
    try {
        const token = localStorage.getItem('auth_token');
        const response = await fetch('/api/volunteer/tasks', {
            headers: { 'Authorization': `Bearer ${token || ''}`, 'Accept': 'application/json' }
        });
        const data = await response.json();
        tasks = data.tasks || [];
        if (!tasks.length) throw new Error('empty');
        filteredTasks = [...tasks];
        updateStats();
        renderTasks();
    } catch (error) {
        loadFallbackData();
    }
}

function loadFallbackData() {
    tasks = [
        { id: 1, title: 'Volanteo en Barrio Norte', description: 'Distribuir material promocional', task_type: 'canvassing', priority: 'high', status: 'pending', due_date: '2026-08-10', estimated_hours: 4, location: 'Barrio Norte' },
        { id: 2, title: 'Llamadas de confirmación', description: 'Confirmar asistencia al evento', task_type: 'phone_calls', priority: 'medium', status: 'in_progress', due_date: '2026-08-08', estimated_hours: 2, location: 'Oficina' },
        { id: 3, title: 'Apoyo en evento comunitario', description: 'Apoyo logístico', task_type: 'event_support', priority: 'urgent', status: 'completed', due_date: '2026-08-05', estimated_hours: 6, actual_hours: 5.5, location: 'Plaza Principal' },
        { id: 4, title: 'Captura QR zona centro', description: 'Revisión de afiches', task_type: 'other', priority: 'medium', status: 'pending', due_date: '2026-08-12', estimated_hours: 3, location: 'Centro' },
    ];
    filteredTasks = [...tasks];
    updateStats();
    renderTasks();
}

function updateStats() {
    document.getElementById('totalTasks').textContent = tasks.length;
    document.getElementById('pendingTasks').textContent = tasks.filter(t => t.status === 'pending').length;
    document.getElementById('completedTasks').textContent = tasks.filter(t => t.status === 'completed').length;
    document.getElementById('totalHours').textContent = tasks.reduce((s, t) => s + (t.actual_hours || 0), 0).toFixed(1);
}

function pill(text, cls) { return `<span class="pill ${cls}">${text}</span>`; }

function renderTasks() {
    const tbody = document.getElementById('tasksTableBody');
    tbody.innerHTML = filteredTasks.map(task => `
        <tr>
            <td>
                <div style="font-weight:600">${task.title}</div>
                <div style="color:var(--muted-2);font-size:11.5px">${task.description || ''}</div>
                ${task.location ? `<div style="color:var(--cian);font-size:11px;margin-top:3px">${task.location}</div>` : ''}
            </td>
            <td>${pill(typeLabel(task.task_type), 'p-info')}</td>
            <td>${pill(prioLabel(task.priority), prioClass(task.priority))}</td>
            <td>${pill(statusLabel(task.status), statusClass(task.status))}</td>
            <td>${task.due_date ? new Date(task.due_date).toLocaleDateString() : '—'}</td>
            <td>${task.actual_hours ? task.actual_hours + 'h' : (task.estimated_hours || 0) + 'h est.'}</td>
        </tr>
    `).join('') || `<tr><td colspan="6"><div class="empty">No hay tareas para mostrar</div></td></tr>`;
}

function typeLabel(t){return ({canvassing:'Volanteo',phone_calls:'Llamadas',event_support:'Eventos',data_entry:'Datos',social_media:'Redes',other:'Otros'})[t]||t}
function prioLabel(p){return ({urgent:'Urgente',high:'Alta',medium:'Media',low:'Baja'})[p]||p}
function prioClass(p){return ({urgent:'p-bad',high:'p-warn',medium:'p-info',low:'p-ok'})[p]||'p-mute'}
function statusLabel(s){return ({pending:'Pendiente',in_progress:'En progreso',completed:'Completada',cancelled:'Cancelada'})[s]||s}
function statusClass(s){return ({pending:'p-warn',in_progress:'p-info',completed:'p-ok',cancelled:'p-bad'})[s]||'p-mute'}

function applyFilters() {
    const s = document.getElementById('statusFilter').value;
    const p = document.getElementById('priorityFilter').value;
    const t = document.getElementById('typeFilter').value;
    filteredTasks = tasks.filter(task =>
        (!s || task.status === s) && (!p || task.priority === p) && (!t || task.task_type === t)
    );
    renderTasks();
}

['statusFilter','priorityFilter','typeFilter'].forEach(id =>
    document.getElementById(id).addEventListener('change', applyFilters)
);
document.addEventListener('DOMContentLoaded', loadTasks);
</script>
@endpush