@extends('layouts.app')

@section('header')
    {{ auth()->user()->hasRole('admin') ? 'Todos los Tickets' : 'Mis Tickets' }}
@endsection

@section('content')
<div class="space-y-6" style="overflow: visible;">
    <!-- Filters and Actions -->
    <div class="bg-white rounded-lg shadow-lg border border-gray-300">
        <div class="p-6">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <div class="flex flex-col sm:flex-row gap-3 flex-1">
                    <!-- Search Form -->
                    <form method="GET" action="{{ route('tickets.index') }}" class="flex-1 flex gap-3">
                        <!-- Search Input -->
                        <div class="flex-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                </svg>
                            </div>
                            <input type="text"
                                   name="search"
                                   placeholder="Buscar por número, asunto, descripción o solicitante..."
                                   class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 transition-all bg-gray-50 placeholder-gray-400" style="focus:ring-color: #ebe300; focus:border-color: #ebe300; color: #404040;"
                                   value="{{ request('search') }}">
                        </div>

                        <!-- Estado Filter -->
                        <select name="status" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 transition-all bg-gray-50 font-medium" style="color: #404040;">
                            <option value="">Todos los estados</option>
                            @foreach($statuses as $status)
                                <option value="{{ $status->id }}" {{ request('status') == $status->id ? 'selected' : '' }}>
                                    {{ $status->name }}
                                </option>
                            @endforeach
                        </select>

                        <!-- Prioridad Filter -->
                        <select name="priority" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 transition-all bg-gray-50 font-medium" style="color: #404040;">
                            <option value="">Todas las prioridades</option>
                            @foreach($priorities as $priority)
                                <option value="{{ $priority->id }}" {{ request('priority') == $priority->id ? 'selected' : '' }}>
                                    {{ $priority->name }}
                                </option>
                            @endforeach
                        </select>

                        <!-- Botón de búsqueda -->
                        <button type="submit" class="px-4 py-2.5 bg-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-400 transition-all">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </button>

                        <!-- Botón de limpiar filtros -->
                        <a href="{{ route('tickets.index') }}" class="px-4 py-2.5 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-all">
                            Limpiar
                        </a>
                    </form>

                    <!-- Items por página -->
                    <form method="GET" action="{{ route('tickets.index') }}" class="flex items-center gap-2">
                        @foreach(request()->query() as $key => $value)
                            @if($key !== 'per_page')
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach
                        <label class="text-sm font-medium text-gray-700">Items por página:</label>
                        <select name="per_page" class="px-3 py-2.5 border border-gray-300 rounded-lg bg-gray-50 font-medium" style="color: #404040;" onchange="this.form.submit()">
                            <option value="10" {{ request('per_page', 15) == 10 ? 'selected' : '' }}>10</option>
                            <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                            <option value="25" {{ request('per_page', 15) == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('per_page', 15) == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page', 15) == 100 ? 'selected' : '' }}>100</option>
                        </select>
                    </form>
                </div>

                <div class="flex items-center gap-3">
                    <!-- Vista Selector -->
                    <div class="inline-flex rounded-lg border border-gray-300 bg-gray-100 p-1">
                        <button type="button" id="listViewBtn" class="px-4 py-2 rounded-lg text-sm font-semibold transition-all" style="background-color: transparent; color: #404040;">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                            </svg>
                        </button>
                        <button type="button" id="viewGrid" class="view-toggle px-3 py-2 rounded-md text-sm font-medium transition-all" style="background-color: #404040; color: white;">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                            </svg>
                        </button>
                    </div>


                </div>
            </div>
        </div>


    </div>

    <!-- Tickets List View (hidden by default) -->
    <div id="listView" class="hidden bg-white rounded-lg shadow-lg border border-gray-300 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Ticket</th>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Solicitante</th>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Asunto</th>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Instituciones</th>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Prioridad</th>
                        <th class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider" style="color: #404040;">Estado</th>
                        <th class="px-6 py-3 text-right text-xs font-bold uppercase tracking-wider" style="color: #404040;">Acciones</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($tickets ?? [] as $ticket)
                        <tr class="hover:bg-gray-100 transition-all ticket-row border-b border-gray-200"
                            data-ticket-number="{{ strtolower($ticket->ticket_number) }}"
                            data-subject="{{ strtolower($ticket->subject) }}"
                            data-requester="{{ strtolower($ticket->requester_user->name ?? '') }}"
                            data-status="{{ $ticket->ticket_status->name }}"
                            data-priority="{{ $ticket->priority->name }}">
                            <!-- Ticket (con creación) -->
                            <td class="px-6 py-4 align-top max-w-[180px] whitespace-normal">
                                <div class="text-sm font-medium text-gray-900">{{ $ticket->ticket_number }}</div>
                                <div class="text-xs text-gray-500">{{ $ticket->created_at->format('d/m/Y') }} · {{ $ticket->created_at->format('H:i') }}</div>
                            </td>
                            <!-- Solicitante -->
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-yellow-200 flex items-center justify-center ring-2 ring-yellow-300">
                                            <span class="text-yellow-800 font-bold text-sm">{{ strtoupper(substr($ticket->requester_user->name, 0, 2)) }}</span>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">{{ $ticket->requester_user->name }}</div>
                                        <div class="text-xs text-gray-500">{{ $ticket->requester_user->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <!-- Asunto -->
                            <td class="px-6 py-4 align-top max-w-[220px]">
                                <p class="text-sm font-semibold text-gray-900 whitespace-normal break-words" title="{{ $ticket->subject }}">{{ $ticket->subject }}</p>
                            </td>

                            <!-- Instituciones -->
                            <td class="px-6 py-4 whitespace-nowrap max-w-xs">
                                @if($ticket->institutions && $ticket->institutions->count())
                                    <div class="flex flex-wrap gap-1.5 max-w-xs">
                                        @foreach($ticket->institutions as $inst)
                                            <span class="inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full border" style="background-color:#E2E2E2; border-color:#E2E2E2; color:#404040;">
                                                {{ $inst->acronym ?? Str::limit($inst->name, 10) }}
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-sm text-gray-500">Sin instituciones</div>
                                @endif
                            </td>

                            <td class="px-6 py-4 align-top max-w-[160px] whitespace-normal">
                                @if($ticket->priority->name === 'Alta')
                                    <span class="inline-block px-2 py-0.5 text-[11px] font-semibold rounded-lg bg-red-100 text-red-800 break-words text-center w-full">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"/>
                                        </svg>
                                        {{ $ticket->priority->name }}
                                    </span>
                                @elseif($ticket->priority->name === 'Media')
                                    <span class="inline-block px-2 py-0.5 text-[11px] font-semibold rounded-lg bg-yellow-100 text-yellow-800 break-words text-center w-full">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"/>
                                        </svg>
                                        {{ $ticket->priority->name }}
                                    </span>
                                @else
                                    <span class="inline-block px-2 py-0.5 text-[11px] font-semibold rounded-lg bg-green-100 text-green-800 break-words text-center w-full">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"/>
                                        </svg>
                                        {{ $ticket->priority->name }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $estadoColors = [
                                        'Recibida' => 'bg-gray-100 text-gray-800',
                                        'En revisión técnica' => 'bg-blue-100 text-blue-800',
                                        'En evaluación del comité' => 'bg-purple-100 text-purple-800',
                                        'Aprobada / Pendiente de presupuesto' => 'bg-yellow-100 text-yellow-800',
                                        'En desarrollo' => 'bg-yellow-100 text-yellow-800',
                                        'En pruebas' => 'bg-orange-100 text-orange-800',
                                        'En confirmación del comité' => 'bg-pink-100 text-pink-800',
                                        'Cerrada' => 'bg-green-100 text-green-800',
                                        'Rechazada / En espera' => 'bg-red-100 text-red-800',
                                    ];
                                    $colorClass = $estadoColors[$ticket->ticket_status->name] ?? 'bg-gray-100 text-gray-800';
                                @endphp
                                <span class="inline-block px-2 py-0.5 text-[11px] leading-snug font-semibold rounded-lg {{ $colorClass }} break-words whitespace-normal text-center min-w-[9ch] max-w-[18ch]">
                                    {{ $ticket->ticket_status->name }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end gap-2">
                                    <button type="button" onclick='openTicketModal(@json($ticket))' class="inline-flex items-center px-3 py-1.5 text-white rounded-lg transition-all shadow-md hover:shadow-lg" style="background-color: #ebe300; color: #404040;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        Ver
                                    </button>
                                    <button type="button" onclick='openEditTicketModal(@json($ticket))' class="inline-flex items-center px-3 py-1.5 text-white rounded-lg transition-all shadow-md hover:shadow-lg" style="background-color: #404040; color: #fff;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h2m-7 7h2m3 0h2m3 0h2M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                        </svg>
                                        Editar
                                    </button>
                                    <!-- Acciones antiguas ocultas: cambiadas por Modal Editar -->
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-6 py-12 text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                </svg>
                                <p class="mt-2 text-sm text-gray-500">No hay tickets disponibles</p>
                                {{-- @if(auth()->user()->role === 'user')
                                    <a href="{{ route('tickets.create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                        Crear primer ticket
                                    </a>
                                @endif --}}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if(isset($tickets) && $tickets->hasPages())
            <div class="px-6 py-4 border-t border-gray-300 bg-gray-50">
                <div class="pagination-custom">
                    {{ $tickets->appends(request()->query())->links() }}
                </div>
            </div>
        @endif
    </div>

    <!-- Tickets Grid View (default visible) -->
    <div id="gridView" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" style="overflow: visible;">
        @forelse($tickets ?? [] as $ticket)
            <div class="bg-white rounded-lg border border-gray-300 transition-all ticket-card" style="overflow: visible; border-color: #404040;" onmouseover="this.style.borderColor='#ebe300'" onmouseout="this.style.borderColor='#404040'"
                 data-ticket-number="{{ strtolower($ticket->ticket_number) }}"
                 data-subject="{{ strtolower($ticket->subject) }}"
                 data-requester="{{ strtolower($ticket->requester_user->name ?? '') }}"
                 data-status="{{ $ticket->ticket_status->name }}"
                 data-priority="{{ $ticket->priority->name }}">
                <!-- Card Header -->
                <div class="p-5 pb-4" style="overflow: visible;">
                    <div class="flex items-start justify-between mb-3">
                        <div class="overflow-hidden">
                            <h3 class="text-lg font-bold text-gray-900">{{ $ticket->ticket_number }}</h3>
                            <p class="text-sm font-semibold text-gray-800 mt-1">{{ $ticket->subject }}</p>
                        </div>
                        <div class="flex flex-col gap-1.5 ml-3">
                            @if($ticket->priority->name === 'Alta')
                                <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg bg-red-600 text-white">
                                    Urgente
                                </span>
                            @elseif($ticket->priority->name === 'Media')
                                <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg bg-yellow-600 text-white">
                                    Media
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg bg-green-600 text-white">
                                    Baja
                                </span>
                            @endif
                            @php
                                $estadoColors = [
                                    'Recibida' => 'bg-gray-600',
                                    'En revisión técnica' => 'bg-blue-600',
                                    'En evaluación del comité' => 'bg-purple-600',
                                    'Aprobada / Pendiente de presupuesto' => 'bg-yellow-600',
                                    'En Espera' => 'bg-yellow-600',
                                    'En desarrollo' => 'bg-yellow-600',
                                    'En pruebas' => 'bg-orange-600',
                                    'En confirmación del comité' => 'bg-pink-600',
                                    'Cerrada' => 'bg-green-600',
                                    'Rechazada / En espera' => 'bg-red-600',
                                ];
                                $estadoBadge = $estadoColors[$ticket->ticket_status->name] ?? 'bg-gray-600';
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg {{ $estadoBadge }} text-white">
                                {{ Str::limit($ticket->ticket_status->name, 10) }}
                            </span>
                        </div>
                    </div>

                    <!-- Información con iconos -->
                    <div class="space-y-2.5 mb-4" style="overflow: visible;">
                        <!-- Solicitante -->
                        <div class="flex items-center text-sm">
                            <svg class="w-4 h-4 text-gray-500 mr-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span class="text-gray-600 font-medium mr-1.5">Solicitante:</span>
                            <span class="text-gray-900">{{ $ticket->requester_user->name }}</span>
                        </div>

                        <!-- Usuario Asignado -->
                        <div class="flex items-center text-sm">
                            <svg class="w-4 h-4 text-gray-500 mr-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span class="text-gray-600 font-medium mr-1.5">Analista:</span>
                            <span class="text-gray-900">{{ $ticket->assigned_user_id ? 'Administrador' : 'Sin asignar' }}</span>
                        </div>

                        <!-- Fecha -->
                        <div class="flex items-center text-sm">
                            <svg class="w-4 h-4 text-gray-500 mr-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <span class="text-gray-600 font-medium mr-1.5">Fecha:</span>
                            <span class="text-gray-900">{{ $ticket->created_at->format('Y-m-d') }}</span>
                        </div>

                  
                    </div>
                </div>

                <!-- Card Footer -->
                <div class="px-5 pb-5 flex gap-2">
                    <button type="button" onclick='openTicketModal(@json($ticket))' class="w-1/2 inline-flex items-center justify-center px-4 py-2.5 text-white rounded font-semibold transition-all text-sm" style="background-color: #ebe300; color: #404040;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                        Ver Detalles
                    </button>
                    <button type="button" onclick='openEditTicketModal(@json($ticket))' class="w-1/2 inline-flex items-center justify-center px-4 py-2.5 text-white rounded font-semibold transition-all text-sm" style="background-color: #404040; color: #FFFFFF;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                        Editar
                    </button>
                </div>
            </div>
        @empty
            <div class="col-span-full">
                <div class="bg-white rounded-lg shadow-lg border border-gray-300 p-12 text-center">
                    <svg class="mx-auto h-16 w-16 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                    <h3 class="mt-4 text-lg font-bold text-gray-900">No hay tickets disponibles</h3>
                    <p class="mt-2 text-sm text-gray-500">No hay tickets disponibles</p>
                    @if(!auth()->user()->hasRole('admin'))
                        <a href="{{ route('tickets.create') }}" class="inline-flex items-center px-6 py-2.5 text-white rounded-lg transition-all text-sm font-semibold shadow-md hover:shadow-lg" style="background-color: #ebe300; color: #404040;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Crear primer ticket
                        </a>
                    @endif
                </div>
            </div>
        @endforelse

        <!-- Pagination for Grid -->
        @if(isset($tickets) && $tickets->hasPages())
            <div class="col-span-full">
                <div class="bg-white rounded-lg shadow-lg border border-gray-300 px-6 py-4">
                    <div class="pagination-custom">
                        {{ $tickets->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Toast Notification -->
<div id="toast" class="hidden fixed top-4 right-4 z-[60]" style="display: none;">
    <div class="bg-green-600 text-white px-6 py-4 rounded-lg shadow-2xl flex items-center gap-3 min-w-[300px]">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
            <p class="font-semibold" id="toastMessage">Actualizado exitosamente</p>
        </div>
    </div>
</div>                                                  
<!-- Modal de Detalles del Ticket -->
<div id="ticketModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-y-auto border border-gray-300">
            <!-- Modal Header -->
            <div class="sticky top-0 bg-white border-b border-gray-300 z-10">
                <div class="px-6 py-4 flex items-center justify-between">
                    <div class="flex-1">
                        <h3 id="modalTicketNumber" class="text-2xl font-bold text-gray-900"></h3>
                        <p id="modalCreatedAt" class="mt-1 text-sm text-gray-600"></p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span id="modalStatus" class="px-3 py-1.5 text-xs font-semibold rounded-lg"></span>
                        <button onclick="closeTicketModal()" class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <!-- Pestañas del Modal -->
                <div class="flex border-t border-gray-300 px-6">
                    <button class="modalTab px-4 py-3 text-sm font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent active transition-colors" data-tab="details">
                        Detalles
                    </button>
                    <button class="modalTab px-4 py-3 text-sm font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent transition-colors" data-tab="comments">
                        Comentarios
                    </button>
                </div>
            </div>

            <!-- Modal Body -->
            <div class="overflow-y-auto max-h-[calc(90vh-180px)]">
                <!-- Tab: Detalles -->
                <div id="detailsTab" class="modalTabContent p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                        <!-- Solicitante -->
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-300">
                        <h4 class="text-xs font-medium text-gray-600 mb-2 uppercase tracking-wide">Solicitante</h4>
                        <p id="modalRequesterName" class="text-base font-semibold text-gray-900"></p>
                        <p id="modalRequesterEmail" class="text-sm text-gray-600 mt-1"></p>
                    </div>

                    <!-- Tipo y Prioridad -->
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-300">
                        {{--
                        <h4 class="text-xs font-medium text-gray-600 mb-2 uppercase tracking-wide">Tipo de Solicitud</h4>
                        <p id="modalRequestType" class="text-base font-semibold text-gray-900"></p>
                        --}}
                        <div class="mt-3">
                            <h4 class="text-xs font-medium text-gray-600 mb-2 uppercase tracking-wide">Prioridad</h4>
                            <span id="modalPriority" class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg"></span>
                        </div>
                    </div>

                    <!-- Usuario Asignado -->
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-300">
                        <h4 class="text-xs font-medium text-gray-600 mb-2 uppercase tracking-wide">Usuario Asignado</h4>
                        <p id="modalAssignedUser" class="text-sm text-gray-900"></p>
                    </div>
                </div>

                <!-- Asunto -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-300 mb-6">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide">Asunto</h4>
                    <p id="modalSubject" class="text-lg font-semibold text-gray-900"></p>
                </div>

                <!-- Instituciones (ahora debajo de Asunto) -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-300 mb-6">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide">Instituciones</h4>
                    <div id="modalInstitutions" class="flex flex-wrap gap-2"></div>
                </div>

                <!-- Descripción -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-300 mb-6">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide">Descripción</h4>
                    <p id="modalDescription" class="text-base text-gray-700 whitespace-pre-line leading-relaxed"></p>
                </div>

                <!-- Comentarios -->
                <!-- <div class="bg-gray-50 rounded-lg p-4 border border-gray-300">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide">Comentarios</h4>
                    <p id="modalComments" class="text-sm text-gray-700"></p>
                </div> -->

                <!-- Archivos Adjuntos -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-300 mb-6">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                        </svg>
                        Archivos Adjuntos
                    </h4>
                    <div id="modalAttachments" class="space-y-2">
                        <!-- Los archivos se cargarán dinámicamente aquí -->
                    </div>
                </div>

                <!-- Historial de Cambios -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-300">
                    <h4 class="text-xs font-medium text-gray-600 mb-3 uppercase tracking-wide flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Historial de Cambios
                    </h4>
                    <div id="modalHistory" class="space-y-3 max-h-96 overflow-y-auto pr-2">
                        <!-- El historial se cargará dinámicamente aquí -->
                        <div class="flex items-center justify-center py-8">
                            <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <span class="ml-2 text-sm text-gray-500">Cargando historial...</span>
                        </div>
                    </div>
                    </div>
                </div>

                <!-- Tab: Comentarios -->
                <div id="commentsTab" class="modalTabContent hidden">
                    <div class="bg-gray-50 rounded-lg border border-gray-300">
                        <!-- Tabs Header -->
                        <div class="flex border-b border-gray-300">
                            <button class="commentTab flex-1 px-4 py-3 text-sm font-semibold text-gray-700 hover:bg-gray-100 transition-all border-b-2 border-transparent active" data-tab="external">
                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                </svg>
                                Externos
                            </button>
                            <button class="commentTab flex-1 px-4 py-3 text-sm font-semibold text-gray-700 hover:bg-gray-100 transition-all border-b-2 border-transparent" data-tab="internal">
                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Internos
                            </button>
                        </div>
                    </div>

                    <!-- Tab Content: Comentarios Externos (Posts) -->
                    <div id="externalTab" class="commentTabContent p-4">
                        <div id="modalComments" class="space-y-3 max-h-64 overflow-y-auto mb-4">
                            <div class="flex items-center justify-center py-8">
                                <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="ml-2 text-sm text-gray-500">Cargando comentarios...</span>
                            </div>
                        </div>
                        <!-- Formulario para agregar comentario externo -->
                        <div class="border-t border-gray-300 pt-4">
                            <form id="addCommentForm" class="flex gap-2">
                                <textarea id="commentContent" 
                                          rows="2"
                                          class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"
                                          placeholder="Escribe un comentario externo..."
                                          required></textarea>
                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-all self-end whitespace-nowrap">
                                    Enviar
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Tab Content: Comentarios Internos -->
                    <div id="internalTab" class="commentTabContent p-4 hidden">
                        <div id="internalComments" class="space-y-3 max-h-64 overflow-y-auto mb-4">
                            <div class="flex items-center justify-center py-8">
                                <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="ml-2 text-sm text-gray-500">Cargando comentarios internos...</span>
                            </div>
                        </div>
                        <!-- Formulario para agregar comentario interno -->
                        <div class="border-t border-gray-300 pt-4">
                            <form id="addInternalCommentForm" class="flex gap-2">
                                <textarea id="internalCommentContent" 
                                          rows="2"
                                          class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none text-sm"
                                          placeholder="Escribe un comentario interno (solo visible para el equipo)..."
                                          required></textarea>
                                <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-all self-end whitespace-nowrap">
                                    Enviar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="px-6 py-4 bg-gray-850 border-t border-gray-700 flex justify-end gap-3">
                <button onclick="closeTicketModal()" class="px-5 py-2.5 bg-gray-700 text-white rounded-lg font-semibold hover:bg-gray-600 transition-all">
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Observaciones -->
<div id="observationsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-[60] overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-2xl max-w-md w-full">
            <!-- Modal Header -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Agregar Observaciones</h3>
                <p class="text-sm text-gray-600 mt-1">Por favor ingresa las observaciones sobre este cambio</p>
            </div>

            <!-- Modal Body -->
            <div class="px-6 py-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Observaciones <span class="text-red-500">*</span>
                </label>
                <textarea
                    id="observationsText"
                    rows="4"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                    placeholder="Escribe aquí tus observaciones sobre este cambio..."
                ></textarea>
                <p class="text-xs text-gray-500 mt-1">Mínimo 10 caracteres</p>
            </div>

            <!-- Modal Footer -->
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-3">
                <button onclick="closeObservationsModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition-all">
                    Cancelar
                </button>
                <button onclick="confirmObservations()" id="confirmBtn" class="px-4 py-2 rounded-lg font-semibold text-white transition-all" style="background-color: #ebe300; color: #404040;">
                    Confirmar Cambio
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Edición de Ticket -->
<div id="editTicketModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-[60] overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen p-4">
    <div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full border border-gray-300">
      <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-gray-900">Editar Ticket</h3>
        <button onclick="closeEditTicketModal()" class="text-gray-500 hover:text-gray-900">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="px-6 py-4 space-y-4">
        <input type="hidden" id="editTicketId" />
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Asunto</label>
          <input id="editSubject" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg"/>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
          <textarea id="editDescription" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg"></textarea>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Prioridad</label>
            <select id="editPriority" class="w-full px-3 py-2 border border-gray-300 rounded-lg"></select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
            <select id="editStatus" class="w-full px-3 py-2 border border-gray-300 rounded-lg"></select>
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Observaciones <span class="text-red-500">*</span>
            <span class="text-xs text-gray-500 font-normal">(Obligatorio al realizar cambios)</span>
          </label>
          <textarea id="editObservations" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400" placeholder="Describe el motivo del cambio (mínimo 10 caracteres)"></textarea>
        </div>
      </div>
      <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-3">
        <button onclick="closeEditTicketModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">Cancelar</button>
        <button onclick="submitEditTicket()" class="px-4 py-2 rounded-lg font-semibold text-white" style="background-color:#ebe300; color:#404040;">Guardar cambios</button>
      </div>
    </div>
  </div>
  </div>

<!-- JavaScript for View Toggle and Actions -->
<script>
// Catálogos y flags (global)
const STATUSES = @json(($statuses ?? collect())->map(fn($s)=>['id'=>$s->id,'name'=>$s->name])->values());
const PRIORITIES = @json(($priorities ?? collect())->map(fn($p)=>['id'=>$p->id,'name'=>$p->name])->values());
const IS_ADMIN = @json(auth()->user()->hasRole('admin'));
const IS_COMMITTEE = @json(auth()->user()->hasRole('committee'));
const PERMITTED_MAP = @json(($permittedTransitions ?? collect())->mapWithKeys(fn($group, $key) => [ $key => $group->pluck('permitted_ticket_status_id')->values() ])->toArray());

const STATUS_MAP = Object.fromEntries((STATUSES || []).map(s => [s.id, s.name]));

// ----- Modal de Edición (global) -----
function openEditTicketModal(ticket){
    const m = document.getElementById('editTicketModal');
    document.getElementById('editTicketId').value = ticket.id;
    const subj = document.getElementById('editSubject');
    const desc = document.getElementById('editDescription');
    subj.value = ticket.subject || '';
    desc.value = ticket.description || '';
    subj.disabled = !IS_ADMIN;
    desc.disabled = !IS_ADMIN;

    // Priority select
    const priSel = document.getElementById('editPriority');
    priSel.innerHTML = (PRIORITIES || []).map(p=>`<option value="${p.id}">${p.name}</option>`).join('');
    priSel.value = ticket.priority_id || (ticket.priority?.id || '');
    priSel.disabled = !(IS_ADMIN || IS_COMMITTEE);

    // Status select (filtrado por transiciones permitidas si NO es admin)
    const stSel = document.getElementById('editStatus');
    const currentStatusId = ticket.ticket_status_id || (ticket.ticket_status?.id || null);
    let optionsIds = (STATUSES || []).map(s=>s.id);
    if(!IS_ADMIN && currentStatusId){
        const allowed = (PERMITTED_MAP[String(currentStatusId)] || PERMITTED_MAP[currentStatusId] || []);
        const set = new Set([currentStatusId, ...allowed]);
        optionsIds = Array.from(set);
    }
    stSel.innerHTML = optionsIds.map(id => `<option value="${id}">${STATUS_MAP[id] || id}</option>`).join('');
    stSel.value = currentStatusId || '';

    // Guardar valores originales para detectar cambios
    originalTicketData = {
        subject: ticket.subject || '',
        description: ticket.description || '',
        priorityId: ticket.priority_id || (ticket.priority?.id || ''),
        statusId: currentStatusId || ''
    };

    document.getElementById('editObservations').value = '';
    
    // Agregar listeners para detectar cambios y resaltar el campo de observaciones
    const highlightObservations = () => {
        const obsField = document.getElementById('editObservations');
        const obsLabel = obsField.previousElementSibling;
        let hasChanges = false;
        
        if(IS_ADMIN && (subj.value !== originalTicketData.subject || desc.value !== originalTicketData.description)){
            hasChanges = true;
        }
        if(priSel.value != originalTicketData.priorityId){
            hasChanges = true;
        }
        if(stSel.value != originalTicketData.statusId){
            hasChanges = true;
        }
        
        if(hasChanges){
            obsField.classList.add('border-red-400', 'bg-red-50');
            obsField.classList.remove('border-gray-300');
        } else {
            obsField.classList.remove('border-red-400', 'bg-red-50');
            obsField.classList.add('border-gray-300');
        }
    };
    
    subj.addEventListener('input', highlightObservations);
    desc.addEventListener('input', highlightObservations);
    priSel.addEventListener('change', highlightObservations);
    stSel.addEventListener('change', highlightObservations);
    
    m.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
window.openEditTicketModal = openEditTicketModal;

function closeEditTicketModal(){
    const m = document.getElementById('editTicketModal');
    m.classList.add('hidden');
    document.body.style.overflow = 'auto';
}
window.closeEditTicketModal = closeEditTicketModal;

// Variable para almacenar valores originales del ticket
let originalTicketData = {};

async function submitEditTicket(){
    const id = document.getElementById('editTicketId').value;
    const subject = document.getElementById('editSubject').value;
    const description = document.getElementById('editDescription').value;
    const priorityId = document.getElementById('editPriority').value;
    const statusId = document.getElementById('editStatus').value;
    const observations = document.getElementById('editObservations').value.trim();
    const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const submitBtn = document.querySelector('#editTicketModal button[onclick="submitEditTicket()"]');

    // Verificar si hubo cambios
    let hasChanges = false;
    if(IS_ADMIN && (subject !== originalTicketData.subject || description !== originalTicketData.description)){
        hasChanges = true;
    }
    if(priorityId != originalTicketData.priorityId){
        hasChanges = true;
    }
    if(statusId != originalTicketData.statusId){
        hasChanges = true;
    }

    // Si hay cambios, validar que haya observaciones
    if(hasChanges && observations.length < 10){
        showToast('Debes ingresar observaciones (mínimo 10 caracteres) para realizar cambios');
        document.getElementById('editObservations').focus();
        return;
    }

    // Mostrar loading en el botón
    if(submitBtn){
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Guardando...';
    }

    const requests = [];
    
    // Solo enviar request de detalles si hay cambios en subject o description
    if(IS_ADMIN && (subject !== originalTicketData.subject || description !== originalTicketData.description)){
        requests.push(fetch(`/tickets/${id}/details`, {method:'PATCH', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrf}, body: JSON.stringify({subject, description, observations})}));
    }
    
    // Solo enviar request de prioridad si hay cambios
    if(priorityId != originalTicketData.priorityId){
        requests.push(fetch(`/tickets/${id}/priority`, {method:'PATCH', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrf}, body: JSON.stringify({priority_id: priorityId, observations})}));
    }
    
    // Solo enviar request de estado si hay cambios
    if(statusId != originalTicketData.statusId){
        requests.push(fetch(`/tickets/${id}/status`, {method:'PATCH', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrf}, body: JSON.stringify({status_id: statusId, observations})}));
    }

    let ok = true; let msg = 'Actualizado exitosamente';
    for(const r of requests){
        try{ const res = await r; const data = await res.json(); if(!res.ok || data.success === false){ ok=false; msg = data.message || 'Error al actualizar'; break; } }catch(e){ ok=false; msg = 'Error de red'; break; }
    }
    if(ok){
        showToast(msg);
        closeEditTicketModal();
        setTimeout(()=>{ window.location.reload(); }, 600);
    }else{
        showToast(msg);
        // Restaurar botón en caso de error
        if(submitBtn){
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Guardar cambios';
        }
    }
}
window.submitEditTicket = submitEditTicket;

// Variable global para el modal de observaciones
let pendingAction = null;

document.addEventListener('DOMContentLoaded', function() {
    // View Toggle
    const listViewBtn = document.getElementById('listViewBtn');
    const gridViewBtn = document.getElementById('viewGrid');
    const listView = document.getElementById('listView');
    const gridView = document.getElementById('gridView');

    if (listViewBtn && gridViewBtn) {
        listViewBtn.addEventListener('click', function() {
            listView.classList.remove('hidden');
            gridView.classList.add('hidden');
            listViewBtn.style.backgroundColor = '#404040';
            listViewBtn.style.color = 'white';
            gridViewBtn.style.backgroundColor = 'transparent';
            gridViewBtn.style.color = '#404040';
        });

        gridViewBtn.addEventListener('click', function() {
            listView.classList.add('hidden');
            gridView.classList.remove('hidden');
            gridViewBtn.style.backgroundColor = '#404040';
            gridViewBtn.style.color = 'white';
            listViewBtn.style.backgroundColor = 'transparent';
            listViewBtn.style.color = '#404040';
        });
    }



    // Los filtros ahora se aplican en el servidor, no en el cliente
    // El formulario se envía automáticamente cuando cambian los valores

    // Funciones del Modal de Detalle
    window.openTicketModal = function(ticket) {
        const modal = document.getElementById('ticketModal');

        // Configurar colores de estado
        const estadoColors = {
            'Recibida': 'bg-gray-600 text-white',
            'En revisión técnica': 'bg-blue-600 text-white',
            'En evaluación del comité': 'bg-purple-600 text-white',
            'Aprobada / Pendiente de presupuesto': 'bg-yellow-600 text-white',
            'En desarrollo': 'bg-yellow-600 text-white',
            'En pruebas': 'bg-orange-600 text-white',
            'En confirmación del comité': 'bg-pink-600 text-white',
            'Cerrada': 'bg-green-600 text-white',
            'Rechazada / En espera': 'bg-red-600 text-white'
        };

    // Funciones de edición están definidas en ámbito global arriba

        // Configurar colores de prioridad
        const priorityColors = {
            'Alta': 'bg-red-100 text-red-800',
            'Media': 'bg-yellow-100 text-yellow-800',
            'Baja': 'bg-green-100 text-green-800'
        };

        // Llenar datos del modal
        document.getElementById('modalTicketNumber').textContent = ticket.ticket_number || 'N/A';
        document.getElementById('modalCreatedAt').textContent = 'Creado el ' + new Date(ticket.created_at).toLocaleString('es-ES');

        const statusSpan = document.getElementById('modalStatus');
        statusSpan.textContent = ticket.ticket_status.name;
        statusSpan.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg ' + (estadoColors[ticket.ticket_status.name] || 'bg-gray-600 text-white');

        document.getElementById('modalRequesterName').textContent = ticket.requester_user.name;
        document.getElementById('modalRequesterEmail').textContent = ticket.requester_user.email;
        // document.getElementById('modalRequestType').textContent = ticket.request_type.name;

        const prioritySpan = document.getElementById('modalPriority');
        prioritySpan.textContent = ticket.priority.name;
        prioritySpan.className = 'inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-lg ' + (priorityColors[ticket.priority.name] || 'bg-gray-100 text-gray-800');

        const modalInstitutionsEl = document.getElementById('modalInstitutions');
        if (modalInstitutionsEl) {
            const insts = (ticket.institutions || []);
            if (insts.length === 0) {
                modalInstitutionsEl.innerHTML = '<span class="text-sm text-gray-500">Sin instituciones</span>';
            } else {
                modalInstitutionsEl.innerHTML = insts.map(i => `
                    <span class="inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full border" style="background-color:#E2E2E2; border-color:#E2E2E2; color:#404040;">
                        ${(i.acronym || i.name || '').toString()}
                    </span>
                `).join('');
            }
        }
        document.getElementById('modalAssignedUser').textContent = ticket.assigned_user_id ? 'Administrador' : 'Sin asignar';
        document.getElementById('modalSubject').textContent = ticket.subject || 'Sin asunto';
        document.getElementById('modalDescription').textContent = ticket.description || 'Sin descripción';
        document.getElementById('modalComments').textContent = ticket.comments || 'Sin comentarios';

        // Cargar archivos adjuntos
        const attachmentsContainer = document.getElementById('modalAttachments');
        attachmentsContainer.innerHTML = '';

        if (ticket.attachments && ticket.attachments.length > 0) {
            ticket.attachments.forEach(file => {
                const fileItem = document.createElement('a');
                fileItem.href = '/storage/' + file.file_path;
                fileItem.target = '_blank';
                fileItem.className = 'flex items-center gap-3 p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors group';

                const fileIcon = getFileIcon(file.file_extension);

                fileItem.innerHTML = `
                    <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center flex-shrink-0">
                        ${fileIcon}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-white truncate">${file.file_name}</p>
                        <p class="text-xs text-gray-400">${formatFileSize(file.file_size)} • ${file.file_extension.toUpperCase()}</p>
                    </div>
                    <svg class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                `;

                attachmentsContainer.appendChild(fileItem);
            });
        } else {
            attachmentsContainer.innerHTML = '<p class="text-sm text-gray-400">No hay archivos adjuntos</p>';
        }

        // Cargar historial del ticket
        loadTicketHistory(ticket.id);

        // Cargar comentarios externos e internos
        loadTicketComments(ticket.id);
        loadInternalComments(ticket.id);

        // Mostrar modal
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    };

    // Función para cargar el historial del ticket
    async function loadTicketHistory(ticketId) {
        const historyContainer = document.getElementById('modalHistory');

        // Mostrar loader
        historyContainer.innerHTML = `
            <div class="flex items-center justify-center py-8">
                <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-2 text-sm text-gray-500">Cargando historial...</span>
            </div>
        `;

        try {
            const response = await fetch(`/tickets/${ticketId}/history`);
            const data = await response.json();

            if (data.success && data.histories.length > 0) {
                historyContainer.innerHTML = '';

                data.histories.forEach((history, index) => {
                    const historyItem = document.createElement('div');
                    historyItem.className = 'relative pl-8 pb-6 border-l-2 border-gray-300 last:pb-0 last:border-l-0';

                    // Color del indicador según el tipo de estado
                    const statusColors = {
                        'Recibida': 'bg-gray-500',
                        'En revisión técnica': 'bg-blue-500',
                        'En evaluación del comité': 'bg-purple-500',
                        'Aprobada / Pendiente de presupuesto': 'bg-yellow-500',
                        'En desarrollo': 'bg-yellow-500',
                        'En pruebas': 'bg-orange-500',
                        'En confirmación del comité': 'bg-pink-500',
                        'Cerrada': 'bg-green-500',
                        'Rechazada / En espera': 'bg-red-500'
                    };

                    // Colores para prioridades
                    const priorityColors = {
                        'Alta': 'bg-red-500',
                        'Media': 'bg-yellow-500',
                        'Baja': 'bg-green-500'
                    };

                    // Determinar el tipo de cambio (estado o prioridad)
                    const isPriorityChange = history.action_type === 'priority_change';
                    
                    // Determinar el color del indicador
                    let indicatorColor = 'bg-gray-500';
                    if (isPriorityChange) {
                        // Para cambios de prioridad, usar color fijo amber
                        indicatorColor = 'bg-amber-500';
                    } else if (history.new_status) {
                        // Para cambios de estado, usar el color según el estado
                        indicatorColor = statusColors[history.new_status] || 'bg-gray-500';
                    }

                    const changeIcon = isPriorityChange ?
                        '<svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>' :
                        '<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>';

                    // Construir el HTML de los badges de cambio
                    let changeDisplay = '';
                    if (history.old_status && history.new_status) {
                        let oldBadgeColor, oldTextColor, newBadgeColor, newTextColor;
                        
                        if (isPriorityChange) {
                            // Colores para prioridades con texto blanco
                            const priorityBadgeColors = {
                                'Alta': { bg: 'bg-red-500', text: 'text-white' },
                                'Media': { bg: 'bg-yellow-500', text: 'text-white' },
                                'Baja': { bg: 'bg-green-500', text: 'text-white' },
                                'Sin prioridad': { bg: 'bg-gray-400', text: 'text-white' }
                            };
                            const oldColors = priorityBadgeColors[history.old_status] || { bg: 'bg-gray-100', text: 'text-gray-700' };
                            const newColors = priorityBadgeColors[history.new_status] || { bg: 'bg-gray-100', text: 'text-gray-900' };
                            oldBadgeColor = oldColors.bg;
                            oldTextColor = oldColors.text;
                            newBadgeColor = newColors.bg;
                            newTextColor = newColors.text;
                        } else {
                            // Colores para estados
                            oldBadgeColor = 'bg-gray-100';
                            oldTextColor = 'text-gray-700';
                            newBadgeColor = 'bg-gray-100';
                            newTextColor = 'text-gray-900';
                        }
                        
                        changeDisplay = `
                            <span class="text-xs font-medium ${oldTextColor} ${oldBadgeColor} px-2 py-1 rounded">${history.old_status}</span>
                            <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                            </svg>
                            <span class="text-xs font-semibold ${newTextColor} ${newBadgeColor} px-2 py-1 rounded">${history.new_status}</span>
                        `;
                    } else if (history.new_status) {
                        changeDisplay = `<span class="text-xs font-semibold text-gray-900 bg-gray-100 px-2 py-1 rounded">${history.new_status}</span>`;
                    }

                    historyItem.innerHTML = `
                        <!-- Indicador circular -->
                        <div class="absolute left-[-6px] top-1 w-3 h-3 ${indicatorColor} rounded-full border-2 border-white"></div>

                        <!-- Contenido -->
                        <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-200">
                            <div class="flex items-start justify-between mb-2">
                                <div class="flex items-center gap-2 flex-wrap">
                                    ${changeIcon}
                                    ${changeDisplay}
                                </div>
                                <span class="text-xs text-gray-500 whitespace-nowrap ml-2">${history.created_at}</span>
                            </div>
                            <p class="text-sm text-gray-700 mb-1">${history.description || 'Sin descripción'}</p>
                            <div class="flex items-center gap-1 text-xs text-gray-500">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                <span>${history.user}</span>
                            </div>
                        </div>
                    `;

                    historyContainer.appendChild(historyItem);
                });
            } else {
                historyContainer.innerHTML = `
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <p class="mt-2 text-sm text-gray-500">No hay historial disponible</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error al cargar el historial:', error);
            historyContainer.innerHTML = `
                <div class="text-center py-8">
                    <svg class="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="mt-2 text-sm text-red-600">Error al cargar el historial</p>
                </div>
            `;
        }
    }

    // Función para cargar los comentarios del ticket (Posts - Externos)
    async function loadTicketComments(ticketId) {
        const commentsContainer = document.getElementById('modalComments');

        // Mostrar loader
        commentsContainer.innerHTML = `
            <div class="flex items-center justify-center py-8">
                <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-2 text-sm text-gray-500">Cargando comentarios...</span>
            </div>
        `;

        try {
            const response = await fetch(`/api/tickets/${ticketId}/posts`);
            const data = await response.json();

            if (data.success && data.posts && data.posts.length > 0) {
                commentsContainer.innerHTML = '';

                data.posts.forEach((post) => {
                    const commentItem = document.createElement('div');
                    commentItem.className = 'bg-white rounded-lg p-4 shadow-sm border border-blue-200';

                    // Obtener el nombre del usuario - puede ser string o objeto
                    const userName = typeof post.user === 'object' ? (post.user?.name || 'Usuario') : (post.user || 'Usuario');
                    const userInitial = userName.charAt(0).toUpperCase();
                    
                    // Parsear la fecha correctamente
                    let createdAt = 'Fecha desconocida';
                    try {
                        const date = new Date(post.created_at);
                        createdAt = date.toLocaleString('es-ES', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    } catch (e) {
                        createdAt = post.created_at || 'Fecha desconocida';
                    }

                    commentItem.innerHTML = `
                        <div class="flex items-start gap-3">
                            <!-- Avatar del usuario -->
                            <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 text-white font-semibold">
                                ${userInitial}
                            </div>
                            <!-- Contenido del comentario -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="text-sm font-semibold text-gray-900">${userName}</span>
                                    <span class="text-xs text-gray-500">${createdAt}</span>
                                </div>
                                <p class="text-sm text-gray-700 whitespace-pre-wrap break-words">${post.content || post.title || 'Sin contenido'}</p>
                                <span class="inline-block mt-2 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Externo</span>
                            </div>
                        </div>
                    `;

                    commentsContainer.appendChild(commentItem);
                });
            } else {
                commentsContainer.innerHTML = `
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <p class="mt-2 text-sm text-gray-500">No hay comentarios externos aún</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error al cargar los comentarios:', error);
            commentsContainer.innerHTML = `
                <div class="text-center py-8">
                    <svg class="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="mt-2 text-sm text-red-600">Error al cargar los comentarios</p>
                </div>
            `;
        }

        // Guardar el ticketId para usarlo en el formulario
        window.currentTicketId = ticketId;
    }

    // Función para cargar comentarios internos (TicketComments)
    async function loadInternalComments(ticketId) {
        const internalContainer = document.getElementById('internalComments');

        // Mostrar loader
        internalContainer.innerHTML = `
            <div class="flex items-center justify-center py-8">
                <svg class="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-2 text-sm text-gray-500">Cargando comentarios internos...</span>
            </div>
        `;

        try {
            const response = await fetch(`/api/tickets/${ticketId}/internal-comments`);
            const data = await response.json();

            if (data.success && data.comments && data.comments.length > 0) {
                internalContainer.innerHTML = '';

                data.comments.forEach((comment) => {
                    const commentItem = document.createElement('div');
                    commentItem.className = 'bg-white rounded-lg p-4 shadow-sm border border-green-200';

                    // Obtener el nombre del usuario - puede ser string u objeto
                    const userName = typeof comment.user === 'object' ? (comment.user?.name || 'Usuario') : (comment.user || 'Usuario');
                    const userInitial = userName.charAt(0).toUpperCase();
                    
                    // Parsear la fecha correctamente
                    let createdAt = 'Fecha desconocida';
                    try {
                        const date = new Date(comment.created_at);
                        createdAt = date.toLocaleString('es-ES', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    } catch (e) {
                        createdAt = comment.created_at || 'Fecha desconocida';
                    }

                    commentItem.innerHTML = `
                        <div class="flex items-start gap-3">
                            <!-- Avatar del usuario -->
                            <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 text-white font-semibold">
                                ${userInitial}
                            </div>
                            <!-- Contenido del comentario -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="text-sm font-semibold text-gray-900">${userName}</span>
                                    <span class="text-xs text-gray-500">${createdAt}</span>
                                </div>
                                <p class="text-sm text-gray-700 whitespace-pre-wrap break-words">${comment.content || comment.comment || 'Sin contenido'}</p>
                                <span class="inline-block mt-2 px-2 py-1 text-xs bg-green-100 text-green-800 rounded">Interno</span>
                            </div>
                        </div>
                    `;

                    internalContainer.appendChild(commentItem);
                });
            } else {
                internalContainer.innerHTML = `
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <p class="mt-2 text-sm text-gray-500">No hay comentarios internos aún</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error al cargar comentarios internos:', error);
            internalContainer.innerHTML = `
                <div class="text-center py-8">
                    <svg class="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="mt-2 text-sm text-red-600">Error al cargar comentarios internos</p>
                </div>
            `;
        }
    }

    // Manejador de pestañas del modal (Detalles/Comentarios)
    document.querySelectorAll('.modalTab').forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Remover clase active de todos los tabs
            document.querySelectorAll('.modalTab').forEach(t => {
                t.classList.remove('active', 'border-b-blue-600', 'text-blue-600');
                t.classList.add('border-b-transparent', 'text-gray-700');
            });
            
            // Agregar clase active al tab clickeado
            this.classList.add('active', 'border-b-blue-600', 'text-blue-600');
            this.classList.remove('border-b-transparent', 'text-gray-700');
            
            // Ocultar todos los tab contents
            document.querySelectorAll('.modalTabContent').forEach(content => {
                content.classList.add('hidden');
            });
            
            // Mostrar el tab content seleccionado
            document.getElementById(tabName + 'Tab').classList.remove('hidden');
        });
    });

    // Manejador de pestañas de comentarios (Externos/Internos)
    document.querySelectorAll('.commentTab').forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Remover clase active de todos los tabs de comentarios
            document.querySelectorAll('.commentTab').forEach(t => {
                t.classList.remove('active', 'border-b-blue-600', 'text-blue-600');
                t.classList.add('border-b-transparent', 'text-gray-700');
            });
            
            // Agregar clase active al tab clickeado
            this.classList.add('active', 'border-b-blue-600', 'text-blue-600');
            this.classList.remove('border-b-transparent', 'text-gray-700');
            
            // Ocultar todos los tab contents de comentarios
            document.querySelectorAll('.commentTabContent').forEach(content => {
                content.classList.add('hidden');
            });
            
            // Mostrar el tab content seleccionado
            document.getElementById(tabName + 'Tab').classList.remove('hidden');
        });
    });

    // Manejador del formulario de comentarios externos
    document.addEventListener('submit', function(e) {
        if (e.target.id === 'addCommentForm') {
            e.preventDefault();
            const content = document.getElementById('commentContent').value.trim();
            const ticketId = window.currentTicketId;

            if (!content || !ticketId) {
                showToast('Por favor completa el comentario');
                return;
            }

            const submitBtn = e.target.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';

            fetch('/api/posts', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    ticket_id: ticketId,
                    content: content
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('commentContent').value = '';
                    loadTicketComments(ticketId);
                    showToast('Comentario externo agregado exitosamente');
                } else {
                    showToast(data.message || 'Error al agregar comentario');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('Error al agregar comentario');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Enviar';
            });
        }
    });

    // Manejador del formulario de comentarios internos
    document.addEventListener('submit', function(e) {
        if (e.target.id === 'addInternalCommentForm') {
            e.preventDefault();
            const content = document.getElementById('internalCommentContent').value.trim();
            const ticketId = window.currentTicketId;

            if (!content || !ticketId) {
                showToast('Por favor completa el comentario interno');
                return;
            }

            const submitBtn = e.target.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';

            fetch('/api/tickets/' + ticketId + '/internal-comments', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    content: content
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('internalCommentContent').value = '';
                    loadInternalComments(ticketId);
                    showToast('Comentario interno agregado exitosamente');
                } else {
                    showToast(data.message || 'Error al agregar comentario interno');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('Error al agregar comentario interno');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Enviar';
            });
        }
    });

    // Función para obtener ícono según extensión
    function getFileIcon(extension) {
        const icons = {
            'pdf': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>',
            'doc': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>',
            'docx': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>',
            'jpg': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>',
            'png': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>',
            'jpeg': '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>',
        };
        return icons[extension.toLowerCase()] || '<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>';
    }

    // Función para formatear tamaño de archivo
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    window.closeTicketModal = function() {
        const modal = document.getElementById('ticketModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    };

    // Cerrar modal al hacer clic fuera
    document.getElementById('ticketModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeTicketModal();
        }
    });

    // Funciones para el dropdown de estados
    window.toggleDropdown = function(ticketId) {
        const dropdown = document.getElementById('dropdown-' + ticketId);
        const allDropdowns = document.querySelectorAll('[id^="dropdown-"]');

        // Cerrar todos los dropdowns excepto el actual
        allDropdowns.forEach(d => {
            if (d.id !== 'dropdown-' + ticketId) {
                d.classList.add('hidden');
            }
        });

        // Toggle el dropdown actual
        if (dropdown) {
            dropdown.classList.toggle('hidden');
        }
    };

    // Función para mostrar toast
    window.showToast = function(message) {
        const toast = document.getElementById('toast');
        const toastMessage = document.getElementById('toastMessage');

        if (toast && toastMessage) {
            toastMessage.textContent = message;
            toast.classList.remove('hidden');
            toast.style.display = 'block';

            // Agregar animación
            toast.style.animation = 'slideInRight 0.3s ease-out';

            setTimeout(() => {
                toast.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => {
                    toast.classList.add('hidden');
                    toast.style.display = 'none';
                }, 300);
            }, 3000);
        } else {
            console.log('Toast message:', message);
        }
    };

    // Función para actualizar el estado del ticket
    window.updateTicketStatus = function(ticketId, statusId, statusName) {
        console.log('updateTicketStatus llamado con:', {ticketId, statusId, statusName});

        // Cerrar todos los dropdowns
        document.querySelectorAll('[id^="dropdown-"]').forEach(d => d.classList.add('hidden'));

        // Guardar los datos para usar después de confirmar
        pendingAction = {
            type: 'status',
            ticketId: ticketId,
            statusId: statusId,
            statusName: statusName
        };

        console.log('pendingAction guardado:', pendingAction);

        // Abrir modal de observaciones
        console.log('Intentando abrir modal de observaciones...');
        openObservationsModal();
    };

    // Funciones para el dropdown de prioridad
    window.toggleDropdownPriority = function(ticketId) {
        const dropdown = document.getElementById('dropdown-priority-' + ticketId);
        const allDropdowns = document.querySelectorAll('[id^="dropdown-priority-"]');

        // Cerrar todos los dropdowns excepto el actual
        allDropdowns.forEach(d => {
            if (d.id !== 'dropdown-priority-' + ticketId) {
                d.classList.add('hidden');
            }
        });

        // Toggle el dropdown actual
        if (dropdown) {
            dropdown.classList.toggle('hidden');
        }
    };

    // Función para actualizar la prioridad del ticket
    window.updateTicketPriority = function(ticketId, priorityId, priorityName) {
        // Cerrar todos los dropdowns
        document.querySelectorAll('[id^="dropdown-"]').forEach(d => d.classList.add('hidden'));

        // Guardar los datos para usar después de confirmar
        pendingAction = {
            type: 'priority',
            ticketId: ticketId,
            priorityId: priorityId,
            priorityName: priorityName
        };

        // Abrir modal de observaciones
        openObservationsModal();
    };

    // Funciones para el modal de observaciones
    window.openObservationsModal = function() {
        console.log('openObservationsModal ejecutado');
        const modal = document.getElementById('observationsModal');
        const textarea = document.getElementById('observationsText');

        console.log('Modal encontrado:', modal);
        console.log('Textarea encontrado:', textarea);

        if (!modal) {
            console.error('❌ No se encontró el modal de observaciones!');
            return;
        }

        if (!textarea) {
            console.error('❌ No se encontró el textarea de observaciones!');
            return;
        }

        textarea.value = ''; // Limpiar el campo
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';

        console.log('✅ Modal abierto correctamente');
        setTimeout(() => textarea.focus(), 100);
    };

    window.closeObservationsModal = function() {
        const modal = document.getElementById('observationsModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
        pendingAction = null; // Limpiar la acción pendiente
    };

    window.confirmObservations = function() {
        console.log('🔵 confirmObservations ejecutado');

        const observations = document.getElementById('observationsText').value.trim();
        const confirmBtn = document.getElementById('confirmBtn');

        console.log('📝 Observaciones:', observations);
        console.log('📋 Pending action:', pendingAction);

        // Validar que haya observaciones
        if (observations.length < 10) {
            console.log('❌ Validación falló: menos de 10 caracteres');
            showToast('Las observaciones deben tener al menos 10 caracteres');
            return;
        }

        if (!pendingAction) {
            console.log('❌ No hay acción pendiente');
            showToast('Error: No hay acción pendiente');
            closeObservationsModal();
            return;
        }

        // IMPORTANTE: Guardar pendingAction en variable local ANTES de cerrar el modal
        const action = {...pendingAction};

        // Deshabilitar el botón mientras se procesa
        if (confirmBtn) {
            confirmBtn.disabled = true;
            confirmBtn.textContent = 'Procesando...';
        }

        console.log('✅ Validación pasada, cerrando modal...');

        // Cerrar el modal de observaciones (esto hace pendingAction = null)
        closeObservationsModal();

        // Ejecutar la acción según el tipo usando la copia local
        if (action.type === 'status') {
            console.log('🔄 Ejecutando cambio de estado');
            executeStatusChange(action.ticketId, action.statusId, observations);
        } else if (action.type === 'priority') {
            console.log('🔄 Ejecutando cambio de prioridad');
            executePriorityChange(action.ticketId, action.priorityId, observations);
        }
    };

    // Función para ejecutar el cambio de estado
    function executeStatusChange(ticketId, statusId, observations) {
        console.log('Enviando request de cambio de estado:', {
            ticketId,
            statusId,
            observations
        });

        fetch(`/tickets/${ticketId}/status`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                status_id: statusId,
                observations: observations
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                showToast('Estado actualizado exitosamente');
                setTimeout(() => location.reload(), 1000);
            } else {
                showToast(data.message || 'Error al actualizar el estado');
            }
        })
        .catch(error => {
            console.error('Error completo:', error);
            showToast('Error al actualizar el estado');
        });
    }

    // Función para ejecutar el cambio de prioridad
    function executePriorityChange(ticketId, priorityId, observations) {
        console.log('Enviando request de cambio de prioridad:', {
            ticketId,
            priorityId,
            observations
        });

        fetch(`/tickets/${ticketId}/priority`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                priority_id: priorityId,
                observations: observations
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                showToast('Prioridad actualizada exitosamente');
                setTimeout(() => window.location.reload(), 1000);
            } else {
                showToast(data.message || 'Error al actualizar la prioridad');
            }
        })
        .catch(error => {
            console.error('Error completo:', error);
            showToast('Error al actualizar la prioridad');
        });
    }

    // Actualizar el event listener para cerrar ambos tipos de dropdowns
    document.addEventListener('click', function(e) {
        if (!e.target.closest('[id^="dropdown-"]') &&
            !e.target.closest('button[onclick^="toggleDropdown"]') &&
            !e.target.closest('button[onclick^="toggleDropdownPriority"]')) {
            const allDropdowns = document.querySelectorAll('[id^="dropdown-"]');
            allDropdowns.forEach(d => d.classList.add('hidden'));
        }
    });
});
</script>

<style>
/* Toast animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

#toast:not(.hidden) {
    animation: slideInRight 0.3s ease-out;
}

.view-toggle {
    color: #6B7280;
}

.view-toggle.active {
    background: #4F46E5;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}

.view-toggle:hover:not(.active) {
    background-color: #374151;
    color: #818CF8;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animaciones suaves */
.ticket-row, .ticket-card {
    transition: all 0.2s ease-in-out;
}

.ticket-card:hover {
    transform: translateY(-4px);
}

/* Scrollbar personalizada */
.overflow-x-auto::-webkit-scrollbar,
#modalHistory::-webkit-scrollbar,
#modalComments::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track,
#modalHistory::-webkit-scrollbar-track,
#modalComments::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb,
#modalHistory::-webkit-scrollbar-thumb,
#modalComments::-webkit-scrollbar-thumb {
    background: #9CA3AF;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover,
#modalHistory::-webkit-scrollbar-thumb:hover,
#modalComments::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Estilos de paginación personalizados */
.pagination-custom nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-custom nav > div {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.pagination-custom nav span,
.pagination-custom nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    border: 1px solid #D1D5DB;
    background-color: #FFFFFF;
    color: #404040;
}

.pagination-custom nav a {
    background-color: #FFFFFF;
    color: #404040;
    text-decoration: none;
}

.pagination-custom nav a:hover {
    background-color: #404040;
    color: #FFFFFF;
}

.pagination-custom nav span[aria-current="page"] {
    background-color: #ebe300;
    color: #404040;
    font-weight: 600;
}

.pagination-custom nav span[aria-disabled="true"] {
    background-color: #FFFFFF;
    color: #9CA3AF;
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-custom nav svg {
    width: 1rem;
    height: 1rem;
}

/* Ocultar texto "Previous" y "Next" */
.pagination-custom nav span:first-child,
.pagination-custom nav span:last-child,
.pagination-custom nav a:first-child,
.pagination-custom nav a:last-child {
    padding: 0.375rem;
}

.pagination-custom nav span:first-child svg,
.pagination-custom nav span:last-child svg,
.pagination-custom nav a:first-child svg,
.pagination-custom nav a:last-child svg {
    margin: 0;
}

/* Estilos para pestañas del modal */
.modalTab {
    cursor: pointer;
    transition: all 0.2s ease;
}

.modalTab.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
}

.modalTabContent {
    transition: opacity 0.2s ease;
}

.modalTabContent.hidden {
    display: none;
}
</style>
@endsection