@extends('layouts.app')
@section('content')

<input type="hidden" id="hid_proyecto_id" value="{{ $proyecto->ID }}" />

<!-- Header -->
<div class="tk-card mb-3">
    <div class="tk-card-hdr d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <i class="bi bi-kanban me-1"></i>
            <span>{{ $proyecto->NOMBRE }}</span>
            <span class="ms-2">@php
                $badgeClass = match($proyecto->STATUS) { 'ACT' => 'proy-badge-act', 'PAU' => 'proy-badge-pau', 'COM' => 'proy-badge-com', default => 'proy-badge-can' };
            @endphp<span class="{{ $badgeClass }}">{{ $proyecto->STATUS_LABEL }}</span></span>
        </div>
        <div class="d-flex gap-1 flex-wrap">
            <a href="/ProyectosIT/Detalle/{{ $proyecto->ID }}" class="btn tk-btn tk-btn-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Detalle
            </a>
            <a href="/ProyectosIT/Index" class="btn tk-btn tk-btn-secondary btn-sm">
                <i class="bi bi-list me-1"></i>Proyectos
            </a>
            <button type="button" class="btn tk-btn tk-btn-primary btn-sm" onclick="cargarKanban()">
                <i class="bi bi-arrow-clockwise me-1"></i>Actualizar
            </button>
        </div>
    </div>
    <div class="tk-card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <div class="tk-label">Responsable</div>
                <div style="font-size:.85rem">{{ $proyecto->RESPONSABLE }}</div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Cliente</div>
                <div style="font-size:.85rem">{{ $proyecto->CLIENTE }}</div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Avance General</div>
                <div class="proy-progress-bar-outer">
                    <div class="proy-progress-bar-inner" id="barAvanceKanban" style="width:{{ $proyecto->PORCENTAJE_AVANCE }}%">
                        <span id="txtAvanceKanban">{{ $proyecto->PORCENTAJE_AVANCE }}%</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Horas</div>
                <div style="font-size:.85rem">{{ $proyecto->HORAS_EJECUTADAS }} / {{ $proyecto->PRESUPUESTO_HORAS }} h</div>
            </div>
        </div>
    </div>
</div>

<!-- Kanban Board -->
<div class="kanban-board" id="kanbanBoard">
    <div class="kanban-col" data-status="PEN">
        <div class="kanban-col-header" style="border-top:3px solid #6b7280">To Do <span class="kanban-count" id="countPEN">0</span></div>
        <div class="kanban-items" id="colPEN"></div>
    </div>
    <div class="kanban-col" data-status="PRO">
        <div class="kanban-col-header" style="border-top:3px solid #f59e0b">Doing <span class="kanban-count" id="countPRO">0</span></div>
        <div class="kanban-items" id="colPRO"></div>
    </div>
    <div class="kanban-col" data-status="COM">
        <div class="kanban-col-header" style="border-top:3px solid #14b8a6">Done <span class="kanban-count" id="countCOM">0</span></div>
        <div class="kanban-items" id="colCOM"></div>
    </div>
</div>

<!-- Modal Detalle Tarea Kanban -->
<div class="modal fade tk-modal" id="modalTareaKanban" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-list-check me-1"></i> Detalle Tarea</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="kb_tarea_id" value="0" />
                <div class="row g-2">
                    <div class="col-12">
                        <div class="tk-label">Nombre</div>
                        <input type="text" id="kb_tarea_nombre" class="tk-input" maxlength="200" />
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Descripcion</div>
                        <textarea id="kb_tarea_descripcion" class="tk-input" rows="2"></textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Responsable</div>
                        <select id="kb_tarea_responsable" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach ($usuarios as $u)
                                <option value="{{ $u->value }}">{{ $u->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Horas Estimadas</div>
                        <input type="number" id="kb_tarea_horas" class="tk-input" step="0.5" min="0" value="0" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Inicio</div>
                        <input type="date" id="kb_tarea_fecha_inicio" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Fin</div>
                        <input type="date" id="kb_tarea_fecha_fin" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Porcentaje</div>
                        <input type="range" id="kb_tarea_pct" class="form-range" min="0" max="100" step="5" value="0"
                               oninput="document.getElementById('kb_pct_label').textContent=this.value+'%'" />
                        <div class="text-center" style="font-size:1rem;font-weight:700;color:#14b8a6" id="kb_pct_label">0%</div>
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Status</div>
                        <select id="kb_tarea_status" class="tk-input">
                            <option value="PEN">Pendiente</option>
                            <option value="PRO">En progreso</option>
                            <option value="COM">Completado</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tk-btn tk-btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarTareaKanban()">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('js/Proyectos/funciones_proyectos.js') }}"></script>
<script>
// ── Kanban data cache ──
var _kanbanTareas = [];
var _kanbanDragging = false;

$(function () { cargarKanban(); });

function cargarKanban() {
    var idProyecto = parseInt($('#hid_proyecto_id').val()) || 0;
    if (idProyecto <= 0) return;

    $.post('/ProyectosIT/GetTareas', { id_proyecto: idProyecto }, function (data) {
        _kanbanTareas = data;
        renderKanban(data);
    });
}

function renderKanban(tareas) {
    var cols = { PEN: [], PRO: [], COM: [] };

    for (var i = 0; i < tareas.length; i++) {
        var t = tareas[i];
        var st = t.STATUS;
        if (!cols[st]) st = 'PEN';
        cols[st].push(t);
    }

    // Render each column
    for (var status in cols) {
        var html = '';
        var items = cols[status];
        for (var j = 0; j < items.length; j++) {
            var d = items[j];
            html += renderKanbanCard(d);
        }
        $('#col' + status).html(html);
        $('#count' + status).text(items.length);
    }

    // Update progress bar
    var totalPct = 0;
    for (var k = 0; k < tareas.length; k++) totalPct += tareas[k].PORCENTAJE;
    var avgPct = tareas.length > 0 ? Math.round(totalPct / tareas.length) : 0;
    $('#barAvanceKanban').css('width', avgPct + '%');
    $('#txtAvanceKanban').text(avgPct + '%');

    // Init drag and drop
    initKanbanDragDrop();
}

function renderKanbanCard(d) {
    var pctColor = d.PORCENTAJE >= 100 ? '#14b8a6' : d.PORCENTAJE >= 50 ? '#3b82f6' : d.PORCENTAJE > 0 ? '#f59e0b' : '#6b7280';
    return '<div class="kanban-card" draggable="true" data-id="' + d.ID + '" data-status="' + d.STATUS + '" onclick="abrirTareaKanban(' + d.ID + ')">' +
           '<div class="kanban-card-title">' + escapeHtml(d.NOMBRE) + '</div>' +
           '<div class="kanban-card-meta">' + escapeHtml(d.RESPONSABLE || 'Sin asignar') + (d.HORAS_ESTIMADAS > 0 ? ' &middot; ' + d.HORAS_ESTIMADAS + 'h' : '') + '</div>' +
           '<div class="kanban-card-progress">' +
             '<div style="background:var(--eq-surface);border-radius:.2rem;height:6px;overflow:hidden;border:1px solid var(--eq-border)">' +
               '<div style="background:' + pctColor + ';height:100%;width:' + d.PORCENTAJE + '%;transition:width .3s"></div>' +
             '</div>' +
             '<div style="font-size:.65rem;color:var(--eq-text-dim);text-align:right;margin-top:1px">' + d.PORCENTAJE + '%</div>' +
           '</div>' +
           '</div>';
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

// ── Drag & Drop ──
var _draggedCardId = null;

function initKanbanDragDrop() {
    // Drag start en cada tarjeta
    document.querySelectorAll('.kanban-card').forEach(function (card) {
        card.ondragstart = function (e) {
            _kanbanDragging = true;
            _draggedCardId = card.getAttribute('data-id');
            card.classList.add('dragging');
            e.dataTransfer.setData('text/plain', _draggedCardId);
            e.dataTransfer.effectAllowed = 'move';
        };
        card.ondragend = function () {
            card.classList.remove('dragging');
            _draggedCardId = null;
            document.querySelectorAll('.kanban-col').forEach(function (c) { c.classList.remove('drag-over'); });
            setTimeout(function () { _kanbanDragging = false; }, 200);
        };
    });

    // Drop zones: los .kanban-items dentro de cada columna
    document.querySelectorAll('.kanban-items').forEach(function (dropZone) {
        var col = dropZone.closest('.kanban-col');
        var newStatus = col.getAttribute('data-status');

        dropZone.ondragover = function (e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            col.classList.add('drag-over');
        };
        dropZone.ondragleave = function (e) {
            // Solo quitar si realmente salió de la zona (no si entró a un hijo)
            if (!dropZone.contains(e.relatedTarget)) {
                col.classList.remove('drag-over');
            }
        };
        dropZone.ondrop = function (e) {
            e.preventDefault();
            col.classList.remove('drag-over');

            var cardId = parseInt(e.dataTransfer.getData('text/plain'));
            if (!cardId || !newStatus) return;

            // Verificar que cambió de columna
            var currentCard = document.querySelector('.kanban-card[data-id="' + cardId + '"]');
            if (!currentCard) return;
            var oldStatus = currentCard.getAttribute('data-status');
            if (oldStatus === newStatus) return;

            // Determinar nuevo porcentaje
            var newPct;
            if (newStatus === 'PEN') newPct = 0;
            else if (newStatus === 'COM') newPct = 100;
            else {
                var tarea = _kanbanTareas.find(function (t) { return t.ID === cardId; });
                newPct = (tarea && tarea.PORCENTAJE > 0) ? tarea.PORCENTAJE : 10;
            }

            // Mover visualmente de inmediato (feedback instantáneo)
            dropZone.appendChild(currentCard);
            currentCard.setAttribute('data-status', newStatus);

            $.post('/ProyectosIT/ActualizarAvanceTarea', { id: cardId, porcentaje: newPct, status: newStatus }, function (r) {
                var res = typeof r === 'string' ? JSON.parse(r) : r;
                if (res.CODIGO === 'TRUE') {
                    tkToast('Tarea movida.', 'success');
                    cargarKanban(); // Recargar para actualizar contadores y progreso
                } else {
                    tkToast(res.MENSAJE || 'Error', 'error');
                    cargarKanban(); // Revertir visual
                }
            });
        };
    });

    // También permitir drop en la columna misma (por si suelta fuera del área de items)
    document.querySelectorAll('.kanban-col').forEach(function (col) {
        col.ondragover = function (e) { e.preventDefault(); col.classList.add('drag-over'); };
        col.ondragleave = function (e) {
            if (!col.contains(e.relatedTarget)) col.classList.remove('drag-over');
        };
    });
}

// ── Modal detalle tarea ──
function abrirTareaKanban(id) {
    if (_kanbanDragging) return;
    var tarea = _kanbanTareas.find(function (t) { return t.ID === id; });
    if (!tarea) return;

    $('#kb_tarea_id').val(tarea.ID);
    $('#kb_tarea_nombre').val(tarea.NOMBRE);
    $('#kb_tarea_descripcion').val(tarea.DESCRIPCION || '');
    $('#kb_tarea_responsable').val(tarea.RESPONSABLE || '');
    $('#kb_tarea_horas').val(tarea.HORAS_ESTIMADAS || 0);
    $('#kb_tarea_fecha_inicio').val(tarea.FECHA_INICIO || '');
    $('#kb_tarea_fecha_fin').val(tarea.FECHA_FIN || '');
    $('#kb_tarea_pct').val(tarea.PORCENTAJE || 0);
    $('#kb_pct_label').text((tarea.PORCENTAJE || 0) + '%');
    $('#kb_tarea_status').val(tarea.STATUS);
    new bootstrap.Modal(document.getElementById('modalTareaKanban')).show();
}

function guardarTareaKanban() {
    var nombre = $('#kb_tarea_nombre').val();
    if (!nombre) { tkToast('Nombre de tarea requerido.', 'warning'); return; }

    var id = parseInt($('#kb_tarea_id').val()) || 0;
    var idProyecto = parseInt($('#hid_proyecto_id').val()) || 0;
    var pct = parseInt($('#kb_tarea_pct').val()) || 0;
    var status = $('#kb_tarea_status').val();

    if (pct >= 100) status = 'COM';
    else if (pct > 0 && status === 'PEN') status = 'PRO';

    $.post('/ProyectosIT/ModificarTarea', {
        id: id,
        id_proyecto: idProyecto,
        nombre: nombre,
        descripcion: $('#kb_tarea_descripcion').val(),
        responsable: $('#kb_tarea_responsable').val(),
        fecha_inicio: $('#kb_tarea_fecha_inicio').val(),
        fecha_fin: $('#kb_tarea_fecha_fin').val(),
        horas_estimadas: $('#kb_tarea_horas').val() || 0,
        porcentaje: pct,
        status: status
    }, function (r) {
        var res = typeof r === 'string' ? JSON.parse(r) : r;
        if (res.CODIGO === 'TRUE') {
            tkToast('Tarea actualizada.', 'success');
            bootstrap.Modal.getInstance(document.getElementById('modalTareaKanban')).hide();
            cargarKanban();
        } else {
            tkToast(res.MENSAJE || 'Error', 'error');
        }
    });
}
</script>
@endpush