@extends('layouts.app')

@section('content')

<!-- ════════════ KPIs ════════════ -->
<div class="tk-kpi-row">
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorEstado('Creado')" title="Ver tickets abiertos">
        <div class="tk-kpi-icon" style="background:rgba(59,130,246,.1);color:#3b82f6"><i class="bi bi-inbox"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashAbiertos">0</div>
            <div class="tk-kpi-label">Abiertos</div>
        </div>
    </div>
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorEstado('En proceso')" title="Ver tickets en proceso">
        <div class="tk-kpi-icon" style="background:rgba(245,158,11,.1);color:#f59e0b"><i class="bi bi-arrow-repeat"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashEnProceso">0</div>
            <div class="tk-kpi-label">En Proceso</div>
        </div>
    </div>
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorSLA()" title="Ver SLA vencido">
        <div class="tk-kpi-icon" style="background:rgba(239,68,68,.1);color:#ef4444"><i class="bi bi-clock-history"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashVencidos">0</div>
            <div class="tk-kpi-label">SLA Vencido</div>
        </div>
    </div>
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorEstado('Cerrados Hoy')" title="Cerrados hoy">
        <div class="tk-kpi-icon" style="background:rgba(20,184,166,.1);color:#14b8a6"><i class="bi bi-check2-circle"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashFinHoy">0</div>
            <div class="tk-kpi-label">Cerrados Hoy</div>
        </div>
    </div>
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorEstado('Creados Hoy')" title="Creados hoy">
        <div class="tk-kpi-icon" style="background:rgba(99,102,241,.1);color:#6366f1"><i class="bi bi-plus-circle"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashCreadosHoy">0</div>
            <div class="tk-kpi-label">Creados Hoy</div>
        </div>
    </div>
    <div class="tk-kpi tk-kpi-clickable" onclick="filtrarPorEstado('')" title="Mostrar todos">
        <div class="tk-kpi-icon" style="background:rgba(100,116,139,.1);color:#64748b"><i class="bi bi-collection"></i></div>
        <div class="tk-kpi-data">
            <div class="tk-kpi-num" id="dashTotal">0</div>
            <div class="tk-kpi-label">Todos</div>
        </div>
    </div>
</div>

<!-- ════════════ FILTROS ════════════ -->
<div class="tk-filters-bar">
    <div class="tk-filters-left">
        <button type="button" class="tk-filter-btn tk-filter-btn-refresh" onclick="cargarDashboard(); cargarTicketsActivos()" title="Actualizar">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
        <div class="tk-filter-search">
            <i class="bi bi-search tk-filter-search-icon"></i>
            <input type="text" class="tk-filter-input" id="searchSeguimiento" placeholder="Buscar cliente, asignado, problema..."
                   oninput="tkGridSearch('searchSeguimiento','gridSeguimiento',['CLIENTE','USUARIOASIGNADO','CATEGORIA','PROBLEMA','REPORTA','DESCRIPCION'])" />
        </div>
    </div>
    <div class="tk-filters-right">
        <select id="filtroPrioridad" class="tk-filter-select" onchange="filtrarPorDropdown()" title="Prioridad">
            <option value="">Prioridad</option>
            <option value="Urgente">Urgente</option>
            <option value="Alta">Alta</option>
            <option value="Media">Media</option>
            <option value="Baja">Baja</option>
        </select>
        <select id="filtroEstadoSel" class="tk-filter-select" onchange="filtrarPorDropdown()" title="Estado">
            <option value="">Estado</option>
            <option value="Creado">Creado</option>
            <option value="En proceso">En proceso</option>
        </select>
        <select id="filtroAsignado" class="tk-filter-select" onchange="filtrarPorDropdown()" title="Asignado">
            <option value="">Asignado</option>
            @foreach($usuariosResponsables as $u)
                <option value="{{ $u->text }}">{{ $u->text }}</option>
            @endforeach
        </select>
        <span class="tk-filter-label">Desde</span>
        <input type="date" id="filtroFechaDesde" class="tk-filter-date" onchange="filtrarPorDropdown()" />
        <span class="tk-filter-label">Hasta</span>
        <input type="date" id="filtroFechaHasta" class="tk-filter-date" onchange="filtrarPorDropdown()" />
        <button type="button" class="tk-filter-btn tk-filter-btn-clear" onclick="limpiarFiltros()" title="Limpiar filtros">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
</div>
<div id="filtroActivoLabel" style="display:none" class="tk-filter-active-label">
    <span class="tk-filter-chip" id="filtroActivoTexto"></span>
    <a href="javascript:void(0)" onclick="limpiarFiltros()" class="tk-filter-chip-remove"><i class="bi bi-x-circle-fill"></i> Quitar</a>
</div>

<!-- ════════════ TABLA ════════════ -->
<div class="tk-grid-wrap">
    <div id="gridSeguimiento"></div>
</div>

<!-- ════════════ MODAL DETALLE ════════════ -->
<div class="modal fade tk-modal" id="modalDetalle" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header tk-modal-hdr-detalle">
                <div class="tk-modal-title-row">
                    <h6 class="modal-title"><i class="bi bi-ticket-detailed me-1"></i> Ticket #<span id="detTicketId"></span></h6>
                    <span id="detEstadoBadge" class="tk-pill ms-2"></span>
                    <span id="detPrioridadBadge" class="tk-pill ms-1"></span>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding:0">
                <!-- Seccion: Info General -->
                <div class="tk-det-section">
                    <div class="tk-det-section-title"><i class="bi bi-clipboard2-data me-1"></i> Informacion General</div>
                    <div class="row g-2">
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Cliente</span><span class="tk-det-value" id="detCliente"></span></div></div>
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Reporta</span><span class="tk-det-value" id="detReporta"></span></div></div>
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Categoria</span><span class="tk-det-value" id="detCategoria"></span></div></div>
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Problema</span><span class="tk-det-value" id="detProblema"></span></div></div>
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Asignado a</span><span class="tk-det-value" id="detAsignado"></span></div></div>
                        <div class="col-sm-6"><div class="tk-det-field"><span class="tk-det-label">Estado</span><span class="tk-det-value" id="detEstado"></span></div></div>
                    </div>
                </div>

                <!-- Seccion: Descripcion -->
                <div class="tk-det-section">
                    <div class="tk-det-section-title"><i class="bi bi-card-text me-1"></i> Descripcion</div>
                    <div class="tk-det-description" id="detDescripcion"></div>
                </div>

                <!-- Seccion: Seguimiento (Timeline) -->
                <div class="tk-det-section">
                    <div class="tk-det-section-title"><i class="bi bi-chat-dots me-1"></i> Seguimiento</div>
                    <div id="listaSeguimiento" class="tk-timeline"></div>
                </div>

                <!-- Seccion: Involucrados -->
                <div class="tk-det-section">
                    <div class="tk-det-section-title"><i class="bi bi-people me-1"></i> Involucrados / Observadores</div>
                    <div id="listaObservadores" style="margin-bottom:8px"></div>
                    <div class="d-flex gap-1" style="max-width:380px">
                        <select id="inp_observador" class="tk-field" style="font-size:.8rem">
                            <option value="">-- Agregar observador --</option>
                            @foreach($usuariosResponsables as $u)
                                <option value="{{ $u->value }}">{{ $u->text }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="tk-filter-btn tk-filter-btn-apply" onclick="agregarObservador()" style="white-space:nowrap">
                            <i class="bi bi-plus"></i> Agregar
                        </button>
                    </div>
                </div>

                <!-- Seccion: Adjuntos -->
                <div class="tk-det-section">
                    <div class="tk-det-section-title"><i class="bi bi-paperclip me-1"></i> Archivos Adjuntos</div>
                    <div id="listaAdjuntos"></div>
                    <div class="tk-dropzone" id="tkDropzoneTicket"
                         ondragover="tkDropOver(event,this)" ondragleave="tkDropLeave(event,this)"
                         ondrop="tkDropFile(event,this,'ticket')"
                         onclick="document.getElementById('inp_adjunto_ticket').click()">
                        <i class="bi bi-cloud-arrow-up-fill"></i>
                        <div class="tk-dropzone-text"><strong>Arrastra archivos aqui</strong> o haz click para seleccionar</div>
                        <div class="tk-dropzone-hint">JPG, PNG, PDF, DOCX, XLSX, TXT</div>
                        <input type="file" id="inp_adjunto_ticket" style="display:none"
                               onchange="subirAdjuntoTicket('ticket')"
                               accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt" />
                    </div>
                </div>
            </div>
            <div class="modal-footer tk-modal-footer-actions">
                <button type="button" class="tk-action-modal-btn tk-amb-secondary" onclick="abrirVincularProyecto()">
                    <i class="bi bi-kanban me-1"></i>Vincular Proyecto
                </button>
                <button type="button" class="tk-action-modal-btn tk-amb-secondary" onclick="abrirReasignar()">
                    <i class="bi bi-person-lines-fill me-1"></i>Reasignar
                </button>
                <button type="button" class="tk-action-modal-btn tk-amb-warning" onclick="abrirIniciar()" id="btnIniciar">
                    <i class="bi bi-play-fill me-1"></i>Iniciar
                </button>
                <button type="button" class="tk-action-modal-btn tk-amb-primary" onclick="abrirSeguimiento()">
                    <i class="bi bi-chat-left-text me-1"></i>Seguimiento
                </button>
                <button type="button" class="tk-action-modal-btn tk-amb-danger" onclick="abrirFinalizar()">
                    <i class="bi bi-check-circle me-1"></i>Finalizar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Seguimiento -->
<div class="modal fade tk-modal" id="modalSeguimiento" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-chat-left-text me-1"></i> Agregar Seguimiento</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="tk-field-label">Seguimiento</label>
                <textarea id="inp_seguimiento" class="tk-field" rows="4" placeholder="Describe el avance o accion realizada..."></textarea>
                <div class="mt-2">
                    <label class="tk-field-label">Adjuntar archivo <span class="tk-optional">(opcional)</span></label>
                    <input type="file" id="inp_adjunto_seguimiento" class="tk-field" style="font-size:.78rem" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="tk-action-modal-btn tk-amb-primary" onclick="guardarSeguimiento()"><i class="bi bi-send-fill me-1"></i>Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Finalizar -->
<div class="modal fade tk-modal" id="modalFinalizar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-check-circle me-1"></i> Finalizar Ticket</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="tk-field-label">Solucion aplicada</label>
                <textarea id="inp_solucion" class="tk-field" rows="4" placeholder="Describe como se resolvio el problema..."></textarea>
                <div class="mt-2">
                    <label class="tk-field-label">Adjuntar archivo <span class="tk-optional">(opcional)</span></label>
                    <input type="file" id="inp_adjunto_solucion" class="tk-field" style="font-size:.78rem" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="tk-action-modal-btn tk-amb-danger" onclick="finalizarTicket()"><i class="bi bi-check-circle me-1"></i>Finalizar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Reasignar -->
<div class="modal fade tk-modal" id="modalReasignar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-person-lines-fill me-1"></i> Reasignar Ticket</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="tk-field-label">Nuevo Responsable</label>
                <select id="inp_reasignar_usuario" class="tk-field">
                    <option value="">-- Seleccione --</option>
                    @foreach($usuariosResponsables as $item)
                        <option value="{{ $item->value }}">{{ $item->text }}</option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="tk-action-modal-btn tk-amb-primary" onclick="reasignarTicket()"><i class="bi bi-check me-1"></i>Reasignar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Vincular a Proyecto -->
<div class="modal fade tk-modal" id="modalVincularProyecto" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-kanban me-1"></i> Vincular Ticket a Proyecto</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="tk-field-label">Proyecto</label>
                <select id="inp_vincular_proyecto" class="tk-field">
                    <option value="">-- Seleccione --</option>
                    {{-- Proyectos no disponibles aun --}}
                    @foreach([] as $item)
                        <option value="{{ $item->value }}">{{ $item->text }}</option>
                    @endforeach
                </select>
                <p class="mt-2" style="font-size:.78rem;color:var(--eq-text-dim)">
                    Se creara una tarea en el proyecto seleccionado con los datos de este ticket.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="tk-action-modal-btn tk-amb-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="tk-action-modal-btn tk-amb-primary" onclick="vincularProyecto()"><i class="bi bi-link-45deg me-1"></i>Vincular</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>$(function(){ cargarDashboard(); cargarTicketsActivos(); });</script>
@endpush