@extends('layouts.app')

@section('content')

<!-- KPIs -->
<div class="tk-dash-row">
    <div class="tk-dash-card">
        <div class="tk-dash-num" style="color:#14b8a6" id="kpiActivos">0</div>
        <div class="tk-dash-label">Activos</div>
    </div>
    <div class="tk-dash-card">
        <div class="tk-dash-num" style="color:#f59e0b" id="kpiPausados">0</div>
        <div class="tk-dash-label">Pausados</div>
    </div>
    <div class="tk-dash-card">
        <div class="tk-dash-num" style="color:#3b82f6" id="kpiCompletados">0</div>
        <div class="tk-dash-label">Completados</div>
    </div>
    <div class="tk-dash-card">
        <div class="tk-dash-num" style="color:#8b5cf6" id="kpiTotal">0</div>
        <div class="tk-dash-label">Total</div>
    </div>
</div>

<div class="tk-card">
    <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> Proyectos IT</div>
        <div class="d-flex gap-1">
            <button type="button" class="btn tk-btn tk-btn-secondary btn-sm" id="btnVistaGrid" onclick="cambiarVistaProyectos('grid')" style="opacity:1">
                <i class="bi bi-table me-1"></i>Tabla
            </button>
            <button type="button" class="btn tk-btn tk-btn-secondary btn-sm" id="btnVistaKanban" onclick="cambiarVistaProyectos('kanban')" style="opacity:.6">
                <i class="bi bi-kanban me-1"></i>Kanban
            </button>
        </div>
    </div>
    <div class="tk-card-body">
        <div class="mb-2 d-flex gap-2 align-items-center flex-wrap">
            <button type="button" class="btn tk-btn tk-btn-primary" onclick="abrirNuevoProyecto()">
                <i class="bi bi-plus-lg me-1"></i>Nuevo Proyecto
            </button>
            <button type="button" class="btn tk-btn tk-btn-secondary" onclick="cargarProyectos()">
                <i class="bi bi-arrow-clockwise me-1"></i>Actualizar
            </button>
            <input type="text" class="tk-grid-search" id="searchProyectos" placeholder="Buscar nombre, cliente, responsable..."
                   oninput="tkGridSearch('searchProyectos','gridProyectos',['NOMBRE','CLIENTE','RESPONSABLE','STATUS_LABEL'])" />
        </div>
        <!-- Vista Grid -->
        <div id="vistaGrid">
            <div id="gridProyectos"></div>
        </div>
        <!-- Vista Kanban de Status de Proyectos (drag & drop) -->
        <div id="vistaKanban" style="display:none">
            <div class="kanban-board" id="kanbanProyectos">
                <div class="kanban-col" data-status="ACT">
                    <div class="kanban-col-header" style="border-top:3px solid #14b8a6"><i class="bi bi-play-circle me-1"></i>Activo <span class="kanban-count" id="countProyACT">0</span></div>
                    <div class="kanban-items" id="colProyACT"></div>
                </div>
                <div class="kanban-col" data-status="PAU">
                    <div class="kanban-col-header" style="border-top:3px solid #f59e0b"><i class="bi bi-pause-circle me-1"></i>Pausado <span class="kanban-count" id="countProyPAU">0</span></div>
                    <div class="kanban-items" id="colProyPAU"></div>
                </div>
                <div class="kanban-col" data-status="COM">
                    <div class="kanban-col-header" style="border-top:3px solid #3b82f6"><i class="bi bi-check-circle me-1"></i>Completado <span class="kanban-count" id="countProyCOM">0</span></div>
                    <div class="kanban-items" id="colProyCOM"></div>
                </div>
                <div class="kanban-col" data-status="CAN">
                    <div class="kanban-col-header" style="border-top:3px solid #ef4444"><i class="bi bi-x-circle me-1"></i>Cancelado <span class="kanban-count" id="countProyCAN">0</span></div>
                    <div class="kanban-items" id="colProyCAN"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Crear/Editar Proyecto -->
<div class="modal fade tk-modal" id="modalProyecto" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalProyectoTitle"><i class="bi bi-kanban me-1"></i> Nuevo Proyecto</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="proy_id" value="0" />
                <div class="row g-2">
                    <div class="col-12">
                        <div class="tk-label">Nombre *</div>
                        <input type="text" id="proy_nombre" class="tk-input" maxlength="200" />
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Descripcion</div>
                        <textarea id="proy_descripcion" class="tk-input" rows="3"></textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Cliente
                            <button type="button" class="btn btn-sm p-0 ms-1" style="color:#14b8a6;font-size:.75rem;vertical-align:middle" onclick="toggleNuevoCliente()" title="Crear nuevo cliente">
                                <i class="bi bi-plus-circle"></i> Nuevo
                            </button>
                        </div>
                        <select id="proy_cliente" class="tk-input">
                            <option value="0">-- Sin cliente --</option>
                            @foreach($clientes as $c)
                                <option value="{{ $c->value }}">{{ $c->text }}</option>
                            @endforeach
                        </select>
                        <!-- Inline crear cliente -->
                        <div id="panelNuevoCliente" style="display:none" class="mt-1 p-2" style="border:1px dashed var(--eq-border);border-radius:.35rem">
                            <div class="row g-1">
                                <div class="col-8">
                                    <input type="text" id="nuevoClienteNombre" class="tk-input" placeholder="Nombre del cliente" />
                                </div>
                                <div class="col-4">
                                    <input type="text" id="nuevoClienteNit" class="tk-input" placeholder="NIT" />
                                </div>
                                <div class="col-12 mt-1">
                                    <button type="button" class="btn tk-btn tk-btn-primary btn-sm" onclick="crearClienteInline()">
                                        <i class="bi bi-check-lg me-1"></i>Crear
                                    </button>
                                    <button type="button" class="btn tk-btn tk-btn-secondary btn-sm ms-1" onclick="toggleNuevoCliente()">Cancelar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Responsable
                            <button type="button" class="btn btn-sm p-0 ms-1" style="color:#14b8a6;font-size:.75rem;vertical-align:middle" onclick="toggleNuevoResponsable()" title="Crear nuevo responsable">
                                <i class="bi bi-plus-circle"></i> Nuevo
                            </button>
                        </div>
                        <select id="proy_responsable" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($usuarios as $u)
                                <option value="{{ $u->value }}">{{ $u->text }}</option>
                            @endforeach
                        </select>
                        <!-- Inline crear responsable -->
                        <div id="panelNuevoResponsable" style="display:none" class="mt-1 p-2" style="border:1px dashed var(--eq-border);border-radius:.35rem">
                            <div class="row g-1">
                                <div class="col-6">
                                    <input type="text" id="nuevoRespUsuario" class="tk-input" placeholder="Usuario" />
                                </div>
                                <div class="col-6">
                                    <input type="text" id="nuevoRespNombre" class="tk-input" placeholder="Nombre completo" />
                                </div>
                                <div class="col-6">
                                    <input type="password" id="nuevoRespPassword" class="tk-input" placeholder="Contrase&ntilde;a" />
                                </div>
                                <div class="col-6">
                                    <input type="email" id="nuevoRespEmail" class="tk-input" placeholder="Email" />
                                </div>
                                <div class="col-12 mt-1">
                                    <button type="button" class="btn tk-btn tk-btn-primary btn-sm" onclick="crearResponsableInline()">
                                        <i class="bi bi-check-lg me-1"></i>Crear
                                    </button>
                                    <button type="button" class="btn tk-btn tk-btn-secondary btn-sm ms-1" onclick="toggleNuevoResponsable()">Cancelar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Inicio</div>
                        <input type="date" id="proy_fecha_inicio" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Fin Estimada</div>
                        <input type="date" id="proy_fecha_fin" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Presupuesto Horas</div>
                        <input type="number" id="proy_horas" class="tk-input" step="0.5" min="0" value="0" />
                    </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="guardarProyecto()">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('js/Proyectos/funciones_proyectos.js') }}"></script>
<script>
// ── Datos cache para kanban de proyectos ──
var _proyectosData = [];
var _vistaActual = 'grid';

$(function () { cargarProyectos(); });

// ── Toggle vista Grid / Kanban ──
function cambiarVistaProyectos(vista) {
    _vistaActual = vista;
    if (vista === 'kanban') {
        $('#vistaGrid').hide();
        $('#vistaKanban').show();
        $('#searchProyectos').hide();
        $('#btnVistaGrid').css('opacity', '.6');
        $('#btnVistaKanban').css('opacity', '1');
        renderKanbanProyectos(_proyectosData);
    } else {
        $('#vistaKanban').hide();
        $('#vistaGrid').show();
        $('#searchProyectos').show();
        $('#btnVistaGrid').css('opacity', '1');
        $('#btnVistaKanban').css('opacity', '.6');
    }
}

// ── Kanban de Proyectos (drag & drop de status) ──
function renderKanbanProyectos(data) {
    var cols = { ACT: [], PAU: [], COM: [], CAN: [] };
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        var st = d.STATUS;
        if (!cols[st]) st = 'ACT';
        cols[st].push(d);
    }

    for (var status in cols) {
        var html = '';
        var items = cols[status];
        for (var j = 0; j < items.length; j++) {
            html += renderProyectoKanbanCard(items[j]);
        }
        $('#colProy' + status).html(html);
        $('#countProy' + status).text(items.length);
    }

    initProyectoKanbanDragDrop();
}

function renderProyectoKanbanCard(d) {
    var pctColor = d.PORCENTAJE_AVANCE >= 100 ? '#14b8a6' : d.PORCENTAJE_AVANCE >= 50 ? '#3b82f6' : d.PORCENTAJE_AVANCE > 0 ? '#f59e0b' : '#6b7280';
    return '<div class="kanban-card" draggable="true" data-id="' + d.ID + '" data-status="' + d.STATUS + '" onclick="verProyecto(' + d.ID + ')">' +
           '<div class="kanban-card-title">' + escapeHtml(d.NOMBRE) + '</div>' +
           '<div class="kanban-card-meta">' +
               '<i class="bi bi-person me-1"></i>' + escapeHtml(d.RESPONSABLE || 'Sin asignar') +
               (d.CLIENTE ? ' &middot; <i class="bi bi-building me-1"></i>' + escapeHtml(d.CLIENTE) : '') +
           '</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_AVANCE + '%;transition:width .3s"></div>' +
               '</div>' +
               '<div style="font-size:.65rem;color:var(--eq-text-dim);text-align:right;margin-top:1px">' + d.PORCENTAJE_AVANCE + '%</div>' +
           '</div>' +
           '</div>';
}

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

var _draggedProyId = null;

function initProyectoKanbanDragDrop() {
    document.querySelectorAll('#kanbanProyectos .kanban-card').forEach(function (card) {
        card.ondragstart = function (e) {
            _draggedProyId = card.getAttribute('data-id');
            card.classList.add('dragging');
            e.dataTransfer.setData('text/plain', _draggedProyId);
            e.dataTransfer.effectAllowed = 'move';
        };
        card.ondragend = function () {
            card.classList.remove('dragging');
            _draggedProyId = null;
            document.querySelectorAll('#kanbanProyectos .kanban-col').forEach(function (c) { c.classList.remove('drag-over'); });
        };
    });

    document.querySelectorAll('#kanbanProyectos .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) {
            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;

            var currentCard = document.querySelector('#kanbanProyectos .kanban-card[data-id="' + cardId + '"]');
            if (!currentCard) return;
            var oldStatus = currentCard.getAttribute('data-status');
            if (oldStatus === newStatus) return;

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

            $.post('/ProyectosIT/CambiarStatus', { id: cardId, status: newStatus }, function (r) {
                var res = typeof r === 'string' ? JSON.parse(r) : r;
                if (res.CODIGO === 'TRUE') {
                    tkToast('Status cambiado.', 'success');
                    cargarProyectos();
                } else {
                    tkToast(res.MENSAJE || 'Error', 'error');
                    cargarProyectos();
                }
            });
        };
    });

    document.querySelectorAll('#kanbanProyectos .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');
        };
    });
}

// ── Sobrescribir cargarProyectos para alimentar ambas vistas ──
var _origCargarProyectos = cargarProyectos;
cargarProyectos = function () {
    $.post('/ProyectosIT/GetProyectos', {}, function (data) {
        _proyectosData = data;
        // KPIs
        var act = 0, pau = 0, com = 0;
        $.each(data, function (i, d) {
            if (d.STATUS === 'ACT') act++;
            else if (d.STATUS === 'PAU') pau++;
            else if (d.STATUS === 'COM') com++;
        });
        $('#kpiActivos').text(act);
        $('#kpiPausados').text(pau);
        $('#kpiCompletados').text(com);
        $('#kpiTotal').text(data.length);

        // Grid
        var ds = new kendo.data.DataSource({ data: data, pageSize: 20 });
        var grid = $('#gridProyectos').data('kendoGrid');
        if (grid) { grid.setDataSource(ds); }
        else {
            $('#gridProyectos').kendoGrid({
                dataSource: ds,
                sortable: true,
                pageable: { pageSize: 20, buttonCount: 5 },
                resizable: true,
                columns: [
                    { field: 'ID', title: 'ID', width: 55 },
                    { field: 'NOMBRE', title: 'Proyecto', width: 180,
                        template: '<a href="/ProyectosIT/Detalle/#=ID#" style="color:\\#14b8a6;font-weight:600;text-decoration:none">#=NOMBRE#</a>'
                    },
                    { field: 'CLIENTE', title: 'Cliente', width: 140 },
                    { field: 'RESPONSABLE', title: 'Responsable', width: 120 },
                    { field: 'FECHA_INICIO', title: 'Inicio', width: 95 },
                    { field: 'FECHA_FIN', title: 'Fin Est.', width: 95 },
                    { field: 'PRESUPUESTO_HORAS', title: 'Hrs Pres.', width: 80 },
                    { field: 'PORCENTAJE_AVANCE', title: 'Avance', width: 110,
                        template: function (d) { return proyProgressBar(d.PORCENTAJE_AVANCE); }
                    },
                    { field: 'STATUS', title: 'Status', width: 90,
                        template: function (d) { return proyStatusBadge(d.STATUS, d.STATUS_LABEL); }
                    },
                    {
                        title: ' ', width: 80,
                        template: function (d) {
                            return '<button class="btn btn-sm" style="color:#14b8a6" onclick="verProyecto(' + d.ID + ')" title="Ver"><i class="bi bi-eye"></i></button>' +
                                   ' <button class="btn btn-sm" style="color:#ef4444" onclick="eliminarProyecto(' + d.ID + ')" title="Eliminar"><i class="bi bi-trash"></i></button>';
                        }
                    }
                ]
            });
        }

        // Kanban (si está visible)
        if (_vistaActual === 'kanban') {
            renderKanbanProyectos(data);
        }
    });
};

// ── Crear Cliente inline desde modal de proyecto ──
function toggleNuevoCliente() {
    var panel = $('#panelNuevoCliente');
    if (panel.is(':visible')) { panel.slideUp(); } else { panel.slideDown(); $('#nuevoClienteNombre').focus(); }
}

function crearClienteInline() {
    var nombre = $('#nuevoClienteNombre').val();
    if (!nombre) { tkToast('Ingrese el nombre del cliente.', 'warning'); return; }
    $.post('/TicketsCatalogos/InsertarCliente', { cliente: nombre, nit: $('#nuevoClienteNit').val(), intercompany: 0, telefono: '', email: '' }, function (r) {
        var res = typeof r === 'string' ? JSON.parse(r) : r;
        if (res.CODIGO === 'TRUE') {
            tkToast('Cliente creado.', 'success');
            $('#nuevoClienteNombre, #nuevoClienteNit').val('');
            $('#panelNuevoCliente').slideUp();
            // Recargar dropdown de clientes
            recargarDropdownClientes();
        } else { tkToast(res.MENSAJE || 'Error', 'error'); }
    });
}

function recargarDropdownClientes() {
    $.post('/TicketsCatalogos/GetClientes', {}, function (data) {
        var sel = $('#proy_cliente');
        var current = sel.val();
        sel.find('option:gt(0)').remove();
        $.each(data, function (i, d) {
            sel.append('<option value="' + d.ID + '">' + d.CLIENTE + '</option>');
        });
        // Seleccionar el último agregado
        if (data.length > 0) {
            var last = data[data.length - 1];
            sel.val(last.ID);
        } else if (current) { sel.val(current); }
    });
}

// ── Crear Responsable inline desde modal de proyecto ──
function toggleNuevoResponsable() {
    var panel = $('#panelNuevoResponsable');
    if (panel.is(':visible')) { panel.slideUp(); } else { panel.slideDown(); $('#nuevoRespUsuario').focus(); }
}

function crearResponsableInline() {
    var usuario = $('#nuevoRespUsuario').val(), nombre = $('#nuevoRespNombre').val();
    var password = $('#nuevoRespPassword').val(), email = $('#nuevoRespEmail').val();
    if (!usuario) { tkToast('Ingrese el usuario.', 'warning'); return; }
    if (!nombre) { tkToast('Ingrese el nombre.', 'warning'); return; }
    if (!password) { tkToast('Ingrese la contrase\u00f1a.', 'warning'); return; }
    $.post('/TicketsCatalogos/InsertarResponsable', { usuario: usuario, nombre: nombre, password: password, email: email, id_tipo: 2 }, function (r) {
        var res = typeof r === 'string' ? JSON.parse(r) : r;
        if (res.CODIGO === 'TRUE') {
            tkToast('Responsable creado.', 'success');
            $('#nuevoRespUsuario, #nuevoRespNombre, #nuevoRespPassword, #nuevoRespEmail').val('');
            $('#panelNuevoResponsable').slideUp();
            // Agregar al dropdown y seleccionar
            var sel = $('#proy_responsable');
            sel.append('<option value="' + usuario + '">' + nombre + '</option>');
            sel.val(usuario);
        } else { tkToast(res.MENSAJE || 'Error', 'error'); }
    });
}
</script>
@endpush
</content>
</invoke>