@extends('layouts.app')

@section('content')
<div class="tk-card">
    <div class="tk-card-hdr"><i class="bi bi-check2-all me-1"></i> Tickets Finalizados</div>
    <div class="tk-card-body">
        <div class="d-flex gap-2 mb-3 align-items-end flex-wrap">
            <div>
                <div class="tk-label">Fecha Desde</div>
                <input type="date" id="filtroFecha1" class="tk-input" style="width:150px" value="{{ date('Y-m-d') }}" />
            </div>
            <div>
                <div class="tk-label">Fecha Hasta</div>
                <input type="date" id="filtroFecha2" class="tk-input" style="width:150px" value="{{ date('Y-m-d') }}" />
            </div>
            <button type="button" class="btn tk-btn tk-btn-primary" onclick="filtrarFinalizados()">
                <i class="bi bi-funnel me-1"></i>Filtrar
            </button>
            <button type="button" class="btn tk-btn tk-btn-secondary" onclick="$('#filtroFecha1,#filtroFecha2').val(''); cargarTicketsFinalizados()">
                <i class="bi bi-arrow-clockwise me-1"></i>Todos
            </button>
            <button type="button" class="btn tk-btn" style="background:#16a34a;color:#fff" onclick="exportarFinalizadosExcel()">
                <i class="bi bi-file-earmark-spreadsheet me-1"></i>Exportar Excel
            </button>
            <input type="text" class="tk-grid-search ms-auto" id="searchFinalizados" placeholder="Buscar..."
                   oninput="tkGridSearch('searchFinalizados','gridFinalizados',['CLIENTE','USUARIOASIGNADO','CATEGORIA','PROBLEMA','SOLUCION'])" />
        </div>
        <div id="gridFinalizados"></div>
    </div>
</div>

<div class="modal fade tk-modal" id="modalDetalleFin" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-info-circle me-1"></i> Detalle Ticket #<span id="detFinId"></span></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="font-size:.82rem">
                <div class="row g-2">
                    <div class="col-6"><span class="tk-label">Cliente:</span> <span id="detFinCliente"></span></div>
                    <div class="col-6"><span class="tk-label">Reporta:</span> <span id="detFinReporta"></span></div>
                    <div class="col-6"><span class="tk-label">Categoría:</span> <span id="detFinCategoria"></span></div>
                    <div class="col-6"><span class="tk-label">Problema:</span> <span id="detFinProblema"></span></div>
                    <div class="col-6"><span class="tk-label">Asignado a:</span> <span id="detFinAsignado"></span></div>
                    <div class="col-6"><span class="tk-label">Estado:</span> <span id="detFinEstado"></span></div>
                    <div class="col-4"><span class="tk-label">Fecha Creación:</span> <span id="detFinFechaA"></span></div>
                    <div class="col-4"><span class="tk-label">Fecha Inicio:</span> <span id="detFinFechaI"></span></div>
                    <div class="col-4"><span class="tk-label">Fecha Cierre:</span> <span id="detFinFechaF"></span></div>
                    <div class="col-12"><span class="tk-label">Descripción:</span><p id="detFinDescripcion" class="mt-1"></p></div>
                    <div class="col-12"><span class="tk-label">Solución:</span><p id="detFinSolucion" class="mt-1" style="color:#14b8a6"></p></div>
                </div>
                <hr style="border-color:var(--eq-border)">
                <h6 style="font-size:.82rem; color:#14b8a6"><i class="bi bi-chat-dots me-1"></i>Seguimiento</h6>
                <div id="listaSeguimientoFin"></div>

                <hr style="border-color:var(--eq-border)">
                <h6 style="font-size:.82rem; color:#0ea5e9"><i class="bi bi-paperclip me-1"></i>Archivos Adjuntos</h6>
                <div id="listaAdjuntosFin"></div>
            </div>
        </div>
    </div>
</div>
@endsection

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