@extends('layouts.app')

@section('content')

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

<!-- Header del proyecto -->
<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 id="hdrNombre">{{ $proyecto->NOMBRE }}</span>
            <span class="ms-2" id="hdrStatusBadge">@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/Index" class="btn tk-btn tk-btn-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Volver
            </a>
            <a href="/ProyectosIT/Kanban/{{ $proyecto->ID }}" class="btn tk-btn btn-sm" style="background:#8b5cf6;color:#fff">
                <i class="bi bi-kanban me-1"></i>Vista Kanban
            </a>
            <button type="button" class="btn tk-btn tk-btn-info btn-sm" onclick="abrirEditarProyectoDetalle()">
                <i class="bi bi-pencil me-1"></i>Editar
            </button>
            <div class="dropdown d-inline-block">
                <button class="btn tk-btn tk-btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="bi bi-flag me-1"></i>Cambiar Status
                </button>
                <ul class="dropdown-menu" style="background:var(--eq-surface);border-color:var(--eq-border)">
                    <li><a class="dropdown-item" style="color:var(--eq-text);font-size:.82rem" href="javascript:cambiarStatus('ACT')"><span style="color:#14b8a6">&#9679;</span> Activo</a></li>
                    <li><a class="dropdown-item" style="color:var(--eq-text);font-size:.82rem" href="javascript:cambiarStatus('PAU')"><span style="color:#f59e0b">&#9679;</span> Pausado</a></li>
                    <li><a class="dropdown-item" style="color:var(--eq-text);font-size:.82rem" href="javascript:cambiarStatus('COM')"><span style="color:#3b82f6">&#9679;</span> Completado</a></li>
                    <li><a class="dropdown-item" style="color:var(--eq-text);font-size:.82rem" href="javascript:cambiarStatus('CAN')"><span style="color:#ef4444">&#9679;</span> Cancelado</a></li>
                </ul>
            </div>
            <div class="d-inline-block ms-1" style="font-size:.7rem;color:var(--eq-text-dim);vertical-align:middle">
                <i class="bi bi-info-circle me-1"></i>Tip: En la vista Proyectos puedes arrastrar proyectos entre columnas Kanban para cambiar status
            </div>
        </div>
    </div>
    <div class="tk-card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <div class="tk-label">Responsable</div>
                <div style="font-size:.85rem" id="hdrResponsable">{{ $proyecto->RESPONSABLE }}</div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Cliente</div>
                <div style="font-size:.85rem" id="hdrCliente">{{ $proyecto->CLIENTE }}</div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Fecha Inicio</div>
                <div style="font-size:.85rem" id="hdrFechaInicio">{{ $proyecto->FECHA_INICIO }}</div>
            </div>
            <div class="col-md-3">
                <div class="tk-label">Fecha Fin Estimada</div>
                <div style="font-size:.85rem" id="hdrFechaFin">{{ $proyecto->FECHA_FIN }}</div>
            </div>
            <div class="col-12" style="{{ trim($proyecto->DESCRIPCION ?? '') === '' ? 'display:none' : '' }}">
                <div class="tk-label">Descripcion</div>
                <div style="font-size:.85rem" id="hdrDescripcion">{{ $proyecto->DESCRIPCION }}</div>
            </div>
            <!-- Barra progreso general -->
            <div class="col-12">
                <div class="tk-label">Avance General</div>
                <div class="proy-progress-bar-outer">
                    <div class="proy-progress-bar-inner" id="barAvanceGeneral" style="width:{{ $proyecto->PORCENTAJE_AVANCE }}%">
                        <span id="txtAvanceGeneral">{{ $proyecto->PORCENTAJE_AVANCE }}%</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- KPIs -->
        <div class="tk-dash-row mt-3">
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#14b8a6" id="kpiPresupuesto">{{ $proyecto->PRESUPUESTO_HORAS }}</div>
                <div class="tk-dash-label">Horas Presupuesto</div>
            </div>
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#f59e0b" id="kpiEjecutadas">{{ $proyecto->HORAS_EJECUTADAS }}</div>
                <div class="tk-dash-label">Horas Ejecutadas</div>
            </div>
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#ef4444" id="kpiPendientes">0</div>
                <div class="tk-dash-label">Tareas Pendientes</div>
            </div>
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#3b82f6" id="kpiCompletadas">0</div>
                <div class="tk-dash-label">Tareas Completadas</div>
            </div>
        </div>
    </div>
</div>

<!-- Tareas -->
<div class="tk-card mb-3">
    <div class="tk-card-hdr"><i class="bi bi-list-check me-1"></i> Tareas</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="abrirNuevaTarea()">
                <i class="bi bi-plus-lg me-1"></i>Nueva Tarea
            </button>
            <button type="button" class="btn tk-btn tk-btn-secondary" onclick="cargarTareas()">
                <i class="bi bi-arrow-clockwise me-1"></i>Actualizar
            </button>
            <input type="text" class="tk-grid-search" id="searchTareas" placeholder="Buscar tarea..."
                   oninput="tkGridSearch('searchTareas','gridTareas',['NOMBRE','RESPONSABLE','STATUS_LABEL'])" />
        </div>
        <div id="gridTareas"></div>
    </div>
</div>

<!-- Notas / Bitacora -->
<div class="tk-card mb-3">
    <div class="tk-card-hdr"><i class="bi bi-journal-text me-1"></i> Notas / Bitacora</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="abrirNuevaNota()">
                <i class="bi bi-plus-lg me-1"></i>Agregar Nota
            </button>
        </div>
        <div id="listaNotas"></div>
    </div>
</div>

<!-- Modal Editar Proyecto (desde Detalle) -->
<div class="modal fade tk-modal" id="modalEditarProyecto" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-pencil me-1"></i> Editar Proyecto</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2">
                    <div class="col-12">
                        <div class="tk-label">Nombre *</div>
                        <input type="text" id="edit_nombre" class="tk-input" maxlength="200" value="{{ $proyecto->NOMBRE }}" />
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Descripcion</div>
                        <textarea id="edit_descripcion" class="tk-input" rows="3">{{ $proyecto->DESCRIPCION }}</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="toggleNuevoClienteDetalle()" title="Crear nuevo cliente">
                                <i class="bi bi-plus-circle"></i> Nuevo
                            </button>
                        </div>
                        <select id="edit_cliente" class="tk-input">
                            <option value="0">-- Sin cliente --</option>
                            @foreach($clientes as $c)
                                @if($c->value == (string)$proyecto->ID_CLIENTE)
                                    <option value="{{ $c->value }}" selected>{{ $c->text }}</option>
                                @else
                                    <option value="{{ $c->value }}">{{ $c->text }}</option>
                                @endif
                            @endforeach
                        </select>
                        <div id="panelNuevoClienteDetalle" style="display:none" class="mt-1 p-2">
                            <div class="row g-1">
                                <div class="col-8"><input type="text" id="nuevoClienteNombreDet" class="tk-input" placeholder="Nombre" /></div>
                                <div class="col-4"><input type="text" id="nuevoClienteNitDet" 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="crearClienteInlineDetalle()"><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="toggleNuevoClienteDetalle()">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="toggleNuevoResponsableDetalle()" title="Crear nuevo responsable">
                                <i class="bi bi-plus-circle"></i> Nuevo
                            </button>
                        </div>
                        <select id="edit_responsable" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($usuarios as $u)
                                @if($u->value == $proyecto->RESPONSABLE)
                                    <option value="{{ $u->value }}" selected>{{ $u->text }}</option>
                                @else
                                    <option value="{{ $u->value }}">{{ $u->text }}</option>
                                @endif
                            @endforeach
                        </select>
                        <div id="panelNuevoResponsableDetalle" style="display:none" class="mt-1 p-2">
                            <div class="row g-1">
                                <div class="col-6"><input type="text" id="nuevoRespUsuarioDet" class="tk-input" placeholder="Usuario" /></div>
                                <div class="col-6"><input type="text" id="nuevoRespNombreDet" class="tk-input" placeholder="Nombre" /></div>
                                <div class="col-6"><input type="password" id="nuevoRespPasswordDet" class="tk-input" placeholder="Contrase&ntilde;a" /></div>
                                <div class="col-6"><input type="email" id="nuevoRespEmailDet" 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="crearResponsableInlineDetalle()"><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="toggleNuevoResponsableDetalle()">Cancelar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Inicio</div>
                        <input type="date" id="edit_fecha_inicio" class="tk-input" value="{{ $proyecto->FECHA_INICIO }}" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Fin Estimada</div>
                        <input type="date" id="edit_fecha_fin" class="tk-input" value="{{ $proyecto->FECHA_FIN }}" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Presupuesto Horas</div>
                        <input type="number" id="edit_horas" class="tk-input" step="0.5" min="0" value="{{ $proyecto->PRESUPUESTO_HORAS }}" />
                    </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="guardarEdicionProyecto()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Crear/Editar Tarea -->
<div class="modal fade tk-modal" id="modalTarea" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalTareaTitle"><i class="bi bi-list-check me-1"></i> Nueva 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="tarea_id" value="0" />
                <div class="row g-2">
                    <div class="col-12">
                        <div class="tk-label">Nombre *</div>
                        <input type="text" id="tarea_nombre" class="tk-input" maxlength="200" />
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Descripcion</div>
                        <textarea id="tarea_descripcion" class="tk-input" rows="2"></textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Responsable</div>
                        <select id="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="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="tarea_fecha_inicio" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Fecha Fin</div>
                        <input type="date" id="tarea_fecha_fin" class="tk-input" />
                    </div>
                    <div class="col-md-4 d-none" id="divTareaPct">
                        <div class="tk-label">Porcentaje</div>
                        <input type="number" id="tarea_porcentaje" class="tk-input" min="0" max="100" 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="guardarTarea()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Actualizar Avance -->
<div class="modal fade tk-modal" id="modalAvance" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-speedometer me-1"></i> Actualizar Avance</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="avance_id" value="0" />
                <div class="tk-label">Tarea</div>
                <div id="avance_nombre" style="font-size:.85rem;margin-bottom:.5rem;color:var(--eq-text)"></div>
                <div class="tk-label">Porcentaje</div>
                <input type="range" id="avance_pct" class="form-range" min="0" max="100" step="5" value="0" oninput="$('#avance_pct_label').text(this.value+'%')" />
                <div class="text-center" style="font-size:1.2rem;font-weight:700;color:#14b8a6" id="avance_pct_label">0%</div>
                <div class="tk-label mt-2">Status</div>
                <select id="avance_status" class="tk-input">
                    <option value="PEN">Pendiente</option>
                    <option value="PRO">En progreso</option>
                    <option value="COM">Completado</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarAvance()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Agregar Nota -->
<div class="modal fade tk-modal" id="modalNota" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-journal-text me-1"></i> Agregar Nota</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="tk-label">Nota</div>
                <textarea id="nota_texto" class="tk-input" rows="4"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarNota()">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('js/Proyectos/funciones_proyectos.js') }}"></script>
<script>
$(function(){ cargarTareas(); cargarNotas(); });

// ── Crear Cliente inline (Detalle) ──
function toggleNuevoClienteDetalle() {
    var p = $('#panelNuevoClienteDetalle');
    p.is(':visible') ? p.slideUp() : p.slideDown();
}
function crearClienteInlineDetalle() {
    var nombre = $('#nuevoClienteNombreDet').val();
    if (!nombre) { tkToast('Ingrese el nombre del cliente.', 'warning'); return; }
    $.post('/TicketsCatalogos/InsertarCliente', { cliente: nombre, nit: $('#nuevoClienteNitDet').val(), intercompany: 0, telefono: '', email: '' }, function (r) {
        var res = typeof r === 'string' ? JSON.parse(r) : r;
        if (res.CODIGO === 'TRUE') {
            tkToast('Cliente creado.', 'success');
            $('#nuevoClienteNombreDet, #nuevoClienteNitDet').val('');
            $('#panelNuevoClienteDetalle').slideUp();
            $.post('/TicketsCatalogos/GetClientes', {}, function (data) {
                var sel = $('#edit_cliente');
                sel.find('option:gt(0)').remove();
                $.each(data, function (i, d) { sel.append('<option value="' + d.ID + '">' + d.CLIENTE + '</option>'); });
                if (data.length > 0) sel.val(data[data.length - 1].ID);
            });
        } else { tkToast(res.MENSAJE || 'Error', 'error'); }
    });
}

// ── Crear Responsable inline (Detalle) ──
function toggleNuevoResponsableDetalle() {
    var p = $('#panelNuevoResponsableDetalle');
    p.is(':visible') ? p.slideUp() : p.slideDown();
}
function crearResponsableInlineDetalle() {
    var usuario = $('#nuevoRespUsuarioDet').val(), nombre = $('#nuevoRespNombreDet').val();
    var password = $('#nuevoRespPasswordDet').val(), email = $('#nuevoRespEmailDet').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');
            $('#nuevoRespUsuarioDet, #nuevoRespNombreDet, #nuevoRespPasswordDet, #nuevoRespEmailDet').val('');
            $('#panelNuevoResponsableDetalle').slideUp();
            var sel = $('#edit_responsable');
            sel.append('<option value="' + usuario + '">' + nombre + '</option>');
            sel.val(usuario);
        } else { tkToast(res.MENSAJE || 'Error', 'error'); }
    });
}
</script>
@endpush