@extends('voyager::master')

@section('content')
    <div class="page-content">
        @include('voyager::alerts')
        
        <div class="row">
            <!-- Infoboxes -->
            <div class="col-md-3 col-sm-6">
                <div class="panel widget center bgimage" style="margin-bottom:0;overflow:hidden;background-image:url('{{ asset('images/widget-backgrounds/01.jpg') }}');">
                    <div class="dimmer"></div>
                    <div class="panel-content">
                        <i class="voyager-group"></i>
                        <h4>Total Tickets</h4>
                        <p>{{ $stats['total'] }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="panel widget center bgimage" style="margin-bottom:0;overflow:hidden;background-image:url('{{ asset('images/widget-backgrounds/02.jpg') }}');">
                    <div class="dimmer"></div>
                    <div class="panel-content">
                        <i class="voyager-paper-plane"></i>
                        <h4>En Espera</h4>
                        <p>{{ $stats['waiting'] }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="panel widget center bgimage" style="margin-bottom:0;overflow:hidden;background-image:url('{{ asset('images/widget-backgrounds/03.jpg') }}');">
                    <div class="dimmer"></div>
                    <div class="panel-content">
                        <i class="voyager-refresh"></i>
                        <h4>En Progreso</h4>
                        <p>{{ $stats['in_progress'] }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="panel widget center bgimage" style="margin-bottom:0;overflow:hidden;background-image:url('{{ asset('images/widget-backgrounds/04.jpg') }}');">
                    <div class="dimmer"></div>
                    <div class="panel-content">
                        <i class="voyager-check"></i>
                        <h4>Cerrados</h4>
                        <p>{{ $stats['closed'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-md-8">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h2 style="margin-top:0;">Tickets de Soporte</h2>
                            @if(!in_array(Auth::user()->role_id, [1, 4]))
                                <a href="{{ route('tickets.create') }}" class="btn btn-success btn-add-new">
                                    <i class="voyager-plus"></i> Crear Nuevo Ticket
                                </a>
                            @endif
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Categoría</th>
                                        <th>Plataforma</th>
                                        <th>Título</th>
                                        <th>Usuario</th>
                                        <th>Estado</th>
                                        <th>Creado</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($tickets as $ticket)
                                    <tr>
                                        <td>#{{ $ticket->id }}</td>
                                        <td>
                                            <span class="label label-default">{{ $ticket->category->name ?? 'General' }}</span>
                                        </td>
                                        <td>
                                            @if($ticket->platform == 'plex')
                                                <span class="label label-warning">Plex</span>
                                            @elseif($ticket->platform == 'emby')
                                                <span class="label label-success">Emby</span>
                                            @else
                                                <span class="label label-info">Jellyfin</span>
                                            @endif
                                        </td>
                                        <td><strong>{{ Str::limit($ticket->title, 30) }}</strong></td>
                                        <td>
                                            @if($ticket->user)
                                                {{ $ticket->user->name ?? $ticket->user->email ?? $ticket->user->plex_user_name ?? 'Desconocido' }}
                                                <br>
                                                <small class="text-muted">{{ class_basename($ticket->user_type) }}</small>
                                            @else
                                                <span class="text-danger">Desconocido</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $statusLabels = [
                                                    'waiting' => ['class' => 'danger', 'text' => 'En Espera'],
                                                    'in_progress' => ['class' => 'primary', 'text' => 'En Progreso'],
                                                    'closed' => ['class' => 'default', 'text' => 'Cerrado'],
                                                ];
                                                $currentStatus = $statusLabels[$ticket->status] ?? ['class' => 'default', 'text' => $ticket->status];
                                            @endphp
                                            <span class="label label-{{ $currentStatus['class'] }}">
                                                {{ $currentStatus['text'] }}
                                            </span>
                                        </td>
                                        <td>{{ $ticket->created_at->diffForHumans() }}</td>
                                        <td>
                                            <a href="{{ route('tickets.show', $ticket->id) }}" class="btn btn-sm btn-warning" style="display:inline-block; margin-right:5px;">
                                                <i class="voyager-eye"></i> Ver
                                            </a>
                                            @if(in_array(Auth::user()->role_id, [1, 4]))
                                                <form action="{{ route('tickets.destroy', $ticket->id) }}" method="POST" style="display:inline-block;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Estás seguro de eliminar este ticket y todos sus archivos? Esta acción no se puede deshacer.')">
                                                        <i class="voyager-trash"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center">No se encontraron tickets.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="pull-right">
                            {{ $tickets->links() }}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-info-circled"></i> Tips de Soporte</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <strong>Prioridad:</strong> Atiende siempre primero los tickets en estado <span class="label label-danger">En Espera</span>.
                            </li>
                            <li class="list-group-item">
                                <strong>Claridad:</strong> Sé claro y conciso en tus respuestas. Usa capturas si es necesario.
                            </li>
                            <li class="list-group-item">
                                <strong>Estado:</strong> Recuerda cerrar los tickets una vez resueltos para mantener el tablero limpio.
                            </li>
                            <li class="list-group-item">
                                <strong>Privacidad:</strong> Nunca pidas contraseñas en el chat. Usa las herramientas oficiales de restablecimiento si es necesario.
                            </li>
                        </ul>
                        <hr>
                        <h4>Acciones Rápidas</h4>
                        <p>Usa la barra de búsqueda en el módulo de clientes para encontrar rápidamente detalles referenciados en los tickets.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .panel.widget .panel-content {
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        .panel.widget .dimmer {
            background-color: rgba(0,0,0,0.5);
        }
        .bgimage {
            background-size: cover;
            background-position: center;
        }
    </style>
@endsection