{% extends 'base.html' %}

{% block title %}Kanban - Gestión de Pedidos{% endblock %}

{% block extra_css %}
<style>
    .kanban-container {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding: 1rem 0;
        min-height: calc(100vh - 200px);
    }
    
    .kanban-column {
        flex: 1;
        min-width: 300px;
        background: #ecf0f1;
        border-radius: 8px;
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }
    
    .column-header {
        background: #34495e;
        color: white;
        padding: 1rem;
        border-radius: 4px;
        margin-bottom: 1rem;
        font-weight: bold;
        text-align: center;
    }
    
    .column-header.pendiente-revision { background: #95a5a6; }
    .column-header.en-revision { background: #f39c12; }
    .column-header.pendiente-materiales { background: #e74c3c; }
    .column-header.completado { background: #27ae60; }
    
    .card {
        background: white;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .card.urgente {
        border-left: 4px solid #e74c3c;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .card-title {
        font-weight: bold;
        font-size: 1.1rem;
    }
    
    .card-subtitle {
        color: #7f8c8d;
        font-size: 0.9rem;
    }
    
    .urgente-badge {
        background: #e74c3c;
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: bold;
    }
    
    .referencias-list {
        margin-top: 0.5rem;
    }
    
    .referencia-item {
        padding: 0.5rem;
        margin: 0.25rem 0;
        border-radius: 4px;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .referencia-item.completo {
        background: #d5f4e6;
        color: #27ae60;
    }
    
    .referencia-item.parcial {
        background: #fff3cd;
        color: #856404;
    }
    
    .referencia-item.pendiente {
        background: #f8d7da;
        color: #721c24;
    }
    
    .referencia-codigo {
        font-weight: bold;
        font-family: monospace;
    }
    
    .filters {
        background: white;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .filter-input {
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 0.9rem;
    }
    
    .refresh-btn {
        margin-left: auto;
    }
    
    .empty-column {
        text-align: center;
        color: #95a5a6;
        padding: 2rem;
        font-style: italic;
    }
</style>
{% endblock %}

{% block content %}
<div class="filters">
    <input type="text" id="search-input" class="filter-input" placeholder="Buscar por matrícula o número de pedido...">
    <select id="estado-filter" class="filter-input">
        <option value="">Todos los estados</option>
        <option value="pendiente_revision">Pendiente Revisión</option>
        <option value="en_revision">En Revisión</option>
        <option value="pendiente_materiales">Pendiente Materiales</option>
        <option value="completado">Completado</option>
    </select>
    <label>
        <input type="checkbox" id="urgente-only"> Solo urgentes
    </label>
    <button class="btn btn-primary refresh-btn" onclick="loadKanban()">Actualizar</button>
</div>

<div class="kanban-container" id="kanban-container">
    <div class="kanban-column">
        <div class="column-header pendiente-revision">Pendiente Revisión</div>
        <div id="col-pendiente-revision" class="cards-container"></div>
    </div>
    <div class="kanban-column">
        <div class="column-header en-revision">En Revisión</div>
        <div id="col-en-revision" class="cards-container"></div>
    </div>
    <div class="kanban-column">
        <div class="column-header pendiente-materiales">Pendiente Materiales</div>
        <div id="col-pendiente-materiales" class="cards-container"></div>
    </div>
    <div class="kanban-column">
        <div class="column-header completado">Completado</div>
        <div id="col-completado" class="cards-container"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const API_BASE = '/api';

function createCard(pedido) {
    const card = document.createElement('div');
    card.className = 'card';
    if (pedido.es_urgente) {
        card.classList.add('urgente');
    }
    
    const fechaCita = pedido.fecha_cita ? new Date(pedido.fecha_cita).toLocaleString('es-ES') : 'Sin fecha';
    
    card.innerHTML = `
        <div class="card-header">
            <div>
                <div class="card-title">Pedido ${pedido.numero_pedido}</div>
                <div class="card-subtitle">${pedido.cliente.matricula_vehiculo} - ${pedido.cliente.nombre}</div>
            </div>
            ${pedido.es_urgente ? '<span class="urgente-badge">URGENTE</span>' : ''}
        </div>
        <div class="card-subtitle" style="margin-bottom: 0.5rem;">Cita: ${fechaCita}</div>
        <div class="referencias-list">
            ${pedido.referencias.map(ref => {
                const estadoClass = ref.estado === 'completo' ? 'completo' : 
                                   ref.estado === 'parcial' ? 'parcial' : 'pendiente';
                return `
                    <div class="referencia-item ${estadoClass}">
                        <div>
                            <span class="referencia-codigo">${ref.referencia}</span>
                            <div style="font-size: 0.8rem;">${ref.denominacion}</div>
                        </div>
                        <div style="text-align: right;">
                            <div>${ref.unidades_solicitadas} unidades</div>
                            <div style="font-size: 0.8rem;">
                                Stock: ${ref.unidades_en_stock} | Pendiente: ${ref.unidades_pendientes}
                            </div>
                        </div>
                    </div>
                `;
            }).join('')}
        </div>
    `;
    
    card.onclick = () => {
        window.location.href = `/admin/gestion_pedidos/pedidocliente/${pedido.id}/change/`;
    };
    
    return card;
}

function renderKanban(data) {
    const columns = {
        'pendiente_revision': document.getElementById('col-pendiente-revision'),
        'en_revision': document.getElementById('col-en-revision'),
        'pendiente_materiales': document.getElementById('col-pendiente-materiales'),
        'completado': document.getElementById('col-completado'),
    };
    
    // Limpiar columnas
    Object.values(columns).forEach(col => {
        col.innerHTML = '';
    });
    
    // Renderizar tarjetas
    Object.entries(data).forEach(([estado, pedidos]) => {
        const column = columns[estado];
        if (!column) return;
        
        if (pedidos.length === 0) {
            column.innerHTML = '<div class="empty-column">No hay pedidos</div>';
        } else {
            pedidos.forEach(pedido => {
                column.appendChild(createCard(pedido));
            });
        }
    });
}

function loadKanban() {
    fetch(`${API_BASE}/kanban/`)
        .then(response => response.json())
        .then(data => {
            renderKanban(data);
        })
        .catch(error => {
            console.error('Error al cargar Kanban:', error);
        });
}

// Filtros
document.getElementById('search-input').addEventListener('input', (e) => {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.card').forEach(card => {
        const text = card.textContent.toLowerCase();
        card.style.display = text.includes(search) ? 'block' : 'none';
    });
});

document.getElementById('estado-filter').addEventListener('change', (e) => {
    const estado = e.target.value;
    if (!estado) {
        loadKanban();
        return;
    }
    
    fetch(`${API_BASE}/pedidos-cliente/?estado=${estado}`)
        .then(response => response.json())
        .then(data => {
            const grouped = {
                'pendiente_revision': [],
                'en_revision': [],
                'pendiente_materiales': [],
                'completado': [],
            };
            grouped[estado] = data.results || data;
            renderKanban(grouped);
        });
});

// Auto-refresh cada 30 segundos
setInterval(loadKanban, 30000);

// Cargar inicial
loadKanban();
</script>
{% endblock %}